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

Основы программирования на языке HTML (Краткая история языка HTML)

Содержание:

Введение

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

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

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

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

Для понимания текущего состояния языка и перспектив его развития необходимо ознакомиться с краткой историей его появления и развития.
Познакомиться с основными принципами создания гипертекстовых документов, базовой разметкой языка, его основными тегами и их особенностями.
Рассмотреть текущую, актуальную редакцию HTML5. Ее особенности и нововведения.
Поскольку современный 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.

<link> Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

<script> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

<noscript> используется для предоставления альтернативного контента для пользователей, у которых отключены скрипты в браузере, или у которых браузер их не поддерживает. Элемент noscript может содержать все элементы, которые могут использоваться в элементе body нормальной HTML страницы. Контент внутри элемента noscript будет показан при условии, что скрипты не поддерживаются или отключены в браузере.

Последние два тега можно использовать не только в голове, но и в теле документа.

Тело документа содержит в себе основной видимый контент. Находится оно между открывающим и закрывающим тегами <body></body>.

Следует отметить, что использование тегов <head>, <body> и <html> не является обязательным в текущей, пятой редакции HTML. Однако и сообщество разработчиков и организации, занимающиеся развитием HTML, сходятся на том, что их применение является правилом хорошего тона.

Основные теги

Различие строчных и блочных тегов.

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

Блочные элементы представляют собой большие строительные блоки веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.

Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.

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

Теги разметки текста

Теги <h1>-<h6>. HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. В настоящее время принято за правило использовать на странице только один заголовок первого уровня, в котором помещают основной заголовок, воспринимаемый поисковыми системами как основу семантики страницы. Заголовки второго – шестого уровня можно использовать в любом необходимом количестве

Тег <p> (параграф). Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста, идущие друг за другом, разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег <span>. Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.

Теги выделения текста <em>, <strong>, <mark>, <i>, <b>, <strike>. Эти теги используются для различного выделения частей текста. Позволяют изменять начертание шрифта в жирный, курсив, подчеркнутый, зачеркнутый и т.п. В настоящее время используются редко, обычно заменяются стилизованным при помощи CSS тегом <span>.

Ссылки

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис:

Атрибуты:

accesskey

Активация ссылки с помощью комбинации клавиш.

coords

Устанавливает координаты активной области.

download

Предлагает скачать указанный по ссылке файл.

href

Задает адрес документа, на который следует перейти.

hreflang

Идентифицирует язык текста по ссылке.

name

Устанавливает имя якоря внутри документа.

rel

Отношения между ссылаемым и текущим документами.

rev

Отношения между текущим и ссылаемым документами.

shape

Задает форму активной области ссылки для изображений.

tabindex

Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

target

Имя окна или фрейма, куда браузер будет загружать документ.

title

Добавляет всплывающую подсказку к тексту ссылки.

type

Указывает MIME-тип документа, на который ведёт ссылка.

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

Нумерованные и маркированные списки

Маркированные списки (или ненумерованные списки)

Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:

<li>Пункт 1</li>

<li>Пункт 2</li>

<li>Пункт 3</li>

</ul>

Сначала весь список берется в теги <ul> </ul>. Необходимо помнить, что теги открытия и закрытия списка – парные, требуется обязательный закрывающий тег.

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):

Элементы списка — тег <li>

Каждый элемент в списке обворачивают в отдельную пару тегов <li> </li>. Допускается не использовать закрывающий тег, в случае если дальше идет закрывающий родительский элемент, либо следующий элемент списка. Однако лучше всегда использовать закрывающий тег.

Приведенный выше список имеет общий атрибут type для списка <ul>, однако его можно так же задать для каждого элемента списка <li>.

Упорядоченный / нумерованный список

Если вы хотите упорядочить элементы списка, тогда необходимо использовать тег <ol>. По умолчанию он задает нумерованный список HTML:

<li> Пункт 1</li>

<li> Пункт 2</li>

<li> Пункт 3</li>

