HTML5 CSS3: Шапка и футер сайта (Урок 2/2)

Этот урок посвящен созданию шапки и футера веб-сайта. Рассмотрим создание необходимых файлов и папок, добавление базовой метаинформации и 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-документа, добавлены мета-теги и подключен файл стилей. В следующем уроке продолжим работу над шапкой и футером и добавим стили.

Что будем искать? Например,программа