DEV Community

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

Posted on • Edited on • Originally published at masterarthur.xyz

4 1 2 2

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

Вёрстка

Вёрстка - это процесс создания веб-страницы, в ходе которого контент, расположенный на сайте (текст, изображения, видео и другие медиа-ресурсы), структурируется и стилизуется с использованием языков программирования и разметки, таких как 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)
Enter fullscreen mode Exit fullscreen mode

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

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

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

HTML

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

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

syntax example

  • Теги: 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>
Enter fullscreen mode Exit fullscreen mode

Это уже готовый код, его можно использовать для первого HTML документа:
file code
Сохраняем файл и запускаем его, используя Google Chrome:

сохранение файла
открытие файла
результат в 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>
Enter fullscreen mode Exit fullscreen mode

пример HTML часть 1

пример HTML часть 2

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

CSS

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

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

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

  • Внешние стили: CSS-код находится в отдельном файле (обычно с расширением .css) и подключается к HTML-документу с помощью тега <link>. Например:
    <link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode
  • Внутренние стили: CSS-код размещается прямо в HTML-документе внутри тега <style>:
<style>
    p {
        color: red;
    } 
</style>
Enter fullscreen mode Exit fullscreen mode
  • Инлайн-стили: стили применяются непосредственно к конкретным элементам HTML с помощью атрибута style:
<p style="color: blue;">Это синий текст.</p>
Enter fullscreen mode Exit fullscreen mode

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

.yellow-text {
    color: yellow;
}
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

css example

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

  • Селекторы определяют, к каким элементам применяются стили. Примеры:
    • p — выбирает все параграфы.
    • .classname — выбирает элементы с классом classname.
    • #idname — выбирает элемент с идентификатором idname.
  • Свойства определяют, какие именно стили будут применены к выбранным элементам. Пример:
p {
    color: green;
    font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

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

  • Цвета: 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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Пример 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;
}
Enter fullscreen mode Exit fullscreen mode

Соединение 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;
}
Enter fullscreen mode Exit fullscreen mode

И получаем такой результат:
HTML + CSS результат часть 1

HTML + CSS результат часть 2

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

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

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

homework exmaple

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

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay