Arthur Kh

Posted on Aug 12, 2023 • Edited on Nov 21, 2023 • Originally published at masterarthur.xyz

"Мобильная" разработка. [Учимся верстать, HTML CSS]

#tutorial #html #css #beginners

Вёрстка

Вёрстка - это процесс создания веб-страницы, в ходе которого контент, расположенный на сайте (текст, изображения, видео и другие медиа-ресурсы), структурируется и стилизуется с использованием языков программирования и разметки, таких как HTML (HyperText Markup Language) и CSS (Cascading Style Sheets).

Вёрстка включает в себя:

Работу с HTML: Язык разметки HTML определяет структуру веб-страницы. С помощью различных тегов можно создавать заголовки, параграфы, списки, ссылки, изображения и так далее.
Работу с CSS: С помощью CSS дизайнеры и разработчики могут стилизовать элементы веб-страницы, задавать цвета, шрифты, отступы, рамки и многое другое. CSS позволяет создавать адаптивные и отзывчивые дизайны, которые выглядят хорошо на различных устройствах и размерах экрана.
Адаптивность: Современные веб-сайты должны корректно отображаться на различных устройствах, от мобильных телефонов до настольных компьютеров. Веб-верстка позволяет создать такую адаптивность.
Интерактивность: Хотя основная часть веб-вёрстки фокусируется на HTML и CSS, может быть добавлен ещё и JavaScript, чтобы сделать страницу интерактивной.

Структура файлов

Структура файлов проекта на HTML и CSS может варьироваться в зависимости от конкретных потребностей и сложности проекта. Тем не менее, классическая базовая структура выглядит примерно так:

/my_project/
│
├── /css/
│   ├── styles.css
│   ├── reset.css (если нужен)
│   ├── /modules/ (в случае, если стили разделены на модули)
│   │   ├── header.css
│   │   ├── footer.css
│   │   ├── ...
│
├── /img/ (или /images/)
│   ├── logo.png
│   ├── background.jpg
│   ├── ...
│
├── /js/
│   ├── main.js
│   ├── /libs/ (дополнительные библиотеки, если они есть)
│   │   ├── jquery.js
│   │   ├── ...
│
├── index.html
├── about.html
├── contact.html
├── ...
│
├── /fonts/ (если проект использует кастомные шрифты)
│   ├── customfont.ttf
│   ├── ...
│
└── .gitignore (если проект находится в системе контроля версий, например, git)

Важные моменты:

CSS: Основные стили обычно находятся в файле styles.css, но можно использовать дополнительные файлы (например, reset.css для сброса стандартных стилей браузера) или разделить стили на модули для удобства.
Изображения: Все изображения лучше всего хранить в отдельной папке, например, /img/ или /images/.
JavaScript: Скрипты обычно хранятся в папке /js/. Если в проекте используются сторонние библиотеки, их можно поместить в подпапку /libs/.
Шрифты: Если вы используете кастомные шрифты, их можно хранить в папке /fonts/.

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

HTML

HTML (HyperText Markup Language) — это язык разметки, который используется для создания и структурирования содержимого на веб-страницах.

Синтаксис HTML включает в себя следующие компоненты:

Теги: HTML состоит из тегов, большинство из которых имеет открывающий и закрывающий элементы, например: <tagname>Content goes here</tagname>.
Атрибуты: Это дополнительная информация для тегов, например: <a href="https://www.example.com">Link to Example</a> - здесь href является атрибутом тега a.

Структура HTML файла

Каждый HTML-документ начинается с декларации типа документа <!DOCTYPE html>. После этого следует корневой элемент <html>, который содержит в себе <head> (головную часть) и <body> (основное содержимое).

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>
</head>

<body>
    The content of the document......
</body>
</html>

Это уже готовый код, его можно использовать для первого HTML документа:

Сохраняем файл и запускаем его, используя Google Chrome:

Основные теги

