🌌3-Chèn và định dạng Images
Trong bài hôm nay chúng ta sẽ tìm hiểu cách chèn 1 bức ảnh và định dạng bức ảnh vào website.
Last updated
Trong bài hôm nay chúng ta sẽ tìm hiểu cách chèn 1 bức ảnh và định dạng bức ảnh vào website.
Last updated
Khi truy cập vào các website, chúng ta thấy hình ảnh là một phần không thể thiếu giúp website trực quan và sinh động hơn.
Chúng ta nhận thấy rằng trên một website:
Hình ảnh giúp website trực quan và sinh động hơn.
Hình ảnh có kích thước, vị trí hiển thị khác nhau...
Vậy làm thế nào để chèn được hình ảnh và điều chỉnh vị trí, kích thước… vào website?
Để chèn hình ảnh vào website, chúng ta có thể sử dụng thẻ <img>.
Một số đặc điểm của thẻ <img>:
Thẻ <img> không có thẻ đóng
Mỗi thẻ <img> sẽ tương đương để hiển thị 1 bức ảnh lên website.
Cú pháp:
Ví dụ:
Làm thế nào để điều chỉnh kích thước hay các thông tin khác của hình ảnh khi chèn vào website?
Thẻ <img> có một số thuộc tính cơ bản mà chúng ta sẽ tìm hiểu dưới đây.
Thuộc tính src dùng để xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web. (Đường dẫn đến tập tin hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối).
Ví dụ:
Hình ảnh có thể được đặt cùng thư mục, khác thư mục trong cùng server hay project hoặc được đặt trên 1 server khác thì chúng ta sẽ sử dụng các đường dẫn khác nhau.
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.
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.
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).
Thuộc tính width và height dùng để thiết lập chiều rộng và chiều cao cho bức ảnh.
Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị thường dùng:
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ó)
Chúng ta có thể sử dụng ảnh như một đường dẫn để khi người dùng click vào bức ảnh có thể mở ra một tài liệu hoặc một trang web, đường link khác.
Bảng sau đây liệt kê một số định dạng ảnh cơ bản và được hỗ trợ hiển thị trên tất cả các trình duyệt khác nhau như Chrome, Firefox, Safari, Opera…
Qua buổi học chúng ta đã được tìm hiểu một số nội dung sau:
Cách chèn hình ảnh vào website thông quả thẻ <img>.
Một số thuộc tính thường dùng khi chèn ảnh vào website như:
Thuộc tính src: đường dẫn ảnh.
Thuộc tính alt để hiển thị thay thế khi hình ảnh chưa tải hoặc bị sai đường dẫn ảnh.
Thuộc tính title để hiển thị text khi người dùng hover chuột vào hình ảnh.
Thuộc tính border để tạo viền bao quanh ảnh.
Thuộc tính width và height để xác định chiều cao và chiều rộng của ảnh.
Cách tạo hình ảnh xuất hiện như 1 đường link.
Các định dạng ảnh phổ biến hỗ trợ trên các trình duyệt khác nhau.
Một số website download hình ảnh bản quyền miễn phí.
