BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN
TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
****************************

GIÁO TRÌNH
MÔN HỌC/MÔ ĐUN: THIẾT KẾ WEB ĐA NỀN TẢNG
NGÀNH/NGHỀ: THIẾT KẾ TRANG WEB
TRÌNH ĐỘ: CAO ĐẲNG

(Ban hành kèm theo Quyết định số:
/QĐ-CĐCĐ-ĐT
ngày…….tháng….năm ................... của Trường Cao đẳng Cơ điện Hà Nội)
(Fonst chữ Times New Roman cỡ chữ 14 chữ thường in nghiêng)

Hà Nội, năm…

BÀI 1: TỔNG QUAN VỀ HTML 5 & CSS3.......................................................................2
Thành phần của HTML5.........................................................................................................3
1. Phạm vi sử dụng.................................................................................................................. 3
2. Tổng quan cú pháp của HTML5.........................................................................................3
3.Các thành phần / thẻ mới của HTML5.................................................................................5
4. Một số thành phần CSS3 mới:...........................................................................................11
BÀI 2: GIỚI THIỆU RESPONSIVE.................................................................................13
1. Khái niệm về Responsive Web Design...........................................................................13
2. Độ phân giải màn hình...................................................................................................13
BÀI 3: VIEWPORT TRONG THIẾT KẾ RESPONSIVE..............................................15
1. Khai báo meta viewport..................................................................................................15
2. Các giá trị trong khai báo thẻ meta viewport.....................................................................15
BÀI 4: MEDIA QUERIES..................................................................................................16
1. Media CSS là gì?.............................................................................................................. 16
2. Sử dụng @media với các thiết bị di động và máy tính......................................................16
a. Desktop First..................................................................................................................... 16
b. Mobile First....................................................................................................................... 17
BÀI 5: CSS GRIDVIEW.....................................................................................................19
1. Grid-View là gì?................................................................................................................19
2. Xây dựng 1 Responsive Grid-View................................................................................19
3. Thiết kế website responsive với menu............................................................................20

BÀI 1: TỔNG QUAN VỀ HTML 5 & CSS3
HTML5 là phiên bản lớn tiếp theo của HTML thay thế cho HTML 4.01, XHTML 1.0, và
XHTML 1.1. HTML5 là một chuẩn để cấu trúc và hiện diện nội dung trên WWW.
Chuẩn mới này kết hợp các tính năng như Video Playback và drag-and-drop mà trước đây
đã phụ thuộc vào plug-ins trình duyệt thứ 3 như Adobe Flash, Microsoft Silverlight, và
Google Gears.
Thành phần của HTML5

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

3.Các thành phần / thẻ mới của HTML5


Thẻ

Thẻ

là thẻ chứa phần HEADER của văn bản.
Thẻ

thường dùng để chứa phần giới thiệu nội dung.
Bạn có thể có nhiều thẻ

trong một tài liệu web .

Ví dụ :

trường cơ điện

logo, hình ảnh đại diện ...



Thẻ