Знакомство с HTML и CSS. Часть 3: Ссылки и изображения — Тренажёр HTML Academy

Эта часть, пожалуй, наиболее короткая в этом тренажёре. В ней рассказано про ссылки и про изображения, точнее про конкретный тег изображения и, внезапно, форматах изображений. Честно говоря, именно такой статьи я и боялся — короткой настолько, что кажется зря я их поделил на части, но что сделано то сделано.

Ссылки

Я не буду растекаться мыслями на тему «что такое ссылка?», потому что здесь нет какого-то дополнительного смысла, по крайней мере пока. Ссылка — активный элемент, который при нажатии на нее переносит нас (ссылает) на место указанное в атрибуте её тега.

Ссылка задаётся тегом <a> </a>, причем без атрибута, то бишь без места назначения, тег так же часто используется, давая понять, что ссылка неактивна. Например, в случае когда пользователь уже находится на странице, куда потенциально вела бы эта ссылка.

Чтобы задать ссылке место назначения используется атрибут href="", при этом атрибут достаточно гибкий и местом назначения не обязательно может быть другая страница, а, например, файл или участок текущей страницы — якорь.

<!-- Ссылка с полным адресом места назначения называется "абсолютной" -->
<a href="https://blog.arkhelvetios.ru/">Мой бложик</a>

<!-- "Относительная" ссылка указывает место назначения исходя из
(или относительно) местоположения текущей страницы -->
<a href="intro-html-css-part2">2-я часть этого тренажёра</a>

<!-- Ссылка на файл, если браузер "понимает" расширение файла,
то он откроет его в новой вкладке, иначе предложит скачать его -->
<a href="html-for-dummies.pdf">Полезная книга</a>

<!-- Атрибут download указывает, что файл надо скачать в любом случае -->
<a href="css-for-dummies.pdf" download>Еще полезная книга</a>

<!-- Через символ # можно указать ID элемента, т.о. создаются "якоря" -->
<a href="#intro" download>Вступление</a>

В тренажёре отдельно написано про абсолютные и относительные ссылки, но это тема из разряда «легче показать» — текстово пытаться объяснить сизифов труд, т. к. с относительными ссылками много нюансов.

Изображения

Мы уже встречали одиночный тег <img> в предыдущих частях и даже встречали его главный атрибут src="" указывающий путь к картинке. Но это не единственный его атрибут и как раз на них сделано особое внимание в этой части.

Атрибуты width="" и height="" управляют, соответственно, шириной и высотой изображения. При этом браузер умеет сохранять пропорции, поэтому задавая размер только по одной стороне, браузер подгонит изображение по другой если она не указана.

Атрибут alt="" задаёт альтернативный текст описывающий изображение. Он появляется на экране в случае, когда изображение по каким-то причинам не отображается. Также именно альтернативный текст читает голосовой помощник для слабовидящих.

Далее в тренажёре затронута тема форматов изображений, которые в основном используются в вёрстке — это PNG, JPEG, SVG и GIF. Почему-то нет WEBP, наверное, с ним есть какие-то сложности.

Если коротко про форматы:

PNG — формат имеющий альфа-канал, то есть поддержку прозрачности. Если нужно спользовать изображение с полу- или прозрачными участками.
JPEG/JPG — формат не умеющий в прозрачность, но значительно «легче» формата PNG. Базовый выбор, если не нужна прозрачность.
SVG — векторное изображение, грубо говоря, состоит не из ограниченного количества закрашенных пикселей как PNG и JPG, а из масштабируемых фигур. Обычно это логотипы, иконки, малоцветные иллюстрации. Но вообще это целый отдельный блок веб-разработки, до которого я еще дойду.
GIF — формат поддерживающий анимацию, но очень ограничен по цветовому пространству.

Далее в тренажёре нам показывают тег <figure> </figure>, который трудно как-то назвать одной фразой и вообще странно, что он в части про изображения.

Если попытаться своими словами — в тег <figure> </figure> заключают кусок дополнительного контента, например, изображение, часть кода, стихотворение, цитата и т. д., к которому можно задать разъясняющий комментарий с помощью тега <figcaption> </figcaption>.

Не до конца понял суть, нужен какой-то практический пример, наверное. Я могу придумать где применить его, но это очень специфичные ситуации.

Отдельным пунктом идет, как бы сумма двух частей тренажера — изображение-ссылка, которое задается с помощью комбинации тегов <a> и <img>:

<a href="http://keksby.ru">
  <img src="cat.png" alt="Кекс">
</a>

На самом деле в тег <a> можно заключать не только изображения, но и другие блоки, например, даже <div>. Правда, насколько я знаю, это семантически будет не очень хорошо, хотя точно работает.

Практика и Испытание

Как обычно начну с Испытания — вставялем картинки в код и играемся с атрибутами width="" и height="", тут наглядно можно посмотреть как картинки плющит если задавать оба атрибута не имея в виду пропорции.

В практике, в заданиях 1 и 2, мы расставляем alt="" и href="", причем к этим атрибутам как-то тоже привязали стили и снова не показали нам стилевой файл. Да, мне интересно, но я не буду забегать вперёд в этом плане.

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

Я затянул с написанием, но у меня была уважительная причина — я ходил чипироваться и поймал побочный эффект. Пролежал сутки с температурой и из-за этого у меня в очередной раз поехал режим дня и как следствие, рабочие процессы тоже. Но я постараюсь нагнать!

Остальные статьи можно посмотреть у меня на главной странице блога.

Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#обучение #html #css #фронтенд #веб_разработка