Главная » Урок 2: Основы HTML

Урок 2: Основы HTML

 
 
 

Урок 2: Основы HTML

Цели урока

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

Что такое HTML?

HTML (HyperText Markup Language) - это язык разметки, используемый для создания структуры веб-страниц. С его помощью вы определяете, какой контент будет на странице и как он будет организован. HTML использует специальные элементы, называемые "тегами", для определения различных частей страницы.

Основные структурные элементы HTML

Элемент <html>

Каждый HTML-документ должен начинаться с элемента , который определяет начало и конец документа.

				
					<!DOCTYPE html>
<html>
  <!-- Содержание документа идет здесь -->
</html>

Элемент <head>

Элемент <head> содержит метаданные документа, такие как заголовок страницы, подключаемые стили и мета-теги.

				
					<head>
  <title>Заголовок страницы</title>
  <!-- Дополнительные мета-теги и стили идут здесь -->
</head>

Элемент <body>

Элемент <body> содержит видимое содержание веб-страницы, такое как текст, изображения и другие элементы.

				
					<body>
  <h1>Привет, мир!</h1>
  <p>Это пример веб-страницы.</p>
  <!-- Дополнительное содержание идет здесь -->
</body>

Основные HTML-теги

Заголовки <h1>, <h2>, <h3>, ...

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

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

Параграфы <p>

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

				
					<p>Это пример абзаца текста.</p>

Элемент <a>

Элемент <a> используется для создания абзацев текста на странице. 

				
					<a href="https://www.example.com">Перейти на сайт</a>

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

Элемент <img> используется для вставки изображений на страницу.

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

Списки <ul>, <ol>, <li>

С помощью элементов <ul>(ненумерованный список) и <ol> (нумерованный список) можно создавать списки, а элемент <li> - элементы списка.

				
					<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

<ol>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ol>

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

Вот пример базовой веб-страницы, использующей описанные выше элементы:

				
					<!DOCTYPE html>
<html>
<head>
  <title>Моя первая веб-страница</title>
</head>
<body>
  <h1>Добро пожаловать на мою веб-страницу</h1>
  <p>Это пример текста на веб-странице. Вот ссылка на <a href="https://www.example.com">сайт Example.com</a>.</p>
  <img decoding="async" src="image.jpg" alt="Пример изображения">
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</body>
</html>

Заключение

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