</ol>

Результат:

A. Пункт 1

B. Пункт 2

C. Пункт 3

Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

Свойство start, которое позволяет начать нумерацию с указанного номера:

<li> Пункт 1</li>

<li> Пункт 2</li>

<li> Пункт 3</li>

</ol>

Результат:

4. Пункт 1

5. Пункт 2

6. Пункт 3

Свойство reversed позволяет вывести нумерованный список в обратном порядке.

Изображения

Изображения добавляются в гипертекстовый документ с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа. Тег <img> является строчным, и имеет два обязательных атрибута: src и alt (Рисунок 3).

Рисунок 3

В атрибуте src указывают адрес изображения. Адрес изображения может быть указан полностью (абсолютный URL), например:

http://site.ru/folder/picture.jpg

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

../ — означает подняться вверх на один уровень, к корневому каталогу,

folder/ — перейти к папке folder,

picture.jpg — указывает на файл изображения.

В атрибуте alt указывается текст, который браузер покажет вместо изображения, в случае, если по какой-то причине, само изображение не будет обнаружено.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>:

...

</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

Тег <area> описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

</map>

Таблицы

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

Создание таблицы

Таблицы состоят из строк и столбцов ячеек, которые могут содержать текст рисунки и другие элементы. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц можно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. В настоящее время «табличная» верстка лидирует при создании различных E-mail рассылок и для оформления электронных писем, т.к. поддерживается практически всеми почтовыми программами.

Для добавления таблицы на страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы.

Внутри тега <table> можно использовать целую группу различных тегов, которые структурируют содержимое таблицы.

Тэги <thead>, <tbody>, <tfoot>. В современной спецификации HTML, таблицу принято разделять на 3 логические части: заголовок, тело и нижний колонтитул. При этом заголовок будет отображаться всегда в верхней части таблицы, нижний колонтитул в нижней, а тело таблицы между ними, вне зависимости от их положения в коде.

Содержимое таблицы в гипертекстовых документах подразделяется на строки, а строки, в свою очередь делятся на ячейки. Строки обозначают тегами <tr></tr>. Ячейки обозначают тегами <td></td>. В секции заголовка ячейки принято обозначать тегами <th></th> в таких ячейках текст выделяется полужирным начертание.

Атрибуты тегов ячеек таблицы:

colspan – позволяет объединить определенное количество ячеек по горизонтали. Значением атрибута должно являться целое число, определяющее количество этих ячеек.

rowspan – аналогично атрибуту colspan задает количество объединяемых ячеек по вертикали.

Тег <caption><caption> позволяет создать подпись к таблице.

Тег <colgroup></colgroup> используется для объединения одного или нескольких столбцов, выделяя логически однородные сегменты.

Пример кода таблицы:

<table>

<caption>Рыбы в речке</caption>

<thead>

<tr>

<th>Наименование</th>

<th>Количество</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="2">Итого:</td>

</tr>

</tfoot>

<tbody>

<tr>

<td colspan="3">Хищники</td>

</tr>

<tr>

</tr>

<tr>

<td>Окунь</td>

</tr>

<tr>

<td colspan="3">Мирные</td>

</tr>

<tr>

<td>Карась</td>

</tr>

<tr>

<td>Уклейка</td>

</tr>

</tbody>

</table>

Результат открытия такого документа в браузере можно увидеть на рисунке (Рисунок 4):

Рисунок 4

Блоки

В спецификации языка до HTML5 использовался только один блочный элемент: <div></div>. Данный тег обладает свойствами блочных элементов, описанными выше. Используется для разметки информации, представленной в документе. В спецификации HTML5 количество блочных элементов было существенно расширено за счет семантических тегов.

Формы

