41. Функциональные блочные элементы языка html, гипертекстовые ссылки, Web-графика, форматирование текста

Элементы HTML

Для парных тегов область влияния определяется частью документа между открывающим и закрывающим тегом. Такую часть документа рассматривают как элемент языка HTML. Так, можно говорить об «элементе BODY», включающем тег <BODY>, основное содержание документа и закрывающий тег </BODY>. Весь документ HTML можно рассматривать как «элемент HTML. Для непарных тегов элемент совпадает с тегом, который его определяет.

Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY> и </BODY>, то есть, внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.

Теперь можно сформулировать правила вложения элементов.

• Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.

• Блочные элементы могут содержать вложенные блочные и текстовые элементы. о Текстовые элементы, могут содержать вложенные текстовые элементы. в Текстовые элементы не могут содержать вложенные блочные элементы.

Строго говоря, все правила языка HTML можно рассматривать исключительно как «пожелания». Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукосни­тельное следование требованиям спецификации языка.

Функциональные блочные элементы

 Оформление текста электронных Web-документов отличается от оформления текстовых документов. Главное отличие - игнорирование обычной красной строки. Браузер игнорирует перенос текста на следующую строку в самом Web-документе:

В Блокноте	В браузере
Первая строка Вторая строка Третья строка	Первая строка Вторая строка Третья строка

Для задания красной строки используйте тэг <p>:

В Блокноте	В браузере
<p>Первая строка <p>Вторая строка <p>Третья строка	Первая строка Вторая строка Третья строка

Текст, вставляемый в Web-документ, может быть нужным образом отформатирован, а именно, можно изменить шрифт, его размер, цвет, начертание, выравнивание. Для выравнивания текста абзаца используйте параметр align тэга <p>:

В Блокноте	В браузере
<p align="left">Строка, выровненная по левому краю <p align="right">Строка, выровненная по правому краю <p align="center">Строка, выровненная по центру окна	Строка, выровненная по левому краю Строка, выровненная по правому краю Строка, выровненная по центру окна

Для увеличения или уменьшения высоты символов текста на стандартную величину, используйте тэги <big> и <small>:

В Блокноте	В браузере
Строка с обычными символами <big>Строка с увеличенными символами</big> <small>Строка с уменьшинными символами</small>	Строка с обычными символами Строка с увеличенными символами Строка с уменьшинными символами

Для изменения базовых параметров шрифта (размер, начертание, цвет) используйте тэг <basefont>. Новый размер шрифта задается параметром size:

В Блокноте	В браузере
<basefont size="1">Размер шрифта = 1 <basefont size="4">Размер шрифта = 4 <basefont size="7">Размер шрифта = 7	Размер шрифта = 1 Размер шрифта = 4 Размер шрифта = 7

Вы можете изменить цвет шрифта. Для задания цвета, наиболее распространенные из них имеют названия:

Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal Yellow

White

Новый цвет шрифта задается параметром color:

В Блокноте	В браузере
<basefont color="fuchsia">Малиновый цвет <basefont color="silver">Серебряный цвет <basefont color="maroon">Темно-красный цвет	Малиновый цвет Серебряный цвет Темно-красный цвет

Можно изменить параметры шрифта относительно базовых значений, то есть "временно". Для этого используется тэг <font> с соответствующими паметрами:

В Блокноте	В браузере
<font size="-1">Размер шрифта уменьшин на 1 <font size="+3">Размер шрифта увеличен на 3 <font color="blue">Цвет шрифта - голубой	Размер шрифта уменьшин на 1 Размер шрифта увеличен на 3 Цвет шрифта - голубой

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

В Блокноте	В браузере
<b>Выделение жирным шрифтом</b> <i>Выделение наклонным шрифтом</i> <u>Выделение подчеркиванием</u> <strike>Выделение перечеркиванием</strike> <tt>Шрифт с фиксированной шириной букв</tt>	Выделение жирным шрифтом Выделение наклонным шрифтом Выделение подчеркиванием Выделение перечеркиванием Шрифт с фиксированной шириной букв

Для отображений формул и индексов используйте тэги подстрочных символов <sub> и надстрочных символов <sup> (не забудте указать парный закрывающий тэг):

В Блокноте	В браузере
Формула воды - H<sub>2</sub>O Кубическая функция: y = x<sup>3</sup>	Формула воды - H2O Кубическая функция: y = x3

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

В Блокноте	В браузере
<cite>Текст - цитата</cite> <em>Текст с особым значением</em> <strong>Сильное выделение текста</strong> <kbd>Пользовательский текст</kbd> <code>Текст программы</code> <samp>Последовательность символов</samp> <var>Имя переменной</var>	Текст - цитата Текст с особым значением Сильное выделение текста Пользовательский текст Текст программы Последовательность символов Имя переменной

