Ссылки, изображения и формы

Ссылки

Ссылка — это тег <a>, адрес хранится в атрибуте href:

<a href="https://yandex.ru">Яндекс</a>
<a href="about.html">Обо мне</a>
<a href="#contacts">Контакты</a>

Три вида адресов:

• полный — https://... — на другой сайт;
• относительный — about.html — на страницу вашего сайта, путь считается от текущего файла;
• якорь — #contacts — на место на той же странице, где есть элемент с id="contacts".

Чтобы ссылка открылась в новой вкладке, добавляют target="_blank". Пользуйтесь этим умеренно: людям обычно удобнее, когда ссылка открывается там же.

Текст ссылки должен объяснять, куда она ведёт. «Подробнее о доставке» лучше, чем «нажмите здесь»: так понятнее и людям, и поисковикам.

Изображения

Картинка — одиночный тег <img>:

<img src="images/pizza.jpg" alt="Пицца «Маргарита» с базиликом" width="600" height="400">

• src — путь к файлу;
• alt — текстовое описание того, что на картинке;
• width и height — размеры: браузер заранее оставит место под картинку, и страница не «прыгнет», когда она загрузится.

Про alt часто забывают, а зря. Его читает вслух экранный диктор незрячему человеку, по нему поисковик понимает, что изображено, а если картинка не загрузилась, пользователь увидит описание. Если картинка чисто декоративная, alt оставляют пустым: alt="".

Форматы: JPG — для фотографий, PNG — для картинок с прозрачностью, SVG — для иконок и логотипов, WebP — современный формат, который весит меньше остальных.

Формы

Форма — способ получить данные от пользователя: заявку, отзыв, логин и пароль.

<form>
  <label for="name">Имя</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Почта</label>
  <input type="email" id="email" name="email" placeholder="you@example.com">

  <label for="message">Сообщение</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Отправить</button>
</form>

Из чего собирается форма:

• <form> — обёртка всей формы;
• <input> — поле ввода, его вид задаёт атрибут type;
• <textarea> — многострочное поле;
• <label> — подпись к полю;
• <button> — кнопка.

Самые полезные типы полей:

Атрибут required делает поле обязательным: браузер не даст отправить форму без него. placeholder показывает подсказку внутри пустого поля, но не заменяет подпись — она исчезает, как только человек начинает печатать.

Подпись связывают с полем: значение for у label совпадает с id у поля. Тогда клик по подписи ставит курсор в поле, а экранный диктор знает, что это за поле.

Куда отправляются данные и как их обрабатывают — уже задача сервера и JavaScript. В вёрстке важно правильно собрать саму форму.

<img src="images/class.jpg" alt="Занятие в группе: преподаватель у доски" width="600" height="400">

<form>
  <label for="name">Имя</label>
  <input type="text" id="name" name="name" required>

  <label for="phone">Телефон</label>
  <input type="tel" id="phone" name="phone">

  <input type="checkbox" id="agree" name="agree" required>
  <label for="agree">Согласен на обработку данных</label>

  <button type="submit">Записаться</button>
</form>