Học HTML – Bài 5: Thẻ chèn hình ảnh trong HTML

13675 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản tại Giuseart.com. Trong bài học này, mình sẽ hướng dẫn các bạn làm quen với thẻ hình ảnh, dùng để hiển thị hình ảnh lên website:

Cấu trúc thẻ hình ảnh trong HTML

Cấu trúc thẻ hình ảnh là:

<img src=”đường_dẫn_tấm_hình” />

Lưu ý: Thẻ <img> không có thẻ kết thúc!

Đường dẫn tấm hình được chia thành 2 loại: đường dẫn tương đốiđường dẫn tuyệt đối.

Đường dẫn tuyệt đối

Đường dẫn tuyệt đối của hình ảnh nghĩa là đường dẫn này sẽ không thay đổi.

Lấy đường dẫn tuyệt đối bằng cách copy ở thanh URL của trình duyệt web.

Ví dụ: Ở hình ảnh dưới, bạn muốn lấy link của ảnh sản phẩm 1, nhấn chuột phải vào hình ảnh và Mở hình ảnh trong tab mới.

Nhấn chuột phải vào hình ảnh muốn lấy link, xem ở tab mới và copy địa chỉ từ thanh URL của trình duyệt
Nhấn chuột phải vào hình ảnh muốn lấy link, xem ở tab mới và copy địa chỉ từ thanh URL của trình duyệt

Sau đó, bạn copy địa chỉ hình ảnh ở thanh URL của trình duyệt, địa chỉ đó gọi là địa chỉ tuyệt đối.

Copy địa chỉ hình ảnh trên thanh URL của trình duyệt
Copy địa chỉ hình ảnh trên thanh URL của trình duyệt

Ví dụ về thẻ chèn hình ảnh trong file html:

và kết quả là:

thẻ chèn hình ảnh trong html
Thẻ chèn hình ảnh trong html

Đường dẫn tương đối

Đường dẫn tương đối nghĩa là đường dẫn có thể thay đổi, và loại đường dẫn này không có sẵn để copy mà chúng ta phải viết ra. Cách viết đường dẫn tương đối phụ thuộc vào vị trí của hình ảnh và file .html chứa thẻ hình ảnh mà chúng ta đang làm việc.

Trường hợp 1: File .html và hình ảnh nằm cùng một folder

Trong trường hợp này, để file .html hiển thị được hình ảnh lên website, chúng ta dùng cấu trúc:

<img src=”tên_hình_ảnh”/>

Qua đó, ta biết được rằng, nếu file hình ảnh và file .html nằm trong cùng một thư mục, phần đường dẫn của hình ảnh bạn chỉ cần nhập đúng tên của hình ảnh đó là nó sẽ hiển thị được.

Đường dẫn tương đối của hình ảnh
File hình ảnh Nobita.png và file Bai 5.html nằm chung một folder

Ví dụ về thẻ chèn hình ảnh sử dụng đường dẫn tương đối 1:

và kết quả là:

Thẻ chèn hình ảnh sử dụng đường dẫn tương đối
Thẻ chèn hình ảnh sử dụng đường dẫn tương đối

Trường hợp 2: File hình ảnh nằm trong folder cùng cấp với file .html

Để hình ảnh nằm bên trong một thư mục images cùng cấp với file .html, chúng ta phải viết đường dẫn sao cho file .html đi được vào thư mục chứa images đó rồi viết tên chính xác của hình ảnh theo cấu trúc:

<img src=”tên_thư_mục/tên_hình_ảnh” />

Thẻ chèn hình ảnh sử dụng đường dẫn tương đối 2
Hình ảnh cần hiển thị nằm trong thư mục Images cùng cấp với file .html

Ví dụ về thẻ chèn hình ảnh sử dụng đường dẫn tương đối 2:

Trường hợp 3: File .html nằm trong một thư mục cùng cấp với file hình ảnh

Trong trường hợp file .html nằm trong một thư mục cùng cấp với file hình ảnh, để file .html hiển thị được hình ảnh, chúng ta phải viết cấu trúc đường dẫn sao cho từ file .html phải back ra khỏi thư mục mẹ của nó rồi mới viết tên chính xác của hình ảnh được hiển thị.

