Hướng dẫn Chèn Ảnh bằng HTML

Tải ảnh lên internet. Có nhiều dịch vụ lưu trữ ảnh miễn phí như Picasa Web Albums, Imgur, Flickr hay Photobucket. Hãy đọc kỹ điều khoản sử dụng vì một số dịch vụ có thể làm giảm chất lượng ảnh hoặc gỡ ảnh xuống khi có quá nhiều lượt xem (do tiêu tốn băng thông máy chủ).

• Một số nền tảng blog cho phép bạn tải ảnh trực tiếp thông qua công cụ quản trị.
• Nếu bạn sử dụng máy chủ web trả phí, hãy tải ảnh lên thông qua dịch vụ FTP. Tạo thư mục "images" để quản lý tập tin một cách khoa học.
• Nếu muốn sử dụng ảnh từ website khác, hãy xin phép người sáng tạo. Sau khi được đồng ý, bạn có thể tải ảnh về và đăng tải lên dịch vụ lưu trữ ảnh của mình.

Mở tập tin HTML. Hãy mở tài liệu HTML nơi bạn muốn hiển thị ảnh trên trang web.

• Nếu bạn muốn chèn ảnh vào diễn đàn, bạn có thể nhập trực tiếp vào bài viết. Nhiều diễn đàn sử dụng hệ thống tùy chỉnh thay vì HTML. Nếu không rõ cách thực hiện, hãy tham khảo ý kiến từ các thành viên khác.

Bắt đầu với thẻ img. Xác định vị trí bạn muốn chèn ảnh trong đoạn HTML và nhập thẻ <img> tại đó. Đây là thẻ đơn, không cần thẻ đóng. Bạn chỉ cần chèn ảnh vào giữa các dấu ngoặc.

• <img>

Tìm URL của ảnh. Truy cập vào trang web lưu trữ ảnh. Nhấp chuột phải vào ảnh (hoặc nhấn Control + nhấp chuột trên Mac) và chọn "Sao chép địa chỉ ảnh". Bạn cũng có thể nhấp vào "Xem ảnh" để mở ảnh trên một trang riêng, sau đó sao chép URL từ thanh địa chỉ.

• Nếu bạn đã tải ảnh lên thư mục ảnh trên website của mình, hãy liên kết đến ảnh bằng đường dẫn /images/têntậptinảnh. Nếu không thành công, có thể thư mục ảnh đang nằm trong một thư mục khác. Hãy di chuyển nó về thư mục gốc.

Đặt URL vào thuộc tính src. Thuộc tính HTML nằm trong thẻ để điều chỉnh nó. Thuộc tính src (viết tắt của "source") giúp trình duyệt xác định vị trí của ảnh. Nhập src=" " và dán URL ảnh vào giữa dấu ngoặc kép. Ví dụ:

• <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">

Thêm thuộc tính alt. Mặc dù HTML đã đủ để hiển thị ảnh, nhưng việc thêm thuộc tính alt sẽ mang lại nhiều lợi ích. Thuộc tính này hiển thị văn bản thay thế nếu ảnh không tải được, đồng thời giúp công cụ tìm kiếm hiểu nội dung ảnh và hỗ trợ người dùng khiếm thị qua trình đọc màn hình. Hãy làm theo ví dụ sau, thay đổi văn bản trong dấu ngoặc kép:

• <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="cún của tôi đang ăn quýt">
• Nếu ảnh không quan trọng đối với nội dung trang, bạn có thể để thuộc tính alt trống (alt="").

Lưu thay đổi. Hãy lưu tập tin HTML và tải lên website. Truy cập trang vừa chỉnh sửa hoặc làm mới trang hiện có để xem ảnh xuất hiện. Nếu ảnh không hiển thị đúng kích thước hoặc bạn chưa hài lòng, hãy tham khảo phần tiếp theo để điều chỉnh.

Thay đổi kích thước ảnh. Để đạt kết quả tốt nhất, hãy chỉnh kích thước ảnh bằng phần mềm chỉnh sửa trước khi tải lên. Bạn cũng có thể điều chỉnh kích thước trực tiếp trong HTML bằng thuộc tính width (chiều rộng) và height (chiều cao). Lưu ý rằng việc này có thể gây ra sự không đồng nhất giữa các trình duyệt. Dưới đây là một số ví dụ:

• <img src="http://example.com/example.png" alt="display this" width=200 height=200> (đơn vị pixel hoặc "CSS pixels" trong HTML5.)
• Hoặc <img src="http://example.com/example.png" width=100% height=10%> (tỷ lệ phần trăm so với kích thước trang hoặc phần tử chứa ảnh.)
• Nếu chỉ nhập một thuộc tính, trình duyệt sẽ tự động điều chỉnh thuộc tính còn lại theo tỷ lệ gốc.

Thêm chú thích công cụ. Sử dụng thuộc tính title để thêm thông tin hoặc ghi chú cho ảnh, chẳng hạn như tên tác giả. Thông tin này thường hiển thị khi người dùng di chuột qua ảnh. Ví dụ:

• <img src="http://example.com/example.png" title="Ảnh chụp bởi J. Godfrey">

Tạo liên kết từ ảnh. Để biến ảnh thành một liên kết, hãy đặt thẻ <img> bên trong thẻ <a></a>. Ví dụ:

• <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>