Новые элементы HyperText Markup Language презентация

Содержание

Слайд 1

HTML


HTML 4.0
XHTML

1.x


XHTML 2


HTML 5.x


HTML 5.1




html

title

body

p

HTML

HTML 4.0

head


XHTML 1.x

XHTML 2

HTML 5.x

HTML 5.x



















































1

HyperText Markup Language

Слайд 2

















































2
HyperText Markup Language
– обратная совместимость с существующими браузерами

и технологиями;
– новые мультимедийные возможности,  которые ранее были доступны только с помощью других технологий (Flash, JavaScript и т. д.);
– новые семантические НТМL-элементы;
– новые свойства форм;
– перетаскиваемые элементы Drag and Drop;
– свободная поддержка аудио и видео;
– рисование на холсте;
– клиентское хранилище данных;
– адаптирован для разработки динамических интернет-при-ложений;
– четкий алгоритм синтаксического анализа;
– улучшенное восприятие разметки страницы ;
– контейнер div полностью заменяется семантическими элементами.

Слайд 3

















Неправильно:
Правильно:
1.
2.
3.
4.
5.
6.

(или )


some text
some text

&

href="/page2">
&




















































3

HTML+ eXtended Markup Language

Слайд 4








Новые элементы:
, , , , , , , , ,

Слайд 5








Секционные элементы:
, , , , , ,

Группировка контента:
,

Семантика для

текстового содержимого:
, ,

Слайд 6 — указание на название статьи/книги;
— контактная информация автора;
—

«интонация» текста;
— указание на важность;
— изменение стиля, без важности;
— мелкий шрифт (например, copyright).




















































6

Семантические элементы

Слайд 7


























































7
Наиболее популярные имена ID и class

Слайд 8

















































8
Секционные элементы

Слайд 9

















































9
Секционные элементы

Слайд 10










Верхняя секция интернет-приложения. Содержит заголовок, метаданные, относящиеся к данному контенту.

Интернет-приложение




Интернет-приложение






















































10


Слайд 11





Элемент используется для представления информации о авторе, авторском

праве, ссылок на связанные интернет-страницы.


...

Copyright@2016



















































11


Слайд 12













Предназначен для создания блока навигации или главных навигационных разделов. На странице

может быть несколько элементов 

Слайд 13 Определяет блок («боковая панель») сбоку от контента для размещения рубрик, ссылок

и другой информации, связанной с контентом напрямую.




















































13

Слайд 14 – используется в качестве контейнера для любого независимого (автономного) раздела

страницы.
– используется в качестве контейнера для объектов, которые объединены общим смыслом; применяется для разбивки текста на разделы.



























































14

,

Слайд 15
– используется для группирования любых элементов, например, изображений и подписей

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


Рисунок 1





















































15




Слайд 16

















































16
Семантические элементы















@Copyright 2010











links

@Copyright 2010


Слайд 17  предназначен для добавления небольшой аннотации сверху или снизу от заданного

текста. 

1A
2Б


  помечает текст как выделенный.  
HTML 4.0; XHTML 1.x; XHTML; HTML 5.x;
HTML 5



















































17

Семантика текстового содержимого

Слайд 18 создает список вариантов, которые можно выбирать

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



















































18

Интерактивные элементы

HTML:










Слайд 19
 используется для хранения информации, которую можно скрыть

и отображать по требованию пользователей.


HTML 4.0; XHTML 1.x; XHTML; HTML 5.x; HTML 5.

HTML 4.0; XHTML 1.x; XHTML; HTML 5.x; HTML5.




















































19

Интерактивные элементы

Слайд 20

















































20
Создание простой формы

Слайд 21

















































21
Создание простой формы
 

NAME – определяет имя

формы, обычно не указывается. Применяетсядля идентификации формы, если в документе присутствует несколько форм.
ACTION – обязательный параметр, он задает путь к серверному сценарию который будет выполняться сервером.
METHOD – определяет способ отправки параметров формы. Принимает значение GET или POST.

Слайд 22

















































22
Добавление подсказок


placeholder="Введите текст для поиска">



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

Слайд 23

















































23
Добавление подсказок
Введите код доступа


title="Ваш код должен состоять из цифр и букв">


