Tài liệu HTML5-CSS3 Vietpro Education

1. HTML5 – CSS3
A – LÝ THUYẾT
I. HTML5
1. Định nghĩa
HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công
nghệ cốt lõi của Internet trong tương lai không xa .
Đây là phiên bản thứ 5 của ngôn ngữ HTML, được giới thiệu bởi World Wide Web Consortium
(W3C).
HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội
của XHTML, DOM cấp 2, đặc biệt là JavaScript.
 Thành phần của HTML5
 Phạm vi sử dụng
HTML5 được sử dụng để xây dựng các ứng dụng chạy trên PC , thiết bị di động
(Smartphone , tablet,…)

2. 2. Tổng quan cú pháp của HTML5
- Cấu trúc chuẩn của một site HTML5
- Ngôn ngữ HTML5 giới thiệu một số thẻ/ thành phần mới giúp cấu trúc trang web logic, thiết
thực hơn.
- Không phân biệt chữ in hoa in thường .
- Các phần tử không bắt buộc phải có thẻ đóng
- Không bắt buộc phải có nháy kép cho thuộc tính .

3. 3. Các thành phần / thẻ mới của HTML5
1 , Thẻ <header>
- Thẻ <header> là thẻ chứa phần HEADER của văn bản.
- Thẻ <header> thường dùng để chứa phần giới thiệu nội dung.
- Bạn có thể có nhiều thẻ <header> trong một tài liệu web .
- Ví dụ :

4. 2 , Thẻ <nav>
- Thẻ <nav> định nghĩa khu vực thiết lập menu điều hướng .
- Thẻ <nav> bao gồm tập hợp các link điều hướng.tuy nhiên không nhất thiết tất cả
các điều hướng phải nằm trong thẻ <nav>.
- Ví dụ :
3 , Thẻ <section>
- Thẻ <section> định nghĩa các khối (block) của trang WEB .
- Theo W3C HTML5: “Một section là một nhóm chuyên về nội dung, thường có thẻ
tiêu đề heading”
- Ví dụ :
4 , Thẻ <article>
- Thẻ <article> là thành phần thường chứa nội dung một bài viết , tin tức …
- Có thể lồng thẻ <article> vào trong thẻ <section>

5. - Thẻ <article> là lựa chọn tối ưu để chứa nội dung được đăng tải trong những ngữ
cảnh khác nhau .
- Thẻ <article> có thể chứa các thẻ <header>,<footer>,<section>
- Ví dụ :
5 , Thẻ <aside>
- Thẻ <aside> sử dụng cho vùng sidebar của website .
- Sử dụng cho một vùng nội dung liên quan bên trong thẻ <section>
- Ví dụ :
6 , Thẻ <footer>
- Thẻ <footer> chỉ rõ footer của trang WEB hoặc của một khối section
- Thẻ <footer> chuẩn chứa thông tin về tác giả, bản quyền, link liên kết điều khoản sử
dụng, thông tin liên hệ, vv.
- Bạn có thể có nhiều <footer>trong một trang web.
- Ví dụ :

6. -
7 , Thẻ <figure> và <figcaption>
- Ở các trang báo , sách thường có tiêu đề cho hình ảnh , mục đích của nó là đưa ra
chú thích cho hình ảnh .
- Ở HTML5 hình ảnh và tiêu đề có thể nhóm chung vào thẻ <figure>
- Ví dụ :

7. 8 , Thẻ <video>
- Thẻ <video> cho phép nhúng video vào trang web mà không cần dùng plugin của
trình duyệt
- Ví dụ :
9 , Thẻ <audio>
- Thẻ <audio> cho phép nhúng file âm vào thanh vào trang web mà không cần dùng
plugin của trình duyệt .

8. - Ví dụ :
10 , Thẻ <canvas>
- Thẻ <canvas> được sử dụng để vẽ những hình ảnh đồ họa linh động trên trang web
thông qua các ngôn ngữ script (thông thường là Javascript)
- Canvas có thể vẽ một khối màu đỏ, khối màu gradient hay tập hợp nhiều màu trên
một khối, tạo chữ nhiều màu, đổ bóng….
- Ví dụ :

