Какой атрибут тега. Основные теги 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] пример - Таблица внутренних стилей. Прописывается в теге.

Тег:

[контейнерный]

Создаёт таблицу. Обязательные теги:

. Пример:

,

Пример

Возможные атрибуты тега:

Задаёт толщину рамки. От 0 до...
Задаёт цвет рамки.
Расстояние между ячейками таблицы. От 0 до...
Расстояние между содержимым ячейки и её рамки. От 0 до...
Ширина таблицы. От 0 до...
Высота таблицы. От 0 до...

Тег:

[контейнерный]

Создаёт строку в таблице. Допустимые атрибуты:

Задаёт горизонтальное выравнивание ячеек в таблице. Допустимые значения:

"left" - выравнивание по левому краю.
"center" - выравнивание по центру.
"right" - выравнивание по правому краю.
"justify" - выравнивание теста на всю строчку.

Задаёт вертикальное выравнивание ячеек в таблице. Допустимые значения:

"top" - выравнивание по верхнему краю.
"middle" - выравнивание по центру.
"bottom" - выравнивание по нижнему краю.

Задаёт цвет фона.

Тег:

Атрибуты задаются в начальном тэге элемента и состоят из имени и значения , которые отделяются друг от друга знаком равно (=). Например в атрибуте 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-элементов:

[контейнерный] Создаёт ячейку в таблице. Допустимые атрибуты: , , , , ...	Указывает кол-во столбцев, которое объединено в одной ячейке. От 1 до...	Указывает кол-во строк, которое объединено в одной ячейке. От 1 до... Тег: [контейнерный] Определяет заголовок таблицы. Нормальная ячейка с отцентрованным жирным текстом. Тег: [контейнерный] Создает новый параграф. Встречая этот тег, браузер продолжает текст с новой строки. Возможные атрибуты: . Тег: [контейнерный] Задаёт заголовок.... - самый большой заголовок.... - самый маленький заголовок. Возможные атрибуты: . Тег: [одиночный] Переносит текст на новую строку. Тег: [одиночный] Запрещает перевод строки. Тег: [контейнерный] Создает жирый текст. пример . Тег: [контейнерный] Создаёт подчёркнутый текст. пример . Тег: [контейнерный] Создаёт наклонный текст. пример . Тег: [контейнерный] пример . Тег: [контейнерный] Создаёт текст - имитирующий стиль печатной машинки. пример . Тег: [контейнерный] Наклонный текст (воспринимается посковыми роботами как выделение). Тег: [контейнерный] Жирный текст (воспринимается посковыми роботами, как особо сильное выделение). Тег: [одиночный] Добавляет в HTML документ горизонтальную линию. Возможные атрибуты: Создает линию без тени. Устанавливает высоту (толщину) линии. Устанавливает ширину линии. Задаёт горизонтальное выравнивание в таблице. Задает линии определенный цвет. Тег: [контейнерный] Задаёт в тексте нижний индекс. Пример: Н 2 O . Тег: [контейнерный] Задаёт в тексте верхний индекс. Пример c 2 =a 2 +b 2 . Тег: [контейнерный] Используется для форматирования текста. Не действует без атрибутов. Возможные атрибуты: Указывает шрифт. Устанавливает размер текста. От 1 до 7. Задает тексту определенный цвет. Тег: [контейнерный] Указывает путь на другую страницу. Указывает в каком окне открывать гиперссылку. Выскакивает подсказка при наведении на ссылку. Открывает почтовую программу с указанным EMAIL. Отмечает часть текста, как метку для гипперссылок на странице. Служит якорем. Указывает путь к якорю.

Атрибут Значение Описание

align	right, left, center	Горизонтальное выравнивание тегов
valign	top, middle, bottom	Вертикальное вырвнивание тегов внутри HTML-элемента.
background	URL	Расположение фонового изображения
id	Уникальное имя	Уникальное имя для использования с каскадными таблицами стилей.
class	правило класса или стиль класса	Классифицирует элемент для использования с каскадными таблицами стилей.
width	Числовое значение	Определяет ширину таблиц, изображений или ячеек таблицы.
height	Числовое значение	Определяет высотуу таблиц, изображений или ячеек таблицы.
title	Текст подсказки	Текст, отображаемый во всплывающей подсказке.

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

Задачи Первое итоговое задание

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

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

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

• Реши сам »

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

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

Title="Хороший сайт">сайт - сайт для разработчиков.

Размеры изображения

• Реши сам »

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

Размеры изображения

Размеры изображения

Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.

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

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

— это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.

Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».

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

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

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

•