Ячейка в таблице .
|
|
Многострочное поле для ввода
|
|
|
Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
Любой код содержит в себе команды управления, посредством которых выполняются определенные задачи. В каждом языке они называются по-разному, но суть у них одна и та же. Чтобы не запутаться в терминах и говорить на одном языке, давайте разберемся как называются и как используются команды HTML.
В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод , о котором упоминал на странице HTML это.. . Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным.
Немного по-другому обстоят дела с тегами, не трбующими обязательной закрывающей части. К их числу можно отнести теги, создающие элементы таблицы: . Ряд таблицы
автоматически закроет тег тела таблицы |
. А вот закрывать тег таблицы надо обязательно, в противном случае всё содержимое страницы, следующее за таблицей, станет её частью и попадёт под влияние табличных настроек.
Запрещается закрывать теги, не производящие действий над гипертекстом -
, ![]()
,
и другие. Требования для каждого тега указаны в спецификации. Ниже мы рассмотрим - где именно что указано. Повторим. В языке HTML существует два вида тегов:
Строковые (inline). Их ещё называют инлайновые.
Блоковые (block).
Конечный (/закрывающий) тег может быть:
Закрывающий тег () обязателен.
Закрывающий тег () не обязателен.
Закрывающий тег () запрещён.
атрибуты у тегов могут быть:
Обязательные.
Необязательные.
Эту информацию по каждому конкретному тегу можно получить в спецификации. Как ею пользоваться написано ниже. И ещё один важный момент касательно использования различных символов в HTML.
При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символов "" будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому проблемные символы кодируются. Называются такие закодированные символы мнемониками. Список мнемоник можно посмотреть в спецификации .
Вложенность тегов
Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере:
Элемент подчёркнутого текста является родительским
элементом для элемента
зачёркнутого текста
с наследованием.
Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым.
Главное помнить, что обе части тега (открывающая и закрывающая) должны быть вложены в один и тот же родительский элемент, опять же по аналогии с матрёшкой.
Использование спецификации
Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5.
Теперь о том, как пользоваться спецификацией. Допустим, нас интересуют вышеупомянутые таблицы. Открываем краткое содержание и выбираем соответствующий пункт (№11) - Таблицы.
Открываем спецификацию, меню разделов:
Тут можно получить информацию по каждому атрибуту.
Требования закрывающего тега (). В данном случае начальный и конечный теги обязательны.
Названия атрибутов данного тега.
Список значений каждого атрибута.
Статус атрибута (Актуальный/Устаревший/Запрещённый).
Тип данных (значений) атрибута.
Список общих атрибутов, которые используются с любыми тегами.
Важное замечание. На скриншоте выше атрибут align
имеет статус Deprecated
(не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict
. Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке.
Уточнения по тегам:
Название тега.
Статус открывающего тега в документе html:- O - optional (не обязателен)
Статус закрывающего тега в документе html:- O - optional (не обязателен)
- F - forbidden (запрещён)
Предполагается ли содержимое (гипертекст):- E - Empty (без содержимого)
Статус тега (D, L и F):- D - deprecated (не рекомендован).
- L - loose (допускается в переходной спецификации Transitional).
- F - Frameset (допускается в спецификации Frameset).
Атрибуты задаются в начальном тэге элемента и состоят из имени
и значения
, которые отделяются друг от друга знаком равно (=). Например в атрибуте href="http://www.сайт/"
href
является именем, а http://www.сайт/
значением.
HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.
Атрибут title
Рассмотрим следующий пример:
В этом примере используется тег , который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.
Имя атрибута title
. В этом примере, мы дали ему значение Язык гипертекстовой разметки
.
Атрибут title может (необязательно) использоваться в любом HTML - элементе, чтобы предоставить дополнительную информацию о содержимом элемента.
При использовании атрибута title, большинство браузеров будет отображать его значение как "всплывающую подсказку", когда пользователь наводит указатель мыши на элемент.
Атрибут alt
Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега ![]() . Атрибут alt добавляется внутрь тera ![]() и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Атрибут href
Вы можете добавить сразу несколько атрибутов к элементу.
Вот пример сложения двух атрибутов к элементу (который используется для создания гиперссылки на другую веб - страницу).
Пример HTML:
Попробуй сам
HTML Tutorials
Атрибут href определяет расположение веб - страницы, на которую ведет ссылка.
Мы также используем атрибут title для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.
Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (" ") или одинарные кавычки(" ").
Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:
Одинарные или двойные кавычки?
Чаще всего в HTML используются "двойные кавычки", но вы можете использовать и "одинарные". Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:
HTML
Можно наоборот:
HTML
Общие атрибуты
Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:
Атрибут
Значение
Описание
| align
| right, left, center
| Горизонтальное выравнивание тегов
|
| valign
| top, middle, bottom
| Вертикальное вырвнивание тегов внутри HTML-элемента.
|
| background
| URL
| Расположение фонового изображения
|
| id
| Уникальное имя
| Уникальное имя для использования с каскадными таблицами стилей.
|
| class
| правило класса или стиль класса
| Классифицирует элемент для использования с каскадными таблицами стилей.
|
| width
| Числовое значение
| Определяет ширину таблиц, изображений или ячеек таблицы.
|
| height
| Числовое значение
| Определяет высотуу таблиц, изображений или ячеек таблицы.
|
| title
| Текст подсказки
| Текст, отображаемый во всплывающей подсказке.
|
Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.
Задачи
Первое итоговое задание
Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Всплывающая подсказка
Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Всплывающая подсказка
Title="Хороший сайт">сайт - сайт для разработчиков.
Размеры изображения
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.
Размеры изображения
Размеры изображения
| 
