Viết mã HTML
Đã giới thiệu| English | Ý nghĩa |
|---|---|
| HTML/ˌeɪtʃ tiː em ˈel/ | ngôn ngữ đánh dấu siêu văn bản |
| attribute/ˈætrɪbjuːt/ | thuộc tính |
| element/ˈelɪmənt/ | phần tử |
| semantic elements/səˈmæntɪk ˈelɪmənts/ | phần tử ngữ nghĩa |
Nó trông giống như một liên kết, nhưng Tab bỏ qua nó
- Một hình chữ nhật được định dạng có chữ “Tham gia” không tự động trở thành một liên kết hoạt động. Một thẻ neo (anchor) thực sự có điểm đến sẽ có hành vi trình duyệt mà việc chỉ định dạng payload không cung cấp được.
- HTML cung cấp cấu trúc và ý nghĩa cho nội dung. CSS điều khiển việc trình bày; việc chọn HTML có ý nghĩa cũng hỗ trợ việc sử dụng bàn phím và công nghệ hỗ trợ.
Tại sao lại sử dụng thẻ tiêu đề thực tế cho tiêu đề trang?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Tiêu đề mô tả cấu trúc tài liệu. Giao diện có thể sau đó được kiểm soát bằng CSS.
Đọc thẻ và các thuộc tính của nó
- Một phần tử thường có thẻ mở, nội dung và thẻ đóng:
<p>Meet on Thursday.</p>. Một thuộc tính cung cấp thông tin trong thẻ mở:<a href="join.html">Join</a>. - Một phần tử rỗng của HTML như
imgkhông có thẻ đóng hay nội dung con. Nó không "tự đóng lại"; dấu gạch chéo cuối là không cần thiết trong HTML. Lồng các thẻ cặp mà không giao nhau.
Thuộc tính nào cung cấp điểm đến điều hướng cho liên kết hypermedia?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Một liên kết như Cách tham gia sử dụng href.
Đánh dấu các vùng trang theo mục đích
- Các phần tử ngữ nghĩa bao gồm
navcho điều hướng chính vàmaincho nội dung chính của trang. Sử dụng tiêu đề để mô tả các phần vàdivcho một nhóm chung khi không còn phần tử cụ thể nào phù hợp hơn. - Một
abản địa vớihrefđang điều hướng; mộtbuttonbản địa đang thực hiện hành động. Dấu hiệu ngữ nghĩa giúp ích, nhưng nhãn, hành vi và tiêu điểm vẫn cần được kiểm tra.
Các phần tử nào có ý nghĩa HTML cụ thể này? Chọn tất cả các phương án áp dụng.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
div là phần tử chung. Sử dụng phần tử cụ thể hơn khi mục đích được xác định của nó phù hợp.
Gắn mục đích mong muốn với một phần tử gốc (native element) phù hợp.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Các phần tử gốc cung cấp ý nghĩa và hành vi mặc định, nhưng vẫn cần nhãn dễ hiểu và kiểm tra khả năng truy cập.
Xây dựng một trang hoàn chỉnh nhỏ
- Lưu ví dụ này dưới dạng
index.htmlcạnh một filejoin.htmlthật. Mở nó trên trình duyệt và truy cập liên kết bằng Tab và Enter. langxác định ngôn ngữ của trang;titletên tab trình duyệt. Cài đặt viewport cho phép phong cách responsive sử dụng độ rộng thiết bị.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robotics club</title>
</head>
<body>
<nav aria-label="Main"><a href="join.html">How to join</a></nav>
<main>
<h1>Robotics club</h1>
<p>Meet Thursday at 4 pm in room 12.</p>
</main>
</body>
</html>
<a href="join.html">How to join</a> kết hợp điểm đến và nhãn hữu ích. <div class="link">Click here</div> cung cấp cả điều hướng gốc lẫn điểm đến.
Chọn phương án thay thế dựa vào mục đích của hình ảnh
- Một hình ảnh mang tính thông tin cần một phương án thay thế truyền tải ý nghĩa liên quan của nó. Một hình ảnh thuần túy trang trí thường dùng
alt=""để công nghệ hỗ trợ có thể bỏ qua. - Đối với hình ảnh được sử dụng làm liên kết, hãy mô tả chức năng của liên kết khi thông tin đó không được cung cấp ở nơi khác. Một biểu đồ phức tạp cũng cần dữ liệu quan trọng của nó được giải thích bằng văn bản.
Không sử dụng tiêu đề chỉ để làm lớn chữ, hoặc lặp lại từ “hình ảnh” như mỗi phương án thay thế. Tương tự, không đưa ra những mô tả dài dòng cho hình ảnh trang trí gây gián đoạn nội dung trang.
alt="hình ảnh" là một thay thế hữu ích cho biểu đồ có tính thông tin.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Lựa chọn thay thế phải truyền tải thông tin phù hợp. Một biểu đồ phức tạp cũng cần dữ liệu quan trọng được trình bày dưới dạng văn bản.
Một bài báo về câu lạc bộ sử dụng ảnh chụp để hiển thị học sinh đang trồng cây trong sân trường. Hãy viết văn bản thay thế (alt text) hữu ích.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Ví dụ: “Học sinh đang trồng cây trong sân trường.” Không tự ý thêm số lượng nếu không được cung cấp.
Một chi tiết trang trí nhỏ bên cạnh tiêu đề không mang lại thông tin nào. Văn bản thay thế (alt) nào thường phù hợp nhất?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Văn bản thay thế trống sẽ giúp công nghệ hỗ trợ bỏ qua hình ảnh chỉ mang tính trang trí thuần túy.
Kiểm chứng cấu trúc và hành vi
- Kiểm tra thứ tự tiêu đề, nhãn liên kết có ý nghĩa, thao tác bàn phím và phương án thay thế hình ảnh. Công cụ kiểm tra mã HTML có thể phát hiện lỗi đánh dấu, nhưng không thể đánh giá xem văn bản của bạn có hữu ích hay không.
- Làm cho trang gặp gỡ khả dụng ngay cả khi tắt kiểu dáng. Sau đó tạo kiểu cho nội dung mà không biến đổi tiêu đề thành các đường tắt chỉ mang tính ngoại hình.
Chọn HTML dựa vào mục đích. Sử dụng liên kết và nút bấm gốc, lồng ghép hợp lệ và phương án thay thế hình ảnh tương ứng với vai trò của hình ảnh.
Nguồn: Cú pháp HTML và W3C hình ảnh trang trí.
Trong HTML, thẻ img là phần tử rỗng và không được có thẻ đóng.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Các phần tử rỗng không có nội dung con hay thẻ đóng. Dấu gạch chéo cuối cùng là không cần thiết; nó không làm cho phần tử HTML tự đóng.