Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Введение в html5

Содержание

Большей частью обратно совместим с тем, что там уже есть — не требуется учить совершенно новые языки для использования HTML5. Новые средства разметки работают таким же образом, как и старые (хотя семантика некоторых элементов изменилась –
Введение в HTML5ст.преподаватель кафедры ПБИЕремеев Алексей Александрович Большей частью обратно совместим с тем, что там уже есть — не Добавляет новые мощные средства в HTML, которые были ранее доступны в Web Имеет четко определенный алгоритм синтаксического анализа, так что все браузеры, реализующие HTML5, Новые семантические элементы: Семантика является очень важной в HTML — мы всегда должны использовать для Новые свойства форм: HTML 4.01 уже позволяет создавать удобные, доступные web-формы, но некоторые общие свойства Собственная поддержка видео и аудио: В течение многих лет видео и аудио Рисования на холсте: Элемент  позволяет определить на странице область для рисования, и Автономные приложения web: HTML5 предоставляет ряд свойств, позволяющих приложениям web выполняться в автономном режиме. Кэши Геолокация: Спецификация геолокации (не являющаяся частью спецификации HTML5) определяет API, который позволяет приложению web легко HTML4 имеет множество семантических элементов, позволяющих четко определять различные свойства страницы Web, такие Люди могут понять разницу между различным контентом, но машины не могут —  и Новые тэги HTML 4.01:HTML5:Мета-различия Верхний колонтитул документа выглядит следующим образом:	 		 			A history of Pop Will Eat Copyright and attribution необходимо использовать для размещения контента нижнего колонтитула сайта. Элемент  предназначен для разметки навигационных ссылок или других конструкций (например, формы поиска), которые Элемент  предназначен для разметки фрагментов контента, которые имеют отношение к основному контенту, но Элемент  хорошо подходит, чтобы объединить весь контент, из которого вы хотите составить один Элемент  позволяет определить точно выраженное значение даты и времени, которое одновременно понятно человеку В основном элемент  предназначен для независимых фрагментов контента, которые будут иметь смысл вне Для всех браузеров, кроме одного, достаточно прописать в CSS:article, section, aside, hgroup, document.createElement('article'); 	document.createElement('section'); 	document.createElement('aside'); 	document.createElement('hgroup'); 	document.createElement('nav'); 	document.createElement('header'); 	document.createElement('footer'); 	document.createElement('figure'); 	document.createElement('figcaption'); Кроме IE
Слайды презентации

Слайд 2 Большей частью обратно совместим с тем, что там

Большей частью обратно совместим с тем, что там уже есть —

уже есть — не требуется учить совершенно новые языки

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

HTML5:


Слайд 3 Добавляет новые мощные средства в HTML, которые были

Добавляет новые мощные средства в HTML, которые были ранее доступны в

ранее доступны в Web только с помощью технологии плагинов,

такие как Flash, или с помощью сложного кода JavaScript и специальных приемов. Проверка форм и видео являются лучшими примерами.

Лучше подходит для написания динамических приложений, чем предыдущие версии HTML (HTML был создан первоначально для создания статических документов).

HTML5:


Слайд 4 Имеет четко определенный алгоритм синтаксического анализа, так что

Имеет четко определенный алгоритм синтаксического анализа, так что все браузеры, реализующие

все браузеры, реализующие HTML5, будут создавать одинаковое дерево DOM

из одной и той же разметки, независимо от правильности. Это огромный выигрыш для совместимости.

HTML5:


Слайд 5 Новые семантические элементы: Семантика является очень важной в HTML — мы

Новые семантические элементы: Семантика является очень важной в HTML — мы всегда должны использовать

всегда должны использовать для работы подходящий элемент. В HTML 4.01 мы

имеем проблему — да, существует много элементов для определения специальных средств, таких как таблицы, списки, заголовки, и т.д., но существует также много общих свойств web-страницы, которые не имеют элемента для их определения.

Представление: 


HTML5 содержит новые семантические элементы, такие как 

Слайд 6 Новые свойства форм: HTML 4.01 уже позволяет создавать удобные, доступные web-формы,

Новые свойства форм: HTML 4.01 уже позволяет создавать удобные, доступные web-формы, но некоторые общие

но некоторые общие свойства форм являются не слишком удобными

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

Свойства HTML5


Слайд 7 Собственная поддержка видео и аудио: В течение многих

Собственная поддержка видео и аудио: В течение многих лет видео и

лет видео и аудио в Web делалось, вообще говоря, с помощью Flash.


HTML5 содержит элементы

Слайд 8 Рисования на холсте: Элемент  позволяет определить на странице

Рисования на холсте: Элемент  позволяет определить на странице область для рисования,

область для рисования, и использовать команды JavaScript для рисования

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

Свойства HTML5


Слайд 9 Автономные приложения web: HTML5 предоставляет ряд свойств, позволяющих приложениям web выполняться

Автономные приложения web: HTML5 предоставляет ряд свойств, позволяющих приложениям web выполняться в автономном режиме.

в автономном режиме. Кэши приложений позволяют сохранить копию всех

ресурсов и других файлов, необходимых для локального выполнения приложения web. Приложение можно использовать, когда отсутствует соединение с сетью, и затем синхронизировать изменения с основной версией на сервере, когда сеть снова становится доступной.

Свойства HTML5


Слайд 10 Геолокация: Спецификация геолокации (не являющаяся частью спецификации HTML5)

Геолокация: Спецификация геолокации (не являющаяся частью спецификации HTML5) определяет API, который позволяет

определяет API, который позволяет приложению web легко получить доступ к данным в любом местоположении,

которое стало доступным, например, с помощью средств GPS устройства. 

Свойства HTML5


Слайд 11 HTML4 имеет множество семантических элементов, позволяющих четко определять

HTML4 имеет множество семантических элементов, позволяющих четко определять различные свойства страницы Web,

различные свойства страницы Web, такие как формы, списки, параграфы, таблицы

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

Введение в структурные элементы HTML5


Слайд 12 Люди могут понять разницу между различным контентом, но

Люди могут понять разницу между различным контентом, но машины не могут

машины не могут — браузер не видит различные div как верхние

и нижние колонтитулы и т.д. Он видит их как различные div.
Даже если для решения некоторых из этих проблем используется дополнительный код, вы можете сделать это надежно только для собственных web-сайтов, так как другие разработчики web будут использовать другие имена классов и ID, особенно, если рассмотреть международную аудиторию — различные разработчики web в разных странах будут использовать различные языки для записи имен своих классов и id.

Проблемы:


Слайд 13







 и 
Новые тэги

 и Новые тэги

Слайд 14 HTML 4.01:


HTML5:

HTML 4.01:HTML5:Мета-различия

html>
Мета-различия


Слайд 15 Верхний колонтитул документа выглядит следующим образом:



A history

Верхний колонтитул документа выглядит следующим образом:	 		 			A history of Pop Will

of Pop Will Eat Itself
Introducing the legendary Grebo

Gurus!



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



Слайд 16
Copyright and attribution


 необходимо использовать для размещения контента

Copyright and attribution необходимо использовать для размещения контента нижнего колонтитула сайта.

нижнего колонтитула сайта.


Слайд 17 Элемент  предназначен для разметки навигационных ссылок или других конструкций

Элемент  предназначен для разметки навигационных ссылок или других конструкций (например, формы поиска),

(например, формы поиска), которые направляют вас на различные страницы

текущего сайта, или различные области текущей страницы. Другие ссылки, такие как рекламные ссылки, не учитываются.


Слайд 18 Элемент  предназначен для разметки фрагментов контента, которые имеют отношение

Элемент  предназначен для разметки фрагментов контента, которые имеют отношение к основному контенту,

к основному контенту, но не вписываются явно в основной

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

Слайд 19 Элемент  хорошо подходит, чтобы объединить весь контент, из которого

Элемент  хорошо подходит, чтобы объединить весь контент, из которого вы хотите составить

вы хотите составить один рисунок, будет ли это текст,

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

и


Слайд 20 Элемент  позволяет определить точно выраженное значение даты и времени,

Элемент  позволяет определить точно выраженное значение даты и времени, которое одновременно понятно

которое одновременно понятно человеку и машине.
Текст между открывающим и

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





Слайд 21 В основном элемент  предназначен для независимых фрагментов контента, которые

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

будут иметь смысл вне контекста текущей страницы, и могут

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

и


Слайд 22 Для всех браузеров, кроме одного, достаточно прописать в

Для всех браузеров, кроме одного, достаточно прописать в CSS:article, section, aside,

CSS:

article, section, aside, hgroup, nav, header, footer, figure, figcaption

{ display: block; }

Как заставить это работать в старых браузерах


  • Имя файла: vvedenie-v-html5.pptx
  • Количество просмотров: 143
  • Количество скачиваний: 0