Формы – это часть документа HTML позволяющая пользователю взаимодействовать с программным обеспечением сервера. При помощи форм можно передавать на сервер различную информацию, файлы, картинки и т.п. Все элементы формы в документе HTML располагаются между парными тегами: <form></form>. Для тега <form> существует два атрибута: action и method. Первый указывает на адрес скрипта, который будет обрабатывать отправленные пользователем данные. Второй указывает метод передачи данных на сервер (GET или POST). Метод GET используется по умолчанию и передает данные непосредственно в строке URI. В этом случае данные открыты и видны пользователю, а так же ограниченны длинной строки URL (2048 символов). Метод POST передает данные в теле запроса браузера к серверу.

Внутри формы используются следующие элементы: <input>, <label> и <fieldset>. Так же в спецификации языка HTML5 можно использовать внутри формы элемент <button>, данный элемент, при использовании в форме, тождественен по своему действию элементу <input type=”submite”>.

Тег <input> - основной элемент формы. Позволяет указывать тип передаваемой информации и ассоциировать ее с определенной переменной. Основным атрибутом тега является атрибут type. Этот атрибут указывает не только тип передаваемой информации, но и особенности внешнего отражения элемента внутри формы. Основными значениями type являются:

text – текстовое поле для ввода
radio - радиокнопка
checkbox – кнопка флажок
submit – кнопка отправки формы
reset – кнопка сброса введенной информации
file – кнопка открытия диалога выбора файла для загрузки
hidden – скрытое поле ввода.

В стандарте HTML5 количество значений типов было серьезно расширено, появились такие значения type как:

color – выбор цвета в палитре
date – ввод даты в формате день, месяц, год
datetime-local - ввод даты и времени
email – поле для ввода электронной почты
range – бегунок выбора значения
tel - поле для ввода телефона
и другие

Тэг <fieldset> - позволяет визуально разделять элементы формы на группы и присваивать им общее описание. Общее описание задается внутри тега <fieldset> при помощи парного тега <legend></legend>. Например следующий код покажет результат, приведенный на рисунке (Рисунок 5).

<legend>Введите имя и фамилию</legend>

<input type="text" name="fname" id="fname"

placeholder="Имя">

<label for="lname">Ваша фамилия:</label>

<input type="text" name="lname" id="lname"

placeholder="Фамилия">

</fieldset>

Рисунок 5

Тэг <label> - парный тег заключающий в себе текстовое описание поля. По сути, является обычным текстом, единственным отличием от которого является атрибут for. В значении данного атрибута указывают уникальный идентификатор поля input, к которому относится метка. При клике по тексту метки фокус автоматически устанавливается на соотнесенное с ним поле.

Краткое описание HTML5

В 2014 году консорциум всемирной сети выпустил последнюю на текущий момент спецификацию языка гипертекстовой разметки – HTML5. Как я уже говорил, данная версия была существенно расширена. Появилось две дополнительные группы тегов: семантические и мультимедийные.

Семантические теги

Данная группа тегов предназначена для указания назначения той или иной части документа, как для браузера или поисковой системы, так и для разработчика веб-ресурса. Ранее для разметки страницы было принято использовать блочные элементы div, а их назначение указывалось при помощи селекторов каскадных таблиц стилей. Например, следующий код указывал? что документ состоит из заголовка, панели навигации, основной части с секцией «хлебных крошек» и основным текстовым содержанием, и нижнего колонтитула.

</div>

Используя семантические теги HTML5, данный фрагмент можно записать так:

<main>

</main>

Далее, в таблице, указано назначение семантических тегов HTML5.

Тег	Описание
<article>	Определяет статью
<aside>	Определяет блок сбоку от основного контента
<details>	Определяет дополнительную информацию, которую пользователь может открывать или закрывать
<figcaption>	Определяет пояснение для элемента <figure>
<figure>	Используется для группирования различных самодостаточных элементов - иллюстраций, диаграмм, фотографий, листингов кода и т.д.
<footer>	Определяет "подвал" документа или раздела
<header>	Определяет "шапку" документа или раздела
<main>	Определяет основной контент документа
<mark>	Определяет маркированный/подсвеченный текст
<nav>	Определяет блок навигационных ссылок
<section>	Определяет раздел в документе
<summary>	Определяет видимый заголовок элемента <details>
<time>	Определяет дату/время

