Привет всем! Племянник (привет, Клим!) на днях написал по поводу того, что решил (наконец!) начать изучать HTML, PHP, Python и прочее. Специально для него и всех, кто решил начать изучать HTML — основы в одном посте 🙂 Итак, поехали!
Что такое HTML? HTML — это язык разметки гипертекста, который используется для создания веб-страниц. Фактически, если вы создадите простой текстовый документ и укажете его расширение как .html или .htm, а потом тыкните на него и откроете его в браузере — вы увидите результаты своего творчества 🙂
HTML состоит из элементов (заголовки, абзацы, ссылки, списки и изображения). Каждый элемент определяется тегом, который находится между знаками <>. Теги есть открывающие — выглядят они так: <>, а есть закрывающие — которые выглядят так: </>.
Например, чтобы создать заголовок, вы можете использовать тег <h1>. Все, что находится между этими тегами, будет являться заголовком:
Это заголовок
результат выполнения кода:
Это заголовок
Кстати, если мы будем просто вставлять теги в виде тегов — получим их отображение. А что делать, если нужно представить тег в виде обычного текста?
Оказывается, в HTML можно представить тег в виде обычного текста, используя сущности HTML. Сущности — это специальные символы, которые представляют специальные символы или теги. Например, если хочется представить тег < в виде обычного текста, вы можете использовать сущность <. Аналогично, если вы хотите представить тег >, вы можете использовать сущность >. Пример подобного — ниже:
Это текст, содержащий тег <p>.
Однако — если мы укажем этот код именно в виде тегов — получим следующее:
Это текст, содержащий тег <p>.
В этом примере текст <p> представлен в виде обычного текста, в то время как тег используется для определения абзаца текста.
Но вернемся к HTML для чайников.
Кроме того, что можно делать текст жирным (тег <b>), менять его размер (<h1>…<h6>), наклонным (<i>) или подчеркнутым (<u>) или подчеркнутым (<u>), можно добавлять к тегам атрибуты, которые позволяют указывать дополнительную информацию.
Например, чтобы создать ссылку, вы можете использовать тег <a> с атрибутом href, который указывает URL-адрес ссылки:
Это ссылка
Визуально на сайте это будет выглядеть так:
Это ссылка на Google
HTML также может использоваться для создания списков, таблиц и форм.
Списки могут быть нумерованными или маркированными. Чтобы создать нумерованный список, вы можете использовать тег <ol>, а для каждого элемента списка — тег <li>:
- Элемент 1
- Элемент 2
- Элемент 3
который на сайте будет выглядеть так:
- Элемент 1
- Элемент 2
- Элемент 3
Таблицы могут использоваться для организации информации в строках и столбцах. Чтобы создать таблицу, вы можете использовать тег <table>, тег <tr> для строк и тег <td> для ячеек:
| Ячейка 1,1 | Ячейка 1,2 |
| Ячейка 2,1 | Ячейка 2,2 |
который на сайте будет выглядеть вот так:
| Ячейка 1,1 | Ячейка 1,2 |
| Ячейка 2,1 | Ячейка 2,2 |
А еще с помощью HTML можно создавать формы, которые могут содержать различные элемементы — текстовые поля, флажки, радио-кнопки, и кнопки для отправки данных. Чтобы создать форму, вы можете использовать тег <form>, а для элементов формы, таких как текстовые поля, вы можете использовать теги, такие как <input>, <textarea> и <select>:
Визуально будет вот такой результат:
Кстати, как работать с формами с помощью 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.
Тег <html> определяет начало и конец HTML-документа. Внутри тега <html> находится тег <head>, который содержит информацию о документе, и тег <body>, который содержит все видимые элементы документа. И, наконец, используется тег <h1> для вывода фразы «Привет, Мир!» на экран.
P.S. Сегодняшний пост написан под звучащий в наушниках зацикленный трек, прослушать который мы можете ниже 🙂
Support the Blog!
Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️
Donate via PayPal
Donate via Revolut
