Урок 1: Введение в создание сайтов (Друзья, сетка в полной мере не позволяет вставить код адекватно, если возникнут какие-то вопросы, не стесняйтесь обращаться!) 1

Урок 1: Введение в создание сайтов

(Друзья, сетка в полной мере не позволяет вставить код адекватно, если возникнут какие-то вопросы, не стесняйтесь обращаться!)

1. Введение

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

2. Что такое веб-сайт?

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

3. Основные технологии

HTML (HyperText Markup Language): Язык разметки, используемый для создания структуры веб-страниц. CSS (Cascading Style Sheets): Язык стилей, используемый для оформления и визуального представления веб-страниц. JavaScript: Язык программирования, позволяющий добавлять интерактивность на веб-страницы.

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

Выбор редактора кода: Для начала работы вам понадобится текстовый редактор. Популярные редакторы включают Visual Studio Code, Sublime Text и Atom. Они бесплатны и имеют множество полезных функций для веб-разработки. Но при желании, можно ограничиться даже стандартным блокнотом!

Установка редактора:

Скачайте и установите выбранный редактор с официального сайта.

Настройте основные параметры, такие как тема оформления и шрифты, чтобы сделать работу более комфортной. Установка веб-браузера: Для просмотра и тестирования вашего веб-сайта вам понадобится современный веб-браузер, такой как Google Chrome или Mozilla Firefox.

Создание структуры проекта:

Создайте папку для вашего проекта на компьютере.

Внутри этой папки создайте файл index.html — это будет ваша главная страница.

Создайте папку css для хранения стилей и папку js для скриптов.

5. Написание первой веб-страницы

Создание файла index.html:

Откройте файл index.html в вашем редакторе кода.

Добавьте базовую структуру HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мой первый сайт</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>Добро пожаловать на мой первый сайт!</h1> <p>Это мой первый опыт в создании веб-сайтов.</p> <script src="js/scripts.js"></script> </body> </html>

Далее идёт создание файла стилей styles.css:

В папке css создайте файл styles.css.

Добавьте базовые стили:

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }

h1 { color: #333; text-align: center; margin-top: 20px; }

p { text-align: center; }

Создание файла скриптов scripts.js:

В папке js создайте файл scripts.js.

Пока оставьте его пустым, мы будем добавлять скрипты в следующих уроках.

6. Тестирование

Откройте файл index.html в вашем веб-браузере, чтобы увидеть результат.

Убедитесь, что текст и стили отображаются правильно.