Written by Pham Nguyen

Tìm hiểu về HTML5 – Phần II

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:

layout1

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:

<!DOCTYPE html>

<head>

<meta charset=”utf-8”/>

<title>Worm 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:

<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à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>… đều 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, bạn 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:

<meta charset="utf-8”/>

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

<header>





<section>








<img src=”logo.jpg” border=”none” />








</section>








<nav>








<ul>








<li><a href=”/first.aspx”>First Page</a></li>








<li><a href=”/second.aspx”>Second Page</a></li>








<li><a href=”/third.aspx”>Third Page</a></li>








</ul>








</nav>








</header>








<footer>




<p>Copyright 2010 WormTech.</p>




</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ì bạn sẽ cần đến CSS nếu muốn hiển thị thẻ <aside> này như một sidebar. Như đã đề cập trong bài viết trước, 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)






<article>








<p>This is the first paragraph</p>








<p>This is the second paragraph</p>








<aside>








<h1>Hello Worm!</h1>








<p>Do you think that HTML5 is great?</p>








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






<dialog>








<dt>Worm.NET </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>, <progress>, <figure>… Nhưng trong khuôn khổ hạn hẹp, bài viết chỉ trình bày những nét cơ bản nhất, phần còn lại xin nhường cho các bạn yêu thích công nghệ tự khám phá, không chừng các bạn sẽ cảm thấy thích thú hơn! Phần cuối cùng của bài này xin tập trung nói về những thay đổi của form trong HTML5.


Form 2.0 – cải tiến đáng giá trong HTML5


Có lẽ Form 2.0 – một tên gọi khác của form trong HTML5, là một trong những thành phần hấp dẫn nhất. Form 2.0 có nhiều bổ sung đáng giá cho các phần tử <input>, khiến chúng trở nên mạnh mẽ và đáp ứng được các yêu cầu thiết kế phức tạp mà không cần đến một giải pháp công nghệ bên ngoài nào như Flash và Silverlight. Hãy thử xem qua ví dụ sau:






<form>








<label>Text Box:</label><br/>








<input name=”TextBox” type=”text” maxlength=”25″ required placeholder=”Enter your text here” autofocus><br/><br/>








<label>Numeric:</label><br/>








<input name=”Numeric” type=”number” min=”18″ max=”100″><br/><br/>








<label>Slider:</label><br/>








<input type=”range” name=”points” min=”1″ max=”10″ />








<label>Date:</label><br/>








<input name=”Date” type=”date”><br/><br/>




<button type=submit>Submit</button>








</form>












alt


Có lẽ bạn sẽ dễ dàng nhận ra sự xuất hiện nhiều thuộc tính mới trong thẻ <input>: thuộc tính required đánh dấu một field là bắt buộc, placeholder sẽ hiện một dòng text mờ trên textbox (dòng text này sẽ biến mất khi click vào textbox) và autofocus xác định phần tử nhận focus đầu tiên trên form. Với HTML4, việc hiện thực các tính năng này đều yêu cầu kĩ năng lập trình JavaScript, nhưng nay thì chúng đã được xây dựng trực tiếp trong HTML5!


Bên cạnh đó, thuộc tính type của <input> cung cấp nhiều kiểu control mới cho form. Chẳng hạn như ta có thể dễ dàng tạo một date control để lựa chọn ngày tháng bằng cách set thuộc tính type=”date”. HTML5 thậm chí còn có sẵn các field được thiết kế riêng cho địa chỉ email hoặc điện thoại.  Cái hay ở chỗ HTML5 cho khả năng tương thích ngược khá tốt. Khi bạn thử đoạn code trên trên một trình duyệt không hỗ trợ HTML5 thì các field sẽ được hiển thị như các textbox thông thường mà không gây ra lỗi khó chịu nào. Tất cả các hỗ trợ này khiến cho việc xây dựng form trở nên dễ dàng hơn bao giờ hết.


Thẻ (tag) là nét đặc trưng của một ngôn ngữ đánh dấu (markup language). Bài viết này đã giới thiệu khái quát về cách sử dụng một số thẻ mới trong HTML5. Dù chỉ ở mức cơ bản, tôi hi vọng các bạn đã phần nào nhận ra tiềm năng của công nghệ mới này. Trong các phần tiếp theo, chúng ta sẽ cùng tìm hiểu CSS3 và các API cho HTML5.


* Source code:


Download file HTML hoàn chỉnh chứa các đoạn code trong bài ở đây


Nguồn : WormTech

							


			

			



	
	
		

	2 thoughts on “Tìm hiểu về HTML5 – Phần II”


		
		
    
			
  1. 
			
    
				

				
    
					
    cam on ban nhieu nha, bai viet cua ban huu ich lam do.
    
hi vong ban se co nhieu bai viet hay va huu ich nhu the nay nha.
    
chuc ban thanh cong va gap nhieu may man.
    

    Like
    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
		
      2. 

    

    2. 



		
	
	
		

		
Leave a reply to van Cancel reply