Technologies

HTML СSS

HTML — язык гипертекстовой разметки, состоящий из тегов описывающих, как нужно отображать содержимое страницы в браузере. Это каркас, который используется для всех сайтов и веб-приложений, вне зависимости от использованных технологий и их сложности. Его задача объяснить браузеру, что нужно показать пользователю — где должен располагаться каждый элемент.

 

CSS — тоже язык разметки, но его задача объяснить, как каждый HTML-элемент должен выглядеть. 

 

Проще говоря, HTML — это про форматирование: списки, таблицы, абзацы и формы. CSS — про цвета, фоны, шрифты и иконки.

HTML и CSS, как это работает:
  • Пользователь переходит на страницу в браузере;
  • Браузер посылает запрос на адрес страницы и получает в ответ html-файл со ссылками на файлы стилей;
  • Браузер обрабатывает код с разметкой и отображает визуальное содержимое сайта.
Функции HTML и CSS

В самом общем виде HTML определяет где на странице будет расположен элемент, а CSS как он будет выглядеть. Но есть ряд нюансов.

HTML

Главная составляющая HTML — элемент. Например, текстовій контент, заключенный в открывающий и закрывающий теги. Элементы могут быть вложенными друг в друга, например, если нужно сделать текст одновременно подчеркнутым и выведенным в отдельный абзац. У элементов также могут быть атрибуты — дополнительная информация, которую не нужно отображать, но можно использовать для обращения. Например, чтобы задать один стиль всему контенту с таким атрибутом на сайте. Пустые элементы, без контента и закрывающего тега используются для загрузки, например, картинок. HTML описывает следующие элементы:

01
01
Разметка текста

заголовки, абзацы, списки, ссылки, а также шрифты, их размеры и начертания;

02
02
Картинки

ссылки на изображения с атрибутом alt, описывающим то, что на них изображено текстом;

03
03
Прочие элементы

таблицы, блоки и формы.

CSS

CSS добавляется в HTML-файл, как ссылка в элемент <head>. Там хранится все, что должно быть на странице, но не входит в категорию контент. Кроме каскадных таблиц стилей это будут, например, seo-тег Description с описанием страницы для поисковых систем.

Сама таблица состоит из правил оформления, они же стили — селектор и объявления для него. Первая часть определяет те части файла HTML, на которые будет действовать правило, а вторая описывает стиль. CSS — это необычные шрифты, цвета фонов для блоков, значки для списков, кнопки, иконки, дополнительные дизайнерские элементы на сайте, но не только. В таблицах стилей можно указывать разные правила для отображения элементов при выполнении условий. Например, изменение вида кнопки при наведении на нее курсором и так далее.

Заключение

Версткой страниц для браузера по макетам занимаются веб-дизайнеры. Они обязательные члены фронтэнд-команд, которые работают над созданием пользовательского интерфейса вашего веб-приложения.

Без HTML ни одна из страниц сайта не отобразится в браузере, а без CSS содержимое будет выглядеть как голый каркас с контентом. Сейчас актуальными версиями считаются HTML5 и CSS3, не все функции которых поддерживаются всеми браузерами. У языков разметки появляется все больше возможностей для проектирования оригинальных пользовательских интерфейсов и создания хорошего пользовательского опыта для ваших клиентов.

Разработка веб сайтов
Разработка веб сайтов

Бизнес знает свои потребности, а мы — как их реализовать.

Создаем и разрабатываем устойчивые корпоративные сайты и резвые промо-лендинги. Разрабатываем web сервисы. Наши продукты выдерживают огромную нагрузку и надёжно служат клиентам.