Thẻ chèn hình ảnh sử dụng đường dẫn tương đối 3
Thẻ chèn hình ảnh sử dụng đường dẫn tương đối 3

Cấu trúc thẻ chèn hình ảnh sử dụng đường dẫn tương đối trường hợp này là:

<img src=”../tên_hình_ảnh”

Qua đó, chúng ta sử dụng hai chấm và gạch chéo ../ để back file .html ra ngoài thư mục chứa nó. Trong trường hợp này, chúng ta có ví dụ cụ thể về thẻ chèn hình ảnh như sau:

Trường hợp 4: File .html và file hình ảnh nằm trong 2 thư mục cùng cấp khác nhau

Trong trường hợp file .html và file hình ảnh nằm riêng biệt trong 2 thư mục cùng cấp khác nhau, để file .html hiển thị được hình ảnh, chúng ta phải viết đường dẫn sao cho file .html back ra ngoài thư mục mẹ của nó rồi truy cập vào thư mục chứa hình ảnh để lấy tên hình ảnh cần hiển thị.

Thẻ chèn hình ảnh sử dụng đường dẫn tương đối 4
Thẻ chèn hình ảnh sử dụng đường dẫn tương đối 4

Cấu trúc thẻ chèn hình ảnh sử dụng đường dẫn tương đối trong trường hợp này như sau:

<img src=”../tên_thư_mục_chứa_hình_ảnh/tên_hình_ảnh”/>

Qua đó, chúng ta nhận thấy, để file .html hiển thị đường hình ảnh, trong phần đường dẫn, chúng ta sử dụng dấu hai chấm và gạch chéo để back file .html ra khỏi thư mục mẹ của nó, sau đó nhập tên thư mục chứa hình ảnh rồi nhập tên của hình ảnh. Ví vụ cụ thể về thẻ chèn hình ảnh trong trường hợp này như sau:

Resize hình ảnh trong HTML

Như vậy, mình đã hướng dẫn xong các cách chèn hình ảnh trong file HTML sử dụng đường dẫn tuyệt đối và đường dẫn tương đối. Ngay sau đây, mình sẽ hướng dẫn cách sử dụng các thuộc tính để resize tấm hình trong HTML:

Để có thể resize tấm hình trong HTML, chúng ta sử dụng 2 thuộc tính width height (đơn vị: pixel) với cấu trúc sau:

<img src=”đường_dẫn_hình_ảnh” width=”giá_trị” height=”giá trị”/>

Ví dụ về resize hình ảnh trong HTML:

và kết quả là:

resize hình ảnh trong html
Tấm hình sau khi được resize không còn đúng kích thước và tỷ lệ như ban đầu nữa

Căn chỉnh hình ảnh

Chúng ta sử dụng thuộc tính align để định vị vị trí xuất hiện của hình ảnh so với đoạn văn bản một cách tương đối (left, right, center…), ví dụ:

thuộc tính căn chỉnh hình ảnh trong html
Ví dụ về việc căn chỉnh hình ảnh ở lề trái của đoạn văn

Cấu trúc của thuộc tính căn chỉnh hình ảnh như sau:

<img src=”đường_dẫn_hình_ảnh” align=”giá_trị”/>

Trong đó, các giá trị sử dụng cho thuộc tính align có thể sử dụng left (căn trái), right (căn phải), center (căn giữa)…

Lời kết

Như vậy là chúng ta đã hoàn thành bài học về thẻ chèn hình ảnh trong HTML. Tổng kết bài học chúng ta đã biết cách chèn hình ảnh vào file html sử dụng đường dẫn tuyệt đối và đường dẫn tương đối. Bên cạnh đó, chúng ta cũng đã biết sử dụng 2 thuộc tính width và height để resize hình ảnh. Chúc các bạn học tập tốt. Hẹn gặp lại trong bài học kế tiếp

Bài trước: Bài 4: Định dạng văn bản và chữ viết trong HTML

Bài tiếp: Bài 6: Thẻ chèn liên kết trong HTML

4.5/5 - (4 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết mới cập nhật:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận