🗊Презентация Building the user interface by using HTML 5. Оrganization, input, and validation

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №1Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №2Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №3Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №4Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №5Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №6Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №7Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №8Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №9Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №10Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №11Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №12Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №13Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №14Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №15Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №16Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №17Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №18Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №19Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №20Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №21Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №22Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №23Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №24Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №25Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №26Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №27Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №28Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №29Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №30Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №31Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №32Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №33Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №34Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №35Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №36Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №37Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №38Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №39Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №40Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №41Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №42Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №43Building the user interface by using HTML 5. Оrganization, input, and validation, слайд №44
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Building the user interface by using HTML 5. Оrganization, input, and validation. Доклад-сообщение содержит 44 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Building the User Interface by Using HTML5: Organization, Input, and Validation Vyacheslav Koldovskyy Last update: 19/03/2016
Описание слайда:
Building the User Interface by Using HTML5: Organization, Input, and Validation Vyacheslav Koldovskyy Last update: 19/03/2016

Слайд 2


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
Описание слайда:
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 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
Описание слайда:
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 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>
Описание слайда:
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 HTML5 Elements for Structuring and Organizing Content header, footer, section, nav, article, and aside
Описание слайда:
New HTML5 Elements for Structuring and Organizing Content header, footer, section, nav, article, and aside

Слайд 6


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.
Описание слайда:
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 (Continued) Can include multiple headers or footers in an HTML5 document
Описание слайда:
header and footer Elements (Continued) Can include multiple headers or footers in an HTML5 document

Слайд 8


header and footer Markup Example
Описание слайда:
header and footer Markup Example

Слайд 9


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
Описание слайда:
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
Описание слайда:
section Example

Слайд 11


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
Описание слайда:
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
Описание слайда:
nav Example

Слайд 13


nav Example
Описание слайда:
nav Example

Слайд 14


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
Описание слайда:
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 sidebars and notes—content that’s related to the current topic but would interrupt the flow of the document if left inline
Описание слайда:
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
Описание слайда:
aside Example

Слайд 17


aside Example
Описание слайда:
aside Example

Слайд 18


section, article, aside
Описание слайда:
section, article, aside

Слайд 19


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
Описание слайда:
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
Описание слайда:
HTML Table Example

Слайд 21


HTML Table Example
Описание слайда:
HTML Table Example

Слайд 22


HTML colspan, rowspan
Описание слайда:
HTML colspan, rowspan

Слайд 23


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
Описание слайда:
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
Описание слайда:
Ordered List Example

Слайд 25


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"
Описание слайда:
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
Описание слайда:
Unordered List Example

Слайд 27


Unordered List Example
Описание слайда:
Unordered List Example

Слайд 28


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
Описание слайда:
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 <form> start and end tags All form content and fields are between <form> tags Common syntax: <form id="keyword"> <content and fields> </form>
Описание слайда:
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 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.
Описание слайда:
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
Описание слайда:
Form with Fieldset Example

Слайд 32


Simple Form Example
Описание слайда:
Simple Form Example

Слайд 33


Simple Form Example
Описание слайда:
Simple Form Example

Слайд 34


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 />
Описание слайда:
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
Описание слайда:
required Example

Слайд 36


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" />
Описание слайда:
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 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">
Описание слайда:
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 (Continued) You can use the pattern attribute with these <input> types: text search url telephone email password
Описание слайда:
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 autofocus attribute moves the focus to a particular input field when a Web page loads. Markup example: <input type="text" name="fname" autofocus="autofocus" />
Описание слайда:
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 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
Описание слайда:
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) 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
Описание слайда:
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
Описание слайда:
Validation Example

Слайд 43


Practice Task
Описание слайда:
Practice Task

Слайд 44


Contacts
Описание слайда:
Contacts

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию