html для чайников

HTML для чайников в одном посте

Привет всем! Племянник (привет, Клим!) на днях написал по поводу того, что решил (наконец!) начать изучать HTML, PHP, Python и прочее. Специально для него и всех, кто решил начать изучать HTML — основы в одном посте 🙂 Итак, поехали!

Что такое HTML? HTML — это язык разметки гипертекста, который используется для создания веб-страниц. Фактически, если вы создадите простой текстовый документ и укажете его расширение как .html или .htm, а потом тыкните на него и откроете его в браузере — вы увидите результаты своего творчества 🙂

HTML состоит из элементов (заголовки, абзацы, ссылки, списки и изображения). Каждый элемент определяется тегом, который находится между знаками <>. Теги есть открывающие — выглядят они так: <>, а есть закрывающие — которые выглядят так: </>.

Например, чтобы создать заголовок, вы можете использовать тег <h1>. Все, что находится между этими тегами, будет являться заголовком:

<h1>Это заголовок</h1>

результат выполнения кода:

Это заголовок

Кстати, если мы будем просто вставлять теги в виде тегов — получим их отображение. А что делать, если нужно представить тег в виде обычного текста?
Оказывается, в HTML можно представить тег в виде обычного текста, используя сущности HTML. Сущности — это специальные символы, которые представляют специальные символы или теги. Например, если хочется представить тег < в виде обычного текста, вы можете использовать сущность &lt;. Аналогично, если вы хотите представить тег >, вы можете использовать сущность &gt;. Пример подобного — ниже:

Это текст, содержащий тег &lt;p&gt;.

Однако — если мы укажем этот код именно в виде тегов — получим следующее:

Это текст, содержащий тег <p>.

В этом примере текст <p> представлен в виде обычного текста, в то время как тег используется для определения абзаца текста.

Но вернемся к HTML для чайников.
Кроме того, что можно делать текст жирным (тег <b>), менять его размер (<h1>…<h6>), наклонным (<i>) или подчеркнутым (<u>) или подчеркнутым (<u>), можно добавлять к тегам атрибуты, которые позволяют указывать дополнительную информацию.
Например, чтобы создать ссылку, вы можете использовать тег <a> с атрибутом href, который указывает URL-адрес ссылки:

<a href="https://www.google.com">Это ссылка</a>

Визуально на сайте это будет выглядеть так:
Это ссылка на Google

HTML также может использоваться для создания списков, таблиц и форм.
Списки могут быть нумерованными или маркированными. Чтобы создать нумерованный список, вы можете использовать тег <ol>, а для каждого элемента списка — тег <li>:

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

который на сайте будет выглядеть так:

  1. Элемент 1
  2. Элемент 2
  3. Элемент 3

Таблицы могут использоваться для организации информации в строках и столбцах. Чтобы создать таблицу, вы можете использовать тег <table>, тег <tr> для строк и тег <td> для ячеек:

<table>
<tr>
<td>Ячейка 1,1</td>
<td>Ячейка 1,2</td>
</tr>
<tr>
<td>Ячейка 2,1</td>
<td>Ячейка 2,2</td>
</tr>
</table>

который на сайте будет выглядеть вот так:

Ячейка 1,1 Ячейка 1,2
Ячейка 2,1 Ячейка 2,2

А еще с помощью HTML можно создавать формы, которые могут содержать различные элемементы — текстовые поля, флажки, радио-кнопки, и кнопки для отправки данных. Чтобы создать форму, вы можете использовать тег <form>, а для элементов формы, таких как текстовые поля, вы можете использовать теги, такие как <input>, <textarea> и <select>:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>

Визуально будет вот такой результат:








Кстати, как работать с формами с помощью PHP я описывал чуть раньше.

