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

Например, в Windows можно использовать обычный «Блокнот».

1. Откройте «Блокнот».

2. Вставьте в него такой код:

HTML




</span>
 lang="ru">

    
 charset="UTF-8">
    Мой первый сайт

    
Мой первый сайт
    
Привет! Я создал эту страницу с помощью обычного текстового редактора.
    
Обо мне
    
Здесь можно написать любой текст.
    Нажми меня

3. Выберите в Блокноте «Файл» → «Сохранить как».

4. В поле имени файла напишите, например:

index.html

5. В поле типа файла желательно выбрать «Все файлы», чтобы Блокнот не добавил расширение .txt.

6. Кодировку выберите UTF-8.

7. Сохраните файл.

После этого файл index.html можно открыть двойным щелчком. Он запустится в браузере как обычная веб-страница.

Важно, чтобы файл назывался именно, например, index.html, а не:

index.html.txt

Расширение .html сообщает компьютеру, что перед ним веб-страница, а не обычный текстовый документ.

Как устроен такой сайт

Основная конструкция HTML выглядит так:

HTML




</span>


    Название страницы


    Содержимое сайта

Тег содержит служебную информацию о странице, например название вкладки браузера.

Внутри находится то, что пользователь непосредственно видит на странице.

Например:

HTML




Заголовок

создает крупный заголовок.

HTML




Обычный текст

создает абзац.

Для ссылки используется:

HTML




 href="page2.html">Открыть вторую страницу

Для изображения:

HTML




 src="photo.jpg" alt="Фотография">

При этом файл photo.jpg можно положить в ту же папку, где находится index.html.

Можно добавить оформление

Сам HTML отвечает в основном за структуру страницы. Внешний вид задается с помощью CSS. Его тоже можно написать прямо в текстовом документе.

Например:

HTML




</span>
 lang="ru">

    
 charset="UTF-8">
    Мой сайт
    
        body {
            font-family: Arial, sans-serif;
            background: #f2f2f2;
            margin: 40px;
        }
        h1 {
            color: #333;
        }
        .box {
            background: white;
            padding: 20px;
            border-radius: 10px;
        }
    
    

 class="box">
        
Добро пожаловать!
        
Это мой первый сайт.
    

После сохранения достаточно обновить страницу в браузере, чтобы увидеть изменения.

Сайт может состоять из нескольких текстовых файлов

Например, можно создать папку:

mysite

А внутри нее:

index.html
about.html
contacts.html
style.css

index.html обычно является главной страницей.

Например, в index.html можно написать:

HTML




Главная страница
 href="about.html">О нас
 href="contacts.html">Контакты

А в about.html:

HTML




О нас
Это страница с информацией о компании.
 href="index.html">Вернуться на главную

Таким образом получается уже небольшой многостраничный сайт.

Отдельный файл оформления

Чтобы не писать стили внутри каждой страницы, обычно создают отдельный текстовый файл:

style.css

Например:

CSS




body {
    font-family: Arial, sans-serif;
    background-color: #eeeeee;
}
h1 {
    color: darkblue;
}
p {
    font-size: 18px;
}

А в HTML-файле подключают его внутри :

HTML