|
Сейчас трудно найти человека, который бы не слышал о глобальной компьютерной сети Интернет. Многие и сами пробовали путешествовать по ее лабиринтам. В этом случае Вы несомненно обращали свое внимание на искусно выполненные страницы сайтов. Это результат работы Web-дизайнеров, по сути архитекторов этих страниц. Это руководство поможет Вам освоить основные приемы создания Web-страниц.
Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) на Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW).
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/).
Для освоения HTML по этому Руководству Вам понадобятся две вещи:
Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.
Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator (или Internet Explorer). Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape Navigator (или "Обновить" в Internet Explorer), чтобы увидеть эти изменения реализованными в HTML-документе.
В настоящее время широко используются два типа редакторов HTML:
Редакторы типа "что видишь, то и получишь" (Netscape Navigator Gold, Microsoft Front Page, Home Site, Macromedia Dreamweaver). Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML -документы.
Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.
Таким образом, Вам для изучения HTML понадобится только простейший текстовый редактор и браузер. Когда Вы освоите HTML в минимальной степени, Вы сами сможете подобрать себе редактор по вкусу.
Как устроен HTML-документHTML-документ — это просто текстовый файл с расширением *.htm или *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.html-файл может быть одновременно
открыт и в Notepad, и в Netscape (Explorer).
Сохранив изменения в Notepad, просто нажмите
кнопку Reload ('перезагрузить') в Netscape
(или кнопку Refresh - 'обновить' в Explorer),
чтобы увидеть эти изменения реализованными
в HTML-документе.
</P>
</body>
</html>
Если хотите, можно посмотреть этот пример прямо сейчас. Для удобства чтения в текст здесь введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>
Этот *.html-файл может быть одновременно
открыт и в Notepad, и в Netscape (Explorer).
Сохранив изменения в Notepad, просто нажмите
кнопку Reload ('перезагрузить') в Netscape
(или кнопку Refresh - 'обновить' в Explorer),
чтобы увидеть эти изменения реализованными
в HTML-документе.
</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой или дескриптором (по-английски — tag, читается "тэг"). Все тэги НТМL по их назначению и области действия можно разделить на следующие основные группы
Большинство HTML-дескрипторов — парные, то есть на каждый открывающий десриптор вида <tag> есть закрывающий дескриптор вида </tag> с тем же именем, но с добавлением "/". Такая пара тэгов образуют контейнер. Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры по принципу "матрешки". Собственно, сам документ - это один большой контейнер который начинается с тага <HTML> и заканчивается тагом </HTML>: <HTML> Содержание документа </HTML> Дескрипторы можно вводить как большими, так и маленькими буквами. Например, дескрипторы <body>, <BODY> и <Body> будут восприняты браузером одинаково. Многие дескрипторы, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий дескриптор. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе. Обязательные дескрипторы<html> ... </html>Дескриптор <html> должна открывать HTML-документ. Аналогично, дескриптор </html> должен завершать HTML-документ. В принципе, спецификация HTML 4 допускает их необязательность, но на практике указанные дескрипторы используются для лучшей идентификации предназначения текстового файла. <head> ... </head>Эта пара дескрипторов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание дескриптора <title> ниже), в этот раздел может включаться множество служебной информации, основные элементы которой будут рассмотрены на последующих занятиях. Дескриптор <Head> не имеет атрибутов. <title> ... </title>Все, что находится между дескрипторами <title> и </title>, толкуется браузером как название документа, однако не следует путать название с именем файла HTML-документа. Netscape Navigator или Internet Explorer, например, показывают название текущего документа в заголовке окна и печатают его в левом верхнем углу каждой страницы при выводе на принтер. Название Web-страницы должно отражать ее содержание. Если оно подобрано правильно, то будет напоминать посетителю о содержании страницы, когда он его сохранит в виде закладки для наиболее посещаемых страниц. Рекомендуется название не длиннее 64 символов, но для удобного просмотра в списке закладок желательно его делать еще короче. <body> ... </body>Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа. В отличии от тага <Head>, дескриптор <Вody> имеет атрибуты, обозначающие цвет фона и текста документа, цвет гипертекстовых ссылок, указатели используемого стиля, языка и т.д. Некоторые из них также будут рассмотрены несколько позже. Заголовки и абзацыШрифты заголовков <H1> и </H1> — <H6> и </H6>Дескрипторы вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий. Реально в документе, как правило, используются 3 - 4 уровня заголовков. Стандарт языка насчитывает 11 атрибутов у тэга заголовка, основной из которых ALIGN, рассмотренный ниже. Дескрипторы абзаца <P> и </P>Такая пара тэгов описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац. Конечный дескриптор </P> не является обязательным, но используется для более четкого обозначения границ абзацев в документе. Вставляя тэг <P> мы указываем начало нового абзаца и даем броузеру команду завершить текущую строку и перейти на следующую. Перед новым абзацем автоматически вставляется пустая строка. Дескрипторы <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"). Этот атрибут может принимать следующие значения:
Значение Justify используется только для тэга <P> и к тому же реализовано не во всех типах броузеров. Примеры задания атрибутов выравнивания: <H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1> или <P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P> Подытожим все, что мы знаем, с помощью примера 2: <html> <head> <title>Пример 2</title> </head> <body> <H1 ALIGN=CENTER>Привет!</H1> <H2>Это чуть более сложный пример HTML-документа</H2> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> </body> </html> С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. Теперь мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с выделения абзаца. Текст с отступом: <BLOCKQUOTE> и </BLOCKQUOTE>Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем. Многие разработчики используют этот тэг для получения отступа текста слева. При использовании нескольких вложенных тэгов <BLOCKQUOTE> получим еще больший отступ слева на странице. Форматированный текст: <PRE> ... </PRE>В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Такой контейнер позволяет сохранять первоначальное форматирование текста со всеми пробелами и переносами при копировании его в HTML-страницу с помощью Clipboard. Например, это очень удобно при создании простых таблиц путем табуляции. Единственный недостаток - невыразительный моноширинный шрифт, которым многие броузеры заменяют шрифт оригинала. КомментарииБраузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев, которые могут занимать несколько строк. Комментарии, добавленные в исходный текст HTML-страницы, не будут видны посетителям WEB-сайта. Они предназначены для удобства чтения текста HTML-страницы. При создании таблиц или фреймов (об этом речь пойдет дальше) комментарии помогают отслеживать соответствие элементов. <!-- Это комментарий --> Непарные меткиВ этом разделе мы поговорим о метках, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами. Конец строки: <BR>Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. При этом нарушается стандартный для броузера порядок отображения текста. Например, это очень удобно при публикации стихов (см. пример 3). <html> <head> <title>Пример 3</title> </head> <body> <H1>РУСЛАН И ЛЮДМИЛА</H1> <H3>(отрывок из поэмы)</H3> <H2>А. С. Пушкин</H2> <P>У лукоморья дуб зеленый<BR> Златая цепь на дубе том:<BR> И днем и ночью кот ученый<BR> все ходит по цепи кругом;<BR> Идет направо - песнь заводит,<BR> Налево - сказку говорит.</P> <P>Там чудеса: там леший бродит,<BR> Русалка на ветвях сидит; ...</P> </body> </html> Тэг <BR> может иметь атрибут CLEAR. Он используется для того, чтобы при обтекании текстом объекта, остановить его в указанной вами точке, а затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR=:
Применяя тэг <BR> следует помнить, что ширина области просмотра HTML-страницы зависит от размера окна броузера, от разрешения экрана дисплея и т. д. Поэтому при выводе Web-страницы на экран броузер автоматически изменит длину строк в каждом абзаце текста. Блокирование конца строки: <NOBR>Таг <NОВR> (Nо Вrеаk, без обрыва) дает команду броузеру отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в таги <NОВR>, не поместится на экране, броузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там таг <ВR>. Горизонтальная линия: <HR>Горизонтальное отчеркивание (horizontal rule) применяется для разделения документа на части. С помощью одного лишь тага <НR> можно придать странице совершенно необычный вид. Метка <HR> описывает вот такую горизонтальную линию:
Метка может дополнительно включать атрибуты NOSHADE (сплошная линия), ALIGN (выравнивание), SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в пикселах или в процентах от ширины экрана). Если их не указывать (по умолчанию), то это эквивалентно присвоению атрибутам следующих значений: ALIGN=center SIZE=2 WIDTH=100%. В примере 4 приведена небольшая коллекция горизонтальных линий. <html> <head> <title>Пример 4</title> </head> <body> <H1>Коллекция горизонтальных линий</H1> <HR><BR> <HR SIZE=1 WIDTH=100%><BR> <HR ALIGN=RIGHT SIZE=4 WIDTH=50% NOSHADE><BR> <HR ALIGN=LEFT SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=50><BR> </body> </html> &-последовательностиПоскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти и другие служебные символы символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем). Далее, например: Символ "&" (амперсанд) кодируется последовательностью & Двойные кавычки (") кодируются последовательностью " Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей. Полный перечень всех &-последовательностей приведен в Приложении 1. Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа " или & не допускается. |