Теги и атрибуты HTML. Часть 2.

Приветствую всех на второй части курса — HTML с нуля. В прошлый раз мы разобрали основные теоретические моменты HTML — верстки. Сегодня мы углубимся в изучении и разберем основные теги и атрибуты HTML, которые нам понадобятся на практике.

Что такое тег мы разобрали в прошло части.

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

Самые распространенные общие атрибуты это id и class, их же ещё называют селекторы. Это достаточно важная и обширная тема поэтому подробно рассмотрим её в следующей части курса, а пока что просто запомните существование данных атрибутов.

width  ещё один общий атрибут который назначает ширину элемента в пикселях(px) или процентах(%). Пример использования:

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

align — определяет выравнивание содержимого элемента по левому, правому краю или центру. Пример:

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

  1. <html> — первый в нашем списке тег html служит для указания начала и конца html-разметки, именно с него должен начинаться (не всегда, подробнее рассмотрим позже) документ, и им заканчиваться. Как вы уже догадались, имеет закрывающийся тег, а внутри вся остальная разметка. Содержит атрибут lang — служит для обозначения языка документа.
  2. <head> — в переводе с английского — голова или заголовок. Должен использоваться на любой странице сразу после открывающегося тега html и содержит в себе различный служебные данные: мета-теги, подключаемые js и css файлы, favicon. Имеет закрывающийся тег. Атрибуты не содержит.
  3. <body> — все содержимое не считая служебной информации должно содержатся в данном теге. Его используют сразу после закрывающегося head. Имеет закрывающийся тег.
  4. <div> — основной элемент блочной верстки. Выполняет роль некого контейнера содержащего в себе другие элементы. Имеет закрывающийся тег. Не имеет специальных атрибутов
  5. <a> — тег ссылки. Имеет закрывающийся тег. Атрибуты: href-назначает url-адрес ссылки.
  6. <h1>-<h6> — серия тегов, которые обозначают заголовки разного размера шрифта. Внутри тегов как правило содержится текст. h1 — самый большой шрифт, далее по уменьшению. Имеют закрывающийся тег. Специальных атрибутов нет.
  7. <p> — похож на h-теги, так же содержит текст внутри. Использует самый маленький шрифт в документе. Имеет закрывающийся тег. Специальных атрибутов не имеет.
    Замечание: для тегов h-серии и p можно назначить любые размеры шрифтов, а используются они только для SEO оптимизации.
  8. <span> — тег содержащий текст, как правило используется внутри тега p или для выделения определенного куска текста. Например для того что бы изменить цвет. Имеет закрывающийся тег. Специальных атрибутов не имеет.
  9. <img> — используется для вставки изображения в документ. Не имеет закрывающегося тега. Атрибуты: src-путь к изображению, относительно текущего файла. Подробнее я писал в статье HTML-тег img.
  10. <form> и <input> — теги для построения форм. Подробнее читайте в статье HTML-форма.
  11. <header>, <footer>, <article>, <aside> — точно такие же элементы как div только имеют особые названия для более удобного структурирования html-кода. Из названия можно понять где — что используется. Так же на практике мы столкнемся с данными тегами.

На это закончим наш список пока что. Будем дополнять свои знания атрибутов по ходу написания приложения. Повторюсь — здесь представлены лишь основные теги которые понадобятся нам в ближайшее время. Если вы всё поняли жду вас в следующей части курса:

Селекторы HTML. Часть 3.

Комментарии

  1. Яга

    Ответить

  2. Тупень

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован.