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

Атрибуты HTML тегов и их классификация

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

Почти у каждого атрибута есть свое значение (параметр). В общем виде любой одиночный или парный тег можно представить схематически в следующем виде:

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

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

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

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

Но заглянем все-таки на официальную страницу W3C, где представлена таблица рекомендуемых html тегов . Если нажать на ссылку с интересующим нас тегом (возьмем для наглядности уже упоминавшийся тег hr, тем более, что ниже рассмотрим с ним один пример), то нас перебросит на эту вебстраницу, где дана спецификация, касающаяся этого элемента:

Все атрибуты элементов можно распределить на три группы:

Группа универсальных атрибутов
— они применяются практически ко всем html тегам. На скриншоте выше они выделены в зеленую рамку
Уникальные атрибуты
— присущие только данному элементу набор атрибутов (для тега hr на рисунке они подчеркнуты фиолетовым: align, noshade, size, width). В спецификацию html 5 добавлен новый атрибут color, который определяет цвет горизонтальной линии.
События
— эти атрибуты нужны, когда требуется какое-либо действие в ответ на действие пользователя. На скриншоте они выделены в синюю рамку.

Информацию об атрибутах можно также получить на другой страничке W3C, где приведена таблица с полным списком html атрибутов :

В этой таблице приведены все атрибуты для всех существующих в языке гипертекстовой разметки тегов. В столбце «Related Elements» напротив нужного атрибута отмечены теги, в которых данный атрибут может быть использован. В колонке «Type» обозначен тип данных, которые могут быть использованы в качестве значения атрибута. Например, для атрибута align (который определяет выравнивание элемента) возможно применение трех возможных значений (left, center, right).

Если в колонке «Dept» проставлена буква D, то такой атрибут использовать не рекомендуется, иначе html документ не пройдет валидацию. В этом случае необходимо использовать стили css, изучением которых, как я уже отмечал, займемся в недалеком будущем. Это просто необходимо, поскольку тенденция такова, что большинство атрибутов в версии html 5 не рекомендованы для использования и внешний вид элементов следует определять, применяя css.

Кстати, абсолютно полная информация с добавленными тегами и их атрибутами по версии html 5 представлена на одном из лучших, на мой взгляд, ресурсов, посвященных изучению основ html, а именно на htmlbook , причем на русском языке.

Требуется закрывать все теги

В HTML теги делятся на две категории — парные теги, называемые еще контейнерами
и одинарные теги. Парные теги состоят из открывающего и закрывающего тега,
причем в некоторых случаях закрывающий тег можно опустить. В XHTML закрывающий тег требуется всегда и везде.
В примере 3.4 показан код с ошибкой, из-за того, что отсутствует тег </p>.

Пример 3.4. Нет закрывающего тега

XHTML 1.0IECrOpSaFx

Некоторые разработчики игнорируют закрывающие теги </li>, </p>, </td>,
но в XHTML их отсутствие считается ошибкой. В примере 3.5 показано корректное
использование списков.

Пример 3.5. Добавление списка

XHTML 1.0IECrOpSaFx

В данном примере каждому открывающему тегу соответствует его закрывающий тег.

Элемент <!DOCTYPE> не является частью XHTML-документа, поэтому для него
закрывающего тега не требуется.

Что касается одинарных тегов, то они должны завершаться слэшем перед закрывающей
угловой скобкой, как показано в примере 3.6.

Пример 3.6. Добавление изображения

XHTML 1.0IECrOpSaFx

В данном примере обратите внимание на обязательный пробел, который предшествует
конструкции />. В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе

В табл. 3.1 приведены некоторые теги HTML и их запись в XHTML-документе.

Табл 3.1. Сопоставление HTML и XHTML-тегов
HTML-тег	XHTML-тег
<br>	<br />
<hr>	<hr />
<input>	<input />
<img>	<img />
<meta>	<meta />

Обновленная декларация doctype

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

Декларация сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

Таблица 1. Doctype-декларации и их возможности

