Xem hình minh họa Cấu trúc cơ bản của một tài liệu HTML5,
Diễn giải hình trên,
Một tài liệu HTML luôn được bắt đầu bằng dòng khai báo, mục đích là để cho trình duyệt biết được tài liệu bên dưới được viết bằng HTML phiên bản bao nhiêu. Từ đó, trình duyệt sẽ dùng đặc tả (specification) tương ứng để biên dịch mã HTML. Từ khóa để khai báo là <!DOCTYPE>, đây không phải là một thẻ HTML.
Ví dụ,
- Nếu tài liệu được viết bằng HTML5 thì sẽ khai báo là:
<!DOCTYPE html>
- Nếu tài liệu được viết bằng HTML4.01 Strict thì sẽ khai báo là:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Từ DOCTYPE là viết rút gọn của DOCument TYPE (loại tài liệu).
Sau phần khai báo, đến phần tử html, toàn bộ tài liệu HTML sẽ được chứa trong phần tử này. Phần tử html được gọi là phần tử gốc (root element), vì nó chứa tất cả các phần tử khác của tài liệu, và nó không nằm trong bất kì phần tử nào.
Bên trong phần tử html có hai phần tử con là phần tử head và phần tử body. Phần tử head và body giúp chia một tài liệu HTML thành hai phần riêng biệt. Trong đó, phần tử head chứa các thông tin mô tả về chính tài liệu này, ví dụ tiêu đề (title), tập tin định dạng (CSS), đoạn mã JavaScript, các thông tin này không được hiển thị ra cửa sổ trình duyệt, còn phần body chứa toàn bộ nội dung mà chúng ta muốn hiển thị ra cửa sổ trình duyệt.
Trong phần head có phần tử title, phần tử này sẽ chứa tiêu đề của trang web, nó sẽ xuất hiện trên thanh tiêu đề của trình duyệt. Phần tử title bắt buộc phải nằm trong phần tử head.
Tốt rồi, giờ sẽ làm thực hành tiếp, để có được trang web đầu tiên, cùng làm tiếp Bước 4.
Bước 4. Tạo một trang web thực sự
Bổ sung thêm cấu trúc của một tài liệu HTML vào tập tin index.html, để nó trở thành một tài liệu HTML (trang web) thực sự. Lúc này tập tin index.html sẽ như sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web dau tien</title>
</head>
<body>
NGAY DAU TIEN DI HOC
Ngay dau tien di hoc
Me dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
</body>
</html>
Lưu lại tập tin index.html, mở lại tập tin này bằng trình duyệt và xem kết quả có thay đổi gì không?
Thấy không có gì thay đổi, ngoại trừ thanh tiêu đề của trang web bây giờ sẽ là “Trang web dau tien”, chúng ta có thể thay đổi nội dung trong phần tử title để xem sự thay đổi trên thanh tiêu đề của trình duyệt (nhớ lưu lại sự thay đổi tại tập tin index.html và làm tươi lại trang web (refresh) trên trình duyệt, để xem kết quả).
2 Thêm cấu trúc và ngữ nghĩa cho tài liệu
Me dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
2.1.4 Phần tử kiểu block và inline
Văn bản thô là gì |
Văn bản thô (plain text hay unformatted text) là văn bản ở dạng tự nhiên nhất, không bao gồm thông tin định dạng. Tài liệu word là văn bản đã bao gồm thông tin định dạng, do vậy đó không phải là văn bản thô. Ví dụ, văn bản tạo bằng Notepad hoặc các Text Editor để làm web khác chính là văn bản thô. Văn bản thô chính là nguyên liệu để tạo ra mã nguồn các trang web (tài liệu HTML). Ví dụ một đoạn văn bản thô, <head> <title>My webpage</title> </head> |
Tài liệu là gì |
Tài liệu (document)[1] là vật mang tin, được hình thành trong quá trình hoạt động của cơ quan, tổ chức, cá nhân. Các loại tài liệu: văn bản, dự án, bản vẽ thiết kế, bản đồ, công trình nghiên cứu, sổ sách, biểu thống kê; âm bản, dương bản phim, ảnh, vi phim; băng, đĩa ghi âm, ghi hình; tài liệu điện tử; bản thảo tác phẩm văn học, nghệ thuật; sổ công tác, nhật ký, hồi ký, bút tích, tài liệu viết tay; tranh vẽ hoặc in; ấn phẩm và vật mang tin khác. |
Tài liệu HTML là gì |
Tài liệu HTML (HTML document) là tập tin chứa mã HTML, là trang web ở dạng mã nguồn, trình duyệt sẽ biên dịch tài liệu HTML để hiển thị ra trình duyệt. |
2 Thêm cấu trúc và ngữ nghĩa cho tài liệu
Chức năng của HTML gồm hai việc, một là tạo ra bố cục hay cấu trúc (structure) cho nội dung cần hiển thị, nghĩa là nội dung gồm những gì (phần tiêu đề, logo, menu, nội dung chính, phần bên phải, bên trái, phần chân trang); hai là tạo ngữ nghĩa (meaning) cho nội dung, ngữ nghĩa thường được thể hiện bằng các thẻ (ví dụ: tiêu đề cấp một, tiêu đề cấp hai, đoạn văn bản, phần trích, phần nhấn mạnh, danh sách).
Việc sắp xếp vị trí của các nội dung, chia cột, tạo màu sắc, hiệu ứng là chức năng của CSS chứ không phải của HTML.
Trang trí nội dung bằng HTML |
Ban đầu, HTML được tạo ra để giúp các nhà khoa học chia sẻ thông tin với nhau, do vậy, chức năng chủ yếu của nó là trình bày văn bản có cấu trúc, dễ đọc. Tuy nhiên, sau đó, HTML đã được mở rộng, được bổ sung thêm khả năng về định dạng, trang trí, cho phép người lập trình thay đổi phông chữ, màu sắc, căn lề. Hiện nay, HTML đang được trả lại đúng vai trò ban đầu của nó, nghĩa là HTML chỉ tập trung vào việc biểu diễn nội dung có cấu trúc và có ngữ nghĩa. |
Bởi vậy, công việc của lập trình viên là phải lựa chọn phần tử HTML phù hợp nhất để bọc lại các phần nội dung, sao cho nó có cấu trúc phù hợp và phản ánh tốt nhất ngữ nghĩa của nội dung. Ví dụ, nếu nội dung ở dạng bảng thì phải chọn phần tử table để bọc lại nội dung đó, chứ không thể bọc nó bằng phần tử danh sách (list).
Để hiển thị nội dung có cấu trúc, bên cạnh việc lựa chọn phần tử phù hợp thì lập trình viên còn phải sắp xếp, bố trí các phần tử sao cho hợp lý, hiểu nôm na là tạo bố cục (outline), nghĩa là các phần tử nào sẽ đặt cạnh nhau, phần tử nào sẽ lồng vào nhau.
Khi nội dung đã được cấu trúc hóa, người lập trình sẽ dễ dàng thực hiện việc trang trí cho các phần tử bằng CSS hoặc lập trình tương tác với các phần tử bằng JavaScript.
Bước 5. Tạo cấu trúc cho phần nội dung
Ở Bước 4 đã tạo được trang web thực sự, với cấu trúc cơ bản của một tài liệu HTML. Tuy nhiên, phần nội dung của trang web (đoạn thơ) vẫn chưa được đặt vào trong các phần tử HTML phù hợp. Điều này không được khuyến khích trong thực tế, vì nó tạo ra tình trạng không thể định dạng và không thể kiểm soát được sự xuất hiện của nó ở cửa sổ trình duyệt.
Vì vậy, công việc của phần này là tìm các phần tử HTML phù hợp để bao lại phần nội dung, vừa để cấu trúc hóa phần nội dung, vừa để tiện cho việc trang trí hoặc lập trình tương tác về sau.
- Mở tập tin index.html bằng Notepad
- Đặt dòng chữ NGAY DAU TIEN DI HOC vào trong phần tử h1, hay nói cách khác là dùng thẻ <h1> để bọc lại dòng chữ này. Phần tử h1 được sử dụng để chứa các tiêu đề mức 1, h1 là viết tắt của heading level 1. Hiểu nôm na, nội dung nào được bọc bằng thẻ <h1> thì trình duyệt sẽ hiểu đây là tiêu đề mức cao nhất, vì vậy nó sẽ hiển thị nội dung này với phông chữ lớn, in đậm.
- Dùng thẻ <p> để bọc lại mỗi câu thơ và dòng thông tin về tác giả, p là viết tắt của paragraph (đoạn văn bản)
- Dùng thẻ <em> bọc lại tên tác giả, để nhấn mạnh tên tác giả, em là viết tắt của emphasis.
Lúc này tập tin index.html sẽ như sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web dau tien</title>
</head>
<body>
<h1>NGAY DAU TIEN DI HOC</h1>
<p>Ngay dau tien di hoc</p>
<p>Me dat tay den truong</p>
<p>Em vua di vua khoc</p>
<p>Me do danh ben em</p>
<p>Tac gia: <em>Vien Phuong</em></p>
</body>
</html>
Lưu lại tập tin index.html, và ra ngoài trình duyệt để xem kết quả, sẽ thấy đoạn thơ được hiển thị có bố cục tốt hơn, tên bài thơ được in đậm, mỗi câu thơ nằm trên một hàng, tên tác giả được in nghiêng.
[Kết quả]
NGAY DAU TIEN DI HOC
Ngay dau tien di hocMe dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
2.1.4 Phần tử kiểu block và inline
Như đã biết, phần tử body sẽ chứa toàn bộ nội dung được hiển thị ra màn hình. Nghĩa là, phần tử body sẽ chứa các phần tử HTML của nội dung. Như vậy, phần tử body là phần tử cha, nó sẽ chứa các phần tử con. Sẽ biết thêm về quan hệ cha-con khi tìm hiểu về DOM.
Cứ tưởng tượng, phần tử body chính là một hình chữ nhật lớn, có chiều rộng đúng bằng chiều rộng của cửa sổ trình duyệt, chiều dài không hạn chế, hình chữ nhật này được chia thành các hàng, dùng để chứa các phần tử con, mỗi phần tử con cũng là một hình chữ nhật, nhưng nhỏ hơn.
Ở chế độ mặc định, mỗi phần tử HTML sẽ thuộc một trong hai kiểu hiển thị là block (kiểu khối) hoặc inline (kiểu nội tuyến, trong hàng).
Hình sau minh họa hai kiểu hiển thị block và inline,
Hiển thị kiểu block
Một phần tử có kiểu hiển thị là block (block-level) sẽ luôn được hiển thị ở một hàng mới và nó sẽ chiếm toàn bộ chiều rộng khả dụng (nghĩa là chiếm toàn bộ chiều rộng của phần tử chứa nó).
Một số phần tử (thẻ) HTML có kiểu hiển thị block[1] gồm,
<address> | <article> | <aside> | <blockquote> | <canvas> | <dd> |
<div> | <dl> | <dt> | <fieldset> | <figcaption> | <figure> |
<footer> | <form> | <h1>-<h6> | <header> | <hr> | <li> |
<main> | <nav> | <noscript> | <ol> | <output> | <p> |
<pre> | <section> | <table> | <tfoot> | <ul> | <video> |
Hiển thị kiểu inline
Một phần tử có kiểu hiển thị là inline (inline-level) sẽ không yêu cầu một hàng mới khi hiển thị và nó sẽ chiếm độ rộng vừa đủ để chứa hết phần nội dung của nó.
Một số phần tử (thẻ) HTML có kiểu hiển thị inline gồm,
Hình dưới đây là kiểu hiển thị của các phần tử trong trang index.html,
Định dạng mặc định
Như đã biết, nhiệm vụ của HTML là tạo cấu trúc và ngữ nghĩa cho nội dung. Tuy nhiên, quan sát trang index.html trên trình duyệt, sẽ thấy nội dung nằm trong phần tử h1 có phông chữ lớn, nét đậm, nội dung nằm trong phần tử p có phông chữ nhỏ hơn, nội dung nằm trong phần tử em được in nghiêng. Vậy thông tin định dạng này ở đâu ra? Đó chính là thông tin định dạng mặc định của trình duyệt (user agent style sheets). Khi học về CSS sẽ tạo các định dạng mới để thay thế cho định dạng mặc định này.
.jpg)
.jpg)
0 Nhận xét