Các nguyên lý sáng tạo ứng dụng trong công nghệ Web thế hệ mới

Nguyễn Trí Đức- KHMT K18
1

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
  


BÀI THU HOẠCH
MÔN HỌC

PHƯƠNG PHÁP NGHIÊN CỨU
KHOA HỌC TRONG TIN HỌC

Đề tài

CÁC NGUYÊN LÝ SÁNG TẠO ỨNG DỤNG TRONG
CÔNG NGHỆ WEB THẾ HỆ MỚI
Giảng viên hướng dẫn : GS-TSKH. Hoàng Văn Kiếm

Học viên thực hiện : Nguyễn Trí Đức
Lớp : KHMT K18
Mã số : 02 08 480110





TP.HCM, 12/2012
Nguyễn Trí Đức- KHMT K18
2

LỜI NÓI ĐẦU
"Phương pháp luận sáng tạo" là bộ môn khoa học có mục đích trang bị cho
người học hệ thống các phương pháp, các kỹ năng thực hành về suy nghĩ để giải
quyết các vấn đề và ra quyết định một cách sáng tạo, về lâu dài, tiến tới điều khiển
được tư duy.
Mỗi người chúng ta trong cuộc đời của mình gặp biết bao vấn đề, từ
chuyện mua sắm, học hành, quan hệ giao tiếp đến chọn ngành nghề, nơi ở, thu
nhập, xã hội… phải suy nghĩ để giải quyết và ra quyết định xem phải làm gì và
làm như thế nào. Như vậy thấy rằng đối tượng và mục đích của bộ môn khoa học
này lại hết sức gần gũi với mỗi người.
Theo các nhà nghiên cứu, khoa học này ứng với "làn sóng thứ tư" trong quá
trình phát triển của loài người, sau nông nghiệp, công nghiệp và tin học. Làn sóng
thứ tư ứng với Creatology (hay còn gọi là thời đại hậu tin học) chính là sự nhấn
mạnh vai trò chủ thể tư duy sáng tạo của loài người trong thế kỷ XXI.
Sau khi tham dự môn học về “Phương pháp nghiên cứu khoa học” tại
trường Đại học khoa học tự nhiên do thầy GS-TSKH Hoàng Văn Kiếm giảng dạy ,
tôi đã có những kiến thức căn bản về các nguyên lí sáng tạo. Vận dụng các nguyên
lí sáng tạo vào nghiên cứu khoa học là rất quan trọng. Nó giúp các ứng dụng sáng
tạo hoạt động linh hoạt và hiệu quả, mang lại những kết quả ưu việt nhất; đồng
thời chống lại thói quen suy nghĩ theo lối mòn và tính ì. Thời gian qua, tôi đã tìm
hiểu về lịch sử phát triển của công nghệ web. Trong phạm vi đề tài này, tôi muốn
chia sẽ những thông tin và những hiểu biết của bản thân về những gì tôi đã tìm
hiểu được từ HTML 5 và CSS3 trên cơ sở áp dụng của phương pháp lí luận sáng
tạo.
Nguyễn Trí Đức- KHMT K18
3
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Nguyễn Trí Đức- KHMT K18
4
MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN 3
PHẦN I. HTML5 6
1. Lịch sử phát triển của HTML 6
Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML 7
2. Những điểm mới trong HTML 5 9
Form nhập liệu mới 12
Tag HTML mới 13

HTML 5 Drag và drop 15
Web Storage và Application Cache 15
3. Tiện ích HTML5 16
4. Các nguyên tắc sáng tạo được áp dụng trong HTML 5 18
1. Nguyên tắc rẻ thay cho đắt 18
2. Nguyên tắc tách khỏi 18
3. Nguyên tắc kết hợp 19
4. Nguyên tắc phân nhỏ 20
5. Nguyên tắc vạn năng 20
6. Nguyên tắc dự phòng 21
7. Nguyên tắc sử dụng trung gian 21
8. Nguyên tắc thực hiện sơ bộ 21
9. Nguyên tắc liên tục tác động có ích 22
PHẦN II CSS 3 23
1. Lịch sử phát triển của CSS 23
Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS 23
2. Những điểm mới trong CSS 3 25
Nguyễn Trí Đức- KHMT K18
5
3. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 28
Nguyên tắc chuyển sang chiều khác 28
Nguyên tắc phân nhỏ 28
Nguyên tắc rẻ thay cho đắt 28
Nguyên tắc vạn năng 28
Nguyên tắc thay đổi màu sắc 29
PHẦN III. 40 nguyên lý sáng tạo 30
KẾT LUẬN 39
TÀI LIỆU THAM KHẢO 40

