• 1. HTML-документы – это структурные документы.
• 2. Названия элементов можно писать в любом регистре.
• 3. Названия атрибутов можно писать в любом регистре.
• 4. Значения атрибутов зависят от регистра, особенно адреса (особенность Unix-операционных систем состоит в различной трактовке символов в разных регистрах, поэтому файлы

picture .gif и picture.GIF различны!).

• 5. Названия элементов не могут содержать пробелов.
• 6. Если значения атрибутов содержат пробелы, они должны стоять в кавычках.
• 7. Дополнительные пробелы, символы табуляции и возврата каретки игнорируются и сжимаются в один пробел.
• 8. Элементы могут быть вложены друг в друга. При этом должно соблюдаться правило вложенности. Внутри вложенного элемента помимо открывающего тега должен быть и закрывающий. Пересечения некорректны:

Структура документа HTML

9. Незнакомые элементы и атрибуты игнорируются браузерами ("снисхождение к ошибкам").

Большинство документов имеют стандартные элементы, такие как заголовок, параграфы или списки. Используя теги HTML, можно обозначать данные элементы, обеспечивая веб-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все, что необходимо чтобы прочитать HTML-документ, – это веб-браузер, который интерпретирует теги HTML и воспроизводит на экране документ в виде, который ему придает автор.

Когда веб-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом . Данный тег сообщает веб-браузеру, что документ написан с использованием HTML.

Комментарии в HTML. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Часто в комментарии "прячут" некоторые теги или целые синтаксические конструкции от старых версий браузеров, которые не способны их обработать. Комментарии могут встречаться в документе где угодно и в любом количестве. Необходимо помнить, что комментарии увеличивают объем документа, а следовательно, и время загрузки.

Общая заголовочная часть документа. Тег заголовочной части документа должен быть использован сразу после тега и более нигде в теле документа. Данный тег представляет собой общее описание документа. Стартовый тег помещается непосредственно перед тегом , размещается внутри тегов . Заголовок документа не появляется при отображении самого документа в окне.

Теги тела документа. Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа. Тело документа должно находиться между тегами и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Нх>. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и так до цифры 6. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Для большинства случаев текст такого заголовка станет жирным, и после текста будет отбита пустая строка. Важным является то, что эти теги определяют логическую структуру документа, участвуют в индексации поисковыми системами Интернет. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

Тег абзаца <Р>. В отличие от большинства текстовых процессоров, в HTML-документе игнорируются символы возврата каретки. Браузер разделяет абзацы только при наличии тега <Р>. Если не разделить абзацы тегом <Р>, то документ будет выглядеть как один большой абзац.

Тег предформатированного текста

.
Тег 
Позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тегом 
. Внутри предварительно сформатированного текста разрешается использовать: перевод строки, символы табуляции (сдвиг на восемь символов вправо), непропорциональный шрифт Courier, устанавливаемый браузером.

Теги списков.
Существует три основных вида списков в HTML-документе: нумерованный, маркированный, список описаний.
Можно создавать вложенные списки, используя различные теги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тегов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка, зависит от браузера.
Нумерованные списки. В
пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если удалить один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
 
 и завершается тегом 
 
.

Маркированные списки. Для
маркированных списков браузер обычно использует маркеры для элемента списка. Вид маркера, как правило, настраивает пользователь браузера.
Пронумерованный список начинается стартовым тегом 
 и завершается тегом 
. Каждый элемент списка начинается с тега <ы>.

Форматирование шрифта.
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, т.е. изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру.
Графика внутри HTML-документа.
Одна из наиболее привлекательных черт WEB – возможность включения графических и иных типов данных в HTML-документ.
Существует два способа использования графики в HTML-документах. Первый – внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Делается это при помощи тега . Этот тег точечный, т.е. он не закрывается. Синтаксис тега:

Обязательный параметр имеет такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру, где находится
рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день это форматы GIF, JPG, PNG. Они поддерживаются большинством браузеров.
АLТ="текст"
Данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной графикой изображений. Обычно это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство браузеров выводит пустую рамку. Тег  рекомендуется, если пользователи используют браузер, не поддерживающий графический режим, например Lynx, и для индексации в поисковых системах. Текст виден также при удержании курсора мыши в течение некоторого времени без движения над изображением в виде системной подсказки под курсором.
Большинство браузеров позволяет включать в документ фоновый рисунок, который будет дублироваться как кафельная плитка в ванной и отображаться фоном всего документа. Это второй способ. Некоторые пользователи любят фоновую графику, некоторые нет. Обычно хорошо выглядит в качестве фона для большинства документов ненавязчивый полупрозрачный рисунок (обои).
Гипертекстовые ссылки являются ключевым компонентом, обусловливающим привлекательность WEB для пользователей. Добавляя гипертекстовые ссылки (далее – ссылки), пользователь делает набор документов связанным и структурированным, что позволяет получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл. В качестве гиперссылки можно указывать текст или изображение или все вместе.
Структура ссылок в HTML-документе.
Для того чтобы браузер отобразил ссылку на URL, необходимо поместить текст или картинку внутрь тега гиперссылки. Синтаксис HTML следующий:
<А HREF="URL">текст-или-картинка-которые-будут-п одсвечены-как-ссылка 

Тег <А HREF="URL"> открывает описание ссылки, а тег  – закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом веб-браузером. Обычно этот текст отображается подчеркнутым и выделенным цветом. Изображение обрамляется прямоугольной рамкой. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).
Ссылки на метки внутри документа.
Можно делать ссылки на различные участки или разделы одного и того же документа, используя специальные скрытые метки для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только пользователь щелкнет на ссылке, браузер переместит его на указанный раздел документа, а строка, в которой стоит метка данного раздела, будет размещена на первой строке окна браузера (если хватит "длины" документа в окне браузера).
При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении. Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о HTML. В данном уроке мы познакомимся с HTML
, разберем структуру документа HTML
 и на практических примерах закрепим полученные знания.
Что такое HTML?
HTML
 расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.
Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html
 или .htm
 и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.
Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.
Структура документа HTML
Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующих HTML код:

 







...



Разберем по порядку, что входит в данную структуру:
1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

3. Затем идет область для верхней части сайта (шапки). Для этого служит тег . В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами . Далее указывается кодировка HTML документа (пятая строка). Это делается для правильно отображения кириллицы. Закрываем область шапки тегом .
4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.
5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.
6. Тело страницы открывается тегом  и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.
Таким образом, мы ответили на вопрос, что такое HTML и изучили структуру документа HTML. Полученная в данном уроке информация — это базовые понятия, без них не обойтись. О более сложных вещах мы поговорим в других уроках.
Структура
HTML-документа. Начинаем работу.
С
чего начинается HTML
Для того, чтобы текстовый файл превратился
в HTML-файл, поменять его расширение
с ".txt" на ".html" недостаточно.
Надо соблюсти "правило первой строки":
Каждый HTML-документ, отвечающий
спецификации HTML какой-либо версии,
обязан начинаться со строки декларации
версии HTML !DOCTYPE
,
которая обычно выглядит так:
Эта строка поможет браузеру определить,
как правильно интерпретировать
данный документ. В данном случае мы
говорим браузеру, что HTML соответствует
международной спецификации версии 3.2,
которая хоть и не отличается новизной,
но, в отличие от более поздних
версий, является полноценным, широко
распространенным стандартом без
каких-либо неопределенностей. Как видно
из примера, самый короткий html-документ
состоит буквально из одной строки.

 
Пример самого
 короткого HTML-документа:




 


С
чего начинается работа
На самом деле одной строкой
дело не обходится. После объявления
версии и типа документа необходимо
обозначить его начало и конец. Это
делается с помощью тега-контейнера
.
Необходимо отметить, что любой
HTML-документ открывется тегом 
и им же закрывается.
Затем, между тегами 
и 
следует разместить заголовок и тело
документа. Вот и все! Начало положено
– вы получили прекрасную заготовку.
Вот как должен выглядеть ваш базовый
HTML-файл перед началом работы:
Разжевать?
Если приведенный выше пример пояснить
схематически, получится следующее:
Из схемы видно, что документ
состоит из двух основных блоков –
"заголовка"
и "тела
документа". Заголовок
определяется с помощью элемента
HEAD

,
а тело – элементом BODY

