Что представляет собой HTML
Формально
HTML (Hypertext Markup Language) считается языком разметки веб-страниц.
Результат интерпретируется браузером, и пользователь видит текст на экране
компьютера или смартфона в заданном разработчиком виде. Первые сайты
создавались практически на «чистом» коде HTML при незначительном включении
скриптов на JavaScript.
История развития HTML
Точной
даты создания языка HTML нет, его появление соотносится с периодом между 1986 и
1991 годами. Он изначально создавался для использования людьми без специальных
знаний в верстке и программировании. Сложная система разметки SGML (Standard
Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они
чаще называются тегами.
Особенности
HTML:
1.
Изначально перечень команд оформления
текстов включал всего 18 элементов, 11 из которых используются даже в
последних релизах.
2.
Основная задача языка заключалась в
воспроизведении контента без искажений независимо от технического оснащения
устройства.
3. Современные версии HTML стали более зависимыми от
платформы из-за появления тегов для мультимедийного и графического оформления.
К
актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012
года и выросла до релиза 5.3. Именно это поколение языка разметки
поддерживается большинством браузеров. При использовании устаревших версий
вероятно искаженное отображение. Существует понятие кроссбраузерной
несовместимости сайта, когда он по-разному выглядит на разных устройствах.
Изменения
преимущественно касались внедрения новых функций. Например, появилась поддержка
ввода типов данных – даты и времени, адреса электронной почты, домена
сайта. Также в новые релизы включили дополнительные элементы вроде добавления
видео и звука на веб-страницу, рисования в указанной области при помощи скрипта
JavaScript.
Анатомия HTML документа
Мы
завершили изучение основ отдельных HTML элементов, но они не очень полезны сами
по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML
страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с
которым мы впервые встретились в статье Работа с файлами):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Моя тестовая страница</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Моё тестовое изображение">
</body>
</html>
Здесь
мы имеем:
<!DOCTYPE html> —
доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы
должны были выступать в качестве ссылки на набор правил, которым HTML
страница должна была следовать, чтобы считаться хорошим HTML, что могло
означать автоматическую проверку ошибок и другие полезные вещи. Однако в
наши дни, никто не заботится об этом, и они на самом деле просто
исторический артефакт, который должен быть включён для того, чтобы все
работало правильно. На данный момент это все, что вам нужно знать.<html></html> —
элемент <html>.
Этот элемент оборачивает весь контент на всей странице, и иногда известен
как корневой элемент.<head></head> —
элемент <head>.
Этот элемент выступает в качестве контейнера для всего, что вы пожелаете
включить на HTML страницу, но не являющегося контентом,
который вы показываете пользователям вашей страницы. К ним относятся такие
вещи, как ключевые слова и описание страницы, которые будут появляться в
результатах поиска, CSS стили нашего контента, кодировка и многое другое.<body></body> —
элемент <body>.
В нем содержится весь контент, который вы хотите
показывать пользователям, когда они посещают вашу страницу, будь то текст,
изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.<meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего
документа, которая включает в себя большинство символов из всех известных
человечеству языков. По сути, теперь документ может обрабатывать любой
текстовый контент, который вы в него вложите. Нет причин не устанавливать
её, так как это может помочь избежать некоторых проблем в дальнейшем.<title></title> —
элемент <title>.
Этот элемент устанавливает заголовок для вашей страницы, который является
названием, появляющимся на вкладке браузера загружаемой страницы, и
используется для описания страницы, когда вы добавляете её в
закладки/избранное.
Возможности
HTML
Особенность
языка разметки HTML заключается в преобразовании простых команд в визуальные
объекты. Например, тег <img> используется для отображения картинок. В
перечне атрибутов есть обязательный – ссылка на файл. Изображение же обычно
хранится на накопителе удаленного сервера, где располагается сам
ресурс или внешний сервис.
Основные
элементы HTML:
1.
Форматирование текста – выделение курсивом,
жирным шрифтом, подчеркивание, размер кегля, нумерованные/маркированные списки.
2.
Текстовые блоки – заголовки уровней H1-H6,
абзацы, перенос на новую строку.
3.
Таблицы – любое количество строк, столбцов,
фиксированная высота, ширина, заголовки.
4.
Вставка объектов – изображения, звуковые,
текстовые, видеофайлы и т.д.
5. Гиперссылки – на файл изображения, прайс-листа, страницу,
на которую ссылается пункт меню или анкор в тексте. Есть атрибуты открытия
документа в текущем или новом окне.
Что не получиться сделать в HTML
Несмотря
на относительно обширный список возможностей по форматированию страниц, в HTML
нет целого перечня функций. Например, теги позволяют оперировать стандартным
шрифтом, а вот заменить его не получится. Компенсируют функционал подключением
таблицы стилей CSS – это отдельный язык описания внешнего вида HTML-документов.
Стили
компенсируют недостатки технологии:
1.
Заметно упрощают адаптивную верстку.
2.
Экономят время при оформлении страниц
сайта.
3. Расширяют стандартные возможности.
В
итоге дизайн ресурса становится более интересным, скорость загрузки возрастает
за счет меньшей нагрузки на сервер. Вместо дублирования кода на каждой странице
при использовании HTML есть возможность вставлять небольшую ссылку на нужный
участок кода. При изменении шаблона файл CSS остается неизменным, что упрощает
редактирование сайта.
Сам
по себе HTML работает довольно «топорно», требует дублирования команд на каждой
странице. Это нерационально, например, при формировании общих элементов типа
шапки, подвала, общего меню. Технология CSS позволила создавать фирменное
оформление независимо от шаблона. Стоит подключить нужный участок кода, и
страница преображается.
Сколько времени нужно, чтобы освоить HTML
Основы, которых хватит
на создание примитивных страниц, можно изучить за час. То есть
быстрее, чем была написана эта статья. Но мастерство приходит с практикой.
Мало просто создать каркас — нужно убедиться, что он везде правильно
отображается.
Специалисты, которые могут
написать не кривой адаптивный сайт, ценятся у работодателей.
Но быть просто HTML-верстальщиком невыгодно. Сегодня это довольно редкая
и низкооплачиваемая профессия. Лучше сразу изучать фронтенд- или
бэкенд-разработку, а HTML обязательно пригодится в процессе.
HTML – язык программирования?
Нет. На языках
программирования пишут… программы и веб-приложения :) Для этого в них
есть условия, функции, переменные, операторы, классы и много что ещё.
В HTML же есть только теги, которые помогают браузеру правильно
отобразить содержимое сайта.
Во многих источниках HTML
всё-таки называют языком программирования. Не верьте! HTML — это
всего лишь формат текста. По сути, HTML-файл ничем не отличается
от «вордовского» файла.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.