Теги HTML. Форматирование текста



Предыдущая | Следующая

Теги HTML. Форматирование текста
Давайте запустим небольшой текстовый редактор Блокнот, поставляющийся в составе Windows, и наберем в нем вот такой текст:
Пример Web-страницы
Это простейшая Web-страничка, созданная в стандартном
Блокноте и отображенная в Microsoft Internet Explorer.
Сохраним этот текст в файле под именем 2.1.txt. И откроем его в Web-обозревателе Microsoft Internet Explorer, также поставляемом в составе Windows. Мы увидим то, что показано на рис. 2.1.

Да, это еще не Web-страница. Это простой текстовый файл, открытый в Web-обозревателе (Web-обозреватели могут открывать также и простые текстовые файлы). Давайте превратим его в настоящую Web-страницу.
Для начала отредактируем файл 2.1.txt, чтобы его содержимое выглядело так (добавленные фрагменты выделены полужирным шрифтом):
<Р>Пример й\1еЬ-страницы</Р>
<Р>Это простейшая Web-страничка, созданная в стандартном
^Блокноте и отображенная в Microsoft Internet Explorer.</Р>
После этого сохраним отредактированный текст в другом файле — 2.2.html. (Только когда будем вводить имя файла в стандартном окне сохранения, заключим его в кавычки, иначе Блокнот по доброте душевной добавит расширение txt, и наш файл получит имя 1.1.htm.txt.) Открыв его в Internet Explorer, увидим то, что изображено на рис. 2.2. Видна разница?
Текстовый файл 2.1.txt Internet Explorer вывел "как есть", без всяких изысков. В частности, он не разбил слишком длинный абзац на две строки (хотя это не помешало бы). А все потому, что обычный текст не содержит команд для его форматирования.

Совсем другое дело — код HTML, сохраненный в файле 2.2.html. Internet Explorer сформировал два абзаца — это хорошо заметно на рис. 2.2 — и разбил слишком длинный на строки так, чтобы ширина текста не превышала ширину его окна. А все потому, что он встретил в тексте две знакомые ему команды, описывающие форматирование текста, — так называемые теги HTML. Это теги текстового абзаца <р> и </р>.
В общем случае, теги HTML представляют собой английские слова, заключенные между знаками < и >. Первый из тегов (в нашем случае — <р>) задает начало фрагмента текста, попадающего под действие тега, и называется открывающим. Второй тег (</р>) отличается тем, что в нем между знаком < и собственно наименованием тега стоит символ / ("слеш"); он задает конец фрагмента текста и называется закрывающим. А сам фрагмент текста, на который оказывает влияние тег, называется его содержимым.
Абсолютное большинство тегов HTML являются парными, то есть имеют открывающий тег, закрывающий тег и содержимое. Но есть и немногочисленные одинарные теги, состоящие только из одного тега вида <img> и не имеющие содержимого. Мы познакомимся с ними чуть позже.
Исходя из сказанного ранее, мы можем сформулировать определение Web-страницы. Итак, Web-страница — это обычный текстовый файл, созданный в любом простейшем текстовом редакторе (подойдет, например, стандартно поставляющийся в составе Windows Блокнот) и сохраненный с расширением htm или html.
Манипулируя тегами HTML, мы можем форматировать текст нашей первой странички, как хотим. Давайте, например, выделим названия двух упомянутых в нем программ курсивом. Для этого нам будет нужно использовать парный тег <ем>...</ем>. Вот так (добавленные теги выделены полужирным шрифтом):
<Р>Пример Web-CTpaHMiibi</P>
<Р>Это простейшая Web-страничка, созданная в стандартном ^><ЕМ>Блокноте</ЕМ> и отображенная в <EM>Microsoft Internet ^>Explorer</EM>.</P>

 

