Main features of HTML5

Содержание

Слайд 2

Content:

Reminders
Philosophy
Semantic markup
Form elements
Media

Content: Reminders Philosophy Semantic markup Form elements Media

Слайд 3

HTML: Reminder




School Announcement


JINR/CERN School 2014


JINR, CERN and

HTML: Reminder School Announcement JINR/CERN School 2014 JINR, CERN and MEPhI are
MEPhI are organizing a school on grid and advanced information systems.



The main topics of the school are:


  • NICA project

  • Advanced Information Systems

  • Introduction to the GRID technologies





Слайд 4

CSS: Reminder

body { font-family: Arial, MS Sans Serif; background: url(gr1.jpg) repeat

CSS: Reminder body { font-family: Arial, MS Sans Serif; background: url(gr1.jpg) repeat
}
h1 { background: url(gr3.jpg); color: white; padding: 10px}
p { font-weight: bold; padding-left: 5px }
p.topics { color: #800517}
li { list-style-image: url(b.jpg); margin-top: 1em}

CSS = Cascading Style Sheets


Слайд 5

History of HTML Language

Official birthday (20 elements)

1991

v.2.0

1995

CSS 1

1996

JavaScript

1996

3.2 and 4.0 (W3C Recommendation)

1997

XHTML

1999/2000

World

History of HTML Language Official birthday (20 elements) 1991 v.2.0 1995 CSS
is asynchronous (AJAX)

2005

5.0

2009-…

Слайд 6

HTML5: Philosophy

Reduce the need for external plug-ins
Error handling
Device independent
Replace scripting with markup

HTML5

HTML5: Philosophy Reduce the need for external plug-ins Error handling Device independent
= HTML + CSS + JavaScript

Слайд 8

HTML5: New Features in a nutshell

Semantic elements
New form controls
Local offline storage
New JavaScript

HTML5: New Features in a nutshell Semantic elements New form controls Local
APIs
Media: video and audio
Canvas element for drawing
User Interface improvements
SVG and WebGL

New tags added in HTML5

http://www.testking.com/techking/infographics/ultimate-html5-cheatsheat/

Слайд 9

HTML5: Simplification of code


Markup

HTML5: Simplification of code Markup version HTML4 HTML5 Metadata HTML4 HTML5 The
version

HTML4


HTML5


Metadata

HTML4


HTML5

The DOCTYPE declaration for HTML5 is very simple:

The character encoding (charset) declaration:

Слайд 10

Example

Title of the document Content of the document......

Example Title of the document Content of the document......

Слайд 11

HTML: Structure

No semantics in layout






HTML: Structure No semantics in layout

Слайд 12


HTML5: Semantic markup


HTML5: Semantic markup Example 1 Semantic elements = elements with a meaning

Слайд 13

HTML Layout Elements

new semantic elements :

- Defines a header for

HTML Layout Elements new semantic elements : - Defines a header for
a document or a section

Слайд 14

HTML5: Semantic elements example


HTML5: Semantic elements example

Слайд 15

HTML Layout Techniques

There are five different ways to create multicolumn layouts. Each

HTML Layout Techniques There are five different ways to create multicolumn layouts.
way has its advantages and disadvantages:
HTML tables (not recommended)
CSS float property
CSS flexbox
CSS framework
CSS grid

Слайд 16

Layout examples:

Layout examples:

Слайд 17

CSS Float Layout

It is common to do entire web layouts using the

CSS Float Layout It is common to do entire web layouts using
CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

Example 1

Слайд 18

CSS Float Layout

The clear Property
The clear property specifies what elements can float beside the

CSS Float Layout The clear Property The clear property specifies what elements
cleared element and on which side.
The clear property can have one of the following values:
none - Allows floating elements on both sides. This is default
left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
inherit - The element inherits the clear value of its parent

Example 1

Слайд 19

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the

CSS Flexbox Layout Use of flexbox ensures that elements behave predictably when
page layout must accommodate different screen sizes and different display devices.
Flex container:
flex-direction: row, column, column-reverse, row-reverse
flex-wrap: wrap, nowrap, wrap-reverse
justify-content: center, flex-start, flex-end …
align-items: center, flex-start, flex-end …
align-content: space-between, space-around …

Example 1

Слайд 20

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the

CSS Flexbox Layout Use of flexbox ensures that elements behave predictably when
page layout must accommodate different screen sizes and different display devices.
Flex Items
order
flex-grow
flex-shrink
flex-basis
flex
align-self

Example 1

Слайд 21

HTML5: Form elements

HTML5: Form elements

Слайд 22

Examples:

-element
. form elements .

Examples: -element . form elements .

Слайд 23

Examples:

 defines a one-line input field for text input:
Example

  First name:
  
  Last name:
  

Examples: defines a one-line input field for text input: Example First name: Last name:

Слайд 24

Example of action attribute:


  First name:

  Last name:



Example of action attribute: First name: Last name:

Слайд 25

Grouping Form Data with


The

element is used to group related

Grouping Form Data with The element is used to group related data
data in a form.
The element defines a caption for the
element.

 
    
Personal information:
First name:
   
Last name:
   
 


Слайд 26

List of form elemets

 

Multiple Selections: ->

Слайд 27

HTML5 form elemets

Element
The  element specifies a list of pre-defined options for an  element.
Users

HTML5 form elemets Element The element specifies a list of pre-defined options
will see a drop-down list of the pre-defined options as they input data.
The list attribute of the  element, must refer to the id attribute of the  element.
                                  

Слайд 28

HTML5 Element

The  element represents the result of a calculation (like one performed

HTML5 Element The element represents the result of a calculation (like one
by a script).
  0      100 +      =      
  

Слайд 29

HTML5 form elements

HTML5 form elements

Слайд 30

Input types

Input Type Text
Input Type Password
Input Type Submit
Input Type Reset
Input Type Radio
Input

Input types Input Type Text Input Type Password Input Type Submit Input
Type Checkbox
Input Type Button

Слайд 31

HTML5 Input Types

color
date
datetime-local
email
month
number
range
search

tel
time
url
week

HTML5 Input Types color date datetime-local email month number range search tel time url week

Слайд 32

Input Type Color

The is used for input fields that should

Input Type Color The is used for input fields that should contain
contain a color.
Depending on browser support, a color picker can show up in the input field.

Select your favorite color:

Слайд 33

Input Type Date

The is used for input fields that should

Input Type Date The is used for input fields that should contain
contain a date.
Depending on browser support, a date picker can show up in the input field
Date:

Слайд 34

Date type

You can also use the min and max attributes to add

Date type You can also use the min and max attributes to
restrictions to dates:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:


Слайд 35

Input Type Datetime-local

The specifies a date and time input field,

Input Type Datetime-local The specifies a date and time input field, with
with no time zone.
Depending on browser support, a date picker can show up in the input field.
  Local date (date and time):   

Слайд 36

Input Type Email

The is used for input fields that should

Input Type Email The is used for input fields that should contain
contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.

E-mail:



Слайд 37

Input Restrictions

Input Restrictions

Слайд 38

Input Restrictions

The following example displays a numeric input field, where you can

Input Restrictions The following example displays a numeric input field, where you
enter a value from 0 to 100, in steps of 10. The default value is 30:

Quantity:
min="0" max="100" step="10" value="30">


Слайд 39

Input Type TIME

The allows the user to select a time

Input Type TIME The allows the user to select a time (no
(no time zone).

Select a time:



Слайд 40

Input Type Url

The is used for input fields that should

Input Type Url The is used for input fields that should contain
contain a URL address.

Add your homepage:



Слайд 41

Input Type Tel

The is used for input fields that should

Input Type Tel The is used for input fields that should contain
contain a telephone number.

Add your homepage:



Слайд 42

HTML5 Input Attributes

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
Step
readonly

HTML5 added the following attributes

HTML5 Input Attributes autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height
for :

The following attributes for 

:
autocomplete
novalidate

Examples - https://www.w3schools.com/html/html_form_attributes.asp

Слайд 43

The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have

The autocomplete Attribute The autocomplete attribute specifies whether a form or input
autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.
It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
The autocomplete attribute works with  and the following  types: text, search, url, tel, email, password, datepickers, range, and color.

First name:
Last name:
E-mail:


Слайд 44

Other Attributes

The  novalidate  attribute is a 

 attribute. When present, novalidate specifies that the

Other Attributes The novalidate attribute is a attribute. When present, novalidate specifies
form data should not be validated when submitted.
The autofocus attribute specifies that the input field should automatically get focus when the page lo
The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.
The formaction attribute overrides the action attribute of the element.
The formaction attribute is used with type="submit" and type="image"

Слайд 45

The pattern Attribute

The pattern attribute specifies a regular expression that the

The pattern Attribute The pattern attribute specifies a regular expression that the
element's value is checked against.
The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Country code:


Слайд 46

HTML5: Media

Multimedia on the web is sound, music, videos, movies, and animations.
Multimedia

HTML5: Media Multimedia on the web is sound, music, videos, movies, and
Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
There are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML. The MP4 format is recommended by YouTube.

Слайд 47

Codecs Challenge

Ogg/Theora

WebM

MPEG-4/H.264

Video codecs support in different browsers

Works with an installed WebM codec

http://caniuse.com

MPEG-4/H.264:

Codecs Challenge Ogg/Theora WebM MPEG-4/H.264 Video codecs support in different browsers Works
Commonly used video compression format (not royalty-free)
OGG/Theora: Royalty-free codec not encumbered by any known patents
WebM: Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video.

No single combination of codecs works in all HTML5 browsers and this is not likely to change in the near future. To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

Слайд 48

HTML Video

The HTML

HTML Video The HTML element is used to show a video on
a web page.

Слайд 49

HTML Audio

The HTML

HTML Audio The HTML element is used to play an audio file
on a web page.

Слайд 50

HTML YouTube Videos

To play your video on a web page, do the

HTML YouTube Videos To play your video on a web page, do
following:
Upload the video to YouTube
Take a note of the video id
Define an