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. 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. 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ụ :

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>

- 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ụ :

-

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ụ :

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 .

- 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ụ :

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

- Ví dụ :

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ụ :

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ụ :

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ụ :

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ụ :

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ụ :

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ị;}

- 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ụ :

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

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)

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;

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ụ :

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ụ :

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

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

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

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