Поговорим о том, как создаются
Web-странички. Для этого используется особый язык
HTML (HyperText Markup Language — язык гипертекстовой разметки).
Этот язык определяет набор специальных
команд, называемых тегами и используемых для задания форматирования
или назначения тех или иных элементов Web-страницы.
Особые теги используются для размещения
на веб-страницах графических изображений, аудио- и
видеоклипов и прочих так называемых внедренных объектов. Кажется,
я вас напугал.
Но, несмотря на кажущуюся сложность, Web-
страницы не представляют собой ничего сложного.
Это обычные текстовые файлы, созданные
в стандартном Блокноте или аналогичном простейшем текстовом редакторе.
И содержат они текст, тот самый текст,
который вы хотите поместить на страницы, только размеченный особым
образом... Да что тут говорить! Лучше все показать на примере.
Это простейшая вэб-страничка, сделанная
для примера в Блокноте. Чтобы увидеть эту страничку воочию, откройте
Блокнот, наберите приведенный ниже код и сохраните в файле с именем
1.1.htm.
После этого откройте полученный файл в
Web-обозревателе, для чего достаточно дважды щелкнуть по нему
мышью.
Теперь давайте рассмотрим сам HTML-код
нашей первой странички.
<НTML>
<HEAD>
<ТIТLЕ>Это моя первая страница</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Пример моей первой страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном
<1>Блокноте</1>
и отображенная в <I>Microsoft Internet Explorer</I>.</P>
</BODY>
</HTML>
<Н1>Пример моей первой страницы</Н1>
<Р> Это простейшая Web-страничка, созданная в стандартном
<1>Блокноте</1>
и отображенная в <I>Microsoft Internet Explorer</I>.</P>
Вы видите какие-то слова, заключенные в
угловые скобки < и >.
Это и есть теги HTML. Они задают форматирование
текста. Скажем, строка <1>Блокноте</1> будет выведена
курсивом, т. к. теги <i> и </i> задают курсивное начертание
текста.
Причем, тег <i> помечает начало курсивного
фрагмента (открывающий тег), а тег </i> — конец (закрывающий
тег). А собственно фрагмент, заключенный между открывающим и закрывающим
тегами, называется содержимым тега.
Это были теги физического форматирования
текста, т. е. просто задающие, как текст должен выглядеть в окне
Web-обозревателя.
Теперь рассмотрим теги логического форматирования,
которые позволяют разбить текст на отдельные логические блоки.
В нашем небольшом фрагменте это теги <р>
и <HI> (и соответствующие им закрывающие теги </Р>
И </HI>). Они задают соответственно обычный текстовый параграф
и заголовок первого уровня; при этом Web-обозреватель будет знать,
что <н1>пример Web-страницы</н1> — это заголовок,
и отобразит его соответствующим образом.
Как и в предыдущем случае, открывающий тег
помечает начало логического блока текста, а закрывающий — конец.
Здесь мы говорили о так называемых парных
тегах, когда открывающему тегу соответствует закрывающий. HTML
определяет также набор одинарных тегов.
Один из них — это тег вставки графического
изображения <IMG>. <IMG SRC="picture.gif">
Здесь мы видим, что само графическое изображение хранится в отдельном
файле picture.gif
То есть, изображение — это один из внедренных
элементов Web-страницы. Тег <IMG> содержит в себе параметр
SRC, задающий имя файла изображения (такие параметры называются
атрибутами тега) .
=============
Web-обозреватель, встретив в HTML-коде
страницы тег <IMG>, загружает файл, чье имя задано атрибутом
SRC, И отображает его.
Осталось рассмотреть совсем немного тегов,
используемых для служебных целей и не отображаемых web-обозревателем.
Они так и называются — невидимые теги.
Парный тег <BODY>. . .</BODY>
используется для выделения тела Web- страницы, т. е. той ее части,
которая будет отображаться в окне Web- обозревателя.
Кроме тела, Web-страница также должна
содержать задаваемый парным тегом <HEAD>. . .</HEAD>
заголовок, где помещается служебная информация. Этот заголовок
не выводится браузером,
а используется для внутренних нужд.
Не путайте заголовок Web-страницы и обычный
текстовый заголовок, задаваемый тегом <HI>!) Среди этой
служебной информации может быть название страницы, показываемое
в заголовке окна Web-обозревателя; оно задается парным тегом <TITLE>.
. .</TITLE>. Давайте рассмотрим заголовок нашей страницы.
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
Собственно, заголовок содержит только название
нашей страницы, помеченное тегом <TITLE>. . .</TITLE>.
Но в подавляющем большинстве случаев заголовок
содержит множество других данных, необходимых как вэб-обозревателю,
так и другим программам, обеспечивающим функционирование Интернета
и WWW.
Мы пока не будем их рассматривать. Взгляните
еще раз на HTML-код нашей страницы. Заметьте, что одни теги вложены
в другие. Так, тег <i> вложен в тег <р>, тег <р>
— в тег <BODY>, а тег <BODY> — в тег <HTML>.
Такая вложенность или иерархия тегов в
HTML встречается на каждом шагу. Давайте представим ее в виде
схемы.
<HTML>
<HEAD>
<TITLE>
<BODY>
<H1>
<P>
<I>
Здесь убраны мешающие нам закрывающие теги
и их содержимое. Величина отступа показывает уровень вложенности
того или иного тега. Так, тег <BODY> имеет первый уровень
вложенности, а тег <HI> — второй.
Теги предыдущих уровней вложенности называются
родительскими тегами или родителями, а теги последующих уровней
— дочерними тегами или потомками. Например, для тега <HEAD>
родительским тегом будет <нтмl>, а дочерним — <TITLE>.
Для тега <BODY> родителем будет тег <HTML>, а потомками
— теги <Н1>, <Р> И <I>.
Весь HTML-код Web-страницы вложен внутрь
парного тега <HTML>. . .</HTML>. Этот тег находится
на самом высшем, нулевом, уровне вложенности и не имеет родителя.
Наверное, я уже перегрузил вас информацией,
и вам может показаться, что HTML — это что-то запредельно сложное.
На самом деле, все это очень просто, и вы можете легко создавать
простейшие Web-странички вручную.
И в подтверждение этого давайте немного
изменим код нашей страницы. Например, выделим название фирмы Microsoft
жирным шрифтом. Тег, задающий "жирность", — <в>..
.</в>.
Заметьте, как мы вложили один тег в другой
(эти теги выделены). Теперь слово "Microsoft" будет
набрано и жирным шрифтом, и курсивно. Только обратите внимание
на порядок вложенности тегов и не нарушайте его.
Если же вы случайно допустите ошибку и поместите
теги так: <Р>Это простейшая Web-страничка, созданная в стандартном
<1>Блокноте</1>
и отображенная в <BXI>Microsoft</B> Internet Explorer</I>.</P>
Тогда web-обозреватель может и не отобразить
ваше творение. Запомните простое правило: закрывающие теги должны
повторяться в порядке, обратном порядку соответствующих им открывающих
тегов.
Сохраните полученный файл и откройте его
в любом Web-обозревателе. Как видите, ничего особо сложного в
языке HTML нет. Единственная сложность — это
запомнить все его теги, но это вопрос времени и опыта.
Для того чтобы различные программы Web-обозревателей
правильно отображали одну и ту же Web-страницу, язык HTML должен
быть стандартизирован.
Наряду с тегами HTML, стандартизированными
WWWC (стандартные тэги), Web-обозреватели поддерживают множество
нестандартных тегов.
Эти теги были введены разработчиками той
или иной программы вэб-обозревателя, чтобы получить преимущество
перед конкурентами.
Они надеялись, что эти фирменные расширения
впоследствии войдут в стандарт HTML, но этим надеждам так и не
суждено было сбыться.
Однако теги остались, и они все так же поддерживаются.
Мы опишем эти теги наряду со стандартными, но предупреждаем вас,
что они поддерживаются не всеми программами.
=========================
Версия 4.01 станет последней версией языка
HTML. В дальнейшем он будет постепенно заменен своим потомком
— языком XHTML (extensible HyperText Markup Language — расширяемый
язык гипертекстовой разметки).
Этот язык основан на популярном языке описания
данных XML (extensible Markup Language — расширяемый язык разметки).
Вообщем, говорить на эту тему можно бесконечно,
для короткого урока, я думаю достаточно. Всевозможных обучающих
материалов (платных и бесплатных) по созданию веб-страниц
и сайтов в сети можно найти ОЧЕНЬ много!
Если разбегаются глаза и сами затрудняетесь
с выбором - можете написать
мне.
Поделитесь с друзьями или поставьте закладку на эту страницу,
если планируете зайти на нее позже ... (Как создаются вэб-страницы
Язык HTML | Сделать страницу сайта )
