Giới thiệu về ngôn ngữ lập trình web HTML5

NGÔN NGỮ ĐÁNH DẤU HTML5 Vùng nội dung metadata: • Là phần nội dung thiết lập cách trình bày hoặc các hành vi của các nooijd ung còn lại trên trang.. • Có thể sử dụng nội dung metadata đ

Trang 1

HTML5

Trang 2

THÀNH PHẦN HTML5

Trang 5

• Cho phép nhúng file video và audio vào web

• Không cần dùng plug-in của trình duyệt

Trang 6

• Cung cấp các tính năng vẽ hoạt hình

• Làm việc giống như một bảng vẽ trên web

• Có thể thêm các mã JavaScript hoặc các tính năng hoạt hình mới của CSS3 để tạo đối tượng trên các bảng vẽ di chuyển, thay đổi tỉ lệ,…

• Lưu hình ảnh vừa vẽ dưới dạng png

Trang 7

• Khai báo <canvas>:

• Sử dụng javascript

Trang 8

Web from:

giúp quá trình làm việc với các form dễ dàng hơn so với hiện tại

Trang 9

Một số thành phần mới khác

• <figure>, <figurecaption>: gán nhãn cho các hình ảnh trên web.

• <hgroup>: nhóm một tập các thành phần vào thành phần hợp lí

• ….

Trang 10

NGÔN NGỮ ĐÁNH DẤU HTML5

• Cú pháp html 5 rất mở:

• Không phân biệt kiểu chữ hoa thường

• Các phần tử không bắt buộc phải có thẻ đóng

• Không bắt buộc có dấu nháy kép trong thuộc tính

Trang 11

• Cấu trúc file mã html5

Trang 12

• Khai báo DOCTYPE

DOCTYPE được sử dụng để kiểm tra hợp lệ các tài liệu

Trang 13

• Vùng mã nội dung(content) html5

Trang 14

 Vùng nội dung metadata:

• Là phần nội dung thiết lập cách trình bày hoặc các hành vi của các nooijd ung còn lại trên trang

• Có thể sử dụng nội dung metadata để thiết lập quan hệ giữa các tài liệu html

• Thường chứa các từ khóa hoặc mô tả cho trang web, và được các bộ máy tìm kiếm sử dụng để phân loại trang web

• Được đặt trong thành phần <head>

Trang 15

 Vùng flow

• Đại diện cho các phần tử được coi là nội dung của trang web

• Các thẻ đánh dấu nội dung đều thuộc vùng này

• Những phần tử được thêm mới trong html 5:<article>,

<aside>, <audio>, …

Trang 16

Vùng Sectioning:

• Là vùng nội dung mới của html5

• Bao gồm 4 phần tử: <article>, <aside>, <nav>,

Trang 19

 Vùng interactive:

• Là những phần tử được sử dụng để tương tác người dùng

Trang 20

CONTENT HTML5

 Hỗ trợ tương thích cho các thành phần html5 trên các trình duyệt:

• Dùng file reset.css: khai báo để buộc các phần tử mới

của html5 hiển thị như 1 khối thay cho inline

• Dùng javascript (đối với IE 6,7,8)

Trang 22

CONTENT HTML5

 Phần tử <nav>:

• Thường dùng để chứa các thành phần điều hướng cho web

Trang 23

CONTENT HTML5

Trang 24

 Thành phần <section>:

• Biểu diễn một vùng chung của tài liệu hoặc ứng dụng

• Nên sử dụng một section khi muốn phân chia nội dung quan trọng như văn bản và hình ảnh thành các vùng

Trang 25

CONTENT HTML5

Trang 26

 Thành phần <article>:

• Là thành phần tự chứa trong một ứng dụng, trang, tài liệu hay

= site

• Có thể lồng phần tử <article> vào trong <section>

• Là lựa chọn tối ưu để chứa nội dung sẽ được đăng tải trong ngữ cảnh khác nhau thậm chí trên các thiết bị riêng biệt

• <article> có thể có một <header> ,<footer>

Trang 27

CONTENT HTML5

 Thành phần <aside>:

• Dùng cho vùng sidebar của website

• Dùng cho nội dung liên quan bên trong phần tử <section>

Trang 28

CONTENT HTML5

 Thành phần <footer>:

• Không thuộc lớp các phần tử chia đoạn

• Có thể có nhiều phần tử footer trên một trang web

Trang 29

FORM VỚI HTML 5

• Các thành phần mới của form html 5 bổ sung thêm chức năng

mà các nhà thiết kế cũng như người phát triển web thường phải kết hợp thông qua các phương tiện khác như javascript, flash

• Cách làm việc của form

Trang 30

FORM VỚI HTML 5

Cấu trúc mã form

• Id: cho phép định kiểu form với css

• Action: nơi gửi dữ liệu của người dùng để xử lý; thường là url được trỏ tới mã kịch bản được lưu trên máy chủ

• Method: xác định phương thức gửi dữ liệu; giá trị

POST/GET

Trang 31

FORM VỚI HTML 5

Làm việc với thành phần <label>: Là thành phần không bắt buộc và tăng khả năng truy cập cho form

Làm việc với <fieldset>:

• Nhóm các phần tử form trên trang

Trang 32

FORM VỚI HTML 5

• Kết hợp các thành phần <legend> để thêm tiêu đề cho form

Trang 33

FORM VỚI HTML 5

• Thêm điều khiển <input> mới và thuộc tính

• Cho phép các nhà thiết kế sắp xếp dữ liệu từ các website dễ dàng

• Dữ liệu có thể được gửi tự động tới một cơ sở dữ liệu xác định

Trang 34

FORM VỚI HTML 5

Trang 35

Làm việc với <datalist>

• Xác định một danh sách tùy chọn cho thành phần input

Trang 36

FORM VỚI HTML 5

Một số thành phần điều khiển mới cho input:

Trang 37

TỔNG KẾT

Cú pháp của html5 mở hơn các phiên bản trước

Cách khai báo của html 5 đơn giản, rút gọn hơn rất nhiều so với phiên bản trước

Cấu trúc mã html 5 gắn liền với cấu trức bố cục

trang: <header>, <nav>,…

Html 5 cung cấp nhiều điều khiển trong form hơn,

dễ dàng hơn cho người thiết kế và phát triển

Định dạng
Số trang	37
Dung lượng	3,17 MB