Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn. Chương này sẽ đưa bạn qua các bước để sử dụng hình ảnh trong trang của mình.
Chèn hình ảnh trong HTML - Thẻ img trong HTML
Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng thẻ Thẻ Kết quả hiển thị:
Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF trên cơ sở sở thích của mình nhưng chắc chắn rằng bạn xác định rõ tên file ảnh trong thuộc tính src. Tên file là phân biệt chữ hoa và thường.
Thuộc tính alt là
một thuộc tính ủy quyề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ả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML [test.htm] 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 [logo.png].
Ví dụ
Giả sử vị trí tệp hình ảnh của chúng ta là "images/logo.png", bạn thử ví dụ sau:
Hinh anh trong HTML
Vi du the img trong HTML.
Nó sẽ tạo ra kết quả là:
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ụ
Thiet lap chieu cao va do rong hinh anh
Vi du xac dinh do rong va chieu cao cho hinh anh
Kết quả hiển thị là:
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ụ
Thiet lap border cho hinh anh trong HTML
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
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ụ
Can chinh hinh anh trong HTML
Vi du can chinh hinh anh
Nó sẽ tạo ra kết quả sau:
1] Thẻ
- Một thẻ
Xem ví dụ
2] Các thuộc tính của thẻ
- Thẻ img bên dưới sử dụng đường dẫn tương đối
Xem ví dụ
2.2] Thuộc tính alt
- Thuộc tính alt dùng để xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác.
Xem ví dụ
2.3] Thuộc tính border
- Thuộc tính border dùng để xác định độ dày của đường viền bao xung quanh tấm hình.
[Mặc định, giá trị của thuộc tính border được tính theo đơn vị pixel]
- Tấm hình bên dưới sẽ có đường viền dày 10px
Xem ví dụ
2.4] Thuộc tính width
- Thuộc tính width dùng để thiết lập chiều rộng cho tấm hình.
- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:
- px [pixel]
- % [tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó]
- Tấm hình bên dưới sẽ có chiều rộng bằng 300 pixel
- Tấm hình bên dưới sẽ có chiều rộng bằng 100% chiều rộng phần nội dung của phần tử cha của nó [tức là phần tử body]
Xem ví dụ
2.5] Thuộc tính height
- Thuộc tính height dùng để thiết lập chiều cao cho tấm hình.
- Giá trị của thuộc tính height có thể xác định theo một trong hai loại đơn vị:
- px [pixel]
- % [tỷ lệ phần trăm chiều cao phần nội dung của phần tử cha của nó]
- Lưu ý: Nếu thiết lập giá trị của thuộc tính height theo đơn vị % thì phần tử cha của nó phải có chiều cao được xác định.
- Tấm hình bên dưới sẽ có chiều cao bằng 100 pixel
- Tấm hình bên dưới sẽ có chiều cao bằng 50% chiều cao phần nội dung của phần tử cha của nó.
Xem ví dụ
2.6] Thuộc tính vspace
- Thuộc tính vspace dùng để xác định khoảng cách lề phía trên và lề phía dưới của tấm hình.
- Tấm hình bên dưới sẽ có lề trên và lề dưới là 100px
Xem ví dụ
- Lưu ý; Ta có thể sử dụng thuộc tính margin-top & margin-bottom trong CSS để thay thế.
2.7] Thuộc tính hspace
- Thuộc tính hspace dùng để xác định khoảng cách lề bên trái và lề bên phải của tấm hình.
- Tấm hình bên dưới sẽ có lề trái và lề phải là 100px
Xem ví dụ
- Lưu ý; Ta có thể sử dụng thuộc tính margin-left & margin-right trong CSS để thay thế.
2.8] Thuộc tính align
- Thuộc tính align dùng để xác định vị trí của tấm hình so với các văn bản xung quanh.
- Thuộc tính align có năm giá trị cơ bản:
| left | Tấm hình sẽ được đẩy sang bên trái | Xem ví dụ |
| right | Tấm hình sẽ được đẩy sang bên phải | Xem ví dụ |
| top | Văn bản sẽ nằm ở vị trí cao nhất so với tấm hình | Xem ví dụ |
| middle | Văn bản sẽ nằm ở vị trí giữa so với tấm hình | Xem ví dụ |
| bottom | Văn bản sẽ nằm ở vị trí thấp nhất so với tấm hình | Xem ví dụ |
3] Định dạng CSS mặc định
- Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau:
img {
display: inline-block;
}