Doctype-декларация	Возможности	Пример
HTML 4.01 strict	Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
HTML 4.01 transitional	Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
HTML 4.01 frameset	Аналогична декларации HTML transitional, но разрешает использование элементов frameset.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
XHTML 1.0 strict	Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
XHTML 1.0 transitional	Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
XHTML 1.0 frameset	Аналогична декларации XHTML transitional, однако разрешает элементы frameset.	<DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
XHTML 1.1	Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .

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

<p> — Создает новый параграф

<p align=?> — Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

<br> — Вставляет перевод строки.

<blockquote></blockquote> — Создает отступы с обеих сторон текста.<dl></dl>Создает список определений.

<dt> — Определяет каждый из терминов списка

<dd> — Описывает каждое определение

<ol></ol> — Создает нумерованный список

<li> — Определяет каждый элемент списка и присваивает номер

<ul></ul> — Создает ненумерованный список

<li> — Предваряет каждый элемент списка и добавляет кружок или квадратик.

<div align=?> — Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

HTML-теги

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

Пример тега:

Это HTML-дескриптор , определяющий курсивное начертание шрифта. Буква i — первая буква слова italic. У него есть:

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

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

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

Пустыми также являются следующие теги:

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

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

Развитие языка

Шло время, простой набор тегов, которым был HTML в начале своего существования, разросся и окреп. Появилась возможность встраивать в страницу мультимедийный контент, создавать таблицы, управлять расположением изображений.

Стихийное расширение языка следовало обуздать и взять под контроль, необходимы были определенные стандарты.

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

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

Атрибуты и свойства тега

1. Атрибут target=»параметр», который может принимать следующие значения:

_blank — открывает страницу в новом окне
_self — загружает страницу в текущее окно
_parent — загружает страницу во фрейм-родитель
_top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример с target

В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.

Чаще всего применяется значение _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.

Пример с подсказкой title

Преобразуется на странице в следующее:

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

3. Атрибут class=»название класса» задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Пример

Преобразуется на странице в следующее:

как заработать на сайте

Поясню выше описанный пример. Класс, в котором мы описали тег <a> называется list. Давайте разберемся, что значат приписки visited, link и hover.

a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку «:link», поскольку a.класс — делает то же самое).
a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.

4. Атрибут rel=»параметр» — определяет отношения между текущим документом и документом, на который ведет ссылка

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

Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel=»nofollow», чтобы сохранить вес на Вашем сайте.

4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей

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

HTML теги

Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.

	Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа.

Рассмотренный пример HTML-документа использует следующие теги:

Название тега	Описание
<!DOCTYPE…>	Это инструкция для веб-браузера о том, на какой версии HTML написана страница.
<html>	Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ
<head>	Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как <title>, <link> и т.д.
<title>	Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке.
<meta>	Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа.
<body>	Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например <h1>, <div>, <p> и т.д.
<h1>	Этот тег представляет собой заголовок.
<p>	Этот тег представляет собой абзац.

Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

Новые структурные теги

Предпосылка создания новых структурных тегов — желание разделять Web-страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат. С концептуальной точки зрения Web-страницу можно рассматривать как документ. Документы содержат заголовки, нижние колонтитулы, главы и различные другие условные обозначения, разделяющие документы на логические части.

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

Подход HTML 4

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

Листинг 2. Простая HTML-страница, использующая теги

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>
      A Simple HTML Page Using Divs
    </title>
  </head>
  <body>
    <div id='header'>Header</div>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

Этот подход работает прекрасно; тег — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута у каждого тега трудно сказать, какой раздел документа представляет каждый тег . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов не является обязательным. Существует множество разновидностей атрибута , которые могут рассматриваться как одинаково валидные. Сам тег не содержит указаний на то, какой тип контента ему было поручено представлять.

Подход HTML5

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

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

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

Как работает HTML?

HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.

Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.

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

Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис <tag> </tag>.

Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:

