Cách Chèn Hình ảnh Vào Trang Web HTML

Trang chủ » Chèn Html » Cách Chèn Hình ảnh Vào Trang Web HTML

Có thể bạn quan tâm

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
HTML Bài 16: Cách chèn hình ảnh vào trang web Hướng dẫn cách chèn hình ảnh vào trang web
hướng dẫn cách chèn hình ảnh vào trang web

1) Cách chèn hình ảnh vào trang web

- Để chèn một tấm hình vào bên trong trang web thì chúng ta thêm thẻ <img> nằm ở ngay vị trí mà mình muốn hình ảnh được hiển thị, cú pháp như sau:

<img src="đường dẫn đến tập tin hình ảnh">

- Lưu ý: Đường dẫn đến tập tin hình ảnh có thể được xác định dựa theo đường dẫn tương đối hoặc đường dẫn tuyệt đối (các bạn có thể tham khảo lại cách xác định hai loại đường dẫn này trong bài Liên kết)

Ví dụ: <!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <meta charset="utf-8"> </head> <body> <h2>- Bên dưới là một tấm hình:</h2> <img src="http://webcoban.vn/image/cat-2.jpg"> </body> </html> Xem ví dụ

2) Thiết lập kích thước hiển thị của hình ảnh

cách chèn hình ảnh vào trang web

- Khi chúng ta chèn một tấm hình vào bên trong trang web thì mặc định tấm hình sẽ được hiển thị với kích thước bằng kích thước gốc của nó.

- Ví dụ: Tôi có một tấm hình với kích thước chiều rộng là 300 pixel và chiều cao là 320 pixel, tôi chèn tấm hình đó vào bên trong trang web (hình bên trái)

❏ Thì cũng như các bạn đã thấy, tấm hình sẽ được hiển thị đúng với kích thước gốc của nó (300 x 320)

- Nếu muốn thiết lập lại kích thước hiển thị của tấm hình trên trang web thì chúng ta cần phải sử dụng thuộc tính width và thuộc tính height

2.1) Thuộc tính width

- Thuộc tính width dùng để thiết lập chiều rộng của tấm hình.

- Để sử dụng thuộc tính width thì chúng ta thêm nó vào bên trong thẻ <img> với cú pháp như sau:

width="value"

- Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:

px

- Chiều rộng của tấm hình sẽ được xác định dựa theo một giá trị pixel cụ thể.

- Ví dụ, nếu tôi viết width="400" thì điều đó có nghĩa là tấm hình sẽ được hiển thị với kích thước chiều rộng là 400 pixel (Xem ví dụ)
%

- Chiều rộng của tấm hình sẽ được xác định dựa theo tỷ lệ phần trăm "chiều rộng phần nội dung" của phần tử cha của nó.

- Ví dụ, nếu phần tử cha của tấm hình có chiều rộng 500 pixel, tôi viết width="40%" thì điều đó có nghĩa là tấm hình sẽ được hiển thị với kích thước chiều rộng là 200 pixel (Xem ví dụ)

- Lưu ý: Nếu chúng ta chỉ sử dụng thuộc tính width để thiết lập chiều rộng cho tấm hình mà không sử dụng thuộc tính height để thiết lập lại chiều cao cho tấm hình thì mặc định chiều cao của tấm hình sẽ tự động tăng hoặc giảm để giữ tỷ lệ so với chiều rộng của tấm hình (Ví dụ như tôi có một tấm hình với kích thước gốc là 200x500, nếu tôi chỉ sử dụng duy nhất mỗi một thuộc tính width để thiết lập lại chiều rộng cho tấm hình là 100 pixel thì khi hiển thị, tấm hình sẽ có chiều cao là 250 pixel)

2.2) Thuộc tính height

- Thuộc tính height dùng để thiết lập chiều cao của tấm hình.

- Để sử dụng thuộc tính height thì chúng ta thêm nó vào bên trong thẻ <img> với cú pháp như sau:

height="value"

- Trong đó, value có thể được xác định dựa theo một trong hai loại đơn vị:

px

- Chiều cao của tấm hình sẽ được xác định dựa theo một giá trị pixel cụ thể.

- Ví dụ, nếu tôi viết height="400" thì điều đó có nghĩa là tấm hình sẽ được hiển thị với kích thước chiều cao là 400 pixel (Xem ví dụ)
%

- Chiều cao của tấm hình sẽ được xác định dựa theo tỷ lệ phần trăm "chiều cao phần nội dung" của phần tử cha của nó.

