Основные примеры HTML

Базовые примеры HTML

В этой главе показаны несколько базовых примеров HTML. Ничего страшного, если некоторые теги вам ещё незнакомы; они объясняются в следующих главах.

Документы HTML

Каждый HTML-документ должен начинаться с объявления типа документа: <!DOCTYPE html>.

Сам документ начинается с <html> и заканчивается </html>. Видимая часть страницы размещается между <body> и </body>.

Пример

Базовый HTML-документ с заголовком и абзацем.

Базовый HTML-документ с doctype, html и body, содержащий h1 "Мой первый заголовок" и абзац "Мой первый абзац."

> Результат: полная HTML-страница

Prompt

Базовый HTML-документ с doctype, html и body, содержащий h1 "Мой первый заголовок" и абзац "Мой первый абзац."

Результат: полная 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>

Объявление <!DOCTYPE>

Объявление <!DOCTYPE> сообщает браузеру тип документа, что помогает ему правильно отобразить страницу.

Оно должно встречаться только один раз, в самом начале страницы, до любых HTML-тегов. Оно не чувствительно к регистру.

Doctype HTML5

Объявление doctype, используемое для HTML5.

<!DOCTYPE html>

Заголовки HTML

Заголовки HTML создаются с помощью тегов от <h1> до <h6>. <h1> — самый важный заголовок, а <h6> — наименее важный.

Пример

Три заголовка убывающей важности.

Страница с тремя HTML-заголовками убывающей важности: h1 "Это заголовок 1", h2 "Это заголовок 2" и h3 "Это заголовок 3".

> Результат: полная HTML-страница

Prompt

Страница с тремя HTML-заголовками убывающей важности: h1 "Это заголовок 1", h2 "Это заголовок 2" и h3 "Это заголовок 3".

Результат: полная 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>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>

</body>
</html>

Абзацы HTML

Абзацы HTML создаются с помощью тега <p>.

Пример

Два абзаца, каждый в собственном теге <p>.

Страница с двумя абзацами: "Это абзац." и "Это другой абзац.", каждый в своём теге p.

> Результат: полная HTML-страница

Prompt

Страница с двумя абзацами: "Это абзац." и "Это другой абзац.", каждый в своём теге p.

Результат: полная 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>

<p>Это абзац.</p>
<p>Это другой абзац.</p>

</body>
</html>

Ссылки HTML

Ссылки HTML создаются с помощью тега <a>. Назначение ссылки задаётся в атрибуте href. Атрибуты дают дополнительную информацию об элементе, и вы узнаете о них больше в одной из следующих глав.

Пример

Ссылка на сайт PromptCookbook.

Страница с одной ссылкой, созданной с помощью тега a, текст "Это ссылка", указывающей на https://prompt-cookbook.com с помощью атрибута href.

> Результат: полная HTML-страница

Prompt

Страница с одной ссылкой, созданной с помощью тега a, текст "Это ссылка", указывающей на https://prompt-cookbook.com с помощью атрибута href.

Результат: полная 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>

<a href="https://prompt-cookbook.com">Это ссылка</a>

</body>
</html>

Изображения HTML

Изображения HTML создаются с помощью тега <img>. Исходный файл (src), альтернативный текст (alt), width и height задаются как атрибуты.

Пример

Изображение с источником, alt-текстом, шириной и высотой.

Страница с изображением, созданным с помощью тега img, src "PromptCookbook.jpg", alt-текст "PromptCookbook", ширина 104 и высота 142.

> Результат: полная HTML-страница

Prompt

Страница с изображением, созданным с помощью тега img, src "PromptCookbook.jpg", alt-текст "PromptCookbook", ширина 104 и высота 142.

Результат: полная 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>

<img src="PromptCookbook.jpg" alt="PromptCookbook" width="104" height="142">

</body>
</html>

Как посмотреть исходный код HTML

Вы можете посмотреть HTML-код, лежащий в основе любой веб-страницы. Чтобы посмотреть исходный код, нажмите CTRL + U или щёлкните правой кнопкой мыши по странице и выберите «View Page Source»; откроется новая вкладка с HTML-кодом страницы.

Чтобы изучить отдельный элемент, щёлкните по нему правой кнопкой мыши и выберите «Inspect». Это покажет и HTML, и CSS, и вы даже можете редактировать их на лету в открывшейся панели.