HTML5/CSS3 Course Introduction to HTML5 HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc....

download HTML5/CSS3 Course Introduction to HTML5 HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong

of 59

  • date post

    15-Mar-2020
  • Category

    Documents

  • view

    46
  • download

    4

Embed Size (px)

Transcript of HTML5/CSS3 Course Introduction to HTML5 HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc....

  • 1

    HTML5/CSS3 Course

    Introduction to HTML5

    Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP.

  • 2

    HTML5 = HTML + CSS + JS API

  • Contents

    • HTML5 Structure

    • HTML5 Audio/Video

    • HTML5 Form

    • HTML5 Canvas

    3

  • New and Updated HTML5 Elements

    HTML5 introduces 28 new elements:

    , , , ,

    ,, ,

    , , , ,

    , , ,,

    , , , , ,,

    , , ,,

    , and

    4

  • HTML5 Structure

    5

  • Structure

    6

  • Structure

    7

  • Lets put altogether

    8

  • Structure

    9

  • • The section element represents a generic section

    of a document or application. A section, in this

    context, is a thematic grouping of content,

    typically with a heading

    10

    http://dev.w3.org/html5/spec-author-view/the-section-element.html http://dev.w3.org/html5/spec/rendering.html

  • • A header element is intended to usually contain

    the section's heading (an h1–h6 element or an

    hgroup element), but this is not required. The

    header element can also be used to wrap a

    section's table of contents, a search form, or any

    relevant logos

    11

    http://dev.w3.org/html5/spec-author-view/the-header-element.html http://dev.w3.org/html5/spec-author-view/the-h1-h2-h3-h4-h5-and-h6-elements.html http://dev.w3.org/html5/spec-author-view/the-h1-h2-h3-h4-h5-and-h6-elements.html http://dev.w3.org/html5/spec-author-view/the-hgroup-element.html http://dev.w3.org/html5/spec-author-view/the-header-element.html

  • • The hgroup element represents the heading of a

    section. The element is used to group a set of

    h1–h6 elements when the heading has multiple

    levels, such as subheadings, alternative titles, or

    taglines

    12

    http://dev.w3.org/html5/spec-author-view/the-hgroup-element.html http://dev.w3.org/html5/spec/rendering.html http://dev.w3.org/html5/spec-author-view/the-h1-h2-h3-h4-h5-and-h6-elements.html http://dev.w3.org/html5/spec-author-view/the-h1-h2-h3-h4-h5-and-h6-elements.html

  • • The footer element represents a footer for its

    nearest ancestor sectioning content or

    sectioning root element. A footer typically

    contains information about its section such as

    who wrote it, links to related documents,

    copyright data, and the like

    13

    http://dev.w3.org/html5/spec-author-view/the-footer-element.html http://dev.w3.org/html5/spec/rendering.html http://dev.w3.org/html5/spec-author-view/content-models.html http://dev.w3.org/html5/spec-author-view/headings-and-sections.html

  • • The article element represents a self-contained

    composition in a document, page, application, or site

    and that is, in principle, independently distributable or

    reusable, e.g. in syndication. This could be a forum post,

    a magazine or newspaper article, a blog entry, a user-

    submitted comment, an interactive widget or gadget, or

    any other independent item of content..

    14

    http://dev.w3.org/html5/spec-author-view/the-article-element.html http://dev.w3.org/html5/spec/rendering.html

  • • The nav element represents a section of a page

    that links to other pages or to parts within the

    page: a section with navigation links

    15

    http://dev.w3.org/html5/spec-author-view/the-nav-element.html http://dev.w3.org/html5/spec/rendering.html

  • Block semantic element

    16

  • • The aside element represents a section of a page

    that consists of content that is tangentially

    related to the content around the aside element,

    and which could be considered separate from

    that content. Such sections are often

    represented as sidebars in printed typography.

    17

    http://dev.w3.org/html5/spec-author-view/the-aside-element.html http://dev.w3.org/html5/spec/rendering.html http://dev.w3.org/html5/spec-author-view/the-aside-element.html

  • • Specifies self-contained content, like illustrations,

    diagrams, photos, code listings, etc

    18

  • Inline semantic element

    19

  • • Defines marked/highlighted text

    20

  • • Defines a date/time

    21

  • • Defines a scalar measurement within a known

    range (a gauge)

    22

  • • The progress element provides a simple and

    effective way for a web designer to notify a user

    of their progress regarding a specified task

    23

  • HTML Audio/Video

    24

  • Audio/Video for Publishers

    HTML5 lets you embed audio/video directly in your content without any plugins needed:

    (Sorry, element not supported in your

    browser/ereader, so you will not be able to listen to this

    song.)

    (Sorry, element not supported in your

    browser/ereader, so you will not be able to watch this

    video.)

    25

  • HTML5 Video

    • Example: Your browser does not support the element.

    • Property:

    – src, autoplay, controls, height, width,

    – loop, autobuffer, preload, poster

    26

  • HTML5 Audio

    • Example:

    Your browser does not support the element.

    • Property:

    – src, autoplay, controls

    – loop, autobuffer, preload

    27

  • Handling Media Events

    Event Description

    abort This event is generated when playback is aborted.

    canplay This event is generated when enough data is available that the media can be played.

    ended This event is generated when playback completes.

    error This event is generated when an error occurs.

    loadeddataThis event is generated when the first frame of the media has finished loading.

    loadstart This event is generated when loading of the media begins.

    28

  • Handling Media Events

    Event Description

    pause This event is generated when playback is paused.

    play This event is generated when playback starts or resumes.

    progress This event is generated periodically to inform the progress of the downloading the media.

    ratechange This event is generated when the playback speed changes.

    seeked This event is generated when a seek operation completes.

    29

  • Handling Media Events

    Event Description

    seeking This event is generated when a seek operation begins.

    suspend This event is generated when loading of the media is suspended.

    volumechange This event is generated when the audio volume changes.

    waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

    30

  • Example

    var clip = document.getElementById('audio');

    clip.muted = false; //câm

    clip.play(); //phát

    clip.pause(); //tạm dừng

    31

  • 32

    HTML5/CSS3

    HTML5 Forms

  • Giới thiệu

    • Các thành phần mới trong HTML5 bổ sung

    thêm chức năng mà các nhà thiết kế/phát

    triển web thường kết hợp quan các

    phương tiện khác như javascript và Flash.

    • HTML5 = HTML4 + một số thẻ thêm +

    validation

    33

  • Một số thẻ trong Form

    • (password)

    • (reset, button)

    • ….

    ….

    • ,

    ■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text

    34

  • 13 New Input Types

    35

  • Một số thuộc tính mới

    • Của thẻ : autocomplete, novalidate

    • Của thẻ :

    – autocomplete

    – autofocus

    – form

    – formaction

    – formenctype

    – formmethod

    – formnovalidate

    – formtarget 36

    – height and width

    – list

    – min and max

    – multiple

    – pattern (regexp)

    – placeholder

    – required

    – step

  • Thẻ input có thuộc tính type mới • search

    • email

    • url

    • tel

    • datetime

    • date

    • month

    • week

    • time

    • datetime-local

    • number

    • range

    • color

    37

  • Thành phần label

    • Thành phần không bắt buộc, tăng khả

    năng truy cập cho form. • Phone

    38

  • Search

    search

    Dùng để search hỗ trợ bởi Chrome, Opera, và Safari.

    Search Google:

    `

    39

  • Email

    email

    Hỗ trợ bởi Chrome, Opera