9. 11, Web form
- Các thành phần mới của form HTML5 bổ sung thêm chức năng mà các nhà thiết kế
cũng như các nhà 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 và flash
- HTML5 cung cấp nhiều điều khiển trong form hơn , dễ dàng hơn cho nhà thiết kế và
phát triển
- HTML5 hỗ trợ validation form thông qua các thuộc tính mới
- Thuộc tính required : bắt buộc phải nhập input
- Giới hạn chuỗi sử dụng 2 thuộc tính minleght và maxleght
- Thuộc tính autofocus : tự động di chuyển con trỏ về thẻ input

10. - Ví dụ :

11. II. CSS3
1. Giới thiệu CSS3
CSS3 (Cascading Style Sheets Level 3) là phiên bản mới nhất của CSS dùng để trang trí và
giúp trang web nổi bật hơn. Với CSS3, chúng ta có thể:
- Tạo ra 1 số hiệu ứng đẹp và phong cách như transparent
backgrounds, shadows và gradients mà không sử dụng ảnh
- Tạo các animation mà không sử dụng flash.
- Tùy chỉnh layout và thiết kế trang web sao cho phù hợp với thiết bị của
người dùng (mobile, iPad hoặc Desktop) mà không sử dụng
Javascript.
2. Các đặc trưng mới của CSS3
1 , Border-radius
- Tạo ra 4 góc bo tròn cho đường viền
- Ví dụ :

12. 2 , Border-image
- Dùng để định dạng các dạng border bằng hình ảnh.
- Ví dụ :
-
- v
Read more: http://web.bendoi.vn/2013/04/css-border-image-dung-de-dinh-dang-
cac-dang-border-bang-hinh-anh.html#.VaOTVJj0HNg#ixzz3flZHtw7f
- Ví dụ :

13. 3 , Gradient
- Gradient là thành phần phổ biến trên trang web
- Gradient trong CSS giống với gradient trong các trương trình đồ hoạ
- Gradient bao gồm : 2 điểm dừng màu (color stop) , 1 điểm chuyển màu
- Có thể tạo được nhiều điểm dừng màu và điểm chuyển màu đê gradient được phong
phú hơn .
- Trước kia , khi chưa có CSS3 , người ta phải vẽ gradient trong chương trình đồ hoạ
rồi xuất thành hình ảnh để sử ụng trên web .
- Cấu trúc :
- Ví dụ :

14. 4 , Transform
- Cho phép xoay , kéo dãn ,phóng to , kéo nghiêng thành phần trên trang …
- Ví dụ :

15. 5 , Transtion
- Sử dụng transition để thay đổi kích thước của một phần tử theo thời gian được lập
trình trước sử dụng transition .
- Ví dụ :

16. 6 , Animation
- Xác định chuyển động , thay đổi theo thời gian của một thẻ , hay một hình ảnh .
- Ví dụ :
7 , Web fonts (font-face)
- Thêm các font độc đáo nhằm gây hiệu ứng về mặt thẩm mỹ đối với người xem.
- Cấu trúc: @font-face { thuộc tính: giá trị;}

17. - Ví dụ :
8 , Hình nền với CSS3
- Thực hiện chèn nhiều hình ảnh nền cho web với vị trí chính xác tuỳ chỉnh .
- Ví dụ :

18. 9 , CSS3 media queries
- Hình thức nhận biết thiết bị
- Kiểm tra khả năng của người dùng truy cập trang web
- Nhận biết được chiều cao , chiều rộng của trình duyệt ,nhận biết độ phân giải
- CSS3 media queries thường được dùng để cung cấp layout phù hợp cho mobile
(Reponsive)
- Ví dụ :
o Xây dựng cấu trúc HTML5 như sau :
o Viết CSS mặc định với kích thước của PC , laptop

19. o Thay đổi hiển thị khi kích thước thiết bị thay đổi (Tối đa 1000px)
o Thay đổi hiển thị khi nhận biết kích thước trình duyệt thay đổi (Tối đa 600px)

