Что такое 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




Слайд 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
  • Количество просмотров: 125
  • Количество скачиваний: 0