Web-технологии. Основы HTML презентация

Интернет
Предметом данного курса являются технологии глобальной сети World Wide Web (WWW или Web).
Сеть Веб представляет собой глобальное информационное пространство, основанное на физической инфраструктуре Интернета и протоколе передачи данных HTTP / HTTPS. Зачастую, говоря об Интернете, подразумевают именно сеть Веб.
Физической основой сети Веб является Интернет.

Веб-разработка
Веб-разработка — процесс создания веб-сайта или веб-приложения.
Этот процесс включает в себя веб-дизайн, вёрстку веб-страниц, веб-программирование, а также конфигурирование веб-сервера.
Современные веб-технологии предоставляют разработчикам неограниченные возможности для реализации своих идей. Для того, чтобы использовать весь их потенциал, необходимо знать как правильно их использовать.

Основные направления веб-технологий
Основы веб-разработки:
HTML
CSS
HTTP
Написание сценариев:
JavaScript
Веб API - средства, содержащие возможности для создания веб-сценариев, построения веб-контента и веб-приложений.
Веб-компоненты – набор различных технологий, позволяющих создавать собственные переиспользуемые элементы.
Графика (Canvas, SVG, WebDL).
Аудио, видео, мультимедиа и прочее.

HTML
HTML (Hypertext Markup Language) – это код, который используется для структурирования и отображения веб-страницы и её контента.
Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных.
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете.

HTML
Если обобщить, то эволюция языка HTML происходила примерно так:
HTML 1.0;
HTML 2.0 – 4.0;
XHTML (HTML + XML);
HTML 4.1
HTML 5.0
Dynamic HTML – подход к созданию интерактивного веб-сайта (HTML + CSS + JavaScript + DOM).

Основы HTML
HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе.
HTML-документ имеет расширение .html.
Как и любой язык, HTML поставляется с набором правил.
Эти правила относительно простые и сводятся к определению границ, чтобы знать, где что-то начинается и где заканчивается.

Основы HTML
HTML-документ состоит из дерева HTML-элементов и текста (контента). Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Основы HTML
HTML-элементы могут иметь атрибуты.
Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя_атрибута="значение".
Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Браузер интерпретирует HTML-документ, выстраивая его структуру и отображая ее в соответствии с инструкциями, включенными в этот файл.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала.

Структура веб-страницы
HTML тег – структурная единица разметки HTML документа.
Код HTML складывается из элементов, которые именуются тегами.

Некоторые теги

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

Введение в HTML5
Язык HTML5 удобен для веб-разработчиков и дизайнеров, так как он по большей части совместим с тем, что там уже есть – не требуется учить новые языки для использования HTML5.
Новые средства разметки работают таким же образом, как и старые, и новые API основываются большей частью на том же JavaScript/DOM, который разработчики программировали в течение многих лет.
Добавляет новые мощные средства в HTML, которые были ранее доступны в Web только с помощью технологии плагинов, такие как Flash, аудио и видео.

Свойства HTML5
Язык HTML5 содержит много новых свойств, что делает его более удобным для создания веб-приложений:
Новые семантические элементы (такие как
,
,
и
).
Новые свойства форм (к примеру, выбор даты).
Поддержка видео и аудио (элементы
и
).
API рисования на «холсте» (элемент
).
Веб-сокеты: Этот API позволяет открывать постоянное соединение между сервером и клиентом на определенном порте, и посылать данные в обоих направлениях.
Автономные веб-приложения.
Веб-хранилище.
Механизм Web-workers.
Геолокация.

Новые структурные элементы в HTML5
HTML5 содержит два новых основных компонента:
новые API, которые добавляют важные свойства к открытым стандартам модели веб-разработки,
новые структурные элементы, которые определяют специальные свойства веб-страницы со значительно более точной семантикой, чем это было доступно в HTML4.

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

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

Мета-отличия HTML5
doctype значительно проще, чем в более старых версиях HTML:
В HTML5 можно при желании игнорировать некоторые правила написания веб-страницы более старых версий HTML.
Фактически не нужно даже беспокоиться о том, чтобы использовать элементы , , или .
Если создать пример страницы HTML5 без этих элементов, загрузить ее в браузер и посмотреть исходный код загруженной страницы, то можно заметить, что они будут автоматически вставлены браузером.
Спецификация HTML5 определяет, как обрабатывать плохосформированную разметку, впервые определяя алгоритм синтаксического разбора.
Это означает, что даже если разметка выполнена неправильно, ее структура будет согласована с поддерживающими HTML5 браузерами.

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

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

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

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

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

