Александр Сивичев
Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер
Глава 1: Введение в HTML
1. Что такое HTML?
HTML (HyperText Markup Language) – это язык разметки, используемый для создания структуры веб-страниц. Он определяет, какие элементы должны быть на странице, а также как они должны быть структурированы, но не отвечает за оформление или функциональность. HTML является основой всех веб-страниц, предоставляя их структуру, в то время как CSS и JavaScript управляют внешним видом и поведением.
История HTML:
HTML был впервые предложен в 1991 году британским ученым Тимом Бернерс-Ли. Он создал HTML в рамках разработки Всемирной паутины (World Wide Web), чтобы упрощенно разметить текстовую информацию и предоставить гиперссылки между различными документами. Первый стандарт HTML был достаточно прост, и с тех пор он прошел несколько этапов эволюции, добавляя новые возможности и улучшая функциональность. Сегодня HTML является важнейшим стандартом в веб-разработке.
Основные особенности HTML:
Язык разметки: HTML используется для описания структуры веб-страниц, а не для их визуального оформления или логики.
Теговая структура: HTML использует теги, которые обрамляют элементы на странице, такие как текст, изображения, таблицы и формы.
Гипертекст: HTML позволяет создавать гиперссылки между различными веб-страницами и документами.
Мультимедийные элементы: HTML поддерживает вставку изображений, видео, аудио и других мультимедийных объектов.
Применение HTML в веб-разработке:
HTML служит основой для создания всех веб-страниц. Он используется для:
Структурирования контента (заголовки, параграфы, списки и т. д.).
Вставки изображений и мультимедийных объектов.
Создания ссылок для навигации по веб-страницам.
Формирования интерактивных элементов (например, кнопок, форм для отправки данных).
2. Структура HTML-документа
HTML-документ состоит из набора тегов, которые определяют его структуру и содержимое. Каждый документ должен начинаться с объявления типа документа и заканчивается тегом </html>.
Основные теги HTML:
<html>: Начальный и завершающий тег, который оборачивает весь HTML-документ.
<head>: Содержит метаинформацию о документе, такую как теги для подключения стилей или скриптов.
<title>: Задает название страницы, которое отображается в заголовке браузера.
<body>: Содержит основной контент веб-страницы (текст, изображения, ссылки, формы и т. д.).
Пример структуры документа:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница на HTML.</p>
</body>
</html>
Введение в атрибуты тегов:
Атрибуты в HTML используются для задания дополнительных параметров элементов. Они могут указывать на различные свойства элемента, такие как идентификатор, класс, источник изображения или ссылка. Атрибуты всегда записываются внутри открывающего тега и имеют формат name="value".
Пример атрибута:
<a href="https://example.com">Перейти на сайт</a>
В данном примере атрибут href задает URL для перехода по ссылке.
3. Создание первого HTML-документа
Основы синтаксиса HTML:
Теги в HTML должны быть заключены в угловые скобки (< >).
Большинство тегов имеют пару: открывающий (<tag>) и закрывающий (</tag>).
Некоторые теги, например <img> или <br>, являются самозакрывающимися и не требуют закрывающего тега.
HTML не чувствителен к регистру, но принято использовать теги в нижнем регистре.
Ваш первый веб-документ:
Вот пример простого HTML-документа:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Привет, мир!</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Добро пожаловать в мир веб-разработки.</p>
<a href="https://example.com">Перейти на сайт</a>
</body>
</html>
Этот код создаст веб-страницу с заголовком "Привет, мир!" и текстом, а также ссылкой на внешний сайт.
Глава 2: Основы HTML
1. Теги заголовков
Теги заголовков в HTML используются для разделения текста на логические блоки и для структурирования информации. Они играют важную роль в улучшении восприятия контента и для SEO (поисковая оптимизация).
Разделение текста на заголовки (h1-h6):
<h1>: Главный заголовок страницы. На одной странице должен быть только один тег <h1>.
<h2>: Подзаголовок второго уровня. Используется для подразделов, разделяющих контент на более мелкие части.
<h3> – <h6>: Заголовки более низких уровней. Эти теги используются для дальнейшего подразделения контента.
Пример использования заголовков:
<h1>Главная страница</h1>
<h2>О нас</h2>
<h3>Наша миссия</h3>
<h4>Цели</h4>
<h5>Основные задачи</h5>
<h6>Малые задачи</h6>
Правильное использование заголовков:
Использование тега <h1> для основного заголовка страницы.
Заголовки с уровнем <h2> и ниже должны использоваться для организации контента и структурирования текста.
Использование заголовков помогает улучшить восприятие контента как пользователями, так и поисковыми системами.
2. Абзацы и текстовые элементы
HTML предоставляет теги для разделения текста на абзацы, а также для различных типов форматирования текста.
Теги <p>, <br>, <hr> и другие:
<p>: Тег для абзацев текста. Он автоматически создает отступы перед и после текста.
<p>Это абзац текста.</p>
<br>: Перевод строки. Используется для вставки разрывов строк в тексте.
Это первый абзац.<br>А это второй абзац.
<hr>: Горизонтальная линия, используется для разделения контента.
<hr>
<b>: Жирный текст.
<b>Жирный текст</b>
<i>: Курсивный текст.
<i>Курсивный текст</i>
<u>: Подчеркнутый текст.
<u>Подчеркнутый текст</u>
Форматирование текста: жирный, курсив, подчеркивание:
Жирный текст: Используется для выделения важной информации.
<b>Это важная информация</b>
Курсив: Используется для выделения текста в контексте или для указания названий.
<i>Это курсивный текст</i>
Подчеркивание: Чаще используется для выделения ссылок, но также можно применять к обычному тексту.
<u>Это подчеркнутый текст</u>
3. Списки
Списки – это удобный способ представления информации в виде элементов, каждый из которых является частью общего перечня.
Нумерованные и маркированные списки:
Нумерованные списки используют тег <ol> и внутри него теги <li> для каждого элемента.
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
Маркированные списки используют тег <ul> и аналогично используют теги <li> для каждого элемента.
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
Вложенные списки:
Списки могут быть вложенными друг в друга, что позволяет создавать многоуровневые структуры.
<ul>
<li>Первый пункт
<ul>
<li>Вложенный пункт 1</li>
<li>Вложенный пункт 2</li>
</ul>
</li>
<li>Второй пункт</li>
</ul>
4. Ссылки и якоря
Ссылки – это важная часть HTML, с помощью которых можно перемещаться по страницам или внутри одной страницы.
Тег <a> для создания ссылок:
<a> используется для создания гиперссылок. Атрибут href указывает, на какой URL или якорь нужно перейти.
<a href="https://example.com">Перейти на сайт</a>
Атрибут href и относительные/абсолютные пути:
Абсолютный путь указывает полный URL, включая протокол (например, https://).
<a href="https://example.com">Перейти на сайт</a>
Относительный путь указывает путь относительно текущего местоположения файла.
<a href="page.html">Перейти на другую страницу</a>
Внутренние и внешние ссылки:
Внутренние ссылки – это ссылки на страницы или разделы внутри того же сайта.
Внешние ссылки – это ссылки на ресурсы, расположенные на других веб-сайтах.
5. Таблицы
Таблицы в HTML позволяют представлять данные в виде строк и столбцов.
Основы создания таблиц с использованием <table>, <tr>, <td>:
<table>: Определяет таблицу.
<tr>: Определяет строку таблицы.
<td>: Определяет ячейку в таблице.
Пример таблицы:
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Работа с таблицами (заголовки, слияние ячеек):
<th>: Заголовок таблицы.
colspan: Атрибут для объединения ячеек по горизонтали.
rowspan: Атрибут для объединения ячеек по вертикали.
Пример слияния ячеек:
<table>
<tr>
<th colspan="2">Заголовок</th>
</tr>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
</tr>
</table>
6. Изображения
Изображения могут быть вставлены в документ с помощью тега <img>.
Вставка изображений с помощью тега <img>:
Тег <img> используется для вставки изображений на страницу.
Атрибуты src, alt, title:
src: Указывает путь к изображению.
alt: Описание изображения для пользователей, которые не могут его увидеть.
title: Показывает всплывающую подсказку при наведении на изображение.
Пример вставки изображения:
<img src="image.jpg" alt="Описание изображения" title="Подсказка при наведении">
Глава 3: Формы в HTML
1. Основы создания форм
Формы в HTML используются для сбора данных от пользователей, таких как текст, изображения или файлы, и отправки их на сервер для обработки.
На этой странице вы можете прочитать онлайн книгу «Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер», автора Александра Сивичева. Данная книга имеет возрастное ограничение 18+, относится к жанрам: «Программирование», «Интернет». Произведение затрагивает такие темы, как «разработка программного обеспечения», «обучение программированию». Книга «Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер» была написана в 2025 и издана в 2025 году. Приятного чтения!
О проекте
О подписке