Урок

Веб-разработка 

Введение в HTML

Добро пожаловать в мир веб-разработки! Этот урок познакомит вас с фундаментальными строительными блоками интернета: HTML. HTML расшифровывается как HyperText Markup Language (язык гипертекстовой разметки), и это стандартный язык для создания веб-страниц. Представьте его как скелет веб-сайта – он обеспечивает структуру и контент.

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

Структура HTML: Основной шаблон

Каждый HTML-документ следует базовой структуре. Эта структура сообщает браузеру, что он читает HTML-файл, и предоставляет основные элементы для страницы. Вот минимальный HTML-шаблон:

            
<!DOCTYPE html>
<html>
<head>
    <title>Заголовок страницы</title>
</head>
<body>
    <!-- Содержимое страницы здесь -->
</body>
</html>

Давайте разберем каждую часть:

  • <!DOCTYPE html>: Эта декларация сообщает браузеру, что документ является документом HTML5. Это всегда должно быть первым в вашем HTML-файле.
  • <html>: Это корневой элемент страницы. Все остальное находится внутри этого тега.
  • <head>: Этот раздел содержит метаинформацию об HTML-документе, такую как заголовок, набор символов и ссылки на таблицы стилей.
  • <title>: Указывает заголовок для HTML-страницы (который отображается в заголовке браузера или вкладке).
  • <body>: Здесь находится все содержимое вашей веб-страницы – текст, изображения, ссылки и все остальное, что видят пользователи.

HTML-теги: Элементы и атрибуты

HTML использует теги для определения элементов. Большинство тегов идут парами: открывающий тег и закрывающий тег. Например, <p> является открывающим тегом для абзаца, а </p> является закрывающим тегом.

Некоторые теги являются самозакрывающимися, что означает, что им не нужен отдельный закрывающий тег. Примером является тег <br>, который создает разрыв строки. Теги также могут иметь атрибуты, которые предоставляют дополнительную информацию об элементе. Например, тег <img> (для изображений) использует атрибут src для указания источника изображения.

Заголовки: <h1> до <h6>

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

Вот пример:

            
<h1>Это заголовок уровня 1</h1>
<h2>Это заголовок уровня 2</h2>
<h3>Это заголовок уровня 3</h3>

Абзацы: <p>

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

Пример:

            
<p>Это абзац текста. Он может содержать несколько предложений и слов.</p>
<p>Это другой абзац. Абзацы автоматически разделяются пустой строкой.</p>

Списки: <ul> и <ol>

HTML предоставляет два типа списков: неупорядоченные списки (<ul>) и упорядоченные списки (<ol>). Неупорядоченные списки используются для элементов, которые не имеют определенного порядка, а упорядоченные списки используются для элементов, которые должны быть в определенной последовательности. Элементы списка определяются с помощью тега <li>.

Вот примеры обоих:

            
<ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>

<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
</ol>

Ссылки: <a>

Ссылки позволяют пользователям перемещаться между различными веб-страницами или разделами в пределах одной страницы. Тег <a> определяет гиперссылку. Наиболее важным атрибутом является href, который указывает URL-адрес ссылки.

Пример:

            
<a href="https://www.example.com">Посетите Example.com</a>

Атрибут target можно использовать для указания того, где открывать связанный документ. target="_blank" открывает ссылку в новой вкладке или окне.

Изображения: <img>

Тег <img> используется для встраивания изображений в веб-страницу. Атрибут src указывает путь к файлу изображения. Атрибут alt предоставляет альтернативный текст для изображения, который отображается, если изображение не может быть загружено, и важен для обеспечения доступности.

Пример:

            
<img src="image.jpg" alt="Описание изображения">

Создание простой структуры веб-страницы

Теперь давайте объединим все, что мы узнали, чтобы создать базовую структуру веб-страницы. Мы включим заголовок, абзац, список, ссылку и изображение.

Вот полный HTML-код:

            
<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Добро пожаловать на мою веб-страницу!</h1>
    <p>Это простая веб-страница, созданная с использованием основ HTML.</p>
    <ul>
        <li>Изучите HTML</li>
        <li>Практикуйте кодирование</li>
        <li>Создавайте потрясающие веб-сайты</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Посетите Google</a>
    <img src="placeholder.jpg" alt="Изображение-заполнитель">
</body>
</html>

Не забудьте заменить "placeholder.jpg" фактическим путем к файлу изображения. Сохраните этот код как HTML-файл (например, "index.html") и откройте его в своем веб-браузере, чтобы увидеть результат. Теперь у вас есть полностью функциональная HTML-страница!

-/- ✔: 0, ✖: 0