Thêm hình ảnh vào trang web của bạn

Ngày đăng: 24/10/2018   -    Cập nhật: 20/07/2019

Cách thêm hình ảnh bằng phần tử img trong HTML

Bạn có thể thêm hình ảnh vào trang web của mình bằng cách sử dụng phần tử img và trỏ đến URL của hình ảnh cụ thể bằng thuộc tính src.

Ví dụ cách thêm hình ảnh vào trang web:

            
        

Lưu ý: Lưu ý rằng các phần tử img là phần tử tự đóng. Bạn có thể thêm “dấu cách + /” trước khi đóng ngoặc > như mình để đặt theo chuẩn XHTML (bạn sẽ học XHTML sau, nhưng hãy cứ làm như thế vì nó sẽ tốt cho bạn sau này)

            
        

Sử dụng thuộc tính Alt để mô tả ảnh của bạn


Tất cả các phần tử img phải có thuộc tính Alt. Văn bản bên trong thuộc tính alt được sử dụng cho công cụ tìm kiếm và cả người dùng.

Khi tốc độ load của mạng quá kém thì thuộc tính Alt sẽ được hiển thị.

Điều này giúp người dùng vẫn hiểu đây là hình ảnh có ý nghĩa như thế nào ngay cả khi không load được ảnh.
 
Lưu ý: Nếu hình ảnh được sử dụng chỉ để trang trí (như viền, hoa văn…), thì sử dụng thuộc tính alt trống là phương pháp hay nhất, ví dụ: alt = ””
 
Lý tưởng nhất là thuộc tính alt không được chứa các ký tự đặc biệt trừ khi quá cần thiết.
 
Hãy thêm thuộc tính alt vào ví dụ img của chúng tôi ở trên:

            
        

Bài tập về thẻ IMG trong HTML

Hãy thử thêm hình ảnh vào website của bạn.
 
? Chèn thẻ img, trước phần tử h2.
? Bây giờ thiết lập thuộc tính src để nó trỏ đến url này:

Bây giờ thì hãy thêm thuộc tính src bằng đường dẫn hình ảnh của bạn:

Lưu ý: 3 Cách thêm đường dẫn ảnh bằng ảnh tải sẵn trong máy tính


  • Ảnh lưu cùng thư mục với file html của bạn: src = ”meo.jpg
  • Ảnh lưu trong thư mục con image (thư mục image ngang cấp với file html của bạn): src = ”image/meo.jgp”
  • Ảnh lưu trong thư mục image1 ngang cấp với thư mục cha đang chứa file html của bạn: src = ”./image1/meo.jpg”

 
? Cuối cùng đừng quên cho hình ảnh của bạn một văn bản thay thế bằng thẻ alt.
 
Tạo thẻ anchor để liên kết văn bản neo đến một địa chỉ nào đó: Thẻ <a href = ””>Đây là văn bản neo</a>


            
        
Bình luận Facebook
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!