Элементы
и

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

Элемент
С другой стороны дата внутри атрибута datetime представлена в стандарте ISO, и является машинно-читаемой датой.
Можно также добавить время в конце стандартного представления ISO следующим образом:
Можно добавить также настройку часового пояса, поэтому, например, чтобы представить последний пример в стандартном тихоокеанском времени, можно сделать следующее:

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

Элементы
и
Также можно структурировать следующим образом:

Другие элементы
Элемент
Элемент
является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Элемент
Элемент
предназначен для выделения терминов, значимых в данный момент, или выделения частей контента, к которым вы просто хотите привлечь внимание, но не хотите изменять семантическое значение.
Атрибут hidden
Атрибут hidden, когда применяется к любому элементу, скрывает его полностью от любых форм представления/медиа, и должен использоваться, если вы намерены показать контент позже, но не хотите, чтобы он отображался в данный момент.

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

Разбивка HTML5 и алгоритм заголовков HTML5
HTML5 решает эту проблему, создавая иерархию заголовков на основе относительного вложения различных разделов документа.
Новый раздел документа создается, когда вы используете так называемый разделяющий контент – элементы
,
,
, и
.

Разбивка HTML5 и алгоритм заголовков HTML5
HTML5 будет считать это как два заголовка первого уровня, так как
не является разделяющим элементом, и новый раздел в иерархии не создается.
Чтобы исправить это, необходимо заменить
на разделяющий элемент:

Специализированные элементы HTML5
HTML5 нацелен на стандартизацию некоторых из наиболее распространенных элементов управления форм, делая их отображение в браузерах проще.
Так как формы являются основным инструментом ввода данных в веб-приложениях, а требуемые для сбора данные стали более сложными, возникла необходимость создать элементы ввода с дополнительными возможностями.

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

Новые элементы управления форм
Элемент управления «ползунок» (scrollbar), позволяющий выбирать в диапазоне значений, в HTML5 создается легко – используйте просто тип ввода range (диапазон):

Новые элементы управления форм
Элементы управления датой/временем
HTML5 имеет ряд различных типов элементов ввода для создания сложных средств выбора даты/времени.
Например:

Новые элементы управления форм
Этот тип элемента ввода предоставляет элемент выбора цвета.

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

Новые элементы управления форм
Элемент
и атрибут list
До этого обычно использовались элементы
и
для создания выпадающих списков вариантов выбора для пользователей.
Но если же мы захотим создать список, который позволял бы пользователям выбирать из списка предложенных вариантов, а также позволял бы вводить собственные варианты, то в HTML5 можно использовать атрибут list, чтобы соединить обыкновенный элемент ввода со списком вариантов, определенным в элементе
.
Слайд 40
Новые элементы управления форм
Элемент
и атрибут list
Пример:
Слайд 41
Новые элементы управления форм
,
и
Как предполагают названия, эти и
для создания выпадающих списков вариантов выбора для пользователей.
Но если же мы захотим создать список, который позволял бы пользователям выбирать из списка предложенных вариантов, а также позволял бы вводить собственные варианты, то в HTML5 можно использовать атрибут list, чтобы соединить обыкновенный элемент ввода со списком вариантов, определенным в элементе
.

Новые элементы управления форм
Элемент
и атрибут list
Пример:

Новые элементы управления форм

Новые атрибуты
placeholder
Обычный удобный прием в веб-формах состоит в размещении замещаемого контента в текстовых полях ввода, который исчезает, когда элемент управления формы получает фокус (выбран в данный момент).
Для этой цели можно использовать атрибут placeholder:

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

Новые атрибуты
min и max
Эта пара атрибутов позволяет задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы (number, range, time или date).

Новые атрибуты
step
Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений:

Элемент
По сравнению со сложной конструкцией, необходимой для включения Flash на страницу, основная разметка необходимая для
в HTML5 удивительно проста:

Элемент
Атрибуты элемента
, использованные в примере кода, вполне понятны:
src
Источник элемента, задающий URL видео-файла.
width и height
Можно явно задавать размеры видео изображения.
Если задать одно из значений, то браузер задаст размер неопределенной размерности, чтобы сохранить пропорции изображения видео.