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

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


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

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

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

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

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

Содержание

History of HTMLHTML first published199120122002 -20092000HTML 2.0HTML 3.2HTML 4.01XHTML 1.0XHTML 2.0HTML5199519971999HTML5 на много более толерантен и может поддерживать разметку всех предыдущих версий.HTML5 был официально представлен в 2012 и разрабатывался с 2004.После релиза HTML 4.01, акцент сместился
Введение в HTML5 History of HTMLHTML first published199120122002 -20092000HTML 2.0HTML 3.2HTML 4.01XHTML 1.0XHTML 2.0HTML5199519971999HTML5 на Что такое HTML5?HTML5 является последней версией HTML, только недавно набирает частичную поддержку Задачи HTML5Поддержка всех существующих веб-страниц. С HTML5, нет никаких требований, чтобы вернуться Новые элементы в HTML5Таковы лишь некоторые из новых элементов в HTML5. HTML5 – Семантика и структурные элементыHTML5 вводит многочисленные новые элементы, чтобы помочь HTML5 – структурированный пример HTML – не структурированный пример Другие новые функции HTML5 Встроенный аудио и видео поддержка (без плагинов)Расширенные формы HTML5 - ВидеоНедавно введеный тег дает возможность просмотра в браузере следующих видео-форматов:MP4OggWebMАттрибуты:width, HTML5 – ВидеоHTML5 совместимость с аудио форматамиHTML5 syntax: HTML5 – SourceЭлемент используется для определения файла-источника для элементов и Это позволяет HTML5 - TrackЭлемент позволяет загружать текстовые треки в элементы и HTML5 syntax: HTML5 – Аудио Новый тег позволяет проигрывать в браузере следующие форматы:MP3OggWAVМногие атрибуты, HTML5 – АудиоHTML5 совместимость с браузерамиHTML5 syntax: HTML5 Мультимедиа vs. FlashHTML5:+: Стандартный язык разметки, кросс-платформенный, доступ через APIs, без HTML5 – Расширеные формыdatalistdatalist реализует автозаполнение формы ввода из предоставляемого списка автозаполненияrequiredатрибут HTML5 – Extended Forms (cont.)Many new values have been added for the HTML5 – Graphics and AnimationsHTML5 allows for the rendering(надання) of graphics and HTML5 – Graphics and AnimationsCSS3 is fully supported in HTML5 and improves HTML5 - ConclusionHTML5 introduces:Improved semantics to web documentsMultimedia elements, including and Extended First Look at HTML5Remember the DOCTYPE declaration from XHTML?In HTML5, there is The ElementThis is what the element looked like in XHTML:Again, HTML5 simplifies The SectionHere is a typical XHTML section:  My First XHTML Page Basic HTML5 Web PagePutting the prior sections together, and now adding the Viewing the HTML5 Web PageEven though we used HTML5, the page looks
Слайды презентации

Слайд 2 History of HTML

HTML first published
1991
2012
2002 -2009
2000
HTML 2.0
HTML 3.2
HTML

History of HTMLHTML first published199120122002 -20092000HTML 2.0HTML 3.2HTML 4.01XHTML 1.0XHTML 2.0HTML5199519971999HTML5

4.01
XHTML 1.0
XHTML 2.0
HTML5
1995
1997
1999
HTML5 на много более толерантен и может

поддерживать разметку всех предыдущих версий.

HTML5 был официально представлен в 2012 и разрабатывался с 2004.

После релиза HTML 4.01, акцент сместился к XHTML и его строгим стандартам.

XHTML 2.0 имел еще более строгие стандарты, чем 1.0, отклоняя страницы не были составлены правильно. Его популярность упала и от него практически отказались в 2009.


Слайд 3 Что такое HTML5?
HTML5 является последней версией HTML, только

Что такое HTML5?HTML5 является последней версией HTML, только недавно набирает частичную

недавно набирает частичную поддержку со стороны производителей браузеров.
Она включает

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

Слайд 4 Задачи HTML5
Поддержка всех существующих веб-страниц. С HTML5, нет

Задачи HTML5Поддержка всех существующих веб-страниц. С HTML5, нет никаких требований, чтобы

никаких требований, чтобы вернуться и пересмотреть старые сайты.
Снижение потребности

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

Слайд 5 Новые элементы в HTML5












Таковы лишь некоторые из новых

Новые элементы в HTML5Таковы лишь некоторые из новых элементов в HTML5.

элементов в HTML5.







Слайд 6 HTML5 – Семантика и структурные элементы
HTML5 вводит многочисленные

HTML5 – Семантика и структурные элементыHTML5 вводит многочисленные новые элементы, чтобы

новые элементы, чтобы помочь правильно структурировать документы HTML5:
-

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

Слайд 7 HTML5 – структурированный пример

HTML5 – структурированный пример

Слайд 8 HTML – не структурированный пример

HTML – не структурированный пример

Слайд 9 Другие новые функции HTML5
Встроенный аудио и видео

Другие новые функции HTML5 Встроенный аудио и видео поддержка (без плагинов)Расширенные

поддержка (без плагинов)
Расширенные формы элементов управления и атрибуты
Холст (способ

рисовать прямо на веб-странице)
Drag and drop функциональность
Поддержка CSS3 (более новая и более мощная версия CSS)
Более продвинутые функции для веб-разработчиков, такие как хранение данных и offline приложения.

Слайд 10 HTML5 - Видео
Недавно введеный тег дает возможность

