2015-09-07
170
Создание web-документов.
Язык HTML достаточно прост в изучении, интуитивен и близок к разговорному английскому языку.
Язык HTML состоит из набора тэгов.
Тэг - элемент HTML, представляет из себя текст, заключенный в угловые скобки <>, является активным элементом, изменяющим представление следующей за ним информации. Может иметь некоторые атрибуты. Обычно имеются два тэга - открывающий и закрывающий.
В языке HTML существуют 3 основных тэга, которые присутствуют на всех страницах, вне зависимости от их содержания:
· <HTML> - Сообщает браузеру, что документ создан на языке HTML.
· <HEAD> - Содержит вводную и заголовочную части HTML-документа.
· <BODY> - Содержит основной текст и информацию страницы.
Эти тэги необходимы Web-браузеру для определения различных частей HTML-документа, они не оказывают прямого влияния на внешний вид WEB-страницы. Они необходимы для того, чтобы последующие нововведения в HTML правильно интерпретировали вашу страницу, а также для того, чтобы она выглядела одинаково в часто используемых браузерах (IE, Mozila, Opera и др.).
Эти тэги сообщают браузеру, что текст между ними следует интерпретировать как HTML-текст. Поскольку документы HTML только текстовые, тэг <HTML> говорит о том, что файл написан на языке HTML (Hyper Text Markup Language - Язык гипертекстовой разметки).
Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов. Для этого наберите <HTML> в самом начале текста. Затем наберите его напарника - </HTML> - в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Тэг с символом «/» является закрывающим тэгом. Большинство HTML-тэгов парные: один открывает (<HTML>), другой закрывает (</HTML>). Их действие распространяется только на тот текст, который находится между ними.
Итак, сейчас наша страница выглядит таким образом:
| файл: index.html |
| <HTML> </HTML> |
Открыв на браузере эту страницу, мы ничего не увидим. Пока мы не завершили работу над <HEAD> и </HEAD>.
Теперь введем тэги <HEAD> и </HEAD>. Они должны быть между тэгами <HTML> и </HTML>. Эти тэги отмечают ту информацию в нашем документе, которая будет служить названием.
В этих тэгах должна содержаться следующая информация:
· <TITLE>Моя страница</TITLE> - Между этими двумя тэгами необходимо ввести заголовок Вашей странички.
· <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> - Эту строчку нужно вставить, если Вы создаете свой документ на блокноте или другом простейшем текстовом редакторе, которая будет сообщать браузерам кодировку языка, на которой написана страница.
Так же не забываем указать тэги <BODY></BODY>, которые расположены как и тэги <HEAD> внутри тэга <HTML>, сразу за закрывающим тэгом </HEAD>.
Посмотрим, как выглядит страничка теперь:
| файл: 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, где расположена информация об авторе, если данная страница не создана, то браузер нам сообщит, что он не может найти запрашиваю страницу.
У многих браузеров существует история посещенных страниц. Скажем, если мы когда-то были на нашем сайте, и заходили в раздел про меня, то мы увидим эту ссылку другим цветом. По умолчанию этот цвет фиолетовый, но изменив в <BODY> значение VLINK="LIME", мы увидим посещенную ссылку салатовым цветом. А еще можно сделать так, чтобы кликая на ссылку, скрывающаяся за ней страница открывалась в новом окне. Синтаксис таков:
| <a target="_blank" href="about.html">Про меня</a> |
Отсюда видно, что кроме параметра HREF (что значит "направление", "расположение"), здесь присутствует target="_blank". Этот параметр и дает команду открывать ссылку в новом окне.