.
Заголовок содержит
"техническую" информацию о документе,
хотя чаще всего используется только
для обозначения его названия (см. элемент
TITLE

).
Тело документа – святая
святых. Именно в нем находится все
то, что отображается на странице:
текст, картинки, таблицы. Соответственно,
делаем вывод: большинство ваших
HTML-экспериментов будет проводиться
в пространстве между тегами 
и 
(HTML 1.0) – Comment ()
Используется для создания
комментариев в любой части документа.
Все, что находится внутри , будь то
элемент или текст – будет проигнорировано
браузером (не будет обрабатываться
и выводиться на экран).
Примечания:


 
Комментарии,
 расположенные внутри элемента TITLE


 (как, впрочем, и любые другие теги)
 трактуются как текст и будут
 видны в заголовке документа. Иначе
 говоря, тег 
 внутри TITLE

 не действует.



 
Не
 ленитесь комментировать все,
 что написали. Это волшебное правило
 сэкономит вам немало времени при
 попытке разобраться в собственном
 творении пару месяцев спустя.

Заголовок html-документа
Создается с помощью
элемента HEAD

,
между тегами которого размещаются
элементы, содержащие техническую
информацию о документе. Заголовок обычно
располагается до тела документа (см.
структуру
HTML-документа).
Элементы,
относящиеся к заголовку документа:



 
Определяет начало
 и конец заголовка документа




 
Определяет имя всего
 документа, которое отображается
 в заголовке окна браузера




 
Определяет базовый
 адрес, от которого отсчитываются
 относительные линки внутри документа




 
Используется для
 вставки в документ таблицы стилей
 CSS




 
Описывает взаимосвязь
 документа с другими объектами




 
Используется для
 вставки метаданных

(HTML 1.0) – Head
Определяет начало и конец
заголовка
документа. Является
контейнером для элементов, содержащих
техническую информацию о документе.
(TITLE

,BASE

,STYLE

,LINK

,META

).
(HTML 2.0) – Title
Определяет имя всего
документа. Имя, как правило, отображается
в заголовке окна браузера. Данный
элемент обязателен

для любого HTML-документа и может быть
указан не более одного раза.
(HTML
3.2) – Base URL
Указывает базовый адрес текущего
документа (URL), который станет отправной
точкой для расчета относительных адресов
внутри документа. Элемент не имеет
конечного тега. Обязательно присутствие
хотя бы одного из атрибутов.
Атрибуты:
HREF

– определяет базовый адрес (URL) текущего
документа.
TARGET

– определяет имя фрейма, которое будет
использоваться в гиперссылках
по умолчанию. Это может вам пригодиться,
если вы хотите открывать все ссылки
документа в другом фрейме.
(HTML 3.2) – Style
Используется для вставки в документ
таблицы стилей (CSS – Cascade Style Sheet).
Атрибуты:
TYPE

– обязательный атрибут. Определяет
MIME-тип вставляемого блока стилей. Как
правило, значением этого атрибута
является "text/css".
TITLE

– определяет имя создаваемой таблицы
стилей. Необходим, если вы собираетесь
использовать несколько элементов STYLE

в одном документе. В этом случае
браузер должен спросить пользователя,
какой из предложенных стилей будет
применен к документу.
(HTML 2.0) – Link
Элемент LINK

описывает взаимосвязь документа
с другими документами на сайте,
указывая его место в иерархической
структуре сайта. Элемент не имеет
конечного тега. В заголовке может
содержаться несколько элементов LINK
.
Атрибуты:
HREF

– определяет URL объекта.
REL

– определяет тип взаимосвязи текущего
документа с объектом, определенным
атрибутом HREF.
Возможные значения:
stylesheet

– указывает на файл, содержащий
таблицу стилей (CSS) для текущего документа.
Браузер загрузит css-файл с указанного
в атрибуте HREF
адреса и применит его к текущему
документу (см. также элемент STYLE

)
home

– указывает на заглавную страницу
вашего сайта
toc,
contents
 – указывают
на файл, содержащий оглавление данного
документа.
index

– указывает на файл, содержащий
информацию для индексного поиска
по текущему документу.
glossary

– указывает на файл, содержащий
перечень терминов, относящихся к текущему
документу.
copyright

– указывает на страницу сайта,
в которой говорится о его создателях,
авторских правах и т.п.
up,
parent
 – указывает
на "родительскую" страницу
(документ, стоящий на ступеньку выше
в иерархической структуре вашего
сайта).
child

– указывает на "дочернюю"
страницу (документ, стоящий на ступеньку
ниже в иерархической структуре вашего
сайта).
next

– указывает на следующую страницу
в последовательности документов
(напр. следующую страницу электронного
каталога, документации или словаря).
previous

