Функциональные элементы 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> - верхний индекс.