Урок 6.5 – HTML код, валидация HTML и CSS, ошибки верстки сайта

Программно любая веб-страница представляет собой HTML код.

HTML – язык гипертекстовой разметки веб-страниц, он представляет собой набор тегов, предназначенных для формирования структуры страницы.

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

Таким образом, при помощи HTML мы задаем структуру страницы, а при помощи CSS оформляем её в нужном дизайне.

Основные теги HTML

<html>…</html> — между этими тегами заключается весь код страницы сайта.
<head>…</head> — между данными тегами обычно указывают подключаемые файлы стилей CSS, скриптов JS (можно подключать тут, но лучше в конце страницы, чтобы они не замедляли скорость загрузки), код счетчиков аналитики и др.
<body>…</body> — основное отображаемое содержимое страницы сайта.
<h1>…</h1> — основной заголовок (должен обязательно присутствовать на странице и быть только один).
<div>…</div> — блок.
<a>…</a> — ссылка.
<table>…</table> — таблица.
<ul>…</ul> — маркированный список.
<ol>…</ol> — нумерованный список.
<li>…</li> — элемент списка.
<b>…</b> или <strong>…</strong> — текст, выделенный жирным шрифтом.
<p>…</p> — абзац.
<i>…</i> — текст, выделенный курсивом.
<img/> — изображение.
<br/> — переход на новую строку.

Большинство тегов имеют открывающий и закрывающий тег. Если какой-то из этих тегов пропущен, то это является ошибкой HTML. Плюс каждый тег имеет свои обязательные атрибуты, если какой то из них опущен или заполнен некорректно – то это тоже ошибка.

Валидация HTML и CSS

Валидация HTML и CSS – это проверка правильно ли заданы все HTML теги на странице сайта и правильно ли прописаны CSS правила их визуального отображения.

Выполнить проверку можно при помощи валидатора W3C. Заходим в онлайн-сервис W3C, вставляем URL проверяемой страницы и запускаем проверку:

По результатам проверки формируем ТЗ для программиста на устранение ошибок верстки сайта.

Верстка сайта – это структурированное сочетание изображений, заголовков, подзаголовков, таблиц, блоков, списков и других элементов на веб-странице, выполненное с помощью языка разметки HTML и языка описания внешнего вида сайта CSS. Как правило верстка делается по готовому дизайну и сама по себе не является готовым сайтом – ее нужно интегрировать на какую-либо CMS. Когда мы говорим о проверке ошибок верстки сайта, то имеется ввиду уже интегрированная на сайт верстка.