Что такое HTML?
При создании сайта первым в работу вступает дизайнер — он придумывает то, как сайт будет выглядеть, и героически рисует макет. Макет — это один или несколько файлов, сделанных в графическом редакторе.
Хорошо, макет получили. Пора приступать к вёрстке, она состоит из трёх частей — разметки, построения сетки и стилизации.
Разметка — написание HTML-кода будущего сайта.
Грубо говоря, верстальщик смотрит на макет, разбивает его в голове на смысловые блоки и описывает их с помощью тегов — расставляет ссылки, заголовки, добавляет картинки и списки. В итоге получается некоторое количество неоформленного текста, который уже можно загрузить в интернет, и это тоже будет вполне рабочим сайтом.
Типичная разметка типичного сайта с какой-нибудь информацией выглядит так:
Здесь есть содержимое, правильная HTML5-разметка, чтобы браузер понял, что нужно делать, абзацы, ссылки и картинки. В общем всё то, за что мы любим интернет.
Итак, HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».
Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов: <h1>, <p>, <ul>.
Вспомните, как вы работаете с документом в текстовом редакторе. Пишете текст, фрагменты выделяете курсивом или цветом, вставляете картинки или таблицы. Веб-разработчик делает то же самое в редакторе кода с помощью тегов.
Вместо расширения *.txt тут используется *.html. Оно даёт понять браузеру, что внутри файла находится код веб-страницы. Браузер разбирает его структуру, определяет взаиморасположение элементов и визуализирует их.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Документ</title>
</head>
<body>
<p>
<b>
Этот текст будет полужирным, <i>а этот — ещё и курсивным</i>.
</b>
</p>
</body>
</html>Веб-стандарты HTML описаны в спецификациях. Это главный источник знаний и для браузеров, и для разработчиков. Важно следить за их обновлениями.
Таким образом на этом этапе разметка — это просто много текста, написанного в столбик. Пока это очень далеко от того, как обычно выглядят сайты (и уж тем более наш многострадальный макет). Чтобы всё буквально встало на свои места, нужно расставить всё по сетке и оформить всё навёрстанное — и это тоже работа верстальщика.
Для этого уже используется CSS — это технология для стилизации страниц и оформления всего, что есть на сайте.
Знакомство с вёрсткой, JavaScript и PHP — бесплатные тренажёры 🎮
Перейти на htmlacademy.ru/courses/intro-to-web-development
Программирование+4