Hướng dẫn chèn hình ảnh khác file html

Thẻ

Vị trí URL ảnh phải nằm giữa dấu nháy kép "...", ví dụ bạn có một ảnh có tên "flower.jpg" lưu trữ cùng thư mục với file HTML, thì hiện thị ảnh có thể có dạng:

Trong trường hợp ảnh không hiện thị được (ví dụ ảnh bị xóa ...) thì thuộc tính`alt` là một văn bản thay thế sẽ hiện thị thay cho ảnh. Nói chung bất kỳ ảnh nào trong HTML thì thuộc tính alt yêu cầu nên có.

Thuộc tính src thiết lập địa chỉ ảnh, bạn có thể nhập địa chỉ ảnh đến một URL tuyệt đối, ví dụ địa chỉ https://https://i0.wp.com/www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png

Thuộc tính src thiết lập địa chỉ URL của ảnh, nó có thể là địa chỉ tương đối, tuyệt đối, hay đến file ảnh cục bộ trên máy tính, hãy xem để hiểu về cấu trúc đường dẫn này.

Thuộc tính width và height - điều chỉnh cỡ ảnh

0 và

1. Đơn vị sử dụng là pixel

2 hoặc phần trăm

3

Khi sử dụng ảnh trong trang web, sẽ mất thời gian để tải ảnh về và hiện thị, nên bạn cần lưu ý chọn cỡ ảnh gốc sao cho phù hợp với yêu cầu hiện thị của trang

Đường viền khung ảnh - border

Mặc định, anh không có đường viền bao quanh. Để tạo đường viền bao quanh ảnh sử dụng thuộc tính

4 và chỉ ra kích cỡ của đường viền theo đơn vị

2

Để cho website bạn tự làm sinh động, thu hút nhiều đọc giả ghé thăm bạn cần phải chèn thêm ảnh, đối với website sử dụng cấu trúc HTML, bạn có thể chèn ảnh bằng thẻ image trong html theo cú phép sau:

Thẻ

Ví dụ

Bạn thử ví dụ sau:

Vi du the img trong HTML.

Trong đó, bạn có thể sử dụng fie đuôi jpg, gif hoặc png đều được, nhưng bạn phải chọn đúng tên tấm ảnh của mình ở thuộc tính src, nếu sai ảnh sẽ không hiển thị.

Thuộc tính alt chính là miêu tả hình ảnh, bạn có thể thêm không thêm, khi thêm thì sẽ hiển thị tên để người dùng hiểu được bạn đang nói đến cái gì, thuộc tính này rất cần thiết để đáp ứng chuẩn SEO của Google khi làm website từ giao diện đến cấu trúc nội dung và onpage.

Thiết lập vị trí của hình ảnh trong HTML

Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML trong thư mục chính và tạo thư mục phụ image trong thư mục chính để lưu file hình ảnh.

Ví dụ

Giả sử vị trí tệp hình ảnh của chúng ta là “image/test.png”, bạn thử ví dụ sau:

Vi du the img trong HTML.

Thiết lập chiều cao/độ rộng hình ảnh trong HTML

Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc tính width và height. Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó.

Ví dụ

Vi du xac dinh do rong va chieu cao cho hinh anh

Thiết lập Border cho hình ảnh trong HTML

Theo mặc định thì sẽ có một Border quanh hình ảnh, bạn có thể xác định độ dày của viền bằng Pixel sử dụng thuộc tính border. Nếu độ dày bằng 0, nghĩa là sẽ không có Border quanh hình ảnh.

Ví dụ

Vi du thiet lap border cho hinh anh

Theo mặc định thì hình ảnh sẽ được căn chỉnh theo cạnh trái của trang web, nhưng bạn có thể sử dụng thuộc tính align để thiết lập lại sự căn chỉnh này: trung tâm hoặc bên phải.

Ví dụ

Vi du can chinh hinh anh

Chỉ với những bước cơ bản trên thì bạn hoàn toàn có thể edit hình ảnh trong trang web của mình, hy vọng với những chia sẻ trên chúng tôi có thể giúp những bạn đang tự tạo website có thể thêm hình ảnh vào web dễ dàng, giúp web sinh động và thu hút hơn.