About Teletype
Join
@easy_it_training
October 28, 2023

Язык программирования html

HTML уроки с примерами в каждой главе

Что такое HTML?

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

  • HTML стенды для Hyper текст разметки языка
  • HTML Описывает структуру веб-страниц с помощью разметки
  • HTML элементы — это строительные блоки HTML-страниц
  • HTML элементы представлены тегами
  • HTML Метки: фрагменты содержимого, такие как "heading", "paragraph", "table", и так далее
  • Обозреватели не отображают HTML-теги, но используют их для визуализации содержимого страницы

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

<!DOCTYPE html>
<html>
<head>
<title>Название страницы</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Вот так это выглядит на странице сайта:

Пример объяснено

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

Теги HTML

HTML-теги — это имена элементов, окруженные угловыми скобками:

<имя тега>содержание идет здесь...</имя тега>

HTML теги обычно приходят в парах <p> , как и</p>

Первый тег в паре — это начальный тег, второй тег — конечный тег

Конечный тег записывается как начальный тег, но с косой черт ой, вставленной перед именем тега.

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

Не беспокойтесь, если в этих примерах используются теги, которые вы не узнали.

Вы узнаете о них в следующих статьях.

HTML Documents

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

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

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

Пример:

<!DOCTYPE html>
<html>
<body>

<h1>Мой первый заголовок</h1>
<p>Мой первый абзац.</p>

</body>
</html>

Заголовки HTML

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

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

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Пример заголовков:

Абзацы HTML

Абзацы HTML определяются тегом <p>:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Пример абзацов:

Ссылки HTML

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


<!DOCTYPE html>
<html>
<body>

<a href="https://t.me/easy_IT_training">This is a link</a>

</body>
</html>

Пример ссылки:

Кнопки HTML

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

<!DOCTYPE html>
<html>
<body>

<button>Click me</button>

</body>
</html>

Пример кнопк:

Списки(или таблицы) HTML

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


<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

пример списков(таблиц):

Заключение:

Мы разобрали как правильно создаются:

  1. Теги HTML
  2. Заголовки HTML
  3. Абзацы HTML
  4. Ссылки HTML
  5. Кнопки HTML
  6. Списки(или таблицы) HTML
@easy_it_training
October 28, 2023, 14:45
0 reactions
0 views