Результат этих священнодействий показан на рис. 2.3.
Если мы захотим выделить название фирмы Microsoft полужирным шрифтом, то нам будет нужно использовать парный тег <strong>...</strong>. Вот так:
<Р>Пример \л!еЬ-страницы</Р>
<Р>Это простейшая Web-страничка, созданная в стандартном %><ЕМ>Блокноте</ЕМ> и отображенная в <EM><STRQNG>Microsoft</STRONG> "^Internet Explorer</EM>.</P>
Здесь мы вложили тег <strong> внутрь тега <ем>. В результате этого слово "Microsoft" будет набрано полужирным курсивом. Вообще, вложенность тегов HTML друг в друга — обычное дело, и нам следует к ней привыкнуть как можно быстрее.
Начинающие Web-дизайнеры очень часто допускают такую ошибку: они располагают закрывающие теги не в порядке, не строго противоположном порядку открывающих тегов. Так, приведенный далее код содержит подобную ошибку: теги </ем> и </strong> поменялись местами:
<Р>Пример Web-CTpaHMUbi</P>
<Р>Это простейшая Web-страничка, созданная в стандартном
^><ЕМ>Блокноте</ЕМ> и отображенная в <EM><STRONG>Microsoft</EM></STRONG> ^Internet Explorer.</P>
Поведение Web-обозревателя, встретившего такой код, непредсказуемо (хотя Internet Explorer славится своим умением исправлять мелкие ошибки Web-дизайнера). Так что стоит запомнить на будущее простое правило: закрывающие теги должны повторяться в порядке, обратном порядку соответствующих им открывающих тегов.
Ну и напоследок давайте дадим нашей странице большой "кричащий" заголовок. Для этого в первом абзаце текста заменим тег <р>...<р> на <hi>...<hi>:
<Н1>Пример \л/еЬ-страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном
^><ЕМ>Блокноте</ЕМ> и отображенная в <EM><STRONG>Microsoft</STRONG> ^ Internet Explorer</ЕМ>.</Р>
Окончательный вариант нашей первой страницы показан на рис. 2.4. Видно, что Web-обозреватель сам выделил содержимое тега <hi> очень большим шрифтом, чтобы оно стало заметнее.

Кстати, тег <hi> так и называется — тегом заголовка первого уровня. Почему первого? А потому, что стандарт HTML предусматривает целых шесть уровней заголовков, начиная от самого высокого и заканчивая самым низким. Эти заголовки задаются с помощью тегов <Н2> (второй уровень), <нз> (третий) и так вплоть до <нб> (шестой, самый низкий уровень). Заголовками первого уровня обычно даются названия страниц целиком, заголовком второго — заголовки отдельных частей страниц и т. д.
HTML-код имеет еще одно преимущество перед обычным текстом. Обычный текст, как мы уже видели на рис. 2.1, отображается так, как написан — со всеми пробелами и разрывами строк. Web-обозреватель даже не удосужился перенести слишком длинную строку, чтобы избавить нас от нудной прокрутки содержимого своего окна по горизонтали.
А в случае кода HTML Web-обозреватель форматирует содержимое тега <Р> так, чтобы оно поместилось в его окно и чтобы пользователю не пришлось прокручивать содержимое окна по горизонтали. Web-обозреватель сам разбивает абзац на строки, не обращая внимания на то, как мы разбили его в HTML-коде страницы. При этом все разрывы строк он считает пробелами, что очень удобно для нас.
Предположим, что мы должны отредактировать код HTML нашей страницы 2.2.html вот так:
<Н1>Пример ЭДеЬ-страницы</Н1> <Р>Это простейшая Web-страничка,
созданная в стандартном <ЕМ>Блокноте</ЕМ> и отображенная в <EM><STRONG>Microsoft</STRONG> Internet Explorer</EM>.</P>
Мы разбили слишком длинный второй абзац на несколько более коротких строк — так намного удобнее держать его код перед глазами. (Кстати, давайте и в дальнейшем так делать.) Если мы теперь откроем отредактированную страницу 2.2.html в Web-обозревателе, увидим, что ничего в его восприятии нашего кода не изменилось — см. рис. 2.4.
А теперь давайте немного отдохнем и узнаем за время отдыха кое-что новенькое.
Понятно, что для того, чтобы различные Web-обозреватели отображали одну и ту же Web-страницу одинаково, язык HTML должен быть стандартизирован. Его стандартизацией (а также множеством других стандартов Интернета) занимается особая организация, называемая World Wide Web Consortium или, сокращенно, WWWC или, что встречается чаще, W3C. Это название дословно можно перевести как "Комитет Всемирной паутины".
W3C издает весьма увесистые труды, описывающие различные версии стандарта HTML. Последняя версия этого языка — 4.01 — вышла в конце 90-х годов прошлого века. Все современные версии Web-обозревателей поддерживают именно эту версию HTML.
Примечание
Судя по всему, версия 4.01 HTML станет действительно последней. В дальнейшем язык HTML будет постепенно заменен своим потомком — языком XHTML (extensible HypetText Markup Language, расширяемый язык гипертекстовой разметки). Фактически XHTML — это более строгий, усовершенствованный и очищенный от устаревших тегов потомок HTML. По крайней мере, по набору тегов языки HTML и XHTML очень похожи. В настоящее время язык XHTML еще не очень распространен и, судя по всему, более-менее значительную популярность получит не скоро.

 

Содержание Книга по php и mysql