Слайд 24

















































24
Фокус
Name*

Атрибут autofocus устанавливает

фокус элемента после загрузки страницы. В HTML5 фокус можно применить несколькими способами:
– autofocus
– autofocus=«»
– autofocus=«autofocus»
В XHTML5 следует применять стиль autofocus="autofocus"

Слайд 25

















































25
Проверка на стороне клиента

/>


Слайд 26

















































26
Отключение проверки



value="Не проверять" />










Слайд 27

















































27
Проверка с помощью регулярных выражений
Код


title= "Ваш код должен состоять из трех цифр и
трех букв" pattern="[A-Z]{3}-[0-9]{3}">

Слайд 28

















































28
Проверка с помощью регулярных выражений
[A-Z]{3}-[0-9]{3}

QRB-001
TTT-952
LAA-000

qrb-001
TTT-0952
LA5-000

Слайд 29

















































29
Специализированная проверка
Адрес



function validateComments(input) {
if (input.value.length

< 20) {
input.setCustomValidity(«Пожалуйста, напишите подробно");
}
else {
// Длина комментария отвечает требованию.
// Очищаем предыдущие сообщения об ошибке.
input.setCustomValidity(""); }
}

Слайд 30

















































30
Специализированная проверка
– onclick – код скрипта будет выполнен

после щелчка мыши.
– ondrag – код скрипта выполнен при перетаскивании элемента.
– onmousedown – код скрипта будет выполнен, когда будет нажата клавиша мыши.
– onmousemove – код скрипта будет выполнятся при передвижении курсора мыши.
– ondblclick – код скрипта будет выполнен после двойного щелчка мыши.
– onchange – код скрипта будет выполнен при изменении содержимого формы.
– oninput – код скрипта будет выполнен при введении пользователем информации в элемент.
– onsubmit – код скрипта будет выполнен при отправке формы.

Слайд 31

















































31
Атрибут form



charset="utf-8">
Тег input, атрибут form








Слайд 32

















































36
Новые типы элемента
определяет адрес обработчика формы









Слайд 33

















































37
Новые типы элемента
сообщает браузеру метод передачи данных

формы на сервер








Слайд 34

















































32
Атрибуты элемента
Атрибут spellcheck
По умолчанию разные

браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению

Атрибут autocomplete

Имя:


Пароль:



Атрибут multiple

title="Загрузите одну или несколько фотографий">


Укажите почтовые адреса через запятую:



Слайд 35

















































33
Типы элемента
– text — текстовое поле;
–

password — поле ввода пароля;
– submit — кнопка отправки формы;
– reset — кнопка сброса данных в полях ввода;
– button — специальная, кастомизированная кнопка;
– image — кнопка в виде заданной картинки;
– checkbox — флажок;
– radio — множественный выбор.




Надпись на кнопке

Слайд 36

















































34
Новые типы элемента
– email  – для адреса электронной

почты;
– url  – применяется для полей ввода URL-адресов;
– search  – применяется для полей поиска;
– tel  – применяется с целью обозначения полей для ввода телефонных номеров;
– number  – предназначен для обычных чисел;
– range  – предназначен для выбора чисел в указанном диапазоне;
– date  – ввод даты;
– color – выбор и ввод цвета.

Слайд 37

















































35
Новые типы элемента

Слайд 38

















































38
Новые типы элемента

Слайд 39

















































39
Новые типы элемента

Слайд 40

















































40
Новые типы элемента

Слайд 41

















































41
Новые типы элемента

Слайд 42

















































42
Новые типы элемента

type="submit" value="Найти">




Слайд 43

















































43
Новые типы элемента
Возраст*

name = "number" type="number">

Слайд 44

















































44
Новые типы элемента





type="color">


max="200">

Похожие презентации

Учебно-исследовательская работа по английскому языку на тему: Английские колыбельные песни 418
Детерминанты подготовки кадров инновационной экономики в современной России 185
Установка и настройка программы Skype (Скайп) 223
Методы и приёмы музыкального воспитания детей 397
УПЕХ КРЕОД АКМЕ 356
Арифметическая прогрессия Урок №1 206

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

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

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

Что такое ThePresentation.ru?

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

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

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