<!DOCTYPE html>: декларация типа документа. Указывает браузеру версию HTML документа.
<html>: корневой элемент документа. Всё содержимое страницы находится внутри этого тега.
<head>: содержит мета-информацию о странице, такую как кодировка, заголовок страницы и ссылки на стили.
<meta>: используется внутри <head> для указания мета-информации, например, <meta charset="UTF-8"> указывает на кодировку документа.
<title>: заголовок страницы, который отображается на вкладке браузера.
<body>: основное содержимое страницы. Всё, что визуально отображается на странице, находится внутри этого тега.
<h1>, <h2>, ... <h6>: заголовки разного уровня. <h1> - самый важный, а <h6> - наименее важный.
<p>: параграф.
<a>: ссылка. Основной атрибут - href, который указывает URL-адрес ссылки.
. <img>: изображение. Основные атрибуты - src (путь к изображению) и alt (альтернативный текст).
<ul>: маркированный список. Внутри него находятся элементы списка <li>.
<ol>: нумерованный список. Также содержит элементы списка <li>.
<li>: элемент списка. Используется внутри <ul> или <ol>.
<br>: перенос строки.
<div>: блочный элемент, используется для группировки содержимого.
<span>: строчный элемент, используется для выделения части текста.
<table>: таблица. Для создания строк используется <tr>, заголовков - <th>, ячеек - <td>.
<form>: форма. Содержит элементы для ввода данных пользователем.
<input>: элемент ввода данных. Может принимать разные значения атрибута type, такие как text, password, checkbox и др.
<textarea>: текстовое поле для ввода многострочного текста.
<button>: кнопка.
<script>: используется для встраивания или ссылки на JavaScript-код.
<style>: используется для встраивания стилей CSS прямо в HTML-документ.
<link>: позволяет подключать внешние ресурсы, такие как CSS-файлы.

Формы

Для создания форм на веб-страницах используется тег <form>. Внутри формы могут располагаться разные элементы ввода:

<input>: поле ввода. Тип поля определяется атрибутом type. Например, type="text" для текстового поля или type="submit" для кнопки отправки формы.
<textarea>: многострочное текстовое поле.
<select> и <option>: выпадающий список.

Семантические теги

Эти теги помогают структурировать содержимое страницы и придают смысловое значение:

<header>, <footer>: шапка и подвал сайта или секции.
<nav>: навигационное меню.
<article>: самостоятельный контент (например, статья в блоге).
<section>: раздел веб-страницы.
<aside>: боковая колонка или дополнительный контент.

Пример

Теперь пришло время применить наши новые знания. Составим страницу со всеми известными нам тегами:

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример HTML-документа</title>
</head>

<body>
    <header>
        <h1>Заголовок сайта</h1>
        <nav>
            <ul>
                <li><a href="#home">Главная</a></li>
                <li><a href="#about">О нас</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h2>Добро пожаловать на наш сайт!</h2>
        <p>Это пример параграфа. Здесь может быть ваш текст.</p>
        <img src="path_to_unreal_image.jpg" alt="Описание изображения">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Googleplex_HQ_%28cropped%29.jpg/320px-Googleplex_HQ_%28cropped%29.jpg" alt="Описание изображения">
    </section>

    <section id="about">
        <h2>О нас</h2>
        <p>Здесь вы найдете информацию о нашей компании.</p>
        <article>
            <h3>История нашей компании</h3>
            <p>Текст статьи о том, как всё начиналось...</p>
        </article>
    </section>

    <aside>
        <h3>Боковая панель</h3>
        <p>Здесь может быть какая-то дополнительная информация или реклама.</p>
    </aside>

    <section id="contact">
        <h2>Свяжитесь с нами</h2>
        <form action="/" method="post">
            <label for="name">Ваше имя:</label>
            <input type="text" id="name" name="name" required>
            <br>
            <label for="message">Сообщение:</label>
            <textarea id="message" name="message" rows="4" required></textarea>
            <br>
            <button type="submit">Отправить</button>
        </form>
    </section>

    <footer>
        <p>© 2023 Компания. Все права защищены.</p>
    </footer>
</body>

</html>

Теперь мы умеем структурировать наши данные. Однако необходимо также научиться их стилизовать, для чего нам и понадобится CSS.

CSS

CSS (Cascading Style Sheets) - это язык стилей, используемый для оформления внешнего вида веб-страниц, написанных с использованием HTML или XML.

Подключение CSS

CSS в страницу можно внедрить тремя основными способами:

Внешние стили: CSS-код находится в отдельном файле (обычно с расширением .css) и подключается к HTML-документу с помощью тега <link>. Например:

    <link rel="stylesheet" href="styles.css">

Внутренние стили: CSS-код размещается прямо в HTML-документе внутри тега <style>:

