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

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

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

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

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

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

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

Содержание

2HyperText Markup Language – обратная совместимость с существующими браузерами и технологиями; – новые мультимедийные возможности,  которые ранее были доступны
HTML HTML 4.0 XHTML 1.x 2HyperText Markup Language – обратная совместимость с существующими браузерами Неправильно:Правильно:1.2.3.4.5.6. (или )some textsome text&& 3HTML+ eXtended Markup Language Новые элементы: , , , , , , , , , , Секционные элементы:, , , , , , Группировка контента:, Семантика для текстового — указание на название статьи/книги; — контактная информация автора; — «интонация» 7Наиболее популярные имена ID и class 8 Секционные элементы 9 Секционные элементы Верхняя секция интернет-приложения. Содержит заголовок, метаданные, относящиеся к данному контенту. Элемент используется для представления информации о авторе, авторском праве, Предназначен для создания блока навигации или главных навигационных разделов. На странице может Определяет блок («боковая панель») сбоку от контента для размещения рубрик, ссылок и – используется в качестве контейнера для любого независимого (автономного) раздела страницы. – используется для группирования любых элементов, например, изображений и подписей к 16Семантические элементы  предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.  создает список вариантов, которые можно выбирать  используется для хранения информации, которую можно скрыть 20Создание простой формы 21Создание простой формы   NAME – определяет имя формы, обычно 22Добавление подсказок Подстановочный текст для поля создается 23Добавление подсказокВведите код доступа 24ФокусName* Атрибут autofocus устанавливает фокус элемента после загрузки страницы. В HTML5 фокус 25Проверка на стороне клиента 26Отключение проверки 27Проверка с помощью регулярных выраженийКод 28Проверка с помощью регулярных выражений[A-Z]{3}-[0-9]{3}QRB-001TTT-952LAA-000qrb-001TTT-0952LA5-000 29Специализированная проверкаАдрес function validateComments(input) {if (input.value.length < 20) {input.setCustomValidity(«Пожалуйста, напишите подробно 30Специализированная проверка – onclick – код скрипта будет выполнен после щелчка 31Атрибут form 36Новые типы элемента определяет адрес обработчика формы 37Новые типы элемента сообщает браузеру метод передачи данных формы на сервер 32Атрибуты элемента Атрибут spellcheck По умолчанию разные браузеры действуют по-разному в 33Типы элемента – text — текстовое поле; – password — поле 34Новые типы элемента – email  – для адреса электронной почты;– url  35Новые типы элемента 38Новые типы элемента 39Новые типы элемента 40Новые типы элемента 41Новые типы элемента 42Новые типы элемента 43Новые типы элемента Возраст* 44Новые типы элемента
Слайды презентации

Слайд 2

















































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

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

с существующими браузерами

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

Слайд 3

















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

(или )


some text
some

Неправильно:Правильно:1.2.3.4.5.6. (или )some textsome text&& 3HTML+ eXtended Markup Language

text

&


&




















































3
HTML+ eXtended Markup

Language

Слайд 4








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

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

, , , , , , , , ,

, , , , , , , , , ,

Слайд 5








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

Группировка

Секционные элементы:, , , , , , Группировка контента:, Семантика для

контента:
,

Семантика для текстового содержимого:
, , , , ,



Элементы мультимедиа:

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

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

информация автора;
— «интонация» текста;
— указание на важность;

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




















































6

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

Слайд 7


























































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

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

Слайд 8

















































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

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

Слайд 9

















































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

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

Слайд 10










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

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

данному контенту.

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




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






















































10


Слайд 11





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

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

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


...

Copyright@2016



















































11


Слайд 12













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

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

разделов. На странице может быть несколько элементов . Не заменяет

 
     и <оl>, он просто их обрамляет.























































    12

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

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

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

напрямую.




















































13

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

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

независимого (автономного) раздела страницы.
– используется в качестве контейнера

для объектов, которые объединены общим смыслом; применяется для разбивки текста на разделы.



























































14

,

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

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

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

фрагментов кода, схем, видеозаписей, графиков, диаграмм и др.


Рисунок 1





















































15




Слайд 16

















































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
Создание простой формы

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

Слайд 21

















































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

NAME

21Создание простой формы   NAME – определяет имя формы, обычно

– определяет имя формы, обычно не указывается. Применяетсядля идентификации

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

Слайд 22

















































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


22Добавление подсказок Подстановочный текст для поля создается с

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

type="submit" value="Поиск">


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

Слайд 23

















































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

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

name="Code" placeholder= "ABC123"
title="Ваш код должен состоять из цифр

и букв">


Слайд 24

















































24
Фокус
Name*

24ФокусName* Атрибут autofocus устанавливает фокус элемента после загрузки страницы. В HTML5

autofocus>
Атрибут autofocus устанавливает фокус элемента после загрузки страницы. В

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

Слайд 25

















































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

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

type="text" required value="" />

/>

Слайд 26

















































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


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

value="Проверить" />




/>






Слайд 27

















































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

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

id="code" placeholder= "ABC-123"
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

28Проверка с помощью регулярных выражений[A-Z]{3}-[0-9]{3}QRB-001TTT-952LAA-000qrb-001TTT-0952LA5-000

Слайд 29

















































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



function

29Специализированная проверкаАдрес function validateComments(input) {if (input.value.length < 20) {input.setCustomValidity(«Пожалуйста, напишите

validateComments(input) {
if (input.value.length < 20) {
input.setCustomValidity(«Пожалуйста, напишите подробно");
}
else {
//

Длина комментария отвечает требованию.
// Очищаем предыдущие сообщения об ошибке.
input.setCustomValidity(""); }
}

Слайд 30

















































30
Специализированная проверка
– onclick – код

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

скрипта будет выполнен после щелчка мыши.
– ondrag –

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

Слайд 31

















































31
Атрибут form



31Атрибут form Тег input,


Тег input, атрибут form








Слайд 32

















































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

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

обработчика формы


type="text">






Слайд 33

















































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

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

метод передачи данных формы на сервер







Слайд 34

















































32
Атрибуты элемента
Атрибут spellcheck

32Атрибуты элемента Атрибут spellcheck По умолчанию разные браузеры действуют по-разному

По умолчанию разные браузеры действуют по-разному в отношении проверки

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

Атрибут autocomplete

Имя:


Пароль:



Атрибут multiple

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


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



Слайд 35

















































33
Типы элемента
– text —

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

текстовое поле;
– password — поле ввода пароля;
–

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




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

Слайд 36

















































34
Новые типы элемента
– email  –

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

для адреса электронной почты;
– url  – применяется для полей

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

Слайд 37

















































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

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

Слайд 38

















































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

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

Слайд 39

















































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

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

Слайд 40

















































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

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

Слайд 41

















































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

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

Слайд 42

















































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

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

name="search_form" type="search">



form="search_form">

Слайд 43

















































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

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

type="number" min="18" max="120">


  • Имя файла: novye-elementy-hypertext-markup-language.pptx
  • Количество просмотров: 98
  • Количество скачиваний: 0
- Предыдущая Выдающиеся спортсмены России
Следующая - Хроническая болезнь почек

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

Презентация Установка замкнутого водоснабжения Презентация Установка замкнутого водоснабжения 120
Диагностика предметных результатов по математике методическая разработка по теме Диагностика предметных результатов по математике методическая разработка по теме 76
Обмен с компьютером через COM порт в ATMEGA16 Обмен с компьютером через COM порт в ATMEGA16 70
Презентация №1 Музыкальные инструменты учебно-методическое пособие Презентация №1 Музыкальные инструменты учебно-методическое пособие 88
Организация производства Организация производства 150
Статьи в уголок родителей Мой первый учитель консультация Статьи в уголок родителей Мой первый учитель консультация 74
Ограниченность экономических ресурсов и порождаемые ею проблемы презентация к уроку Ограниченность экономических ресурсов и порождаемые ею проблемы презентация к уроку 112
Диетотерапия при патологиях костей Диетотерапия при патологиях костей 69
105
Добра…… Добра…… 56
Взятие Берлина Взятие Берлина 153
Презентация к педсовету Современные образовательные технологии в трудовом воспитании дошкольников презентация Презентация к педсовету Современные образовательные технологии в трудовом воспитании дошкольников презентация 159
Презентация Деревья нашего двора.Рябина. презентация к уроку (подготовительная группа) Презентация Деревья нашего двора.Рябина. презентация к уроку (подготовительная группа) 161
Презентация к реферату Презентация к реферату 68
Психологический уход за умирающими людьми Психологический уход за умирающими людьми 141
Свадьба вашей мечты Свадьба вашей мечты 89
История открытия стекла История открытия стекла 81
Накрываем на стол. Посуда презентация к уроку (подготовительная группа) Накрываем на стол. Посуда презентация к уроку (подготовительная группа) 79
Развитие мелкой моторики детей 2 младшей групы. учебно-методическое пособие (младшая группа) Развитие мелкой моторики детей 2 младшей групы. учебно-методическое пособие (младшая группа) 81
Мой любимый минерал: Александрит Мой любимый минерал: Александрит 109
Мировая политика как научная дисциплина.Основы аналитической работы Мировая политика как научная дисциплина.Основы аналитической работы 96
Выполнение однотонной фактуры Выполнение однотонной фактуры 135
Городская агломерация Мадрид Городская агломерация Мадрид 104
61
Математика в картинках Математика в картинках 68
Выступление на МО. Педагогическая диагностика особенностей и возможностей личности школьника в соответствии с Федеральным государственным образовательным стандартом. учебно-методический материал по теме Выступление на МО. Педагогическая диагностика особенностей и возможностей личности школьника в соответствии с Федеральным государственным образовательным стандартом. учебно-методический материал по теме 94
Презентация Петербургские дворы и дворики. презентация к уроку (3, 4 класс) Презентация Петербургские дворы и дворики. презентация к уроку (3, 4 класс) 82
Презентация: Классификация зубчатых передач Презентация: Классификация зубчатых передач 137
Қымыз Қымыз 96
Проблемы семьи и семейного воспитатния презентация Проблемы семьи и семейного воспитатния презентация 81