Уроки HTML'а. Урок # 1
Язык HTML не сложен для изучения, но в
нем есть несколько тонкостей. На самом деле HTML в основном интуитивен
и его легко читать. Он близок к английскому. В любом случае, HTML учить
легче чем английский...
Независимо от того, как
выглядит ваша страница и какую информацию вы хотите отобразить,
существует три тега, которые в соответствии со стандартами HTML должны
присутствовать на каждой странице:
<HTML> - Сообщает браузеру, что документ создан на HTML.
<HEAD> - Отмечает вводную и заголовочную части HTML-документа.
<BODY> - Отмечает основной текст и информацию.
Эти
тэги необходимы Web-браузеру для определения различных частей
HTML-документа, они не оказывают прямого влияния на внешний вид
WEB-страницы. Они необходимы для того, чтобы последующие нововведения в
HTML правильно интерпритировали вашу страницу, а также для того, чтобы
она выглядела одинаково в частоиспользуемых браузерах. Например, на
хостинге (место, где вы расположите веб-страницу) веб-сервером,
создавая список имеющихся HTML-документов (подобных вашему),
запускается программа, которая использует только эти тэги. Таким
образом, если на странице нет этих тэгов, она не будет включена в этот
список. Список этот используется для поиска по хостингу. К примеру,
если Вы расположете свою страничку на Narod.RU, то при наличии этих тэгов Ваша страница будет доступна для поиска по Narod.RU.
<HTML> и </HTML>.
Эти
тэги сообщают браузеру, что текст между ними следует интерпритировать
как HTML-текст. Поскольку документы HTML чисто текстовые, тэг
<HTML> говорит о том, что файл написан на языке HTML
(HyperTextMarkupLanguage - Язык гипертекстовой разметки).
Создавая
новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов.
Для этого наберите <HTML> в самом начале текста. Затем наберите
его напарника - </HTML> - в конце. Теперь весь текст, написанный
между ними, будет принят браузерам за текст HTML. Вы заметили, что во
втором тэге присутствует символ "/"? Правый слэш (/)
используется для обозначения закрывающихся тэгов. Большинство
HTML-тэгов парные: один открывает (<HTML>), другой закрывает
(</HTML>). Их действие распространяется только на тот текст,
который находится между ними.
Итак, сейчас наша страница выглядит таким образом:
файл: index.html
|
<HTML>
</HTML>
|
Открыв на браузере эту страницу, мы ничего не увидим. Пока мы не завершили работу над <HEAD> и </HEAD>.
Теперь
введем тэги <HEAD> и </HEAD>. Они должны быть между тэгами
<HTML> и </HTML>. Эти тэги отмечают ту информацию в нашем
документе, которая будет служить названием.
В этих тэгах должна содержаться следующая информация:
<TITLE>Design LAB</TITLE> - Между этими двумя тэгами необходимо ввести заголовок Вашей странички.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> - Эту строчку нужно вставить, если Вы создаете свой документ на блокноте или другом простейшем текстовом редакторе.
Посмотрим как выглядит страничка теперь:
файл: index.html
|
<HTML>
<HEAD>
<TITLE>Design LAB</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY>
</BODY>
</HTML>
|
Но
открыв на браузере эту страницу, мы опять ничего не увидим. Почему
перед некоторыми тэгами я оставляю свободное место? Это чтобы самому
зрительно не запутаться, то есть, для лучшей наглядности и
удобочитаемости всего текста. Логическая цепочка открытия и закрытия
больших (длинных) тэгов дает понять что за чем открывается и когда
закроется.
Теперь перейдем к тэгам <BODY> и
</BODY>. С их помощью мы сможем изменить стиль страницы, перед
тем как набрать текст. К примеру, нам необходимо сделать так, чтобы
текст был белым на черном фоне, а ссылки (посещенные, непосещенные или
локальные) - светло-зелеными. В этом случае, необходимо дополнить тэг
<BODY> следующими параметрами:
файл: index.html
|
<HTML>
...
<BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">
...
</BODY>
</HTML>
|
BGCOLOR="BLACK" - цвет фона - черный.
TEXT="WHITE" - цвет текста - белый.
LINK="LIME" - цвет непосещенной ссылки - салатовый.
VLINK="LIME" - цвет посещенной ссылки - салатовый.
ALINK="LIME" - цвет локальной ссылки - салатовый.
Итак,
теперь мы, наконец, попробуем создать текст. К примеру, нам нужно
сделать ссылку на страничку с информацией о создателе сайта.
файл: index.html
|
<HTML>
<HEAD>
<TITLE>Design LAB</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">
На этой страничке есть информация <a href="about.html">про меня</a>
</BODY>
</HTML>
|
Открыв эту страничку на браузере в таком виде, мы получим примерно следующее.
preview: index.html
|
На этой страничке есть информация про меня
|
При наведении курсора мыши на надпись про меня он (курсор) примет форму руки. И далее, кликнув по надписи, мы попадем на страничку about.html., где расположена информация об авторе.
Итак,
на этом уроке мы с Вами изучили тэги <HTML> и </HTML>,
<HEAD> и </HEAD>, <TITLE> и </TITLE>,
<BODY> и </BODY>, а также затронули тему ссылок. На
следующем уроке мы продолжим разговор о ссылках.
|
Шаг 2: Размещаем в интернет | |
-------------------------
|