Nguyễn Trí Đức- KHMT K18

6
PHẦN I. HTML5
1. Lịch sử phát triển của HTML
HTML là viết tắt của cụm từ HyperText Markup Language (Ngôn ngữ đánh
dấu siêu văn bản), và đây là ngôn ngữ chính được sử dụng cho việc thiết kế các
website. Ngôn ngữ này gây ấn tượng cho người ta bởi sự ngắn gọn nhưng lại được
hình thành trong một quá trình khó phân định. Việc hình thành HTML có mối
quan hệ mật thiết với sự phát triển của Internet. Ngày nay, HTML rất được khuyên
dùng bởi sự xuất hiện của một chuẩn mới, thực tế là một phiên bản cao hơn của
ngôn ngữ này như là một sự phát triển tất yếu- HTML5.
HTML đã trải qua 4 phiên bản gồm HTML phiên bản đầu tiên
(1991), HTML 2 (1994), HTML 4 (1997)

Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ mới,
tính năng mới cũng như là tính đơn giản hóa ngày càng cao.
Nguyễn Trí Đức- KHMT K18
7
HTML 4 đươc phát triển vào năm 1997 và là phiên bản thành công
nhất được sử dụng phổ biến cho đến hiện nay. Với rất nhiều thẻ mới như
Button, FieldSet, Frame, Iframe, Legend, Span v.v…
Ngoài ra, HTML 4 còn hỗ trợ hiển thị hầu hết ngôn ngữ trên thế giới
dựa trên chuẩn Universal Character Set, các phiên bản trước chỉ hiển thị
theo chuẩn ISO-8859-1. HTML 4 còn hỗ trợ một số tính năng quan trọng
sau:
 Hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm
các tập tin script bên ngoài vào. Hỗ trợ các sự kiện client-script
như onclick, onchange v.v… cho các thẻ.
Đặc biệt là HTML4 hỗ trợ CSS với các thuộc tính mới ID, Class
và Style. Ba thuộc tính này giúp các thẻ liên kết với các style
được khai báo trong CSS.

 Việc tích hợp với CSS này rất có ý nghĩa quan trọng cho các nhà
thiết kế web. Họ có thể sử dụng những CSS chung cho các thẻ có
kiểu hiển thị như nhau và có thể thoải mái sáng tạo giao diện mà
không tốn công sức như trước đây (khai báo các thuộc tính kiểu
cho từng thẻ).
Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML
- Nguyên tắc phân nhỏ:
Chia các thẻ thành nhiều phần như Header, Body Mỗi phần đảm
nhận những chức năng riêng.
- Nguyên tắc phẩm chất cục bộ:
Mỗi thẻ HTML có những tính năng riêng và có các thuộc tính riêng
của từng thẻ.
- Nguyên tắc kết hợp:
Nguyễn Trí Đức- KHMT K18
8
Kết hợp được HTML với CSS để dễ dàng thao tác các style dùng
chung cho các thẻ HTML.
Kết hợp với client-script như javascript hay vbscript để giúp cho
trang web thêm phần linh động mềm dẻo, giúp kiểm tra tính hợp lệ
trước khi gửi yêu cầu xuống server xử lý, giảm thiểu việc truyền tải
những thông tin không cần thiết.
- Nguyên tắc thay đổi màu sắc:
Trong các thẻ HTML, một số thuộc tính giúp thay đổi màu sắc cho
một trang web như các thuộc tính bgcolor, fontcolor…….
- Nguyên tắc chứa trong:
Các thuộc tính được chứa bên trong các thẻ HTML.
Ví dụ: <table border=”1px”></table>
Thuộc tính border được chứa trong thẻ table.
- Nguyên tắc tách khỏi:
Không phải tất cả nội dung trong source HTML đều hiển thị, có một

