Tìm hiểu HTML5, CSS3 và ứng dụng xây dựng website cho công ty cổ phần du lịch bắc giang
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.31 MB, 117 trang )
LỜI CẢM ƠN
Đầu tiên cho em gửi lời biết ơn sâu sắc đến cô Nguyễn Lan Oanh đã định
hướng, cung cấp tài liệu và tận tình giúp đỡ, động viên em trong quá trình thực
hiện đề tài. Cô đã dành nhiều thời gian và tâm huyết theo sát, chỉ bảo em những
mặt được và chưa được để em có thể hoàn thành đề tài một cách tốt nhất. Em xin
chân thành cảm ơn cô!
Em cũng xin chân thành cảm ơn các thầy (cô) trong trường Đại học
Công nghệ thông tin và Truyền thông đã dạy dỗ giúp em có được một nền tảng
kiến thức căn bản hỗ trợ cho việc làm đồ án tốt nghiệp lần này.
Mặc dù, bản thân đã thực sự nỗ lực, cố gắng thực đồ án tốt nghiệp
nhưng không tránh khỏi nhiều thiếu sót. Do vậy, em rất mong nhận được sự đóng
góp quý báu của toàn thể thày cô và các bạn!
Thái Nguyên, tháng 06 năm 2012
Sinh viên thực hiện
Diêm Công Thảo
1
LỜI CAM ĐOAN
Em xin cam đoan về nội dung đồ án tốt nghiệp với tên đề tài “ Tìm hiểu
HTML5, CSS3 và ứng dụng xây dựng website cho công ty cổ phần du lịch
Bắc Giang” không sao chép nội dung cơ bản từ các đồ án khác, hay các sản
phẩm tương tự mà không phải do em làm ra. Sản phẩm của đồ án là do chính bản
thân em nghiên cứu và xây dựng nên.
Nếu có gì sai em xin chịu mọi hình thức kỉ luật của Trường Đại học Công
Nghệ Thông Tin và Truyền Thông – Đại học Thái Nguyên.
Thái Nguyên, tháng 06 năm 2012
Sinh viên thực hiện
Diêm Công Thảo
2
MỤC LỤC
DANH MỤC HÌNH
3
LỜI NÓI ĐẦU
Với sự tăng trưởng ngày càng mạnh mẽ của Internet, các thuật ngữ như
Web 2.0 và RIA (Rich Internet Application) hầu như hiện diện ở khắp nơi. Người
sử dụng, được trang bị phần cứng nhanh hơn và băng thông mạng tốt hơn, cũng
thường xuyên đặt ra những yêu cầu phức tạp. Web hiện đại không phải chỉ là để
sử dụng được, mà còn phải bắt mắt và giàu khả năng tương tác.
Trước thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi đó
là cả một quá trình dài. Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5 mới
đang tập tễnh những bước đi đầu tiên. Mặc dù vậy, HTML5 mang trong mình đủ
sức hấp dẫn để gây nên sự chú ý đặc biệt.
Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là
một trong những yếu tố quan trọng trong hoạt động của các công ty. Đối với các
công ty thì việc xây dựng các website riêng càng ngày càng trở nên cấp thiết.
Thông qua những website này, thông tin về các sản phẩm, dịch vụ của công ty sẽ
đến với những người quan tâm, đến với khách hàng của họ một cách nhanh
chóng kịp thời thông qua internet. Hoạt động của một công ty có quy mô khá lớn
sẽ càng được tăng cường và mở rộng nếu xây dựng được một website tốt.
Bắt nguồn từ công nghệ mới trong tương lai gần và thực tế yêu cầu của
công ty cổ phần du lịch Bắc Giang cùng với những gợi ý của cô Nguyễn Lan
Oanh, em đã chọn đề tài “Tìm hiểu HTML5, CSS3 và ứng dụng xây dựng
website cho công ty cổ phần du lịch Bắc Giang” và đã hoàn thành đồ án đúng
kế hoạch. Có được kết quả như vậy, em xin được gửi lời cảm ơn sâu sắc tới cô
Nguyễn Lan Oanh người đã hướng dẫn em trong suốt quá trình thực hiện đồ án
tốt nghiệp này.
Xin chân thành cảm ơn cô!
4
PHẦN 1: TÌM HIỂU VỀ HTML5 & CSS3
CHƯƠNG 1: LỊCH SỬ PHÁT TRIỂN CỦA HTML5
1.1. Từ HTML đến HTML5.
Năm 1989, Tim Berners-Lee nghiên cứu ra ngôn ngữ HTML như là một
giao thức truyền đạt thông tin giữa giới khoa học với nhau và thành công của nó
vẫn còn cho đến ngày nay. Tim Berners-Lee đầu tiên tạo ra 20 thẻ trong HTML,
lấy ý tưởng từ ngôn ngữ SGML, nhưng điều kì diệu đáng kinh ngạc là ở chỗ 13
trong số 20 thẻ đó vẫn còn được hiển thị trong HTML4.
HTML sử dụng các tag để đánh dấu từng đoạn văn bản. Một ví dụ đơn giản như:
Mã:
This is a paragraph
Phiên bản HTML đầu tiên của Tim Berners - Lee rất khác với những gì
chúng ta đang sử dụng ngày nay, chẳng hạn như thiếu hẳn các chức năng định
dạng văn bản. Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp
nhận rộng rãi, và được đưa lên thành chuẩn. Trong vòng tám năm (1989 – 1997),
HTML đã phát triển qua bốn cột mốc chính, với phiên bản gần đây nhất là
HTML4. Phiên bản này cũng đánh dấu việc CSS1 được công nhận là chuẩn để
định dạng trang web, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript
chạy thống nhất trên mọi trình duyệt.
1.1.1. HTML1.
HTML 1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ
để cho phép tạo ra một trang web đơn giản. Vạn sự khởi đầu nan. Phiên bản đầu
tiên được tung ra vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này mới
thực sự được ứng dụng. Năm 1993 các chuẩn HTML trở thành nền tảng của
Mosaic - Trình duyệt đầu tiên của Internet.
1.1.2. HTML2.
Nhiều công ty lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu
văn bản, nhưng cuối cùng thì các chuẩn HTML cũng được phổ biến rộng rãi. Bởi
vì không có một tổ chức nào đứng ra hỗ trợ cho sự phát triển ngôn ngữ HTML,
mọi thứ bị ngừng trệ. Vào tháng 7 năm 1994, HTML2 được phát hành. HTML2
5
là phiên bản cải tiến của HTML. Phiên bản lần này được tạo ra bởi sự nỗ lực rất
lớn của những người yêu thích HTML trên khắp thế giới. Những người này đã
đảm nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi trên thế
giới cho phiên bản mới này. Trước tình hình này, cũng trong cùng năm 1994, Tập
Đoàn Tài Chính World Wide Web được thành lập với người đứng đầu là Tim
Berners-Lee. Năm 1995, thẻ mới là thẻ “bgcolor” (màu nền) hay thẻ “font”(font
chữ) được đưa vào ứng dụng.
1.1.3. HTML3.
Internet làm cho ngôn ngữ HTML phát triển và chính nó cũng ứng dụng
những phát triển của HTML. W3C chấp nhận những phiên bản cải tiến của
HTML với các thẻ mới và các chức năng mới. Dave Ragget đã mua về một phiên
bản thú vị với rất nhiều thẻ HTML hấp dẫn và phiên bản này đã được cải tiến rất
hay. Nhưng vì nó làm chậm đường truyền của các trình duyệt nên phiên bản này
đã bị bỏ đi. Phiên bản HTML 3.2 là phiên bản mạnh nhất của sê-ri này và trước
khi được tung ra, nó được duyệt bởi W3C và bởi các nhà cung cấp trình duyệt là
Netscape và Microsoft.
1.1.4. HTML4.
Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước
tiến triển quan trọng trong những phiên bản cũ. HTML4 có những công cụ có giá
trị mang lại thêm nhiều đất sáng tạo cho dân thiết kế web. Ban đầu CSS cũng
không được coi là quan trọng lắm nhưng đến nay người ta đánh giá nó cũng quan
trọng không kém gì bản thân HTML. Một sự kiện quan trọng nữa là sự phát triển
của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và trình duyệt
Internet Explorer được người sử dụng yêu thích hơn, làm lu mờ Netscape. Vào
tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C và tương lai trở nên
sáng lạn hơn. HTML có một “đối thủ” gọi là XHTML (Extensible HyperText
Markup Language - tạm dịch: ngôn ngữ đánh dấu siêu văn bản mở rộng) và từ
năm 1998 đến nay vẫn diễn ra tranh chấp, nhưng cuối cùng có lợi nhất vẫn là
người sử dụng Internet.
6
1.1.5. HTML5
HTML5 ra đời dựa trên sự hợp tác giữa World Wide Web Consortium
(W3C) và Web Hypertext Application Technology Working Group (WHATWG).
Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng phong
có vẻ nghiêng về HTML (so với XHTML). Phần lớn chúng ta đều biết khả năng
của bản HTML 4.01 - phiên bản gần đây nhất, nhưng những tính năng mới của
phiên bản thứ 5 này là gì?
1.2.
Sự khác biệt của HTML5.
HTML5 sẽ làm thay đổi rất nhiều khía cạnh của cuộc sống trên Web. Nó
không thay thế Flash hay Shockwave: được dùng ít trong trò chơi ở
Miniclip.com. Điều này cho thấy HTML5 ảnh hưởng đến thế nào. Tuy nhiên,
HTML5 thiết kế lại Web và cho phép các Websites cơ bản có nhiều tiện ích hơn.
HTML5 tags sẽ thay thế plug-in trong những việc đơn giản cũng như làm cho
Web bảo mật hơn và hiệu quả hơn. Dưới đây là những tiện ích khi HTML5 được
ứng dụng và được chuẩn hóa trên Web:
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.
Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh
mới được từ HTML5 cũng đe dọa tới hệ mã lệnh. JavaFX là lý tưởng, nhưng ai là
người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm
rất tốt. Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video?
Plug-in dường như sẽ bị lãng quên.
Plug-ins sẽ bị biến mất hoặc không được dùng? Có thể, nhưng nó còn phụ
thuộc vào việc làm của bạn. Nếu bạn muốn 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
7
Flash và Shockwave phức tạp, bạn sẽ 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). Bộ công cụ dùng plug-in
Flash để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo. Tuy
nhiên, giờ đây chỉ cần sử dụng HTML5 là được.
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 giống như các ứng dụng cũ. 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.
Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đám
mây” bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh. Lập
trình game có thể lưu trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết
kiệm thời gian tải thông tin nhiều lần.
Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống.
Thế nên việc lấy lại dữ liệu không phải là dễ dàng. Người dùng muốn chuyển dữ
liệu từ máy này sang máy khác sẽ gặp phải khó khăn.
HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data
Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng 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
8
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. Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào
nhưng rất dễ để thấy được nó đã 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 của chúng ta đơ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 tự nhiên hơn
Chuẩn HTML5 giúp các nhà lập trình tiếp hợp video 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à chúng ta thay đổi cách gọi từ plug-in thành codec. Tuy
nhiên, dù ta có chuẩn video nhưng trình duyệt lại rất khó để dịch dữ liệu.
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 tạo ra wiget chat
Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông
tin từ các trang khác trong vòng nhiều năm. Tuy nhiên chúng lại bị các rào cản an
ninh giới hạn khi chỉ lưu trữ mỗi wiget trong một sandbox riêng.
HTML5 cung cấp cơ chế chuẩn giúp các widget có thể trò chuyện với
nhau. Mặc dù chúng vẫn khống thể vượt qua được sandbox của widget khác
nhưng các widget có thể gửi tin nhắn qua lại, kết nối công việc, thậm chí là
chuyển đổi thông tin về người đang sử dụng máy tính
Các nhà quảng cáo có cơ hội để đăng quảng cáo với các ô hình chữ nhật
khác nhau xuất hiện trên các trang web. Trong khi đó, các nhà phát triển vẫn
khẳng định sẽ tìm được những ứng dụng thức tế khác.
9
Tuy nhiên, sử dụng cơ chế này để gửi tin nhắn thì chỉ mới là bước đầu. Vẫn
cần tạo ra tiêu chuẩn cho những thông tin được chuyển đi do các widget là 1 cơ hội
để trò chuyện giữa mọi người nên chúng cần phải có những ngôn từ chuẩ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 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. Liệu plug-in hay trình duyệt đã có lỗ
hổng lớn vào năm ngoái? Liệu có phức tạp không khi chỉ cập nhât trình duyệt mà
không nâng cấp plug-in hoặc ngược lại? Ai có thể nhớ được?
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. Nếu như nhóm an ninh kiểm tra Firefox, Chorme
hoặc IE cho phép cài đặt các plug-in này, sự nguy hiểm sẽ giảm bớt đi.
HTML5 đơn giản hóa việc phát triển web
Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải
thích ngắn gọn về sự thay đổi này: “Tôi thực sự thích HTML5 vì nó cho phép tôi
làm việc trong một môi trường thích hợp, trình duyệt kết hợp với Javascript,
DOM mà không phải bật đi bật lại Flash và HTML5. Nó vừa là 1 ngôn ngữ lại
vừa là 1 công cụ, không khác biệt lắm so với các plug-in khác”.
HTML5 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. Thách thức trong việc tạo ra cái gì đó tốt đẹp vẫn là mênh
mông nhưng điều đó sẽ đơn giản hơn khi làm việc trong 1 tiêu chuẩn thống nhất.
Hiện nay chỉ Adobe sử dụng HTML 5 để tích hợp các công cụ dành cho Flash.
Điểm mạnh - Điểm yếu của HTML5 và Flash
Khi bàn về Flash và HTML5, những nhà phát triển thường hay công kích lẫn
nhau. Nhưng thật ra HTML5 và Flash tại thời điểm này vẫn có điểm mạnh và điểm
yếu, tùy thuộc vào từng mục tiêu, định hướng mà chúng ta sẽ chọn giải pháp nào.
10
Flash và HTML5 có thể tồn tại song song với nhau chứ chưa thể loại trừ lẫn nhau.
Sau đây là một vài điểm mạnh và điểm yếu cơ bản của Flash và HTML5:
Điểm mạnh của HTML5:
Phù hợp trên nhiều nền tảng: nhà phát triển chỉ cần lập trình một lần là có
thể dùng được trên nhiều hệ thống, không như Flash hay các plug-in khác luôn
cần có nhiều phiên bản khác nhau dành cho mỗi nền tảng.
Khả năng hỗ trợ API và DOM: điều này sẽ giúp các nhà phát triển tự do
hơn trong việc sáng tạo các ứng dụng thân thiện hơn với người dùng khi mà
không còn lệ thuộc vào phần mềm của bên thứ 3, ví dụ việc nhúng video, âm
thanh, các bản vẽ chất lượng cao, biểu đồ và hình ảnh động và các loại khác
nhiều nội dung phong phú mà không cần cài đặt thêm 1 plug-ins nào khác như
flash player, windows media player …
Tính nhất quán: HTML hỗ trợ các phần tử mới để khai báo cấu trúc
website như : header, footer, … do vậy giúp cho nhà thiết kế hay người lập trình
ngay lập tức hiểu được cấu trúc của website.
Điểm mạnh của Flash:
Tính phổ biến: flash là một Plug-in thành công và phổ biến nhất, 97% các
máy tính và trình duyệt có hỗ trợ Flash.
Hỗ trợ tốt cho game: flash được sử dụng rất phổ biến trong việc phát triển
game và flash cung cấp rất nhiều tính năng để tạo ra các game chất lượng.
“Nếu không hư hỏng thì không cần sửa”: một cách tổng quát thì flash rất dễ sử
dụng, rất nhiều các lập trình viên đã quen thuộc sử dụng flash. Do vậy gắn bó với
flash thay vì chuyển sang một công cụ khác sẽ tiết kiệm thời gian, tiền bạc và
nhiều tài nguyên khác.
Điểm yếu của HTML5:
Ít trình duyệt hỗ trợ: chỉ có các trình duyệt mới gần đây mới hỗ trợ
HTML5, do vậy việc sử dụng theo trào lưu, không theo mục đích sẽ dẫn đến một
cái bẫy là phần lớn khách hàng sẽ không xem được.
11
Quá mới mẻ: vì được phát triển gần đây nên phần lớn lập trình viên vẫn
chưa quen thuộc, chuyển đổi sang HTML5 có thể làm phát sinh thời gian, tiền
bạc và tài nguyên.
Điểm yếu của Flash:
Flash không làm việc tốt với Mac OSX, và các thiết bị di động của Apple
không hỗ trợ nội dung Flash.
Gặp nhiều vấn đề về bảo mật.
Người phát triển ứng dụng trên nền tảng Flash phải tốn chi phí để mua các
phần mềm như Flash Pro hoặc Flash Builder.
1.3.
CSS3 và JavaScript.
Sẽ là thiếu sót nếu nhắc tới HTML mà bỏ quên CSS hoặc JavaScript.
Cũng như HTML5, CSS3 vẫn đang trong giai đoạn phát triển, nhưng những tính
năng của nó đã làm cho nhiều người phải háo hức. CSS3 cho phép thực hiện một
cách dễ dàng những điều mà trước đây phải tốn rất nhiều công sức, chẳng hạn
như các đường viền (border) với các góc cạnh được bo tròn, hay thậm chí là xoay
đối tượng theo các hướng khác nhau. HTML5 và CSS3 có nhiều tiềm năng sẽ trở
thành một cặp đôi ăn ý, nhất là khi mà HTML5 đang đi theo hướng tách biệt giữa
nội dung và giao diện. Trách nhiệm trình bày một trang web sẽ từ từ được
nhường lại cho CSS3.
Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với
bộ Selectors API mới đơn giản hơn, cung cấp nhiều phương thức truy xuất chính
xác đến từng phần tử trên trang web mà không cần các vòng lặp phức tạp duyệt
qua từng phần tử như trước. Cộng với việc các trình duyệt hiện đại đã tăng tốc
thực thi JavaScript đáng kể, hơn nữa còn cung cấp các công cụ debug tiện lợi,
việc phát triển ứng dụng với JavaScript đã trở nên nhẹ nhàng hơn bao giờ hết.
1.4.
Kết luận.
Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệt
Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan
tâm đến việc tương thích chuẩn này. Tuy nhiên, với việc Microsoft chính thức
tuyên bố hỗ trợ HTML5 trong IE9 (các kết quả thử nghiệm gần đây cho thấy tốc
12
độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều
đã sẵn sàng chào đón HTML5. Điều đó vừa cho thấy sức cuốn hút công nghệ
mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 cất cánh.
HTML5 dự kiến sẽ ra mắt chính thức vào năm 2012, và đạt đến mức
tương thích giữa các trình duyệt vào năm 2022. Dù chặng đường có thể còn dài,
nhưng những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công
không kém các phiên bản trước. HTML5 được dự đoán sẽ phổ biến như HTML4
hiện nay vào một ngày không xa. Dù không thể kết luận rằng HTML5 sẽ thay thế
các công nghệ hiện tại (Silverlight, Flash…) nhưng đây vẫn sẽ là một công nghệ
đáng để ta học hỏi và sẽ phát triển mạnh trong tương lai gần.
13
CHƯƠNG 2: NGÔN NGỮ HTML5
2.1.
Các thẻ mới trong HTML5.
Những ai đã từng viết web hẳn đều đồng ý rằng hầu hết các trang web
thường có chung những thành phần bố cục: header, body, footer… Hình dưới đây
minh họa một cấu trúc website phổ biến:
Một cách truyền thống để hiện thực cấu trúc trên trong các phiên bản
HTML trước đây là sử dụng các tag <div> với thuộc tính id=”header”,
id=”nav”… Cách này vừa khó quản lý (đối với các trang phức tạp, số lượng tag
<div> có thể rất nhiều), vừa không mô tả tự nhiên ý nghĩa của từng thành phần
(không thể biết <div> nào đánh dấu header, <div> nào đánh dấu body nếu không
nhìn vào thuộc tính id hoặc nội dung bên trong). Để giải quyết vấn đề này,
HTML5 đưa ra các thẻ mới, với tên gọi phản ánh chính xác vai trò của nó. Hãy
xem qua đoạn code khung của trang web ở trên trong HTML5:
14
Mã:
<!DOCTYPE html>
<head>
<meta charset=”utf-8”/>
<title>Site Page</title>
</head>
<body>
<header> </header>
<navigation> </navigation>
<section> </section>
<footer> </footer>
</body>
</html>
Đoạn code trên có nhiều điểm đáng lưu ý. Trong đó điều đầu tiên đập vào
mắt bạn có lẽ là khai báo DOCTYPE, trước đây vốn dài dòng và khó nhớ, nay đã
được rút gọn tối đa. Cùng với đó là thẻ meta dùng để chỉ định tập ký tự
(character set) cũng được tinh giản. Để tiện tham khảo, đây là dòng code tương
đương trong HTML4:
Mã:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Tuy nhiên, sự khác biệt lớn nhất nằm trong thẻ body, với hàng loạt các thẻ
thành viên mới: <header>, <navigation>, <section>, <footer>. Có thể thấy rằng
bố cục một trang HTML5 đã được minh bạch hóa đáng kể: các thẻ <header>,
<footer>… chúng tự nói lên nội dung mà chúng chứa đựng. Hơn thế nữa, các thẻ
này còn mang lại lợi ích từ việc tối ưu hóa search engine. Một lưu ý nhỏ là để
đoạn code trên hoạt động đúng, bạn sẽ cần một trình duyệt hỗ trợ HTML5. Nếu
đang sử dụng IE8, chúng ta có thể sẽ thấy đoạn mã sau “bị” hiển thị lên trình
duyệt, mà nguyên nhân chính là do IE8 hỗ trợ HTML5 chưa hoàn chỉnh:
Mã:
<meta charset="utf-8”/>
15
Thẻ <header> và <footer> đánh dấu phần mở đầu và kết thúc của một
trang web, đây là nơi thích hợp để đặt các banner, logo hình ảnh và thông tin bản
quyền. Ví dụ sau minh họa cách sử dụng <header> và <footer>:
Mã:
<header>
<section>
<img src=”logo.jpg” border=”none” />
</section>
<nav>
<ul>
<li><a href=”/first.html”>First Page</a></li>
<li><a href=”/second.html”>Second Page</a></li>
<li><a href=”/third.html”>Third Page</a></li>
</ul>
</nav>
</header>
<footer>
Copyright 2012
</footer>
Thẻ <section> chia nội dung trang web ra thành nhiều phần chính. Mỗi
<section> lại có thể có nhiều <article>. Một <article> có thể xem như một bài
viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một
<article>). Cuối cùng, thẻ <aside> thường đóng vai trò như một sidebar cung cấp
các thông tin liên quan cho <article> chứa nó (thực tế thì chúng ta sẽ cần đến
CSS nếu muốn hiển thị thẻ <aside> này như một sidebar. HTML5 cố gắng tách
biệt hai phần nội dung và trình bày nên các thẻ HTML5 không quy định sẵn cách
thức hiển thị mà nhường lại công việc đó cho CSS. Tuy vậy, việc sử dụng các thẻ
mới vẫn giúp cho code HTML dễ đọc hơn và hỗ trợ tối ưu công cụ tìm kiếm).
16
Mã:
<article>
This is the first paragraph
This is the second paragraph
<aside>
Hello World!
Do you think that HTML5 is great?
</aside>
</article>
Thẻ <dialog> cũng là một bổ sung thú vị, thẻ này cho phép đánh dấu một
cuộc đàm thoại giữa nhiều người trên mạng. Trong đó <dt> xác định người nói
và <dd> chứa nội dung đàm thoại.
Mã:
<dialog>
<dt>Peter </dt>
<dd>Hello, PC</dd>
<dt>PC </dt>
<dd>Don’t attack me! I have firewall installed! </dd>
</dialog>
Ngoài ra, HTML5 còn rất nhiều thẻ mới hữu dụng. Một vài cái tên có thể
kể ra như <time>,
