Общие атрибуты тегов


Содержание

Глобальные атрибуты HTML

На этой странице собраны глобальные атрибуты тегов.

Список атрибутов HTML

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

Определяет горячую клавишу для активации элемента или перевода фокуса на элемент.

Значение: символ клавиши на клавиатуре.

Определяет одно или больше имен класса элемента. Используется для связи HTML элемента с таблицами стилей CSS.

Значение: одно или более имен классов.

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

Значение: true | false.

Определяет контекстное меню для элемента. Контекстное меню появляется при нажатии на правую кнопку мыши.

Значение: > .

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

Значение: пользовательское. Можно использовать атрибут с любым именем, начинающимся на «data-«, например, data-count, data-value, data-result, data-chtoto.

Определяет направление текста внутри элемента (слева направо или справа налево).

Значение: ltr — слева на право | rtl — справа на лево.

Определяет, можно ли перетаскивать элемент.

Значение: true | false | auto.

Значение: Отсутствует.

Определяет идентификатор элемента.

Значение: Название идентификатора.

Указывает на язык содержимого элемента.

Значение: Language Code (код языка).

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

Значение: true | false.

Определяет CSS стили элемента (стили также могут быть определены другими способами).

Значение: CSS код.

Определяет порядковый номер элемента при табуляции.

Значение: порядковый номер.

Содержит дополнительную информацию об элементе.

Значение: текстовая строка.

Определяет, нужно ли переводить содержимое элемента.

Значение: yes | no.

Теги и атрибуты HTML

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

В пояснениях я буду приводить ссылки на спецификацию, а также на её перевод, о котором упоминал на странице HTML это.. . Упоминание о переводе А. Пирамидина имеется в официальной спецификации HTML, так что перевод можно считать качественным.

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

В среде HTML цепочка выполнения команд следующая:

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

Теги выглядят следующим образом:

Чтобы увидеть (если интересно) внутренности html-страницы, в обозревателе кликните правой клавишей мыши и нажмите на пункт Искодный код или Код страницы (везде по-разному).

Ниже приведён фрагмент кода главной страницы портала mail.ru с 2530 по 2547 строку:

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

Полный перечень тегов можно найти в спецификации HTML. Их там чуть менее ста. Каждый отвечает за свои конкретные функции. Поэтому у некоторых может возникнуть резонный вопрос — неужели этого хватает для получения того многообразия оформления, которое на сегодняшний день присутствует в сети интернет?

Атрибуты тегов

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

Теперь изменим значения ширины, чтобы получить прямоугольник:

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

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

Итак, атрибуты бывают:

  1. Обязательные для некоторых тегов.
  2. Необязательные.

Снова о тегах

Идём дальше. Надо кое-что добавить и о тегах — в языке HTML их два вида:

  1. Строковые (inline). Их ещё называют инлайновые .
  2. Блоковые (block).

Если мы заключим гипертекст в тег

, то на странице он сформируется в отдельный блок (так как это блоковый тег) и образует абзац текста. Абзацы на этой странице сформированы как раз таким образом. Пример ниже:

Все заблуждаются в меру своих возможностей.

Теперь представьте, что текст в абзаце (блоке) надо некоторым образом оформить, не нарушая его целостность. Для этого используют inline-теги, которые производят действие над содержимым, но блока не образуют. Сделаем текст в следующем примере большим (тег ) и маленьким (тег ).

Все заблуждаются в меру своих возможностей.

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

Эти два элемента необычны для HTML тем, что могут обрабатывать элементы уровня блока или инлайн-элементы (но не те и другие вместе). Они могут содержать одно или более слов в параграфе или один или более элемент уровня блока, такой как параграфы, списки или таблицы. Спецификация HTML 4.01 в переводе Пирамидина А.

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

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

К пустышкам относятся: , (строит линию),
(переводит строку) и ряд других. Поэтому с закрывающими тегами возможны три варианта:

  1. Закрывающий тег ( ) обязателен.
  2. Закрывающий тег ( ) не обязателен.
  3. Закрывающий тег ( ) запрещён.

Указываем ссылку на другой документ

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

и

. Ряд таблицы

