Phát triển ứng dụng web – web programming chương 4 introduction to HTML5

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.28 MB, 102 trang )

HTML5/CSS3 Course

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

1

HTML5 = HTML + CSS + JS API

2

Contents
•
•
•
•

HTML5 Structure
HTML5 Audio/Video
HTML5 Form
HTML5 Canvas

3

New and Updated HTML5 Elements

HTML5 introduces 28 new elements:
<section>, <article>, <aside>, <hgroup>,

<header>,<footer>, <nav>,
<figure>, <figcaption>, <video>, <audio>,
<source>, <embed>, <mark>,,
<meter>, <time>, <ruby>, <rt>, <rp>,<wbr>,
<canvas>, <command>, <details>,<summary>,
<datalist>, <keygen> and <output>
4

HTML5 Structure

5

Structure

6

Structure

7

Structure
HTML5 offers new semantic elements to define different parts of a
web page:
• <article>
• <aside>
• <details>

• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
8
• <time>

<section>
• 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

9

<header>
• 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

10

<hgroup>
• 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

11

<footer>
• 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

12

<article>
• 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 usersubmitted comment, an interactive widget or gadget, or

any other independent item of content..

13

<nav>
• 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

14

Block semantic element
• <aside>
• <figure>

15

<aside>
• 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.

16

<figure>
• Specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc

17

Inline semantic element
•
•
•
•

<mark>
<time>
<meter>

18

<mark>
• Defines marked/highlighted text

19

<time>
• Defines a date/time

20

<meter>
• Defines a scalar measurement within a known
range (a gauge)

21

• The progress element provides a simple and
effective way for a web designer to notify a user
of their progress regarding a specified task

22

Lab: frames layers
Open new page in Dreamweaver
100px

1/3

2/3

23

Lab: frames layers
No need for ids here; use HTML5 tags
Older browsers need to know block elements
<header>

<body>
<header></header>
<nav></nav>
<section></section>
</body>

<nav>

<section>

24

Lab: frames layers
calc() defines position of each layer
Space in command is important

New with CSS3; not universally supported yet
<header>

calc(33.33% - 5px);

33.33%
- 5px

66.67%
- 5px

25

Phát triển ứng dụng web – web programming chương 4 introduction to HTML5

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về