Как создать сайт с помощью блокнота
| На своём компьютере в левом нижнем углу монитора нажмите кнопку "Пуск", затем - " Все программы | Стандартные | Блокнот ". |
|
| Напечатайте следующее предложение. |
|
| Нажмите " Файл | Сохранить как ". |
|
| Сохраните на рабочий стол с именем файла index.html |
|
| На рабочем столе появится соответствующий значок. |
|
| Левой кнопкой мыши щёлкните дважды по нему. В левом верхнем углу браузера вы видите свою запись. |
|
| Для того чтобы её отредактировать, закройте окно. По значку щёлкните правой кнопкой мыши и в контекстном меню выберите " Открыть с помощью | Блокнот " |
|
| Измените текст. |
|
| Нажмите " Файл | Сохранить ". |
|
| Закройте. А, теперь открыв окно браузера, вы увидите произошедшие изменения. |
|
| Если вы отправите свой файл index.html на сервер хостинг-провайдера, он станет доступным для просмотра из любой точки Земного шара. Допустим, надо изменить размер шрифта, придать ему какой-то цвет, вставить рисунки, фотографии... Как всё это сделать? А для этого нужно применить язык гипертекстовой разметки - HTML. Это язык, на котором можно "разговаривать" с браузером (Internet Explorer, Opera, MozillaFirefox, и другие). Вот почему сохранили с расширением html. А теперь удалите index.html, и вместо него сохраните на рабочий стол архив с учебным материалом. Распакуйте. Итак, у вас на рабочем столе находятся файл index.html и папка doc. Откройте на своём компьютере файл index.html. Изучите его глазами пользователя: понажимайте на ссылки,обратите внимание - что и как работает. Оставляя его открытым, приступим к изучению HTML-кода. |
HTML-код учебного сайта
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "https://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> Учебный сайт</TITLE> <META http-equiv="Content-Type" content="text/html" charset="windows-1251"> <META content="follow", allname="robots"> <META name="keywords" content="Фотографии, бурых, медведей"> <META name="description" content="Фотографии бурых медведей"> <META name="title" content="Учебный сайт"> </HEAD> <BODY bgcolor=AAAA99 text=green > <BR><BR> <H1><center> Учебный сайт</center></H1> <BR><BR><BR> <TABLE bgcolor=white border=2 width=900 align=center> <TR width=300 height=120> <TD align=left> Я - совсем крутой программист</TD> <TD align=center><A href="doc/2.html"> Переход на вторую страницу моего сайта</A></TD> <TD align=right><A href="https://mail.ru"> Электронная почта России</A></TD> </TR> <TR> <TD><IMG src="doc/2.JPG" width=300 height=250></TD> <TD><A href="doc/4.JPG"><IMG src="doc/3.JPG" width=300 height=250></A></TD> <TD><A href="https://novosibirsk.cc"><IMG src="doc/5.JPG" width=300 height=250></A></TD> </TR> <TR width=300 height=120> <TD colspan=2 align=center><A href="doc/6.MP3" ><FONT size=7> Музыка на все времена</FONT></A></TD> <TD align=right valign=bottom> Наш адрес: <A href="mailto: de6729@mail.ru"> de6729@mail.ru</A></TD> </TR> </TABLE> </BODY> </HTML> | |
Описание HTML-кода
| Для удобного изучения мы код изобразили цветным. Первые 2 строки зелёного цвета - это служебная информация по международной стандартизации. Красным цветом обозначены теги. Тег (tag - указатель, метка) - это код, идентифицирующий определённый элемент документа, например: заголовок, ссылку, таблицу. Теги заключаются в угловые скобки <>. Большинство тегов являются парными, то есть для каждого начального тега <Имя> есть конечный тег </Имя>, в котором к имени тега добавляется косая черта "/" (слеш). Самый первый тег в нашем коде <HTML>, а самый последний </HTML>. Они обозначают границы HTML-документа. Следующий тег <HEAD>, и на 11 строчке </HEAD>. Элемент HEAD обозначает заголовочную часть, и предоставляет браузеру общую информацию о HTML-файле. В контейнер HEAD вложен элемент TITLE (5 строка) - название WEB-страницы. Сюда ещё вложен элемент META. Он предназначен для поисковых роботов. Когда поисковый робот обнаружит ваш новый сайт в Интернете, он просмотрит содержимое тегов <META> и включит указанные вами ключевые слова (чёрного цвета) в свою базу данных. После заголовочной части идёт тег <BODY>, и второй снизу конечный тег </BODY>. Всё, что находится между этими тегами, является телом документа. Тег <BODY> дополнен атрибутами (синего цвета): bgcolor (цвет фона всего документа), text (цвет текста всего документа). Атрибут пишется после названия тега через пробел, и заканчивается перед закрывающей угловой скобкой. Если атрибутов несколько, то они между собой отделяются пробелами. Атрибутам мы задали соответствующее значение (чёрного цвета). Цвет можно задавать двумя способами: цифрами или английскими словами. В цифровом варианте надо использовать 6 знаков: все цифры от 0 до 9 и буквы A, B, C, D, E, F. Вот некоторые цвета: 000000 (чёрный), FFFFFF (белый), FF0000 (красный), 00FF00 (зелёный), 0000FF (синий). Кстати, отсюда пошёл термин "цифровая фотография" - Там каждый пиксель на снимке задан такими вот числами. Пиксель - это минимальный адресуемый элемент экранного изображения. Следующий видим тег <BR> (разрыв или перевод строки), то же самое, что клавиша Enter при печати. Этот тег одиночный, конечный тег со слешем ему не требуется. Если хотим сделать отступ на несколько строк, пишем например <BR><BR>. Ниже идёт тег <H1> (заголовок первого уровня). Всего бывает 6 уровней: H1 -самый крупный и H6 -самый мелкий. Внутри H1 ещё находится элемент center (выравнивание по центру окна). Также бывают left (выравнивание по левой стороне) и right (выравнивание по правой стороне). И уже внутри элемента мы видим сам текст заголовка (чёрного цвета). Чем вам не матрёшка? Ну а ниже идёт самая громоздкая конструкция - TABLE (таблица) с атрибутами bgcolor (цвет фона таблицы), border (толщина внешней рамки), width (ширина таблицы в пикселях), align (выравнивание по горизонтали). Чтобы не запутаться, код пишем не последовательно - слева направо, а сначала создаём каркас. А потом наполняем его содержанием. Вот так мы создавали таблицу. - Написали теги самой таблицы: <TABLE></TABLE>. - В ней создали 3 строки: <TR></TR><TR></TR><TR></TR>. - В первой строке создали 3 ячейки: <TD></TD><TD></TD><TD></TD>. Во второй - тоже 3, в третьей - 2 ячейки. Всё делаем на своё усмотрение. <TABLE> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> </TR> </TABLE> Теперь теги дополняем атрибутами. Здесь появятся новые атрибуты: <TR width (ширина ячеек данной строки), height (высота)>; colspan=2 (объединение двух соседних ячеек); valign (выравнивание содержимого по вертикали), top (выравнивание по верхнему краю), bottom (по нижнему), middle (центрирование). <TABLE bgcolor=whiteborder=2 width=900 align=center> <TR width=300 height=120> <TD align=left></TD> <TD align=center></TD> <TD align=right></TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> <TR width=300 height=120> <TD colspan=2 align=center></TD> <TD align=rightvalign=bottom></TD> </TR> </TABLE> И уже потом заполняем каждую ячейку: вписываем код между тегами <TD> и </TD>. Работает принцип: от простого - к сложному. Со структурой таблицы разобрались. Теперь вернёмся к нашему цветному коду. После тега <TABLE> со своими атрибутами идет тег первой строки <TR>. Ниже - тег первой ячейки <TD> с атрибутом выравнивания по левому краю. А в качестве содержимого этой ячейки выступает обычный текст. Переходим в следующую, вторую ячейку. Здесь познакомимся со ссылкой. Схема ссылки выглядит так: <A href="адрес перехода"> Текст ссылки </A> В нашем случае "Переход на вторую страницу моего сайта" - это текст ссылки, а "doc/2.html" - адрес перехода. Когда пользователь наводит курсор мыши на текст ссылки - курсор принимает вид руки. А если щёлкнуть левой кнопкой мыши по тексту ссылки, то срабатывает адрес перехода. То есть перед нами открывается страница, которая записана в адресе перехода. В нашем случае будет doc/2.html. (doc - название папки, 2.html - имя файла). Теперь поясню, для чего нужна была эта ссылка? Сайт очень редко состоит из одной страницы, их всегда несколько, и пользователь должен иметь возможность переходить от одной страницы к другой. А мы переходим к изучению 3 ячейки 1 строки нашей таблицы. Здесь тоже ссылка. Но посмотрите на адрес перехода: https://mail.ru. Это адрес всем известного почтового сервиса. А каким боком он связан с нашим сайтом? Он - никаким, а мы его через ссылку к себе привязали! Пошли дальше: 2 строка, 1 ячейка. Элемент IMG (вставка изображения) с атрибутами width (ширина) и height (высота). Схема выглядит так: <IMG src="Источник изображения"> В нашем примере источником является графический файл 2.JPG, который находится в папке doc. Если вы заметили - у нас все документы лежат в папке doc. Можно всё разложить по разным папкам. Главное, чтобы адрес в написании кода не расходился с действительностью. 2 ячейка. Здесь опять встречается ссылка. Только вместо текста ссылки стоит изображение 3.JPG. А в качестве адреса перехода - тоже изображение 4.JPG. 4.JPG - это фотография, а 3.JPG - её уменьшенная копия (Мы её создали заблаговременно с помощью программы Microsoft OfficePowerPoint). Такой способ применяется в фотогалереях. 3 ячейка. Графическая ссылка на URL-адрес (адрес какого-либо сайта, размещённого в Интернете). 3 строка, 1 ячейка. Атрибут colspan=2 (объединение двух ячеек). Ссылка на музыкальный файл 6.MP3. Кроме того, здесь текст ссылки заключён в элемент FONT (свойства шрифта). Для него предусмотрены атрибуты: size (размер шрифта от 1 до 7), color (цвет шрифта), face (гарнитура шрифта, face=Arial). И последняя ячейка. Ссылка на адрес электронной почты. Удобно тем, что при нажатии пользователем на эту ссылку на его компьютере автоматически запускается почтовая программа, и в поле "Кому" вводится нужный адрес сам. |
Редактирование HTML-файлов
| Теперь попробуйте отредактировать учебный сайт. Двумя щелчками левой кнопки мыши откройте файл index.html. Расположите окно на половину экрана. По файлу index.html щёлкните правой кнопкой мыши - "Открыть с помощью | Блокнот". Открытое окно Блокнота тоже разверните наполовину. Итак, у нас открыто 2 окна: окно браузера с учебным сайтом и Блокнот с HTML-кодом этого же сайта. |
|
| Изменения производим в Блокноте. В атрибутах bgcolor и text тега <BODY> задайте другие цвета, на своё усмотрение. В теге <TABLE> найдите атрибут border, и вместо двойки поставьте ноль. После произведённых изменений нажмите меню "Файл | Сохранить". Затем в верхней части окна браузера нажмите кнопку "Обновить". В каждом браузере она может выглядеть по-разному. |
|
|
|
| При наведении курсора мыши на эту кнопку возникает всплывающая подсказка "Обновить". И вот вы видите вступившие в силу изменения. Описаны не все теги, а только самые необходимые. Имея представление о HTML-коде, вы сами можете пополнять базу своих знаний. В поисковике можно задавать вопросы типа: "Как внедрить видео на WEB-страницу" и тому подобное. |