Введение
Добро пожаловать на наш курс по веб-разработке! В этом уроке мы познакомимся с основами HTML и CSS, двумя ключевыми технологиями, которые используются для создания веб-страниц. Понимание этих технологий поможет вам создать красивые, интерактивные и функциональные веб-сайты.
История HTML и CSS
HTML (HyperText Markup Language)
HTML, или язык разметки гипертекста, был разработан в конце 1980-х годов Тимом Бернерс-Ли для структурирования текста на веб-страницах. HTML позволяет определять различные элементы веб-страницы, такие как заголовки, параграфы, ссылки, изображения и многое другое. Вот пример базового HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>В начальные годы создания веб-страниц стилизация осуществлялась прямо внутри HTML-документов с помощью атрибутов тегов, таких как font, color, background и других. Например:
<p style="color: blue; font-size: 20px;">Этот текст синий и крупный.</p>Однако такой подход приводил к тому, что HTML-код становился перегруженным и трудно управляемым, особенно на больших веб-сайтах.
Появление CSS (Cascading Style Sheets)
CSS, или каскадные таблицы стилей, является языком стилей, используемым для описания внешнего вида и форматирования веб-страниц, написанных на языке разметки HTML. CSS был разработан для решения проблем, связанных с прямой стилизацией в HTML, и для улучшения управления внешним видом веб-страниц.
Преимущества использования CSS
Разделение контента и оформления
CSS позволяет отделить контент (HTML) от оформления (CSS), что делает код более чистым и понятным. Это упрощает процесс разработки и обслуживания веб-сайтов. Рассмотрим два примера: один без использования CSS, а другой с использованием CSS.
Пример без CSS:
<!DOCTYPE html>
<html>
<head>
<title>Пример без CSS</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Заголовок</h1>
<p style="font-size: 16px; line-height: 1.5;">Это пример параграфа без использования CSS.</p>
</body>
</html>Пример с CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Пример с CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Это пример параграфа с использованием CSS.</p>
</body>
</html>CSS (styles.css):
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}Повторное использование стилей
С помощью CSS можно определить стили в одном месте и применять их ко многим элементам или различным страницам, что значительно сокращает повтор кода. Например, если вы хотите изменить цвет всех заголовков на сайте, вам нужно будет изменить только один CSS-файл, а не каждый HTML-документ.
/* Стили для всех заголовков h1 на сайте */
h1 {
color: green;
font-family: Arial, sans-serif;
}Больше контроля над дизайном
CSS предоставляет гораздо более мощные и гибкие средства для управления макетом и внешним видом, включая сложные макеты с использованием сеток, медиа-запросов для адаптивного дизайна и многого другого.
Пример использования Flexbox для создания горизонтального меню:
<!DOCTYPE html>
<html>
<head>
<title>Горизонтальное меню</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</body>
</html>CSS (styles.css):
nav ul {
display: flex;
list-style-type: none;
padding: 0;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: black;
}Адаптивный дизайн
CSS позволяет создавать дизайн, который адаптируется к различным устройствам и размерам экранов, что стало критически важно в эпоху мобильных устройств. С помощью медиа-запросов можно изменять стили в зависимости от ширины экрана устройства.
Пример медиа-запроса:
/* Стили для экранов шириной до 600px */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}Практическая часть
Теперь давайте создадим простую веб-страницу с использованием HTML и CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница с CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Это моя первая веб-страница с использованием CSS.</p>
</body>
</html>CSS (styles.css):
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}Практические задания:
- Добавьте стили к заголовкам и параграфам, чтобы они выглядели привлекательно.
- Создайте навигационное меню с использованием CSS.
- Сделайте страницу адаптивной с помощью медиа-запросов.
Заключение
Понимание HTML и CSS является фундаментальным для любого веб-разработчика. В следующем уроке мы рассмотрим основы JavaScript, который добавит интерактивности вашим веб-страницам. Спасибо за внимание и до встречи на следующем уроке!