С основами закончили. Теперь список основных тегов, которые используются в HTML:
<html> — определяет начало и конец HTML-документа.
<head> — содержит информацию о документе, такую как заголовок и метаданные.
<body> — содержит все остальные элементы веб-страницы, такие как текст, изображения и таблицы.
<h1> — <h6> — теги заголовков, которые используются для определения различных уровней заголовков.
<p> — тег параграфа, используется для определения абзацев текста.
<a> — тег ссылки, используется для создания ссылок на другие веб-страницы или другие ресурсы.
<img> — тег изображения, используется для вставки изображений в web
<ul> — тег списка ненумерованных элементов, используется для отображения списка элементов с маркерами.
<ol> — тег списка нумерованных элементов, используется для отображения списка элементов с нумерацией.
<li> — тег элемента списка, используется для определения отдельных элементов в списке.
<table> — тег таблицы, используется для отображения табличных данных.
<tr> — тег строки таблицы, используется для определения отдельных строк в таблице.
<th> — тег ячейки заголовка таблицы, используется для определения ячеек, содержащих заголовки столбцов или строк.
<td> — тег ячейки таблицы, используется для определения отдельных ячеек с табличными данными.
<form> — тег формы, используется для создания формы, через которую пользователь может вводить данные.
<input> — тег поля ввода, используется для создания различных типов полей ввода, таких как текстовое поле, чекбоксы и радио кнопки.
<label> — тег метки, используется для связывания поля ввода с описанием.
<select> — тег выпадающего списка, используется для создания выпадающего списка из нескольких вариантов.
<option> — тег опции, используется для определения отдельных вариантов в выпадающем списке.
<textarea> — тег многострочного текстового поля, используется для создания поля для ввода многострочного текста.
<button> — тег кнопки, используется для создания кнопок, которые могут выполнять различные действия.
<fieldset> — тег группы полей, используется для группировки связанных полей формы.
<legend> — тег заголовка группы полей, используется для предоставления названия группы полей.
<img> — тег изображения, используется для вставки изображений на страницу.
<figure> — тег фигуры, используется для группировки элементов, таких как изображения и подписи.
<figcaption> — тег подписи фигуры, используется для предоставления подписи для элементов, определенных тегом <figure>.
<video> — тег видео, используется для вставки видеороликов на страницу.
<audio> — тег аудио, используется для вставки аудиофайлов на страницу.
<source> — тег источника, используется для определения источника видео или аудио файла.
<track> — тег текстовых дорожек, используется для добавления подписей, описаний или другой информации для видео или аудио файлов.
<map> — тег карты, используется для создания интерактивных карт на странице.
<area> — тег области, используется для определения активных областей на карте, определенной тегом <map>.
<canvas> — тег холста, используется для создания динамических графических изображений или анимаций на странице.
<datalist> — тег списка данных, используется для создания списка вариантов, которые могут быть выбраны пользователем при вводе данных в форму.
<output> — тег выхода, используется для отображения результатов вычислений, выполненных с помощью JavaScript или других технологий.
<progress> — тег прогресса, используется для отображения прогресса задачи, например, загрузки файла.
<meter> — тег измерителя, используется для отображения числовых значений в виде графического индикатора.
<dialog> — тег диалога, используется для создания диалоговых окон в браузере.
<template> — тег шаблона, используется для хранения контента, который может быть динамически вставлен в документ в будущем.
<picture> — тег картинки, используется для отображения изображений на веб-странице.
<figure> — тег фигуры, используется для группирования контента, такого как изображения, графики или таблицы, с описанием или заголовком.
<figcaption> — тег подписи фигуры, используется для добавления подписи к элементу <figure>.
<mark> — тег отметки, используется для выделения текста на странице.
<time> — тег времени, используется для представления даты или времени в стандартизированном формате.
<ruby>- тег руби, используется для добавления японских подсказок (фунто) к тексту.
<iframe> — Тег позволяет вставлять в HTML-документ другой HTML-документ. Он используется для встраивания различных медиа-контентов, таких как видео, карты или веб-формы.
<figcaption> — Тег определяет подпись для элемента <figure>.
<figure> — Тег представляет собой группу медиа-контента, такого как изображение, диаграмму или код, вместе с описанием.
<footer> — Тег определяет футер документа или секции. Он содержит информацию, такую как авторство, контактную информацию или навигацию по сайту.
<form> — Тег создает форму для пользовательского ввода. Он может содержать различные элементы управления, такие как текстовые поля, флажки, радиокнопки и кнопки отправки.
<mark> — отмечает текст, как выделенный. Обычно используется с целью выделения текста, который является важным для пользователя.
<meter> — отображает графическое представление значения, которое находится в диапазоне между минимальным и максимальным значением. Это может быть использовано, например, для отображения прогресса загрузки файла.
<nav> — определяет секцию документа, которая содержит ссылки на другие части документа или на другие веб-страницы.
<noscript> — определяет секцию документа, которая будет отображаться, если JavaScript недоступен или отключен в браузере пользователя.
<object> — определяет вставленный объект, такой как плагин, апплет или медиа-объект, как видео или аудио.
<ol> — определяет нумерной список
<header> – используется для определения заголовка страницы, включая заголовок, логотип или навигационные ссылки.
<main> – используется для определения основного содержимого страницы, которое отличается от заголовка, навигационных ссылок, боковой панели или подвала.

Так… хватит… полный список html-тегов я все равно не вспомню, а для начала и того, что есть — более, чем достаточно 😉

На этом все, что я мог сказать по поводу html для чайников в одном посте — сказано. Как всегда — в случае возникновения вопросов пишите на почту, или в Telegram.

В завершение — код html-файла, который выведет фразу «Привет, Мир!» в вашем браузере:

<!DOCTYPE html>
<html>
<head>
<title>Привет, Мир!</title>
</head>
<body>
<h1>Привет, Мир!</h1>
</body>
</html>

Краткая расшифровка построчно:
<!DOCTYPE html>, чтобы указать на то, что документ написан в языке HTML.
Тег <html> определяет начало и конец HTML-документа. Внутри тега <html> находится тег <head>, который содержит информацию о документе, и тег <body>, который содержит все видимые элементы документа. И, наконец, используется тег <h1> для вывода фразы «Привет, Мир!» на экран.

P.S. Сегодняшний пост написан под звучащий в наушниках зацикленный трек, прослушать который мы можете ниже 🙂