– указывает на предыдущую страницу
в последовательности документов.
last,
end
 – указывает
на последнюю страницу в последовательности
документов.
first

– указывает на первую страницу
в последовательности документов.
help

– указывает на страницу с подсказкой
(напр. по навигации по вашему
сайту).
TYPE

– определяет MIME-тип
для объекта, указанного в атрибуте
HREF.
Примечания:
(HTML 2.0) – Meta
Элемент МЕТА

используется для техописания документа,
которое представляет собой метаданные
в виде пары "имя-значение". С
помощью этого элемента в заголовок
документа внедряется дополнительная
полезная информация, невидимая для
пользователя, но порой просто незаменимая
для правильной индексации вашей страницы
роботами поисковых серверов. Элемент
не имеет конечного тега.
Атрибуты:
NAME

– определяет имя мета-записи. Существует
множество предопределенных имен,
некоторые из которых вы можете увидеть
в указанном ниже примере.
HTTP-EQUIV

– определяет имя мета-записи. Практически
аналогичен атрибуту NAME,
но используется лишь в случае
необходимости передачи дополнительной
информации в HTTP-заголовке.
CONTENT

– присваивает значение мета-записи,
определенной в атрибуте NAME
(или HTTP-EQUIV).
Фреймы (frames) используются для разбивки
окна браузера на несколько областей,
каждая из которых представляет собой
отдельный HTML-документ (фрейм). Как
правило, фреймы используются для
облегчения навигации по сайту,
создания навигационного меню. Тем
не менее, большинство разработчиков
избегают использования фреймов, к чему,
поверьте, имеют довольно веские основания.
Старайтесь использовать фреймы только
тогда, когда это действительно необходимо.
Элементы
для создания фреймов и работы с ними:
Примечания:
FRAMESET
(HTML 4.0) – Frame Set
Определяет фреймовую
(оконную) структуру документа: размеры
и расположение фреймов
на странице. Создаётся вместо

тела документа (то есть элемент BODY


в документе не используется).
Открывает и закрывает список
фреймов, определяемых с помощью
элемента FRAME

.
Между начальным и конечным тегами
кроме элементов FRAME

и NOFRAMES


могут находиться другие элементы
FRAMESET
.
То есть элемент FRAMESET

поддерживает вложенные конструкции
фреймов.
Атрибуты:
ROWS

– определяет количество и размеры
горизонтальных фреймов (фреймов-строк)
в окне браузера. В качестве значения
задается список размеров фреймов через
запятую. Способы задания размеров:
В процентах
от высоты рабочей области окна
браузера. Например: "30%,30%,40%";

в виде знака "*"
(звездочка), говорящего о том, что фрейм
занимает все свободное пространство
окна браузера, незанятое другими фреймами
с явно указанными размерами. Например,
звездочка в записи "25%,25%,*"
равносильна 50%;

в пикселах. Например: "75,*";
Все три способа можно
совмещать. Например, "25%,40,*"
разобъет экран на три горизонтальных
фрейма, первый из которых будет высотой
в четверть окна браузера, второй –
в 40 пикселов, а третий займет всю
оставшуюся площадь.
COLS

– определяет количество и размеры
вертикальных фреймов (фреймов-столбцов)
в окне браузера. В качестве значения
задается список размеров фреймов через
запятую. Размеры задаются так же, как и
в предыдущем атрибуте ROWS.
BORDER

– определяет ширину рамок фреймов
в пикселах. Данный атрибут действует
только в браузерах Netscape;
FRAMEBORDER

– определяет наличие рамок у содержащихся
внутри FRAMESET

фреймов. Возможные значения:
Yes

– отображать рамки;
No

или 0

– не отображать рамки;
Браузеры Netscape не поддерживают
данный атрибут в полной мере и для
глобального определения ширины рамок
используют атрибут BORDER.
FRAMESPACING

– определяет расстояние (так называемую
"серую область") между фреймами
в пикселах. Данный атрибут необходим
для создания фреймов без рамок.
Примечание:
(HTML
4.0) – Frame
Определяет
фрейм
и его свойства внутри FRAMESET
-структуры.
(см. элемент FRAMESET

)
Атрибуты:
SRC

– обязательный атрибут. Указывает адрес
(URL) HTML-файла, отображаемого в данном
фрейме.
NAME

