Liên kết nghiên cứu, danh sách và hình ảnh
Từ "siêu văn bản" nghĩa là bạn có thể hiển thị nhiều hơn là chỉ hiển thị văn bản trên trang web. HTML cung cấp khả năng tạo liên kết đến các tài nguyên khác và thêm hình ảnh vào một trang.
Siêu kết nối
Siêu kết nối (hoặc chỉ liên kết) cho phép người dùng dẫn hướng đến các mục khác. Đây có thể là một trang khác trên website của bạn, một website hoàn toàn riêng biệt hoặc thậm chí là một địa chỉ email. Một trong những mục tiêu chính của HTML là cho phép các "con trỏ" được thêm vào một trang để truy cập dễ dàng. Điều này được thực hiện thông qua các nối kết.
Thẻ được sử dụng để tạo liên kết là a, vốn ngắn gọn cho dấu neo. Nội dung giữa thẻ mở và đóng a trở thành siêu văn bản cho phép người dùng truy nhập tài nguyên.
Tài nguyên đang được tham chiếu được biểu thị bằng cách sử dụng một thuộc tính được gọi href là (hoặc tham chiếu siêu văn bản). Các thuộc tính được thêm vào trong thẻ mở và thường là một tên được ghép nối với một giá trị (được gọi là các cặp khóa-giá trị) với giá trị chứa trong dấu ngoặc kép.
<a href="some url">clickable text</a>
Các cặp khóa-giá trị được sử dụng trong các biểu mẫu. Nếu bạn điền vào biểu mẫu, bạn có thể được yêu cầu cung cấp tên và họ riêng biệt. Biểu mẫu có nhãn Tên và một khoảng trống và một nhãn khác Họ và một khoảng trống. Các nhãn giống như các phím trong thuộc tính HTML và bất kỳ thứ gì bạn đặt trong khoảng trống đều là giá trị. Trong thuộc tính HTML, khóa và giá trị được nối bằng dấu bằng để hiển thị chúng thuộc cùng nhau.
Chỉ báo Tài nguyên
Có nhiều loại tài nguyên mà một nối kết có thể trỏ tới. Nhiều lần các liên kết trỏ đến các trang web hoặc trang web khác. Tuy nhiên, liên kết cũng có thể trỏ tới địa chỉ email, tệp (như tài liệu PDF), video hoặc hình ảnh.
Để tạo nối kết đến site bên ngoài, bạn hãy dùng địa chỉ đầy đủ của site. Ví dụ: để tạo liên kết đến trang web tài liệu của Microsoft, bạn có thể sử dụng:
<a href="/">Microsoft Technical Documentation</a>
Bạn có thể liên kết đến một địa chỉ email. Loại liên kết này sẽ tự động mở máy khách email của người dùng và hoàn thành trường Đến với địa chỉ được chỉ ra sau chỉ mailto: thị.
<a href="mailto:someone@example.com">Email us!</a>
Trợ năng và Liên kết
Nếu bạn đặt một liên kết trong trang HTML mà bạn đang tạo, bạn nhận thấy rằng văn bản giữa (không phải bên trong) thẻ mở và đóng chuyển thành màu xanh lam. Bạn cũng sẽ nhận thấy rằng địa chỉ bị ẩn. Cuối cùng, bạn nhận thấy rằng từ bây giờ có thể chọn được. Nghĩa là, bạn chọn từ cần đưa đến tài nguyên.
Văn bản được hiển thị dưới dạng liên kết được gọi là văn bản liên kết. Sử dụng văn bản liên kết tốt là chìa khóa để đảm bảo tất cả người dùng đều có thể truy nhập trang của bạn. Các cụm từ như "bấm vào đây" làm gián đoạn bộ đọc màn hình và các công cụ không phải trình duyệt khác được sử dụng để điều hướng web. Cách thực hành tốt nhất là luôn sử dụng văn bản liên kết mô tả ngắn gọn tài nguyên được tham chiếu. Bạn có thể tìm hiểu thêm về việc đảm bảo trợ năng bằng cách khám phá mô-đun Học trợ năng.
Hình ảnh
Thẻ img được dùng để hiển thị hình ảnh trên một trang. Không giống như hầu hết các phần tử khác, img không có thẻ đóng. Thuộc tính src được sử dụng để trỏ đến vị trí của hình ảnh để hiển thị trên trang và alt mô tả nội dung của hình ảnh cho những nội dung như công cụ tìm kiếm và bộ đọc màn hình.
Quan trọng
Mặc dù các thuộc height và width có thể được sử dụng để chỉ định chiều cao và độ rộng hiển thị của hình ảnh, nhưng chúng không đổi kích cỡ của chính tệp hình ảnh đó. Cách tốt nhất là làm cho tệp hình ảnh có kích thước bạn sử dụng trên trang.
<img src="headshot.png" alt="Picture of an employee.">
Tạo Danh sách
Bạn sẽ thường xuyên cần hiển thị danh sách thông tin trên một trang. Khi xây dựng sơ yếu lý lịch, bạn muốn liệt kê các vai trò hoặc bằng cấp trước đó. HTML cung cấp hai loại danh sách khác nhau, có thứ tự và không có thứ tự.
Để tạo danh sách, trước tiên bạn sẽ quyết định loại danh sách bạn muốn tạo. Danh sách có thứ tự được sắp xếp theo thứ tự với các số (mặc định) hoặc chữ cái và sử dụng cho ol danh sách có thứ tự. Danh sách không có thứ tự sử dụng dấu đầu dòng và được xác định cho uldanh sách không có thứ tự. Các mục được chỉ báo cho li mục danh sách.
Danh sách Không có thứ tự
Sau đây là danh sách không có thứ tự:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Danh sách đã tạo:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
Danh sách có thứ tự
Sau đây là danh sách có thứ tự:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Danh sách đã tạo:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba