Что бы создать собственный сайт нужно
иметь небольшое представление о HTML. Собственно,
на языке разметки гипертекста (HTML, Hyper Text Markup Language)
построено большее количество документов Web.
Документы, написанные на HTML, просматриваются
специальными программами - Web-браузерами, которые
форматируют набор тегов из текстового файла в
привычные документы Web.
Сам HTML документ - это структура различных
элементов, которые определяются тегами. Теги, в
свою очередь, имеют свою структуру. Так, теги
можно разделить на две основные категории:
- теги, описывающие свойства документа;
- теги, определяющие вид документа в браузере.
Далее рассмотрим сам процесс создания
HTML-документов.
Создание HTML-документа.
HTML-документ можно создать двумя способами:
- используя обычный текстовой редактор;
- используя специализированный HTML редактор или
конвертор.
Выбор способа создания HTML-документа зависит
только от автора этого документа, от его вкусов и
понятия удобства. Я, например, считаю, что лучше
всего создавать HTML в обычном Windows NotePad. Если же Вы
в деле создания HTML новичок, то лучше сначала
попробовать WYSIWYG-редакторы HTML(WYSIWYG - 'Что ты видишь
то и получишь') такие, как Microsoft FrontPage 3.0. В них
создание документов происходит в графическом
режиме, т.е. Вы редактируете документ сразу в
таком виде, как он будет выглядеть в браузере.
Основы создания
HTML-документа.
HTML-документ это текстовый файл с расширением .html
или .htm, в котором тест размечен HTML-тегами. Все
теги начинаются символом '<' и заканчиваются
символом '>'. Обычно имеется пара тегов -
стартовый и завершающий тег, между которыми
помещается размечаемая инфомация.
Например:
<b>Информация:</b>
Здесь стартовым тегом является тег <b>,
а завершающим </b>. Завершающий тег
отличатся от стартового лишь тем, что у него
перед текстом в скобках <> стоит символ '/'
(слэш).
Есть теги, которые не требуют завершающих тегов.
Например, тег определяющий абзац (<p>) может и
не иметь завершающего тега </p>. Его
использование придаёт исходному коду
HTML-документа лучшую структуру.
Структура HTML-тегов.
Браузер, читающий HTML-страницу отображает её в
окне используя структуру HTML-тегов.
Хотя каждый HTML-документ имеет свою структуру, в
каждом должно присутсвовать три главных части:
- Объявление HTML;
- Заголовочная часть;
- Тело документа.
Объявление HTML.
Первым тегом в документе должен быть тег <html>,
а последним </html>. Пара этих тегов сообщает
программе просмотра что между ними заключен
документ в формате HTML.
HTML-теги заголовочной
части. Рассмотрим подробнее структуру тегов
внутри пары <html></html>. Сразу после тега
<html> должна идти заголовочная часть документа,
которая заключена между тегами <head></head>.
Между этими тегами помещаются разнообразные
сведения, однако наиболее важным элементом
является название документа, которое появляется
в строке заголовка окна браузера и в списках
BookMark. Программы-спайдеры поисковых систем
используют названия страниц для построения баз
данных поисковых систем. Чтобы дать название
HTML-документу, поместите текст между парой
<title></title>. Название должно быть не более 40
символов, т.к. название, привышающее размер в 40
символов непомещается в строку заголовка окна
браузера.
Помимо названия документа в заголовочной части
могут присутствовать теги, перечисленные в
Таблице 1:
Стартовый
Завершающий
Описание
<BASE>
Указывает базовые
адрес документа или содержит информацию о
нацеливании на фрейм.
<META>
Позволяет указывать
мета-информацию, такую, как ключевые слова или
кодировку страниц.
<STYLE>
</STYLE>
Содержит информацию о
таблице стилей
<SCRIPT>
</SCRIPT>
Содержит скрипт,
подлежащий исполнению браузером
<LINK>
Определяет связи с
другими документами
<ISINDEX>
Показывает, что
документ присутствует в индексе поиска
<TITLE>
</TITLE>
Содержит описательное
название документа
ТАБЛИЦА 1.
HTML-теги тела документа.
Третьей главной частью документа является его
тело. Оно следует сразу за заголовком и находится
между тегами <body></body>. Первый из них должен
стоять сразу после тега </head>, а второй - перед
тегом </html>.
Тело HTML-документа - это место, куда автор помещает
информацию, отформатированную средствами HTML.
Внешний вид (цвет текста, цвет ссылок и др.)
HTML-докумета зависит от атрибутов тега <body>.
- TEXT. Этот атрибут определяет цвет текста
документа. По умолчанию берется черный.
- BGCOLOR. Этот атрибут задаёт цвет фона
документа. Взятый по умолчанию цвет зависит от
браузера.
- BACKGROUND. В качестве фона документа можно
использовать изображение. Для этого необходимо
использовать этот атрибут со значением image.gif
или image.jpg, где image - это имя файла
изображения с указанием пути к нему.
- LINK. Определяет цвет непосещенных
гиперссылок.
- VLINK. Определяет цвет посещенных гиперссылок.
- ALINK. Определяет цвет активных гиперссылок.
Для форматирования информации внутри тела
документа используются следующие теги:
Заголовки - теги <Hx> и </Hx>.
При разметке HTML-документа различают обычный
текст от текста заголовков. Заголовки
определяются тегом <Hx>, где 'x'- это значение
уровня заголовка, т.е. H1-заголовок вышего уровня,
H2-заголовок следующего уровня после H1 и так
далее. Тег <Hx> должен иметь завершающий тег
</Hx>.
Обычный текст - теги <p> и </p>.
Теги абзаца делят форматируемый текст на абзацы.
Т.к. HTML безразличен символам обрыва строки и
возврата каретки, которые приминяются в
текстовых редакторах, то для форматирования
абзацов в HTML используются теги <p> и </p>. У
тега <p> одним из атрибутов является атрибут align.
От его значения зависит положение текста на
странице: по центру (align=center), по ширине (align=justify),
по правому краю(align=right) и по левому краю ('по
умолчанию').
Внутри абзаца и заголовков можно форматировать
стиль символов используя теги, перечисленные в
Таблице 2.
Стартовый
Завершающий
Эффект
<I>
</I>
КУРСИВ
<B>
</B>
Полужирный шрифт.
<U>
</U>
Подчеркнутый
<BIG>
</BIG>
Крупный шрифт
<SMALL>
</SMALL>
Мелкий шрифт
<STRIKE>
</STRIKE>
Перечеркнутый шрифт
<SUB>
</SUB>
нижний индекс
<SUP>
</SUP>
Верхний индекс
<TT>
</TT>
Машинописный шрифт
(символы одинаковой ширины)
ТАБЛИЦА 2.
Центрирование элементов документа - тег
<center>.
Тег <center> позволяет все элементы,
расположенные между тегами <center> и </center>
расположить по центру.
Тег преформатирования <pre>. Текст внутри тегов <pre> и </pre> будет иметь
на экране такое же форматирование, как и в
текстовом файле HTML-документа.
Например:
HTML-код:
<pre>
Номер по порядку Дата Размер
---------------- ---- ------
1 15/02 120
2 10/01 100
3 11/02 148
4 1/02 100
</pre>
Вот что будет на экране:
Номер по порядку Дата Размер
---------------- ---- ------
1 15/02 120
2 10/01 100
3 11/02 148
4 1/02 100
Тег обрыва строки - <br> Тег <br> используется для перевода текста с
одной строки на другую, не дожидаясь правой
границы абзаца.
Тег неразрывной строки - <NOBR> Если Вам надо что бы строка не разбивалась даже
дойдя до граници абзаца, заключите её между
тегами <nobr> и </nobr>. Такую строку браузер не
будет прерывать и для её просмотра придется
воспользоваться горизонтальной прокруткой.
Тег цитаты - <BLOCKQUOTE> Тег цитаты используется когда в документе
приводится цитата из другого источника. Текст,
отформатированный тегом <BLOCLQUOTE> отступает от
левого края на 8 пробелов.
HTML-теги, относящиеся ко
всем частям документа.
В самом HTML-документе могут встречаться символы
комментариев <!-- -->, информация между которыми
загружается браузером, но не отображается на
экране.
Приведенная выше конструкция непонятна браузеру
NNavigator если комментарием будет окружено более
одной строки. Для ибзежания конфликтов лучше
использовать следующую конструкцию:
Базовые HTML-теги
Описанные выше теги собранны в Таблицу 3 и
снабжены кратким описанием. Знание этих тегов
позволит Вам самостоятельно создавать
простейшие HTML-документы.
Стартовый
Завершающий
Описание
<HTML>
</HTML>
Обозначение
HTML-документа
<HEAD>
</HEAD>
Заголовочная часть
документа
<TITLE>
</TITLE>
Заголовок документа
<BODY>
</BODY>
Тело документа
<H1>
</H1>
Заголовок абзаца
первого уровня
<H2>
</H2>
Заголовок абзаца
второго уровня
<H3>
</H3>
Заголовок абзаца
третьего уровня
<H4>
</H4>
Заголовок абзаца
четвертого уровня
<H5>
</H5>
Заголовок абзаца
пятого уровня
<H6>
</H6>
Заголовок абзаца
шестого уровня
<P>
</P>
Абзац
<PRE>
</PRE>
Форматированный текст
<BR>
Перевод строки без
конца абзаца
<BLOCKQUOTE>
</BLOCKQUOTE>
Цитата
ТАБЛИЦА 3.
Благодаря этой статье Вы получили простейшие
знания о HTML и можете создавать простейшие
HTML-документы. В скором времени я собираюсь выложить хороший учебник по HTML 4.0, может даже сам напишу, если желание будет :)
