032.3 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
032 Đánh dấu Tài liệu HTML |
Mục tiêu: |
032.3 Tham chiếu HTML và Tài nguyên Nhúng |
Bài: |
1 trên 1 |
Giới thiệu
Rất hiếm có một trang web hiện đại nào mà chỉ bao gồm văn bản. Nó thường sẽ bao gồm nhiều loại nội dung khác, chẳng hạn như hình ảnh, âm thanh, video và thậm chí là cả các tài liệu HTML khác nữa. Cùng với nội dung bên ngoài, các tài liệu HTML có thể chứa các liên kết đến các tài liệu khác, điều này làm cho trải nghiệm duyệt Internet trở nên đơn giản hơn rất nhiều.
Nội dung Nhúng
Người ta có thể trao đổi tệp qua Internet mà không cần các trang web được viết bằng HTML, vậy tại sao HTML lại là định dạng được chọn cho các tài liệu web chứ không phải là PDF hay bất kỳ định dạng xử lý văn bản nào khác? Một lý do quan trọng là HTML có khả năng giữ tài nguyên đa phương tiện của nó trong các tệp riêng biệt. Trong một môi trường như Internet nơi thông tin thường xuyên trùng lặp và được phân tán ở nhiều vị trí khác nhau, điều quan trọng là phải tránh việc truyền những dữ liệu không cần thiết. Trong hầu hết mọi trường hợp, các phiên bản mới của trang web sẽ sử dụng cùng một số các hình ảnh và tệp hỗ trợ khác giống như các phiên bản trước đó; vì vậy, trình duyệt web có thể sử dụng các tệp đã có trước đó thay vì sao chép lại mọi thứ. Hơn nữa, việc giữ các tệp riêng biệt sẽ tạo điều kiện thuận lợi cho việc tùy chỉnh nội dung đa phương tiện theo các đặc điểm của máy khách, chẳng hạn như vị trí, kích thước màn hình và tốc độ kết nối của chúng.
Hình ảnh
Loại nội dung nhúng phổ biến nhất là hình ảnh đi kèm với văn bản. Hình ảnh sẽ được giữ riêng và được tham chiếu bên trong tệp HTML bằng thẻ <img>
(hình ảnh):
<img src="logo.png">
Thẻ <img>
không cần có thẻ đóng. Thuộc tính src
cho biết vị trí nguồn của tệp hình ảnh. Trong ví dụ này, tệp hình ảnh logo.png
phải được đặt trong cùng thư mục với tệp HTML; nếu không, trình duyệt sẽ không thể hiển thị nó. Thuộc tính vị trí nguồn chấp nhận các đường dẫn tương đối; do đó, ký hiệu dấu chấm có thể được sử dụng để chỉ ra đường dẫn đến hình ảnh:
<img src="../logo.png">
Hai dấu chấm cho biết hình ảnh nằm ở bên trong thư mục mẹ tương liên quan tới thư mục chứa tệp HTML. Nếu tên tệp ../logo.png
được sử dụng bên trong tệp HTML có URL là http://example.com/library/periodicals/index.html
thì trình duyệt sẽ yêu cầu tệp hình ảnh tại địa chỉ http://example.com/library/logo.png
.
Ký hiệu dấu chấm cũng sẽ được áp dụng nếu tệp HTML không phải là tệp thực trong hệ thống tệp; trình duyệt HTML diễn giải URL như một đường dẫn đến tệp, nhưng công việc của máy chủ HTTP là quyết định xem đường dẫn đó đề cập đến tệp hay nội dung được tạo động. Miền và đường dẫn thích hợp sẽ tự động được thêm vào tất cả các yêu cầu tới máy chủ trong trường hợp tệp HTML đến từ một yêu cầu HTTP. Tương tự như vậy, trình duyệt sẽ mở đúng hình ảnh nếu tệp HTML được mở trực tiếp từ hệ thống tệp cục bộ.
Vị trí nguồn bắt đầu bằng dấu gạch chéo (/
) được coi là đường dẫn tuyệt đối. Đường dẫn tuyệt đối có thông tin đầy đủ về vị trí của hình ảnh; vì vậy, chúng có thể hoạt động bất kể vị trí của tài liệu HTML. Nếu tệp hình ảnh được đặt tại một máy chủ khác trong trường hợp khi Mạng phân phối nội dung (CDN) được sử dụng thì sẽ phải có cả tên miền.
Note
|
Mạng Phân phối Nội dung bao gồm các máy chủ được phân bố theo vị trí địa lý lưu trữ nội dung tĩnh cho các trang web khác. Chúng giúp cải thiện hiệu suất và tính khả dụng cho các trang web có lượng truy cập lớn. |
Nếu không thể tải được hình ảnh, trình duyệt HTML sẽ hiển thị văn bản được cung cấp bởi thuộc tính alt
thay vì hình ảnh. Ví dụ:
<img src="logo.png" alt="The Company logo">
Thuộc tính alt
cũng rất quan trọng đối với khả năng truy cập. Trình duyệt chỉ hỗ trợ văn bản và trình đọc màn hình đều sử dụng nó làm mô tả cho hình ảnh tương ứng.
Các loại Hình ảnh
Trình duyệt web có thể hiển thị tất cả các loại hình ảnh phổ biến, chẳng hạn như JPEG, PNG, GIF và SVG. Kích thước của hình ảnh có thể được xác định ngay khi hình ảnh được tải, nhưng chúng cũng có thể được xác định trước bằng các thuộc tính width
(chiều ngang) và height
(chiều cao):
<img src="logo.png" alt="The Company logo" width="300" height="100">
Lý do duy nhất để thêm các thuộc tính kích thước cho thẻ <img>
là để tránh phá vỡ bố cục khi hình ảnh mất quá nhiều thời gian để tải hoặc khi không thể tải được hình ảnh. Việc sử dụng thuộc tính width
và height
để thay đổi kích thước ban đầu của hình ảnh có thể dẫn đến những kết quả không mong muốn:
-
Hình ảnh sẽ bị biến dạng khi kích thước ban đầu nhỏ hơn kích thước mới hoặc khi tỷ lệ mới khác so với tỷ lệ ban đầu.
-
Việc thu nhỏ kích thước hình ảnh lớn sẽ tốn thêm băng thông, dẫn đến thời gian tải lâu hơn.
SVG là định dạng duy nhất không bị ảnh hưởng bởi các thuộc tính này vì tất cả thông tin đồ họa của nó đều được lưu trữ ở tọa độ số rất phù hợp cho việc chia tỷ lệ và kích thước mà không ảnh hưởng đến kích thước tệp (do đó mà nó có tên là Đồ họa Véc tơ có thể mở rộng). Ví dụ: chỉ cần có thông tin về vị trí, kích thước cạnh và màu để có thể vẽ một hình chữ nhật trong SVG. Giá trị cụ thể cho từng pixel sẽ được hiển thị động sau đó. Trên thực tế, hình ảnh SVG cũng tương tự như tệp HTML ở việc các thành phần đồ họa của chúng cũng được xác định bởi các thẻ trong tệp văn bản. Các tệp SVG được dùng để thể hiện các bản vẽ sắc nét, chẳng hạn như biểu đồ hoặc sơ đồ.
Hình ảnh không phù hợp với các tiêu chí này sẽ được lưu trữ dưới dạng ảnh mành hoá (bitmaps). Không giống như các định dạng hình ảnh dựa trên vectơ, ảnh mành hoá sẽ lưu trữ thông tin màu cho từng pixel của hình ảnh trước đó. Việc lưu trữ giá trị màu cho từng pixel trong hình ảnh sẽ tạo ra một lượng dữ liệu rất lớn; vì thế, ảnh mành hoá thường được lưu trữ ở định dạng nén, chẳng hạn như JPEG, PNG hoặc GIF.
Định dạng JPEG được khuyên dùng cho các bức ảnh vì thuật toán nén của nó có thể tạo ra các kết quả tốt về sắc thái và hậu cảnh mờ. Đối với những hình ảnh có phần lớn là màu sắc đặc, định dạng PNG sẽ phù hợp hơn. Do đó, định dạng PNG nên được chọn khi cần chuyển đổi hình ảnh từ vectơ thành ảnh mành hoá.
Định dạng GIF cung cấp chất lượng hình ảnh thấp nhất trong tất cả các định dạng ảnh mành hoá phổ biến. Tuy nhiên, nó vẫn được sử dụng rộng rãi vì nó hỗ trợ hoạt ảnh. Thật vậy, có rất nhiều trang web sử dụng các tệp GIF để hiển thị các video ngắn, nhưng trên thực tế thì có nhiều cách tốt hơn để hiển thị các nội dung video.
Âm thanh và Video
Nội dung âm thanh và video có thể được thêm vào tài liệu HTML theo cách tương tự với hình ảnh. Không có gì lạ khi thẻ để thêm âm thanh là <audio>
và thẻ để thêm video là <video>
. Rõ ràng là các trình duyệt chỉ hỗ trợ văn bản không thể phát nội dung đa phương tiện; vì vậy, các thẻ <audio>
và <video>
phải sử dụng thẻ đóng để giữ văn bản được sử dụng như một phần dự phòng cho các phần tử không thể được hiển thị. Ví dụ:
<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>
Nếu trình duyệt không hỗ trợ thẻ <audio>
, dòng “Unable to play recording.mp3” (Không thể phát bản ghi.mp3) sẽ được hiển thị. Việc sử dụng các thẻ đóng </audio>
hoặc </video>
cho phép trang web có những nội dung thay thế phức tạp hơn so với dòng văn bản đơn giản được cho phép bởi thuộc tính alt
của thẻ <img>
.
Thuộc tính src
cho thẻ <audio>
và <video>
hoạt động theo cách tương tự như đối với thẻ <img>
, nhưng nó cũng sẽ chấp nhận URL trỏ tới luồng trực tiếp. Trình duyệt đảm nhiệm việc đệm, giải mã và hiển thị nội dung khi nhận được. Thuộc tính controls
sẽ hiển thị phần điều khiển các mục phát. Không có nó, khách truy cập sẽ không thể tạm dừng, tua hoặc kiểm soát quá trình phát.
Nội dung chung
Một tài liệu HTML này có thể được lồng vào một tài liệu HTML khác (tương tự như việc chèn hình ảnh vào tài liệu HTML) bằng cách sử dụng thẻ <iframe>
:
<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>
Các trình duyệt chỉ hỗ trợ văn bản đơn giản sẽ không hỗ trợ thẻ <iframe>
và thay vào đó sẽ hiển thị văn bản đính kèm. Với các thẻ đa phương tiện, thuộc tính src
sẽ đặt vị trí nguồn của tài liệu được lồng vào. Có thể thêm các thuộc tính width
và height
để thay đổi kích thước mặc định của phần tử iframe
.
Thuộc tính name
cho phép nhà phát triển tham chiếu đến iframe và thay đổi tài liệu được lồng vào. Không có thuộc tính này, tài liệu được lồng vào sẽ không thể thay đổi được. Phần tử anchor
có thể được sử dụng để tải tài liệu từ một vị trí khác bên trong iframe thay vì cửa sổ trình duyệt hiện tại.
Các Liên kết
Một phần tử trang thường được gọi là liên kết web còn được gọi là liên kết neo (trong tiếng Anh là "anchor", do đó mà thẻ của nó là <a>
) theo ngôn ngữ kỹ thuật. Liên kết neo sẽ dẫn đến một vị trí khác, có thể là bất kỳ địa chỉ nào được trình duyệt hỗ trợ. Vị trí được chỉ định bởi thuộc tính href
(tham chiếu siêu liên kết - hyperlink reference):
<a href="contact.html">Contact Information</a>
Vị trí có thể được viết dưới dạng đường dẫn tương đối hoặc tuyệt đối như với nội dung nhúng đã thảo luận trước đây. Chỉ nội dung văn bản đính kèm (ví dụ như Contact Information
) mới hiển thị với khách truy cập, thường mặc định ở dưới dạng văn bản màu xanh được gạch chân và có thể nhấp vào được. Tuy vậy, mục được hiển thị qua liên kết cũng có thể là bất kỳ nội dung hiển thị nào khác, chẳng hạn như hình ảnh:
<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>
Các tiền tố đặc biệt có thể được thêm vào vị trí để cho trình duyệt biết cách mở nó. Ví dụ: nếu liên kết neo trỏ đến một địa chỉ email thì thuộc tính href
của nó phải bao gồm tiền tố mailto:
:
<a href="mailto:info@lpi.org">Contact by email</a>
Tiền tố tel:
cho biết số điện thoại. Nó đặc biệt hữu ích đối với khách truy cập xem trang trên thiết bị di động:
<a href="tel:+123456789">Contact by phone</a>
Khi nhấp vào liên kết, trình duyệt sẽ mở nội dung của vị trí với ứng dụng được liên kết.
Tác dụng phổ biến nhất của liên kết neo là tải các tài liệu web khác. Theo mặc định, trình duyệt sẽ thay thế tài liệu HTML hiện tại bằng nội dung tại vị trí mới. Hành vi này có thể được sửa đổi bằng cách sử dụng thuộc tính target
(mục tiêu). Ví dụ: mục tiêu _blank
yêu cầu trình duyệt mở vị trí đã cho trong cửa sổ mới hoặc tab trình duyệt mới, tùy thuộc vào tùy chọn của khách truy cập:
<a href="contact.html" target="_blank">Contact Information</a>
Mục tiêu _self
sẽ là mặc định khi thuộc tính targer
không được cung cấp. Nó sẽ làm cho tài liệu được tham chiếu thay thế tài liệu hiện tại.
Các loại mục tiêu khác có liên quan đến phần tử <iframe>
. Để tải tài liệu được tham chiếu bên trong phần tử <iframe>
, thuộc tính target
phải trỏ đến tên của phần tử iframe:
<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>
<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>
Phần tử iframe hoạt động như một cửa sổ trình duyệt riêng biệt; vì vậy, mọi liên kết được tải từ tài liệu bên trong iframe sẽ chỉ thay thế nội dung của iframe. Để thay đổi hành vi đó, các phần tử liên kết neo bên trong tài liệu khuôn cũng có thể sử dụng thuộc tính target
. Mục tiêu _parent
khi được sử dụng bên trong tài liệu khuôn sẽ khiến vị trí được tham chiếu thay thế tài liệu gốc chứa thẻ <iframe>
. Ví dụ: tài liệu gallery.html
được nhúng có thể chứa một liên kết neo tự tải cùng lúc thay thế tài liệu gốc:
<p><a href="gallery.html" target="_parent">Open as parent document</a></p>
Các tài liệu HTML hỗ trợ nhiều mức độ lồng với thẻ <iframe>
. Việc sử dụng mục tiêu _top
trong một liên kết neo bên trong tài liệu khuôn sẽ khiến vị trí được tham chiếu thay thế tài liệu chính trong cửa sổ trình duyệt, bất kể đó là phân tử mẹ hay họ hàng xa hơn nữa trong chuỗi của <iframe>
tương ứng.
Vị trí bên trong Tài liệu
Địa chỉ của tài liệu HTML có thể tùy chọn chứa một mảnh được sử dụng để xác định tài nguyên bên trong tài liệu. Mảnh này (còn được gọi là URL neo) là một chuỗi theo sau dấu thăng #
ở cuối URL. Ví dụ: từ History
là phần neo trong URL https://en.wikipedia.org/wiki/Internet#History
.
Khi URL có một phần neo, trình duyệt sẽ cuộn đến phần tử tương ứng trong tài liệu: nghĩa là phần tử có thuộc tính id
giống với phần neo trong URL. Trong trường hợp URL đã cho (https://en.wikipedia.org/wiki/Internet#History
), trình duyệt sẽ chuyển thẳng đến phần “History”. Khi kiểm tra mã HTML của trang, chúng ta sẽ phát hiện ra rằng tiêu đề của phần cũng có thuộc tính id
tương ứng:
<span class="mw-headline" id="History">History</span>
Các phần neo của URL có thể được sử dụng trong thuộc tính href
của thẻ <a>
cả khi chúng trỏ đến các trang bên ngoài lẫn các vị trí ở bên trong trang hiện tại. Trong trường hợp các vị trí ở bên trong trang hiện tại, ta chỉ cần bắt đầu bằng dấu thăng với đoạn URL như trong <a href="#History">History</a>
là đủ.
Warning
|
Thuộc tính |
Có nhiều cách để tùy chỉnh cách trình duyệt phản ứng với các liên kết URL. Ví dụ: có thể viết một hàm JavaScript lắng nghe sự kiện cửa sổ thay đổi giá trị băm (hashchange) và kích hoạt một hành động tùy chỉnh, chẳng hạn như hoạt ảnh hoặc yêu cầu HTTP. Tuy nhiên, điều đáng chú ý là đoạn URL sẽ không bao giờ được gửi đến máy chủ cùng với URL; vì vậy, nó không thể được máy chủ HTTP sử dụng làm mã định danh.
Bài tập Hướng dẫn
-
Tài liệu HTML tại
http://www.lpi.org/articles/linux/index.html
có thẻ<img>
có thuộc tínhsrc
trỏ tới../logo.png
. Đường dẫn tuyệt đối hoàn chỉnh đến hình ảnh này là gì? -
Hãy nêu hai lý do tại sao thuộc tính
alt
lại quan trọng trong các thẻ<img>
. -
Định dạng hình ảnh nào mang lại chất lượng hình ảnh tốt và giữ cho kích thước tệp nhỏ khi nó được sử dụng cho các bức ảnh có nhiều điểm mờ, màu sắc và mức màu?
-
Thay vì sử dụng nhà cung cấp bên thứ ba như Youtube, thẻ HTML nào cho phép bạn nhúng tệp video vào tài liệu HTML chỉ bằng các tính năng HTML tiêu chuẩn?
Bài tập Mở rộng
-
Giả sử rằng tài liệu HTML có siêu liên kết
<a href="pic1.jpeg">First picture</a>
và phần tử iframe<iframe name="gallery"></iframe>
. Làm cách nào để có thể sửa đổi thẻ siêu liên kết để hình ảnh mà thẻ trỏ tới sẽ tải bên trong phần tử iframe đã cho sau khi người dùng nhấp vào liên kết? -
Điều gì sẽ xảy ra khi khách truy cập nhấp vào siêu liên kết trong tài liệu bên trong iframe và siêu liên kết có thuộc tính
target
được đặt thành_self
? -
Bạn nhận thấy rằng phần neo URL dành cho phần thứ hai của trang HTML không hoạt động. Nguyên nhân của lỗi này có thể là gì?
Tóm tắt
Bài học này đề cập tới cách thêm hình ảnh và các nội dung đa phương tiện khác bằng cách sử dụng các thẻ HTML thích hợp. Hơn nữa, người đọc đã được tìm hiểu các cách khác nhau mà siêu liên kết có thể được sử dụng để tải các tài liệu khác và trỏ đến các vị trí cụ thể bên trong một trang. Bài học này đã đi qua các khái niệm và quy trình sau:
-
Thẻ
<img>
và các thuộc tính chính của nó:src
vàalt
. -
Đường dẫn URL tương đối và tuyệt đối.
-
Các định dạng hình ảnh phổ biến cho Web và đặc điểm của chúng.
-
Thẻ đa phương tiện
<audio>
và<video>
. -
Cách chèn tài liệu lồng nhau với thẻ <iframe>.
-
Thẻ siêu liên kết
<a>
, thuộc tínhhref
của nó và các mục tiêu đặc biệt. -
Cách sử dụng các mảnh URL hay còn gọi là neo băm.
Đáp án Bài tập Hướng dẫn
-
Tài liệu HTML tại
http://www.lpi.org/articles/linux/index.html
có thẻ<img>
có thuộc tínhsrc
trỏ tới../logo.png
. Đường dẫn tuyệt đối hoàn chỉnh đến hình ảnh này là gì?http://www.lpi.org/articles/logo.png
-
Hãy nêu hai lý do tại sao thuộc tính
alt
lại quan trọng trong các thẻ<img>
.Các trình duyệt chỉ hỗ trợ văn bản có thể hiển thị mô tả về hình ảnh bị thiếu. Trình đọc màn hình sử dụng thuộc tính
alt
để mô tả hình ảnh. -
Định dạng hình ảnh nào mang lại chất lượng hình ảnh tốt và giữ cho kích thước tệp nhỏ khi nó được sử dụng cho các bức ảnh có nhiều điểm mờ, màu sắc và mức màu?
Định dạng JPEG.
-
Thay vì sử dụng nhà cung cấp bên thứ ba như Youtube, thẻ HTML nào cho phép bạn nhúng tệp video vào tài liệu HTML chỉ bằng các tính năng HTML tiêu chuẩn?
Thẻ
<video>
.
Đáp án Bài tập Mở rộng
-
Giả sử rằng tài liệu HTML có siêu liên kết
<a href="pic1.jpeg">First picture</a>
và phần tử iframe<iframe name="gallery"></iframe>
. Làm cách nào để có thể sửa đổi thẻ siêu liên kết để hình ảnh mà thẻ trỏ tới sẽ tải bên trong phần tử iframe đã cho sau khi người dùng nhấp vào liên kết?Sử dụng thuộc tính
target
của thẻa
:<a href="pic1.jpeg" target="gallery">First picture</a>
. -
Điều gì sẽ xảy ra khi khách truy cập nhấp vào siêu liên kết trong tài liệu bên trong iframe và siêu liên kết có thuộc tính
target
được đặt thành_self
?Tài liệu sẽ được tải bên trong cùng một iframe, đây là hành vi mặc định.
-
Bạn nhận thấy rằng phần neo URL dành cho phần thứ hai của trang HTML không hoạt động. Nguyên nhân của lỗi này có thể là gì?
Mảnh URL sau dấu thăng không khớp với thuộc tính
id
trong phần tử tương ứng với phần thứ hai hoặc không có thuộc tínhid
của phần tử.