Теги и их атрибуты в html. HTML Атрибуты. Атрибуты тега HTML
Атрибуты задаются в начальном тэге элемента и состоят из имени и значения , которые отделяются друг от друга знаком равно (=). Например в атрибуте 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 пикселей в высоту.
Размеры изображения
Размеры изображения
Приветствую всех! Сегодня хотелось бы рассказать о том, какие бывают атрибуты в HTML, и какие из них чаще всего используются на практике.
Понятие атрибутаАтрибуты в HTML — это служебные конструкции внутри тегов, расширяющие их возможности. Они используются в совершенно разных задачах и их освоение и правильное использование очень важно. В общем если разбирать все атрибуты, то их можно поделить на несколько категорий:
- Атрибуты со значением
- Атрибуты без значения
- Универсальные
- Специальные
- Событийные
Все они разные, но их синтаксис везде примерно одинаковый. Итак, давайте разберём некоторые тонкости работы с атрибутами в HTML.
Создание атрибута:
Какой то текст
Первым этапом в создании атрибута со значением является указание его названия и поле знака = его значения. В случае же создания атрибута без значения мы просто указываем название атрибута, которое как правило в нем уже содержит свою основную функцию (например hidden который прячет элементы). Для одного тега можно задать несколько атрибутов, при этом разделять их между собой нужно знаком пробела.
Хорошо, с синтаксисом все, теперь переходим к подробному разбору типов атрибутов. Описывать я буду именно те, которые чаще всего используются на практике.
Атрибуты со значениемДля большинства атрибутов в HTML можно задать свое значение. В некоторых атрибутах можно задать даже несколько значений разделяя их пробелами.
Так, например, атрибут class может иметь сразу несколько значений.
Атрибут class задает стилевой класс, который позволяет связать определенный тег с его оформлением в CSS. Атрибут id задает стилевой идентификатор - это уникальное имя HTML элемента, которое применяется для изменения его стилей и обращения к нему через скрипты. Для нормальной работы атрибута id его значение должно быть уникальным и не должно повторяться в коде вашей web-страницы.
Универсальные атрибутыК универсальным атрибутам можно отнести большую часть атрибутов. Универсальные они, потому что их применение доступно для большей части тегов. Например, тот же class или id можно использовать практически для всех html тегов.
Каждый атрибут применённый к этому элементу является универсальным.
Вот ещё несколько редких универсальных атрибутов:
- contenteditable — сообщает браузеру что элемент может быть редактирован пользователем. Значения — true или false
- dir — бесполезный атрибут, который делает зеркальным текст элемента, для которого он применен (вообще бесполезный атрибут). Значения — ltr или rtl
- spellcheck — сообщает браузеру проверять ли на орфографию содержимое тега. Используется в основном для тегов input и textarea. Значения — yes или no
Есть теги для которых наличие специального атрибута является главным условием для его правильной работы. Так, например, тег не будет выполнять свою основную задачу без атрибута href. Так же и тег картинки останется просто тегом, если в его атрибуте src не указать путь до нужной картинки.
- src ="путь до файла" — позволяет указать путь до файлов. Используется в тегах script иimg.
- href ="ссылка" — используется для указания пути ссылкам и мета тегам meta.
Данный вид атрибутов завязан на знании JavaScript-а и работает он напрямую с ним. Для чего это нужно? Ну к примеру Вы ходите при клике на блок с текстом изменить его фоновый цвет на серый. Все, что Вам нужно это задать этому тегу атрибут onclick. Нагляднее это можно увидеть на примере:
Кроме onclick на практике часто используются следующие атрибуты событий:
- onchange — это событие запустит скрипт, если был изменён элемент. Обычно это текстовые поля, списки, или текстовые области.
- onfocus — срабатывает в момент фокусировки на каком-либо элементе. Как пример, все поля формы на моем сайте изменяют свое оформление при фокусировке на них
- onsubmit — событие сработает при отправке формы. Как правило это случается когда пользователь отправляет форму нажав на кнопку.
- onkeydown — событие срабатывает, когда была нажата клавиша на клавиатуре.
Работая с этим типом атрибутов, нужно помнить, что они хорошо подходят для быстрого тестирования ваших скриптов, а так же для указания небольших и понятных функций. Что-то более сложное рациональнее писать в отдельных блоках скриптов. Задать тоже событие onclick тегу можно и без использования специального атрибута, а в отдельном javascript файле.
На этом хотелось бы закончить наше знакомство с HTML атрибутами. Если есть какие-либо мысли по поводу их применения на практике пишите в коменты. Всем удачи и до скорого!
сайт Права на контент защищены.Существует два типа тегов HTML - контейнерные и одиночные, которые всегда заключаются в угловые скобки .
Контейнерные теги состоят из пары - открывающий и закрывающий тег .... Перед именем закрывающего тега необходимо ставить косую черту (слэш) "/". В закрывающем теге не нужно писать атрибуты присутствующие в открывающем теге!
Одиночные теги менее распространены и состоят лишь из открывающего тега. Пример:
.
Тег может иметь атрибуты и значения атрибутов. Пример: ... . Атрибуты добавляют в тег для расширения или модификации его действий.
Теги и атрибуты"_blank"
- откроет документ в новом окне.
"_parent"
- откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
"_top"
- отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, откроет в текущем окне.
"_self"
- откроет в текущем окне (по умолчанию для ссылок).
Метаинформация. Служит в основном для поисковых роботов. Атрибуты и значения:
Описание документа.
Ключевые слова.
Управление процессом индексации. Возможные варианты:
"index"
- возможность индексирования данного документа. Наоборот - "noindex"
"follow"
- возможность индексировать все документы, на которые есть ссылки в данном HTML-файле. Наоборот - "nofollow"
"all"
- одновременное условие 2-ух вышеперечисленных.
"none"
- одновременное условие 2-ух первоперечисленных. Наоборот.
Кодировка документа.
Указывает, что документ следует перезагружать через 30 с.
Указывает на таблицу стилей (CSS). Записывается в теге . Есть 3 способа применения:
1]
- Таблица связанных стилей. В href="..."
указывается путь к таблице.
2]
h1 { color:red; font-family:arial }
- Таблица глобальных стилей. Пишется в теге
.
3]
пример
- Таблица внутренних стилей. Прописывается в теге.