Основы HTML и CSS: как создать свою первую веб-страницу с нуля

Почему важно знать основы HTML и CSS?

Привет! Меня зовут Кирилл Алехин, я предприниматель, атишник и основатель веб-студии XSL в ОАЭ. За годы работы в индустрии я понял, что знание основ HTML и CSS — это фундамент, без которого невозможно создать качественный веб-проект. Даже если вы не планируете становиться профессиональным разработчиком, понимание этих технологий поможет вам лучше взаимодействовать с командой, контролировать процесс и воплощать свои идеи в жизнь.

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

Что такое HTML и CSS?

HTML: структура веб-страницы

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

CSS: стиль и оформление

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

Создаём первую веб-страницу: шаг за шагом

Шаг 1: Подготовка рабочего пространства

Для начала вам понадобится текстовый редактор. Я рекомендую использовать Visual Studio Code — он бесплатный, удобный и поддерживает множество полезных расширений. Также установите браузер (например, Google Chrome) для просмотра результатов.

Шаг 2: Создание HTML-файла

Создайте новую папку для вашего проекта и откройте её в редакторе. Внутри папки создайте файл index.html. Это будет основной файл вашей веб-страницы.

Откройте файл и добавьте базовую структуру HTML:

`<!DOCTYPE html>`	Объявляет тип документа и версию HTML.
`<html lang="ru">`	Корневой элемент страницы, указывающий язык.
`<head>`	Содержит метаинформацию о странице (заголовок, кодировка, подключение CSS).
`<meta charset="UTF-8">`	Устанавливает кодировку для корректного отображения текста.
`<title>Моя первая страница</title>`	Задаёт заголовок страницы, который отображается в браузере.
`</head>`	Закрывает секцию метаинформации.
`<body>`	Содержит видимый контент страницы.
`</body>`	Закрывает секцию контента.
`</html>`	Закрывает корневой элемент.

Шаг 3: Добавление контента

Внутри тега <body> добавьте основные элементы:

<h1> — заголовок первого уровня;
<p> — абзац текста;
<a> — ссылка;
<img> — изображение;
<ul> и <li> — маркированный список.

Пример:

<h1>Добро пожаловать на мою первую страницу!</h1>
<p>Это мой первый опыт в создании веб-страниц.</p>
<a href="https://xsl.ae">Посетите сайт моей студии</a>
<img src="image.jpg" alt="Пример изображения">
<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
</ul>

Шаг 4: Подключение CSS

Создайте файл styles.css в той же папке, что и index.html. Внутри тега <head> HTML-файла добавьте ссылку на CSS:

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

Теперь в файле styles.css вы можете задавать стили для элементов. Например:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Шаг 5: Просмотр результата

Сохраните оба файла и откройте index.html в браузере. Вы увидите свою первую веб-страницу с базовым оформлением!

Советы для начинающих

Практикуйтесь регулярно. Чем больше вы пишете кода, тем быстрее освоите синтаксис.
Изучайте документацию. Официальные ресурсы, такие как MDN Web Docs, содержат актуальную информацию.
Экспериментируйте. Пробуйте разные стили, изменяйте структуру — так вы лучше поймёте, как работают элементы.
Используйте инструменты разработчика. В браузере Chrome нажмите F12, чтобы открыть панель разработчика. Она поможет анализировать и отлаживать код.

Заключение

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

Если у вас возникнут вопросы или вы захотите углубиться в тему, обращайтесь в нашу веб-студию XSL в ОАЭ. Мы всегда рады помочь начинающим разработчикам и предпринимателям!

Удачи в ваших начинаниях!

Кирилл Алехин, основатель XSL