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

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

ĐẠ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

TP.HCM, 12/2012

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 xe m 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 g iả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

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

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 tron g HTM L 5 9

Form nhập liệu mới 12

Tag HTM L mới 13

HTM L 5 Drag và drop 15

Web Storage và Application Cache 15

3 Tiện ích HTM L5 16

4 Các nguyên tắc sáng tạo được áp dụng trong HTM L 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 tron g CSS 3 25

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

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ừ HyperTe xt Markup Language (Ngôn ngữ đánh dấu s iê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 webs ite 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

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, Fra me, 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

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

<!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 We b

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

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

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

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:

<!DOCT YPE html PUBLIC "-//W3C//DT D XHTML 1.0 Transitional//EN" "http://www.w3.org/T R/xhtml1/DTD/xhtml1- transitional.dtd">

HTML5:

<!DOCT YPE 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ư:

<form autocomplete="on" bgcolor="#FFFFFF">

E-mail: <input type="email" name="email" autocomplete="off" novalidate="novalidate" /><br />

<input type="submit" />

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ỉ: http://www.canvasdemos.com/

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” t ype=”video/ogg” />

</video>

Kết quả việc play video hay audio trở nên cực kỳ đơn giản

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

HTML 5 Drag và dr op

Đó 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 http://html5vn.net/html5-drag-and-drop

Web Stor age 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

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

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 vi deo 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 HTM L 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

HTML5 đơn giản hóa việc phát triển we b

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, xe m 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ư 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

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:

<!DOCT YPE html PUBLIC "-//W3C//DT D XHTML 1.0 Transitional//EN" "http://www.w3.org/T R/xhtml1/DTD/xhtml1- transitional.dtd">

HTML5:

<!DOCT YPE 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

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 webs ite 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