– определяет имя данного фрейма, которое
будет в дальнейшем использоваться
для ссылки на него из других документов
с помощью атрибута TARGET
(см. элемент A

).
В качестве значения нужно указать любое
имя без пробелов с использованием
латинских символов и цифр. Имя
не должно начинаться с цифр
и специальных символов.
MARGINWIDTH

– определяет ширину (в пикселах) левого
и правого полей фрейма. Если атрибут
не указан, браузер самостоятельно
определит оптимальный размер отступа.
MARGINHEIGHT

– определяет ширину (в пикселах) верхнего
и нижнего полей фрейма. Если атрибут
не указан, браузер самостоятельно
определит оптимальный размер отступа.
SCROLLING

– определяет наличие линеек прокрутки
содержимого фрейма. Возможные значения:
yes

– отображать линейки прокрутки.
no

– не отображать линейки прокрутки.
auto

– отображать линейки прокрутки при
необходимости (если документ, указанный
в атрибуте SRC,
не умещается во фрейме).
NORESIZE

– не позволяет изменять размеры
фрейма. Данный атрибут является флагом
и не требует указания значения.
FRAMEBORDER

– определяет наличие рамок у фрейма.
Возможные значения:
yes

– отображать рамки;
no

или 0

– не отображать рамки;
Браузеры Netscape не поддерживают
данный атрибут в полной мере и для
глобального определения ширины рамок
используют атрибут BORDER
элемента FRAMESET
.

 
Пример (файл
 index.html):




 
...

 
 
 
 
 
 Ваш
 браузер
 не поддерживает
 фреймы



...

В
результате окно браузера разделится
на три фрейма, как показано ниже.
Причем frame1.html

будет иметь ширину 265 пикселов,
а frame2.html

– высоту 165.
NOFRAMES
(HTML 4.0) – No Frames
Все, что находится между
начальным и конечным тегами данного
элемента, будет отображено браузером,
если он не поддерживает фреймы.
Элемент NOFRAMES

не имеет атрибутов и должен
находиться внутри элемента FRAMESET

.

 
Пример:




 

Ваш
 браузер не поддерживает фреймы.
 Обыдно,
 да?
 
 



Теги
Команды
для браузера, говорящие, как отображать
текст, вставлять таблицы, изображения
и другие объекты, называются тегами

(от
англ.
tag


- ярлык, признак
).
Сами теги (команды) не отображаются
на экране.
Имя
тега пишется в треугольных скобках,
например, 
- тег, говорящий браузеру записывать
весь последующий текст жирным шрифтом.
Имя тега можно записывать на любом
регистре (прописными или строчными
буквами), то есть 
будет воспринято браузером так же, как
и .
Теги
бывают парные

и непарные
.
Например, тег 
говорит браузеру записывать жирным
шрифтом весь последующий текст до
команды .
В таком случае тег, дающий команду,
называют открывающим
,
а тег, отменяющий команду, закрывающим
.
Теги
могут иметь параметры

(или атрибуты).
Например, чтобы задать
цвет шрифта, используется тег font
с параметром color:

- это открывающий тег, который командует
браузеру с этого момента отображать
шрифт зеленым (в данном примере) цветом
до закрывающего тега .
Некоторые
параметры требуют обязательного указания
их значений. Для некоторых параметров
браузер использует значения по умолчанию,
если другие значения не заданы.
Если
тег имеет несколько параметров, то они
прописываются через пробел в любой
последовательности. Например:


- две аналогичные записи открывающего
тега font
с параметрами color
и size.
Структура
HTML страниц
Любая
html-страница должна содержать следующие
обязательные теги:
html

 - сообщает браузеру, что страника
 написана на языке HTML и строчки до
 закрывающего тега представляют собой
 единый документ;
head

 - между открывающим и закрывающим тегами
 помещается важная информация, описывающая
 этот документ;
body

 - между открывающим и закрывающим тегами
 помещается само содержание страницы.

Таким
образом HTML-документ имеет следующую
структуру:

Описание
документа (не отображается на самой
страничке)


Содержание
(отображается на страничке с учетом
заданной разметки)

Сам
раздел не является обязательным и служит
для размещения описания документа.
Если он есть, то обязательным тегом
является только TITLE
,
содержание которого задает название
документа, показываемое обычно в
заголовке окна браузера.
Например,
такая строчка

задаст название документа "1_HTML",
которое в Mozilla Firefox будет отражаться в
заголовке окна и на закладках (когда
открыто несколько страничек):
2. Форматирование текста
Шрифты:
 гарнитура, размер, цвет
