Html основные теги и их атрибуты. HTML Основные теги

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

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

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

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

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

HTML

Можно наоборот:

HTML

Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:

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

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

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

• Реши сам »

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

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

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

• Реши сам »

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

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

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

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

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

Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).

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

Рассмотрим пример:

Этот текст обычный. Этот текст курсивный.

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

Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом - .

Рассмотрим пример:

Этот текст обычный. Внимание! Курсив. Это снова обычный шрифт.

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

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

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

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

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

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

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

Текст

Что следует из этого примера? Мы открыли абзац, и внутри тега поставили атрибут align, который отвечает за выравнивание текста. Далее мы проставили знак «=», который означает, что мы присваиваем значение этому атрибуту. Далее в кавычках мы пишем это самое значение. В данном случае это «center» . Это означает, что текст в данном (и только в данном!) абзаце мы выровняем по центру. Попробуйте сами.

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

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

), картинках , блочный элемент ().

Возможные значения атрибутов:

• left — выравнивание по левому краю (стоит по умолчанию)
• right — выравнивание по правому краю
• center — выравнивание по центру
• justify — выравнивание по всей ширине

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

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

Сколько будет 5-3?

Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег

Что после этого произойдет? Сохраните документ и сами увидите. При наведении на текст курсором должна появиться всплывающая подсказочка.

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

Содержимое

Как видите тут все довольно просто, просто в одном теге нужно писать все атрибуты через пробел. Из данного примера мы видим, что содержимое будет выравнено по правому краю, и при наведении на него курсором мышки нам всплывет подсказка. Всё просто. Надеюсь, всё понятно?

Ну а теперь давайте вернемся к нашему Лукоморью, которое мы делали на прошлом занятии.

• Выровнять весь текст в документе с «Лукоморьем» по центру (вместе с заголовками),
• В заголовке первого уровня поставить подсказку «Автор произведения — А.С. Пушкин»

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

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

После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.

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

В общем в этом случае вам можно не ставить в каждый тег атрибут align="center" . Вам лишь нужно нужно поставить перед заголовком, и закрыть его с помощью в конце всего текста. Ну а внутри ставим align="center" , но уже всего один раз. По моему это гораздо быстрее и удобнее и в итоге получается то же самое.

Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.

Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс "HTML5 и CSS3 с нуля до профи ". Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.

Ну а я на сегодня заканчиваю. Надеюсь, что статья вам понравилась и была для вас полезной. Не забудьте подписаться на обновления моего блога, чтобы всегда быть в курсе всего самого интересного и не пропустить новых уроков. Ну а я с вами на сегодня прощаюсь. Желаю вам успехов в освоении материала. Пока-пока!

С уважением, Дмитрий Костин.

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

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

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