<div>
    <h1> Основная рубрика </h1>
    <h2> Броский подзаголовок </h2>
    <p> Пункт 1 </p>
    <img src = "/" alt = "Изображение">
    <p> Пункт второй с гиперссылкой <a href="https://example.com"> </a> </p>
</div>

Самый главный элемент — это простое разделение (<div> </div>), которое вы можете использовать для разметки больших разделов контента.
Он содержит заголовок (<h1> </h1>), подзаголовок (<h2> </h2>), два абзаца (<p> </p>) и изображение (<img>).
Второй абзац содержит ссылку (<a> </a>) с атрибутом href, который содержит целевой URL.
Тег изображения также имеет два атрибута: src для пути изображения и alt для описания изображения.

Формы

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

<form></form> — Создает формы

<select multiple name=»NAME» size=?></select> — Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

<option> — Указывает каждый отдельный элемент меню

<select name=»NAME»></select> — Создает ниспадающее меню <option>Указывает каждый отдельный элемент меню

<textarea name=»NAME» cols=40 rows=8></textarea> — Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

<input type=»checkbox» name=»NAME»> — Создает checkbox. За тегом следует текст.

<input type=»radio» name=»NAME» value=»x»> — Создает radio кнопку. За тегом следует текст.

<input type=text name=»foo» size=20> — Создает строку для ввода текста. Параметром Size указывается длина в символах.

<input type=»submit» value=»NAME»> — Создает кнопку «Принять»

<input type=»image» border=0 name=»NAME» xsrc=»name.gif»> — Создает кнопку «Принять» — для этого используется изображение<input type=»reset»>Создает кнопку «Отмена»

Атрибут href

Вы можете добавить сразу несколько атрибутов к элементу.

Вот пример сложения двух атрибутов к элементу <a>(который используется для создания гиперссылки на другую веб — страницу).

Пример HTML:

Попробуй сам

Атрибут определяет расположение веб — страницы, на которую ведет ссылка.

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

Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (» «) или одинарные кавычки(‘ ‘).

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

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

Пример HTML:

Попробуй сам

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

HTML

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

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

Дескриптор может иметь атрибуты, то есть определённые свойства. Их синтаксис выглядит так: имя атрибута = его значение.

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

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Применение стилей к отдельным столбцам таблицы</title>
</head>
<body>
	<table>
		<colgroup>
<!-- задаем определённый стиль для двух колонн (атрибут span="2"), а после для каждой последующей свой -->
			<col span = "2" style = "background-color:khaki"> 
			<col style = "background-color:silver">
			<col style = "background-color:coral">
		</colgroup>
		<tr>
			<th>№ заявки </th>
			<th>Услуга</th>
			<th>Цена, руб.</th>
			<th>Итого</th>
		</tr>
		<tr>
			<td>31337</td>
			<td>Чтение в слух</td>
			<td>1 000</td>
			<td>1 000</td>
		</tr>
	</table>
</body>
</html>

Свойства столбцов в HTML таблице.

