ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML БОЛЬШЕ 🔍 КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ

Что такое HTML?

❮ Prev Next ❯

HTML - Hypertext Markup Language (язык разметки гипертекстовых документов) — стандартный язык разметки для создания веб-страниц и веб-приложений. Вместе с каскадными таблицами стилей (CSS) и языком программирования JavaScript, этот язык создаёт триаду основных технологий для всемирной паутины.

HTML не является языком программирования. С помощью специальных меток - тегов HTML - производится размещение различных объектов на веб-странице - заголовков, текста, изображений, кнопок, списков и т.д. и создаётся общая структура веб-документов (скелет). Оформление (стилизация) этих объектов производится с помощью CSS.

Что такое HTML?

HTML расшифровывается как Hyper Text Markup Language - язык гипертекстовой разметки

HTML - это стандартный язык разметки веб-страниц

HTML элементы являются строительными блоками HTML-страниц

HTML элементы представлены <> тегами

HTML Элементы

HTML элемент представляет собой тег начальный и тег конечный с содержимым между ними:

<h1>Это заголовок</h1>
Начальный тег Элемент содержимое Конечный тег
<h1> Это заголовок </h1>
<p> Это параграф. </p>

HTML Атрибуты

  • HTML элементы могут иметь атрибуты
  • Атрибуты предоставляют дополнительную информацию об элементе
  • Атрибуты входят в пары имя / значение, такие как charset="utf-8"

Простой HTML документ

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>Название страницы</title>

<body>
   <h1>Это заголовок</h1>
   <p>Это параграф.</p>
   <p>Это другой параграф.</p>
</body>

</html>

Попробуйте сами »

Объяснение примера

HTML-элементы являются строительными блоками HTML-страниц.

  • Объявление <!DOCTYPE html> определяет этот документ как HTML5
  • Элемент <html> является корневым элементом HTML страницы
  • Атрибут lang определяет язык документа
  • Элемент <meta> содержит метаинформацию о документе
  • Атрибут charset определяет набор символов, используемый в документе
  • Элемент <title> определяет заголовок документа
  • Элемент <body> содержит видимое содержимое страницы
  • Элемент <h1> определяет большой заголовок
  • Элемент <p> определяет параграф

HTML Документы

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

Сам HTML-документ начинается с тега <html> и заканчивается тегом </html>.

Видимая часть документа HTML находится между тегом <body> и тегом </body>.

HTML Структура документа

Ниже приведена визуализация HTML-документа (структура HTML-страницы):

<html>
<head>
<title>Название страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</body>
</html>

Примечание: Только содержимое внутри секции <body> (белая область в середине) отображается в браузере.

HTML Заголовки

HTML заголовки определяются тегами от <h1> до <h6>.

Тег <h1> определяет наиболее важный заголовок. Тег <h6> определяет наименее важный заголовок: 

Пример

<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
Попробуйте сами »

HTML Параграфы

HTML параграф определяется с помощью тегов <p>:

Пример

<p>Это параграф.</p>
<p>Это другой параграф.</p>
Попробуйте сами »

HTML Ссылки

HTML ссылки определяются с помощью тегов <a>:

Пример

<a href="https://www.w3schools.com">Это ссылка</a>
Попробуйте сами »

Назначение ссылки указывается в атрибуте href.

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

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

Исходный файл (src), алтернативный текст (alt), width и height предоставляются в качестве атрибутов:

Пример

<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Попробуйте сами »

HTML Кнопки

HTML кнопки определяются с помощью тегов <button>:

Пример

<button>нажми меня</button>
Попробуйте сами »

HTML Списки

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

Пример

<ul>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ul>
Попробуйте сами »

HTML Таблицы

HTML таблицы определяются с помощью тега <table>.

Строки таблицы определяются с помощью тегов <tr>.

Заголовки таблицы определяются с помощью тегов <th> (жирный и центрированный по умолчанию).

Ячейки таблицы (с данными) определяются с помощью тегов <td>.

Пример

<table>
  <tr>
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Вася</td>
    <td>Пупкин</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Ева</td>
    <td>Браун</td>
    <td>94</td>
  </tr>
</table>
Попробуйте сами » Из CSS »

Программирование HTML

Каждый HTML элемент может иметь атрибуты.

Для веб-разработки и программирования наиболее важными атрибутами являются id и class. Эти атрибуты часто используются для обработки программных веб-страниц.

Атрибут Пример
id <table id="table01"
class <p class="normal">
style <p style="font-size:16px">
data- <div data-id="500">
onclick <input onclick="myFunction()">
onmouseover <a onmouseover="this.setAttribute('style','color:red')">

Полный HTML Учебник

Это было краткое описание того, что такое HTML.

Для полного прохождения курса и изучения основ HTML перейдите на HTML Учебник на нашем сайте.

Для ознакомления с полным справочником HTML тегов перейдите на Полный справочник HTML тегов на нашем сайте.

❮ Prev Next ❯