автоматически закроет тег тела таблицы
Атрибут Описание
accesskey
contenteditable
contextmenu
spellcheck
. Возьмём для примера таблицу:

Каждый новый элемент ячейки таблицы

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

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

Запрещается закрывать теги, не производящие действий над гипертекстом — , ,
и другие. Требования для каждого тега указаны в спецификации. Ниже мы рассмотрим — где именно что указано. Повторим. В языке HTML существует два вида тегов:

  1. Строковые (inline). Их ещё называют инлайновые .
  2. Блоковые (block).

Конечный (/закрывающий) тег может быть:

  1. Закрывающий тег ( ) обязателен.
  2. Закрывающий тег ( ) не обязателен.
  3. Закрывающий тег ( ) запрещён.

атрибуты у тегов могут быть:

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

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

Вложенность тегов

Теги могут быть вложенными друг в друга как матрёшки. При этом они делятся на родительские и дочерние элементы. Поясню на примере:

Дочерние элементы наследуют характеристики родительских. Таким образом зачёркнутый текст будет также и подчёркнутым.

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

Использование спецификации

Официальной на данный момент (март 2012) является версия HTML 4.01, версия HTML 5.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему HTML 5.

Теперь о том, как пользоваться спецификацией. Допустим, нас интересуют вышеупомянутые таблицы. Открываем краткое содержание и выбираем соответствующий пункт (№11) — Таблицы.

Перевод Пирамидина А.

Открываем спецификацию, меню разделов:

Откроется меню элемента TABLE. Можно почитать введение и общую информацию по таблицам (лишней не будет). Далее следует непосредственно само описание тега

.

Переходим по ссылке к подробному описанию — синтаксису и списку атрибутов.

Тут можно получить информацию по каждому атрибуту.

  1. Требования закрывающего тега ( ). В данном случае начальный и конечный теги обязательны.
  2. Названия атрибутов данного тега.
  3. Список значений каждого атрибута.
  4. Статус атрибута (Актуальный/Устаревший/Запрещённый).
  5. Тип данных (значений) атрибута.
  6. Список общих атрибутов, которые используются с любыми тегами.

Важное замечание. На скриншоте выше атрибут align имеет статус Deprecated (не рекомендован). Такой атрибут не будет работать (и будет ошибкой) в DOCTYPE Strict. Так что использовать deprecated-элементы я крайне не рекомендую. Статус любого элемента можно посмотреть в общем списке.

Уточнения по тегам:

  1. Название тега.
  2. Статус открывающего тега в документе html:
    • O — optional (не обязателен)
  3. Статус закрывающего тега в документе html:
    • O — optional (не обязателен)
    • F — forbidden (запрещён)
  4. Предполагается ли содержимое (гипертекст):
    • E — Empty (без содержимого)
  5. Статус тега (D, L и F):
    • D — deprecated (не рекомендован).
    • L — loose (допускается в переходной спецификации Transitional).
    • F — Frameset (допускается в спецификации Frameset).
  6. Комментарий, назначение тега.

Уточнения по атрибутам:

  1. Название атрибута.
  2. Принадлежность к тегу (группе тегов).
  3. Варианты значений атрибута.
  4. Обязательный/необязательный для указанного тега (группы тегов).
  5. Статус атрибута (D, L и F)
    • D — deprecated (не рекомендован).
    • L — loose (допускается в переходной спецификации Transitional).
    • F — forbiden (запрещён).

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

