Bài trước: Web front-end (12) - HTML - Liên kết trang web_3
-----
1.1
Hình ảnh
Khi mới xuất hiện (năm 1991), nội dung trang web chỉ toàn là
văn bản. Bạn thử tưởng tượng, nếu trang web hiện tại cũng chỉ toàn văn bản, thì
sẽ tẻ nhạt tới mức nào!
Trong phần này, chúng ta sẽ học cách để thêm hình ảnh cho
trang web. Để thêm hình ảnh, bạn có 2 cách. Một là, bạn xem nó như là nội dung
thông thường và sẽ dùng phần tử img để thêm. Hai là, bạn có thể chèn hình ảnh
theo kiểu hình nền (background), cách này sẽ học ở phần CSS.
Trong trang web, hình ảnh được dùng để hiển thị các ảnh của sản
phẩm, bộ sưu tập ảnh, các hình minh họa, các ảnh quảng cáo.
1.1.1
Phần tử img
Để chèn hình ảnh, cách đơn giản nhất là sử dụng phần tử img.
Img là viết tắt của image (hình ảnh).
Chúng ta không thể thêm mọi loại ảnh cho trang web, mà chỉ
thêm được các loại mà trình duyệt có hỗ trợ. Với các loại ảnh phổ biến như GIF,
JPEG, PNG (tập tin ảnh có phần mở rộng tương ứng là .gif, .jpg (hoặc .jpeg),
và .png) thì bạn có thể yên tâm sử dụng.
Các định dạng WebP (.webp) và JPEG-XR (.jxr) cũng đang được các trình duyệt hỗ
trợ ngày càng nhiều.
SVG là định dạng ảnh kiểu vector, nó được dùng để hiển thị
các biểu tượng (icon) hoặc hình minh họa (illustration). Trong phần sau, chúng
ta sẽ tìm hiểu kĩ hơn về nó.
Với các hình ảnh có định dạng khác, như TIFF, BMP hoặc EPS
thì cần chuyển về định dạng mà trình duyệt chấp nhận. Nếu buộc phải giữ hình ảnh
ở định dạng gốc, thì chúng ta sẽ tạo một liên kết trực tiếp tới hình ảnh, khi
đó, trình duyệt sẽ gọi chương trình phù hợp để mở, hoặc sẽ yêu cầu người dùng tải
hình ảnh về máy. Ví dụ, <a
href="architecture.eps">Get the drawing</a>.
Nhắc lại một chút, tập tin mã nguồn của trang web (hay tài
liệu HTML) chỉ là văn bản thô (plain text), nên nó không thể chứa hình ảnh. Chức
năng của phần tử img chỉ là báo cho
trình duyệt biết: “sẽ tải và hiển thị hình ảnh ở đây”.
Ví dụ sau sẽ chèn một hình ảnh nằm cùng hàng với văn bản,
<p>Đây là chú vịt trống và vịt mái, mà người ta hay gọi là
đôi uyên-ương <img src="con-vit.png" alt="hai chú
vịt"></p>
Khi trình duyệt dịch mã nguồn tới phần tử img, nó sẽ gửi một yêu cầu (request) tới
server để tải hình ảnh về, sau đó sẽ hiển thị. Cần lưu ý đặc điểm này, vì nó ảnh
hưởng rất nhiều đến tốc độ tải và hiển thị nội dung của cả trang web. Cụ thể là
cần để ý đến số lượng, kích thước và thời điểm tải các hình ảnh của trang web về
trình duyệt.
Một số ý quan trọng liên quan đến phần tử img:
– Hai thuộc tính src
và alt là bắt buộc phải có
(required). Src là viết tắt của
source (nguồn), cho biết vị trí của tập tin hình ảnh; alt là viết tắt của alternative (lựa chọn thay thế), chứa văn bản mô
tả cho hình ảnh.
– Img là phần tử rỗng,
chỉ có thẻ mở mà không có thẻ đóng. Muốn hiển thị hình ảnh ở chỗ nào thì đặt phần
tử img ở đó
– Img là phần tử
inline, vì vậy hình ảnh sẽ được đặt trên cùng hàng với văn bản. Khi thay đổi
kích thước màn hình giao diện, hình ảnh cùng với văn bản cũng sẽ bị sắp xếp lại
cho hợp với kích thước cửa sổ.
– Img được gọi là
phần tử bị thay thế (replaced element), nghĩa là khi trình duyệt dịch mã nguồn
và thực thi, phần tử này sẽ bị thay thế bằng một tập tin ảnh được tải từ nơi
khác về. Điều này khác với các phần tử văn bản, là các phần tử không bị thay thế
(non-replaced element)
– Mặc định, khi hiển thị, cạnh dưới của hình ảnh sẽ nằm trên
đường cơ sở (baseline) của hàng văn bản. Để điều chỉnh cách hiển thị hình ảnh, chúng
ta cần sử dụng đến CSS.
Thuộc tính src
Giá trị của thuộc tính src
chính là URL (địa chỉ) của tập tin hình ảnh. Đa số các hình ảnh của trang web
được lưu tại server. Vì vậy, chúng ta sẽ sử dụng URL tương đối để trỏ tới vị
trí của hình ảnh. Xem lại phần Liên kết trang web, để rõ hơn về cách sử dụng
URL tương đối.
Ví dụ, nếu tập tin hình ảnh ở cùng thư mục với tài liệu HTML,
thì thuộc tính src sẽ có dạng như
sau:
<img src="hinh-anh.png" alt="hình ảnh">
Thông thường, hình ảnh của một website sẽ được để trong một
thư mục, ví dụ là images, assets, hoặc
graphics. Tùy theo độ lớn của
website, có thể có nhiều thư mục để chứa hình ảnh tương ứng với mỗi thành phần/chức
năng của website. Khi đó, để trỏ tới vị trí của hình ảnh cần sử dụng đến đường
dẫn tập tin (pathname). Ví dụ,
<img src="/images/hinh-anh.png" alt="hình ảnh">
Nếu hình ảnh nằm ở website khác, chúng ta cần sử dụng đường
dẫn tuyệt đối để trỏ tới tập tin hình ảnh (phải đảm bảo là có quyền truy cập
hình ảnh). Ví dụ,
<img src="http://www.vidu.com/images/hinh-anh.png"
alt="hình ảnh">
|
Tận dụng cơ chế cache (lưu sẵn) để tăng tốc
độ hiển thị hình ảnh |
|
Trình duyệt có cơ chế
cache các hình ảnh. Cụ thể, khi trình duyệt tải một hình ảnh từ server về máy
người dùng, nó sẽ lưu tạm hình ảnh đó vào đĩa cứng. Mục đích là để sau đó nếu
người dùng mở lại trang web, thì các hình ảnh sẽ được lấy từ đĩa cứng, thay
vì phải tải lại từ server. Như vậy, nếu cùng một
hình ảnh mà được sử dụng ở nhiều nơi trên trang web/website thì chỉ cần tải
hình ảnh về một lần. Các lần hiển thị sau, trình duyệt sẽ lấy hình ảnh đó từ
đĩa cứng. Kết quả là, tốc độ hiển thị hình ảnh sẽ nhanh hơn và giảm được lưu
lượng truyền dữ liệu giữa máy người dùng và server. Lưu ý, trình duyệt sẽ
nhận diện một hình ảnh dựa vào tên và đường dẫn tập tin. Do đó, hai hình ảnh
được hiểu là một, khi chúng có tên và đường dẫn giống nhau. Vì vậy, trong một
website, bạn không nên để cùng một hình ảnh ở nhiều thư mục khác nhau. |
Thuộc tính alt
Alt là thuộc tính
bắt buộc phải có trong phần tử img. Alt
là viết tắt của Alternative, có nghĩa là "lựa chọn thay thế". Đầy đủ
thì sẽ là “alternative text” (văn bản thay thế). Nó chứa thông tin mô tả vắn tắt
của hình ảnh. Thông thường, các đối tượng không thấy được hình ảnh sẽ sử dụng
thông tin này, ví dụ người dùng khiếm thị, chương trình đọc màn hình (screen
reader), các thiết bị di động màn hình nhỏ, hoặc khi trình duyệt không tìm thấy
hình ảnh.
Ví dụ, từ đoạn mã HTML sau,
<p>If you're <img src="happyface.gif"
alt="happy"> and you
know it clap
your hands.</p>
Chương trình đọc màn hình sẽ nhận diện ra hình ảnh bằng thuộc
tính alt như sau:
“If you’re happy and you know it clap your hands.”
Một số tình huống sử dụng thuộc tính alt,
– Nếu hình ảnh chứa thông tin, thì giá trị của alt sẽ là mô tả ngắn gọn thông tin đó.
– Nếu hình ảnh nằm trong phần tử a, thì giá trị của alt sẽ
cho biết liên kết (link) này sẽ dẫn tới đâu. Ví dụ: bạn tạo một liên kết cho
hình ảnh, là hình bìa của cuốn sách; tuy nhiên, liên kết này muốn dẫn người
dùng tới một website; khi đó, nội dung của alt sẽ chứa thông tin về website chứ
không phải mô tả cái bìa sách.
<a
href="http://learningwebdesign.com"><img
src="/images/LWD_cover.png"
alt="Learning Web
Design site"></a>
– Nếu chỉ là hình ảnh trang trí/logo, thì giá trị của alt nên để trống (alt=“”), mặc dù alt mang
giá trị trống, nhưng vẫn phải có, vì nếu không, đoạn mã sẽ bị chương trình
validator báo lỗi.
Thuộc tính alt
cũng rất hữu ích trong trường hợp hình ảnh không thể hiển thị trên giao diện,
nhờ có nội dung của alt mà người sử dụng
biết được hình ảnh đang bị thiếu là gì.
Ví dụ,
<img src="con-vit.jpg" alt="con vịt">
[Kết quả]
Nếu trình duyệt không thể hiển thị con-vit.jpg, thì trên cửa sổ
giao diện sẽ có dòng chữ “con vịt” thay thế.
Đơn vị đo kích thước ảnh
Đơn vị để đo kích thước ảnh có thể là px hoặc phần trăm (%). Với HTML5 thì đơn vị để đo kích thước bắt buộc
là px. px là viết tắt của pixel, pixel là viết tắt của picture element (phần
tử ảnh).
Ví dụ,
<img src="/images/hinh-anh.jpg" alt="Hình
ảnh" width="100" height="150">
[Kết quả]
Hình ảnh sẽ được hiển thị ở kích thước 100 x150 pixel.
Thiết lập sẵn kích
thước cho ảnh
Chúng ta có thể cố định luôn kích thước của hình ảnh trên
giao diện, bằng hai thuộc tính là width
(chiều rộng) và height (chiều cao).
Khi tải trang web về máy, trình duyệt sẽ dựa trên kích thước này để dành sẵn khoảng
trống cho hình ảnh, chứ không phải tổ chức lại trang mỗi khi tải xong một hình ảnh.
Theo cách này, kích thước của hình ảnh trên giao diện luôn là cố định. Nó giúp
tăng đáng kể tốc độ hiển thị trang web, vì bố cục của trang web đã được định
hình sẵn, không phải điều chỉnh lại trong quá trình tải và hiển thị nội dung. Nếu
bạn chỉ cung cấp một trong hai kích thước (chiều rộng, hoặc chiều cao), hệ thống
sẽ tự động tính kích thước còn lại, sao cho hình ảnh được cân đối.
Tuy nhiên, hiện nay, hai thuộc tính này không còn nhiều hữu
ích nữa. Với xu hướng sử dụng nhiều loại thiết bị, có kích thước màn hình khác
nhau để duyệt web, dẫn tới cần phải có một giao diện linh hoạt, có thể tùy chỉnh
theo kích thước màn hình (kĩ thuật này gọi là responsive). Cụ thể, với mỗi hình
ảnh, người ta sẽ chuẩn bị sẵn các kích thước khác nhau, với màn hình nhỏ sẽ sử
dụng hình ảnh kích thước nhỏ; với màn hình lớn sẽ sử dụng hình ảnh có kích thước
lớn. Ngoài ra, chúng ta cũng sẽ sử dụng CSS để thay đổi kích thước hình ảnh.
Hai thuộc tính này chỉ hữu ích với các hình ảnh mà kích thước
luôn cố định trên mọi loại thiết bị như là logo hoặc các biểu tượng. Chúng ta
cũng phải để ý khi thiết lập giá trị cho width và height, để đảm bảo: kích thước
ảnh thật và giá trị width/height phải
bằng nhau, nghĩa là chiều rộng của ảnh thật sẽ bằng giá trị của width, và chiều cao của ảnh thật sẽ bằng
giá trị của height. Nếu không:
– Nếu kích thước ảnh thật nhỏ hơn giá trị width/height, hình ảnh sẽ bị mờ, méo mó.
– Nếu kích thước ảnh thật lớn hơn giá trị width/height, trình duyệt sẽ mất nhiều
thời gian hơn để tải hình ảnh từ server
Bạn có thể sử dụng các ứng dụng chỉnh sửa ảnh, để thay đổi
kích thước của hình ảnh cho khớp với với kích thước đã được thiết lập trên giao
diện.
Thêm chú thích cho ảnh
Trong một bài viết, đôi khi chúng ta cần phải chèn thêm các hình
ảnh minh họa. Đi kèm mỗi hình ảnh là thông tin chú thích. Để làm việc này, bạn
sẽ sử dụng phần tử figure, bên trong nó là 2 phần tử img và figcaption. Ví dụ:
<figure>
<img src="HTML-structure.png"
alt="HTML document structure">
<figcaption>
Cấu
trúc một tài liệu HTML
</figcaption>
</figure>
-----
-----