Энциклопедия HTML5 » Обзор HTML5

HTML5 шаблон

Damir — Sun, 14 Jun 2015 12:27:01 +0000

Шаблон для сайта на HTML5

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

Шаблон кода на HTML5, может выглядеть следующим образом:



    
    
    
        
        
        
        Название страницы
        
    
    
    
    
        

            Шапка страницы
            
            Основное меню страницы
            
            

                Основная статья страницы
                
                Сайдбар

            
 
            
            Подвал страницы

Рзберем построчно код шаблона HTML5.

— назначем кодировку UTF-8.
— если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.
— грамотное отображение сайта на мобильных устройствах.
— вам нужно будет найти и скачать себе файл normalize.css или использовать CSS-фреймворк Bootstrap.
.wrapper — обертка для всего кода находящегося в теге body.
header — шапка страницы сайта, в нём обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.
nav — основное меню страницы сайта.
.main — "срединная" обертка для основного контента (статьи) и сайдбара (боковой панели) сайта.
article — основной контент страницы: статья, запись в блоге, тема форума и т.д. Может содержать текст, изображения, видео, таблицы и т.д.
aside — сайдбар (боковая панель) сайта, обычно содержит различные виджеты типа: рубрики, метки, последние записи/комментарии, дополнительное меню, счетчики и т.д.
footer — подвал страницы сайта, обычно содержит правовую информацию (копирайты), контактную информацию (адреса, телефоны) и т.д.

Запись HTML5 шаблон впервые появилась Энциклопедия HTML5.

Новые технологии в HTML5

Damir — Fri, 12 Jun 2015 14:48:03 +0000

Новые технологии в языке HTML5

В этой статье-обзоре будут собираться и описываться новые технологии появившиеся в HTML5.

Семантика и структура сайта

В HTML5, появились семантические теги разделяющие структуру страницы сайта:

— обрамляют основной контент страницы (статью),

— обрамляют шапку страницы,

— обрамляют подвал страницы,

— обрамляют основное меню страницы,

— обрамляют боковую панель страницы (сайдбар),

— обрамляют повторяющиеся блоки на странице (например комментарии).

Мультимедиа

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

Раньше, чтобы просмотреть видеролик, прослушать музыку или поиграть в игрушку, в браузер нужно было загружать дополнительные плагины разработанные сторонними разработчиками (например флэш-плеер). Теперь благодаря HTML5 всё это можно делать без загрузки плагинов.

Тег <сanvas>

Тег <сanvas> — это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими. Тег создан для того, чтобы заменить собою технологию Flash. С помощью тега можно рисовать векторные фигуры (изображения), а с помощью JavaScript, манипулировать данными фигурами, создавая тем самым анимацию (мультфильмы и даже игры) на сайте.

Аудио/Видео

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

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

API JavaScript

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

Поддержка XML-технологий

В HTML-документ написанный с помощью языка HTML5, отныне можно внедрять технологии связанные с различными XML-форматами, например такими как SVG или MathML.

SVG

SVG — Scalable Vector Graphics (язык разметки масштабируемой векторной графики), является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.

Пример кода рисунка "зелёный круг":

Результат:

А вот что рисуют крутые пацаны с помощью SVG —
герб Шотландии на Википедии.

MathML

MathML — Mathematical Markup Language (язык математической разметки) XML-формат. С помощьюданного формата, можно описывать различные математические формулы.

Читать далее: Учебник HTML5

Запись Новые технологии в HTML5 впервые появилась Энциклопедия HTML5.

Формы HTML5

Damir — Fri, 12 Jun 2015 14:45:23 +0000

Новые формы в языке HTML5

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

Тег

Новые атрибуты и их значения в теге form:

autocomplete="on/off" — включает/отключает автозаполнение у форм, если в браузере автозаполнение отключено, то атрибут не работает
novalidate="novalidate" — отключает встроенную проверку данных, введённых пользователем в поля и

Тег

Рассмотрим новые атрибуты HTML5 и их значения в теге input:

autocomplete="on/off" — включает/отключает автозаполнение у тега input, если в браузере автозаполнение отключено, то атрибут работать не будет.

autofocus="autofocus" — установка фокуса на элемент.

form="idNameForm" — связывает тег input, с формой по его атрибуту id, при условии что тег input, находится вне формы.

formaction="URL" — указывает на адрес программы, которая будет обрабатывать данные введённые в тег input, аналогичен атрибуту action=" " у тега form

formenctype=" " — указывает на способ кодировния данных при их отправки на сервер, аналогичен атрибуту enctype=" ", у тега form, имеет следующие значения:
application/x-www-form-urlencoded — не латинские символы кодируются их шестнадцатеричными кодами, пробелы заменяются знаком +, является значением по умолчанию,
multipart/form-data — данные не кодируются,
text/plain — данные не кодируются, но пробелы заменяются знаком +

formmethod="get/post" — указывает каким методом отправить данные, post или get

formnovalidate="formnovalidate" — отключает встроенную проверку данных, аналогичен атрибуту novalidate="novalidate" у тега form

formtarget="имя окна/_blank/_self/_parent/_top" — указывет на окно в которое будет загружаться, результат обработки данных, аналогичен атрибуту target=" " у тега form

