Другие элементы

Кроме элементов, в HTML -документах есть и сущности ( entities) – "специальные символы". Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN – код символа в Юникоде в десятеричной системе счисления. Например, © – знак авторского права ( ) (строка 66).

Тег <NOINDEX> (строка 18 и другие) — имя не входящего в официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML, предназначенного для включения в него частей веб-страниц, находящуюся между <noindex> и </noindex>, не предлагаемых к индексации поисковыми системами. Тег предложен российской компанией "Яндекс" в качестве альтернативы атрибуту nofollow (значение предназначено для поисковых систем: он указывает им на то, что гиперссылку, задаваемую тегом <A>, не следует никаким образом учитывать при индексировании данной страницы).

Тег <SPAN> (строка 49) предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров – обычно не меньше 15. Приведем только основные параметры тегов.

Текстовые блоки

• <BR> – новая строка. Этот тег не закрывается (то есть не существует тега </BR> );

• <HR> – горизонтальная линия;

• <BLOCKQUOTE> … </BLOCKQUOTE> – цитата (обычно текст сдвигается вправо);

• <PRE> … </PRE> – режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе). Форматирование текста

• <EM> … </EM> – логическое ударение (обычно отображается курсивным шрифтом );

• <STRONG> … </STRONG> – усиленное логическое ударение (обычно отображается жирным шрифтом );

• <I> … </I> – выделение текста курсивом;

• <B> … </B> – выделение текста жирным шрифтом;

• <U> … </U> – подчеркивание текста;

• <S> … </S> – зачеркивание текста;

• <STRIKE> … </STRIKE> – то же самое, что <S> … </S> ;

• <BIG> … </BIG> – увеличение шрифта;

• <SMALL> … </SMALL> – уменьшение шрифта;

• <SUB> … </SUB> – _{подстрочный текст};

• <SUP> … </SUP> – ^{надстрочный текст};

• <FONT параметры> … </FONT> – задание параметров шрифта:

  • COLOR=color – задание цвета (в шестнадцатеричной форме или названием);

  • FACE=шрифт меняет шрифт;

  • SIZE=размер меняет размер шрифта (от 1 до 7, стандартный по умолчанию 3);

  • SIZE=+размер или SIZE=-размер – размер задается по сравнению со стандартным.

Объекты

• EMBED – вставка различных объектов: не- HTML документов и media-файлов;

• APPLET – вставка Java-апплетов.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

• FORM – создание формы;

• INPUT – элемент ввода (может иметь разные функции – от ввода текста до отправки формы);

• TEXTAREA – текстовая область (многострочное поле для ввода текста);

• SELECT – список (обычно в виде выпадающего меню);

• OPTION – пункт списка.

Ключевые термины

HTML, Веб-браузер, W3C, Теги, DTD, Заголовок документа, Метатеги, Теги <LINK>, <title>, <SCRIPT>, Тело документа, Теги <DIV>, <TABLE>, <H1>, <A>, <IMG>, <SPAN>, Маркированные списки, Параграфы, XHTML.

Задание.

1. Ознакомиться с представленным материалом.

2. Ознакомиться со структурой какого-нибудь сайта, воспользовавшись дополнением FireBug¹ для Firefox.

3. Ознакомиться с предлагаемым макетом будущего сайта (предварительно выбрав вариант), открыв его в редакторе GIMP.

4. Написать HTML-страницу, отображающую структуру выбранного шаблона (без использования оформления)² с использованием редактора Komodo Edit.

Отчет.

1. HTML-страница со структурой выбранного шаблона.

2. Ответы на вопросы:

   1. Что такое HTML?

   2. Какова структура HTML-документа?

   3. Как пользоваться дополнением Firebug для Firefox?

   4. Что такое сущность в HTML-документе?

   5. Почему HTML не является языком программирования?

   6. В чем состоит преимущество блочной верстки (с помощью тегов DIV) перед версткой таблицами?

1 http://firebug.ru/

2 http://htmlbook.ru/samhtml