int(1)

Что такое HTML? Объяснение основ языка разметки гипертекста

Turing Bootcamp 19.07.2021 0

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

Вот некоторые из наиболее распространенных вариантов использования HTML:

Веб-разработка.
Разработчики используют HTML-код для разработки того, как браузер отображает элементы веб-страницы, такие как текст, гиперссылки и мультимедийные файлы.
Интернет-навигация. Пользователи могут легко перемещаться и вставлять ссылки между связанными страницами и веб-сайтами, поскольку HTML широко используется для встраивания гиперссылок.
Веб-документация. HTML позволяет организовывать и форматировать документы аналогично Microsoft Word.
Также стоит отметить, что HTML теперь считается официальным веб-стандартом. World Wide Web Consortium (W3C) поддерживает и развивает спецификацию HTML, наряду с предоставлением регулярных обновлений.
В этой статье будут рассмотрены основы HTML, включая то, как он работает, его плюсы и минусы, а также его отношение к CSS и JavaScript .

Как работает HTML

Наиболее часто используемые HTML-теги и HTML-элементы:

— Элементы блочного уровня
— Встроенные элементы
— Эволюция HTML — чем отличается HTML от HTML5?
— Плюсы и минусы HTML
— Как связаны HTML, CSS и Javascript
— Понимание HTML и улучшение ваших знаний HTML.

Средний веб-сайт включает несколько разных HTML-страниц. Например, домашняя страница, о странице и контактная страница будут все отдельные HTML — файлы.
Документы HTML — это файлы с расширением .html или .htm . Веб-браузер читает HTML-файл и отображает его содержимое, чтобы пользователи Интернета могли его просматривать.
Все HTML-страницы имеют ряд HTML-элементов , состоящих из набора тегов и атрибутов . Элементы HTML — это строительные блоки веб-страницы. Тег сообщает веб-браузеру, где элемент начинается и заканчивается, тогда как атрибут описывает характеристики элемента.
Три основные части элемента:

— Открывающий тег — используется, чтобы указать, где элемент начинает действовать. Тег заключен в открывающую и закрывающую угловые скобки. Например, используйте начальный тег для создания абзаца.
— Контент — это результат, который видят другие пользователи.

— Закрывающий тег — то же, что открывающий тег, но с косой чертой перед именем элемента. Например, в конце абзаца.

Комбинация этих трех частей создаст HTML-элемент:
< p > Вот как вы добавляете абзац в HTML. </ p >

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

< p style = «color: purple; font-family: verdana» > Вот как вы добавляете абзац в HTML. </ p >

Другой атрибут, класс HTML наиболее важен для разработки и программирования. Атрибут class добавляет информацию о стиле, которая может работать с разными элементами с одним и тем же значением класса.
Например, мы будем использовать один и тот же стиль для заголовка <h1> и абзаца <p> .

Стиль включает цвет фона, цвет текста, границу, поля и отступы в классе .important . Чтобы добиться того же стиля между <h1> и <p>, добавьте class = «important» после каждого начального тега.

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

< img src = «/» alt = «Изображение» >

Этот тег изображения имеет два атрибута: атрибут src , путь к изображению и атрибут alt , описательный текст. Однако у него нет содержимого или закрывающего тега.
Наконец, каждый документ HTML должен начинаться с объявления <! DOCTYPE>, чтобы сообщить веб-браузеру о типе документа. В HTML5 общедоступное объявление документа doctype HTML будет:
<! DOCTYPE html>

Наиболее часто используемые HTML-теги и HTML-элементы

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

Элементы блочного уровня.

Элемент блочного уровня занимает всю ширину страницы. Он всегда начинает новую строку в документе. Например, элемент заголовка будет находиться на отдельной строке от элемента абзаца .
Каждая HTML-страница использует эти три тега:
— Тег <html> — это корневой элемент, определяющий весь HTML-документ.
— Тег <head> содержит метаинформацию, такую ​​как заголовок страницы и кодировка.
— Тег <body> включает в себя все содержимое, отображаемое на странице.

Другие популярные теги блочного уровня:
-Теги заголовков — они варьируются от <h1> до <h6>, где заголовок h1 является наибольшим по размеру, уменьшаясь по мере продвижения к h6.
-Теги абзацев — все они заключаются в тег <p> .
-Теги списка — имеют разные вариации. Используйте тег <ol> для упорядоченного списка и используйте <ul>.

Встроенные элементы

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

Например, тег <strong>  выделит элемент полужирным шрифтом, а тег <em> — курсивом. Гиперссылки также являются встроенными элементами, которые используют тег <a > и атрибут href для указания места назначения ссылки:


Эволюция HTML — чем отличается HTML от HTML5?

Первая версия HTML состояла из 18 тегов. С тех пор каждая новая версия сопровождалась новыми тегами и атрибутами, добавленными к разметке. Самым значительным обновлением языка до сих пор было введение HTML5 в 2014 году.
Основное различие между HTML и HTML5 заключается в том, что HTML5 поддерживает новые виды элементов управления формами. HTML5 также представил несколько семантических тегов, которые четко описывают контент, такие как <article> , <header> и <footer> .

Плюсы и минусы HTML

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

Плюсы:

— Подходит для новичков. HTML имеет чистую и последовательную разметку, а также неглубокую кривую обучения.
— Служба поддержки. Язык широко используется, за ним стоит много ресурсов и большое сообщество.
— Доступно. Это открытый исходный код и полностью бесплатный. HTML изначально работает во всех веб-браузерах.
— Гибкий. HTML легко интегрируемые с языками серверными, таких как PHP и Node.js .

Минусы:

— Статический. Этот язык в основном используется для статических веб-страниц. Для динамической функциональности вам может потребоваться использование JavaScript или серверного языка, такого как PHP.
— Отдельная HTML-страница. Пользователи должны создавать отдельные веб-страницы для HTML, даже если элементы одинаковы.
— Совместимость с браузером. Некоторые браузеры медленно внедряют новые функции. Иногда старые браузеры не всегда отображают новые теги.

Как связаны HTML, CSS и Javascript

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

Заключение

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

Поделиться
Интересные статьи:
Turing Bootcamp 24.03.2021 👨‍💻5 полезных приложений для программистов Stepik - российская образовательная платформа и конструктор бесплатных открытых онлайн-курсов и уроков. Позволяет любому зарегистрированному пользователю создавать интерактивные обучающие...
Turing Bootcamp 23.03.2021 🎬 7 интересных фактов о фильме Джобс: Империя соблазна «Джобс: Империя соблазна»  —  фильм режиссёра Джошуа Майкла Штерна о жизни американского предпринимателя, менеджера, дизайнера и инвестора Стива Джобса. Собрали...
Turing Bootcamp 20.09.2021 10 лучших книг, которые должен прочитать каждый программист 6. Жемчужины программирования Эта книга немного отличается от других классических книг в списке, но эта книга - одна из самых...