Bài 15: HTML và CSS từ Zero đến Hero

 

 

2.4       Hình ảnh

Khởi nguồn, nội dung trang web chỉ toàn là văn bản, nếu hiện tại trang web cũng chỉ có văn bản thôi thì sẽ rất tẻ nhạt.

Giờ sẽ học cách để đưa hình ảnh vào trang web. Có hai cách để làm việc này, một là chèn hình ảnh bằng phần tử img, hai là thiết lập ảnh nền (background). Tuy nhiên, vì việc thiết lập ảnh nền là công việc trang trí của CSS nên sẽ không tìm hiểu ở đây. Phần này chỉ tìm hiểu về cách chèn hình ảnh vào trang web bằng phần tử img. Khi đó, hình ảnh được xem như là nội dung của trang web, ví dụ hình ảnh của các sản phẩm, bộ sưu tập ảnh, các hình minh họa, các ảnh quảng cáo.

2.4.1       Các loại định dạng ảnh

Img là phần tử kiểu inline, nó chỉ cho phép chèn các hình ảnh có định dạng GIF, JPEG, PNG, với các tập tin hình ảnh có phần mở rộng tương ứng là .gif, .jpg (hoặc .jpeg), và .png.

Với các hình ảnh có định dạng khác như TIFF, BMP, SVG 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ì 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.

2.4.2       Phần tử img

Nhắc lại: 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 là “sẽ nạp 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 biên dịch 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ề trước khi 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 (thay thế), chứa văn bản sẽ được hiển thị thay thế cho hình ảnh, trong trường hợp trình duyệt không thể tải hoặc không hiển thị được hình ảnh.

– Img là phần tử rỗ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 biên dịch, 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ề, 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 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 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 để 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, 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 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 vậy 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, 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. 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), hoặc các thiết bị di động màn 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 image 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

– 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 ảnh trên giao diện

Có thể thiết lập sẵ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 biên dịch, trình duyệt sẽ dựa trên hai thuộc tính này để dành sẵn không gian cho hình ảnh. Nghĩa là kích thước của hình ảnh trên giao diện luôn là cố định. Cách làm này 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.

Tuy nhiên, hiện nay, ý tưởng về một giao diện cố định, với các hình ảnh có kích thước xác định là không khả thi. 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 (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; và thay đổi kích thước hình ảnh trên giao diện. Trong trường hợp này, việc sử dụng hai thuộc tính width và height để cố định kích thước ảnh trên giao diện là không nên.

Tóm lại, cần xem xét cẩn thận khi sử dụng hai thuộc tính width và height để trang web đạt được hiệu quả cao nhất.

Kích thước ảnh thật và giá trị width/height

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 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

Vì vậy, nên sử dụng các ứng dụng chỉnh sửa ảnh để thay đổi kích thước của ảnh thật cho khớp với với kích thước ảnh trên giao diện trang web.

Exercise 7-1. Adding and linking images (p138)

2.4.3       Thêm ảnh SVG vào trang web

Ảnh SVG (Scalable Vector Graphics) là ảnh có định dạng kiểu vector, định dạng này cho phép thay đổi kích thước ảnh (scale) mà vẫn giữ được chất lượng của ảnh. Định dạng này được sử dụng nhiều để hiển thị sơ đồ, bản đồ.

Ngoài ra, nhờ tính co dãn của ảnh, các lập trình viên sẽ đỡ vất vả trong việc phải chọn nhiều kích thước ảnh cho các màn hình có kích thước khác nhau (kỹ thuật responsive).

Tốc độ tải ảnh SVG nhanh hơn so với ảnh dạng bitmap, vì thực tế khi nhúng ảnh SVG vào trang web, bạn chỉ đưa ra các chỉ dẫn để vẽ ảnh chứ không phải ảnh thật.

Ảnh SVG cũng có dạng hoạt hình (animated), bạn cũng có thể định dạng ảnh bằng CSS và lập trình tương tác với ảnh bằng JavaScript.

Nhược điểm của ảnh SVG là tính tương thích với các trình duyệt chưa được rộng rãi, bị giới hạn về độ chi tiết và màu sắc.

Ví dụ sau sẽ thêm một ảnh SVG vào trang web, cú pháp gồm:

– Phần tử svg để định nghĩa một phần tử ảnh SVG, thuộc tính xmlns cho biết phần tử svg và các phần tử con của nó sẽ thuộc namespace nào.

– Phần tử rect (rectangle) là con của svg, để định nghĩa hình chữ nhật, được bo góc bằng hai thuộc tính (rx: x-radius, ry: y-radius)

– Phần tử text là con của svg, chứa nội dung văn bản, cùng với các thuộc tính định dạng văn bản

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">

          <rect width="200" height="60" fill="green" rx="20" ry="20" />

          <text x="10" y="40" fill="white" font-family="arial" font-size="42">

               bác Tèo

          </text>

     </svg>

Thêm ảnh SVG vào trang web

Vào Internet tải ảnh có phần mở rộng là svg, sử dụng phần tử img để chèn ảnh.

<img src="circle.svg" alt="">

Sau đó mở trình duyệt để xem hình kết quả, bạn thay đổi kích thước của màn hình để quan sát chất lượng của ảnh, nó sẽ không bị vỡ hình khi phóng to.

Vì định dạng ảnh SVG có nhiều khác biệt liên quan đến CSS và lập trình bằng JavaScript, nên bạn cần tìm hiểu kỹ hơn để sử dụng nó một cách hợp lý, hiệu quả.

Exercise 7-2. Adding an SVG to a page (p144)

2.4.4       Giao diện gồm nhiều cửa sổ - iframe

Phần tử iframe được sử dụng để nhúng các khung vào trang web, nội dung của khung có thể là một trang web khác hoặc một đối tượng bất kì (ví dụ hình ảnh, video).

Iframe là viết tắt của inline frame, là các khung nội tuyến, có thể đặt các khung này ở vị trí bất kì trong trang web.

Cú pháp của phần tử iframe tương tự như phần tử img, cũng gồm: thuộc tính src xác định địa chỉ nguồn của nội dung, width và height xác định chiều rộng và chiều cao của khung. Phần nội dung của phần tử iframe sẽ được hiển thị khi trình duyệt không hỗ trợ iframe. Lưu ý: nội dung của iframe tức là phần nằm giữa hai thẻ <iframe></iframe> chứ không phải nội dung do thuộc tính src trỏ tới.

Ví dụ dưới đây sẽ hiển thị trang danh-sach.html trong một khung của trang index.html,

[index.html]

<h1>Inline (floating) Frames</h1>

<iframe src="danh-sach.html" width="400" height="250">

Trình duyệt của bạn không hỗ trợ iframe. Xem nội dung của Danh sách tại đây <a href="danh-sach.html">Danh sách</a></iframe>

Iframe thường được sử dụng để nhúng nội dung từ nguồn bên ngoài, mà không làm ảnh hưởng nhiều đến phần nội dung còn lại của trang web, ví dụ các video, các trang quảng cáo.

Ví dụ để nhúng một clip từ youtube vào trang web, làm như sau: mở một clip trên youtube, để ý ở phía dưới của clip có nút SHARE, bấm vào nút SHARE để mở cửa sổ Share, bấm tiếp vào EMBED, để ý sẽ thấy toàn bộ đoạn mã của phần tử iframe, bấm COPY, dán đoạn mã này vào mã nguồn của một trang web mới, mở trang web mới để xem kết quả.