số nội dung được HTML tách ra khỏi, không hiện thị lên trang
HTML.Comments là các phần riêng trong 1 trang HTML, nó không
hiển thị trên trình duyệt mà chỉ có nhiệm vụ lưu lại các ghi chú hoặc
giải thích trong đoạn mã HTML.
Việc tách CSS ra thành một ngôn ngữ riêng thay vì tích hợp thành
các thuộc tính trong các thẻ HTML.
- Nguyên tắc đồng nhất:
Mỗi thẻ trong HTML đều đồng nhất 1 quy tắc, luôn có 1 cặp thẻ
gồm thẻ mở, thẻ đóng. Mỗi thẻ HTML khi khai báo thì phải luôn có
một thẻ đóng. Ví dụ: <button>…<button/>.
Mỗi trang HTML đều phải khai báo đầu tiên là <DOCTYPE> và
phiên bản được sử dụng trong trang đó. Ví dụ: Nếu trang web sử
dụng HTML 3.2 Final thì phải khai báo là:
Nguyễn Trí Đức- KHMT K18
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
- Nguyên tắc dự phòng:
Việc nhìn vào mã của HTML sẽ rất phức tạp vì một thẻ có thể có rất
nhiều thẻ con bên trong. Điều đó sẽ gây cho người đọc rất khó hiểu,
nên thẻ <! -> đã hỗ trợ cho việc ghi chú, tóm tắt lại nội dung chính
của những đoạn mã.
HTML đã hỗ trợ rất nhiều về việc chèn các ký tự vào nội dung hiển
thị mà không được hỗ trợ trong siêu văn bản như các ký tự “<” và
“>”. Nếu muốn sử dụng những kí tự đặc biệt này, chúng ta phải dùng
mã hóa tương ứng. Ví dụ: “&lt;”  “<”, “&gt;”  “>”, “&amp;”
2. Những điểm mới trong HTML 5
HTML5 mang lại cho người dùng trải nghiệm lướt Web hoàn toàn mới,
nhanh hơn, ổn định hơn và bảo mật hơn. HTML5 sẽ giúp các nội dung trên Web
hoạt động tốt hơn mà không cần phụ thuộc vào bất kì một ứng dụng phụ trợ nào
khác.

HTML5 – Mang đến sức sống mới cho Web
Không những mang lại những lợi ích to lớn như hoạt động nhanh, ổn dịnh
và bảo mật hơn. Bên cạnh đó, HTML5 có khả năng hỗ trợ API (Application
Programming Interface) và DOM (Document Object Model) sẽ cho phép dễ dàng
mở rộng, giúp các nhà phát triển tự do sáng tạo trong việc tạo ra các ứng dụng
thân thiện và hữu ích hơn.

Nguyễn Trí Đức- KHMT K18
10
Với HTML5, các nhà phát triển chỉ cần xây dựng ứng dụng 1 lần, nó có thể
hoạt động tốt trên tất cả các thiết bị, không như Flash hoặc Silverlight đòi hỏi phải
cài đặt plugin để có thể hiển thị nội dung.
HTML5 – Nội dung đã đa dạng hơn, được hỗ trợ tốt hơn
Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ ràng, Flash sẽ
không bao giờ xuất hiện trên các thiết bị di động của Apple, và cũng đưa ra sự ủng
hộ tuyệt đối vào HTML5. Quan điểm này thể hiện rõ ràng đến nỗi Steve Jobs đã
viết 1 bức thư và đăng trên trang chủ của Apple để thể hiện quan điểm này và xóa
tan những mong muốn đưa Flash lên iOS của người dùng.
Bên cạnh những lợi ích mà HTML5 mang lại, giới phát triển cũng chỉ ra
những hạn chế rất lớn của Flash, đó là sự bất ổn định, làm thiết bị hoạt động nóng
hơn và hao pin hơn, phải yêu cầu cài Plugin để hoạt động. Và Flash không phải là
tối ưu cho các thiết bị di động khi vấn đề về PIN trên các thiết bị này luôn là mối
quan tâm lớn của người dùng.
Hiện nay, nhiều trang web và dịch vụ lớn đã chuyển sang dùng HTML5, có
thể kể đến trong số đó là Youtube, Nokia Maps… Ngoài ra, rất nhiều games được
xây dựng bằng HTML5 đã xuất hiện, trong số đó có các games nổi tiếng như
Angry Bird, Fieldrunners… Cho thấy HTML5 ngày càng được quan tâm và phát
triển nhiều hơn.
HTML5 có thể thay thế Flash
Với sự quan tâm ngày càng lớn mà các nhà phát triển dành cho HTML5

cho thấy thời gian tới, HTML5 sẽ ngày một phát triển mạnh mẽ hơn. Đây không
phải là một điều quá bất ngờ, vì với những gì mà HTML5 mang lại, đó là sự lựa
chọn thực sự đúng đắn và người sử dụng Web sẽ được hưởng lợi rất nhiều.
. Và ngày 09/11 đánh dấu bước tiến quan trọng của HTML5 khi chinh
Adobe tuyên bố sẽ ngừng phát triển Flash trên các thiết bị di động mà thay vào đó
là tập trung phát triển HTML5. Với giới công nghệ, đây có thể là một bước ngoặt
quan trọng. Adobe cho biết họ vẫn sẽ tung các bản sửa lỗi, nhưng sẽ không phát
Nguyễn Trí Đức- KHMT K18
11
triển Flash trên các thiết bị di động nữa, và Flash Player 11.1 sẽ là phiên bản nâng
cấp cuối cùng.




Cấu trúc mới HTML
Cấu trúc mới của HTML 5 sẽ giúp các nhà thiết kế dễ dàng trong
việc sắp xếp các bố cục. Trong các phiên bản trước, để thiết kế bố cục cho
một trang web, người thiết kế phải kết hợp nhiều thẻ HTML và CSS.
Nhưng trong phiên bản thứ 5 này, bố cục được định nghĩa rõ ràng, sánh sủa
hơn


Cấu trúc của HTML 4
Nguyễn Trí Đức- KHMT K18
12

Cấu trúc mới của HTML 5
HTML 5 cũng đã đơn giản hóa kiểu khai báo Doctype cho trang web
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
HTML5:
<!DOCTYPE html>
Form nhập liệu mới
HTML 5 hỗ trợ hầu hết các dạng nhập liệu tiêu chuẩn như:
 datetime
 datetime-local
 date
 month
 week
 time
 number
 range
 email
 url
Dữ liệu nhập vào đều được kiểm tra tính đúng đắn trước khi gửi dữ
liệu đến server.
Ví dụ sau kiểm tra tính đúng đắn của dữ liệu nhập “email” với thuộc
tính novalidate
<form autocomplete="on" bgcolor="#FFFFFF">
E-mail: <input type="email" name="email" autocomplete="off"
novalidate="novalidate" /><br />
<input type="submit" />
Nguyễn Trí Đức- KHMT K18
13
</form>
Nhập liệu sai định dạng

Nhập liệu đúng định dạng:

Tag HTML mới
HTML 5 bổ sung thêm khoản gần 30 tag mới, đồng thời khoảng 15
tag của phiên bản trước không được hỗ trợ trong phiên bản này. Tham khảo

HTML5 có một vài tag được xem là điểm nhấn về media trên web.
Đó là tag Canvas, Video, Audio.
Tag Canvas hỗ trợ việc hiển thị hình ảnh, tạo ra các hình vẽ 2D, 3D
và có thể can thiệp hình ảnh bên trong bằng javascript. Điều đó đã giúp cho
các nhà phát triển game có thể dễ dàng phát hành game sử dụng Canvas.
Tham khảo tại địa chỉ:
Tag Video và Audio sẽ giúp hiển thị một đoạn clip hay một bài nhạc
trên trang web. Điều khác biệt ở đây là không cần sự hỗ trợ plug-in của bên
thứ 3. Một ví dụ cho thẻ Video:
<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
</video>
Kết quả việc play video hay audio trở nên cực kỳ đơn giản
Nguyễn Trí Đức- KHMT K18
14

.
SVG
SVG là một công nghệ mới dựa trên định dạng XML cho phép tạo các đối
tượng đồ họa phức tạp để hiển thị trên trình duyệt. Được bắt đầu phát triển từ
1999, hiện tại phiên bản thứ hai của SVG đã được tổ chức W3C chính thức ra mắt
vào tháng 8/2011.
Do là hình vẽ theo kiểu vector nên hình ảnh sẽ không bị vỡ ảnh trong bất kỳ
kích thước và độ phân giải nào. Lợi ích của SVG là có thể nén, phóng to, thu nhỏ,

in với chất lượng cao.
<svg xmlns=" version="1.1">
<circle cx="90" cy="200" r="60" stroke="black" strokewidth="2" fill="red"style="opacity:0.5"/>
<circle cx="150" cy="200" r="60" stroke="black" strokewidth="2" fill="green"style="opacity:0.
5"/>
<circle cx="120" cy="250" r="60" stroke-width="2" style="fill:blue;stroke:black;opacity:0.5" />
</svg>

