Синтаксис HTML и форматирование текста

1. Синтаксис HTML

Синтаксис HTML. Правила построения HTML-документов.
Теги форматирования документа. Теги логического и
физического форматирования текста. Параметры шрифта

2. WWW

3. Язык разметки гипертекстов

4. Язык разметки гипертекстов

5. Структура

HTML документ выглядит как совокупность текстовых
фрагментов,
каждый
из
которых
окружен тэгами (tags).
Каждый тэг разметки HTML имеет свой идентификатор и,
возможно, несколько параметров (атрибутов). Название тэга
вместе с его параметрами заключаются в скобки < >. В
общем, виде тэг выглядит следующим образом:
<тэг параметр1=значение1 параметр2=значение2 ...> Текст1</тэг>

6. Структура

<тэг параметр1=значение1 параметр2=значение2 ...> Текст1</тэг>
Действие тэга распространяется на фрагмент текста
«Текст1». Значения параметров рекомендуется заключать в
двойные кавычки.
Первый тэг называется открывающим, а парный ему закрывающим. Закрывающий тэг имеет тот же
идентификатор, но начинается с символа /. Тэги, не
предусматривающие
наличие
вложенного
текста,
называются пустыми или непарными, они не имеют
закрывающей части.

7. Структура

Непарные тэги имеют вид:
<тэг параметр1=значение1 параметр2=значение2 ...>
Пример непарного тэга — <HR>, вставляющего
горизонтальную
линию.
Пример:
<P align=”left”>Текст2</P>
Выделить «Текст2» в отдельный абзац с выравниванием по
левому краю.

8. Структура

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

9. Структура

Документ в формате HTML 4.0 состоит из трех частей:
строки,
содержащей
информацию
о
версии
HTML*;
раздела
заголовков
(определяемого
элементом
HEAD);
тела, которое включает собственно содержимое документа (тело
может вводиться элементом BODY или элементом FRAMESET).
Перед каждым элементом или после каждого элемента может
находиться пустое пространство (пробелы, переход на новую
строку, табуляции и комментарии).
Разделы 2 и 3 должны начинается с открывающего тэга <HTML> и
заканчивается парным закрывающим тэгом </HTML>. Любой
HTML документ разделен на две части: головную (head) и
основную (body). Головная часть содержит информацию о
документе в целом, а основная – собственно текст документа. Для
того чтобы отделить эти части друг от друга используются
одноименные тэги разметки.
В головной части HTML документа обязательно должен
располагаться тэг TITLE, содержащий название страницы.
Название – это текст, который высвечивается в строке заголовка
браузера при загрузке Web-страницы.

10. Структура

Пример простого документа HTML:
<HTML>
<HEAD>
<META HTTP-EQUIV=”Content-Type”
CONTENT=”text/html; CHARSET=windows-1251”>
<TITLE>Простая страница</TITLE>
</HEAD>
<BODY>
<P> Текст, выводимый на экран.</ P>
</BODY>
</HTML>

11. Структура

При просмотре документа, приведенного в примере, в окне
браузера появится следующее (см. рис. 1).

12. Структура

Рассмотрим основные тэги HTML данного примера (см. табл.
1):

13. Структура

Рассмотрим основные тэги HTML данного примера (см. табл.
1):

14.

15. МЕТА-тэги

В рассмотренном нами примере кроме тэга-контейнера <TITLE> в
разделе HEAD размещены META-тэги. Их роль не заметна при
отображении страницы. Это лишь команды для Web-сервера или
браузера, но команды важные, и правильное использование
META-тэгов дает нам некоторые преимущества. МЕТА-тэги не
являются контейнерами и тэга </META> не существует. МЕТА-тэги,
как правило, применяются с двумя параметрами со значениями:
• первый параметр — это либо HTTP-EQUIV, либо NAME. Если этот
параметр опущен, то по умолчанию принимается HTTP-EQUIV;
• второй параметр — CONTENT.
В примере, приведенном выше, головная часть документа
содержит тэг META, указывающий тип документа и используемую
кодовую страницу (для отображения букв русского алфавита).

