T-web sẽ chỉ cho bạn cách sử dụng hình ảnh trong HTML và một số sai lầm phổ biến thường gặp phải. Bài viết này dành cho những người mới bắt đầu, cùng theo dõi nhé!
Thẻ HTML img
Để đặt hình ảnh vào trang của bạn, hãy sử dụng thẻ img . Thẻ này có dạng:
<img src="image-path" alt="alternative-text" />
Trong đó image-path là thư mục và tên tệp của hình ảnh của bạn và alternative-text là văn bản hiển thị nếu hình ảnh không thể hiển thị vì một số lý do.
Thuộc tính alt là bắt cần thiết với tất cả các hình ảnh. Tuy nhiên, có thể để trống (” “). Sử dụng alt nếu hình ảnh của bạn không có bất kỳ ý nghĩa nào – ví dụ: nếu hình ảnh được sử dụng để trình bày.
Biết những gì cần đặt cho image-path là một trong những trở ngại đầu tiên đối với người mới bắt đầu. Hãy xem một vài ví dụ để giải thích các đường dẫn và thư mục.
Giả sử trang web của bạn gọi là mypage.html và hình ảnh của bạn gọi là tree.gif. Trên máy chủ web hoặc ổ cứng của bạn, bạn có một thư mục trang web được gọi là website/.
Trường hợp 1: Hình và web đặt trong cùng một thư mục
Ví dụ dễ hiểu nhất là khi trang và hình ảnh của bạn nằm trong cùng một thư mục hoặc thư mục – ví dụ:
website/
mypage.html
tree.gifSau đó, để đưa hình ảnh vào Trang web, bạn cần chỉ định tên tệp “tree.gif”:
<img src="tree.gif" alt="Tree" />… và trình duyệt sẽ biết tìm trong cùng một thư mục với trang web tree.gif đồ họa.
Trường hợp 2: Hình ảnh trong thư mục con
Một tình huống phổ biến hơn là có hình ảnh trong thư mục bên dưới thư mục chứa trang Web. Điều này cho phép bạn nhóm tất cả đồ họa Web của mình trong một thư mục duy nhất (thường được gọi là hình ảnh) để quản lý chúng dễ dàng hơn:
website/
mypage.html
images/
tree.gifLần này, HTML để đưa hình ảnh vào trang Web của bạn trông như thế này:
<img src="images/tree.gif" alt="Tree" />Nói cách khác, lần này chúng ta phải yêu cầu trình duyệt tìm kiếm tree.gif trong thư mục con được gọi là images.
Trường hợp 3: Hình ảnh trong một thư mục khác
Điều gì sẽ xảy ra nếu tệp hình ảnh của bạn nằm trong một thư mục hoàn toàn khác với trang HTML của bạn? Ví dụ:
website/
mystuff/
mypage.html
images/
tree.gifTrong trường hợp này, HTML bao gồm hình ảnh sẽ giống như sau:
<img src="../images/tree.gif" alt="Tree" />Điều này hoạt động như thế nào? “..” yêu cầu trình duyệt truy cập một thư mục. Vì vậy, trình duyệt coi HTML này là: “Đi lên một thư mục (từ mystuff/ đến website/), sau đó vào images / thư mục và tìm tree.gif trong đó.”
Cách sử dụng thuộc tính width và height với thẻ Img
Bạn nên chỉ định chiều rộng và chiều cao của hình ảnh như một phần của img . Điều này giúp duy trì bố cục trang của bạn trong khi hình ảnh đang tải hoặc nếu người dùng đã tắt tính năng tải hình ảnh trong trình duyệt của họ.
Để chỉ định chiều rộng và chiều cao, hãy sử dụng HTML sau:
<img src="image-path" width="x" height="y" alt="alternative-text" />trong đó x là chiều rộng của hình ảnh tính bằng pixel và y là chiều cao của hình ảnh tính bằng pixel.
Nhưng làm thế nào để bạn tìm thấy chiều rộng và chiều cao của hình ảnh? Với hầu hết các trình duyệt, bạn có thể mở hình ảnh trong cửa sổ trình duyệt và nó sẽ cho bạn biết chiều rộng và chiều cao trong thanh tiêu đề ở đầu cửa sổ.
Trong Internet Explorer, bạn có thể nhấp chuột phải vào hình ảnh và chọn Properties. Bạn sẽ thấy chiều rộng và chiều cao bên cạnh “Dimensions” trong hộp kết quả.
Trong Photoshop, bạn có thể Alt + nhấp chuột (Windows) hoặc nhấp chuột Option (Mac) trên thanh trạng thái để tìm kích thước của hình ảnh hiện tại.
Ngoài ra, hầu hết các gói paint đi kèm với một tùy chọn để thay đổi kích thước của hình ảnh (thường được gọi là “Image Size” hoặc “Resize Image”). Các hộp thoại này sẽ hiển thị cho bạn kích thước và chiều rộng hình ảnh hiện tại.
Đường viền hình ảnh
Nếu bạn sử dụng hình ảnh của mình dưới link HTML hoặc nút, bạn có thể thấy một hình chữ nhật màu xung quanh hình ảnh. Đây là đường viền của hình ảnh và để chỉ ra rằng hình ảnh là một liên kết. Tuy nhiên, nó vô cùng xấu.
Bạn có thể tắt tính năng này bằng cách chỉ định nội dung sau trong thẻ HTML img :
<img src="image-path" width="x" height="y" alt="alternative-text" style="border: none;">
Điều này sẽ đảm bảo rằng đường viền không xuất hiện xung quanh hình ảnh.
Những lỗi thường gặp khi sử dụng hình ảnh trong HTML
1. Lấy sai đường dẫn hình ảnh
Nếu bạn nhìn thấy biểu tượng “không tìm thấy hình ảnh” (chữ thập đỏ hoặc biểu tượng hình ảnh bị hỏng) trên trang Web của bạn, rất có thể bạn đã chỉ định sai đường dẫn đến hình ảnh.
Hãy xem ba ví dụ ở trên và xem liệu bạn có thể tìm ra vấn đề nằm ở đâu hay không. Đừng quên bao gồm phần mở rộng tệp hình ảnh (chẳng hạn như .png hoặc .jpg) khi chỉ định đường dẫn.
2. Không tải hình ảnh lên
Thật ngạc nhiên khi các lập trình viên web dày dạn kinh nghiệm thường bị bắt gặp lỗi này! Đảm bảo rằng bạn đã tải hình ảnh của mình lên máy chủ Web và nó được tải lên đúng thư mục…
3. Sử dụng sai tên tệp hình ảnh
Đừng quên rằng hầu hết các máy chủ Web đều phân biệt chữ hoa, vì vậy nếu bạn chỉ định img src = “tree.jpg” và tệp bạn đã tải lên có tên “tree.JPG”, máy chủ sẽ không tìm thấy nó.
Bây giờ thì bạn đã biết cách làm việc với hình ảnh trong HTML rồi nhé!
Nguồn bài viết: elated.com