list="idName" — указывает на значение идентификатора id тега datalist, в котором находится список вариантов появляющиеся при вводе текста в поле.

max="число" — указывает на максимальное число, которое можно ввести в поле.

min="число" — указывает на минимальное число, которое можно ввести в поле.

multiple="multiple" — позволяет указать несколько e-mail адресов, в поле через запятую, или загрузить несколько файлов.

pattern="шаблон" — позволяет создавать шаблоны, исходя из которых принимается решение о верности или не верности введённых данных, атрибут предназначен для создания полей ввода, для различных типов данных.

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

readonly="readonly" — указывает на текстовое поле, в которое пользователь не может ввести данные.

required="required" — указывает на текстовое поле, которое обязательно должно быть заполненным, если пользователь попытается отправить данные не заполнив это поле, то браузер выдаст об этом сообщение ввиде всплывающей подсказки.

step=" " — указывает на шаг, при введении чисел.

Атрибут type=" "

У атрибута type=" " в языке HTML5, добавилось следующие значения:

type="color" — создаёт виджет выбора цвета.

type="date" — создаёт поле для ввода даты, при помощи виджета календаря (далее ВК).

type="datetime" — создаёт поле для ввода даты и времени, (ВК)

type="datetime-local" — создаёт поле для ввода даты и местного времени, (ВК)

type="email" — создаёт поле для ввода e-mail

type="month" — создаёт поле для ввода месяца, (ВК).

type="number" — создаёт поле для ввода числа.

type="range" — создаёт ползунок.

type="search" — создаёт поисковое поле.

type="tel" — создаёт поле для ввода телефонного номера.

type="time" — создаёт поле для ввода даты и времени, (ВК), без часового пояса.

type="url" — создаёт поле для ввода url.

type="week" — создаёт поле для ввода недели (ВК).

Тег

Теги используются для шифровки и расшифровки данных.

Тег

Теги создают область для вывода работы скрипта.

Читать далее: Новые технологии HTML5

Запись Формы HTML5 впервые появилась Энциклопедия HTML5.

Глобальные атрибуты HTML5

Damir — Fri, 12 Jun 2015 14:44:03 +0000

Новые глобальные атрибуты в HTML5

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

Рассмотрим названия и описания глобальных атрибутов HTML5:

accesskey=" " — позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
class=" " — позволяет устанавливать имя класса,
contenteditable=" " — позволяет редактировать содержимое элемента Новый,
contextmenu=" " — позволяет создавать контекстное меню для элемента Новый,
dir=" " — позволяет управлять направлением текста,
draggable=" " — позволяет пользователю перетаскивать элемент Новый,
dropzone=" " — позволяет указывать, что делать с элементом при перетаскивании Новый,
hiden=" " — позволяет скрывать элемент Новый,
id=" " — позволяет устанавливать уникальный идентификатор для элемента,
lang=" " — позволяет указывать код языка в содержимом элемента,
spellcheck=" " — позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
style=" " — позволяет создавать стиль для элемента,
tabindex=" " — позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab,
title=" " — позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.

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

Читать далее: Новые веб формы в HTML5

Запись Глобальные атрибуты HTML5 впервые появилась Энциклопедия HTML5.

Устаревшие атрибуты HTML5

Damir — Fri, 12 Jun 2015 14:40:43 +0000

Какие атрибуты в HTML5, являются устаревшими?

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

В спецификации HTML5, у различных тегов устарели следующие атрибуты:

У тега устарели атрибуты charset=" ", coords=" ", shape=" ", methods=" ", name=" ",
rev=" " и urn=" ". Вместо атрибута name=" ", у якорей, нужно использовать атрибут id=" ".

У тега устарел атрибут nohref=" ".

У тега устарели атрибуты alink=" ", bgcolor=" ", link=" ", marginbottom=" ", marginheight=" ", marginleft=" ", marginright=" ", margintop=" ", marginwidth=" ", text=" " и vlink=" ".

У тега
устарел атрибут clear=" ".

У тега устарел атрибут name=" ".

У тега устарел атрибут profile=" ".

У тега устарел атрибут version=" ".

У тега устарел атрибут longdesc=" ".

У тега устарели атрибуты border=" ", longdesc=" ", lowsrc=" " и name=" ".

У тега устарел атрибут usemap=" ".

У тега устарели атрибуты charset=" ", methods=" ", rev=" ", target=" ", type=" " и urn=" ".

У тега устарел атрибут scheme=" ".

У тега устарел атрибут name=" ".

У тега устарели атрибуты archive=" ", classid=" ", code=" ", codebase=" ", codetype=" ", declare=" " и standby=" ".

У тега устарели атрибуты type=" " и valuetype=" ".

У тега

5. При внедрении CSS стилей, теперь в теги

6. Ссылка <а> — это строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.


В HTML4 или XHTML1, валидное обрамление ссылками выглядело так:

Заголовок
Абзац
Теперь при HTML5, можно делать так:

 Заголовок
 Абзац
Читать далее: Синтаксис HTML5
Запись Изменения в коде HTML5 впервые появилась Энциклопедия HTML5.