Файл: Основы программирования на языке HTML (ПО для создания и просмотра HTML документа).pdf

Введение

Жизнь современного человека невозможно представить без использования информационных ресурсов, расположенных в сети Интернет. Они предоставляют нам огромные возможности для обмена информацией и ее поиска. Сейчас в сети человек может сделать многое: от записи на прием ко врачу, до приобретения продуктов питания. И все эти информационные ресурсы создаются с использованием языка разметки HTML.

Из вышесказанного, очевидно, что язык HTML, как метод подачи и структурирования информации, оказывает огромное влияние на современное общество, а специалисты, использующие его в разработке, неизменно востребованы на рынке труда.

Основной целью написания данной работы, является освоение основ языка разметки HTML, и его использования для создания гипертекстовых документов.

Для достижения поставленной цели необходимо решить следующие задачи:

1. Для понимания текущего состояния языка и перспектив его развития необходимо ознакомиться с краткой историей его появления и развития.
2. Познакомиться с основными принципами создания гипертекстовых документов, базовой разметкой языка, его основными тегами и их особенностями.
3. Рассмотреть текущую, актуальную редакцию HTML5. Ее особенности и нововведения.
4. Поскольку современный HTML невозможно рассматривать отдельно от формального языка описания внешнего вида документа CSS, необходимо кратко ознакомиться с его возможностями и особенностями.

Краткая история языка HTML

Язык HTML (англ. HyperText Markup Language, язык разметки гипертекста) впервые упоминается как часть проекта распределенной гипертекстовой системы World Wide Web (WWW), Всемирная паутина. Эту систему в 1989 году Тим Бернерс-Ли, ее разработчик, предложил руководству Европейского Центра ядерных исследований (CERN). Идея системы состояла в том, чтобы при помощи гипертекстовой навигационной системы объединить в единую информационную систему все множество информационных ресурсов CERN. Технология оказалась настолько удачной, что со временем развилась в одну из самых популярных в мире глобальных информационных систем - Интернет.

При этом сама технология на начальном этапе была чрезвычайно проста. Дело в том, что при разработке различных компонентов технологии (языка гипертекстовой разметки HTML (HyperText Markup Language, язык разметки гипертекста), протокола обмена гипертекстовой информацией HTTP, спецификации разработки прикладного программного обеспечения CGI и др.) предполагалось, что квалификация авторов информационных ресурсов и их оснащенность средствами вычислительной техники будут минимальными.

Язык гипертекстовой разметки HTML, был разработан Тимом Бернерсом-Ли на основе стандарта языка разметки печатных документов — SGML (Standard Generalised Markup Language, стандартный обобщенный язык разметки). Дэниел В. Конноли написал для него Document Type Definition — формальное описание синтаксиса HTML в терминах SGML.

Разработчики HTML смогли решить две задачи:

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

Первая задача была решена за счет выбора теговой модели описания документа. Такая модель широко применяется в системах подготовки документов для печати.

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

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

• такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде какой угодно операционной системы;
• к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.

Первой версии языка (HTML 1.0) официально не существовало. До 1995 года использовалось несколько версий языка, ни одна из которых не была признана официально. В сентябре 1995 года Консорциум всемирной паутины утвердил стандарт HTML 2.0. Вторая версия была присвоена HTML для того, чтобы стандартный язык отличался от неофициальных версий, существовавших ранее.

В 1995 году W3C приступил к разработке третей версии языка. обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала, вышедшая в январе 1997 года, версия 3.2, в которой были опущены многие, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic.

В версии HTML 4.0, вышедшей в декабре 1997 года, были удалены устаревшие элементы кода, такие как элемент <font>, используемый для изменения свойств шрифта. Вместо них предлагалось использовать, вышедшие годом ранее, каскадные таблицы стилей (CSS).

В 1998 году Консорциум всемирной паутины начал разработку нового языка XHTML. Данный язык создавался на основе HTML4, но соответствовал стандарту XML. Первая версия нового языка была одобрена для использования в январе 2000 года. В дальнейшем планировалась к выходу вторая версия языка XHTML, но в 2009 разработка стандарта была приостановлена.

В 2004 году, сотрудники компаний, производителей браузеров (Apple, Mozilla Foundation и Opera Software (в лице Яна Хиксона; ныне работает в Google)) основали рабочую группу по вебу, гипертексту, приложения и технологиям (англ. Web Hypertext Application Technology Working Group), сокращенно WHATWG. Основатели WHATWG считали, что W3C слишком сосредоточился на разработке XHTML, вместо развития HTML. Группа начала разработку нового стандарта HTML, а в 2007 к ним присоединился и Консорциум всемирной паутины.

В 2014 году W3C и WHATWG выпустили пятую версию языка HTML. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети без необходимости использования сторонних API и плагинов. Другие новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удалён. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM стали основными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.