Кроме всего прочего советую ознакомиться со следующими разделами:

) создает эффект, а закрывающий (

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

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

• теги верхнего уровня;

• теги заголовка документа;

Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков

    и
      относятся и к спискам, и к блочным элементам.

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

Понятие АТРИБУТЫ — это дополнительные ключевые слова, свойства, отделенные от основного ключевого слова тега и один от друга символами пробела, которые могут иметь значения (стандартные или устанавливаемые авторами или сценариями).

Атрибуты бывают глобальными и специфическими. Глобальные атрибуты можно задавать любым HTML элементам, при этом они делятся на основные атрибуты(class, id, style) и атрибуты событий(onclick, onkeydown).

Для некоторых атрибутов следует задавать значение, которое отделяют от имени атрибута символом «=» (знак равентсва). Значение атрибута берут в кавычки, но во многих случаях их можно и не ставить. Закрывающих тегов атрибуты не содержат.

Примеры тегов с атрибутами:

Также бывают атрибуты (например, для тега , определяет его тип), w .

Атрибуты необходимы для сообщения браузеру дополнительной информации о выводе содержимого элемента. Например, атрибут COLOR отвечает за цвет элемента на странице. В атрибутах хранятся имена выводимых картинок, URL-адреса для ссылки и так далее. Атрибут всегда указывается после имени тега в виде пары ИМЯ_АТРИБУТА=”значение” через пробел. Если используется несколько атрибутов, они указываются через пробел.

По умолчанию в SGML необходимо, чтобы все значения атрибутов былиразделеныс помощью двойных (десятичный код ASCII 34) или одинарных кавычек (десятичный код ASCII 39). Рекомендуется всегда использовать кавычки.

Имена атрибутов всегдаучитывают регистр.

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

Понятие РАЗМЕТКИ — при создании разметки и оформлении страницы, ее разделяет на отдельные функциональные части. Разметка страницы веб-сайта подразумевает выделение таких блоков:

шапка сайта (header)

боковые колонки (sidebar)

подвал сайта (footer)

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

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

Страница также может содержать информационные блоки — список новостей, последние обновления, популярное, акции.

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

(табличная верстка), блоки

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

Структура html-документа состоит из трех пар тегов

HTML атрибуты

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

W3C (Консорциум Всемирной паутины) рекомендует использование нижнего регистра, как в тегах, так и в написании атрибутов. Атрибуты, как правило, записываются таким образом: имя = «значение» . В элементе допускается использовать несколько атрибутов в любом порядке, но при этом необходимо разделять их пробелом (только пробелом и больше никак).

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

Значение атрибута допускается заключать как в двойные кавычки, так и в одинарные, но в некоторых ситуациях, когда в значении уже содержатся кавычки (двойные или одинарные), то использовать аналогичные нельзя:

Давайте рассмотрим пример в котором используем атрибут title к тегу

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

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

Рис. 11 Пример использования атрибута title к тегу

Атрибут lang

Давайте теперь поговорим о таком атрибуте как lang, основная его функция это определить язык содержимого внутри элемента. Например, атрибут lang, применённый к тегу указывает язык содержимого веб-страницы (для всего текста на странице).

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

Атрибут имеет следующий синтаксис:

Код языка, подразумевает собой сокращенное наименование, состоящее из двух букв которые определяют язык содержимого. Если у языка есть диалект, то через дефис добавляют еще две буквы (например, США lang = «en-us» ).

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

В этом примере основной язык документа является русский ( «ru» ), а один абзац объявлен на испанском языке ( «es» ).

Полный перечень кодов вы можете найти в разделе «Коды языков».

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

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

Атрибут Значение
dir Определяет направление текста содержимого элемента.
id Определяет уникальный идентификатор для элемента. Атрибут должен использоваться только один раз в конкретном HTML документе.
lang Определяет язык содержимого в элементе.
style Задает встроенный CSS стиль для элемента.
title Указывает дополнительную текстовую подсказку о содержимом при наведении курсора на элемент.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив с текстовым файлом и изображениями:
  • Используя полученные знания составьте следующий мультиязычный документ HTML:

Практическое задание № 3.

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

Таблица основных тегов html с примерами

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

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

Базовые теги

— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

— показывает браузеру тип документа, сообщает его версию и язык.

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

— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или

5. HTML — Атрибуты

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков

, или тег абзаца

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

Атрибут — используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей — это имя и значение:

    Имя — это свойство, которое Вы хотите установить. Например, элемент абзаца

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

  • Значение — это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.
  • Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

    Пример

    Получим следующий результат:

    Содержание

    Основные атрибуты HTML

    Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

    Атрибут id

    Атрибут id html-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:

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

    Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.

    Атрибут title

    Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

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

    Пример

    Получим следующий результат:

    Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.

    Атрибут class

    Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

    Значением атрибута может быть также список имен классов, разделенных пробелами. Например:

    Атрибут style

    Атрибут style — позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

    Получим следующий результат:

    На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

    Атрибуты интернационализации

    Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

    Атрибут dir

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

    Значение Описание
    ltr Слева направо (значение по умолчанию).
    rtl Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

    Пример

    Получим следующий результат:

    Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

    Атрибут lang

    Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

    Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

    Пример

    Атрибут xml:lang

    Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

    Общие атрибуты

    Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.

    Атрибут Опция Функция
    align right, left, center Горизонтальное выравнивание тегов.
    valign top, middle, bottom Вертикально выравнивает тегов внутри html-элемента.
    bgcolor числовые, шестнадцатеричные, RGB значения Помещает фоновый цвет за элемент.
    background URL Помещает фоновое изображение за элемент.
    id определяется пользователем Именование элемента для использования с каскадными таблицами стилей.
    class определяется пользователем Классифицирует элемент для использования с каскадными таблицами стилей.
    width числовое или процентное значение Задает ширину таблиц, изображений или ячеек таблицы.
    height числовое или процентное значение Задает высоту таблиц, изображений или ячеек таблицы.
    title определяется пользователем «Всплывающий» заголовок элементов.

    Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

    Работа с HTML тегами и атрибутами

    Учебник HTML CSS

    Практика

    Продвинутый курс

    Практика

    Адаптив

    Продвинутые вещи

    Практика

    Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.

    Блок . Структура простейшей страницы

    Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег , который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег для служебного содержимого страницы и тег — для основного текста, который и виден на экране браузера.

    В служебное содержимое, которое располагается внутри тега , входит много различных вещей, но пока нам нужны только две из них. Это тег , задающий название страницы, которое будет видно во вкладке браузера, и тег , который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

    Кроме того, перед тегом обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — .

    Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):

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

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

    Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.

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

    Блок . Абзацы

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

    Абзац создается с помощью тега

    Так код будет выглядеть в браузере:

    Это еще один абзац.

    И еще один абзац.

    Блок . Заголовки h1, h2, h3, h4, h5, h6

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

    Заголовки создаются с помощью тегов

    . Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 — название блоков страницы, в h3 — название подблоков и так далее.

    Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:

    Атрибуты HTML-тегов

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

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

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

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

    Результат в браузере

    В этом примере происходит изменение цвета текста внутри тегов. А вот в следующем примере присутствует ошибка, так как внутри одного тега находится два одинаковых атрибута style .

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

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

    Атрибуты можно указывать в одну строку, а можно в несколько

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

    Пример переноса строк внутри тега

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

    Порядок указания атрибутов тегов

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

    Пример указания атрибутов в разном порядке

    Значения по умолчанию, обязательные атрибуты

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

    На этом теоретическая часть учебника заканчивается и дальше будет самое интересное — практика и только практика, так что вперед!

    Общие атрибуты тегов

    Все о создании сайтов, блогов, раскрутке и продвижении в поисковых системах и заработке на своем проекте

    • Вы здесь :
    • MonetaVInternete.ru
    • / Создаем сайт с нуля / Основы HTML и CSS /
    • Что такое HTML-тэги и атрибуты, валидатор (val >

    Что такое HTML-тэги и атрибуты, валидатор (val >

    Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! В прошлой статье мы разобрались, что такое HTML и XHTML, а также что такое тип документа и как браузеры определяют используемый язык с помощью тега-декларации . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом.

    Что такое HTML-тег, виды HTML-тегов, примеры написания

    Это тег выделения текста жирным шрифтом. Теги имеют три вида:

    • Открывающий тег — тег, стоящий в начале. В рассмотренном выше примере тег является открывающим и стоит перед тем текстом, который нужно выделить.
    • Закрывающий тег — тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег является закрывающим и стоит после текста, который следует выделить жирным
    • Одиночные теги — теги, которые не имеют закрывающего тега. Примером может служить
      Вот пример открывающего и закрывающего тега:

    Вся конструкция, включая текст, будет выглядеть следующим образом:

    А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам: Этот текст будет выделен жирным. Существует еще такое понятие, как контейнерные теги, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.

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

    Что такое атрибуты,правила написания и зачем они нужны

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

    Теперь немного про правила написания атрибутов. Атрибуты всегда пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:

    Данный атрибут в теге font изменяет размер заключенного в теги Текста .
    Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид

    Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.

    Что такое валидатор (validator) W3C, правила написания и список тегов

    Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах):

    А сразу после легенды идет таблица самих тегов:

    • В первом столбце — Name — само название тега — то что должно стоять в угловых скобках ( ).
    • Второй столбец — Start Tag — наличие открывающего тега. В данном столбце вы можете увидеть букву «O», что значит «Optional», а в переводе с английского — Опционально. Данная буква присутствует только напротив тегов , , и
      и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.
    • Третий столбец — End Tag — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега , ибо нечего в нем закрывать.
    • Четвертый — Empty — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег .
    • Пятый столбец — Depr. или Deprecated — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста ( и являются примером)
    • Шестой столбец — DTD — может содержать либо букву «L», либо «F». Первая — «L»Loose DTD — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов ( — Transitional, про который я писал в предыдущей статье). Вторая — «F»Frameset DTD — означает, что тег может использоваться только в документе, типа FRAMESET ( — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.
    • И последний, седьмой столбец — Description — краткое описание тега, опять же на английском

    Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.

    • Первая колонка — Name — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.
    • Вторая колонка — Related Elements — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.
    • Третья колонка — Type — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты
    • Четвертая колонка — Default — означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.
    • 6, 7, и 8 колонки означают то же самое, что и в случае с тегами.

    Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.

    Создание файла в формате html — HTML-документ

    Прежде всего, разберемся что такое HTML-документ. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).

    Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением .html. Можно (и лучше всего) использовать Notepad++ , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде

    Итак, нам нужно просто открыть Notepad++ и сохранить файл с произвольным текстом (можно и пустой), но в формате .html. Для этого, как обычно, кликаете на надпись файл, затем «сохранить как » и ищем среди большого списка расширений «HyperText Markup Language file (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»

    ) создает эффект, а закрывающий (

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

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

    • теги верхнего уровня;

    • теги заголовка документа;

    Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков

      и
        относятся и к спискам, и к блочным элементам.

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

    Понятие АТРИБУТЫ — это дополнительные ключевые слова, свойства, отделенные от основного ключевого слова тега и один от друга символами пробела, которые могут иметь значения (стандартные или устанавливаемые авторами или сценариями).

    Атрибуты бывают глобальными и специфическими. Глобальные атрибуты можно задавать любым HTML элементам, при этом они делятся на основные атрибуты(class, id, style) и атрибуты событий(onclick, onkeydown).

    Для некоторых атрибутов следует задавать значение, которое отделяют от имени атрибута символом «=» (знак равентсва). Значение атрибута берут в кавычки, но во многих случаях их можно и не ставить. Закрывающих тегов атрибуты не содержат.

    Примеры тегов с атрибутами:

    Также бывают атрибуты (например, для тега , определяет его тип), w .

    Атрибуты необходимы для сообщения браузеру дополнительной информации о выводе содержимого элемента. Например, атрибут COLOR отвечает за цвет элемента на странице. В атрибутах хранятся имена выводимых картинок, URL-адреса для ссылки и так далее. Атрибут всегда указывается после имени тега в виде пары ИМЯ_АТРИБУТА=”значение” через пробел. Если используется несколько атрибутов, они указываются через пробел.

    По умолчанию в SGML необходимо, чтобы все значения атрибутов былиразделеныс помощью двойных (десятичный код ASCII 34) или одинарных кавычек (десятичный код ASCII 39). Рекомендуется всегда использовать кавычки.

    Имена атрибутов всегдаучитывают регистр.

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

    Понятие РАЗМЕТКИ — при создании разметки и оформлении страницы, ее разделяет на отдельные функциональные части. Разметка страницы веб-сайта подразумевает выделение таких блоков:

    шапка сайта (header)

    боковые колонки (sidebar)

    подвал сайта (footer)

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

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

    Страница также может содержать информационные блоки — список новостей, последние обновления, популярное, акции.

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

    (табличная верстка), блоки

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

    Структура html-документа состоит из трех пар тегов

    Илон Маск рекомендует:  border-bottom-style в CSS
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL