Как начать создавать сайты

Основы веб-разработки

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

Что нужно знать в начале?

HTML - структура и содержимое сайта
CSS - оформление и стилизация
JavaScript - интерактивность (изучается после основ)
Редактор кода - инструмент для написания кода
Браузер - для тестирования результатов

Как работает веб-сайт?

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

Основы HTML

HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц.

Структура HTML-документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт.</p>
</body>
</html>

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

<h1>-<h6> - заголовки
<p> - абзац текста
<a href="..."> - ссылка
<img src="..."> - изображение
<ul>, <ol>, <li> - списки
<div> - блок
<span> - строчный элемент

Справочник HTML

Основы CSS

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

Как подключить CSS?

CSS можно подключить тремя способами:

Встроенные стили (атрибут style)
Внутренние стили (тег <style> в head)
Внешние стили (отдельный .css файл)

Пример CSS

/* Изменяем цвет всех заголовков h1 */
h1 {
    color: blue;
    font-size: 24px;
}

/* Стили для класса .button */
.button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

/* Стили для элемента с id="header" */
#header {
    background-color: #f0f0f0;
    padding: 20px;
}

Основные CSS-свойства

color - цвет текста
background-color - цвет фона
font-size - размер шрифта
margin - внешние отступы
padding - внутренние отступы
border - граница
display - тип отображения

Справочник CSS

Создаем первый сайт

Давайте создадим простую веб-страницу шаг за шагом.

Шаг 1: Создаем файлы

Создайте папку для проекта и в ней два файла:

index.html - главная страница
style.css - файл стилей

Шаг 2: Пишем HTML

Откройте index.html и добавьте базовую структуру:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Добро пожаловать!</h1>
    </header>
    <main>
        <p>Это мой первый сайт. Я только учусь веб-разработке.</p>
    </main>
    <footer>
        <p>© 2023 Мой первый сайт</p>
    </footer>
</body>
</html>

Шаг 3: Добавляем CSS

Откройте style.css и добавьте стили:

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

header {
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    padding: 2rem;
}

footer {
    background-color: #f4f4f4;
    text-align: center;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Шаг 4: Открываем в браузере

Дважды кликните на файл index.html, чтобы открыть его в браузере. Поздравляю, ваш первый сайт готов!

Попробовать онлайн-редактор

Полезные ресурсы

Вот несколько отличных ресурсов для продолжения обучения:

Для изучения

HTML Academy - интерактивные курсы
Learn JavaScript - учебник по JavaScript
MDN Web Docs - документация
freeCodeCamp - бесплатные курсы (на английском)

Инструменты

VS Code - редактор кода
CodePen - онлайн-редактор
GitHub - хостинг для проектов
Figma - дизайн-инструмент

Практика

Лучший способ научиться - практиковаться! Попробуйте:

Создать страницу-визитку о себе
Сделать галерею фотографий
Сверстать меню ресторана
Клонировать главную страницу Google