Chúng ta đã thảo luận qua Tổng quan về Web và Internet và cũng đã bàn qua về HTML.
Trong phần này, chúng ta sẽ chính thức bàn kỹ hơn về HTML, bắt đầu bằng cấu trúc cơ bản của một trang HTML.Bạn đã bao giờ nghe qua một từ "sành điệu" là Markup? Đại khái người ta phân biệt việc viết code C, C++, Python... với việc "viết mã HTML", mấy cái trước thì gọi là Code, cái sau thì gọi là Markup.
Trước đây, ngôn ngữ markup được thiết kế để xử lý, định nghĩa và hiển thị văn bản. Sau này, khi HTML xuất hiện, "chức năng nhiệm vụ" của nó cũng tương tự như Markup và khác với việc chúng ta viết IF...ELSE, cho nên nó được liệt vào ngôn ngữ Markup và chính tên của nó cũng đã bao gồm từ Markup. HTML là một ngôn ngữ markup nổi tiếng nhất được dùng. Trong vài năm trở lại đây, một bản cập nhật cho ngôn ngữ này là HTML5 được xuất bản. HTML (Hyper-Text Markup Language) có thể được hiểu là ngôn ngữ chính của WordWide Web. Điều khiến HTML5 vượt hơn các phiên bản trước là nó có audio phiên bản cao và hỗ trợ video, vốn không phải là thành phấn chính của các phiên bản HTML trước. Bạn không cần phải quá băn khoăn phân biệt hay "dứt khoát phải học cái mới", thực tế hiện nay là cách hợp giữa HTML/XHTML và HTML5 vì vậy chúng ta sẽ cùng tìm hiểu mọi thứ.
Cấu trúc cơ bản của trang HTML thường gồm 3 phần:
- <!Doctype>: Phần khai báo chuẩn của html hay xhtml.
- <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript…
- <body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung. Đây chính là phần mà bạn "thấy" khi truy cập vào trang web.
Hình trên chỉ bao gồm các thẻ HTML, tuy nhiên trước khi khai báo các thẻ khác trong HTML chúng ta cần khai báo dạng tài liệu bằng thẻ <!DOCTYPE>, cách khai báo này là khác nhau cho các phiên bản HTML.
Ví dụ với HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Với HTML5 thì đơn giản hơn:
<!DOCTYPE html>
Sau phần khai báo, ta sẽ thấy hai phần chính
- Phần đầu được khai báo bằng thẻ <head>. Trong phần này, chúng ta có thể khai báo một số vấn đề như: Tiêu đề, mã ký tự, các file css, javascript...
- Phần nội dung được khai báo bằng thẻ <body>, đây là phần sẽ hiển thị trên trình duyệt.
Chúng ta thử "dòm qua" vài thẻ HTML
Thẻ <head>
Nằm sau thẻ <html>, có thẻ đóng </head>, nó chứa những thẻ khác nhằm khai báo thông tin cho trang như tiêu đề, mô tả, bảng mã ký tự. Head không hiển thị nội dung những gì nó chứa đựng ra ngoài. Nói chung nó dành cho "chị Google" tham khảo.
Thẻ <title>
Xác định tiêu đề của văn bản, tiêu đề này sẽ được hiển thị trong phần tab của trình duyệt. Khi bạn đưa con trỏ chuột vào tab của trang web, bạn sẽ thấy tiêu đề.
Thẻ <meta>
Định nghĩa các thông tin thêm (metadata) cho tài liệu, các thông tin này bao gồm thông tin về tác giả, thông tin mô tả nội dung, thông tin từ khóa…Cái này không dành cho người đọc, người duyệt web mà dành cho Google, Yahoo...
Ví dụ chúng ta thêm thẻ meta vào mã HTML trong phần trước
<!DOCTYPE html>
<html>
<head>
<title>Day La Trang Web Dau Tien</title>
<meta charset="UTF-8">
<meta name="description" content="Đất Việt Lập Trình. Tự học lập trình online miễn phí.">
</head>
<body>
<h1>Day La Trang Web Dau Tien</h1>
<p>Xin Chao!!</p>
</body>
</html>
Chạy thử trên Online GDB.
Thẻ <body>
Nằm sau thẻ <head>, có thẻ đóng </body> nằm trước </html>. Body là nơi chứa những gì mà mọi người sẽ thấy trên web như văn bản, hình ảnh, thanh menu, banner, quảng cáo...
Trước khi qua phần khác, chúng ta thử tưởng tượng thế này:
- Nếu một web page chỉ gồm toàn văn bản từ trên xuống dưới thì việc học và sử dụng HTML có lẽ "không có vấn đề gì"?
- Tuy nhiên Web page ngày nay hoàn toàn không đơn giản về mặt bố cục nào là thanh menu, nào là nôi dung chính, nào là footer, nào là sidebar, nào là banner, nào là logo...Vì vậy, trước hết chúng ta cần có một "hình dung" nhất định về hình dạng chung của các web page, từ đó chúng ta mới có thể biết áp dụng các thẻ HTML thích hợp để tạo ra một web page hoàn chỉnh.
Đây là hình ảnh đơn giản các thành phần của một trang web
Không có nhận xét nào:
Đăng nhận xét