Thứ ba, 15/09/2020 | 00:00 GMT+7

Cách thêm image vào trang web của bạn bằng HTML


Một phần của loạt bài: Cách xây dựng trang web bằng HTML

Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.

Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.

Trong hướng dẫn này, ta sẽ học cách sử dụng HTML để thêm hình ảnh trên trang web. Ta cũng sẽ tìm hiểu cách thêm văn bản thay thế vào hình ảnh để cải thiện khả năng tiếp cận cho khách truy cập trang web sử dụng trình đọc màn hình.

Thêm hình ảnh bằng HTML

Hình ảnh được thêm vào trang HTML bằng phần tử <img> . Phần tử <img> yêu cầu thuộc tính src cho phép bạn đặt vị trí của file nơi lưu trữ hình ảnh. Một phần tử hình ảnh được viết như thế này:

<img src="Image_Location"> 

Lưu ý phần tử <img> không sử dụng thẻ đóng </img> . Để thử sử dụng phần tử <img> , hãy download hình ảnh Sammy the Shark của ta và đặt nó vào folder dự án html-practice.

Lưu ý : Để download hình ảnh của Sammy the Shark, hãy truy cập liên kếtCTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) vào hình ảnh và chọn “Lưu hình ảnh dưới dạng” và lưu nó dưới dạng small-profile.jpeg to folder dự án của bạn.

Tiếp theo, xóa nội dung của index.html và dán <img src=”Image_Location”> vào file . (Nếu bạn chưa theo dõi loạt bài hướng dẫn, bạn có thể xem lại hướng dẫn cài đặt index.html trong hướng dẫn Cài đặt Dự án HTML của bạn của ta .

Sau đó, sao chép đường dẫn file của hình ảnh và thay thế Image_Location bằng vị trí của hình ảnh đã lưu của bạn. Nếu bạn đang sử dụng editor Visual Studio Code, bạn có thể sao chép đường dẫn file bằng cách sử dụng CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) trên file hình ảnh small-profile.jpeg trong console bên trái và chọn “Sao chép đường dẫn”. Để có minh họa về quy trình, vui lòng xem ảnh gif bên dưới:

Gif về cách sao chép đường dẫn file  hình ảnh

Lưu ý : Đảm bảo sao chép đường dẫn file tương đối hoặc file dự án của hình ảnh chứ không phải đường dẫn file tuyệt đối hoặc toàn bộ của hình ảnh. Đường dẫn tương đối đề cập đến vị trí file liên quan đến folder làm việc hiện tại (trái ngược với đường dẫn tuyệt đối , đề cập đến vị trí file liên quan đến folder root .) Trong khi cả hai đường dẫn sẽ hoạt động trong trường hợp này, chỉ đường dẫn tương đối mới hoạt động nếu ta quyết định xuất bản trang web của bạn trực tuyến. Vì mục tiêu cuối cùng của ta là tạo một trang web có thể xuất bản, ta sẽ bắt đầu sử dụng các đường dẫn tương đối ngay bây giờ khi thêm các phần tử <img> vào tài liệu của bạn .

Lưu index.html của bạn và reload trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:

Hình ảnh trong trình duyệt

Về mặt kỹ thuật, bạn cũng có thể sử dụng liên kết đến hình ảnh được lưu trữ trực tuyến dưới dạng đường dẫn file . Để hiểu cách hoạt động của điều này, hãy thử thay thế vị trí hình ảnh bằng một liên kết đến hình ảnh Sammy the Shark của ta như sau:

<img src="https://html.sammy-codes.com/images/small-profile.jpeg"> 

Lưu file của bạn và reload trong trình duyệt. Hình ảnh sẽ vẫn tải trong tài liệu web của bạn, nhưng lần này hình ảnh được lấy từ vị trí trực tuyến của nó chứ không phải folder dự án local của bạn. Bạn có thể thử nghiệm thêm các hình ảnh trực tuyến khác bằng cách sử dụng liên kết vị trí của chúng làm thuộc tính src trong <img> .

Tuy nhiên, khi xây dựng một trang web, tốt hơn là nên lưu trữ hình ảnh của bạn trong folder dự án của bạn đảm bảo tính bền vững của trang web. Nếu hình ảnh bị gỡ xuống bởi server của nó hoặc nếu địa chỉ của nó thay đổi, nó sẽ không hiển thị trên trang web nữa.

Văn bản thay thế cho khả năng tiếp cận

Khi thêm hình ảnh, bạn phải luôn bao gồm văn bản thay thế mô tả nội dung của hình ảnh đó bằng cách sử dụng thuộc tính alt . Văn bản này thường không được hiển thị trên trang web nhưng được trình đọc màn hình sử dụng để truyền đạt nội dung cho khách truy cập trang web khiếm thị.

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="Digital Ocean’s mascot, a blue smiling shark." > 

Khi thêm văn bản thay thế, hãy ghi nhớ các phương pháp hay nhất sau:

  • Đối với hình ảnh cung cấp thông tin , văn bản thay thế phải mô tả rõ ràng và ngắn gọn chủ đề của hình ảnh mà không đề cập đến chính hình ảnh đó. Ví dụ: không viết “Hình ảnh cá mập Sammy, linh vật của DigitalOcean” mà là “Sammy cá mập, linh vật của DigitalOcean”.

  • Đối với hình ảnh trang trí , thuộc tính alt vẫn nên được sử dụng nhưng với giá trị null, vì điều này cải thiện trải nghiệm trình đọc màn hình: <img src="images/decorative_image.jpeg" alt=""> .

  • Để có hướng dẫn hữu ích về việc xác định xem một hình ảnh là thông tin hay trang trí, hãy truy cập https://www.w3.org/WAI/tutorials/images/decision-tree/

Đến đây bạn đã quen với cách thêm hình ảnh vào trang HTML của bạn và cách thêm văn bản thay thế để hỗ trợ khả năng truy cập. Ta sẽ tìm hiểu cách thay đổi kích thước và kiểu hình ảnh trong hướng dẫn Cách Thêm Hình ảnh Tiểu sử vào Trang web của Bạn ở phần sau của loạt bài này. Trong hướng dẫn tiếp theo, ta sẽ tìm hiểu cách thêm liên kết vào trang HTML .


Tags:

Các tin liên quan

Cách tạo phần nội dung trang chủ của bạn bằng HTML
2020-09-15
Sử dụng ExpressJS để phân phối tệp HTML
2020-09-15
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách Căn giữa hoặc Căn chỉnh Văn bản và image trên Trang web của Bạn bằng HTML
2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách thêm HTML Thành phần cho trang web của bạn
2020-09-14
Cách tạo và liên kết đến các trang web bổ sung bằng HTML
2020-09-14
Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML
2020-09-14
Cách thiết lập dự án trang web HTML của bạn
2020-09-14