Nguyễn Trí Đức- KHMT K18
15
HTML 5 Drag và drop
Đó là khả năng kéo và thả đối tượng bất kỳ vào 1 vị trí nào đó. Đây
là tính năng mới khá hay của HTML5. Tham khảo thêm

Web Storage và Application Cache
HTML5 cung cấp một tính năng lưu trữ dữ liệu tại client với dung lượng
giới hạn lớn hơn nhiều so với cookie. Tính năng này được gọi là Web Storage và
được chia thành hai đối tượng là localStorage và sessionStorage
- SessionStorage: giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một
trang web được mở trong hai thẻ của cùng một trình duyệt cũng không thể truy
xuất dữ liệu lẫn nhau. Như vậy, khi đóng trang web thì dữ liệu lưu trong
sessionStorage hiện tại cũng bị xóa.
- LocalStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ
liệu sẽ được lưu trữ không giới hạn thời gian.
Hiện nay, mỗi cookie chỉ cho phép lưu trữ tối đa 4KB và vài chục cookie
cho một domain. Vì thế cookie chỉ được dùng để lưu trữ những thông tin đơn giản
và ngắn gọn như email, username, … giúp người dùng đăng nhập tự động vào
trang web. Điều này khiến cho những trang web muốn nâng cao hiệu suất làm việc
bằng cách cache dữ liệu tại client hầu như không thể thực hiện được.
Sự xuất hiện của Web Storage là một điểm nhấn cho việc ra đời các ứng

dụng web có khả năng tương tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu
quả nữa là dung lượng truyền tải qua mạng có thể được giảm thiểu đáng kể. Ví dụ
một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên
máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối đến
server để tải lại những dữ liệu cũ.
Với những ứng dụng web có cơ sở dữ liệu nhỏ gọn, lập trình viên có thể
thực hiện việc cache “âm thầm” cơ sở dữ liệu xuống client và sau đó người dùng
có thể thoải mái tra cứu mà không cần request đến server.
Nguyễn Trí Đức- KHMT K18
16
3. Tiện ích HTML5
HTML5 làm giảm tầm quan trọng của các plug-ins
Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình
duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm. Âm thanh, ảnh
động hay những thủ thuật khác xuất hiện trên Web thông qua plug-ins, phát triển
bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác. Giao diện plug-ins
mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năng
mới.
Plug-ins sẽ bị biến mất hoặc không được dùng? . Nếu vẽ hình ảnh, Canvas
là thích hợp nhất. Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong
các trò chơi Flash và Shockwave phức tạp, phải dùng tới plug-in khi nó có thể kết
nối trực tiếp tới video cũng như chạy thế giới game 3-D.
HTML5 hỗ trợ đồ họa tương tác
Web cũ tải hình ảnh bằng cách tải file GIF hay JPG. Web mới có thể xây
dựng hình ảnh trên Canvas. Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ
họa của Website trở nên tương tác hơn.
Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu.
Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải
pháp. Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5. Sự xuất
hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa

sẽ được tinh xảo hơn hiện nay.
HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file
Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong
các cookies (300 cookies tương đương với 4096 byte). Lập trình viên có thể lưu
trữ bất cứ thứ gì họ muốn. Điều này giúp việc cài đặt các ứng dụng dễ dàng hơn.
Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và
hoạt động ngay cả khi kết nối Web đang hoạt động.

Nguyễn Trí Đức- KHMT K18
17
HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data
Đối với việc chia nhỏ dữ liệu từ các trang web thì HTML không giúp được
nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu. Microformats trong HTML5 cung
cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn.
Microformats có thể giúp các lập trình viên có nhiều giải pháp hơn.
HTML5 giúp hợp nhất các địa chỉ
Đối với máy chủ Web, địa chỉ máy tính đơn thuần chỉ là những con số ẩn
danh. Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng. Tuy
nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi…),
nhưng nó lại hoạt động tốt với smartphone cầm tay.
HTML5 làm video của Web đẹp hơn
Chuẩn HTML5 giúp các nhà lập trình tiếp hợp videp dễ dàng hơn với thông
tin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash,
Silverlight hay JavaFX.
Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động
và âm thanh tương ứng dẫn đến việc không thống nhất. Chuẩn HTML5 sẽ là mã
nguồn mở trung gian, có nghĩa là thay đổi cách gọi từ plug-in thành codec. Mặc dù
vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, thẻ video mới này sẽ
cho thấy sức mạnh của video, giúp cho HTML bớt đi kí tự văn bản và video sẽ
được dùng nhiều hơn.