16. МЕТА-тэги

Следующая таблица (табл. 2) состоит из нескольких
примеров составления МЕТА-тэгов. Конечно, в ней описаны
далеко не все META-тэги, а лишь самые употребляемые и
полезные. Оставшиеся используются гораздо реже и, если
они Вам понадобятся, то Вы всегда сможете прочитать о них
в любом хорошем HTML-справочнике.

17. МЕТА-тэги

18.

19. Форматирование текста

Для форматирования текста HTML-документов предусмотрена
целая группа тэгов, которую можно условно разделить на тэги
логического и физического форматирования.
Основное различие между ними заключается в том, что тэги
физического форматирования будут исполняться всеми
браузерами одинаково, в то время как тэги логического
форматирования
в
каждом
отдельном
случае
будут
интерпретироваться в зависимости от настроек пользователя
(разрешение экрана, выбранные шрифты, тип и настройки
браузера и т.д.) .
Заметим, что некоторые тэги логического форматирования,
призванные
заменить
отдельные
тэги
физического
форматирования, распознаются не всеми браузерами, что делает
их применение крайне неудобным. Примером может служить
логический тэг<DEL>, который рекомендуется использовать вместо
физического тэга<STRIKE>.

20. Форматирование текста

Любые тексты, имеют определенную структуру. Элементами такой
структуры являются заголовки, подзаголовки, таблицы, абзацы и
др.
Одним из первых правил составления практически любых
документов является разбиение его текста на отдельные абзацы.
HTML-документы не являются исключением из этого правила. В
HTML-документах символы перевода строки не приводят к
образованию нового абзаца, поэтому для создания абзаца
используется специальный тэг разделения на абзацы<Р>. Перед
началом каждого абзаца текста следует поместить тэг<Р>.
Закрывающий тэг</P> не обязателен, но рекомендую все-таки его
ставить. В спецификации XHTML он обязателен. Браузеры обычно
отделяют абзацы друг от друга пустой строкой.
Браузеры обычно интерпретируют несколько стоящих подряд
тэгов абзаца <Р> как один. Поэтому создать несколько пустых
строк при помощи этого тэга не удается.

21. Форматирование текста

Тэг<P> может задаваться с параметром горизонтального
выравнивания
align.
По
умолчанию
выполняется
выравнивание по левому краю.
Параметр align может иметь одно из четырех значений:
left - выравнивает текст абзаца по левому краю. Правый
край при этом получается неровным;
center - в этом случае абзац выравнивается по центру,
оставляя неровные края слева и справа;
right - выравнивание происходит по правому краю.
Естественно, что неровным остается левый край;
justify - выравнивание по ширине. В этом случае оба края левый и правый - будут ровными.

22. Форматирование текста

Основные тэги физического
приведены в таблице 3:
форматирования
текста

23. Форматирование текста

24. Форматирование текста

Все тэги-контейнеры могут вкладываться в другие тэги-контейнеры, но ни в коем
случае не должны пересекаться, т.е. первым закрывается тэг, который был открыт
позже всех и т.д. Тэг<FONT> указывает параметры шрифта и также относится к тэгам
физического форматирования уровня текста. Назначение параметров шрифта
непосредственно в тексте документа нарушает основную идею разделения
содержательной части документа и описания формы представления документа.
Поэтому в спецификации HTML 4.0 данный тэг отнесен к отмененным. Его применение
рекомендуется только на первых этапах работы. Для тэга<FONT> могут задаваться
следующие параметры: face, size и color. Параметр face служит для указания типа
шрифта, которым программа просмотра пользователя будет выводить текст (если
такой шрифт имеется на компьютере). Значением данного параметра служит название
шрифта, которое должно в точности совпадать с названием шрифта, имеющего у
пользователя. Если такого шрифта не будет найдено, то данное указание будет
проигнорировано и будет использован шрифт, установленный по умолчанию. Можно
указать как один, так и несколько названий шрифтов, разделяя их запятыми. Это
весьма полезное свойство, так как в разных системах могут быть почти идентичные
шрифты, называющиеся поразному. Другим важным качеством является задание
предпочтения использования шрифтов.
Список шрифтов просматривается слева направо. Если на компьютере пользователя
нет шрифта, указанного в списке первым, то делается попытка найти следующий
шрифт и т. д.

