Koldovskyy
Last update: 19/03/2016
- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Building the user interface by using HTML 5. Оrganization, input, and validation презентация
Содержание
- 1. Building the user interface by using HTML 5. Оrganization, input, and validation
- 2. Agenda Semantic markup div element header and
- 3. Semantic Markup Tag names that are intuitive
- 4. div Element Used for years to create
- 5. New HTML5 Elements for Structuring and Organizing
- 6. header and footer Elements The header element
- 7. header and footer Elements (Continued) Can include multiple headers or footers in an HTML5 document
- 8. header and footer Markup Example
- 9. section Element Defines a section in a
- 10. section Example
- 11. nav Element Defines a block of navigation
- 12. nav Example
- 13. nav Example
- 14. article Element Defines a part of an
- 15. aside Element Used for sidebars and notes—content
- 16. aside Example
- 17. aside Example
- 18. section, article, aside
- 19. HTML Tables defines overall table
- 20. HTML Table Example
- 21. HTML Table Example
- 22. HTML colspan, rowspan
- 23. Ordered List Orders list entries using numbers,
- 24. Ordered List Example
- 25. Unordered List Displays list entries in a
- 26. Unordered List Example
- 27. Unordered List Example
- 28. Forms and Input Form input is the
- 29. Creating a Form Use the start and
- 30. Creating a Form (Continued) The fieldset element
- 31. Form with Fieldset Example
- 32. Simple Form Example
- 33. Simple Form Example
- 34. Form required and email Attributes The required
- 35. required Example
- 36. Form placeholder Attribute Placeholder text is text
- 37. Form pattern Attribute The pattern attribute provides
- 38. Form pattern Attribute (Continued) You can use
- 39. Form autofocus Attribute The autofocus attribute moves
- 40. Validation The process of verifying that information
- 41. Validation (Continued) Automatic validation of input means
- 42. Validation Example
- 43. Practice Task
- 44. Thank You! Copyright © 2010 SoftServe,
Agenda Semantic markup div element header and footer elements section element nav element article element aside element HTML tables Ordered and unordered lists Forms and input Validation
Слайд 2Agenda
Semantic markup
div element
header and footer elements
section element
nav element
article element
aside element
HTML tables
Ordered
and unordered lists
Forms and input
Validation
Forms and input
Validation
Слайд 3Semantic Markup
Tag names that are intuitive
Makes it easier to build and
modify HTML documents
Makes it easier for Web browsers and other programs to interpret
Developers can still use
Makes it easier for Web browsers and other programs to interpret
Developers can still use
in HTML5 documents; should use new structure elements whenever appropriate
Слайд 4div Element
Used for years to create structure of an HTML document
Often
includes a class or ID attribute
May include CSS styles such as background-color, height, and width
Example:
May include CSS styles such as background-color, height, and width
Example:
This is a header
Слайд 5New HTML5 Elements for Structuring and Organizing Content
header, footer, section,
nav, article, and aside
Слайд 6header and footer Elements
The header element defines a header for a
document, section, or article. HTML 4.01 uses the header div (
).
The footer element defines a footer for a document or section, and typically contains information about the document or section, such as the author name, copyright data, links to related documents, and so on.
The footer element defines a footer for a document or section, and typically contains information about the document or section, such as the author name, copyright data, links to related documents, and so on.
Слайд 7header and footer Elements (Continued)
Can include multiple headers or footers in
an HTML5 document
Слайд 8header and footer Markup Example
Learning
HTML5
Here comes my text
https://jsfiddle.net/koldovsky/qb664wjy/
Слайд 9section Element
Defines a section in a document, such as a chapter,
parts of a thesis, or parts of a Web page whose content is distinct from each other
According to the W3C, must contain at least one heading and define something that would ordinarily appear in the document’s outline
According to the W3C, must contain at least one heading and define something that would ordinarily appear in the document’s outline
Слайд 11nav Element
Defines a block of navigation links and is useful for
creating
A set of navigation links as a document’s primary navigation
A table of contents
Breadcrumbs in a footer
Previous-Home-Next links
A set of navigation links as a document’s primary navigation
A table of contents
Breadcrumbs in a footer
Previous-Home-Next links
Слайд 14article Element
Defines a part of an HTML document that consists of
a “self-contained composition” independent from the rest of the content in the document
Content set off by tags can be distributed in syndication
Think of it as content that makes sense on its own
Content set off by
Think of it as content that makes sense on its own
Слайд 15aside Element
Used for sidebars and notes—content that’s related to the current
topic but would interrupt the flow of the document if left inline
Слайд 19HTML Tables
defines overall table
defines rows
defines column headers
defines
cells
adds a caption above or below table
Long, scrolling tables use , , and tags
Слайд 23Ordered List
Слайд 25Unordered List
Слайд 28Forms and Input
Слайд 30Creating a Form (Continued)
Слайд 34Form required and email Attributes
Слайд 36Form placeholder Attribute
Слайд 37Form pattern Attribute
Слайд 38Form pattern Attribute (Continued)
Слайд 39Form autofocus Attribute
Слайд 40Validation
Слайд 41Validation (Continued)
Слайд 44Thank You!
Long, scrolling tables use , , and tags
Слайд 23Ordered List
Orders list entries using numbers, by default
Uses the tag
with attributes:
reversed: Reverses the order of the list
start number: Specifies the start value of the ordered list
type: Specifies list item marker, such as "1" for displaying decimal numbers
reversed: Reverses the order of the list
start number: Specifies the start value of the ordered list
type: Specifies list item marker, such as "1" for displaying decimal numbers
Слайд 25Unordered List
Displays list entries in a bulleted list
Uses a tag
Round
bullet symbol is the default marker for list items
Can change bullet symbols
For squares, add type="square" to the
Can change bullet symbols
For squares, add type="square" to the
- tag
For empty circles, add type="circle"
Слайд 28Forms and Input
Form input is the information a user enters into
fields in a Web or client application form.
HTML5 introduces several new form and input element attributes; some are:
url for entering a single Web address
email for a single email address or a list of email addresses
search to prompt users to enter text they want to search for
HTML5 introduces several new form and input element attributes; some are:
url for entering a single Web address
email for a single email address or a list of email addresses
search to prompt users to enter text they want to search for
Слайд 30Creating a Form (Continued)
The fieldset element is used with many forms
to group related elements.
The
The
Слайд 34Form required and email Attributes
The required attribute requires information in a
field when the form is submitted.
The email attribute requires the user to enter an email address.
Markup example:
The email attribute requires the user to enter an email address.
Markup example:
Слайд 36Form placeholder Attribute
Placeholder text is text displayed inside an input field
when the field is empty. It helps users understand the type of information they should enter or select. When you click on or tab to the input field and start typing, the newly entered text replaces the placeholder text.
Markup example:
Markup example:
Слайд 37Form pattern Attribute
The pattern attribute provides a format (a regular expression)
for an input field, which is used to validate whatever is entered into the field.
Markup example:
title="Employee ID is two capital letters followed by four digits">
Markup example:
title="Employee ID is two capital letters followed by four digits">
Слайд 38Form pattern Attribute (Continued)
You can use the pattern attribute with these
types:
text
search
url
telephone
email
password
text
search
url
telephone
password
Слайд 39Form autofocus Attribute
The autofocus attribute moves the focus to a particular
input field when a Web page loads.
Markup example:
autofocus="autofocus" />
Markup example:
autofocus="autofocus" />
Слайд 40Validation
The process of verifying that information entered or captured in a
form is in the correct format and usable before sending the data to the server
Some things verified during validation:
Required fields are empty
Email addresses are valid
Dates are valid
Text does not appear in a numeric field or vice versa
Some things verified during validation:
Required fields are empty
Email addresses are valid
Dates are valid
Text does not appear in a numeric field or vice versa
Слайд 41Validation (Continued)
Automatic validation of input means the browser checks the data
the user inputs.
Also referred to as client-side validation
Server-side validation occurs when server validates data received from an input form
Also referred to as client-side validation
Server-side validation occurs when server validates data received from an input form
Слайд 44Thank You!
Copyright © 2010 SoftServe, Inc.
Contacts
Europe Headquarters
52 V. Velykoho Str.
Lviv
79053, Ukraine
Tel: +380-32-240-9090 Fax: +380-32-240-9080
E-mail: info@softserveinc.com
Website: www.softserveinc.com
Tel: +380-32-240-9090 Fax: +380-32-240-9080
E-mail: info@softserveinc.com
Website: www.softserveinc.com
US Headquarters
12800 University Drive, Suite 250
Fort Myers, FL 33907, USA
Tel: 239-690-3111
Fax: 239-690-3116
Похожие презентации
Обратная связь
Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Email: Нажмите что бы посмотреть
Что такое ThePresentation.ru?
Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.