Đưa ảnh vào HTML
|
Cùng gitiho contest chinh phục kiến thức, khẳng định bản thân với hệ thống bài test phong phú, đầy đủ các chủ đề để bạn khám phá. Show
Khám phá ngay  Chương trình hội viên Gitiho Tiết kiệm tối đa với gói Hội viên Gitiho. Thỏa mãn việc nâng cao kiến thức của bạn với gói Hội viên Gitiho bạn sẽ không còn bị giới hạnbởi số lượng khóa học đã mua. Gói hội viên Gitiho mang đến trải nghiệm học tập hoàn toàn mới, phù hợp với những học viên cần học nhiều nội dung trong trong một khoản thời gian sẽ giúp học viên tiết kiệm hơn rất nhiều so với mua lẻ hoặc combo. Hơn 20.000 người đã đăng ký Khám phá chương trìnhGitiho for leading business Tối ưu và đơn giản hóa hoạt động đào tạo tại doanh nghiệp. Sẵn sàng nền tảng, nội dung đào tạo cho tất cả các vị trí, bộ phận. Ứng dụng MIỄN PHÍ ngay vào doanh nghiệp chỉ với MỘT click. Đã được tin tưởng sử dụng bởi các doanh nghiệp Đăng ký miễn phí
Hà Vân XEM NHANH BÀI VIẾT
Bạn muốn đưa hình ảnh vào file HTML nhưng chưa biết cách làm? Hay đọc ngay hướng dẫn chi tiết cách dùng thẻ IMG hiển thị hình ảnh trong HTML của Gitiho nhé. Trong các bài viết trước, chúng mình đã hướng dẫn các bạn kiến thức cơ bản về HTML. Đồng thời, chúng ta cũng đã tìm hiểu về các thẻ Text trong HTML dùng để viết chữ và hiệu chỉnh định dạng của chữ. Tuy nhiên, trong thực tế thì các trang web mà bạn từng xem, ngoại trừ phần văn bản thì sẽ có cả hình ảnh. Vậy làm thế nào thể hiển thị hình ảnh trong HTML? Chúng ta sẽ cùng tìm hiểu về thẻ IMG dùng để hiển thị hình ảnh trong HTML ngay dưới đây các bạn nhé. Cách dùng thẻ IMG hiển thị hình ảnh trong HTMLBước 1: Tạo file HTML và chuẩn bị ảnhTương tự như khi làm việc với thẻ Text, trước khi bắt đầu tìm hiểu về thẻ IMG trong HTML thì các bạn cũng cần tạo một thư mục mới rồi mở nó lên trong VSCode. Tiếp theo, các bạn tạo một New File trên VS Code. Sau đó gõ "html:5" rồi bấm phím Tab để tạo khung code. Phần chuẩn bị ảnh thì các bạn chỉ cần tải sẵn bức ảnh mình muốn dùng về máy tính là được. Bức ảnh này sẽ được lưu cùng thư mục với file HTML các bạn nhé. Sau đó các bạn quay lại VSCode sẽ thấy bức ảnh đã được cập nhật vào như trong hình ảnh dưới đây: Xem thêm: Tìm hiểu chi tiết về các thẻ định dạng chữ (Text) trong HTML Bước 2: Nhập thẻ IMGCác bạn dưa con trỏ chuột về giữa cặp thẻ và sau đó nhập "img" rồi bấm phím Tab thì sẽ thấy thẻ IMG hiện lên như sau: Trong hình ảnh trên bạn có thấy được 2 thuộc tính đi kèm thẻ IMG là:
Nếu các bạn thao tác đúng nhưng file ảnh không hiện ra thì các bạn cài thêm một tiện ích mở rộng cho VSCode nhé. Tiện ích đó tên là: Path Intellisense. Cách cài tiện ích mở rộng cho VSCode chúng mình đã hướng dẫn ở bài trước rồi, các bạn hãy dành chút thời gian để tìm hiểu nhé. Sau đó các bạn bấm chuột phải vào file HTML => chọn View in Browser để xem khi hiển thị trên trình duyệt thì bức ảnh trông sẽ như thế nào. Dưới đây là kết quả mà chúng mình thu được:
Lúc này đường dẫn mà chúng ta điền vào thuộc tính src đang bị sai. Chúng ta sẽ điền nội dung trong thuộc tính alt là "ảnh chưa hiển thị". Các bạn bấm F5 lại file HTML đang mở trên trình duyệt thì sẽ thấy thông báo như thế này khi ảnh lỗi do đường dẫn sai: Xem thêm: Hướng dẫn cách chuyển file Word sang HTML đơn giản nhất Bước 3: Thay đổi đường dẫn của file ảnhTrong bước 2 chúng ta đã thực hiện một thao tác khiến đường dẫn của ảnh trong thuộc tính src đang bị sai. Để chỉnh lại thì các bạn xóa đường dẫn cũ đi, vẫn nhập "./", sau đó kích vào file đang lưu bức ảnh => chọn bức ảnh:
Sau đó các bạn bấm F5 trên file HTML đang mở trên trình duyệt thì sẽ thấy bức ảnh lại hiển thị bình thường. Lưu ý: Có một trường hợp khác khiến bức ảnh của bạn không hiển thị. Đó là khi các bạn tạo một file mới, không thuộc file đã lưu bức ảnh và đưa file HTML vào đó. Cụ thể như sau: Khi chạy lại file HTML trên trình duyệt các bạn sẽ thấy thông báo như sau: Khi gặp trường hợp này, các bạn chỉ cần xóa đường dẫn cũ ở trong đoạn code => nhập vào thuộc tính src là "../" => thấy các thư mục hiện ra thì chọn nơi lưu bức ảnh => chọn bức ảnh là được. Sau đó các bạn tải lại trang trên trình duyệt đang mở file HTML là sẽ thấy bức ảnh hiện lên như bình thường. Kết luậnCó thể thấy việc sử dụng thẻ IMG trong HTML rất đơn giản. Các bạn hãy thực hành ngay để ghi nhớ các thao tác nhé. Chúng mình sẽ thường xuyên chia sẻ kiến thức về HTML nên các bạn nhớ theo dõi Gitiho để đón đọc bài viết mới. Nếu bạn muốn được học về HTML một cách đầy đủ, chi tiết với video bài giảng trực quan, dễ hiểu thì các bạn hãy tham gia khóa học dưới đây:
Khóa học phù hợp với các bạn đang tìm hiểu về lập trình web với ngôn ngữ HTML và CSS. Hoàn thành khóa học, các bạn sẽ nắm chắc được bản chất và cách thức hoạt động của HTML. Các bạn sẽ có thể sử dụng kiến thức và kỹ năng đã học để xây dựng bộ khung cho website. Gitiho không giới hạn thời gian và số lượt học nên bạn có thể học bất cứ khi nào bạn muốn. Trong quá trình học, các bạn có thể trao đổi về vấn đề chưa hiểu với chuyên gia ngay trong phần Hỏi - Đáp dưới video bài giảng. Mọi thắc mắc sẽ được phản hồi trong vòng 24h các bạn nhé. Chúc các bạn học tập hiệu quả.
Thích 0 Chia sẻ 0/5 - (0 bình chọn) 0/5 - (0 bình chọn) Bài viết liên quan Hướng dẫn về hàm ACOS của OracleHướng dẫn về hàm ATAN của OracleHướng dẫn về hàm COS của OracleHướng dẫn về hàm AVG của OracleCách tạo File HTML và chạy HTML trong Visual Studio CodeTìm hiểu chi tiết về các thẻ định dạng chữ (Text) trong HTML× Chúc mừng bạn đã nhận được quà tặng "" HÃY ĐĂNG NHẬP ĐỂ NHẬN QUÀ NGAY Đăng nhập bằng Google Đăng nhập bằng Apple Hoặc đăng nhập Đăng nhậpĐăng ký tài khoản Đăng nhập bằng Google Đăng nhập bằng Apple Hoặc đăng ký Đăng kýĐăng nhập Khóa học của tôi Tải xuống Bạn vui lòng đăng nhập để gửi tương tác Đăng nhập Đăng nhập bằng Google Đăng nhập bằng Apple Hoặc đăng nhập Đăng nhậpĐăng ký tài khoản Đăng ký Đăng nhập bằng Google Đăng nhập bằng Apple Hoặc đăng ký Đăng kýĐăng nhập Hỗ trợ khách hàng Email: [email protected] Hotline: 0774 116 285 (Giờ làm việc: 8h30 - 18h, nghỉ chiều thứ 7 và CN) Những câu hỏi thường gặp Hướng dẫn đăng ký khoá học Hướng dẫn đăng nhập Hướng dẫn lấy lại mật khẩu Hướng dẫn thanh toán khóa học sau khi đăng ký thành công VỀ GITIHO Giới thiệu về Gitiho Blog Hỏi đáp Đào tạo cho doanh nghiệp Chính sách bảo mật thông tin Chính sách và quy định chung Quy định mua, hủy, sử dụng khóa học Bộ quy tắc hành xử của giảng viên và học viên trên Gitiho Quy trình xác nhận – hoàn, hủy đơn hàng tại hệ thống Gitiho Cách lấy chứng nhận Gitiho hợp tác và liên kết Dạy học trên Gitiho Dịch vụ Doanh nghiệp Đăng ký Gitiho Affiliate Tuyển dụng giảng viên Tuyển dụng nhân sự Tải App Gitiho Kết nối với chúng tôi Địa chỉ văn phòng: Phòng 302, tầng 3, Tòa nhà Tây Hà, KĐT mới Phùng Khoang, Phường Trung Văn, Quận Nam Từ Liêm, Thành phố Hà Nội, Việt Nam |