Пример использования атрибута span к группе столбцов:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута span HTML тега <colgroup></title>
<style> 
.test {
background-color : lime; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
	<table>
		<colgroup span = "2" class = "test">
		</colgroup>
		<tr>
			<th>№ заявки</th>
			<th>Услуга</th>
			<th>Цена, руб.</th>
			<th>Комиссия, руб.</th>
		</tr>
		<tr>
			<td>31337</td>
			<td>Чтение в слух</td>
			<td>1 000</td>
			<td>150</td>
		</tr>
	</table>
</body>
</html>

Пример использования атрибута span HTML тега <colgroup> (определяет какое количество столбцов должна охватывать группа).

Атрибут target

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу.
Следующий пример открывает документ в новом окне браузера:

<a href="http://yandex.ru" target="_blank">Поиск </a>

Ниже представлены все значения этого атрибута:

Атрибут	Значение

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно. Это значение по умолчанию.

_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

framename
Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Как связаны HTML, CSS и JavaScript?

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

Однако HTML отлично работает с двумя другими интерфейсами: CSS (каскадные таблицы стилей) и JavaScript. Вместе они могут обеспечить богатый пользовательский интерфейс и реализовать расширенные функции.

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

Подумайте об HTML как о человеке, тогда CSS будет его одеждой а JavaScript — движениями и манерами.

Как оформить нумерованный список?

Нумерованный список с использованием фона

Посмотрите вот на такое симпатичное оформление нумерованного списка.

Нравится? Давайте повторим.

Найдите стили для тега ol. Пропишите к нему новые свойства.

ol {
padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #2E2E2E;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}
 
ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #2E2E2E;
position: relative;
}
 
ol li:before {
margin-bottom: 4px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #BDC3C7;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}

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

list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов

before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта

В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.

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

На одном женском сайте есть очень привлекательные нумерованные списочки.

Как это реализовано? Давайте рассмотрим следующий код:

/*первый номер*/
ol li:first-child {
list-style-image: url(путь к изображению с цифрой 1);
}
 
/*второй номер*/
ol li:nth-child(2n) {
list-style-image: url(путь к изображению с цифрой 2);
}
 
/*третий номер*/
ol li:nth-child(3n) {
list-style-image: url(путь к изображению с цифрой 3);
}
 
/*четвертый номер*/
ol li:nth-child(4n) {
list-style-image: url(путь к изображению с цифрой 4);
}
/*Далее прописываем точно также только для следующих номеров пунктов*/

В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку.

Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).

Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).

Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.

Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.

Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.

Синтаксис тегов

Обычно используются парные теги — открывающий, или начальный, и закрывающий, или конечный. Возможно также применение одиночного тега. Например, тег отступа абзаца может оформлять абзац между тегами <p> и </p>, а может в одиночной форме до следующего первого попавшегося тега <p>.

Тег с пустым текстом: <HR></HR> вставляет разрыв текста без сохранения отступов, можно также использовать специальную форму записи тега — <HR/>.

Набор и рекомендуемые интерпретации тегов определены организацией W3C.

В SGML можно назначать другие символы для обрамления тега (например, фигурные скобки), но в некоторых подмножествах этого языка (например, HTML и XML) такая возможность отсутствует.

Кроме того, существуют разные системы языков-подмножеств с меньшими возможностями. Например, на веб-форумах и досках объявлений используется язык разметки BBCode, теги которого ограничиваются символами квадратных скобок: .

Например, [url=»http://ru.wikipedia.org»]Русская Википедия — ссылка на языке BBCode, указывающая на страницу русской Википедии.

Первое итоговое задание [1-4]

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

Пришло время повторить изученное и выполнить несложные задания:

Всплывающая подсказка

Задание
Ответ
Реши сам »

Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.

Рис. 1

Задание
Ответ
Реши сам »

Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.

Ссылка на веб-сайт

Задание
Ответ
Реши сам »

Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту «Это ссылка на сайт», вы перешли на главную страницу сайта www.wm-school.ru.

Альтернативный текст

Задание
Ответ
Реши сам »

Создайте для изображения альтернативный текст «Смайлик», который будет показан при наведении указателя мыши на картинку или если картинка не загрузится.

HTML Элементы
HTML Фоматирование

Html код ссылки: тег ..

Атрибуты HTML тегов и их классификация

Требуется закрывать все теги

Обновленная декларация doctype

Таблица 1. Doctype-декларации и их возможности

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

HTML-теги

Развитие языка

Атрибуты и свойства тега

HTML теги

Новые структурные теги

Подход HTML 4

Листинг 2. Простая HTML-страница, использующая теги

Подход HTML5

Как работает HTML?

Формы

Атрибут href

Пример HTML:

Пример HTML:

HTML

Пример использования

Атрибут target

Как связаны HTML, CSS и JavaScript?

Как оформить нумерованный список?

Нумерованный список с использованием фона

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

Синтаксис тегов

Первое итоговое задание [1-4]

Всплывающая подсказка

Ссылка на веб-сайт

Альтернативный текст