HTML и CSS: основы для дизайнеров
Базовые принципы и понятия HTML и CSS в разработке и дизайне – это тот необходимый минимум, который нужен для создания функциональных и привлекательных интернет-порталов. Если вы хотите нечто большее, чем просто «собирать» веб–страницы из готовых блоков, а также воплощать свои творческие идеи в разработке с нуля и дальше развиваться в этом направлении, не лишним будет изучить хотя бы базовые понятия. К ним относятся теги HTML – HyperText Markup Language, которые задают структуру страниц и их свойства, а также CSS – стили, помогающие вашему проекту выглядеть гармонично. Итак, начнем наш урок по основам создания интерактивных сайтов!
Основные HTML-теги и их назначение
Загружая любую страницу, вы видите на экране своего ПК, смартфона или другого устройства отдельные элементы дизайна – блоки с текстом и визуалом, кнопки, формы, меню, строку поиска и другие составляющие. Именно они формируют интерфейс портала. Однако за эстетичным оформлением стоит код, написанный языком разметки – HyperText Markup Language. Благодаря HTML-тегам, браузер определяет, какие компоненты есть на странице и в каких местах они располагаются.
Браузеры считывают язык гипертекстовой разметки, и отображают его в привычном пользователю виде страницы. В этом программам и помогают теги – части языка разметки, обозначающие конец, начало и содержимое каждого элемента. В коде тег заключается в символы <тег>, где вместо тега прописывается конкретное содержимое блока. В конце каждого компонента добавляется тег со слэшем – </тег>. Изучение основ HTML и CSS начинается со знакомства со значениями отдельных тегов.
<html> и <body>
Именно в них заключен весь код, который в виде веб–страницы видит посетитель портала. Тег <html> включает в себя всю страницу, а <body> указывает на основное содержимое.
<header>
Используется для того, чтобы «показать» браузеру, какие элементы дизайна должны находится на самом верху страницы. Это – так называемая шапка портала, в которой обычно отображается строка меню, логотип компании и поле для поиска нужной информации.
<main>
Необходим для того, чтобы выделить основной контент по центру веб–страницы. Здесь могут быть как текст или изображение, так и другие компоненты – кнопки, формы, интерактивные элементы.
<footer>
Нужен для создания подвала сайта. Здесь можно разместить контакты, карту, ссылки на страницы в социальных сетях и Политику конфиденциальности.
<div>
Тег – контейнер, который позволяет сгруппировать отдельные элементы в общий блок.
<h1>
Заголовок первого уровня на странице. Теги–заголовки обозначаются цифрами от 1 до 6: чем больше цифра, тем ниже уровень выделяемого заголовка. Обычно в текстах на сайтах используются заголовки до <h3> включительно.
<ul>, <li> и <ol>
Теги, которые применяются для создания неупорядоченных (<ul>) и упорядоченных (<ol>) списков внутри текстов. Тег <li> нужен для того, чтобы выделить отдельные элементы списка.
<img>
Данный тег предназначен для вставки изображений на сайт. При этом путь к конкретной иллюстрации или фотографии прописывается с помощью атрибута src, а для того, чтобы добавить описание к картинке, требуется атрибут alt. Код внутри страницы при этом будет выглядеть следующим образом: <img src="path/to/image.jpg" alt="Описание изображения">.
<i>
Помещенный внутри этого тега текст выделяется курсивом.
<b>
Выделяет текст жирным шрифтом.
<br>
Добавляет разрыв строки.
<button>
Используется для создания кнопок, кликнув по которым пользователь может выполнить определенное действие.
Работа над сайтом начинается с создания документа с расширением HTML. Он уже будет содержать код пустой страницы, который необходимо заполнить соответствующими тегами. Кстати, по данным на 2023 год, язык разметки включает в себя 142 тега. При этом 27 из них считаются устаревшими и не используются при разработке.
Поговорим на языке стилей
Зачем нужны для дизайнера HTML и CSS, если с кодом взаимодействуют разработчики? На самом деле, это начало всех начал и фундамент, на котором строится внешний облик любой площадки. И если первый определяет структуру содержимого ресурса, то второй – то, как именно будет выглядеть ваш контент. Cascading Style Sheets или каскадные таблицы стилей позволяют задавать отдельным компонентам дизайна цвета и конкретные шрифты, работать с отступами и размерами, регулировать адаптивность, добавлять тени и другие эффекты.
В целом, именно CSS является первым помощником дизайнера в реализации визуальной концепции. Его возможности делают интерфейс сайта гибким, привлекательным и функциональным.
Стили прописываются внутри HTML-тегов с помощью элемента style:. Когда нужно изменить облик отдельного компонента дизайна (например, обозначить конкретный цвет заголовка), такой способ называется inline, потому что атрибут располагается в одной строке с тегом. Однако чаще всего стили применяются к целому блоку с одинаковыми компонентами или несколько раз повторяются на одной странице. В таких случаях используются селекторы – шаблоны форматирования или правила. Селекторы могут различаться по:
- Тегу. В этом случае внешний вид меняется у всех элементов внутри одинаковых тегов;
- Атрибутам. Стили выбираются по назначению тегов и их атрибутов;
- Псевдоэлементам. Когда меняется не весь компонент дизайна, а только одна из его составляющих. Например, выделяется заглавная буква в начале текста.
Простыми словами, при отображении страницы селекторы помогают определить, на какую часть HTML-документа распространяется правило стиля. К основным компонентам дизайна, которые настраиваются через стили, относятся:
Цветовая палитра
Для того чтобы задать цвет, применяется несколько различных методов, включая названия оттенков, шестнадцатеричные коды, а также значения RGB, RGBA, HSL и HSLA.
Чтобы задать разные оттенки текста и фона, команда прописывается следующим образом:
.color-example {
color: red; /* Цвет текста */
background-color: blue; /* Цвет фона */
}
Использование метода RGB позволяет указать определенный цвет при помощи использования числовых значений красного, зеленого и синего:
.rgba-example {
color: rgba(255, 0, 0, 0.5); /* Цвет текста */
}
При этом стиль Alpha добавляет выбранной палитре прозрачности. В коде это выглядит следующим образом:
.rgba-example {
color: rgba(255, 0, 0, 0.5); /* Красный цвет с прозрачностью 50% */
background-color: rgba(0, 255, 0, 0.3); /* Зеленый цвет с прозрачностью 30% */
}
HSL (Hue, Saturation, Lightness) указывают на насыщенность и яркость выбранного оттенка:
.hsl-example {
color: hsl(0, 100%, 50%); /* Яркий красный цвет */
background-color: hsl(120, 50%, 50%); /* Яркий зеленый цвет */
}
Типографика и работа с текстом
С помощью стилей задается семейство шрифтов и размер кегля. Для выбора шрифта используется команда:
body {
font-family: Arial, sans-serif;
}
Для определения кегля
.font-size {
font-size: 18px;
}
Кроме того, с помощью CSS можно:
- Выровнять текст по центру или левому/правому краю страницы
.align {
text-align: center;
}
- Настроить размер внешних и внутренних отступов. Для внешних используется команда margin
.margin {
margin: 20px;
}
Для внутренних отступов – padding
.padding {
padding: 20px;
}
Размеры и позиции элементов
Команда определяет размеры и положение на странице определенных элементов дизайна. С помощью нее настраиваются:
- Ширина и высота
.dimensions {
width: 200px;
height: 100px;
}
- Позиционирование
.position {
position: relative;
}
Адаптивность
Адаптивные стили ресурса для различных устройств настраиваются с помощью:
@media (max-width: 768px) {
.mobile {
font-size: 16px;
}
}
Конечно, это далеко не исчерпывающий список стилей. Глубоко изучив CSS, можно реализовать на портале практически любую креативную идею.
Нужны ли основы HTML, CSS и веб-дизайна для работы в Taptop?
Функционал конструктора Taptop идеален для тех, кто не знаком даже с основами программирования и работы с кодом. Здесь есть все для безграничного творчества – от готовых шаблонов, разработанных профессионалами, которые можно стилизовать под собственные потребности, до Визуального редактора с широчайшими возможностями, позволяющего создавать даже самые сложные с точки зрения дизайна ресурсы без знания HTML и CSS. Taptop позволяет:
- Создавать и использовать блоки компонентов дизайна для использования в разных проектах. Кроме того, пользователь получает доступ к Библиотекам конструктора;
- Менять CSS–свойства любых элементов без каких-либо ограничений;
- С помощью автолейаутов быстро изменять готовый дизайн и настраивать уникальные сетки сайта. Чтобы контролировать размеры, отступы и положение компонентов, не нужно работать с каждым отдельно и разбираться со стилями;
- Бесплатно создать до 5 сайтов с возможностью перенести готовый проект в html, css и js куда угодно.
Создавать привлекательные и функциональные порталы еще никогда не было так просто!