Оформление
 текста
Заголовки
Теги
 переноса строки и форматирования абзаца
Выравнивание
 текста
Упражнение

Шрифты: гарнитура, размер, цвет
При
помощи HTML-разметки можно написать текст
разного начертания (гарнитуры), размера
и цвета. Для этого используется тег

,
имеющий несколько параметров:
face

 – для задания гарнитуры,
size

 – для задания размера,
color

 – для задания цвета.

Чтобы
задать нужный шрифт, размер или цвет,
необходимо соответствующему параметру
присвоить нужное значение:
параметр="значение"
Гарнитура
Например,
чтобы написать текст шрифтом Times
New Roman
,
необходимо вставить перед нужным текстом
тег 

и присвоить его параметру face

значение Times
New Roman
, а т.к.
тег 

– парный, то после необходимого текста
обязательно нужно вставить закрывающий
тег:
Текст
с
начертанием
Times New Roman
Текст
с начертанием Times New Roman
Параметру
face можно присвоить несколько значений
через запятую:
face="Times
New Roman, Times, serif"
В
таком случае, браузер сначала попытается
отобразить текст шрифтом Times
New Roman
. Если
такой шрифт отсутствует на компьютере
пользователя, то браузер попытается
отобразить текст шрифтом Times

и т.д.
Размер
Чтобы
написать текст размером 4, необходимо
вставить перед нужным текстом тег и
присвоить его параметру size значение 4:
Текст размера 4
В
результате браузер отобразит эту строчку
так:
Текст
размера 4
Что
же означает эта загадочная цифра 4?
Параметр size

может принимать значения от 1

до 7
.
Это условные единицы. Средний размер,
используемый по умолчанию, соответствует
size="3"
.
Следовательно,
размер текста 4 – это средний размер,
увеличенный на 1 условную единицу, а
размер 2 - это средний размер, уменьшенный
на 1 условную единицу и т.д. Величина
текста, заданная таким способом,
называется абсолютной
.
Но
есть и другой способ уменьшить или
увеличить размер текста относительно
размера по умолчанию. Для этого нужно
присвоить параметру size

значение "-1"

или "+1"

соответственно. При таком способе
задания размера величина текста
называется относительной
.
Итак,
чтобы получить размер текста 5, можно
воспользоваться двумя способами:
Текст размера 5 или
Текст размера 5
Помимо
перечисленных существует еще несколько
способов задать размер текста.
Увеличить
текст можно с помощью тега 
:
Увеличенный
текст
В
результате браузер отобразит эту строчку
так:
Увеличенный
текст
Уменьшить
текст можно с помощью тега 
:
Уменьшенный
текст
В
результате браузер отобразит эту строчку
так:
Уменьшенный
текст
Теги


и 

можно повторить несколько раз для
усиления эффекта. Например, если в
результате строки:
Большой
текст
текст
недостаточно велик:
Большой
текст
можно
написать так:
Большой
текст
И
в результате получится больший текст:
Большой
текст
Цвет
Теперь
о задании цвета текста. Чтобы написать
текст красным цветом, необходимо вставить
перед нужным текстом тег 

и присвоить его параметру color

значение red
:
Красный текст
В
результате браузер отобразит эту строчку
так:
Красный
текст
Но
цвет можно задать не только по названию,
но и по цифровому значению в шестнадцатеричном
формате, который выглядит как знак #

и 6 символов (цифры 0-9

и буквы латинского алфавита A-F
)
после него. Например, красному цвету
соответствует шестнадцатеричное
значение #FF0000
.
Т.е. написать текст красным цветом можно
двумя способами:
Красный текст или
Красный текст
Здесьможно скачать таблицу цветов, в которой
приведены основные цвета, их названия
и соответствующие им шестнадцатеричные
значения.


HTML - это язык тэгов.


Тэг
 (дескриптор
) - специальный
код, вставляемый в текст для форматирования
элементов HTML-документа. Это основной элемент
кодирования, принятый в стандарте HTML. Тэг
заключаются в угловые скобки <>. Например
тэгом абзаца является 
А
тэгом горизонтальной линии - 

.

Существует два типа тэгов: контейнеры и
одиночные тэги.

Контейнер.
 Это дескрипторная