25. Форматирование текста

Пример использования параметра face:
<FONT face="Verdana", "Arial", "Helvetica">
Пример задания названия шрифта.
</FONT>
В примере в качестве предпочтительного указывается
шрифт Verdana, при его отсутствии будет использован
шрифт Arial и т.д.
Параметр size служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта
зависит от используемой программы просмотра. Принято
считать, что размер «нормального» шрифта соответствует
значению 3.

26. Форматирование текста

Параметр color устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB.
Тэг<BASEFONT> используется для указания размера, типа и цвета
шрифта, используемого в документе по умолчанию. Эти значения
обязательны для всего документа, однако могут в нужных местах
переопределяться с помощью тэга<FONT>. После закрывающего
тэга</FONT> действие тэга<BASEFONT> восстанавливается. Значения
параметров шрифтов, используемых по умолчанию, могут
неоднократно переопределяться в документе, т. е. тэг<BASEFONT>
может появляться в документе любое количество раз.
Тэг<BASEFONT> может появляться также и в разделе<HEAD>
документа.
Для тэга<BASEFONT> не существует закрывающего тэга. Вкачестве
параметров могут использоваться точно такие же параметры, что и
для тэга<FONT>, а именно: face, size и color. Назначение и правила
записи параметров аналогичны. Тэг<BASEFONT> также относится к
отмененным тэгам.

27. Форматирование текста

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

28. Форматирование текста

29. Форматирование текста

30. Форматирование текста

31. Форматирование текста

Обратите внимание на то, что некоторые элементы дают одинаковый
результат. Более того, часть элементов может никак не изменять
представление фрагмента текста на экране. Может возникнуть законный
вопрос: для чего создано такое разнообразие элементов форматирования?
Ответ — в названии этой группы элементов. Они предназначены для
расстановки логических ударений, выделения логических частей и
подчеркивания сути высказываний. Их использование весьма актуально,
поскольку, вероятно, в ближайшем будущем возможности браузеров
возрастут, например, станет, возможен поиск цитат на Webпространстве, а
может быть следующее поколение браузеров научится читать документы
вслух. Кроме того, авторам документов ничто не мешает уже сегодня,
применяя таблицы стилей, задать желаемое отображение для любого из
тэгов, переопределив значения по умолчанию.

32. Форматирование текста

Бывают случаи, когда в текст HTML-документа необходимо включить
какую-либо длинную цитату. Для выделения цитат из основного текста
существует тэг<BLOCKQUOTE>. Он является контейнером и может
содержать любые элементы форматирования. В отличие от тэга<Q>,
предназначенного для выделения коротких цитат в строке
текста,<BLOCKQUOTE> является тэгом уровня блока. Текст, размеченный
данным тэгом, при отображении отделяется от основного текста пустыми
строчками и, как правило, выводится с небольшим отступом вправо.
При отображении текстовых документов в браузере место переноса строки
в пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться
только по символам-разделителям слов (например, пробелом). Иногда в
документах требуется задать принудительный перевод строки,
реализующийся независимо от параметров настроек браузера. Для этого
служит тэг принудительного перевода строки<BR>, который не имеет
соответствующего закрывающего тэга. Включение тэга<BR> в текст
документа обеспечит размещение последующего текста с начала новой
строки. Например, такой подход может использоваться для создания
структур типа списков без использования специальных тэгов разметки
списка. Или, например, без данного тэга не обойтись для отображения
стихотворений и т.п.

