Thẻ chèn hình ảnh trong HTML

Công thức nhỏ: Để tìm kiếm đúng đắn các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: “Từ khóa” + “giuseart”. (Chẳng hạn: thiệp tân linh mục giuseart).

Để tìm kiếm đúng đắn các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: “Từ khóa” + “giuseart”. (Chẳng hạn: 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ăn bản tại Giuseart.com. Trong bài học này, mình sẽ chỉ 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 trang web:

Kết cấu thẻ hình ảnh trong HTML

Kết cấu thẻ hình ảnh là:

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

Chú ý: Thẻ <imgvàgt; không có thẻ chấm dứt!

Đườ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 bao giờ thay đổi.

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

Chẳng hạn: Ở hình ảnh dưới, bạn mong muốn lấy backlinks của ảnh sản phẩm 1, Nhấp chuột phải vào hình ảnh & Mở hình ảnh trong tab mới.

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

Chẳng hạn về thẻ chèn hình ảnh trong file html:

1

<

img

src

=

“http://vn-live-02.slatic.net/p/2/apple-iphone-7-32gb-den-nham-hang-nhap-khau-2558-9078572-354576c2f7c80424a1a69c43c8259b5b-webp-zoom.jpg”

/

>

& kết quả là:

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

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

Xem Thêm  [Update] Tìm kiếm link Fshare nhanh chóng, chính xác | cach cong diem dw

Trường hợp 1: File .html & 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 trang web, tất cả chúng ta dùng cấu tạo:

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

Qua đó, ta hiểu rằng rằng, nếu file hình ảnh & 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 này là nó sẽ hiển thị được.

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

1

<

img

src

=

“nobita.png”

/

>

& kết quả là:

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, tất cả 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 đúng đắn của hình ảnh theo cấu tạo:

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

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

1

<

img

src

=

“images/nobita.org”

/

>

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, tất cả chúng ta phải viết cấu tạo đườ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 đúng đắn của hình ảnh được hiển thị.

Xem Thêm  removed

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

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

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

1

<

img

src

=

“../nobita.png”

/

>

Trường hợp 4: File .html & 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 & file hình ảnh nằm biệt lập trong 2 thư mục cùng cấp khác nhau, để file .html hiển thị được hình ảnh, tất cả 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ị.

Kết cấu 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 đó, tất cả chúng ta nhận biết, để file .html hiển thị đường hình ảnh, trong phần đường dẫn, tất cả chúng ta sử dụng dấu hai chấm & 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ụ rõ ràng và cụ thể về thẻ chèn hình ảnh trong trường hợp này như sau:

1

<

img

src

=

“../images/nobita.png”

/

>

Resize hình ảnh trong HTML

Như thế, mình đã chỉ dẫn xong các cách chèn hình ảnh trong file HTML sử dụng đường dẫn tuyệt đối & đường dẫn tương đối. Ngay sau đây, mình sẽ chỉ dẫn cách dùng các tính chất để resize tấm hình trong HTML:

Xem Thêm  (sx+sw

Để có thể resize tấm hình trong HTML, tất cả chúng ta sử dụng 2 tính chất width & height (nhà cung cấp: pixel) với cấu tạo sau:

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

Chẳng hạn về resize hình ảnh trong HTML:

1

<

img

src

=

“../images/nobita.png”

width

=

“300px”

height

=

“30px”

/

>

Cân chỉnh hình ảnh

& kết quả là:

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

Kết cấu của tính chất cân chỉnh hình ảnh như sau:

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

Trong số đó, các giá trị sử dụng cho tính chất 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ư thế là tất cả chúng ta đã giải quyết bài học về thẻ chèn hình ảnh trong HTML. Kết luận bài học tất cả chúng ta đã hiểu phương pháp chèn hình ảnh vào file html sử dụng đường dẫn tuyệt đối & đường dẫn tương đối. Tuy nhiên, tất cả chúng ta cũng từng biết sử dụng 2 tính chất width & height để resize hình ảnh. Chúc các bạn học hành tốt. Hẹn tái ngộ trong bài học tiếp theo

Bài trước: Bài 4: Định dạng chữ & chữ viết trong HTML

Bài tiếp: Bài 6: Thẻ chèn link trong HTML

5

/

5

(

2

bầu chọn

)

Viết một bình luận