Вернуться ко всем урокам
web
Введение в html. Xml
WEB
Обновлено
06.08.2023
Просмотров
536
Время прочтения
10 мин.
Сложность
HTML (Hyper Text Markup Language, язык разметки гипертекста) — это стандартизированный язык разметки веб-страниц. Веб-браузеры получают HTML код от сервера по протоколам HTTP/HTTPS или открывают файл с расширением .html на локальном диске, анализируют его и передают пользователю его интерпретацию. Код HTML состоит из тегов, которые в исходном виде состоят из специальных символов-стрелок и названия (например <section>), а также атрибутов, их значений и текстового содержимого тега. Пример обыкновенного тега <p> (paragraph) с несколькими атрибутами:
<p class="theme-text" id="welcome-paragraph">
Привет, я обычный текстовый тег. В дальнейшем вы будете постоянно использовать
меня в своей работе.
</p>
В примере у тега <p> есть два атрибута class,id. У каждого из них есть значение, хотя его иногда может и не быть, вы узнаете подробнее об этом позже. То, что находится между открывающим и закрывающим тегами, называется содержимым тега. В данном случае это только текст, а если говорить более корректно — текстовый узел. Однако там может быть и другой тег, и несколько тегов, и несколько тегов вместе с текстом, и т.д.
Более серьёзный пример html-разметки представлен ниже:
Это часть разметки одной из страниц «Википедии», инспектированная при помощи инструментов разработчика в браузере (об этом тоже немного позже). Для удобства программиста имена тегов выделены сиреневым цветом, названия атрибутов — жёлтым, а синим — их значения (более ярким оттенком и подчёркнутым шрифтом выделены атрибуты-ссылки). Тёмно-серым цветом выделено текстовое содержимое тегов. Сейчас такая обширная и сложная разметка может вас вас напугать, однако вскоре вы научитесь без труда понимать всё, что изображено на скриншоте.
История HTML уже довольно продолжительна. Язык был создан в 1993 году Тимом Бернерсом-Ли, об этом значительном человеке мы уже упоминали, когда говорили о протоколе HTTP. Первая версия HTML не имела ни нумерации, ни спецификации, и развивалась во многом хаотично, усилиями множества независимых разработчиков и программистов. Поэтому официальная публикация спецификации сразу получила индекс 2. Последующие этапы развития — версия 3 (1995 год), версия 3.2 (1997 год), версия 4.0 (1997 год) и версия 4.01 (1999 год). Версии 4.0 и 4.01 получились очень стабильными, а различные нововведения в них открывали доступ к широким возможностям для веб-разработчиков, поэтому эти версии просуществовали без значительных изменений вплоть до 2014 года, когда был введён HTML 5, которым мы и пользуемся в настоящее время.
В любом html-документе в качестве первого тега вы увидите так называемый «доктайп». Это тег, существущий по историческим причинам и указывающий браузеру на стандарт, по которому необходимо считывать разметку. Примеры «доктайпов» представлены ниже:
// HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
// HTML 5
<!DOCTYPE html>
Первый пример это «доктайп» версии 4.01. Вы можете встретить его точно в таком виде, либо с некоторыми другими параметрами, однако эти параметры совсем не важны, потому что всё, что вам нужно знать об этих старых «доктайпах» — это то, что они устарели и больше не должны использоваться. Хотя вы, возможно, ещё встретите их на каких-нибудь очень старых сайтах.
Второй пример это современный «доктайп», указывающий на 5 версию HTML. Именно он нам необходим в нашей работе, запомните его. Все редакторы кода, о которых мы поговорим чуть ниже в уроке, при создании стартового html-шаблона создадут этот тег.
Это ещё не всё, что нужно знать о языках разметки, применяемых в веб-разработке.
XHTML — расширенная версия языка HTML, созданная в 2000 году. Доступные версии 1.0 и 1.1. В настоящий момент развитие этого языка остановлено и его использование не рекомендуется.
XML (eXtensible Markup Language, расширяемый язык разметки) — язык разметки документов, удобный для создания и обработки программами и человеком, предназначенный главным образом для использования в Интернете. Создан в 1998 году Консорциумом Всемирной Паутины, в настоящее время активно используется в вебе для форматирования, передачи и обработки различных данных, например для получения списка товаров в интернет-магазине, информации о пользователях и пр. XML основан на языке HTML, поэтому они очень похожи:
Обратите внимание на первый тег <?xml >, который, аналогично «доктайпу» указывает на стандарт, в котором создан данный документ. Также в разметке мы видим атрибуты и их значения, различные теги, текстовые узлы, а это всё уже знакомо нам.
Фронтенд-разработчикам не нужно много знать об XML, т.к. он используется главным образом для передачи данных на бэкенде (в серверной разработке). Вы, вероятно, столкнётесь с ним лишь один раз за несколько лет, а пока что полученных вами знаний более чем достаточно.
Создание HTML документа
Чтобы создать HTML-документ, достаточно будет создать новый файл в любом месте на вашем компьютере и присвоить ему расширение .html или .htm , тогда ваша операционная система будет работать с ним как с веб-страницей, а именно открывать его при помощи браузера. Если вы не знаете, как указать расширение для файла, поищите эту информацию в интернете. Уже сейчас можно сказать, что всё время обучения и работы разработчиком вам придётся «гуглить», поэтому начинайте привыкать и не бойтесь. Откройте созданный файл в любом текстовом редакторе и поместите внутрь следующую разметку:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Веб-страница</title>
</head>
<body>
<p>Привет! Я параграф html-документа! Я нахожусь в вашей первой веб-странице!</p>
</body>
</html>
Теперь, если вы откроете этот файл в веб-браузере, то увидите введённый вами текст, но уже без множества тегов! Это и будет результат интерпретации браузером вашего кода, и это будет вашей первой веб-страницей:
Конечно, это максимально простая веб-страница, содержащая только один параграф с текстом, если не считать невидимых пользователю тегов. Однако постепенно вы освоите все необходимые теги и правила описания стилей CSS и сможете создавать разметку любой сложности для красивых сайтов. Для этого необходимо только терпение и усердие.
ВАЖНО!
В далёкие суровые годы веб-сайты создавались при помощи доступных подручных инструментов — например, при помощи стандартного блокнота windows и paint`a. Вы можете попробовать такой подход и сейчас, чтобы почувствовать, сколько усилий прежде вкладывали разработчики в свои детища.
К счастью, эти тёмные времена давно прошли, и теперь веб-мастерам предоставлено достаточно удобных иструментов для написания и отладки кода. Это могут быть легковесные редакторы кода, а могут быть и настоящие суперпрограммы — IDE (Integrated Development Environment), интегрированные среды разработки. Они обладают огромнейшим функционалом и предоставляют разработчикам различные функции, облегчающие, упрощающие и автоматизирующие создание сайтов и\или программ.
Поскольку это учебник по HTML, а не справочник по софту, мы не будем подробно разговаривать обо всех этих редакторах, а только назовём самые популярные, которые подойдут на первых порах для обучения. Вы можете попробовать каждый из них и выбрать тот, что понравится больше. Чтобы разобраться с их установкой и настройкой, воспользуйтесь инструкциями, найденными в интернете. Наиболее популярные «лёгкие» редакторы кода:
Тест к уроку
web
Основы ВЕБ
20
Начальный тест, содержащий вопросы о сети интернет и Вебе. Поможет разобраться с новыми терминами и закрепить первые полученные знания.
