Phần tử rỗng
Từ đầu đến giờ, tất cả các phần tử đã được đề cập tới đều có cú pháp là:
<tên thẻ>nội dung</tên thẻ>
Trong đó, phần “nội dung” thường là văn bản. Tuy nhiên, có một số ít các phần tử không có phần nội dung, mà bản thân phần tử đó sẽ là một chỉ dẫn để thực hiện một hành động nào đó, như xuống dòng, tạo một đường kẻ ngang, hiển thị một hình ảnh, các phần tử này được gọi là phần tử rỗng.
Cú pháp của phần tử rỗng là:
Ví dụ một số phần tử rỗng:
- Phần tử img, khi trình duyệt gặp phần tử này, nó sẽ tải hình ảnh về và hiển thị lên giao diện
- Phần tử br, được sử dụng để ngắt dòng, xuống hàng (line break)
- Phần tử hr, được sử dụng để tạo một đường kẻ ngang (horizontal rule), mục đích là để kết thúc một chủ để/đề mục, để chuyển sang chủ đề/đề mục mới
- Phần tử meta, được sử dụng để mô tả một số đặc tính của trang web, ví dụ: bộ mã mà trang web sử dụng, mô tả vắn tắt nội dung của trang web, các từ khóa của trang web, tác giả của trang web. Meta là viết rút gọn của metadata. Metadata là siêu dữ liệu, nghĩa là dữ liệu để mô tả dữ liệu. Cụ thể ở đây là các thông tin để mô tả một số đặc tính của trang web. Phần tử meta không được hiển thị ra trình duyệt. Trình duyệt, máy tìm kiếm và các dịch vụ web khác sẽ đọc và sử dụng các phần tử meta này.
Cách viết phần tử rỗng |
Phần tử rỗng không có phần nội dung, nên không cần thẻ đóng mà chỉ có thẻ mở (hay còn gọi là thẻ rỗng). Thẻ rỗng là thẻ để tạo ra phần tử rỗng. Có ba cách viết các thẻ rỗng: - Cách một: <br>, <hr>, <img>, <meta> - Cách hai: <br />, <hr />, <img />, <meta /> - Cách ba: <br/>, <hr/>, <img/>, <meta/> Vậy chọn cách viết nào? Theo stackoverflow[1] thì đơn giản nhất là chọn cách một, tuy nhiên nếu vì lý do phải tương thích với các trình duyệt cũ, với XHTML thì sử dụng cách hai hoặc ba. |
1: Thuộc tính
Như đã biết, phần tử img được sử dụng để chèn một hình ảnh vào trang web, tuy nhiên, vì là phần tử rỗng, nên chỉ với cú pháp <img> thì trình duyệt sẽ không thể biết được là phải lấy hình ảnh nào, lấy ở đâu? Vì vậy, cần phải sử dụng thêm thuộc tính (attribute) để cung cấp cho trình duyệt biết được tên và vị trí của hình ảnh.
Để dễ hiểu về thuộc tính và cũng để thực hành việc sử dụng phần tử rỗng, chúng ta sẽ chèn một hình ảnh vào trang index.html.
- Chuẩn bị sẵn một tập tin hình ảnh (.jpg, .png, .jpeg, .gif), để trong cùng thư mục với tập tin index.html. Ví dụ tập tin hình ảnh có tên là con-vit.png.
- Mở tập tin index.html bằng Notepad
- Chèn thêm dòng mã này vào ngay sau thẻ <body>: <img src="con-vit.png" alt="Logo Con Vit">
Khi đó nội dung của index.html sẽ như sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web dau tien</title>
</head>
<body>
<img src="con-vit.png" alt="Con Vit Logo">
<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>
[Kết quả]
Lưu lại tập tin index.html và chuyển qua trình duyệt để xem kết quả, sẽ thấy hình ảnh xuất hiện.
Hình sau minh họa cú pháp của thuộc tính,
Thuộc tính (attribute[2]) là thành phần bổ sung của mỗi phần tử HTML. Thuộc tính được dùng để thay đổi chức năng mặc định của phần tử hoặc là một thành tố bắt buộc phải có, để một phần tử có thể thực hiện đúng chức năng.
Thuộc tính luôn được đặt trong thẻ mở. Mỗi phần tử có thể chứa nhiều thuộc tính, mỗi thuộc tính cách nhau bởi một khoảng trắng, tính thứ tự trước sau của các thuộc tính là không quan trọng.
Hầu hết các thuộc tính đều có giá trị đi kèm, giá trị của thuộc tính nằm sau dấu “=”. Tuy nhiên, có một số trường hợp thuộc tính được viết rút gọn chỉ gồm một từ mô tả, ví dụ thuộc tính checked.
Giá trị của thuộc tính có thể là: văn bản, số, kí tự, URL, đơn vị đo.
Giá trị của thuộc tính thường được bao lại bằng dấu nháy kép ("") hoặc nháy đơn ('). Mọi người hay sử dụng dấu nháy kép. Tuy nhiên, cũng có một số giá trị không cần phải bao lại bằng dấu nháy. Lưu ý, đừng nhầm dấu ("") với dấu (“”) hoặc dấu (') với dấu (‘), việc chép mã HTML từ tài liệu Word để chạy thử hay bị nhầm các dấu này, và gây ra lỗi.
Có bốn loại thuộc tính cơ bản gồm:
Loại thuộc tính | Mô tả |
Thuộc tính bắt buộc (required attributes) | Là thuộc tính bắt buộc phải có để phần tử thực hiện đúng chức năng của nó. |
Thuộc tính tùy chọn (optional attributes) | Là thuộc tính được sử dụng để thay đổi chức năng mặc định của một phần tử. |
Thuộc tính chuẩn (standard attributes) hay thuộc tính phổ dụng (global attributes) | Là thuộc tính có thể sử dụng được cho nhiều loại phần tử. |
Thuộc tính sự kiện (event attributes) | Là thuộc tính được sử dụng để kích hoạt một hành động (script) trong các trường hợp cụ thể |
Exercise 4-4. Adding an image (p63)Exercise 4-5. Adding a style sheet (p65)
2: Hiển thị tiếng Việt
Các ví dụ trước, phải viết nội dung trang web ở dạng tiếng Việt không dấu, vì chưa thiết lập thuộc tính về bộ mã cho toàn bộ nội dung của trang web. Phần sẽ này làm cho trang web có thể hiển thị được tiếng Việt bằng cách: trong phần tử head thêm thẻ meta với thuộc tính charset=“utf-8”,
<meta charset="utf-8">
Mở tập tin index.html bằng Notepad, nhập lại đoạn thơ có dấu tiếng Việt, khi lưu, trong mục Encoding nhớ chọn là UTF-8. Mở trang web bằng trình duyệt, sẽ thấy đoạn thơ đã có dấu tiếng Việt.
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang web dau tien</title>
</head>
<body>
<img src="con-vit.png" alt="Logo Con Vit">
<h1>NGÀY ĐẦU TIÊN ĐI HỌC</h1>
<p>Ngày đầu tiên đi học</p>
<p>Mẹ dắt tay đến trường</p>
<p>Em vừa đi vừa khóc</p>
<p>Mẹ dỗ dành bên em</p>
<p>Tác giả: <em>Viễn Phương</em></p>
</body>
</html>
UTF-8 |
UTF-8 là viết tắt của 8-bit Unicode Transformation Format (Định dạng chuyển đổi Unicode 8-bit). UTF-8[3] là một bộ mã hóa kí tự với chiều rộng biến thiên dành cho Unicode. Tương tự như UTF-16 và UTF-32, UTF-8 có thể biểu diễn tất cả các chữ cái trong bộ kí tự Unicode, nhưng điểm khác biệt quan trọng nhất là nó có thể tương thích ngược với ASCII. Vì lý do này, UTF-8 nhanh chóng trở thành bộ mã hóa được sử dụng rộng rãi trong các tập tin, thư điện tử, trang web, và phần mềm xử lý văn bản. |
3: Kiểm tra tính hợp lệ của mã HTML
Trong cấu trúc của một tài liệu HTML, hàng đầu tiên là khai báo cho biết nội dung bên dưới sẽ được viết bằng HTML phiên bản nào. Dựa vào khai báo này, trình duyệt sẽ sử dụng đặc tả HTML tương ứng để biên dịch và hiển thị kết quả.
Từ khi được Tim Berners-Lee tạo ra và công bố vào năm 1991, đến nay, HTML đã trải qua nhiều phiên bản khác nhau. Ví dụ,
Phiên bản | Năm ra đời |
HTML | 1991 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.0.1 | 1999 |
XHTML | 2000 |
HTML5 | 2012 |
Trải qua mỗi phiên bản sẽ có những cải tiến, bổ sung các phần tử mới, loại bỏ các phần tử không còn phù hợp. Vì vậy, để hiển thị nội dung trang web ở trạng thái tốt nhất, cần sử dụng các phần tử phù hợp. Làm sao biết được sử dụng phần tử nào là phù hợp, phần tử nào không? Ví dụ, có những phần tử được HTML4.01 hỗ trợ, tuy nhiên HTML5 lại không hỗ trợ.
W3C có cung cấp một công cụ để làm việc này, đó là website https://validator.w3.org/. Trang web này cho phép kiểm tra tính hợp lệ của mã HTML bằng ba cách:
- Kiểm tra trực tiếp trên mạng, sử dụng địa chỉ của trang web cần kiểm tra (Validate by URI)
- Tải tập tin HTML lên để kiểm tra (Validate by File Upload)
- Nhập trực tiếp đoạn mã HTML để kiểm tra (Validate by Direct Input)
Ví dụ,
- Mở trang web https://validator.w3.org/, chọn tab Validate by Direct Input, chép và dán đoạn mã HTML sau vào vùng nhập liệu của trang web (Enter the Markup to validate).
<!DOCTYPE html>
<html>
<head>
<title>Hoc lam web</title>
<meta charset="utf-8">
</head>
<body>
<p>Chữ <big>này</big> sẽ được viết to hơn bình thường </p>
</body>
</html>
- Bấm nút Check để chương trình validator thực hiện việc kiểm tra.
- Bạn sẽ nhận được thông báo là thẻ <big> đã bị lỗi thời, cần sử dụng thẻ khác hoặc định dạng bằng CSS.
Đây là kết quả thông báo,
↩
<p>Chữ <big>này</bNgoài ra, cũng có thể tự kiểm tra tính hợp lệ của mỗi phần tử bằng cách tham chiếu đến thông tin về phần tử đó tại các trang web uy tín.
.jpg)
.jpg)
0 Nhận xét