HTML СSS
HTML — язык гипертекстовой разметки, состоящий из тегов описывающих, как нужно отображать содержимое страницы в браузере. Это каркас, который используется для всех сайтов и веб-приложений, вне зависимости от использованных технологий и их сложности. Его задача объяснить браузеру, что нужно показать пользователю — где должен располагаться каждый элемент.
CSS — тоже язык разметки, но его задача объяснить, как каждый HTML-элемент должен выглядеть.
Проще говоря, HTML — это про форматирование: списки, таблицы, абзацы и формы. CSS — про цвета, фоны, шрифты и иконки.
- Пользователь переходит на страницу в браузере;
- Браузер посылает запрос на адрес страницы и получает в ответ html-файл со ссылками на файлы стилей;
- Браузер обрабатывает код с разметкой и отображает визуальное содержимое сайта.
В самом общем виде HTML определяет где на странице будет расположен элемент, а CSS как он будет выглядеть. Но есть ряд нюансов.
Главная составляющая HTML — элемент. Например, текстовій контент, заключенный в открывающий и закрывающий теги. Элементы могут быть вложенными друг в друга, например, если нужно сделать текст одновременно подчеркнутым и выведенным в отдельный абзац. У элементов также могут быть атрибуты — дополнительная информация, которую не нужно отображать, но можно использовать для обращения. Например, чтобы задать один стиль всему контенту с таким атрибутом на сайте. Пустые элементы, без контента и закрывающего тега используются для загрузки, например, картинок. HTML описывает следующие элементы:
заголовки, абзацы, списки, ссылки, а также шрифты, их размеры и начертания;
ссылки на изображения с атрибутом alt, описывающим то, что на них изображено текстом;
таблицы, блоки и формы.
CSS добавляется в HTML-файл, как ссылка в элемент <head>. Там хранится все, что должно быть на странице, но не входит в категорию контент. Кроме каскадных таблиц стилей это будут, например, seo-тег Description с описанием страницы для поисковых систем.
Сама таблица состоит из правил оформления, они же стили — селектор и объявления для него. Первая часть определяет те части файла HTML, на которые будет действовать правило, а вторая описывает стиль. CSS — это необычные шрифты, цвета фонов для блоков, значки для списков, кнопки, иконки, дополнительные дизайнерские элементы на сайте, но не только. В таблицах стилей можно указывать разные правила для отображения элементов при выполнении условий. Например, изменение вида кнопки при наведении на нее курсором и так далее.
Версткой страниц для браузера по макетам занимаются веб-дизайнеры. Они обязательные члены фронтэнд-команд, которые работают над созданием пользовательского интерфейса вашего веб-приложения.
Без HTML ни одна из страниц сайта не отобразится в браузере, а без CSS содержимое будет выглядеть как голый каркас с контентом. Сейчас актуальными версиями считаются HTML5 и CSS3, не все функции которых поддерживаются всеми браузерами. У языков разметки появляется все больше возможностей для проектирования оригинальных пользовательских интерфейсов и создания хорошего пользовательского опыта для ваших клиентов.