— Привет! Ну как, ты уже разобрался с базовыми HTML элементами?

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

Начни Учить Full-Stack JavaScript СЕЙЧАС!

— Все верно. Сегодня расскажу тебе об HTML атрибутах.

— А зачем они нужны?

Атрибуты в HTML

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

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

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

Указывается атрибут сразу после имени тега:

<p align="center">Этот текст будет выровнен по центру.</p>
<hr color="red">
<p align="right">Этот текст будет выровнен по правому краю.</p>

Ты уже знаком с тегами <p> и <hr>. Разберем добавленные атрибуты:

  • <p align="center"> - атрибут align со значением center - добавит тексту внутри параграфа выравнивание по центру
  • <hr color="red"> - атрибут color со значением red - изменит цвет горизонтального разделителя на красный
  • <p align="right"> - атрибут align со значением right - добавит тексту внутри параграфа выравнивание по правой стороне

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

Если нам нужно, то мы можем добавить одному HTML тегу несколько атрибутов. В таком случае они указываются через пробел. Например:

<!-- Несколько атрибутов -->
<h1>JavaScript Test</h1>
<img src="https://learn.coderslang.com/js-test-13.png" width="100" alt="Первая картинка">

Тут, мы добавляем картинку используя новый для тебя тег img. Картинка может быть в разных форматах, например GIF, JPEG или PNG.

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

  • Атрибут alt устанавливает альтернативный текст для изображения. Этот текст отображается, пока/если картинка недоступна.

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

— А высоту картинки можно менять?

— Высоту можно поменять с помощью атрибута height. Он работает точно так же, как width, но ограничивает максимальную высоту вместо ширины.

Будь осторожен, если ты одновременно задашь параметры width и height, то могут нарушиться пропорции изображения.

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

<img src="https://learn.coderslang.com/js-test-13.png" height="50%" alt="Первая картинка">

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

— То есть я могу еще и менять размеры <div>?

— Можешь, но все по порядку. Пока тренируемся на картинках, а с вложенностью разберемся позже.

Ссылки

Чтобы перейти с одной веб страницы на другую, существуют ссылки. В HTML они описываются тегом <a>. Это — парный тег.

<a>Первая ссылка</a>

Но работать такая ссылка не будет.

— Конечно, ты же не указала путь для перехода.

— Для того, чтобы браузер понимал какую страницу нужно открыть по клику на ссылку, тегу <a> нужно добавить атрибут href.

<a href="https://learn.coderslang.com/">Первая ссылка</a>

Значение атрибута href - веб адрес по которому нужно сделать переход.

Содержимое тега <a> по умолчанию становится синего цвета и подчеркивается. Если браузеру знаком тип файла (например, файл с расширением .html), то этот файл будет открыт в текущем окне, иначе будет показано сообщение с просьбой выбрать вариант работы с таким файлом.

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

<a href="https://www.google.com/">Открыть Google</a>

В этом примере браузер покажет ссылку с текстом Открыть Google, а по клику на нее произойдет переход по адресу https://www.google.com/.

Относительные ссылки

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

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

Представим такую структуру веб страниц нашего сайта:

|-- lecture
|   |-- tests.html
|   |-- tasks.html
|
|-- index.html

Если мы пишем разметку страницы index.html, и хотим добавить две ссылки — на страницу задач и на страницу тестов, то вот как они будут выглядеть:

<a href="./lecture/tests.html">Тесты</a>
<a href="./lecture/tasks.html">Задачи</a>

А для того, чтобы со страницы tasks.html попасть на index.html, нужно выйти на один уровень выше с помощью ..

<a href="../index.html">Домой</a>

Идентификаторы HTML элементов

Любому HTML элементу можно добавить атрибут id. Значение этого атрибута может быть любым, но обязательно должно быть уникальным в рамках одной веб страницы.

Атрибут <id> нужен для того, чтобы элемент можно было однозначно идентифицировать.

<p id="p1">Первый абзац</p>
<p id="p2">Второй абзац</p>

Внутренние ссылки

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

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

  • Добавить HTML элемент с уникальным id. На него мы и будем делать переход.
  • Установить атрибут href, по формуле # + id нужного нам элемента.
<h1>Пример использования якорей</h1>
<a href="#paragraph1">Переход к параграфу 1</a>
<a href="#paragraph2">Переход к параграфу 2</a>
<p id="paragraph1">
  Я произнёс всего два слова. Однако на каждое потратил изрядное усилие. Оба слова, 	      растянувшиеся во времени, дались мне с трудом: челюсть налилась тяжестью, точно у бронзовой статуи, а язык казался распухшим и бесчувственным, будто туда вкололи ультракаин.
</p>
<p id="paragraph2">
  Губы Техника искривила едва приметная улыбка. Она была печальной и одновременно понимающей. Такой, словно он улыбался так уже многим, и я был далеко не первым в его списке. Техник поднял палец в синей перчатке и сказал...
</p>

Чтобы разобраться, запускай VSCode, создай index.html, скопируй туда весь пример и посмотри что получится. Потом можешь добавить еще пару абзацев и ссылки на них.