HTML5 có thể tăng khả năng bảo mật
Mỗi trình duyệt có 1 plug-in riêng do các nhóm lập trình khác nhau lập ra
với những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu
mẫu bảo mật cung khác nhau. Thông thường, một số phiên bản plug-in mới có
tính bảo mật hơn so với loại khác. Và khi số lượng plug-in gia tăng, chúng làm
tăng độ phức tạp trong kiểm tra các lỗi an ninh.
Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ
bỏ đi được những khuyết điểm có trong các plug-in trước đó. Những khuyết điểm
có thể bị lợi dụng để thiết lập mã độc.
Nguyễn Trí Đức- KHMT K18
18
HTML5 đơn giản hóa việc phát triển web
HTML 5 cung cấp 1 ngôn ngữ lập trình JavaScript, 1 kiểu dữ liêu (XML
hoặc DOM) và 1 phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video
và Đồ họa. Công nghệ web sẽ trên nên dễ dàng và phổ biến khi nó có 1 tiêu chuẩn
thống nhất.
4. Các nguyên tắc sáng tạo được áp dụng trong HTML 5
1. Nguyên tắc rẻ thay cho đắt

HTML5 Video là một tính năng rất được chú ý. Html5 video đang là đối
thủ cạnh tranh khốc liệt với Flash, html5 video sẽ đi xa hơn với flash với ưu
điểm là tốc độ nhanh hơn, dễ dàng hơn với nhà lập trình, thích hợp với các
smart phone và nhiều tính năng nữa.
Việc xuất hiện tính năng video của HTML sẽ được dần dần thay thế cho
Flash. Một thời gian dài Flash vốn chiếm vị trí độc quyền trong các webgame,
các trình nghe nhạc, xem phim trên web.
Với việc đưa video lên web một cách nhẹ nhàng mà HTML5 đem lại mà
không cần cài đặt gì thêm (như plug-in flash) giúp giảm chi phí cài đặt plug-
in, đồng thời không mất những khoản chi phí để phát triển các ứng dụng Flash
<h4>Demo HTML5 Video Tại HTML5VN.NET</h4>

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” /></video>
Đoạn code này đã có thể đưa video lên web mà không cần bất cứ plug-in
nào.
Trên HTML 5, chúng ta có thể phát triển trên mọi loại công cụ lập trình kể
cả notepad và không cần cài thêm plug-in. Vì thế, sẽ không phải phụ thuộc
công cụ lập trình nào, chi phí phát triển sản phẩm sẽ được giảm đi.
2. Nguyên tắc tách khỏi
HTML đã có cấu trúc đơn giản hơn, loại bỏ một số thứ phức tạp,
phiền phức.
Nguyễn Trí Đức- KHMT K18
19
HTML 5 đã loại bỏ rất nhiều thẻ HTML cũ như <center>, <dir>,
<font>, <big>, <strike>, <frame>, <u>, <noframes>……
Cấu trúc DOCType cũng được lược bỏ đơn giản hơn
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" " />transitional.dtd">
HTML5:
<!DOCTYPE html>
3. Nguyên tắc kết hợp
Thực chất thì bản thân HTML 5 là sự kết hợp giữa ba thành phần:
ngôn ngữ HTML, CSS và một phần của javascript API. Như ví hình như
sau:

Có thể thấy được rằng khi nhập thông tin và nhấn nút “gửi” thì trang
web sẽ tự động kiểm tra. Sau đó, nếu không hợp lệ thì hiển thị thông báo
“Vui lòng nhập địa chỉ mail”. Trong các phiên bản HTML trước, nếu muốn
kiểm tra tính đúng đắn thì phải khai báo sự kiện cho thẻ <input> đó, sau đó