При необходимости исключить строки Web-документа из обработки браузером, их заключают в тэг коментария <!-- -->

В Блокноте	В браузере
<p>Первая строка <!--<p>Вторая строка--> <p>Третья строка	Первая строка Третья строка

Вы можете явно задать название шрифта, которым будет отображен текст. Для этого используйте тэг <font> с параметром face:

В Блокноте	В браузере
<font face="Arial">Текст шрифтом Ариал <font face="Courier New">Текст шрифтом Курьер <font face="Times New Roman">Текст шрифтом Таймс	Текст шрифтом Ариал Текст шрифтом Курьер Текст шрифтом Таймс

В языке Web-страниц определено 4 специальных символа. Их нельзя вставлять в обычный текст, вместо этого необходимо использовать следующую замену:

Символ	Замена
<	&lt
>	&gt
&	&amp
"	&quot

В Блокноте	В браузере
f &lt kx<sup>2</sup> M = &ltab&gt Торговый дом &quotОт &amp До&quot	f < kx2 M = <ab> Торговый дом "От & До"

Текст абзаца можно сделать "движущимся", т.е. оформить его в виде бегущей строки. Для этого используйте тэг <marquee>..</marquee>:

В Блокноте	В браузере
<marquee>Уходя выключай свет!!!</marquee>

При оформлении Web-страниц часто оформляют текстовые абзацы горизонтальной линией. Для включения горизонтальной линии в документ используйте тэг <hr>. При этом можно изменять параметры:

Параметр	Описание (Значения)
align=	выравнивание линии по окну ("left" - по левой границе,"center" - центрирование, "right" - по правой границе)
color=	Цвет разделительной линии
noshade	Плоская линия
size=	Высота линии в пикселах
width=	Ширина линии в пикселах или процентах от ширины окна браузера (число с %)
В Блокноте		В браузере
<hr color="red"> <hr width="50%"> <hr width="50%" align="left"> <hr size="5" width="50%" align="right"> <hr width="80%" noshade>

Использование цвета и графики

Использование цветового выделения часто используется в Web-документах. Почти каждый элемент имеет цветовой атрибут. Значения цветовых параметров приводились во 2-ой части пособия на примере изменения цвета шрифта. Однако можно изменить шрифт фона документа. Для этого используйте параметр bgcolor тэга <body>:

В Блокноте	В браузере
<body bgcolor="Teal"> <p align="center"><font color="Aqua"> <big>Глава I</big> </font> </body>	Глава I

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

1. Рисунок не должен быть очень контрастным, т.е. пестрым

2. Рисунок либо не должен обрываться на границе, либо его границы должны "сшиваться"

3. Если рисунок яркий, то шрифт документа должен быть темным и наоборот

4. Размер "плитки" текстуры выбирайте в пределах от 3х3 до 5х5 см при разрешении 38 пиксел/см

Текстурный рисунок должен быть сохранен в формате GIF или JPG. После чего, его надо указать в параметре background тэга <body>:

В Блокноте	В браузере
<body background="textura1.jpg"> <p align="center"><font color="Gray"> <big>Пример "светлой" текстуры</big> </font> </body>	Пример "светлой" текстуры
<body background="textura2.jpg"> <p align="center"><font color="White"> <big>Пример "темной" текстуры</big> </font> </body>	Пример "темной" текстуры

Изображение можно вставить в текст. Это поможет "оживить" Web-документ, сделать его мультимедийным. Для это используйте тэг <img> с параметрами:

Параметр	Описание (Значения)
src=	Адрес URL файла с графическим изображением (формат GIF или JPG)
alt=	Текстовая строка, отображаемая вместо изображения, если графический файл отсутствует или когда отображение графики отключено
align=	Выравнивание текста относительно изображения ( "left"-по левой границе, "right"-по правой границе, "top"-по верхней границе, "bottom"-по нижней границе, "middle"-по центру изображения)
height=	Высота изображения в пикселах
width=	Ширина изображения в пикселах
hspace=	Ширина просвета между изображением и текстом по горизонтали в пикселах или в % от ширины окна
vspace=	Ширина просвета между изображением и текстом по вертикали в пикселах или в % от ширины окна
border=	Ширина рамки вокруг изображения в пикселах

В Блокноте	В браузере
<img src="photo.gif" width="14%" hspace="5" vspace="5" alt="Гурьян Л.В." align="top"> Пример изображения в формате GIF <img src="dune.jpg" width="14%" hspace="15" vspace="15" alt="Дюны" align="middle" border="2"> Пример изображения в формате JPG	Пример изображения в формате GIF Пример изображения в формате JPG