HTML5 - ВидеоНедавно введеный тег дает возможность просмотра в браузере следующих

просмотра в браузере следующих видео-форматов:
MP4
Ogg
WebM
Аттрибуты:
width, height – размер видео-плеера
src

– источник видео
controls – элементы управления
autoplay – автостарт видео
loop – автоматически повторять видео

Слайд 11 HTML5 – Видео
HTML5 совместимость с аудио форматами
HTML5

HTML5 – ВидеоHTML5 совместимость с аудио форматамиHTML5 syntax:

syntax:


Слайд 12 HTML5 – Source
Элемент используется для определения файла-источника

HTML5 – SourceЭлемент используется для определения файла-источника для элементов и Это

для элементов и
Это позволяет задать несколько источников

для элемента

Слайд 13 HTML5 - Track
Элемент позволяет загружать текстовые треки

HTML5 - TrackЭлемент позволяет загружать текстовые треки в элементы и HTML5 syntax:

в элементы и
HTML5 syntax:





Слайд 14 HTML5 – Аудио
Новый тег позволяет проигрывать

HTML5 – Аудио Новый тег позволяет проигрывать в браузере следующие форматы:MP3OggWAVМногие

в браузере следующие форматы:
MP3
Ogg
WAV
Многие атрибуты, включенные в элементы

доступны и для

Слайд 15 HTML5 – Аудио
HTML5 совместимость с браузерами

HTML5

HTML5 – АудиоHTML5 совместимость с браузерамиHTML5 syntax:

syntax:



Слайд 16 HTML5 Мультимедиа vs. Flash
HTML5:
+: Стандартный язык разметки, кросс-платформенный,

HTML5 Мультимедиа vs. FlashHTML5:+: Стандартный язык разметки, кросс-платформенный, доступ через APIs,

доступ через APIs, без внешних плагинов
-: Нет встроеного полноэкранного

режима, не все используют совместимые с HTML5 браузеры, долгосрочные ограничения по стандартизации, не может отображать live-streaming (живой поток), сложность адаптации под новые стандарты
Adobe Flash
+: Более популярен и понятен
-: Внешние плагины, не поддерживается на некоторых устройствах, не является веб-стандартом

Слайд 17 HTML5 – Расширеные формы
datalist
datalist реализует автозаполнение формы ввода

HTML5 – Расширеные формыdatalistdatalist реализует автозаполнение формы ввода из предоставляемого списка

из предоставляемого списка автозаполнения
required
атрибут required обязывает пользователя ввести данные

в форму ввода
output
элемент output производит вычисления и выводит результат в поля формы

Слайд 18 HTML5 – Extended Forms (cont.)
Many new values have

HTML5 – Extended Forms (cont.)Many new values have been added for

been added for the element’s type attribute:
date, time,

and datetime – display datetime pickers
number – displays a spinner for inputting a number
email, url, telephone – these types of inputs, among others, are used for data validation
range – displays a movable slider to specify values
color – displays a color picker for choosing color values in hex

Слайд 19 HTML5 – Graphics and Animations
HTML5 allows for the

HTML5 – Graphics and AnimationsHTML5 allows for the rendering(надання) of graphics

rendering(надання) of graphics and animations in-browser
One way HTML5 accomplishes(виконує)

this is through(через) the new element
creates a 2D canvas in which graphics can be drawn via scripting
JavaScript
WebGL
SVG

Слайд 20 HTML5 – Graphics and Animations
CSS3 is fully supported

HTML5 – Graphics and AnimationsCSS3 is fully supported in HTML5 and

in HTML5 and improves on styling options available
SkewingНахил, rotationобертання,

and scalingмасштабування can be done in CSS3
CSS3 allows(дозволяє) for easily downloadable(завантажені) fonts(шрифти) locally stored(зберігаються) on the web-server
Animations and transitions can be coded using CSS3
Page layouts(макети) can easily be done using CSS3

Слайд 21 HTML5 - Conclusion
HTML5 introduces:
Improved semantics to web documents
Multimedia

HTML5 - ConclusionHTML5 introduces:Improved semantics to web documentsMultimedia elements, including and

elements, including and
Extended information gathering via improved

forms Розширена інформація збір через поліпшені форми
Graphics and animations without the need for third-party plugins

Слайд 22 First Look at HTML5
Remember the DOCTYPE declaration from

First Look at HTML5Remember the DOCTYPE declaration from XHTML?In HTML5, there

XHTML?

In

HTML5, there is just one possible DOCTYPE declaration and it is simpler:


Just 15 characters!

The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration.


Слайд 23 The Element
This is what the element

The ElementThis is what the element looked like in XHTML:Again, HTML5

looked like in XHTML:

Again, HTML5 simplifies

this line:


Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar".

The lang attribute in the element declares which language the page content is in. Though not strictly required, it should always be specified, as it can assist search engines and screen readers.


Слайд 24 The Section
Here is a typical XHTML

The SectionHere is a typical XHTML section: My First XHTML Page

section:


My First XHTML

Page


And the HTML5 version:

Notice the simplified character set declaration, the shorter CSS stylesheet link text, and the removal of the trailing slashes for these two lines.



My First HTML5 Page



Слайд 25 Basic HTML5 Web Page
Putting the prior sections together,

Basic HTML5 Web PagePutting the prior sections together, and now adding

and now adding the section and closing tags,

we have our first complete web page in HTML5:





My First HTML5 Page



HTML5 is fun!




Let's open this page in a web browser to see how it looks…


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