Настройка CSS и HTML для вашего сайта: руководство

Preslav Dobrev2022-10-28 · 4 min read

Настройка CSS и HTML для вашего сайта: руководство

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

Это руководство познакомит вас с основами настройки файлов HTML и CSS для вашего веб-сайта. Давайте начнем!

Предварительные требования

Базовое понимание HTML и CSS.

Шаг 1 — Начальная настройка

Сначала мы создадим новый каталог проекта и назовем его demo-project :

mkdir demo-project

1	mkdir demo-project

Затем перейдите в созданный каталог с помощью команды cd :

cd demo-project

1	cd demo-project

В папке проекта давайте добавим следующие файлы, которые понадобятся нам для запуска нашего базового веб-сайта:

index.html : Этот файл будет содержать весь HTML-код.
styles.css : Здесь мы будем хранить все CSS-стили для оформления нашего веб-сайта.
images : Все необходимые изображения должны храниться в этой папке.

Теперь, когда мы создали каталог проекта и добавили необходимые файлы, давайте перейдем к следующему шагу и добавим HTML-содержимое в наш index.html на следующем шаге.

Шаг 2 — Добавление HTML-содержимого в файл index.html File

В файле index.html , который мы создали на предыдущем шаге, мы добавим вводный HTML-код. Эти базовые строки HTML будут служить инструкциями для браузера, но не будут отображаться на веб-странице.

Добавьте следующий блок кода в ваш файл index.html :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

Примечание: Убедитесь, что файл index.html пуст, прежде чем добавлять эти блоки кода. Также подумайте об изменении заголовка, как выделено в разделе <title> .

Давайте разберем используемые термины:

<!DOCTYPE html> : это объявление, сообщающее браузеру о типе HTML, используемом в HTML-документе.
- Поскольку доступно несколько версий стандартов HTML, указание DOCTYPE позволяет браузерам легко и без усилий определить версию HTML. Например, в этом руководстве мы используем последнюю версию HTML5.
<html> : этот тег сообщает браузеру, что содержимое внутри него должно обрабатываться как HTML. При открытии файла <html> не забудьте закрыть его с помощью тега </html> . Этот тег поддерживает атрибут lang , и вы можете указать язык веб-страницы. В нашем руководстве мы установили английский язык с помощью языкового тега en .
- Посетите IANA Language Subtag Registry, чтобы ознакомиться с другими доступными для использования языками.
<head> : создает раздел в HTML-документе и содержит информацию о веб-странице. Однако здесь нет подробного содержимого, и браузер не отображает никакую информацию в разделе head.
<meta charset="utf-8"> : указывает кодировку символов документа. Она должна быть в формате Юникод, то есть UTF-8, поддерживающем большинство известных письменных языков.
<title> : тег <title> сообщает браузеру название веб-страницы. Заголовок отображается на вкладке браузера, а также когда веб-сайт выводится в результатах поиска.
<link rel="stylesheet" href="css/styles.css"> : указывает браузеру таблицу стилей, содержащую стили CSS.
<body> : этот тег содержит основное содержимое веб-страницы. При использовании тега <body> не забудьте закрыть его с помощью тега </body> .

Шаг 3 — Стилизация с помощью CSS

В файле styles.css файл, добавьте стили в соответствии с потребностями вашего проекта. В этом примере добавьте следующие строки кода в ваш styles.css файл:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Мы наконец-то создали базовые файлы HTML и CSS, которые понадобятся нам для запуска нашего сайта. Кроме того, вы можете добавить изображения и сохранить их в папке images. Сохраните и закройте файл. После этого откройте index.html файл в вашем любимом веб-браузере, и вы увидите базовую страницу на своем экране.

Conclusion

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

Кроме того, вы можете найти другие руководства по HTML и CSS в нашем блоге:

Приятной работы!

Preslav Dobrev

Автор · CloudSigma

Preslav Dobrev — креативный дизайнер в CloudSigma, сосредоточенный на формировании последовательного корпоративного образа с помощью традиционных и инновационных маркетинговых каналов. Он умело сочетает художественное видение со стратегическим маркетингом, создавая убедительные истории бренда.