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

Опубликовал: admin Wednesday, May 30, 2024 в категории HTML, Новичкам | Пока нет комментариев

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

ВНИМАНИЕ

Не забывайте, что многие теги HTML-языка являются парными – например, <body> </body>, <b> </b>, и т. д.

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

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

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

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

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

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

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

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

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

Одним из ключевых тегов языка программирования HTML является парный тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Он имеет те же атрибуты, что и тег <col>.

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

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

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

<font> – с помощью данного тега осуществляется изменение внешнего вида текста.

Этот тег имеет перечисленные ниже атрибуты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> – с помощью данных тегов создаются заголовки разных уровней (соответственно от первого до шестого). Например, на созданной нами вебстранице (см. рис. 2.13) заголовок Информация о странице создан с помощью тега <h1>, то есть это заголовок первого уровня. Отметим, что все теги, предназначенные для создания заголовков, являются парными. Поэтому если вы, например, формируете заголовок первого уровня, то он должен находиться между тегами <h1> </h1> (см. рис. 2.14). Теги заголовков могут использоваться с атрибутом align, который позволяет определить признак выравнивания заголовка.

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

<head>

<title>Тестовая страница</title>

</head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<tbody> – с помощью данного тега идентифицируется группа строк данных таблицы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ках;

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

<title> – с помощью данного тега задается заголовок веб-страницы, который отобража-

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

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

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

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

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

ках;

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

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

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

<ul> – с помощью данного тега можно создавать маркированные списки. Использова-

ние с данным тегом атрибута type позволяет указать стиль маркированного списка.

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

Источник: А. А. Гладкий. «Веб-Самоделкин. Как самому создать сайт быстро и профессионально»

Популярное

Категории

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

ВНИМАНИЕ

Похожие посты:

Комментировать Cancel reply