Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
44 слайда
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
3.11 MB
Просмотров:
61
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Building the User Interface](/documents_6/dbba818e393969b72ec89a12088c212e/img0.jpg)
Содержание слайда: Building the User Interface by Using HTML5: Organization, Input, and Validation
Vyacheslav Koldovskyy
Last update: 19/03/2016
№2 слайд![Agenda Semantic markup div](/documents_6/dbba818e393969b72ec89a12088c212e/img1.jpg)
Содержание слайда: 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
№3 слайд![Semantic Markup Tag names](/documents_6/dbba818e393969b72ec89a12088c212e/img2.jpg)
Содержание слайда: Semantic 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 <div> in HTML5 documents; should use new structure elements whenever appropriate
№4 слайд![div Element Used for years to](/documents_6/dbba818e393969b72ec89a12088c212e/img3.jpg)
Содержание слайда: div 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:
<div id="header" > This is a header </div>
№5 слайд![New HTML Elements for](/documents_6/dbba818e393969b72ec89a12088c212e/img4.jpg)
Содержание слайда: New HTML5 Elements for Structuring and Organizing Content
header, footer, section, nav, article, and aside
№6 слайд![header and footer Elements](/documents_6/dbba818e393969b72ec89a12088c212e/img5.jpg)
Содержание слайда: header and footer Elements
The header element defines a header for a document, section, or article. HTML 4.01 uses the header div (<div id="header">).
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.
№7 слайд![header and footer Elements](/documents_6/dbba818e393969b72ec89a12088c212e/img6.jpg)
Содержание слайда: header and footer Elements (Continued)
Can include multiple headers or footers in an HTML5 document
№8 слайд![header and footer Markup](/documents_6/dbba818e393969b72ec89a12088c212e/img7.jpg)
Содержание слайда: header and footer Markup Example
№9 слайд![section Element Defines a](/documents_6/dbba818e393969b72ec89a12088c212e/img8.jpg)
Содержание слайда: section 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
№10 слайд![section Example](/documents_6/dbba818e393969b72ec89a12088c212e/img9.jpg)
Содержание слайда: section Example
№11 слайд![nav Element Defines a block](/documents_6/dbba818e393969b72ec89a12088c212e/img10.jpg)
Содержание слайда: nav 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
№12 слайд![nav Example](/documents_6/dbba818e393969b72ec89a12088c212e/img11.jpg)
Содержание слайда: nav Example
№13 слайд![nav Example](/documents_6/dbba818e393969b72ec89a12088c212e/img12.jpg)
Содержание слайда: nav Example
№14 слайд![article Element Defines a](/documents_6/dbba818e393969b72ec89a12088c212e/img13.jpg)
Содержание слайда: article 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 <article> tags can be distributed in syndication
Think of it as content that makes sense on its own
№15 слайд![aside Element Used for](/documents_6/dbba818e393969b72ec89a12088c212e/img14.jpg)
Содержание слайда: aside 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
№16 слайд![aside Example](/documents_6/dbba818e393969b72ec89a12088c212e/img15.jpg)
Содержание слайда: aside Example
№17 слайд![aside Example](/documents_6/dbba818e393969b72ec89a12088c212e/img16.jpg)
Содержание слайда: aside Example
№18 слайд![section, article, aside](/documents_6/dbba818e393969b72ec89a12088c212e/img17.jpg)
Содержание слайда: section, article, aside
№19 слайд![HTML Tables lt table gt](/documents_6/dbba818e393969b72ec89a12088c212e/img18.jpg)
Содержание слайда: HTML Tables
<table> defines overall table
<tr> defines rows
<th> defines column headers
<td> defines cells
<caption> adds a caption above or below table
<col> applies inline CSS styles
Long, scrolling tables use <thead>, <tfoot>, and <tbody> tags
№20 слайд![HTML Table Example](/documents_6/dbba818e393969b72ec89a12088c212e/img19.jpg)
Содержание слайда: HTML Table Example
№21 слайд![HTML Table Example](/documents_6/dbba818e393969b72ec89a12088c212e/img20.jpg)
Содержание слайда: HTML Table Example
№22 слайд![HTML colspan, rowspan](/documents_6/dbba818e393969b72ec89a12088c212e/img21.jpg)
Содержание слайда: HTML colspan, rowspan
№23 слайд![Ordered List Orders list](/documents_6/dbba818e393969b72ec89a12088c212e/img22.jpg)
Содержание слайда: Ordered List
Orders list entries using numbers, by default
Uses the <ol> 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
№24 слайд![Ordered List Example](/documents_6/dbba818e393969b72ec89a12088c212e/img23.jpg)
Содержание слайда: Ordered List Example
№25 слайд![Unordered List Displays list](/documents_6/dbba818e393969b72ec89a12088c212e/img24.jpg)
Содержание слайда: Unordered List
Displays list entries in a bulleted list
Uses a <ul> tag
Round bullet symbol is the default marker for list items
Can change bullet symbols
For squares, add type="square" to the <ul> tag
For empty circles, add type="circle"
№26 слайд![Unordered List Example](/documents_6/dbba818e393969b72ec89a12088c212e/img25.jpg)
Содержание слайда: Unordered List Example
№27 слайд![Unordered List Example](/documents_6/dbba818e393969b72ec89a12088c212e/img26.jpg)
Содержание слайда: Unordered List Example
№28 слайд![Forms and Input Form input is](/documents_6/dbba818e393969b72ec89a12088c212e/img27.jpg)
Содержание слайда: Forms 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
№29 слайд![Creating a Form Use the lt](/documents_6/dbba818e393969b72ec89a12088c212e/img28.jpg)
Содержание слайда: Creating a Form
Use the <form> start and end tags
All form content and fields are between <form> tags
Common syntax:
<form id="keyword">
<content and fields>
</form>
№30 слайд![Creating a Form Continued The](/documents_6/dbba818e393969b72ec89a12088c212e/img29.jpg)
Содержание слайда: Creating a Form (Continued)
The fieldset element is used with many forms to group related elements.
The <fieldset> tag draws a box around individual elements and/or around the entire form.
№31 слайд![Form with Fieldset Example](/documents_6/dbba818e393969b72ec89a12088c212e/img30.jpg)
Содержание слайда: Form with Fieldset Example
№32 слайд![Simple Form Example](/documents_6/dbba818e393969b72ec89a12088c212e/img31.jpg)
Содержание слайда: Simple Form Example
№33 слайд![Simple Form Example](/documents_6/dbba818e393969b72ec89a12088c212e/img32.jpg)
Содержание слайда: Simple Form Example
№34 слайд![Form required and email](/documents_6/dbba818e393969b72ec89a12088c212e/img33.jpg)
Содержание слайда: Form 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:
<input type="email" required />
№35 слайд![required Example](/documents_6/dbba818e393969b72ec89a12088c212e/img34.jpg)
Содержание слайда: required Example
№36 слайд![Form placeholder Attribute](/documents_6/dbba818e393969b72ec89a12088c212e/img35.jpg)
Содержание слайда: Form 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:
<input name="fName" placeholder="First Name" />
№37 слайд![Form pattern Attribute The](/documents_6/dbba818e393969b72ec89a12088c212e/img36.jpg)
Содержание слайда: Form 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:
<input type="text" id="empID" name="EmployeeID" required pattern="[A-Z]{2}[0-9]{4}"
title="Employee ID is two capital letters followed by four digits">
№38 слайд![Form pattern Attribute](/documents_6/dbba818e393969b72ec89a12088c212e/img37.jpg)
Содержание слайда: Form pattern Attribute (Continued)
You can use the pattern attribute with these <input> types:
text
search
url
telephone
email
password
№39 слайд![Form autofocus Attribute The](/documents_6/dbba818e393969b72ec89a12088c212e/img38.jpg)
Содержание слайда: Form autofocus Attribute
The autofocus attribute moves the focus to a particular input field when a Web page loads.
Markup example:
<input type="text" name="fname"
autofocus="autofocus" />
№40 слайд![Validation The process of](/documents_6/dbba818e393969b72ec89a12088c212e/img39.jpg)
Содержание слайда: Validation
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
№41 слайд![Validation Continued](/documents_6/dbba818e393969b72ec89a12088c212e/img40.jpg)
Содержание слайда: Validation (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
№42 слайд![Validation Example](/documents_6/dbba818e393969b72ec89a12088c212e/img41.jpg)
Содержание слайда: Validation Example
№43 слайд![Practice Task](/documents_6/dbba818e393969b72ec89a12088c212e/img42.jpg)
Содержание слайда: Practice Task
№44 слайд![Contacts](/documents_6/dbba818e393969b72ec89a12088c212e/img43.jpg)
Содержание слайда: Contacts