После выпуска HTML5, дальнейшее развитие стандарта HTML Консорциум всемирной паутины и WHATWG стали осуществлять уже независимо. Сотрудничество между организациями постепенно становилось всё менее эффективным.

Чтобы избежать появления двух конкурирующих, взаимно противоречивых стандартов, W3C и WHATWG договорились о новом формате совместной работы. А именно, согласно подписанному обеими организациями в 2019 году меморандуму, ведущая роль в работе над стандартами HTML и DOM принадлежит WHATWG, а W3C приглашает своих членов участвовать в работе WHATWG и утверждает стандарты WHATWG как свои официальные рекомендации.

ПО для создания и просмотра HTML документа

Гипертекстовый документ HTML представляет собой обычный текстовый файл, с расширением htm или html. В качестве кодировки обычно используют ANSI или UTF8. Современные стандарты рекомендуют для использования UTF8, иные кодировки стоит использовать только в случае необходимости.

Для создания и редактирования гипертекстового документа можно использовать обычный текстовый редактор ваше ОС (Notepad, nano, vi и т.п.). Однако предпочтительнее для этих целей использовать специализированные редакторы. Таких редакторов, на сегодняшний день, существует немало. Ниже рассмотрим самые популярные из них.

Notepad++ - один из самых известных и популярных редакторов. Простой и легкий, но при этом функциональный редактор. Выпускается с 2003 года. Свободное ПО с открытым исходным кодом. Поддерживает подсветку синтаксиса более чем для 100 языков программирования, в том числе и языка разметки HTML. Поддерживает установку дополнительных плагинов, расширяющих функционал

Sublime Text – отличный редактор с большим количеством плагинов. Позволяет проводить более гибкую настройку функционала и интерфейса чем Notepad++. Не смотря на то что редактор платный, соотношение его стоимости и возможностей остается на высоком уровне, поэтому его выбирают многие разработчики.

Visual Studio Code – по мнению автора, лучший выбор для разработчика веб-страниц на сегодня. Большое количество настроек и плагинов позволяют превратить редактор в полноценную среду разработки. Редактор разрабатывает компания Microsoft, он бесплатен и работает на разных ОС. В редактор интегрирован терминал и компонент для работы с системой контроля версий GIT. Доступные плагины позволяют решить массу задач, от сборки пакетов и компиляции препроцессоров, до отправки готовых файлов на хостинг.

Для просмотра гипертекстовых документов используют специальное программное обеспечение, называемое браузером. Браузеров существует множество, самыми популярными на сегодня являются: FireFox от компании Mozilla, Chrome от компании Google и Safari от Apple.

Базовая разметка HTML документа

Разметка элементов гипертекстового документа осуществляется при помощи тегов (дескрипторов). Все теги заключаются в знаки «<» и «>». Теги, использующиеся в HTML, бывают парными (<p></p>) и одиночными <br>. Парные теги состоят из открывающего и закрывающего тегов. Закрывающий тег отличается от открывающего знаком деления (слеш) перед телом тега. Использование его для парных тегов является обязательным для корректного отображения документа. Одинарные теги состоят из одного тега, и закрывающего тега для них не требуется.

Некоторые теги могут иметь атрибуты. Атрибуты записываются после тела тега через пробел, и обычно имеют какое-либо значение, указанное в кавычках после знака равенства (Рисунок 1).

Рисунок 1

Создание гипертекстового документа начинают с создания индексного файла. Индексный файл – это файл который веб сервер возвращает по умолчанию при обращении браузера к папке. Такой файл обычно имеет имя: index.html.

Начинаться HTML документ должен с одиночного тега <!DOCTYPE html>, который показывает что данный файл является документом HTML. Непосредственно эта запись, без указания версии стандарта и ссылки на спецификацию W3C указывает что используется HTML5. Все другие записи в настоящее время считаются устаревшими.

Далее следует двойной тег <html></html> внутри которого непосредственно располагается сам документ.

Основная часть документа HTML состоит из двух частей: головы и тела документа.

Голова документа находится между тегами <head></head> и содержит различную техническую информацию, которую используют браузеры и роботы поисковых систем. В заголовок помещают ссылки на таблицы стилей, JS скрипты, информацию о документе для поисковых систем и т.п. Единственная информация, из головы документа, которую может увидеть пользователь, это непосредственно заголовок документа, расположенный внутри тегов <title></title>. Его браузер отображает на вкладке браузера с этим документом (Рисунок 2). Остальную информацию, находящуюся в голове документа пользователи обычно не видят.

Рисунок 2

В голове документа помимо заголовка используют следующие теги:
<meta> определяет мета теги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к мета тегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один мета-тег, все они размещаются в контейнере <head>. Как правило, атрибуты любого мета тега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.