[HTML cơ bản] thiết kế một tệp HTML chuẩn (kết thúc series)

Bài viết này sẽ kết thúc series học HTML cơ bản và sẽ giúp bạn tạo ra một tệp thiết kế HTML hoàn chỉnh.

Trong thiết kế website, HTML là một thành phần quan trọng ở khâu đầu tiên khi thiết kế. Thật ra HTML có rất nhiều và trong suốt thời gian làm việc với web mình vẫn chưa hề sử dụng hết 100% các thẻ HTML. Khi bạn đọc đến bài viết cuối cùng này trong series bạn đã có thể tự tạo ra một website tĩnh bằng HTML. Bài viết này sẽ kết thúc series học HTML cơ bản và sẽ giúp bạn tạo ra một tệp thiết kế HTML hoàn chỉnh.

Cấu trúc của một trang HTML hoàn chỉnh

Cấu trúc hoàn chỉnh của một trang HTML đúng chuẩn là như thế nào? thật ra không có một sự quy chuẩn nào về việc đặt các mã HTML như thế nào, nhưng một thiết kế tốt thì thường các thẻ được sắp xếp một cách trật tự và có cấu trúc rõ ràng. Điều này dễ nhận thấy hơn ở các trang HTML5, với nhiều thẻ mới được đưa vào việc phân ra các đoạn, khối và lồng ghép đúng chuẩn sẽ giúp việc lập trình sau này trở nên dễ dàng hơn. Dưới đây là đoạn mã HTML mô tả cấu trúc của một trang web tĩnh HTML5 khuyến nghị bạn nên sử dụng.

<!DOCTYPE HTML>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Tiêu đề web </title>
   <meta name="description" content="Đây là mô tả về trang web">
 </head>
 
 <body>
   <header>
     <nav>
       <ul>
         <li>Menu</li>
       </ul>
     </nav>
   </header>
 
   <section>
 
     <article>
       <header>
         <h1>Tiêu đề trang</h1>
         <p>Đăng lúc <time datetime="2017-07-04T16:31:24+02:00">04/07/2017</time> Bởi <a href="#">TuanDC</a></p>
       </header>
       <p>Nội dung bài viết</p>
     </article>

   </section>

   <footer>
     <p>Nội dung chân trang</p>
   </footer>

 </body>

</html>

Những khối in đậm màu đỏ là khối được khuyến khích sử dụng. Các thành phần <section> ở giữ có thể tùy biến, bạn có thể thêm nhiền section khác nhau để thể hiện các bố cục hoặc đánh dấu các vùng khác nhau. trong khi thẻ <header> và thẻ <footer> là hai khối khuyến khích bạn sử dụng.

Bạn lưu đoạn mã trên vào tệp file *.htm và chạy thử trên trình duyệt. Kết quả nhận được sẽ như hình dưới.

Hiển thị kế quả của một trang HTML5

Một số lưu ý khi thiết kế HTML

Thường xuyên sử dụng chú thích

Một thói quen bạn nên thường có khi thiết kế HTML đó là nên thường xuyên sử dụng chú thích (comment). Sử dụng chú thích trên đầu các thẻ hoặc khối để mô tả về chức năng hiển thị của khối đó. Việc làm này sẽ giúp cho các lập trình viên sau này sử dụng để code trở nên dễ dàng hơn. Không chỉ trong HTML mà các lập trình viên trong mã nguồn cũng thường xuyên sử dụng comment trong code. Bạn có thể sử dụng debug để biết được khối lệnh đó ở đâu, làm nhiệm vụ gì nhưng nó sẽ mất thời gian hơn rất nhiều so với việc có chú thích trên đoạn code.

Chú ý đến các thẻ đóng

Một lỗi thường hay mắc phải ở những bạn thiết kế HTML mới là thường để thiếu thẻ đóng </tag> khi các đoạn mã HTML trở nên nhiều. Mặc dù thiếu một số thẻ đóng có thể không làm ảnh hưởng đến trang web nhưng sau khi sử dụng CSS bạn sẽ thấy tác hại của việc này ngay lập tức. Để hạn chế việc này bạn nên sử dụng trình biên tập có hỗ trợ nhận dạng thẻ để dễ dàng kiểm soát. Ví dụ như hình dưới đây, mình sử dụng notepad++ để chỉnh sửa một tệp HTML, tính năng của nó là có thể nhận dạng ra được thẻ đóng của thẻ chính, bạn chỉ cần nhấn vào thẻ mở thẻ đóng sẽ được tô đậm.

Sử dụng ứng dụng Notepad ++ cho khả năng biên tập và kiểm soát thẻ tốt hơn

Bố cục phù hợp

Khi thiết kế HTML bạn nên thiết kế theo một bố cục phù hợp. Bố cục phù hợp se giúp bạn dễ dàng sử dụng CSS sau này. Và thường khi tính đến bố cục bạn nên tính đến khả năng responsive của HTML. Bạn có thể nhìn hình dưới để thấy rõ được bố cục của một website responsive là như thế nào.

Tuy nhiên phần này mình sẽ nói rõ hơn trong series học CSS căn bản.

Làm sao để HTML trở thành một trang web đúng nghĩa?

Để cấu thành nên một website tĩnh hoàn chỉnh bạn cần phải có thêm CSS và JAVASCTRIP cho website của bạn. Vậy sử dụng CSS và Javasctrip như thế nào thì xin mời bạn ghé thăm >series học css căn bản và >series học Javasctrip của mình nhé.

Đây là bài kết thúc series học >HTML cơ bản tại tuandc.com. Nếu bạn có thắc mắc gì có thể comment bên dưới mình sẽ giúp bạn giải đáp mọi thắc mắc nhé.