<aside> ℹ️ Примерное время на прочтение: 30 минут. Не забывайте о полезных ссылках для самостоятельного изучения темы.
</aside>
Понимание основ вёрстки необходимо каждому дизайнеру любого уровня. Так как продуктовый дизайнер рисует продукт, а не просто макеты в Figma, он должен понимать, каким образом реализуется его дизайн в коде. HTML используется для разметки страницы, а для описания её внешнего вида используется CSS.
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — язык разметки, определяющий структуру и содержание веб-страниц и контента на них. HTML является самым базовым строительным блоком веб-страницы. Документ HTML — это простой текст, поделённый на элементы. Элементы окружены одинаковыми открывающимися и закрывающимися тегами. Каждый тег начинается и заканчивается с угловых скобок (<>).
Любая веб-страница имеет следующий вид:
<!DOCTYPE html>
<html>
<head>
****<!-- Здесь находятся метатеги и ссылки на стили и скрипты -->
</head>
<body>
<!-- Здесь находится вся разметка страницы -->
</body>
</html>
Анатомия HTML-элемента:
<a href="filename" target="_self">название ссылки</a>
href задаёт значение адреса документа, на который указывает ссылка.filename — имя файла или адрес Internet, на который необходимо сослаться.название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашёл на страницу.target — задаёт значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
_top — открытие документа в текущем окне;_blank — открытие документа в новом окне;_self — открытие документа в текущем фрейме;_parent — открытие документа в родительском фрейме.