Quan trọng của Hình ảnh trong thiết kế Web

Hình ảnh không chỉ có tác dụng đẹp mắt mà còn là một phần không thể thiếu trong việc truyền đạt các ý tưởng phức tạp một cách đơn giản trên trang web của bạn. Trong bài viết này, chúng ta sẽ đi qua các bước cần thiết để sử dụng hình ảnh một cách hiệu quả trên trang web của bạn.

Chèn hình ảnh trong HTML - Thẻ img trong HTML

Bạn có thể chèn bất kỳ hình ảnh nào vào trang web của bạn bằng cách sử dụng thẻ . Đây là cú pháp đơn giản để sử dụng thẻ này:

Thẻ này là một thẻ trống, có thể chứa danh sách các thuộc tính và không có thẻ đóng.

Ví dụ

Hãy xem ví dụ sau:

Vi du the img trong HTML.

Kết quả hiển thị:

Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF dựa trên sở thích của mình, nhưng hãy chắc chắn rằng bạn ghi rõ tên file ảnh trong thuộc tính src. Tên file phân biệt chữ hoa và chữ thường.

Thuộc tính alt là một thuộc tính tùy chọn. Nếu hình ảnh không hiển thị, nó sẽ xác định một văn bản thay thế cho hình ảnh đó.

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

Chúng ta thường giữ tất cả các hình ảnh trong một thư mục riêng. Vì vậy, hãy đặt các tệp HTML (test.htm) trong thư mục chính và tạo một thư mục con image trong thư mục chính để lưu các file hình ảnh (logo.png).

Ví dụ

Giả sử vị trí tệp hình ảnh của chúng ta là "images/logo.png", hãy xem ví dụ sau:

Vi du the img trong HTML.

Kết quả hiển thị:

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 bằng cách sử dụng thuộc tính width và height. Bạn có thể xác định kích thước bằng pixel hoặc theo phần trăm hoặc kích thước thật của hình ảnh.

Ví dụ

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

Kết quả hiển thị:

Thiết lập đường viền (border) cho hình ảnh trong HTML

Mặc định, hình ảnh sẽ có một đường viền xung quanh nó. Bạn có thể xác định độ dày của đường viền bằng đơn vị pixel sử dụng thuộc tính border. Nếu bạn muốn không có đường viền, hãy đặt giá trị border là 0.

Ví dụ

Vi du thiet lap border cho hinh anh

Chạy đoạn mã trên sẽ tạo ra kết quả sau:

Căn chỉnh hình ảnh trong HTML

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

Ví dụ

Vi du can chinh hinh anh

Kết quả hiển thị:

Hình ảnh là một yếu tố quan trọng trong thiết kế web. Việc sử dụng hình ảnh một cách hợp lý có thể giúp trang web của bạn trở nên hấp dẫn và thu hút sự chú ý của người dùng. Hãy áp dụng những nguyên tắc và kỹ thuật đã trình bày trong bài viết để tạo ra những trang web thú vị và tương tác.