- Ví dụ, nếu phần tử cha của tấm hình có chiều cao 400 pixel, tôi viết height="60%" thì điều đó có nghĩa là tấm hình sẽ được hiển thị với kích thước chiều cao là 240 pixel (Xem ví dụ)

- Lưu ý: Nếu chúng ta chỉ sử dụng thuộc tính height để thiết lập chiều cao cho tấm hình mà không sử dụng thuộc tính width để thiết lập lại chiều rộng cho tấm hình thì mặc định chiều rộng của tấm hình sẽ tự động tăng hoặc giảm để giữ tỷ lệ so với chiều cao của tấm hình (Ví dụ như tôi có một tấm hình với kích thước gốc là 200x500, nếu tôi chỉ sử dụng duy nhất mỗi một thuộc tính height để thiết lập lại chiều cao cho tấm hình là 300 pixel thì khi hiển thị, tấm hình sẽ có chiều rộng là 120 pixel)

3) Thiết lập vị trí của hình ảnh so với văn bản

- Trong trang web, việc thiết lập vị trí của hình ảnh so với văn bản nằm ở xung quanh cũng đóng một vai trò tương đối quan trọng (bởi vì nó mang tính chất thẩm mỹ cho trang web)

- Để thiết lập vị trí của tấm hình so với văn bản nằm ở xung quanh thì chúng ta thêm thuộc tính align vào bên trong thẻ <img> với cú pháp như sau:

align="value"

- Trong đó, value có thể được xác định dựa theo một trong năm loại giá trị:

left

- Tấm hình được đẩy sang bên trái, phần văn bản (được khai báo phía sau nó) sẽ nằm bên phải & bao xung quanh tấm hình.

 Xem ví dụ
right

- Tấm hình được đẩy sang bên phải, phần văn bản (được khai báo phía sau nó) sẽ nằm bên trái & bao xung quanh tấm hình.
top

- Dòng đầu tiên của phần văn bản (được khai báo phía sau tấm hình) sẽ nằm ở vị trí cao nhất so với tấm hình.
middle

- Dòng đầu tiên của phần văn bản (được khai báo phía sau tấm hình) sẽ nằm ở vị trí trung bình (giữa) so với tấm hình.
bottom

- Dòng đầu tiên của phần văn bản (được khai báo phía sau tấm hình) sẽ nằm ở vị trí thấp nhất so với tấm hình.

4) Một số thuộc tính khác

- Dưới đây là một số thuộc tính khác thường được sử dụng bên trong thẻ <img>

alt

- Thuộc tính này dùng để xác định một "đoạn văn bản" sẽ được hiển thị thay thế cho hình ảnh trong trường hợp hình ảnh gặp phải sự cố khi hiển thị (sự cố có thể xuất phát từ việc đường dẫn đến tập tin hình ảnh không chính xác, hoặc do tải chậm, . . . .)

 Xem ví dụ
border

- Thuộc tính này dùng để xác định độ dày của cái đường viền bao xung quanh tấm hình (nếu chúng ta không thiết lập thuộc tính này cho phần tử <img> thì mặc định tấm hình sẽ không có đường viền)

 Xem ví dụ
title

- Thuộc tính này dùng để thiết lập một "đoạn văn bản" sẽ được hiển thị nổi lên khi người dùng di chuyển con trỏ vào tấm hình.

 Xem ví dụ
Một số kiến thức cơ bản về HTML Cách tạo và chạy một tập tin HTML Cấu trúc cơ bản của một tập tin HTML Đoạn văn bản (Paragraph) Thẻ đề mục (Heading) Các thẻ định dạng văn bản Tìm hiểu khái niệm phần tử (Element) Cách viết chú thích Liên kết (Link) Cách liên kết đến một vị trí bên trong trang web Tìm hiểu khái niệm thuộc tính (Attribute) Cách sử dụng thuộc tính Style Thuộc tính ID & Class trong HTML Phần tử khối, phần tử nội tuyến Cách sử dụng thẻ <div> và <span> trong HTML Chèn hình ảnh (Image) vào trang web Bản đồ ảnh (Image Map) Chèn Video vào trang web Chèn Audio vào trang web Chèn Iframe vào trang web Nhúng video trên Youtube vào trang web Danh sách (List) Bảng (Table) Cách nhúng ứng dụng bên ngoài (Plugin) vào trang web Các ký tự thực thể (Entities) trong HTML Danh sách các thẻ trong HTML (sắp xếp theo bảng chữ cái) Danh sách các thẻ trong HTML (sắp xếp theo thể loại) Danh sách mã ngôn ngữ (Language Code) trong HTML

Từ khóa » Chèn Html