sử dụng javascript để kiểm tra.
HTML còn có sự kết hợp giữa các thẻ mới với bộ Javascript API
mới. Điều này giúp cho nhà phát triển dễ dàng điều chỉnh mọi thứ theo ý
muốn từ đơn giản đến phức tạp.
HTML 5 còn kết hợp với ảnh vector để hiển thị những hình ảnh có
dung lượng nhỏ và hiển thị được trong bất kỳ độ phân giải.
Nguyễn Trí Đức- KHMT K18
20
4. Nguyên tắc phân nhỏ
Microformats trong HTML5 cung cấp các phương pháp tinh xảo
giúp việc phân tích dữ liệu, chia nhỏ dữ liệu trang web được dễ dàng hơn.
Ngoài ra HTML 5 chia thành nhiều khung nhỏ như <header>,
<footer>, <section>. Việc chia như thế này sẽ giúp ta dễ dàng thay đổi bố
cục cho trang web. Sau này khi HTML 5 thực sự phổ biến, nhà phát triển
website sẽ không gặp khó khăn khi canh chỉnh bố cục cho tương thích với
mọi trình duyệt như các phiên bản trước.
Ngoài ra, HTML còn phân nhỏ các kiểu nhập liệu cho một biểu mẫu
như email, url, number v.v… Điều này không chỉ giúp cho các thẻ trở nên
tường minh mà còn hỗ trợ rất nhiều trong việc lọc thông tin, kiểm tra tính
đúng đắn trước khi gửi về server.
Ví dụ khung nhập liệu <input type=”url”> chỉ cho phép nhập dạng
url, khi nhập không đúng, HTML 5 sẽ tự động hiển thị thông báo. Như vậy,
nó còn giúp nhà phát triển website giảm thiểu khả năng thiếu sót những sự
kiểm tra hợp lệ cho các trang web.
5. Nguyên tắc vạn năng
HTML5 cho phép tạo ra các trang web có thể hoạt động tốt trên nhiều
trình duyệt khác nhau của bất kỳ thiết bị nào.
Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển.
Nếu như trước đây, người sử dụng phải dùng chiếc máy tính để bàn cồng kềnh
cùng trình duyệt web IE để lướt web, thì giờ đây với laptop,smartphone….

cùng rất nhiều trình duyệt khác (Firefox, Opera…) người dùng có thể dễ dàng
lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau,
nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính xem
trang web này rất tốt, nhưng trên smartphone thì giao diện và cấu trúc trang bị
xáo trộn. Hay có thể xem phim rất tốt với IE nhưng với Firefox thì không.
Nguyễn Trí Đức- KHMT K18
21
Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên
bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin
trên internet.
HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có
thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ
máy tính để bàn, laptop cho đến smartphone. Không những vậy, HTML5 còn
đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh
hơn, tốt hơn, tài nguyên phong phú hơn. Đặc biệt các ứng dụng HTML trên
smartphone tiết kiệm pin hơn nhiều so với Flash.
Ngoài ra, như đã nói phần trên, việc sử dụng HTML sẽ làm giảm đi các
rủi ro do lỗ hỏng an ninh trước đó.
6. Nguyên tắc dự phòng
HTML 5 đã loại bỏ đi nhiều thẻ cũ nhưng thực chất vẫn có một số
thẻ còn sử dụng được như thẻ <frame>, <frameset>. Tuy nhiên, các thẻ nào
không được khuyến cáo sử dụng thì đừng nên sử dụng quá nhiều. Vì sau
này những thẻ đó có thể thực sự bị loại bỏ hoàn toàn trong các phiên bản
tương lai.
7. Nguyên tắc sử dụng trung gian
Bên trong HTML 5 đã bao gồm các ngôn ngữ trung gian như
Javascript và CSS để tạo nên sự linh động trong việc thiết kế và phát triển
ứng dụng web trong mọi lĩnh vực lớn như kinh tế, khoa học, công nghệ, y
học, thể thao, âm nhạc.
8. Nguyên tắc thực hiện sơ bộ

Khi phát triển 1 website, điều cần làm là phải sơ bộ phát triển được
khung, nội dung, tính năng website. Với HTML5 việc phát triển có thể dễ
dàng thực hiện việc canh chỉnh bố cục của website để hình dung được các
thành phần và các tính năng cần phải có của một website. Các thẻ như
<header>, <footer>, <section> sẽ giúp chúng ta xây dựng khung cho
Nguyễn Trí Đức- KHMT K18
22
website nhanh chóng và với sự hỗ trợ mạnh mẽ của các thẻ như <input> thì
việc xây dựng một prototype hoàn chỉnh sẽ giúp giảm thiểu nhiều hơn về
chi phí thời gian.
9. Nguyên tắc liên tục tác động có ích
Nguyên tắc này phản ánh khuynh hướng phát triển. Sự xuất hiện của
Web Storage là một điểm nhấn cho việc ra đời các ứng dụng web có khả
năng tương tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu quả nữa là
dung lượng truyền tải qua mạng có thể được giảm thiểu đáng kể. Ví dụ một
ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên
máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối
đến server để tải lại những dữ liệu cũ.
Nguyễn Trí Đức- KHMT K18
23
PHẦN II CSS 3
1. Lịch sử phát triển của CSS
CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được
tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là
một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu
lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc,
font chữ, . .
Thế mạnh của CSS
- Tách riêng phần định dạng ra khỏi nội dung trang web.
- CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả

nhất. Nó giúp tiết kiệm công sức rất nhiều trong việc thiết kế giao diện.
- Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng
hơn, giúp thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html
cũng được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng
nhiều lần (cache), do đó giúp trang web được load nhanh hơn.
Năm 1998, CSS 2 ra đời và đã thêm vào rất nhiều tính năng mới cho CSS. CSS 2
cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi font chữ cho
trang web và cho phép định dạng kiểu in. Hầu hết các trình duyệt hiện nay đều hỗ
trợ đầy đủ CSS 2.
Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS
- Nguyên tắc kết hợp:
 Được tạo ra cho mục đích hỗ trợ cho siêu văn bản như HTML.
Việc kết hợp này rất quan trọng trong việc bảo trì và phát triển
một hệ thống website lớn mà trong đó phải đảm bảo tất cả trang
đều dùng chung một định dạng văn bản.
 Bên trong khai báo CSS là sự kết hợp của rất nhiều thuộc tính. Ví
dụ:

Nguyễn Trí Đức- KHMT K18
24
body{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align:
baseline;
border-left:0;

}

 Một thẻ HTML còn có thể kết hợp nhiều khai báo của CSS. Ví
dụ:
<div class=”giua dau”>
…
</div>
“giua” và “dau” là hai khai báo riêng, mỗi khai báo sẽ có những
thuộc tính riêng. Khi kết hợp lại với nhau, thẻ <div> sẽ mang
thuộc tính của cả hai.
- Nguyên tắc tách khỏi
Như ví dụ trên, việc tách làm hai khai báo CSS này rất hữu
ích khi khai báo “giua” là dùng để canh chỉnh nội dung của thẻ div
và có thể dùng cho nhiều đối tượng thẻ khác. Còn CSS “dau” có thể
chỉ được dùng cho các mục đích trong đầu trang nên việc tách này
rất linh động trong việc sử dụng các khai báo CSS dùng chung.
- Nguyên tắc phân nhỏ
CSS có chức năng phân nhỏ các đối tượng khai báo thành nhiều
dạng tương ứng với các thẻ, các id và các class. Ví dụ:
Với thẻ HTML: <div id=”id_header
class=”class_header”></div>
Để chỉnh kiểu CSS cho thẻ div: div { padding-left: 5px; }
Để chỉnh kiểu CSS cho id: .id_header { padding-left: 5px; }
Để chỉnh kiểu CSS cho class: #class_header { padding-left: 5px;
}
Nguyễn Trí Đức- KHMT K18
25

CSS còn phân nhỏ để xử lý kiểu cho một số các sự kiện cơ bản như:
a:hover, a:active v.v…

Ngoài ra, CSS còn chia thành ba dạng CSS là inline, embedded và
external.
- Nguyên lý vạn năng
CSS có thể sử dụng được trong hầu hết các website chạy trên các
thiết bị từ desktop, laptop đến smartphone. Và hầu hết tất cả các
thuộc tính trong CSS đều được tất cả các trình duyệt hiện nay hỗ trợ.
2. Những điểm mới trong CSS 3
Các bộ chọn mới
Bộ chọn CSS đề cập đến cách thức để định kiểu các phần tử HTML theo
một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các phần tử
<div> sử dụng bộ chọn div: div { border: 1px solid #000; }.
Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, sử dụng bộ
chọn: .highlight { background-color: yellow; }.
Để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, sử
dụng: #myDiv { width: 250px; }.
Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm một loạt các bộ chọn
phức tạp hơn.
Ví dụ, có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử
đầu vào có chứa một kiểu thuộc tính có giá trị là text hoặc sử dụng lớp-giả: hover
để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }.
Tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần
tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã
được thêm vào hòa trộn tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn
và làm giảm số lượng mã HTML và JavaScript cần phải viết.