Мультимедийные теги

В спецификации языка HTML5 появилась возможность использовать в документе мультимедийный контент (видео и аудио файлы).для этого используются парные теги <video> или <audio>.

Первый используется для вставки в документ видео файлов. Имеет следующие атрибуты:

Атрибут	Описание, принимаемое значение
autoplay	Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls	Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
height	Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop	Циклическое воспроизведение видеофайла.
muted	Выключает звук при воспроизведении видеофайла.
poster	URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload	Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки видеофайла.
src	Содержит абсолютный или относительный URL-адрес видеофайла.
width	Задает ширину окна для отображения видеоданных, возможные значения: px или %

Второй используется для вставки на страницу аудиофайлов и поддерживает аналогичный видео набор атрибутов.

Следует помнить, что разные браузеры поддерживают разные форматы сжатия видео и аудио (т.н. кодеки). Поэтому, для обеспечения корректно работы этих элементов в разных браузерах, необходимо использовать источники мультимедиа в разных форматах. Например, для аудио целесообразно одновременно использовать форматы wav и mp3.

Краткое описание каскадных таблиц стилей CSS

По мере развития языка HTML визуальное оформление документов становилось все более сложным. Появилась потребность в универсальном инструменте для работы с оформлением веб-документов. Таким инструментом стали каскадные таблицы стилей.

СSS - Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов.

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

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

Более того, можно сохранить описание стиля не в тексте самого веб-документа, а в отдельном файле – это позволит использовать описание стиля на любом количестве страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

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

Следует помнить, что современный язык HTML можно рассматривать исключительно в контексте симбиоза с каскадными таблицами стилей. По сути, связка HTML5/CSS3 на сегодняшний день является единым языком разработки веб-документов и интерфейсов.

Заключение

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

В инструментарии языка HTML существуют как инструменты для полноценной работы с текстом, списками и таблицами, так и инструменты для визуальной разметки документа (блоки) и взаимодействия с пользователями (формы).

В последней спецификации языка HTML5 значительно расширилось количество инструментов для удобной семантической разметки документов, что имеет большое значения для удобства восприятия документа поисковыми роботами и разработчиками веб-страниц. Так же появилось возможность использовать в документах мультимедиа файлы средствами HTML, без использования дополнительных надстроек.

Совместное использование HTML с языком каскадных таблиц стилей существенно расширяет его возможности и упрощает разработку больших и сложно оформленных документов. Эта связка позволяет использовать язык гипертекстовой разметки при разработке крупных интернет порталов и сложных интерфейсов.

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

Список использованной литературы

Дакетт Джон. HTML и CSS. Разработка и дизайн веб-сайтов / Дакетт Джон. - М: Эксмо, 2019. - 480 с.
История развития языка html [Электронный ресурс]: Лекция 2. Основы HTML. Возможности HTML5. - Южно-уральский институт управления и экономики. - Режим доступа: https://studfile.net/preview/5299588/ (дата обращения: 22.05.2020)
Сурин А.И. Введение в HTML [Электронный ресурс]. / А.И. Сурин, А.М. Русак, П.Б. Храмцов, С.А. Брик. - М: НОУ Интуит, 2003. - Режим доступа: https://www.intuit.ru/goods_store/ebooks/8175.
HTML [Электронный ресурс]: Википедия. Свободная энциклопедия. – Режим доступа: https://ru.wikipedia.org/wiki/HTML (дата обращения: 22.05.2020)
HTML5 [Электронный ресурс]: Википедия. Свободная энциклопедия. – Режим доступа: https://ru.wikipedia.org/wiki/HTML5 (дата обращения: 15.06.2020)
WHATWG [Электронный ресурс]: Википедия. Свободная энциклопедия. – Режим доступа: https://ru.wikipedia.org/wiki/WHATWG (дата обращения: 10.06.2020)