Home » HTML » Học HTML » Giao diện HTML
Ví dụ và cách sử dụng các thẻ HTML5: header, nav, section, footer... để xây dựng giao diện website.

Giao diện HTML

Như bạn thường thấy, giao diện các website thường thể hiện nội dung bằng nhiều cột, điển hình là các tạp chí hoặc trang báo mạng. Dưới đây là một ví dụ đơn giản về việc lên giao diện website bằng HTML:

 

Xây dựng giao diện website bằng HTML

HTML

CSS

JavaScript

HTML

Chúng ta đã nghe nói nhiều về lập trình web với HTML. Vậy, HTML là gì ? HTML là ngôn ngữ đánh dấu cho việc mô tả các tài liệu web (trang web).

  • HTML là viết tắt của Hyper Text Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản)
  • Ngôn ngữ đánh dấu là một tập hợp các thẻ đánh dấu
Bản quyền © WebVN.com

Xây dựng giao diện HTML bằng thẻ DIV

Thẻ <div> thường được sử dụng khi lên giao diện website vì khi kết họp với CSS nó sẽ đứng đúng vị trí bạn mong muốn một cách dễ dàng.

Ví dụ trên đã sử dụng 4 thẻ <div> để xây dựng giao diện với nhiều cột:

Demo

Giao diện website sử dụng HTML5

HTML5 có thêm nhiều thẻ có thể giúp bạn định nghĩa từng phần của trang web một cách rõ ràng:

headerTạo tiêu đề của trang hoặc tiêu đề một khu vực (section) trong trang
navTạo phần chứa liên kết điều hướng trang (thường là menu của trang)
sectionTạo một khu vực trong trang
articleTạo một bài viết độc lập
asideTạo một khung bên cạnh nội dung
footerTạo chân trang hoặc phần cuối của một khu vực
detailsTạo một nội dung và thông tin chi tiết về nội dung đó
summaryTạo tiêu đề cho nội dung trong thẻ details

Ví trí các thẻ trong trang HTML5 thường được sắp xếp như hình dưới đây:

Vị trí các thẻ trong trang HTML5

Quay lại ví dụ bên trên, chúng ta sẽ xây dựng lại trang web bằng cách sử dụng các thẻ trong HTML5:

Demo

Giao diện sử dụng bảng trong HTML

Thẻ <table> không được thiết kế ra để phục vụ cho việc xây giao diện website.

Mục đích chính của thẻ <table> là thể hiển các dữ liệu dạng bảng.

Ngày nay, bạn thấy hầu hết các website được xây dựng bằng thẻ <div> và các thẻ HTML5. Nhưng từ những năm 2007-2008 trở về trước, việc sử dụng thẻ <table> để lên giao diện website lại khá phổ biến.

Dưới đây là một ví dụ đơn giản về cách xây dựng giao diện với thẻ <table>

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

*