Язык гиперразметки, каскадные таблицы стилей и JavaScript – вот связка того, на чем пишут сайты. Мы не говорим пока о фреймворках, которые используются современными разработчиками, нам интересна база фронтенд-проектирования. JavaScript – полноценный язык программирования, который позволяет сделать сайт интерактивным, реагирующим на клики, ввод, нажимания клавиш и так далее. Но сама основа, композиция, внешний вид, расположение элементов, их цвет, шрифт и так далее – все это HTML+CSS. Вот что такое верстка сайта. Поговорим подробнее о каждой составляющей.
Как выглядит HTML-документ?
Язык гипертекстовой разметки – то, на чем верстают каркас сайта. Чтобы начать создавать структуру веб-страницы, нужно разобраться, что такое теги в HTML. Это элементы кода, из которых состоит разметка сайта. Они указывают, какое семантическое наполнение имеет та или иная его часть, например, тег <img> говорит браузеру, что перед ним картинка, а в контейнер типа <p>…</p> оборачивают абзац текста. Это элементы HTML. С их помощью веб-страница “общается” с браузером, объясняя значение каждого компонента.
HTML-документ состоит из тегов и их содержимого. Вот основные компоненты каждой веб-страницы.
- <html> – в этот тег оборачивается весь документ;
- <head> – здесь служебная информация;
- <body> – тело документа;
- <div>, <span> – структурные компоненты страницы;
- <p>, <h1>-<h6> – текстовые;
- <a> – ссылки;
- <ul>, <ol> – списки и так далее.
Язык стилей CSS
Каскадные таблицы помогают задать внешний вид элементам страницы. Помните тег <head>? В него можно поместить <link>, указав ссылку на файл со стилями. Теперь вы знаете, как подключить CSS к HTML.
При помощи стилей можно задавать расположение компонентов страницы, их цвет, размер, отступы, шрифты, словом, все визуальные характеристики. Кстати, адаптивность сайта – это тоже заслуга каскадных таблиц. Так что если вы видите, что у ресурса ломается верстка на маленьких экранах или неправильно работает масштаб, стоит провести проверку CSS на ошибки.
Как научиться верстать сайты с нуля?
Освоить базовые навыки фронтендера поможет компьютерная школа Hillel. Курсы по HTML и CSS разработаны для подготовки специалистов с нуля. Программа обучения верстке сайта для начинающих имеет практически уклон, благодаря чему уже в процессе занятий студенты осваиваются в работе с кодом. Курсы преподают опытные менторы-практики, сотрудники ведущих айти-компаний.
Тем, кого привлекает айти-сфера, но не интересует девелопинг, можно порекомендовать другие программы. Например, QA курсы. Тестирование ПО – еще одна перспективная сфера с низким порогом вхождения.
По материалам: https://odessa.ithillel.ua/
