HTML - Основные теги: Пособие для начинающих

Здравствуйте, будущие веб-разработчики! Я рад быть вашим проводником в увлекательное путешествие в мир HTML. Как某人, кто teaches computer science ( преподаёт информатику) уже более десяти лет, я могу сказать, что HTML resembles the skeleton of a website ( является скелетом веб-сайта) - он предоставляет структуру, на основе которой всё остальное строится. Так что погружаемся и explored the basic tags ( исследуем основные теги), которые将成为 основой ваших навыков веб-разработки!

HTML - Basic Tags

Что такое HTML?

HTML означает HyperText Markup Language ( Гипертекстовый язык разметки). Это стандартный язык, используемый для создания веб-страниц. Представьте его как чертежи для дома - он tells the browser how to structure and present the content on a webpage ( говорит браузеру, как структурировать и представлять контент на веб-странице).

Анатомия HTML-документа

Before we jump into specific tags ( перед тем как перейти к конкретным тегам), давайте рассмотрим базовую структуру 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>
<!-- Your content goes here -->
</body>
</html>

Разберём это:

<!DOCTYPE html> деклалирует, что это HTML5-документ.
<html> является root element ( корневым элементом) HTML-страницы.
<head> содержит meta information ( метаданные) о документе.
<body> defines the document's body ( определяет тело документа), которое содержит все видимые элементы.

Примеры основных тегов HTML

Теперь давайте рассмотрим некоторые из самых_common HTML tags ( часто используемых тегов HTML). Я предоставлю примеры и explanations ( объяснения) для каждого.

1. Заголовки

HTML предоставляет шесть уровней заголовков, от <h1> ( самого важного) до <h6> ( наименее важного).

<h1>Это главный заголовок</h1>
<h2>Это次要 заголовок</h2>
<h3>Это tertiary heading (三级标题)</h3>

Эти теги не только делают текст больше, но и помогают поисковым системам понять структуру вашего контента. Представьте их как chapter titles in a book (标题一本书)!

2. Абзацы

Тег <p> используется для определения абзацев.

<p>Это абзац. Он может содержать несколько предложений и даже занимать несколько строк в вашем HTML-коде, но будет отображаться как один блок текста в браузере.</p>

Совет: Always use <p> tags for paragraphs ( Всегда используйте теги <p> для абзацев), а не только для отступов. Это помогает с доступностью и SEO!

3. Ссылки

Ссылки создаются с помощью тега <a> ( якорь).

<a href="https://www.example.com">Нажмите здесь, чтобы посетить Example.com</a>

Атрибут href specifies the URL of the page the link goes to (указывает URL страницы, на которую ведёт ссылка). Помните, что ссылки resemble doors in your website ( являются дверями на вашем веб-сайте) - они позволяют пользователям navigates from one page to another ( переходить с одной страницы на другую)!

4. Изображения

Изображения вставляются с помощью тега <img>.

<img src="cat.jpg" alt="Котёнок сидит на подоконнике">

Атрибут src specifies the path to the image file (указывает путь к файлу изображения), а alt предоставляет alternative text (альтернативный текст) для screen readers (скринридеров) или если изображение не удалось загрузить. Всегда включайте описательный альтернативный текст - это как dares your images a voice (даёт вашим изображениям голос)!

5. Списки

HTML поддерживает какordered (порядковые), так иunordered (маркеры) списки.

Unordered list (маркерный список):

<ul>
<li>Яблоки</li>
<li>Бананы</li>
<li>Вишни</li>
</ul>

Ordered list (порядковый список):

<ol>
<li>Проснуться</li>
<li>Почистить зубы</li>
<li>Завтракать</li>
</ol>

Списки великолепны дляorganizing information (организации информации). Мне нравится думать о них как о bullet points in a presentation (маркерах в презентации)!

6. Emphasis and Strong Importance ( акцент и сильное значение)

Используйте <em> для акцента (обычно отображается курсивом) и <strong> для strong importance (сильного значения, обычно отображается жирным шрифтом).

<p>Мне <em>очень</em> нравится преподавать HTML. Это <strong>критически</strong> важно для веб-разработки!</p>

Эти теги добавляют значение вашему тексту, а не только стиль. Это как добавление тона и акцента вашему голосу при разговоре!

7. Line Breaks and Horizontal Rules ( Разрывы строк и горизонтальные линии)

Иногда вам нужно добавить разрыв строки, не начиная новый абзац. Вот где comes in <br> (применяется тег <br>):

<p>Розы красные,<br>Сирени синие,<br>HTML классный,<br>И вы такие же!</p>

Чтобы добавить горизонтальную линию, используйте тег <hr>:

<p>Это конец одного раздела.</p>
<hr>
<p>Это начало другого раздела.</p>

Думайте о <br> как о soft return (мягком Return) на вашей клавиатуре, и <hr> как о drawing a line on a piece of paper to separate sections (черчении линии на листе бумаги для разделения разделов).

HTML Methods Table ( Таблица методов HTML)

Вот таблица, summarizing the basic HTML tags we've covered ( резюмирующая основные теги HTML, которые мы рассмотрели):

Тег	Описание	Пример
`<h1>` to `<h6>`	Заголовки	`<h1>Основной заголовок</h1>`
`<p>`	Абзац	`<p>Этот - абзац.</p>`
`<a>`	Ссылка	`<a href="https://example.com">Ссылка</a>`
`<img>`	Изображение	`<img src="image.jpg" alt="Описание">`
`<ul>`	Маркерный список	`<ul><li>Элемент</li></ul>`
`<ol>`	Порядковый список	`<ol><li>Первый</li></ol>`
`<em>`	Akcent (Акцент)	`<em> выделенный текст</em>`
`<strong>`	Strong Importance (Сильное значение)	`<strong> важный текст</strong>`
`<br>`	Разрыв строки	`Строка 1<br>Строка 2`
`<hr>`	Горизонтальная линия	`<hr>`

Remember, HTML is all about structure and meaning ( Помните, что HTML - это всё о структуре и значении). As you practice, you'll start to see how these basic building blocks come together to create entire web pages ( По мере практики вы начнёте видеть, как эти базовые строительные блоки собираются в целые веб-страницы). It's like learning the alphabet before writing your first story - once you master these basics, a whole world of web development opens up to you ( Это какучение алфавита перед написанием первой истории - как только вы овладеете этими основами, перед вами откроется целый мир веб-разработки).

I hope this guide has been helpful in starting your HTML journey ( Надеюсь, это руководство помогло вам начать ваше путешествие в мир HTML). Keep practicing, stay curious, and don't be afraid to experiment ( Продолжайте практиковаться, оставайтесь любознательными и не бойтесь экспериментировать). Before you know it, you'll be creating amazing web pages that you can proudly share with the world ( Before you know it ( Before you know it), вы начнёте создавать потрясающие веб-страницы, которыми вы сможете гордиться и делиться с миром). Happy coding! (Счастливого кодирования!)

Credits: Image by storyset