Hiểu href, src, neo trang, target, alt và định dạng ảnh; thực hành URL tương đối, iframe có tên và tab mới trên dữ liệu DEMO, ghi rõ giới hạn kiểm chứng.
Nhóm Help Desk chuyển một hướng dẫn từ thư mục gốc sang /docs/. Văn bản vẫn hiện nhưng ảnh biến mất, còn liên kết mở nhầm vị trí. Người hỗ trợ cần đọc URL mà trình duyệt thực sự yêu cầu trước khi kết luận CDN hoặc máy chủ hỏng. Một tham chiếu tương đối phụ thuộc URL nền, không phụ thuộc việc tệp ảnh “trông như nằm gần” trong editor.
Bài thuộc 032.3, khung PDF 030-100-vi, trang in 106–118, tương ứng trang vật lý 114–126. Sau bài, bạn nên tạo liên kết ngoài, neo trong trang, ảnh có mô tả và iframe đơn giản; đồng thời giải thích phạm vi của từng tham chiếu. Bạn cần kiến thức URL và cấu trúc HTML từ các bài trước.
Nội dung được viết mới, đối chiếu nguồn ngày 23/10/2026. Lab dùng Chromium 151.0.7922.34, tài nguyên tự tạo và server loopback; không gửi email, gọi điện hoặc nhúng dịch vụ bên ngoài. Việc mở tab và chuyển tài liệu trong frame chỉ thực hiện với trang DEMO.
href chỉ đích của một liên kết, còn src chỉ nguồn nội dung cần nhúng trong những phần tử phù hợp. Quy tắc phân giải tham chiếu tương đối giúp dự đoán request. Với trang https://help.example.test/docs/index.html, ../images/device.svg trỏ tới https://help.example.test/images/device.svg.
Một đường dẫn bắt đầu bằng / là tham chiếu từ gốc của origin, không phải URL đầy đủ có scheme và host. images/device.svg lại tương đối với thư mục nền của trang. Dấu gạch chéo cuối URL nền cũng có thể làm kết quả khác đi; hãy nhìn URL đã phân giải thay vì đoán từ tên tệp.
Ví dụ trên không dùng phần tử base; nếu có base, cần xét thêm ảnh hưởng của nó. Trong công cụ mạng, ghi URL, status và kiểu nội dung của ảnh lỗi. Một phản hồi 200 chứa trang HTML đăng nhập cũng chưa phải ảnh hợp lệ để trình duyệt giải mã.
Phần tử a với href tạo một hyperlink. Nội dung như “Xem hướng dẫn máy in DEMO” giúp người đọc hiểu đích hơn một loạt chữ “bấm đây”. Ảnh cũng có thể làm nội dung liên kết, nhưng khi không có chữ đi kèm, phần mô tả ảnh cần truyền đạt chức năng hoặc đích phù hợp.
mailto: và tel: yêu cầu ứng dụng xử lý tương ứng; chúng không chứng minh thư đã được gửi hay cuộc gọi đã hoàn thành. Trong bài này chỉ nhận diện cú pháp, không kích hoạt ứng dụng liên lạc. Khi xây portal thật, tránh công bố địa chỉ hoặc số điện thoại mà bạn không có quyền chia sẻ.
Đặc tả liên kết HTML là nguồn đối chiếu cho hành vi điều hướng. Những target cần nhận diện gồm:
| Target | Ngữ cảnh được nhắm tới |
|---|---|
_self |
Ngữ cảnh hiện tại, thường là lựa chọn mặc định |
_blank |
Ngữ cảnh mới, có thể là tab hoặc cửa sổ |
_parent |
Ngữ cảnh cha khi nằm trong frame |
_top |
Ngữ cảnh ở mức trên cùng |
Một tên như viewer |
Ngữ cảnh có tên phù hợp, ví dụ iframe |
Hành vi còn chịu chính sách và hạn chế sandbox; không coi _top là quyền vượt mọi giới hạn. Khi chủ động mở tab mới, báo cho người đọc và dùng rel="noopener" để thể hiện ý định tách opener. Trình duyệt hiện đại còn có bảo vệ ngầm cho _blank, nhưng vẫn cần kiểm tra môi trường được hỗ trợ. Noopener không chứng minh trang đích đáng tin.
Liên kết href="#check" nhắm đến phần tử có id="check" trong tài liệu. Id cần duy nhất và khớp đúng giá trị. Nếu bấm không tới phần mong muốn, kiểm tra đích tồn tại, chữ hoa/thường và mã đang chạy có can thiệp điều hướng không.
Fragment nằm phía client, không được gửi như một phần request target HTTP thông thường. Trong lab, ta kiểm tra cả URL trong trình duyệt lẫn đường dẫn server nhận được. Điều đó không ngăn JavaScript của một website tự đọc fragment rồi gửi qua request riêng; đừng dùng nó như nơi cất bí mật.
Cuộn tới một vị trí cũng không luôn đồng nghĩa focus bàn phím đã chuyển đúng. Bài 032.2 đã thử skip link tới main có thể nhận focus; ở đây neo giúp nhận diện vị trí, còn tiêu chí focus cần được kiểm tra riêng khi xây tương tác.
Phần tử img dùng src để tải hình và alt để cung cấp văn bản thay thế. Alt không chỉ dành cho lúc ảnh hỏng. Theo cây quyết định alt của W3C WAI, lựa chọn phụ thuộc vai trò ảnh: cung cấp thông tin, thực hiện chức năng hay chỉ trang trí.
Với hình giải thích vị trí nút, mô tả cần chuyển được thông tin đó. Với ảnh trang trí thuần túy, alt="" có thể phù hợp; bỏ hẳn alt không tương đương với khai báo rỗng. Sơ đồ phức tạp còn cần nội dung giải thích đầy đủ ngoài một câu alt ngắn.
Width và height đúng tỷ lệ giúp trình duyệt dành chỗ trước khi tải. Chúng không tự giảm số byte của ảnh nguồn. Phóng ảnh raster vượt kích thước có thể mờ; ép sai tỷ lệ có thể méo cả ảnh vector. Khi tối ưu thực tế, cần chuẩn bị tài nguyên theo nhu cầu hiển thị và kiểm tra độ rõ, không chỉ sửa hai con số trong HTML.
Hướng dẫn định dạng ảnh của MDN phân biệt các đặc điểm cơ bản:
| Định dạng | Đặc điểm cần nhớ |
|---|---|
| JPEG/JPG | Raster, thường nén mất dữ liệu, phù hợp nhiều ảnh chụp |
| PNG | Raster, nén không mất dữ liệu, hỗ trợ trong suốt |
| SVG | Đồ họa vector dạng văn bản, hữu ích cho hình và sơ đồ có cấu trúc |
| GIF | Bảng màu giới hạn; hỗ trợ hoạt ảnh, không mặc định kém nhất ở mọi ảnh |
| WebP, AVIF | Các lựa chọn hiện hành cần xét chất lượng, tính năng và môi trường hỗ trợ |
Không có định dạng luôn tốt nhất. So sánh cùng nội dung và mục tiêu chất lượng, rồi xem dung lượng cùng khả năng giải mã. SVG cũng có thể chứa thành phần phức tạp; không suy từ đuôi file rằng nội dung bên trong luôn an toàn hoặc nhỏ. Chỉ dùng tài sản có nguồn và quyền phù hợp.
Iframe nhúng một tài liệu với môi trường duyệt riêng. src chỉ tài liệu; title giúp nhận diện mục đích frame. name cho phép liên kết dùng target nhắm tới frame, nhưng thiếu name không có nghĩa src vĩnh viễn không thể đổi bằng cách khác.
Mỗi tài liệu có origin và chính sách liên quan. Không được suy rằng cha đọc tùy ý DOM của mọi frame bên ngoài. Thuộc tính sandbox giới hạn khả năng theo các token cho phép. Mẫu lab dùng sandbox rỗng vì tài liệu con chỉ là văn bản, không cần script hoặc biểu mẫu.
Không thêm quyền sandbox hàng loạt chỉ để làm một trang nhúng hết báo lỗi. Dịch vụ bên ngoài có thể không cho phép embedding; cần tôn trọng chính sách và chọn phương án liên kết phù hợp. Hạn chế nhúng cũng liên quan hiệu năng, quyền riêng tư và dữ liệu được gửi đến bên thứ ba.
audio và video cho phép nhúng media; controls cung cấp giao diện điều khiển gốc khi được hỗ trợ. Chỉ có nút phát chưa đủ đáp ứng nhu cầu tiếp cận. W3C WAI về media hướng dẫn xem xét captions, transcript và mô tả theo nội dung cùng loại media.
Định dạng tệp, codec, trình duyệt và chính sách phát đều ảnh hưởng kết quả. Nội dung fallback giữa thẻ không nên được coi là thông báo cho mọi lỗi giải mã trên browser có hỗ trợ phần tử. Lab bài này không thử phát âm thanh, video hoặc tự động phát.
Tạo một thư mục lab có docs/index.html, images/device.svg, panel.html và detail.html. Lưu các tệp bằng UTF-8. Server lab phục vụ thư mục gốc trên loopback; mở URL kết thúc bằng /docs/index.html, không đặt document root nhầm vào chính thư mục docs.
Nội dung docs/index.html:
<!doctype html>
<html lang="vi">
<head><meta charset="utf-8"><title>Tham chiếu | Lab LPI</title></head>
<body>
<h1>Hướng dẫn thiết bị DEMO</h1>
<p><a href="#check" id="jump">Tới phần kiểm tra</a></p>
<img id="device" src="../images/device.svg"
alt="Khối thiết bị DEMO màu xanh, không mô tả thiết bị thật"
width="320" height="160">
<p><a id="newtab" href="/detail.html" target="_blank" rel="noopener">Chi tiết DEMO (tab mới)</a></p>
<p><a id="inframe" href="/detail.html" target="viewer">Đổi nội dung khung DEMO</a></p>
<iframe name="viewer" src="/panel.html" title="Khung hướng dẫn DEMO" sandbox></iframe>
<h2 id="check">Kiểm tra đường dẫn</h2>
<p>Chỉ dùng dữ liệu giả và tài nguyên cục bộ.</p>
</body>
</html>
Tệp ảnh images/device.svg là hình vector tự tạo để thử đường dẫn, không phải ảnh chụp hay sơ đồ thiết bị thật:
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="160" viewBox="0 0 320 160">
<rect width="320" height="160" fill="#f5f2e6"/>
<rect x="80" y="30" width="160" height="100" rx="12" fill="#215747"/>
</svg>
Hai tài liệu con chỉ cần skeleton HTML có UTF-8 và một paragraph. Đặt panel.html chứa “Khung DEMO ban đầu”, còn detail.html chứa “Chi tiết DEMO”. Không nhúng mã hoặc tài nguyên ngoài vào chúng.
Kiểm tra ảnh tải được, URL nguồn đã phân giải kết thúc /images/device.svg và tỷ lệ là 2:1. Bấm neo, mong đợi fragment #check trong URL. Bấm “Đổi nội dung khung DEMO”, trang chính giữ nguyên còn frame hiển thị chi tiết. Bấm liên kết tab mới và xác nhận chỉ mở trang DEMO.
Trên Chromium 151.0.7922.34, ảnh SVG tải đúng đường dẫn, có kích thước tự nhiên 320×160 và alt như trong mã. Neo cập nhật fragment, log server không chứa dấu #. Frame có tên đổi sang detail trong khi trang chính giữ nguyên; tab mới mở detail với window.opener là null. Request ngoài origin lab bị chặn trong harness.
Đó là kiểm chứng cho fixture này. Chưa thử _parent, _top, mailto, tel, media playback, dịch vụ bên ngoài, CSP, mọi browser hoặc trình đọc màn hình. Không suy từ sandbox của mẫu rằng mọi nội dung nhúng đã được đánh giá an toàn.
Bạn đạt bài khi dự đoán được URL ảnh trước khi mở, giải thích alt theo vai trò và phân biệt đích điều hướng với nơi nhúng tài liệu. Nếu ảnh hỏng, kiểm tra request trước; nếu frame không đổi, kiểm tra name và target trước khi nới quyền. Giữ tệp cùng ghi chú để sang bài biểu mẫu HTML.
Chạy JavaScript trong HTML và Console; hiểu script, defer, async, module, comment và ASI; phân biệt lỗi tải, cú pháp và thực thi qua lab DEMO cục bộ.
Tính content-box và border-box, hiểu luồng, position, float, Flexbox và Grid; thực hành bố cục responsive, kiểm tra chuỗi dài, tràn ngang và focus bàn phím.
Chọn màu, alpha, nền và phông chữ CSS dễ đọc; phân biệt px, em, rem, phần trăm, viewport; kiểm chứng cỡ chữ, khoảng dòng và shorthand bằng lab cục bộ.
Đọc bộ chọn CSS theo phần tử, class, id và quan hệ; giải thích cascade, specificity, kế thừa, important và kiểm tra focus, hover trong lab có hoàn tác.