2015-03-22
441
В качестве примера создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов.
Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся с тега <!DOCTYPE>. В ней браузер получит информацию о том, какому стандарту соответствует документ, без данного тэга ваш код и CSS не пройдут проверку.
Например, строка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
сообщит браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.
Затем следуют строки:
<HTML> -!необязательный элемент (указывает браузеру, что это HTML-документ).
<HEAD> -!начало заголовка документа - определяет место, где помещается различная информация, не отображаемая в теле документа.
Внутри блока <HEAD>...</HEAD>, в заголовке располагаются метаданные (специальная группа инструкций <META>) – информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и прочее. Все тэги META не видны при просмотре документа. Обратите внимание, что закрывающий тег </META> запрещен!
Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы – «Windows-1251».
<META http-equiv="Content-Type" content="text/html; charset= windows-1251 ">
Следующие две строки нужны для индексации страницы поисковыми системами.
<META name="Description" content= "краткое описание сайта / страницы ">
<META name="Keywords" content= "ключевые слова через запятую / смысловая нагрузка страницы">
Далее идет тег <BODY>, который определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты). Начальный и конечный теги необязательны
Тег имеет ряд необязательных атрибутов. Причём цвет можно назначать, используя значение цвета в виде RRGGBB-формата (в виде шестнадцатеричного кода), например "FF0000" присваивает красный цвет, либо, используя константы цвета, например "yellow" присваивает желтый цвет, соответственно. Атрибуты тэга <BODY> приведены в таблице 6.1.
Таблица 6.1 – Атрибуты тэга <BODY>
| Атрибут | Назначение |
| bgcolor | Устанавливает цвет фона документа. |
| background | Указывает на url-адрес изображения – фона документа. |
| text | Устанавливает цвет текста документа. |
| link="константа цвета или RGB-формат" | Устанавливает цвет гиперссылок. |
| vlink="константа цвета или RGB-формат" | Устанавливает цвет посещенных гиперссылок. |
| alink="константа цвета или RGB-формат" | Устанавливает цвет активных гиперссылок при нажатии мышкой. |
| bgproperties=fixed | Фоновое изображение прокручиваться не будет, то есть текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только в Internet Explorer. |
Эти параметры (атрибуты) можно объединять, например:
<BODY bgcolor="white" text="Black" font face="Arial,'Comic Sans MS',Courier">
В данном примере цвет фона – белый, цвет текста – чёрный, название шрифта – Arial, Comic Sans MS, Courier. Может задаваться несколько шрифтов через запятую; при этом браузером будет использоваться первый найденный поддерживаемый шрифт (см. ниже).
Параметры базового шрифта (шрифта по умолчанию) задаются при помощи тега BASEFONT, например, если записан код:
<basefont size="2">
то это означает, что браузер присвоит всему документу размер шрифта по умолчанию – 2.
Затем необходимо указать титул документа (тег <TITLE>), то есть надпись, которая будет выводиться в заголовке окна браузера. Название должно быть не более 40 символов. При форматировании текста (см. ниже) title может выступать атрибутом в абзаце – всплывающей подсказкой.
<TITLE>Страничка начинающего порталостроителя</TITLE>
</HEAD> – завершаем заголовок.
После заголовка открывается тело документа <BODY>. В нем находится содержание документа. Тело документа и сам документ заканчивается тегами:
</BODY> и </HTML>
Алгоритм создания шаблона страницы:
Шаг 1. Откройте обычный блокнот. При этом следует учесть, что программа «Блокнот» поддерживает только основное форматирование, поэтому случайное сохранение специального форматирования в документах, в которых должен остаться чистый текст, исключено. Это особенно полезно при создании HTML-документов для простых вэб–страниц, так как особые знаки или другое форматирование могут не отображаться на опубликованных вэб–страницах и даже могут приводить к возникновению ошибок.
Шаг 2. Напишите код html-страницы в блокноте (например, текст тегов рассмотренных в данном разделе – все, что было приведено в угловых скобках)
Шаг 3. Сохраните документ, например как index.html и кликните на нем мышкой. После чего должен запуститься браузер, в окне которого на белом фоне черными буквами будет выведен текст и красными буквами ссылка, цвет которой изменится на черный, при наведении курсора.