пара, состоящая из начального (или открывающего)
и конечного (или закрывающего) тэгов. Начальный
тэг имеет вид 
, где TAG - это имя
реального HTML - тэга. Конечный тэг имеет вид 
.
Контейнеры предназначены для хранения некоторой
информации, например текста или других HTML - тэгов.
Поэтому между начальным и конечным тэгами
заключено содержимое контейнера. Например,
элемент, представляющий собой отформатированный
текст, заключается между тэгами 
И 
.


Пустой дескриптор.
Отличается
от контейнера тем, что не содержит никакой
информации. У него есть только начальный тэг.
Пустой дескриптор обычно выполняет
самостоятельную задачу, не связанную с
конкретным текстом. Например, тэг 


создаёт горизонтальную линию.


Элемент HTML - документа
 - это
начальный и конечный тэги контейнера вместе с
заключённым между ними содержимым. Элементом
может быть изображение, фрагмент текста, форма,
таблица, список, ссылка, текстовое поле, кнопка и
даже заголовок документа или его основная часть
(тело).
Замечание
:
 Язык HTML не
чувствителен к регистру. Тэги могут набираться
как прописными, так и строчными буквами, т.е.
команда 
 и представляет собой текстовую
строку. Не следует заключать его в кавычки, если
вы хотите, чтобы на экране их тоже не было. В
большинстве случаев раздел
TITLE

занимает не более одной строки.

В принципе название может иметь любую
длину и содержать любые символы, кроме некоторых
зарезервированных. На практике лучше
ограничиться одной строкой, имея в виду, что
название появляется в заголовке окна браузера.
Также следует помнить о том, что останется от
названия документа при сворачивании окна
браузера. Поэтому надо стараться поместить
наиболее важные слова в начало названия.
Хотя в WWW и
наметилась тенденция к увеличению “активного”
содержания, большинству читателей все же
интересна текстовая часть страниц. Поэтому
независимо от того пишется ли новый текст или
конвертируется старый, процесс работы над телом
документа отнимает немалое количество времени.

Прежде чем приступить к наполнению
документа содержанием, есть смысл изготовить его
“каркас”. HTML - документ
должен содержать некоторые обязательные
элементы, без которых он не будет правильно
интерпретирован. Пример простейшего шаблона
приведен в листинге.



 

 
 

 

 Enter body text here

 




Шаблон открывается тэгом

, который, как мы уже знаем, необходим
для каждого
HTML - документа.
Следующим идет тэг

,начинающий заголовок документа.
Заголовок содержит элемент
TITLE
, вводящий название документа, в
нашем случае
 “This is an example document”. Заголовок закрывается тэгом

. Далее идет
тэг

, после которого помещается текст
(тело) документа. Тэг

 означает конец тела, а тэг
 
 - конец всего
документа.
 BODY
 может
содержать большое количество атрибутов. Все они
важны, так как определяют общий облик документа.
Эти атрибуты приведены в таблице.





 
Назначение


ALINK


 
определяет цвет
 ссылки, активной в текущий момент


BACKGROUND


 
указывает на
URL
 - адрес
 изображения, которое используется в качестве
 фонового


BGCOLOR


 
определяет цвет
 фона документа


BGPROPERTIES


 
если установлено
 значение
FIXED
, фоновое изображение не
 прокручивается


LEFTMARGIN


 
Устанавливает
 границу левого поля в пикселах


LINK


 
Определяет цвет еще
 не просмотренной ссылки


TEXT


 
Определяет цвет
 текста


TOPMARGIN


 
Устанавливает
 границу верхнего поля в пикселах


VLINK


 
Определяет цвет уже
 просмотренной ссылки



Рассмотрим эти атрибуты подробнее.
Определение цвета составных частей
документа - первый шаг к его созданию. Если это не
сделано, используются цвета по умолчанию. Они
определяются установками программы просмотра.
Не существует каких-либо правил хорошо
сбалансированной палитры. Нужно лишь помнить о
том, чтобы читатели смогли прочитать текст, не
испытывая неудобств, стараться поддерживать
высокую контрастность текста и фона и избегать
соседства областей с близкими цветами.
HTML цвета
определяются цифрами в шестнадцатеричном коде.
Цветовая система базируется на трех основных
цветах - красном, синем и зеленом. Для каждого
цвета задается шестнадцатеричное значение в
пределах от 00 до
FF, что
соответствует диапазону 0-255 в десятичном
исчислении. Затем эти значения объединяются в
одно число, перед которым ставится символ
#. Для простоты в
 HTML 3.2 определены 16 стандартных цветов,
