Программно любая веб-страница представляет собой 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. Когда мы говорим о проверке ошибок верстки сайта, то имеется ввиду уже интегрированная на сайт верстка.