Полный курс по созданию сайтов
Этот документ содержит полный и подробный курс по созданию сайтов с
практическими заданиями.
Урок 1: Основы HTML
HTML (HyperText Markup Language) — это язык разметки, который определяет
структуру веб-страницы.
1.1. Основная структура HTML-документа
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>
1.2. Разбор кода
Описание основных элементов HTML-кода:
• <!DOCTYPE html> — указывает, что это HTML5-документ.
• <html lang="ru"> — начало документа, указывает язык.
• <head> — содержит мета-информацию.
• <body> — содержит видимый контент.
• <h1> — заголовок.
• <p> — параграф.
Задание 1
1. Создай файл [Link].
2. Добавь в <body> несколько заголовков (<h1>, <h2>, <h3>).
3. Добавь пару абзацев <p> с любым текстом.
4. Открой файл в браузере и проверь результат.
Урок 2: Основы CSS
CSS (Cascading Style Sheets) — это язык стилей, который используется для
оформления веб-страниц.
2.1. Подключение CSS
/* Файл [Link] */
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
2.2. Способы подключения CSS
1. Встроенный стиль (внутри HTML-файла, в <style>).
2. Внешний файл (лучший вариант, подключается через <link>).
Задание 2
1. Создай файл [Link].
2. Определи стили для body и заголовков h1.
3. Подключи этот файл к [Link] через <link>.
4. Открой в браузере и проверь результат.
Урок 3: Основы JavaScript
JavaScript — это язык программирования, который делает веб-страницы
интерактивными.
3.1. Подключение JavaScript
// Файл [Link]
[Link]("DOMContentLoaded", function() {
alert("Привет, мир!");
});
Задание 3
1. Создай файл [Link].
2. Напиши код, который выводит сообщение при загрузке страницы.
3. Подключи [Link] к [Link].
4. Открой страницу и проверь выполнение скрипта.
Урок 4: Формы и ввод данных
Формы используются для сбора данных от пользователя.
4.1. Простейшая форма
<form action="[Link]" method="POST">
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>
Задание 4
1. Создай форму с полями для имени и email.
2. Добавь кнопку отправки.
3. Проверь, как работает отправка данных.
Урок 5: Адаптивная верстка
Адаптивная верстка позволяет сайту корректно отображаться на разных
устройствах.
5.1. Использование @media
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Задание 5
1. Добавь медиазапрос для изменения фона на мобильных устройствах.
2. Проверь работу в браузере, изменяя размер окна.
Урок 6: Деплой сайта
Размещение сайта в интернете можно сделать с помощью GitHub Pages,
Netlify или Vercel.
Задание 6
1. Зарегистрируйся на GitHub.
2. Создай репозиторий и загрузи файлы сайта.
3. Включи GitHub Pages для репозитория.