Mục lục
- 0.0.1 Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif [hình động],. vào trang web, giống ví dụ bên dưới.
- 1 Cách chèn hình ảnh vào trang web
- 2 Thiết lập kích thước cho hình ảnh
- 3 Thuộc tính alt
- 4 Dùng hình ảnh làm đại diện cho liên kết
- 5 Xác định vị trí của tấm hình
Chúng ta có thể chèn hình ảnh thuộc các định dạng như: jpg, png, gif [hình động],. vào trang web, giống ví dụ bên dưới.
Cách chèn hình ảnh vào trang web
Để chèn hình ảnh vào trang web, ta sử dụng cú pháp sau:
Trong đó, đường dẫn đến tập tin hình ảnh có thể được xác định bằng đường dẫn tuyệt đối hoặc đường dẫn tương đối [nếu bạn chưa hiểu rõ khái niệm hai loại đường dẫn này thì vui lòng xem lại bàiLiên kết, đường dẫn tuyệt đối, đường dẫn tương đối]
ví dụ:
Thiết lập kích thước cho hình ảnh
Mỗi tấm hình có một chiều rộng và chiều cao mặc định [tính theo đơn vị pixel]. Nếu ta không thiết lập chiều rộng và chiều cao cho nó thì khi hiển thị ra màn hình, nó sẽ hiển thị với kích thước mặc định.
Nếu bạn muốn hiển thị một tấm hình với kích thước khác với kích thước mặc định của nó, thì sử dụng cú pháp sau:
Trong đó, chiều rộng và chiều cao có thể được xác định theo đơn vị:
- px [pixel]
- % [Phần trăm kích thước của phần tử chứa nó. Ví dụ: phần tử
có chiều rộng là 800px, bạn đặt thẻ
Trong trường hợp thiết lập kích thước hiển thị cho hình ảnh, bạn chỉ xác định mỗi thuộc tính width [hoặc height] thì thuộc tính còn lại sẽ tự động được xác định dựa theo tỷ lệ của tấm hình.
Tấm hình thứ nhất sẽ tự xác định thuộc tính height. Tấm hình thứ hai sẽ tự xác định thuộc tính width.
Thuộc tính alt
Thuộc tính alt dùng để hiển thị một đoạn văn bản trong trường hợp trang web load tấm hình thất bại [hoặc do đường dẫn đến tấm hình không tồn tại].
Xác định vị trí của tấm hình
Sử dụng thuộc tính float CSS để đẩy tấm hình sang bên trái hoặc bên phải đoạn văn bản.
Tấm hình bên dưới được đẩy sang bên phải đoạn văn bản
11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333
Tấm hình bên dưới được đẩy sang bên trái đoạn văn bản
11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333 11111 22222 33333
Ngoài cách trên, ta cũng có thể dùng cặp thẻ
với thuộc tínhalign=left|center|rightbao quanh thẻ để xác định vị trí tấm hình ở bên trái | giữa | hoặc bên phải.