Книга: Веб-Самоделкин. Как самому создать сайт быстро и профессионально

Основные теги языка HTML

Основные теги языка HTML

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

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

•  – назначение для гиперссылки «горячей клавиши»;

•  – определение адреса, на который ведет гиперссылка;

•  – именование областей веб-страницы;

• – установка порядка перехода по гиперссылкам;

• – определение окна для отображения объекта гиперссылки.

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

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

Тег позволяет увеличить шрифт текста по сравнению с соседним текстом, а с помощью тега вы можете создать в документе блок цитаты.

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

• , и – позволяют установить цвет гиперссылок;

•   – выбор графического фона;

• – изменение цвета фона веб-страницы (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);

• – установка режима перемещения графического фона при пролистывании веб-страницы;

• – позволяет редактировать высоту нижнего поля;

• – позволяет редактировать ширину левого поля;

• – позволяет редактировать высоту верхнего и нижнего полей;

• – позволяет редактировать ширину левого и правого полей;

• – позволяет редактировать ширину правого поля;

• – изменение цвета текста (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);

• – позволяет редактировать высоту верхнего поля.

Тег , как мы уже отмечали ранее, предназначен для создания новой строки (то есть для переноса текста на нижеследующую строку). Этот тег имеет один атрибут – , предназначенный для предотвращения переноса слов текста.

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

Для центрирования элементов веб-страницы предназначен тег .

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

• – атрибут позволяет задать признак выравнивания данных в ячейках группы по горизонтали;

• – с помощью данного атрибут задается цвет фона ячеек группы;

• – выбор символа, устанавливающего порядок выравнивания данных в ячейках группы;

• – установка числа столбцов в группе;

• – установка признака выравнивания данных в ячейках группы по вертикали.

– с помощью данного тега создается структурная группа столбцов таблицы. Он имеет те же атрибуты, что и тег .

– данный тег позволяет отметить статью определения в списке определений.

– с помощью данного тега текст снабжается признаком зачеркивания.

– данный тег позволяет разделить веб-страницу на области. Это бывает целесообразно при использовании стилей. У данного тега есть атрибут , с помощью которого можно сформировать список исключений.

– с помощью данного тега осуществляется изменение внешнего вида текста. Этот тег имеет перечисленные ниже атрибуты.

• – изменение цвета текста;

• – изменение шрифта текста;

• – изменение размера шрифта.

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

• – определение формата кодировки данных;

• – задание места назначения данных формы;

• – выбор формата передаваемых данных формы;

• – выбор способа пересылки данных формы по сети;

• – определение места, где будет отображено сообщение о доставке данных формы.

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

• – предназначен для изменения цвета линий рамки фрейма;

• – позволяет скрыть рамку фрейма;

• – позволяет изменить высоту верхнего и нижнего полей фрейма;

• – позволяет изменить ширину левого и правого полей фрейма;

• – предназначен для присвоения имени фрейму;

• – предотвращает изменение размеров фрейма;

• – предназначен для управления отображением полос прокрутки фрейма;

• – предназначен для определения имени и местонахождения файла данных, отображаемых фреймом.

– с помощью данного тега создается набор фреймов. Он может использоваться с перечисленными ниже атрибутами.

• – позволяет регулировать толщину линий рамок фреймов;

• – позволяет изменять цвет линий рамок фреймов;

• – предназначен для формирования столбцов рамок фреймов;

• – предназначен для скрытия рамок фреймов;

• – устанавливает заданную толщину линий рамок фреймов;

• – предназначен для создания строк фреймов.

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

– этот парный тег определяет раздел заголовка на веб-странице. Кроме этого, он предназначен для хранения прочих элементов, задача которых – помочь Интернет-обозревателю в работе с данными. Также между тегами могут располагаться метатеги, применяемые для хранения сведений, которые предназначены для Интернет-обозревателей и поисковых систем. Строго говоря, заголовок станицы (см. рис. 2.13 и 2.14), который мы поместили между тегами , следовало бы еще поместить и между тегами . При этом программный код заголовка должен был выглядеть так:

