HTML — это язык разметки гипертекстовых документов. Он нужен, чтобы отображать в браузере специальным образом отформатированный документ с множеством вложенных элементов: заголовками, абзацами, списками, гиперссылками, медиаисточниками, расположением изображений, видео и аудио.
Что такое HTML
Дословно HTML означает Hypertext Markup Language (язык гипертекстовой разметки). Из расшифровки названия понятно, что инструмент применяется для управления отображением контента на интернет-странице, его структуризации.
Технология гипертекстовой разметки веб-страниц была предложена в 1989 году британским специалистом Тимом Бернерсом-Ли. Сначала язык применялся для обмена научной рабочей документацией между инженерами института CERN, сотрудником которого был Бернерс-Ли. Немного позднее применение языка HTML было расширено настолько, что он, наряду с такими базовыми элементами, как HTTP и URL лег в основу Всемирной паутины.
Зачем нужен HTML
Когда пользователь посещает сайт, браузер «подтягивает» файл HTML с данными о структуре и содержании веб-страницы. Функция HTML состоит в выстраивании внешней базы, фундамента, но сам запуск сайта в функционал не входит. HTML только указывает, где должны располагаться элементы, каков их базовый визуал, где брать стили для элементов и скрипты.
Возможности HTML
HTML-документ можно составлять в любом редакторе, который есть в операционной системе: Notepad на MS Windows, TextEdit в Mac, Pico на Linux. Браузер для работы HTML–документа желателен, но необязателен. Он нужен для того, чтобы показать отформатированный документ.
Просматривать HTML-страницы можно и без выхода в интернет. Для этого нужно создать несколько HTML-файлов в одной папке, расположить в них гиперссылки и переходить по ним от одного документа к другому.
Что можно и нельзя сделать на HTML
HTML представляет собой основу внутренней структуры сайта, его базовый каркас. Необходимо учитывать, что этот код является не языком программирования, как, например, Python или C#, а инструментом для разметки гипертекста. С его помощью браузер выстраивает интернет-страницу в виде, который понятен для людей, вырисовывает ее с помощью CSS и добавляя логику через JavaScript. HTML оптимален для начинающих программистов, он прост в освоении, а приобретенные навыки помогут уже в изучении языков программирования.
В HTML-файле можно задавать:
- гиперссылки;
- списки;
- формы;
- разметку страницы;
- таблицы;
- абзацы;
- картинки;
- видео;
- заголовки.
Создать базовый дизайн только с помощью HTML тоже можно. Например, установить цвет и шрифт текста на странице или фон для блоков. Использовать только код HTML для оформления веб-страниц не рекомендуется, дизайн будет примитивным и не современным. С CSS же творческий процесс ничем не ограничивается. Тем не менее, ряд функций в настоящий момент приходит в HTML из других, более серьезных инструментов. Например, Drag&Drop (перемещение элементов мышкой) ранее было исключительно в JavaScript, теперь это можно делать и на HTML.
Что такое теги HTML
HTML-документ это текстовый файл с расширением .html или .htm. В браузере он преобразуется в веб-страницу и состоит из набора тегов. Они как раз и помогают представлять текст на экране: благодаря им браузер понимает, что он читает не просто текст, а структурированную информацию, разбитую на блоки.
Тег выглядит как набор символов, заключенный в угловые скобки. Символы в скобках обозначают имя тега, которое описывает его функции. Вот несколько примеров:
- <h1> </h1> — заголовок;
- <p> </p> — абзац;
- <i> </i> — курсив.
Тег – это составной элемент, определяющий разметку структурных блоков. Он открывается, и этим начинает свое действие; и закрывается, обозначая завершение команды. Закрытые и открытые теги различаются только слешем перед именем тега. Эти теги создают оболочку, в которую помещается текст.
Именно незакрытые теги приводят к частым ошибкам и некорректным отображениям страницы. Для наглядности представим, что теги – это матрешки, из которых можно собрать набор. Складывая в большую матрешку все фигурки важно не забывать закрывать все половинки (ставить закрывающие теги), иначе игрушка не получится.
Внутри тега могут быть атрибуты – дополнительная информация, которую нужно скрыть из основного текста. Они ставятся только в открывающий тег, между ним и именем тега должен быть пробел, а после него идет знак равенства. Значение атрибута заключается в кавычки. С их помощью можно расширить возможности тегов и обратиться к ним, чтобы узнать подробную информацию.
Есть теги, которые нет необходимости закрывать. Пример: тег переноса строки <br> — он одиночный и закрывать его не нужно. Раньше одиночные теги писались с закрывающим слэшем перед закрывающей скобкой. Например: <br />. В стандарте HTML5 использование закрывающего слеша в одиночных тегах необязательно. Примеры одиночных тегов: <br>, <hr>, <img>.
Помимо атрибутов в тег можно добавлять вложения, эти элементы могут менять стиль текста. Например, можно выделить какое-то слово <strong>жирным</strong> шрифтом.
Как выглядит код на HTML
<!DOCTYPE html>
<html>
<head>
<title>Привет, SkillFactory</title>
</head>
<body>
<img src="https://static.tildacdn.com/tild6565-6361-4831-a664-366538616534/SF_MRG_logo_new.svg">
</body>
</html><!DOCTYPE html> –предназначается для указания типа документа, так как браузер может интерпретировать разные версии HTML (например, EXtensible HyperText Markup Language, расширенный язык разметки гипертекста). По умолчанию его всегда включают в начало страницы.
<html> </html> – сообщает браузеру, что это за HTML-документ. Этот тег хранит в себе остальные теги.
<head> </head> – нужен для хранения других элементов, которые помогают браузеру в работе с данными. Внутри него есть метатеги, которые применяются, чтобы сохранять информацию для браузеров и поисковых систем.
<body> </body> – тело документа, в котором находятся все видимые пользователю элементы.
<title> </title> – заголовок веб-страницы. Именно его браузер загрузит как название, а при сохранении страницы в избранное он использует эту фразу как описание закладки.
<img> – помещает изображение в нужное место. Обычно к нему добавляют атрибут src, в котором содержится путь к этому изображению. Атрибуты width, height определяют ширину и высоту изображения в пикселях.
Основная разметка HTML-страницы – это заголовки, абзацы и списки. Они структурируют информацию на странице, все как в документе Word.
Заголовки
В HTML бывает шесть уровней заголовков: <h1> – <h6>.
<h1>Привет, SkillFactory</h1>
<h2>Расскажешь</h2>
<h3>Какие бывают</h3>
<h4>Уровни заголовка</h4>
Заголовок типа <h1> используют обычно один раз, потому что он основной.
Абзац
Как и на обычном письме, делит текст по смыслу.
<p>Спасибо, SkillFactory, всё понятно. Давай дальше</p>
Списки
Самые распространенные типы списков нумерованные и ненумерованные.
Ненумерованные или маркированные списки добавляются тегом <ul></ul>. Такие списки применяются когда нам не важна последовательность их элементов.
В нумерованном списке, где пункты расположены в определенном порядке, используется тег <ol></ol>.
Отдельные элементы в любом типе списков заводятся тегом <li></li>, который также нужно закрывать после каждого пункта.
Преимущества и недостатки HTML
Преимущества:
- широкое распространение;
- совместимость с подавляющим числом браузеров;
- доступность;
- поддержка стандарта консорциумом Всемирной паутины (WWW Consortium);
- простая интеграция с базовыми языками программирования, такими как PHP.
Недостатки:
- не подходит для создания динамических страниц. Для этого может понадобиться JavaScript или PHP;
- некоторые браузеры медленно осваивают поддержку новых функций;
- иногда бывает сложно предугадать реакцию старых браузеров (Internet Explorer версии 8 и более ранней) на новые теги.
Является ли HTML языком программирования?
HTML не обрабатывает данные, а только их отображает. То есть с помощью него нельзя выполнить сложение или умножение, можно только показать текст, в котором будет содержаться нужная формула с ответом. Он отвечает за разметку – ограниченный набор действий, который помогает браузеру отображать страницы.
Однако HTML обладает синтаксисом, семантикой и лексикой, поэтому он попадает в категорию декларативных языков программирования.
0 комментариев