Cách thêm hình ảnh vào html

Khi tạo trang web bằng CMS dễ sử dụng như WordPress, có thể có giới hạn về nơi bạn có thể thêm hình ảnh

Điều này có thể gây khó chịu vì có thể cần phải chèn nhiều hơn chỉ một hình nền trên một trang web. Ví dụ: người ta có thể muốn thêm logo trang web vào đầu trang và chân trang

Một giải pháp là thêm hình ảnh vào tệp HTML chủ đề của trang web. Mặc dù việc chèn hình ảnh trên trang web bằng HTML yêu cầu một số kiến ​​thức cơ bản về HTML, những người mới bắt đầu vẫn có thể làm theo vì đây không phải là một quá trình phức tạp

Bài viết này sẽ hướng dẫn cách chèn một hình ảnh trong HTML vào trang web của bạn một cách dễ dàng. Chúng tôi sẽ chia hướng dẫn thành sáu bước với các giải thích chi tiết và quy trình dễ thực hiện

• 6 bước đơn giản để chèn hình ảnh hoặc logo trong HTML
  • 1. Tải lên tệp hình ảnh
  • 2. Truy cập thư mục chủ đề
  • 3. Thêm thuộc tính img src vào hình ảnh
  • 4. Đặt chiều rộng và chiều cao
  • 5. Thêm thuộc tính thay thế
  • 6. Lưu thay đổi
  • Bước thưởng. Thêm một liên kết đến hình ảnh

6 bước đơn giản để chèn hình ảnh hoặc logo trong HTML

Có ba cách để tải lên và chèn hình ảnh vào tài liệu HTML. qua ứng dụng khách FTP như FileZilla, qua trình quản lý tệp của hPanel và qua bảng điều khiển WordPress. Đối với hướng dẫn này, chúng tôi sẽ sử dụng tùy chọn thứ hai

Chúng tôi cũng sẽ chia nhỏ mã HTML của hình ảnh và giải thích các thuộc tính cần thiết để chèn hình ảnh trên trang web của bạn. Tất cả các thẻ HTML và cú pháp được đề cập bên dưới cũng được bao gồm trong Bảng cheat HTML của chúng tôi

1. Tải lên tệp hình ảnh

Đối với bước này, chúng tôi sẽ tải tệp hình ảnh lên thư mục public_html của trang web WordPress thông qua trình quản lý tệp của Hostinger. Tuy nhiên, hướng dẫn này vẫn có thể được thực hiện thông qua bất kỳ bảng điều khiển và loại trang web nào

1. Truy cập hPanel của bạn, điều hướng đến phần Tệp và nhấp vào Trình quản lý tệp

1. Mở thư mục public_html, double-click vào thư mục wp-admin – images

1. Nhấp vào nút Tải tệp lên ở góc trên cùng bên phải của thanh menu

1. Chọn các tệp hình ảnh bạn muốn tải lên. Đảm bảo rằng tên tệp dễ đọc và dễ mô tả, vì chúng sẽ là thuộc tính tiêu đề của hình ảnh HTML. Ngoài ra, hãy nhớ thêm dấu gạch ngang để phân tách các từ

Xóa tên tệp hình ảnh cũng giúp các công cụ tìm kiếm hiểu nội dung của chúng, cải thiện SEO của trang web

1. Nhấn TẢI LÊN và đợi cho đến khi quá trình kết thúc

Một cách khác là tải lên hình ảnh thông qua bảng điều khiển WordPress. Đây là cách

1. Trên bảng điều khiển WordPress, điều hướng đến Phương tiện – Thêm mới

1. Chọn những hình ảnh bạn muốn thêm và đợi chúng tải lên xong

Khi nói đến các định dạng hình ảnh tốt nhất, có hai loại để lựa chọn, raster và vector. JPEG/JPG, PNG và GIF là một số ví dụ về định dạng tệp hình ảnh raster, trong khi các vectơ bao gồm PDF, SVG và EPS

Đảm bảo trang web của bạn có thể xử lý mọi thứ – từ lưu lượng truy cập cao đến thời gian tải nhanh, v.v. Mua dịch vụ lưu trữ web

2. Truy cập thư mục chủ đề

Mẹo chuyên nghiệp

Vì chúng tôi sẽ chỉnh sửa tài liệu HTML, hãy tải xuống bản sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi nào. Điều này đảm bảo rằng không có dữ liệu nào bị mất nếu có lỗi xảy ra trong quá trình

Đối với bước này, trước tiên hãy truy cập trình chỉnh sửa chủ đề WordPress và tệp HTML nơi bạn muốn chèn hình ảnh

1. Từ bảng điều khiển WordPress, đi đến Giao diện – Trình chỉnh sửa chủ đề

