Урок 1: Введение в HTML и основы CSS
Основы HTML
HTML (HyperText Markup Language) — это основной язык разметки для создания веб-страниц. Он используется для структурирования контента на веб-странице. HTML состоит из элементов, которые зак-
лючены в угловые скобки (< >). Эти элементы описывают различные части страницы, такие как заголовки, параграфы, ссылки, изображения и многое другое.
Параграфы в HTML
Параграфы — это один из основных элементов HTML, используемых для представления текста. Для создания параграфа используется элемент <p>. Вот простой пример использования:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример параграфа</title>
</head>
<body>
<p>Это пример параграфа на HTML.</p>
<p>Вот ещё один параграф.</p>
</body>
</html>
В результате мы получим два параграфа текста на веб-странице.
Основы CSS
CSS (Cascading Style Sheets) — это язык, используемый для описания внешнего вида и форматирования HTML-документов. CSS позволяет изменять цвет текста, шрифты, отступы, расположение элементов и многое другое.
Подключение CSS
CSS можно подключить к HTML-документу несколькими способами:
Встроенные стили — стили применяются непосредственно к HTML-элементу с помощью атрибута style.
Внутренние стили — стили размещаются в секции <style> внутри HTML-документа.
Внешние стили — стили хранятся в отдельном файле и подключаются к HTML-документу с помощью элемента <link>.
Пример использования всех трёх способов:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример CSS</title>
<style>
/* Внутренние стили */
p {
color: blue;
}
</style>
<link rel="stylesheet" href="styles.css"> <!-- Внешние стили -->
</head>
<body>
<p style="color: red;">Это параграф с встроенным стилем.</p>
<p>Это параграф с внутренним стилем.</p>
</body>
</html>
Содержимое файла styles.css:
p {
font-size: 16px;
line-height: 1.5;
}
Пример применения CSS
Теперь рассмотрим более сложный пример с использованием различных CSS-свойств:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример применения CSS</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
line-height: 1.6;
margin: 0 20px;
}
</style>
</head>
<body>
<h1>Добро пожаловать на наш сайт</h1>
<p>Этот сайт создан для демонстрации основ HTML и CSS.</p>
<p>Здесь вы можете узнать, как создавать и стилизовать веб-страницы.</p>
</body>
</html>
В этом примере мы использовали несколько CSS-свойств:
background-color — задает цвет фона для страницы.
font-family — определяет шрифт для текста на странице.
color — устанавливает цвет текста.
text-align — выравнивает текст по центру.
line-height — задает высоту строки для текста.
margin — устанавливает отступы вокруг элементов.
Заключение
В этом уроке мы рассмотрели основы HTML и CSS, включая создание параграфов и приме-
нение различных стилей. HTML предоставляет структуру для веб-страниц, тогда как CSS позволяет из-
менять их внешний вид.