20. 10 , CSS3 layout
- Layout nhiều cột : Sử dụng CSS3 cung cấp các thuộc tính để thuận tiện cho việc
thiết kế layout dạng nhiều cột
Thuộc tính giá trị Ví dụ Mô tả
column
đơn vị column: 200px; Xác định chiều rộng cho cột.
Số nguyên column: 3; Xác định số lượng cho cột.
column-count
Số nguyên column-count: 3; Xác định số lượng cho cột.
auto column-count: auto;
Số cột sẽ được xác định bởi các thuộc
tính colum khác.
column-gap
đơn vị column-gap: 30px; Xác định khoảng cách giữa các cột.
normal column-gap: normal;
Khoảng cách cột sẽ có giá trị như mặc
định (1em).
column-rule-style
dashed column-rule-style: dashed;
Thiết lập kiểu của các đường kẻ giữa
các cột.
dotted column-rule-style: dotted;
double column-rule-style: double;
groove column-rule-style: groove;
hidden column-rule-style: hidden;
inset column-rule-style: inset;
none column-rule-style: none;

21. outset column-rule-style: outset;
ridge column-rule-style: ridge;
solid column-rule-style: solid;
column-rule-color Màu sắc column-rule-color: #cc0000;
Thiết lập màu của các đường kẻ giữa
các cột.
column-rule-width
đơn vị column-rule-width: 200px;
Xác định chiều rộng cho các đường
kẻ giữa các cột.
medium column-rule-width: medium;
Xác định chiều rộng trung bình của
các đường kẻ giữa các .
thin column-rule-width: thin; Xác định các đường kẻ nhỏ.
thick column-rule-width: thick; Xác định các đường kẻ dày.
column-rule
đơn vị
column-rule: 200px solid #cc0000;
Xác định chiều rộng các đường kẻ
cho cột.
Kiểu
Thiết lập kiểu của các đường kẻ giữa
các cột.
Màu sắc
Thiết lập màu của các đường kẻ giữa
các cột.
column-span
1 column-span: 1; Xác định thành phần nằm trong 1 cột.
all column-span: all;
Xác định thành phần nằm trải dài tất
cả các cột.
column-width
đơn vị column-width: 200px; Xác định chiều rộng cho cột.
auto column-width: auto;
Chiều rộng cột sẽ được quyết định bởi
trình duyệt.
- Ví dụ :

22. 11 , CSS3 User Interface (Giao diện người dùng)
- CSS3 cung cấp một số tính năng về phía người dùng : Thay đổi kích thước thành
phần trên trang , thay đổi kích thước hộp , phác thảo .
- Các thuộc tính quy định : resize , box-sizing , outline-offset
- CSS3 resize : Quy định một thành phần có thể hay không thể thay đổi kích thước
bởi người dùng
Ví dụ :

23. - CSS3 box sizing : Bình thường kích thước thực tế của một thẻ section sẽ là kích
thước mà bạn set trong css + padding + border .

24. Với thẻ section này sẽ có width= 300+50*2+5*2=410px
Trường hợp bạn muốn có 1 section mà padding , border không ảnh hưởng gì đến
kích thước thẻ section . Đáp án bạn cần tìm đó là box-sizing
- CSS3 Outline Offset : Qui định một đường biên bao phía ngoài đường biên mặc
định

25. B – BÀI TẬP
Bài 1 Thực hiện dàn layout phần header theo cấu trúc HTML5 .
1. Học viên thực hiện khai báo lại mã HTML5 như sau :
2. Trong phần <body> của cấu trúc HTML5 trên , chèn thêm mã header cho
site . Đồng thời tạo thêm file style.css để viết style cho header của trang
web .
3. Sử dụng các kiến thức đã học và hình ảnh , font có trong thư mục file để
dàn phần header theo như hình minh hoạ dưới đây :
Chú ý :
o Thẻ <header> có width=1200px , height=145px
o Thẻ <section

26. o Phần text : “Trung tâm đào tạo nghệ thuật Taca Emca “ nằm
trong thẻ <h1> sử dụng font UVNThuTu , mã màu #27121 , font-
size=45px .
o Hình nền phía dưới bên phải , không lặp .
o Hình ảnh logo đặt trong thẻ <figure> , thẻ <figure> cách trên dưới
16px trái phải 0px (padding), thẻ <img> kích thước width=145px ,
height=110px