Chào mừng bạn đến với series hướng dẫn thiết kế web với HTML5 và CSS3. Ở Series này Bi sẽ hướng dẫn các bạn thiết kế một website sử dụng HTML5 và CSS3 kết hợp với Javascipt. Giới thiệu cho các bạn biết những thành phần mới trong HTML5 và CSS3, những gì chúng ta có thể làm được với HTML5 và CSS3. Ở bài đầu tiên của Series hướng dẫn thiết kế web với HTML5 và CSS3 này, Bi sẽ giới thiệu cho các bạn một số phần sau:
Video Hướng Dẫn
1. HTML5 là gì? Những thành phần mới có trong HTML5
Thành phần của HTML5
HTML5 và họ HTML5
HTML5
+ Là những thành phần đánh dấu/ cú pháp mới
+ Các thẻ (tag)
+ Ví dụ: <ul>, <li>, <div>, …
Họ HTML5
+ Bao gồm các thẻ mới
+ Công nghệ mới: CSS3, Geolocation, Web storage, web worders, web socket
+ Tác dụng của công nghệ mới
- Cung cấp tính năng mạnh mẽ cho bộ công cụ
- Tạo ra website hữu dụng & tinh xảo
Phạm vi sử dụng HTML5
+ PC
+ Thiết bị di động & smartphone
2. Tổng quan về cú pháp 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 được logic thiết thực hơn
Phiên bản trước
HTML5
Những thành phần mới của HTML5
A: <header>
B: <nav>
C: <section>
D: <article>
E: <aside>
F: <footer>
Tên của thành phần mới dựa theo tên các thành phần thông dụng được sử dụng trong phần bố cục trang web hiện nay (div id=”footer”,divid=”nav”,…).
Tác dụng của các thành phần mới trong HTML5:
+ Giảm bớt sự phụ thuộc vào thẻ <div>
+ Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
+ HTML5 không thay thế bất kỳ cú pháp HTML nào; mà chỉ bổ sung thêm các thành phần (thẻ) mới vào danh sách hiện có.
3. Một số thành phần mới của HTML5
Một số thành phần mới của HTML5
+ <Video> và <audio>:
- Cho phép nhúng video và file âm thanh vào trang web
- Không cần sử dụng tới plugin của trình duyệt
Video
Audio
<canvas>:
+ Cung cấp các tính năng vẽ và hoạt hình
+ Làm việc giống như một bảng vẽ trên trang 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 để làm cho đối tượng được tạo ra trên bảng vẽ di chuyển, biến mất, thay đổi tỷ lệ, …
+ Lưu hình ảnh vừa vẽ dưới dạng .png
Khai báo <canvas>:
Sử dụng javascript:
+ Web Form”
- Thành phần form mới trong HTML khi được thực thi sẽ giúp quá trình làm việc với các form trở nên dễ dàng hơn so với hiệu tại
+ Một số thành phần mới khác:
- <figure>, <figurecaption>: gán nhãn (hoặc chú thích ảnh) cho các hình ảnh trên trang web
- <hgroup>: nhóm một tập các thành phần vào một thành phần hợp lý
4. Tổng quan về HTML5 API
+ API (Application Programming Interfaces – giao diện lập trình ứng dụng):
- là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn
- Không chỉ được áp dụng trong phát triển web mà còn cả các nguôn ngữ kịch bản
- Mục đích chính của API là để chuẩn hóa cơ chế làm việc và đơn giản hóa nhiệm vụ lập trình phức tạp
- Một số HTML5 API: Drap and Drop, Web storage, Microdata, và Geolocation
+ API Geolocation:
- Giúp xác định vị trí địa lý của trình duyệt web
- Thông tin này được sử dụng để gửi dưới dạng dữ liệu liên quan dựa trên vị trí
- Geolocation hiện tại đang được kích hoạt trong một số trình duyệt hiện đại
- Ví dụ: flickr.com/map
- Web workers
- Web workers là một framework (nền tảng) giải quyết vấn đề hiệu suất của trình duyệt
- Là mã kịch bản chạy trên một luồng riêng biệt
+ Web storage:
- Cả tiến cookie của trình duyệt
- Cookie là một công nghệ bị giới hạn và khó khăn cho các nhà thiết kế để có thể sử dụng.
- Web storage nâng cấp mô hình này để cung cấp không gian lưu trữ lớn hơn cho các ứng dụng web hiện đại
5. Giới thiệu CSS3
- CSS3 không phải là một thành phần của HTML5, nhưng lại có mối liên quan mật thiết với HTML5
- CSS3 được phát triển song song với HTML5
- CSS3 có những thành phần mới nào?
- CSS animation (CSS hoạt hình)
- CSS transition (CSS chuyển đổi)
- CSS 2D/ 3D transformation: transform
- CSS3 background, border, RGAa color, gradient, drop shadows, góc bo tròn, …: border-radius, backgroup-image, border-image
- Web font: @font-face
Tổng kết
- HTML5 cung cấp các thành phần mới, dựa theo tên các thành phần thông dụng được sử dụng trong phần - - bố cục trang web: footer, nav, section, article, aside, footer
- Một số thành phần mới của HTML5: <video>, <audio>, <canvas>, …
- API: là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn
- Một số HTML5 API: Drap and Drop, Web storage, Microdata và Geolocation
- CSS3 không phải là một thành phần của HTML5, nhưng lại có mối liên quan mật thiết với HTML5
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
Video Hướng Dẫn
1. HTML5 là gì? Những thành phần mới có trong HTML5
Thành phần của HTML5
HTML5 và họ HTML5
HTML5
+ Là những thành phần đánh dấu/ cú pháp mới
+ Các thẻ (tag)
+ Ví dụ: <ul>, <li>, <div>, …
Họ HTML5
+ Bao gồm các thẻ mới
+ Công nghệ mới: CSS3, Geolocation, Web storage, web worders, web socket
+ Tác dụng của công nghệ mới
- Cung cấp tính năng mạnh mẽ cho bộ công cụ
- Tạo ra website hữu dụng & tinh xảo
Phạm vi sử dụng HTML5
+ PC
+ Thiết bị di động & smartphone
2. Tổng quan về cú pháp 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 được logic thiết thực hơn
Phiên bản trước
<div id="header">This is my header</div>
#header{width:960px;height:100px;backgroud-color:gray}
#header{width:960px;height:100px;backgroud-color:gray}
HTML5
<header>This is my header</header>
#header{width:960px;height:100px;backgroud-color:gray}
#header{width:960px;height:100px;backgroud-color:gray}
Những thành phần mới của HTML5
A: <header>
B: <nav>
C: <section>
D: <article>
E: <aside>
F: <footer>
Tên của thành phần mới dựa theo tên các thành phần thông dụng được sử dụng trong phần bố cục trang web hiện nay (div id=”footer”,divid=”nav”,…).
Tác dụng của các thành phần mới trong HTML5:
+ Giảm bớt sự phụ thuộc vào thẻ <div>
+ Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
+ HTML5 không thay thế bất kỳ cú pháp HTML nào; mà chỉ bổ sung thêm các thành phần (thẻ) mới vào danh sách hiện có.
3. Một số thành phần mới của HTML5
Một số thành phần mới của HTML5
+ <Video> và <audio>:
- Cho phép nhúng video và file âm thanh vào trang web
- Không cần sử dụng tới plugin của trình duyệt
Video
<video src="video.mp4" width="400" height="300"></video>
Audio
<audio src="audio.mp3" controls preload="auto" autobuffer></audio>
<canvas>:
+ Cung cấp các tính năng vẽ và hoạt hình
+ Làm việc giống như một bảng vẽ trên trang 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 để làm cho đối tượng được tạo ra trên bảng vẽ di chuyển, biến mất, thay đổi tỷ lệ, …
+ Lưu hình ảnh vừa vẽ dưới dạng .png
Khai báo <canvas>:
<canvas id=myCanvas"></canvas>
Sử dụng javascript:
<script>
var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d");
// x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100);
</script>
var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d");
// x = 10, y = 20, width = 200, height = 100 context.fillRect(10, 20, 200, 100);
</script>
+ Web Form”
- Thành phần form mới trong HTML khi được thực thi sẽ giúp quá trình làm việc với các form trở nên dễ dàng hơn so với hiệu tại
+ Một số thành phần mới khác:
- <figure>, <figurecaption>: gán nhãn (hoặc chú thích ảnh) cho các hình ảnh trên trang web
- <hgroup>: nhóm một tập các thành phần vào một thành phần hợp lý
4. Tổng quan về HTML5 API
+ API (Application Programming Interfaces – giao diện lập trình ứng dụng):
- là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn
- Không chỉ được áp dụng trong phát triển web mà còn cả các nguôn ngữ kịch bản
- Mục đích chính của API là để chuẩn hóa cơ chế làm việc và đơn giản hóa nhiệm vụ lập trình phức tạp
- Một số HTML5 API: Drap and Drop, Web storage, Microdata, và Geolocation
+ API Geolocation:
- Giúp xác định vị trí địa lý của trình duyệt web
- Thông tin này được sử dụng để gửi dưới dạng dữ liệu liên quan dựa trên vị trí
- Geolocation hiện tại đang được kích hoạt trong một số trình duyệt hiện đại
- Ví dụ: flickr.com/map
- Web workers
- Web workers là một framework (nền tảng) giải quyết vấn đề hiệu suất của trình duyệt
- Là mã kịch bản chạy trên một luồng riêng biệt
+ Web storage:
- Cả tiến cookie của trình duyệt
- Cookie là một công nghệ bị giới hạn và khó khăn cho các nhà thiết kế để có thể sử dụng.
- Web storage nâng cấp mô hình này để cung cấp không gian lưu trữ lớn hơn cho các ứng dụng web hiện đại
5. Giới thiệu CSS3
- CSS3 không phải là một thành phần của HTML5, nhưng lại có mối liên quan mật thiết với HTML5
- CSS3 được phát triển song song với HTML5
- CSS3 có những thành phần mới nào?
- CSS animation (CSS hoạt hình)
- CSS transition (CSS chuyển đổi)
- CSS 2D/ 3D transformation: transform
- CSS3 background, border, RGAa color, gradient, drop shadows, góc bo tròn, …: border-radius, backgroup-image, border-image
- Web font: @font-face
Tổng kết
- HTML5 cung cấp các thành phần mới, dựa theo tên các thành phần thông dụng được sử dụng trong phần - - bố cục trang web: footer, nav, section, article, aside, footer
- Một số thành phần mới của HTML5: <video>, <audio>, <canvas>, …
- API: là cách tạo ra các ứng dụng sử dụng các thành phần được dựng sẵn
- Một số HTML5 API: Drap and Drop, Web storage, Microdata và Geolocation
- CSS3 không phải là một thành phần của HTML5, nhưng lại có mối liên quan mật thiết với HTML5