Введение в HTML
HTML (HyperText Markup Language) - это стандартный язык разметки для создания веб-страниц. Он описывает структуру веб-страницы и состоит из серии элементов, которые сообщают браузерам, как отображать контент.
Основные понятия HTML
Элементы HTML - это строительные блоки HTML-страниц. Каждый элемент состоит из:
- Открывающего тега
- Содержимого
- Закрывающего тега
Структура HTML-документа
Каждый HTML-документ имеет базовую структуру:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>
Основы CSS
CSS (Cascading Style Sheets) используется для стилизации HTML-элементов. CSS описывает как элементы должны отображаться на экране, на бумаге, или в других медиа.
Способы добавления CSS
- Внешняя таблица стилей (рекомендуется)
- Внутренняя таблица стилей
- Inline-стили (не рекомендуется)
Примеры кода
Вот пример простого CSS для стилизации кнопки:
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
А это пример использования CSS-класса в HTML: <button class="button">Нажми меня</button>
SEO-советы
Для улучшения SEO вашего сайта следуйте этим рекомендациям:
- Используйте семантические HTML-теги (
<header>
,<nav>
,<main>
,<section>
,<article>
,<footer>
) - Оптимизируйте изображения
- Создавайте качественный контент
- Используйте правильную структуру заголовков
Полезные ресурсы для изучения: Документация MDN по HTML , Документация MDN по CSS , База знаний Era.Host
Заключение
HTML и CSS - это фундаментальные технологии для создания веб-сайтов. Освоив их, вы сможете создавать красивые и функциональные веб-страницы. Практикуйтесь регулярно и не бойтесь экспериментировать!