- заголовок
4.8 Таблицы
5. Редакторы HTML
Данное “Введение в язык HTML” первоначально было написано как электронный учебник. Сделанное на этом же языке, о (стр. 2 из 4)
2. Основы языка
В этой главе приводятся начальные сведения по языку HTML. Их достаточно для создания простейших страниц и структуры ссылок между ними.
В принципе, можно этим и ограничиться. Однако практика показывает, что почти каждый, успешно сделав несколько страниц, стремится к улучшению их оформления.
В настоящее время доступно большое количество литературы, в том числе на русском языке. Можно поискать такие руководства, а также официальное описание языка в Internet.
2.1. Структура HTML-страницы
Большинство элементов языка HTML по своей сути являются скобками. Открывающая скобка отмечает начало части страницы, обладающей некоторыми свойствами, закрывающая отмечает конец этой части. Все, что находится между скобками, одинаково с точки зрения этих свойств. Например, можно задать для части текста цвет, отличающийся от цвета остальных частей.
Скобками элементы являются именно по сути, а по форме это не скобки в традиционном виде, а конструкции следующего вида:
<слово>
выделяемая скобками часть
</слово>
<слово> задает начало выделяемой части и вид конкретных скобок (например, для изменения цвета можно задать <FONT>), а то же слово в тех же знаках < >, но с дробной чертой перед словом - окончание этой части (</FONT>). Список возможных слов фиксирован в описании языка.
Вся HTML-страница заключается в пару скобок
<HTML>
</HTML>
(Еще раз подчеркнем, что каждая скобка - это не один знак, а все, что находится между символами < >, и сами эти символы.)
Итак, все, что находится между скобками <HTML> и </HTML> - это HTML-страница. Каждая страница должна храниться в отдельном файле.
Страница состоит из двух частей - заголовка и тела.
Заголовок задает оформление страницы в целом, и может вообще отсутствовать. Так что отложим его рассмотрение на следующие главы, а здесь просто отметим, что начало заголовка отмечается скобкой <HEAD>, а конец - скобкой </HEAD>.
А вот тело отсутствовать не должно - что же это получится за страница, на которой ничего нет.
Начинается тело страницы скобкой <BODY>, заканчивается - </BODY>.
Теперь мы можем записать общую структуру страницы в таком виде:
<HTML>
<HEAD>
заголовок
</HEAD>
<BODY>
тело страницы
</BODY>
</HTML>
Если Вы поняли этот раздел, то уже сейчас можете создать простейшую HTML-страницу, в которой будет текст и ничего более. Создайте файл с любым именем и расширением .HTM, любым текстовым редактором (например, встроенным в Norton Commander или редактором Записная книжка из стандартного комплекта MS Windows 3.x/9x/2000), поместите в него приведенные элементы структуры, вместо слов "тело страницы" напечатайте свой текст - и страница готова. Смотрите ее своим броузером (Netscape, Internet Explorer, Mosaic и т.д.). В качестве заготовки можно воспользоваться файлом s1.htm в оглавлении SAMPLES данного руководства.
А теперь перейдем к рассмотрению элементов тела страницы.
2.2. Простейшие элементы языка
2.2.1. Абзацы
Если Вы попытались создать простейший вариант страницы, как это было описано в предыдущем разделе, то уже заметили, что границы строк, напечатанных Вами, полностью игнорируются броузером. В частности, не осталось и следа от разбиения на абзацы.
Так и должно быть. Все броузеры воспринимают текст файла как непрерывный поток слов, полностью игнорируя границы строк, величину интервала между словами, отступы для абзацев и заголовков и т.д. Все эти действия задаются специальными элементами языка, а расположены они вместе с текстом в файле могут быть произвольным образом - хоть в единственной суперстроке, хоть по одному слову на каждой строчке. Возможны и все промежуточные варианты, главный критерий - как удобно Вам, лишь бы слова были отделены одно от другого по крайней мере одним пробелом или переходом на новую строку.
Абзац задается включением в текст явного указания на него. Имеются несколько вариантов, например:
<BR>
<P>
Первый из них задает просто переход на новую строку, второй указывает на новый абзац. К сожалению, большинство броузеров оформляют абзацы в форме, почти не используемой в русскоязычной литературе - разделение абзацев без отступа, но с пропуском пустой строки.
Поскольку переход на новую строку выполняется в конкретном месте, задавать закрывающие скобки </BR> и </P> нет необходимости. Впрочем, если они заданы, скажем, в конце абзаца, то никак помешать не могут.
2.2.2. Заголовки
Как и в печатном тексте, заголовки могут отличаться размером букв и другими характеристиками в зависимости от степени важности.
В HTML определены 6 уровней заголовка, нумеруемых по убыванию важности от 1 до 6 и обозначаемых скобками
<H1> </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
Весь текст внутри скобок считается заголовком и выдается соответственно настройке вашего броузера.
Вот как это выглядит в моем Netscape 4.75:
Для некоторых броузеров выделение заголовка непосредственно не означает перехода на новую строку, так что если он требуется (как чаще всего это и бывает), его лучше указать явно с помощью <P> или <BR>.
2.2.3. Центрирование
В приведенном выше примере все заголовки были прижаты к левому краю окна. Если же заголовок (или какой-либо иной элемент, скажем, картинку) надо расположить посередине строки, применяются скобки
<CENTER> </CENTER>
То, что заключено между ними, будет отцентрировано.
Например, конструкция
<H3><CENTER>Это пример</CENTER></H3>
с вложенными скобками дает следующий результат:
Это пример
2.2.4. Вставка иллюстраций
В HTML-страницу можно вставить графический файл, хранимый отдельно. Способ подготовки файла некритичен - можно отсканировать изображение, нарисовать его любым графическим редактором, сохранить образ экрана монитора специальной программой-граббером и т.д. Допустимые форматы файлов (от них зависит расширение в имени) определяются броузером. Наиболее рекомендуемы форматы JPG (для полутоновых изображений) и GIF (для штриховых), поддерживаемые всеми броузерами. Форматами BMP и PCX лучше не пользоваться - броузеры их не любят (видны только в Explorer'е).
Для вставки картинки в конкретное место страницы используется указание
<IMG SRC="имя файла">
Здесь мы впервые сталкиваемся с элементом языка, в котором ключевое слово после знака < задает только вид элемента, а детализация указана другими ключевыми словами, отделенными от первого и последующих пробелами. (Здесь только 2 слова, но их бывает и больше).
Картинка вставляется именно там, где она указана, и обычно смещена влево. Но ничто не мешает ее отцентрировать. Не забывайте только указать переход на новую строку сразу за ней.
Рассмотренных элементов языка достаточно для создания полноценных страниц, поэтому описание других элементов оформления отложим, а займемся способами перехода с одной страницы на другую.
2.3. Ссылки
Простейший переход - возврат на предыдущую страницу - не требует никаких указаний на самой странице, а выполняется средствами броузера. Переход же на любую страницу по желанию автора возможен, если в явном виде задать, куда надо перейти. Для этого служит конструкция
<A HREF="имя файла">
отображаемая информация
</A>
Скобки <A HREF> - </A> задают начало и конец ссылки. После ключевого слова HREF указано имя файла, который будет отображен в случае нажатия мышью... куда? На текст, заключенный между скобками. Именно этот текст выделяется цветом и подчеркиванием в броузере.
Между скобками можно поставить не только текст, но и картинку. Тогда внутри скобок <A HREF> - </A> появятся указание на картинку <IMG>. Подчеркивание и выделение цветом здесь вряд ли будет смотреться хорошо, поэтому броузер обычно ограничивается голубой рамкой вокруг рисунка. Совсем без выделения плохо - трудно понять, что это ссылка.
2.4. Подробный пример
Для иллюстрации всего изложенного в этом разделе вернемся к приведенному во введении примеру.
Назовем для определенности 4 файла, содержащих 4 страницы, именами
p1.htm
p2.htm
p3.htm
p4.htm
(О расширениях для HTML-файлов раньше речь не заходила. Лучше всего иметь расширение .html, но поскольку в MS DOS длина расширения ограничена тремя символами, можно обойтись значением .htm, тем более что броузеры не возражают против этого.)
Далее приведены полные тексты этих страниц.
Файл p1.htm:
<HTML>
<BODY>
<p>Страница 1
<P>Текст страницы...
<P><A HREF="p2.htm">Ссылка на страницу 2</A>
<P><A HREF="p3.htm">Ссылка на страницу 3</a>
<P><A HREF="p4.htm">Ссылка на страницу 4</A>
</BODY>
</HTML>
Файл p2.htm:
<HTML>
<BODY>
<P>Страница 2
<P>Текст страницы...
<P><A HREF="p3.htm">Ссылка на страницу 3</A>
<P><A HREF="p1.htm">Вернуться на страницу 1</A>
</BODY>
</HTML>
Файл p3.htm:
<HTML>
<BODY>
<P>Страница 3
<P>Текст страницы...
<P><A HREF="p4.htm">Ссылка на страницу 4</a>
<P><A HREF="p1.htm">Вернуться на страницу 1</a>
</BODY>
</HTML>
Файл p4.htm:
<HTML>
<BODY>
<P>Страница 4
<P>Текст страницы...
<p><A HREF="p1.htm">Вернуться на страницу 1</A>
</BODY>
</HTML<
3. О возможных ошибках
Непонятные конструкции языка броузером просто игнорируются. Так сделано умышленно: ведь основное применение броузера - сеть Internet, а работающий в сети, просматривая HTML-документы на чужой машине, не должен получать от своего броузера многочисленные сообщения из-за чужих ошибок.