Функциональные элементы HTML.

Тема: Создание простейших Web – документов.

Основные понятия

Для создания Web – документов используется специальный язык HTML (HiperTextMarkupLanguage язык разметки гипертекста). Документы HTML обычно создаются в текстовых редакторах, сохраняются как файлы с расширение .htm, а затем просматриваются в программе Internet Explorer.

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

Управляющие конструкции языка называются тегами. Все теги заключаются в угловые скобки <…>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например <BODY>. Теги бывают парными и непарными. Непарные теги оказывают воздействие на весь документ. Парные теги бывают открывающими и закрывающими и воздействуют они на ту часть документа, которая заключена между ними.

Например:

<B> - открывающий тег,

</B> - закрывающий тег.

Закрытие парных тегов выполняется так, чтобы выполнялось правило вложения: если тег открыт внутри какого-то тега, то и закрываться он должен внутри этого же тега. Например:

<B><I>На этот текст воздействуют два тега</I></B>.

Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты могут добавляться только к открывающему тегу. Атрибуты – это дополнительные ключевые слова, отделяемые от слова, определяющего тег и от других атрибутов пробелами и размещаемые до символа >. Иногда требуется указание значения атрибута. Значение атрибута отделяется от ключевого слова атрибута знаком <<=>> и заключается в кавычки. Например:

<HR ALIGN="LEFT" >

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

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

Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться соответствующим тегом </HTML>. Внутри документа выделяются два основных раздела: раздел заголовков и тело документа – идущие именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается заголовками <HEAD> и </HEAD>. Раздел заголовка также содержит общий заголовок документа, ограниченный парным тегом <TITLE>.

Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>.

Простейший правильный документ HTML, содержащий все теги, выглядит следующим образом:

<HTML>

<HEAD>

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>Содержание документа</BODY>

</HTML>

Функциональные элементы HTML.

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

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

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

3. Текстовые элементы могут содержать вложенные текстовые элементы.

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

В большинстве документов основными функциональными элементами являются заголовки и абзацы.

Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При отображении Web-документов на экране компьютера эти элементы отличаются размером шрифта.

Каждый абзац задается парным тегом <Р>. Язык HTML не содержит средств для создания «красной строки», поэтому при отображении на экране абзацы разделяются пустой строкой. Закрывающийся тег </Р> является необязательным. Например,

<Н1>Заголовок</Н1>

<Р>Первый абзац<Р>Второй абзац

<Н2>Заголовок второго уровня</Н2>

В отличие от текстового редактора, ввод символа Enter не является признаком конца абзаца. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки , при отображении рассматривается как одиночный пробел.

Enter не осуществляет также и переход на новую строку. Для того, чтобы перейти на новую строку, используют тег <BR>.

В качестве разделителя абзацев используется также текстовая линейка. Она задается непарным тегом <HR>.

Можно использовать и атрибуты тега <HR>. Например,

<HR ALIGN=”RIGHT” SIZE=”10” WIDTH=”50%”>

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

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

Управление форматированием текста осуществляется с помощью следующих тегов:

<FONT> - парный тег, управляющий параметрами шрифта. Должен обязательно содержать хотя бы один из атрибутов: COLOR=, FACE=, SIZE=.

Атрибут SIZE задает размер шрифта в относительных единицах от 1 до 7 (можно использовать знаки + или -), например,

< FONT SIZE=”6”> - шрифт шестого размера.

Атрибут COLOR задает цвет текста, выраженный текстовым значением, например,

< FONT COLOR =”GREEN”> - шрифт зеленого цвета.

Атрибут FACE задает гарнитуру шрифта. Значение этого атрибута есть название шрифта, например,

< FONT FACE=”Times New Roman”> шрифт Times New Roman.

<CITE> - парный тег для вывода цитат (отображаются курсивом).

<EM> - парный тег выделения.

<STRONG> - парный тег сильного выделения.

<U> - парный тег зачеркнутого шрифта.

<S> - парный тег вычеркнутого шрифта.

<B> - полужирный шрифт.

<I> - курсив.

<SUB> - нижний индекс.

<SUP> - верхний индекс.

Наши рекомендации