Это больше соответствует правилам HTML-языка, и мы не делали этого только для того, чтобы при создании простейшей веб-страницы обойтись минимальным количеством тегов.

– этот тег предназначен для создания горизонтальной линейки. Он может использоваться с перечисленными ниже атрибутами.

• – определяет признак выравнивания линейки;

• – позволяет придать горизонтальной линейке объемный эффект;

• – позволяет указать толщину линейки;

• – позволяет указать ширину линейки.

– как мы уже отмечали ранее, этот тег предназначен для идентификации веб-страницы. Программный код любой веб-страницы должен начинаться тегом , и завершаться тегом .

– с помощью данного тега (он также является парным) можно придать тексту курсивное начертание. Как пользоваться этим тегом, мы продемонстрировали ранее на конкретном примере (см. рис. 2.7 и 2.10).

– этот тег позволяет создать плавающий фрейм.

– с помощью этого тега осуществляется вставка в документ рисунков, фотографий, изображений и прочих графических объектов. Данный тег может использоваться с атрибутами, которые перечислены ниже.

• – с помощью данного атрибута можно задать признаки выравнивания текста относительно изображения (например, чтобы текст обтекал изображение, и т.п.);

• – предназначен для отображения альтернативного текста при отсутствии графического объекта;

• – позволяет поместить графический объект в рамку;

• – позволяет создать внедренный видео-объект;

• , – эти атрибуты позволяют задать соответственно высоту и ширину графического объекта;

• , – эти атрибуты позволяют обрамлять графический объект полосами чистого пространства;

• – предназначен для создания карты ссылок;

• – определяет имя и местонахождение файла изображения с низким разрешением;

• – присваивает имя графическому объекту;

• – определяет имя и местонахождение файла графического объекта;

• – устанавливает порядок перехода по графическим объектам;

• – устанавливает имя карты ссылок.

– с помощью данного тега осуществляется подчеркивание вставленного фрагмента текста.

– тег предназначен для позиционирования слоя (группы элементов) веб-страницы. Конкретизировать действие тега позволяют его перечисленные ниже атрибуты.

• – позволяет установить высоту слоя;

• – позволяет установить ширину слоя;

• – определяет координату слоя относительно левой кромки окна;

• – определяет координату слоя относительно верхней кромки окна;

• – определяет приоритет воспроизведения перекрывающихся элементов слоя.

– данный тег предназначен для создания списков. Каждый элемент списка должен помечаться этим тегом. Возможности HTML-языка предусматривают создание как маркированных, так и нумерованных списков. В первом случае используется атрибут , во втором случае – .

– с помощью данного тега делаются ссылки на файл внешнего листа стилей. Это тег может использоваться с перечисленными ниже атрибутами.

• – атрибут предназначен для определения имени и расположения файла внешнего листа стилей;

• – определяет тип отношения внешнего листа стилей к веб-странице;

• – определяет формат внешнего листа стилей.

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

– этот тег позволяет создать на веб-странице один из довольно распространенных эффектов: бегущую строку. Он может использоваться совместно со следующими атрибутами.

• – позволяет задать способ поведения бегущей строки;

• – предназначен для указания цвета фона бегущей строки;

• – устанавливает направление движения бегущей строки

• – определяет высоту бегущей строки;

• – определяет ширину бегущей строки;

• , – позволяет выполнить обрамление бегущей строки полосами чистого пространства;

• – определяет количество циклов перемещения бегущей строки;

• – определяет шаг единовременного перемещения бегущей строки;

• – определяет величину задержки между отдельными тактами перемещения текста бегущей строки;

• – устанавливает минимальное значение интервала задержки .

– с помощью данного тега в программном коде выделяется служебная информация о веб-странице, предназначенная главным образом для поисковых систем.

– действие этого тега прямо противоположно действию тега , с которым мы познакомились ранее: он запрещает переход текста на новую строку (от английского «no break», что дословно означает «нет разрыва»).