<style>
    p {
        color: red;
    } 
</style>

Инлайн-стили: стили применяются непосредственно к конкретным элементам HTML с помощью атрибута style:

<p style="color: blue;">Это синий текст.</p>

Совместив все эти методы подключения, мы получаем такой пример:
styles.css:

.yellow-text {
    color: yellow;
}

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <p class="yellow-text">Это желтый текст.</p>
    <style>
        p {
            color: red;
        } 
    </style>
    <p>Это красный текст.</p>
    <p style="color: blue;">Это синий текст.</p>
</body>
</html>

Селекторы и свойства

Селекторы определяют, к каким элементам применяются стили. Примеры:
- p — выбирает все параграфы.
- .classname — выбирает элементы с классом classname.
- #idname — выбирает элемент с идентификатором idname.
Свойства определяют, какие именно стили будут применены к выбранным элементам. Пример:

p {
    color: green;
    font-size: 16px;
}

Основные свойства и их значения

Цвета: color, background-color, border-color и др. Цвета можно задавать различными способами: именами (red, blue), HEX-кодом (#FF0000), RGB (rgb(255,0,0)), RGBA (rgba(255,0,0,0.5)) и другими.
Размеры и отступы: width, height, margin, padding, border.
Шрифты: font-family, font-size, font-weight, font-style, text-transform, text-decoration.
Позиционирование: position (static, relative, absolute, fixed, sticky), top, right, bottom, left, z-index.
Дисплей и флексбокс: display (block, inline, inline-block, flex, grid и др.), свойства для управления флексбоксом (flex-direction, justify-content, align-items и др.).

Псевдоклассы и псевдоэлементы

Псевдоклассы позволяют применять стили на основе определенного состояния элемента. Примеры: :hover (при наведении), :active (при нажатии), :first-child (первый дочерний элемент).
Псевдоэлементы позволяют стилизовать части элемента. Примеры: ::before, ::after.

Отзывчивый дизайн

С помощью медиа-запросов можно адаптировать дизайн веб-страницы для разных устройств:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Пример CSS файла

/* Селектор тега: применяет стили ко всем элементам <h1> */
h1 {
    font-size: 24px;
    color: blue;
}

/* Селектор класса: применяет стили ко всем элементам с классом "highlight" */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* Селектор идентификатора: применяет стили к элементу с id "uniqueElement" */
#uniqueElement {
    border: 2px solid red;
    padding: 10px;
}

/* Селектор потомка: применяет стили ко всем элементам <p>, находящимся внутри элементов <div> */
div p {
    margin-left: 20px;
}

/* Селектор группы: применяет стили ко всем элементам <h2> и <h3> */
h2, h3 {
    color: green;
}

/* Псевдокласс: применяет стили к элементам <a> при наведении на них курсора */
a:hover {
    text-decoration: none;
    color: orange;
}

/* Псевдоэлемент: применяет стили к первой букве каждого абзаца */
p::first-letter {
    font-size: larger;
    font-weight: bold;
}

Соединение HTML и CSS

Теперь мы можем стилизовать наш пример страницы на HTML, используя CSS:

/* Общие стили для всей страницы */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header, nav, section, footer, aside, article {
    margin: 20px;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Стили для навигационного меню */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin-right: 15px;
}

nav li:last-child {
    margin-right: 0;
}

nav a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #007BFF;
}

/* Заголовки */
h1, h2, h3 {
    color: #444;
}

/* Стили для изображений */
img {
    max-width: 100%;
    height: auto;
}

/* Стили для формы */
form {
    max-width: 400px;
}

label, input, textarea, button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
}

button {
    cursor: pointer;
    background-color: #007BFF;
    color: #FFF;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Стили для боковой панели */
aside {
    background-color: #eee;
}

/* Стили для подвала */
footer {
    text-align: center;
    font-size: 0.9em;
}

И получаем такой результат:

Дополнительные источники

Google.com - найдёт ответ на любой вопрос
Учебник по HTML
Учебник по CSS
Справочник по HTML
Справочник по CSS

Домашнее задание

Попробуйте сверстать и застилизовать свою страницу автобиографию, добавляя картинки или можете попробовать сверстать такую форму:

Обязательно подписывайтесь на мой аккаунт dev.to и Telegram-канал, скоро будет ещё больше контента: https://t.me/MainArthur

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

DEV Community