Этот урок посвящен созданию шапки и футера веб-сайта. Рассмотрим создание необходимых файлов и папок, добавление базовой метаинформации и favicon.
Подготовка файлов и папок
Создайте новый документ в текстовом редакторе. Затем создайте папку (например, www) для хранения материалов сайта. Внутри www создайте папку img для изображений (favicon).
Сохраните документ как index.html в папке www. Создайте папку css в www для хранения стилей. Создайте и сохраните новый документ как style.css в папке css.
Базовая структура HTML и мета-теги
Начнём с указания типа документа: <!DOCTYPE html>. Этот тег указывает на использование HTML5.
Основная структура HTML-документа:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Внутри <head> добавим мета-теги:
- Кодировка: <meta charset="utf-8"> — обеспечивает поддержку различных символов, включая кириллицу.
- Ключевые слова (keywords): <meta name="keywords" content="тест, сайт, test, site"> — для поисковой оптимизации. Замените примеры на ключевые слова вашего сайта.
- Описание (description): <meta name="description" content="Это тестовый сайт."> — краткое описание сайта для поисковых систем.
- Подключение стилей: <link rel="stylesheet" type="text/css" href="css/style.css"> — подключает style.css.
Favicon и заголовок страницы
Добавим favicon (значок сайта) и заголовок страницы:
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<title>Тестовый сайт</title>
Для favicon используйте изображение в формате ICO (например, 32×32 пикселя) и сохраните его как favicon.ico в папке img. Заголовок отображается в заголовке окна браузера и в результатах поиска. Он не должен быть слишком длинным (до 260 символов).
В этом уроке создана базовая структура HTML-документа, добавлены мета-теги и подключен файл стилей. В следующем уроке продолжим работу над шапкой и футером и добавим стили.