– с помощью данного тега включается отображение альтернативного текста при невозможности показа фрейма.

– с помощью данного тега включается отображение альтернативного текста при невозможности исполнения сценария JavaScript.

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

– с помощью данного тега можно создавать новые абзацы. Он может использоваться с атрибутом , который определяет признак выравнивания текста абзаца.

– этот тег предназначен для создания объекта сценария JavaScript.

– с помощью данного тега вы моете уменьшить размер шрифта относительно расположенного рядом текста.

– тег устанавливает признак зачеркивания текста;

– создание полужирного текста

– создание определения внутреннего листа стилей;

– преобразование текста в подстрочный индекс (то есть создание подстрочного текста);

– преобразование текста в надстрочный индекс (то есть создание надстрочного текста);

– тег предназначен для построения таблиц. Он может использоваться совместно с перечисленными ниже атрибутами.

• – включает режим обтекания таблицы текстом;

• – определяет графический фон таблицы;

• – устанавливает цвет фона таблицы;

• – позволяет установить требуемую толщину линии рамки;

• – устанавливает цвет линий рамки;

• – устанавливает размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ (иначе говоря, с помощью этого атрибута определяется расстояние от содержимого ячейки до ее границ);

• – позволяет установить расстояние между ячейками таблицы;

• – позволяет установить набор отображаемых линий рамки таблицы;

• , – эти атрибуты позволяют установить соответственно высоту и ширину таблицы;

• – позволяет установить набор внутренних линий таблицы, которые будут отображаться.

– с помощью данного тега идентифицируется группа строк данных таблицы. Тег может использоваться с перечисленными ниже атрибутами.

• – атрибут позволяет указать способ выравнивания данных по горизонтали;

• – определение цвета фона группы;

• – с помощью этого атрибута можно указать символ, определяющий порядок выравнивания данных в ячейках группы;

• – атрибут позволяет указать способ выравнивания данных по вертикали.

– данные теги позволяют определить соответственно ячейку данных и ячейку заголовка таблицы. Они могут использоваться с атрибутами, которые перечислены ниже.

• – атрибут позволяет указать способ выравнивания данных по горизонтали;

• – выбор графического фона ячеек;

• – выбор цвета фона ячеек;

• – указание символа, определяющего порядок выравнивания данных в ячейках;

• – с помощью этого атрибута можно соединить соседние ячейки одной строки таблицы;

• – атрибут позволяет задать высоту ячейки;

• – атрибут позволяет задать ширину ячейки;

• – с помощью данного атрибута можно запретить перенос слов внутри ячейки на новую строку;

• – атрибут позволяет выполнить объединение соседних ячеек одного столбца;

• – атрибут позволяет задать способ выравнивания данных по вертикали.

– с помощью этого тега можно создать группу строк итоговых данных таблицы. Он может использоваться с перечисленными ниже атрибутами.

• – атрибут позволяет указать способ выравнивания данных по горизонтали;

• – выбор цвета фона группы;

• – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;

• – атрибут позволяет задать способ выравнивания данных по вертикали.

– с помощью данного тега задается заголовок веб-страницы, который отображается вверху окна Интернет-обозревателя. О том, как пользоваться этим тегом, мы уже говорили ранее.

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

• – атрибут позволяет указать способ выравнивания данных по горизонтали;

• – выбор цвета фона;

• – позволяет задать символ, определяющий порядок выравнивания данных в ячейках;

• – атрибут позволяет задать способ выравнивания данных по вертикали.

– тег позволяет отобразить текст моноширинным шрифтом.

– данный тег включает подчеркивание текста.

– с помощью данного тега можно создавать маркированные списки. Использование с данным тегом атрибута позволяет указать стиль маркированного списка.

Как показывает практика, перечисленных тегов с атрибутами бывает вполне достаточно для создания типичных веб-страниц на языке программирования HTML.

Оглавление книги