которые вместе с их шестнадцатеричными кодами
приведены в нижеследующей таблице.

Цвет



 
Код



Black
 (черный)


 
#000000


Магооп
 (темно-бордовый)


 
#800000


Green
 (зеленый)


 
#008000


Olive
 {оливковый)


 
#808000


Navy
 (темно-синий)


 
#000080


Purple
 (фиолетовый)


 
#800080


Teal
 (чирок)


 
#008080


Gray
 (серый)


 
#808080


Silver
 (серебряный)


 
#С0С0С0


Red
 (красный)


 
#FF0000


Lime
 (известь)


 
#00FF00


Yellow
 (желтый)


 
#FFFF00


Blue
 (синий)


 
#0000FF


Fuchsia
 (фуксия)


 
#FF00FF


Aqua (аква]


 
#00FFFF


White
 (белый)


 
#FFFFFF


BGCOLOR
 отвечает за цвет фона документа.
Если
 страница имеет фоновое
изображение, этот атрибут должен обеспечивать
цвет, как можно более близкий к общему тону
рисунка. Это позволит читателю, настроившему
свой браузер на отказ от загрузки изображений,
ясно видеть текст. Многие авторы не
придерживаются этого правила. В этом случае, если
фоновый рисунок исполнен в темных токах и выбран
белый цвет шрифта для текста, некоторые читатели
могут быть удивлены, не увидев ничего, кроме
пустой белой страницы.
 TEXT
 определяет цвет текста документа.
Старайтесь в ваших страницах всегда
поддерживать высокую контрастность текста. При
использовании шрифта с тонким начертанием
помните, что он смотрится лучше темным на светлом
фоне.
 LINK
 используется браузером для
показа еще непросмотренных ссылок. Очевидно, что
они должны выделяться цветом на фоне основного
текста.
Атрибут VLINK
 служит для
показа уже просмотренных ссылок. Как правило, их
окрашивают более темным оттенком того же цвета,
что и не
 просмотренные ссылки
.
 ALINK

определяет цвет ссылки, активной
в текущий момент. Эти сравнительно новый атрибут,
обычно применяющийся для просмотра
многокадровых документов.
Одним ид популярных способов украсить
HTML - страницу является размещение на ней фоновой
графики, видимой под основным текстом (атрибут
BACKGROUND
). Такой прием
помогает подчеркнуть целостность документа
либо. наоборот, разделить его на логические
части.
Большинство фоновых изображений малы
по размеру, но их копии, как обои, заполняют все
окно программы просмотра. Особенно популярны
различные текстурные (узорчатые) изображения:
кирпичи, мрамор, всевозможные виды тканей. В
основном они служат для простого заполнения
пустот в документе. Более продуманные страницы
имеют фон, соответствующий содержанию.
Атрибуты
LEFTMARGIN
 и
 TOPMARGIN
 служат для установки расстояния
между левым и верхним краями текста и
соответствующими краями окна браузера.
Местоположение других краев текста не
регулируется. Это сделано для того, чтобы
обеспечить возможность просмотра страницы любым
браузером. Невозможно заранее знать, какой
размер окна у программы читателя документа.
LEFTMARGIN
 устанавливает расстояние между
левым краем окна браузера, которое измеряется в
пикселах. Чаще всего этот атрибут применяется,
когда автор хочет иметь слева поле, свободное от
текста, и отличающееся узором или цветом от
остальной части фонового изображения.
 TOPMARGIN
 служит для установки расстояния
между верхним краем текста и верхним краем окна
браузера. Он обычно используется, если верхняя
часть фонового изображения имеет большое
значение и его желательно оставить открытым.
HTML - документы
можно включать комментарии, которые не будут
видны читателю. Они должны начинаться тэгом

.
Все, что заключено внутри этих тэгов, при
просмотре страницы остается невидимым.

ADDRESS
 является одним из важнейших
элементов
HTML. Он служит для
идентификации автора документа и (по желанию) для
указания адреса автора. Сюда же обычно
помещаются сведения об авторских правах. Этот
элемент располагается либо в начале, либо в самом
конце документа.
ADDRESS
 состоит из текста, помещенного между
тэгами

 и

. Текст, заключенный между этими
тэгами обычно показывается в окне браузера
курсивом.