33. Форматирование текста

Бывают ситуации, когда требуется выполнить операцию
противоположного назначения — запретить перевод строки. Для
этого существует тэг-контейнер<NOBR>. Текст, размеченный этим
тэгом, будет гарантированно располагаться в одной строке,
независимо от ее длины. Если при этом получающаяся строка
будет выходить за пределы окна просмотра браузера, то
появится горизонтальная полоса прокрутки.
Размечая текст с помощью тэга неразрывной строки<NOBR>
можно получить очень длинные строки. Чтобы этого избежать,
можно указать браузеру читателя место возможного перевода
строки, что будет выполнено только при необходимости (так
называемый «мягкий» перевод строки). Это можно осуществить,
поставив в нужном месте текста тэг<WBR> (Word BReak), который
так же, как и тэг<BR>, не нуждается в закрывающем тэге.
Тэг<WBR> вообще не поддерживается браузером Netscape.
Браузер Microsoft Internet Explorer распознает этот тэг только в
тексте, размеченном тэгами<NOBR>.

34. Форматирование текста

Наряду с названием всего документа, на Web-странице могут
использоваться заголовки для отдельных частей документа. Эти
заголовки могут иметь шесть различных уровней (размеров) и
представляют собой фрагменты текста, которые выделяются на экране
при отображении страницы браузером.
Для разметки заголовков используются тэги<H1>,<H2>,<H3>,<H4>,<H5>
и<H6>. Эти тэги требуют соответствующего закрывающего тэга.
Заголовок с номером 1 является самым крупным (заголовок верхнего
уровня), а с номером 6 — самым мелким. Тэги заголовка являются
элементами уровня блока, поэтому с помощью них нельзя размечать
отдельные слова текста для увеличения их размера. При
использовании тэгов заголовков осуществляется вставка пустой строки
до и после заголовка, поэтому тэгов абзаца или перевода строки здесь
не требуется.
Тэги заголовков могут задаваться с параметром горизонтального
выравнивания align. Возможные значения параметра совпадают с
параметрами выравнивания тэга абзаца.

35. Форматирование текста

Тэг<HR> позволяет провести рельефную горизонтальную линию в окне
большинства программ просмотра. Этот тэг не является контейнером,
поэтому не требует закрывающего тэга. До и после линии
автоматически вставляется пустая строка. Параметры тэга<HR> могут
быть следующими:
align — выравнивает линию по краю или центру. Может иметь
значение left, right или center;
width — устанавливает длину линии. Длина может выражаться как в
пикселях, так и в процентах;
size — задает толщину линии в пикселях. Используя этот параметр,
можно получать прямоугольники;
noshade — отменяет рельефность линии. Этот параметр не имеет
значений;
color — указывает цвет линии.
Например:
<HR align="center" width="50%" noshade>
В этом примере задается горизонтальная линия, которая занимает
половину ширины окна просмотра и располагается посередине окна.

36. Форматирование текста

Тэг-контейнер<CENTER> предназначен для горизонтального
выравнивания всех элементов посередине окна просмотра
браузера. Он имеет уровень блока. В HTML-документ можно
включать комментарии, которые не будут видны читателю. Они
могут состоять из произвольного числа строк и должны
начинаться тэгом<!– и заканчиваться тэгом -->. Все, что
заключено внутри этих тэгов, при просмотре страницы не будет
отображаться на экране.
Некоторые специальные символы не входят в базовую часть
таблицы кодов ASCII. К ним относятся буквы алфавитов части
европейских языков, математические и некоторые другие
символы. В таких случаях можно вводить нужные символы в
HTML-документ при помощи специальных кодов.

37. Форматирование текста

38. Форматирование текста

39. Форматирование текста