Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
Сегодня мы создадим все папки и файлы, необходимые для сборки веб-сайта на HTML и CSS, а также подготовим домашнюю страницу – файл index.html – к HTML-контенту, который будем добавлять в следующих мануалах.
Требования
Если вы следовали всем мануалам из этой серии, для сборки вашего тестового сайта вы можете использовать каталог проекта css-practice, файл index.html, папки images и css и файл styles.css, которые вы создали ранее. Если вы выполнили не все мануалы и вам нужны инструкции по настройке базовой файловой системы, ознакомьтесь с нашим предыдущим мануалом из этой серии, Подготовка проекта CSS и HTML с помощью Visual Studio Code.
Примечание: Если вы хотите выбрать имена для папок или файлов самостоятельно, избегайте пробелов, специальных символов (например,!, #,% и т.п.) и заглавных букв, поскольку в дальнейшем такие имена могут вызвать проблемы. Также имейте в виду, что вам нужно будет изменить пути к файлам в некоторых командах, которые мы используем в оставшихся мануалах этой серии.
Сейчас у вас должна быть папка проекта css-practice, содержащая следующие папки и файлы:
- Папка css, содержащая файл styles.css.
- Пустая папка images.
- Файл index.html.
Сначала мы подготовим файл index.html для хранения контента, который мы будем добавлять в следующих мануалах.
Подготовка файла index.html
Чтобы подготовить файл index.html в качестве домашней страницы веб-сайта, нужно добавить в него несколько важных строк HTML. Эти строки будут служить инструкциями для браузера и не будут отображаться на странице сайта. Удалите все, что есть на данный момент в файле index.html (если у вас остался в нем контент из предыдущих мануалов), и добавьте в документ следующий фрагмент кода:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First CSS Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
</body>
</html>
Не забудьте указать свой заголовок сайта вместо нашего условного. Затем сохраните файл index.html. Прежде чем продолжить, давайте кратко рассмотрим только что добавленные строки по порядку, чтобы понять, как они работают:
- Объявление <!DOCTYPE html> сообщает браузеру, какой тип HTML используется в этом документе. Это значение важно объявить, поскольку существует несколько версий стандарта HTML, и браузер должен понимать, какие из них использовать в этом конкретном случае. В этом объявлении html определяет текущий веб-стандарт HTML, то есть HTML5.
- Открывающий и закрывающий теги <html> сообщают браузеру, что весть находящийся между ними контент нужно интерпретировать как HTML. Сюда мы также добавили атрибут lang, который задает язык веб-страницы. В этом примере мы выбрали английский (с помощью тега en). Полный список языковых тегов можно найти в реестре языковых тегов IANA.
- Открывающий и закрывающий теги <head> создают в HTML-документе раздел, который обычно содержит информацию о самой странице, а не контент. Браузеры не отображают информацию, которая хранится в разделе <head>.
- Тег <meta charset=”utf-8″> указывает, что в документе следует использовать набор символов UTF-8 (формат Unicode, который поддерживает большинство символов из разных письменных языков).
- Тег <title> сообщает браузеру имя веб-страницы. Этот заголовок отображается не на самой веб-странице, а на вкладке браузера и в результатах поиска. Если хотите, вы можете заменить My First CSS Site названием по вашему выбору.
- <link rel=”stylesheet” href=”css/styles.css”> сообщает браузеру, где найти таблицу стилей, содержащую правила. Если вы следовали мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code, ваша таблица стилей должна находиться в css/styles.css. Если вы создали собственную файловую систему, укажите правильный путь.
- Открывающий и закрывающий теги <body> будут содержать основной контент веб-страницы. В следующих мануалах мы добавим сюда HTML-контент.
Заключение
У вас есть все папки и файлы, необходимые для создания веб-сайта с помощью HTML и CSS. Также ваш файл index.html теперь содержит все необходимое, чтобы выступать в качестве домашней страницы веб-сайта. В следующем мануале вы узнаете, как будет устроен наш тестовый сайт и какие шаги мы предпримем для его создания.