1. Chọn chủ đề mà trang web của bạn đang sử dụng – ví dụ: Twenty-Twenty
2. Cuộn qua phần Tệp chủ đề và nhấp vào tệp HTML bạn muốn thêm hình ảnh vào. Ví dụ: nếu bạn muốn thêm logo vào tiêu đề, hãy nhấp vào tiêu đề. tập tin php

1. Tìm dòng bắt đầu thẻ body HTML hoặc . Trong thẻ
   đầu tiên, hãy chèn thẻ hình ảnh.

   Thẻ hình ảnh là thứ nhúng hình ảnh vào tệp HTML. Đó là một thẻ trống bao gồm các thuộc tính HTML như img src và alt và không yêu cầu thẻ đóng

   Bây giờ, chúng ta sẽ chia nhỏ các thành phần HTML khác cần có sau thẻ img

   3. Thêm thuộc tính img src vào hình ảnh

   Viết tắt của nguồn hình ảnh, img src là thuộc tính HTML bắt buộc phải có của phần tử hình ảnh vì nó xác định đường dẫn tệp của hình ảnh trong HTML. Nếu img src không được chỉ định chính xác, hình ảnh sẽ không tải

   Có hai cách để viết thuộc tính img src, sử dụng đường dẫn tương đối hoặc tuyệt đối. Trong tùy chọn đường dẫn tương đối, nguồn hình ảnh dựa trên thư mục hoặc thư mục hiện tại của hình ảnh

   Tùy chọn này được sử dụng khi hình ảnh được tải lên cùng thư mục với tệp HTML mà bạn muốn chỉnh sửa

   Một cú pháp đường dẫn tương đối trông giống như vậy

   img src=”images/file-name.jpg”

   Mặt khác, đường dẫn tuyệt đối chỉ định URL hình ảnh làm nguồn của nó. Sử dụng đường dẫn này khi hình ảnh được tải lên qua WordPress Media hoặc nằm trong một thư mục khác dưới dạng tệp HTML mà bạn đang chỉnh sửa

   Một cú pháp đường dẫn tuyệt đối có cấu trúc như sau

   img src=”your website’s URL/folder-name/image-file-name.jpg”

   Đối với hướng dẫn này, chúng tôi sẽ sử dụng đường dẫn tuyệt đối. Trong trường hợp này, ví dụ img src cho hình ảnh chúng tôi đã tải lên trong thư mục hình ảnh sẽ như thế này

   img src=”https://yoursite.com/wp-admin/images/website-logo.png”

   Nếu tải hình ảnh lên thông qua phương tiện WordPress, hãy làm theo các hướng dẫn sau để tìm nguồn hình ảnh

   1. Từ bảng điều khiển WordPress, điều hướng đến Phương tiện – Thư viện

   1. Nhấp vào hình ảnh bạn định thêm, sau đó cuộn thanh bên cho đến khi bạn tìm thấy trường URL tệp
   2. Nhấn nút Sao chép URL vào Clipboard và chỉ cần dán nó làm nguồn hình ảnh

   4. Đặt chiều rộng và chiều cao

   Thuộc tính chiều rộng và chiều cao chỉ định kích thước của hình ảnh, thường tính bằng pixel. Điều cần thiết là luôn đặt chiều rộng và chiều cao của hình ảnh. Chúng xác định dung lượng cần thiết cho hình ảnh khi trình duyệt tải trang web

   Nếu chúng không được đặt, trình duyệt sẽ không thể xác định kích thước hình ảnh và sẽ sử dụng các phép đo ban đầu của nó. Điều này có thể thay đổi bố cục của trang web và gây ra lỗi khi trình duyệt tải hình ảnh

   Dưới đây là cú pháp cho thuộc tính chiều rộng với một phép đo ví dụ

   img width=”50px”

   Trong khi cú pháp thuộc tính độ dài trông giống như vậy

   img length=”50px”

   Thay đổi 50px thành kích thước mong muốn, tùy thuộc vào nơi bạn định đặt hình ảnh và thiết kế của trang web

   5. Thêm thuộc tính thay thế

   Thuộc tính alt HTML cho phép bạn thêm văn bản hoặc thông tin thay thế vào hình ảnh. Văn bản mô tả là điều cần thiết khi hình ảnh không tải được do lỗi hoặc kết nối chậm. Nó cũng giúp trình đọc màn hình giải thích hình ảnh cho khách truy cập khiếm thị

   Ngoài ra, văn bản thay thế cho phép các công cụ tìm kiếm hiểu nội dung của hình ảnh trong quá trình thu thập thông tin. Nó làm tăng cơ hội hình ảnh xuất hiện trong kết quả tìm kiếm hình ảnh và giúp trang web của bạn xếp hạng tốt hơn

   Hãy nhớ cụ thể khi mô tả hình ảnh và cung cấp ngữ cảnh cho nó. Việc chèn từ khóa mục tiêu nếu có thể cũng rất quan trọng

   Một cú pháp thuộc tính alt trông như thế này

   img alt=”insert text here”

   6. Lưu thay đổi

   Khi bạn đã nhập tất cả các thuộc tính và thông tin cần thiết vào tệp HTML, mã hình ảnh sẽ giống như thế này

   0

   Kiểm tra mã một lần nữa trước khi nhấp vào nút Cập nhật tệp để lưu các thay đổi. Sau đó, tải lại trang web để xem thay đổi thành công chưa

   Bước thưởng. Thêm một liên kết đến hình ảnh

   Khi tải ảnh gốc và hình ảnh lên trang web của bạn, điều quan trọng là phải thêm các URL hoặc liên kết tùy chỉnh tới chúng. Bạn không muốn các trang web khác lấy và sử dụng hình ảnh mà không được phép, tín dụng hoặc liên kết ngược

   Nếu bạn chưa thực hiện các biện pháp để ngăn mọi người liên kết nóng hình ảnh của mình, bạn có thể theo dõi các tệp được nhúng thông qua URL hình ảnh. Dán URL vào Tìm kiếm hình ảnh của Google và nó sẽ hiển thị danh sách các trang web sử dụng cùng một hình ảnh đó

   Chỉ cần bọc phần tử neo trên mã hình ảnh nếu bạn muốn liên kết một hình ảnh trong HTML. Anchor là một văn bản đánh dấu điểm bắt đầu và điểm kết thúc của một liên kết siêu văn bản. Nó bao gồm thẻ mở

   1 và thẻ đóng

   2

   Mã hình ảnh với cú pháp thẻ neo sẽ trông như thế này

   3

   Tuy nhiên, nếu bạn tải hình ảnh lên qua WordPress Media thì không cần tạo URL tùy chỉnh. URL hình ảnh được tạo tự động khi tệp được tải lên

   Phần kết luận

   Khi tùy chỉnh trang web, bạn có thể gặp một số hạn chế khi thêm hình ảnh vào trang. Hệ thống quản lý nội dung và chủ đề trang web thường cung cấp các tùy chọn cố định để chèn hình ảnh, có thể không phù hợp với nhu cầu của mọi người

   Để giải quyết vấn đề đó, cần phải thêm hình ảnh bằng HTML. Trong bài viết này, bạn đã học cách chèn hình ảnh vào HTML bằng sáu bước sau. Đây là một bản tóm tắt

   1. Tải tệp hình ảnh lên một thư mục trong thư mục public_html của trang web thông qua trình quản lý tệp được cung cấp bởi máy chủ lưu trữ web hoặc WordPress Media
   2. Truy cập vào tệp HTML mà bạn muốn chèn hình ảnh và thêm thẻ img
   3. Bao gồm thuộc tính img src để xác định nguồn của hình ảnh
   4. Thêm thuộc tính chiều rộng và chiều cao để xác định cách trình duyệt hiển thị hình ảnh
   5. Chèn thuộc tính alt để mô tả hình ảnh
   6. Lưu các thay đổi

   Thêm một URL hình ảnh tùy chỉnh cho các tệp cũng có thể cần thiết. Tuy nhiên, các liên kết đã được tạo tự động cho hình ảnh phương tiện WordPress

   Đi và thử các phương pháp được mô tả trong hướng dẫn này và nếu bạn có thêm câu hỏi, hãy để lại chúng trong phần bình luận bên dưới

   Đảm bảo trang web của bạn có thể xử lý mọi thứ – từ lưu lượng truy cập cao đến thời gian tải nhanh, v.v. Mua dịch vụ lưu trữ web

   

   Tác giả

   Lina L

   Linas bắt đầu với tư cách là một đại lý thành công của khách hàng và hiện là nhà phát triển web toàn diện và Trưởng nhóm kỹ thuật tại Hostinger. Anh ấy đam mê giới thiệu cho mọi người những giải pháp kỹ thuật hàng đầu, nhưng cũng như niềm yêu thích viết mã, anh ấy thầm mơ ước trở thành một ngôi sao nhạc rock

   Làm cách nào để chèn hình ảnh vào HTML?

   Thẻ HTML . Hình ảnh không được chèn kỹ thuật vào một trang web; . Thẻ

   Làm cách nào để thêm hình ảnh vào HTML bằng CSS?

   Để thêm hình ảnh vào một trang, chúng tôi sử dụng phần tử nội tuyến . Phần tử

   Đọc tiếp