Tìm hiểu cách chèn hình ảnh trong HTML và cách đặt hình ảnh làm nền của toàn bộ trang web hoặc của một phần tử HTML đơn lẻ, chẳng hạn như div.

Bạn đang xem : cách thêm hình ảnh

Bạn đã bao giờ nghe nói rằng mọi người chỉ nhớ 20% những gì họ đọc nhưng 80% những gì họ nhìn thấy ? Mặc dù tỷ lệ phần trăm chính xác đang được tranh luận, nhưng ý tưởng cơ bản thì không: Mọi người dễ dàng tìm hiểu và xử lý thông tin một cách trực quan.

Đó là lý do tại sao hầu hết các trang web sử dụng hình ảnh và tại sao điều quan trọng là phải bao gồm hình ảnh trên trang web của riêng bạn. Hình ảnh giúp làm cho nội dung của bạn nhiều thông tin, hấp dẫn và đáng nhớ hơn. Ngoài việc cải thiện trải nghiệm của khách truy cập, họ cũng có thể giúp tăng lưu lượng truy cập tìm kiếm không phải trả tiền của bạn.

Nếu bạn sử dụng nền tảng xây dựng trang web như CMS Hub hoặc WordPress , chỉ cần nhấp vào biểu tượng hình ảnh trong thanh công cụ của bạn, chọn một hình ảnh từ trình quản lý tệp của bạn và chèn nó. Nếu không sử dụng trình tạo, bạn vẫn có thể dễ dàng thêm hình ảnh vào trang web của mình. Bạn chỉ cần biết một số HTML . Hãy xem qua quy trình bên dưới.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Cách Chèn Hình ảnh trong HTML

Để chèn một hình ảnh trong HTML, hãy sử dụng thẻ hình ảnh và bao gồm một nguồn và thuộc tính alt. Giống như bất kỳ phần tử HTML nào khác, bạn sẽ thêm hình ảnh vào phần nội dung của tệp HTML của mình.

Cú pháp có dạng như sau: & lt; img src = “URL” alt = “văn bản mô tả” & gt;

Phần tử hình ảnh HTML là “phần tử trống”, nghĩa là phần tử này không có thẻ đóng. Không giống như các phần tử như đoạn văn bao gồm thẻ mở và thẻ đóng có nội dung ở giữa, hình ảnh chỉ định nội dung của nó bằng các thuộc tính trong thẻ mở.

So sánh các dòng mã sau để thấy sự khác biệt giữa đoạn văn và hình ảnh:

  

& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;

& lt; img src = "https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt = ”bản vẽ của một nghệ sĩ về lỗ đen trong không gian” & gt;

Lưu ý hai thuộc tính trong phần tử hình ảnh ở trên, src alt . Hãy thảo luận về cả hai thuộc tính quan trọng này tiếp theo. Nhưng trước tiên, video này đi sâu hơn vào các bước mà chúng tôi vừa giải thích.

Thuộc tính img src

Phần tử hình ảnh phải luôn có thuộc tính src (source) , chứa URL hình ảnh hoặc đường dẫn tệp. Nếu không, trình duyệt sẽ không biết kết xuất những gì. Các loại tệp hình ảnh được phép sẽ tùy thuộc vào trình duyệt tải trang, nhưng tất cả các trình duyệt đều cho phép bạn đặt các định dạng phổ biến như .jpeg, .png và .gif, cũng như .svg .

Trong ví dụ mã ở trên, nguồn là một siêu liên kết đầy đủ – điều này là do hình ảnh đang được tìm nạp từ một trang web khác. Nếu bạn muốn đặt một hình ảnh được lưu trữ trên máy chủ của mình, bạn có thể sử dụng đường dẫn tệp hình ảnh mà không cần tên trang web hoặc giao thức. Ví dụ: nếu hình ảnh nằm trong thư mục con được lưu trữ ở cùng nơi với tệp HTML của bạn, thì phần tử hình ảnh của bạn có thể trông giống như sau:

  

& lt; p & gt; Đây là một đoạn văn. & lt; / p & gt;

& lt; img src = "/ csz / news / 800/2017 / theorya.jpg" alt = ”bản vẽ của một nghệ sĩ về lỗ đen trong không gian” & gt;

… trong trường hợp này, “csz” sẽ là một thư mục nằm trong cùng thư mục với tệp HTML của bạn.

Thuộc tính img alt

Mặc dù trình duyệt có thể hiển thị hình ảnh mà không có thuộc tính alt , nhưng việc bao gồm thuộc tính này được coi là phương pháp hay nhất. Đó là vì thuộc tính này chứa văn bản thay thế hình ảnh .

Văn bản thay thế hình ảnh quan trọng vì một số lý do. Đầu tiên, nó sẽ xuất hiện ở vị trí của một hình ảnh nếu hình ảnh không tải được trên màn hình của người dùng. Thứ hai, nó giúp các công cụ đọc màn hình mô tả hình ảnh cho người đọc bị khiếm thị, những người có thể khó hiểu hình ảnh nếu không có hình ảnh đó.

Thứ ba, văn bản thay thế hình ảnh cho phép các công cụ tìm kiếm thu thập thông tin và xếp hạng trang web của bạn tốt hơn. Google Hình ảnh – không phải Google Tìm kiếm, Tìm kiếm Hình ảnh của Google – là một công cụ tìm kiếm chính của riêng nó và một cách khác để mọi người có thể tìm thấy trang web của bạn. Cung cấp hình ảnh với văn bản thay thế mô tả có thể giúp bạn xếp hạng cho các từ khóa mục tiêu và hướng lưu lượng truy cập đến trang web của bạn. Vào năm 2019, HubSpot đã làm chính xác điều đó, dẫn đến mức tăng trưởng 25% hàng năm về lưu lượng truy cập không phải trả tiền đến từ tìm kiếm trên web và hình ảnh .

Thuộc tính style img

Bạn cũng có thể thấy thuộc tính style bên trong thẻ & lt; img & gt; có chứa chiều rộng và chiều cao của hình ảnh. Chỉ định chiều rộng và chiều cao có thể giúp trang web không bị nhấp nháy trong khi tải hình ảnh. Dưới đây là cách mã có thể trông như thế nào với các thuộc tính bổ sung sau:

  
& lt; img src = "https://scx1.b-cdn.net/csz/news/800/2017/ theorya.jpg "alt =” sự thể hiện của một nghệ sĩ về lỗ đen trong không gian ”style =” width: 400px; height: 200px; "& gt;

Điều quan trọng cần lưu ý là bạn cũng có thể chỉ định kích thước của hình ảnh bằng CSS bên trong hoặc bên ngoài, CSS nội tuyến. Để tìm hiểu sự khác biệt giữa ba loại CSS này, hãy xem hướng dẫn của chúng tôi về cách thêm CSS vào HTML .

Thuộc tính chiều rộng và chiều cao img

Chiều rộng và chiều cao của hình ảnh cũng có thể được chỉ định bằng pixel với các thuộc tính chiều rộng chiều cao riêng biệt, như sau:

  

& lt; img src = "https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" alt = "bản vẽ của một nghệ sĩ về lỗ đen trong không gian" width = "400 "height =" 200 "& gt;

Điều này sẽ tạo ra kết quả giống như hình ảnh ở trên, trong đó thuộc tính style đã được sử dụng. Sự khác biệt chính giữa các phương pháp này là việc sử dụng các thuộc tính width style riêng biệt sẽ cho trình duyệt biết cần tiết kiệm bao nhiêu dung lượng cho hình ảnh, điều này có thể dẫn đến tải mượt mà hơn (mặc dù điều này cuối cùng sẽ phụ thuộc vào bố cục trang của bạn).

Cách Chèn Hình Nền trong HTML

Nếu bạn muốn đặt hình ảnh làm nền của trang web hoặc một phần tử HTML, thay vì chỉ chèn hình ảnh vào trang, bạn sẽ cần sử dụng CSS background-image tài sản. Thuộc tính CSS này đã thay thế thuộc tính background-image trong các phiên bản HTML trước. Thuộc tính này linh hoạt và dễ đoán hơn nhiều so với thuộc tính HTML – và vẫn dễ sử dụng.

Để đặt giá trị của background-image , bạn phải sử dụng cú pháp sau: url (”);

Giữa các dấu ngoặc kép, bạn sẽ đặt URL hình ảnh hoặc đường dẫn tệp.

Cách Chèn Hình Nền Trên Trang

Để bắt đầu, giả sử bạn muốn đặt một hình ảnh làm nền của toàn bộ trang. Trong trường hợp này, bạn sẽ áp dụng CSS cho phần tử body . Sử dụng CSS selector , bạn có thể xác định thuộc tính background-image trong phần head của Tệp HTML hoặc trong một biểu định kiểu bên ngoài. Đối với bản trình diễn này, chúng tôi sẽ sử dụng hình ảnh tương tự như trên và thay đổi màu văn bản thành màu trắng để chúng tôi có thể nhìn thấy nó.

Đây là CSS:

  
body {
background-image: url ('https://scx1.b-cdn.net/csz /news/800/2017/theoreticala.jpg ');
màu: #FFFFFF;
}

Đây là HTML:

  
& lt; h2 & gt; Hình nền & lt; / h2 & gt;
& lt; p & gt; Hình nền được chỉ định trong phần nội dung phần tử. & lt; / p & gt;

Đây là kết quả:

Trông tuyệt vời! Nhưng điều gì sẽ xảy ra nếu hình ảnh nhỏ hơn trình duyệt? Trong trường hợp đó, nó sẽ tự xếp theo mặc định như hình dưới đây.

Để ngăn điều này xảy ra, bạn có thể sử dụng thuộc tính background-repeat và đặt nó thành no-repeat .

Đây là CSS:

  
body {
background-image: url ('https://scx1.b-cdn.net/csz /news/800/2017/theoreticala.jpg ');
background-repeat: no-repeat;
color: #FFFFFF;
}

HTML vẫn giữ nguyên. Đây là cách nó trông như thế nào trên giao diện người dùng bây giờ:

Bạn đã giải quyết được vấn đề lặp lại, nhưng bây giờ bạn có rất nhiều khoảng trắng thừa bên dưới và bên phải hình ảnh. Để đảm bảo hình nền bao phủ toàn bộ phần tử body - hay nói cách khác, chiếm toàn bộ cửa sổ trình duyệt - bạn có thể sử dụng thuộc tính background-size và đặt nó thành bìa. Sau đó, để hình ảnh không bị cong vênh kích thước, hãy sử dụng thuộc tính background-attachment và đặt nó thành fixed . Bằng cách đó, hình ảnh sẽ giữ được tỷ lệ ban đầu.

Đây là CSS:

  
body {
background-image: url ('https://scx1.b-cdn.net/csz /news/800/2017/theoreticala.jpg ');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color : #FFFFFF;
}

HTML vẫn giữ nguyên. Đây là cách nó trông như thế nào trên giao diện người dùng bây giờ:

Cách Chèn Hình nền trên Phần tử HTML

Bạn cũng có thể đặt hình ảnh làm nền của phần tử HTML thay vì toàn bộ trang web.

Ví dụ: bạn có thể đặt các phần tử HTML bên trong div , sau đó nhắm mục tiêu div bằng các thuộc tính CSS mà chúng tôi đã sử dụng ở trên. Một điểm khác biệt là thay vì đặt thuộc tính background-size thành cover , chúng tôi sẽ đặt thuộc tính 100% 100% . Điều đó có nghĩa là hình ảnh sẽ kéo dài theo chiều ngang và chiều dọc khi cần để vừa với toàn bộ phần tử div mà không giữ lại kích thước ban đầu.

Đây là CSS:

  
div {
background-image: url ('https://scx1.b-cdn.net/csz /news/800/2017/theoreticala.jpg ');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
Màu: #FFFFFF;
}

Đây là HTML:

  
& lt; div & gt;
& lt; h2 & gt; Hình nền & lt; / h2 & gt;
& lt; p & gt; Trong ví dụ này, hình nền được chỉ định cho phần tử div. & Lt; / p & gt;
& lt; p & gt; Nhưng bạn có thể chỉ định hình nền cho bất kỳ phần tử HTML nào. & Lt; / p & gt;
& lt; p & gt; Hãy thử nó cho một đoạn văn, tiêu đề và hơn thế nữa. & lt; / p & gt;
& lt; / div & gt;

& lt; p & gt; Đoạn này không có trong div. Do đó, nó không có nền hình ảnh. & Lt; / p & gt;

Đây là kết quả:

Cách tạo liên kết hình ảnh trong HTML

Hình ảnh cũng là các liên kết hiệu quả - bạn có thể tạo liên kết từ biểu tượng hoặc hình ảnh có độ phân giải cao. Dù bằng cách nào thì quy trình này cũng giống nhau: Đính kèm phần tử & lt; img & gt; của bạn trong thẻ & lt; a & gt; (anchor), như sau:

  
& lt; a href = "URL" & gt;
& lt; img src = "URL" alt = "mô tả text "/ & gt;
& lt; / a & gt;

Đây là một ví dụ tương tác - nhấp vào biểu trưng HubSpot để được đưa đến trang chủ của HubSpot.

Xem Bút ký Tạo liên kết hình ảnh của Christina Perricone ( @hubspot ) trên CodePen .

Làm cho trang web của bạn trở nên trực quan

Thêm hình ảnh trên trang web của bạn là điều quan trọng đối với cả trải nghiệm của khách truy cập và công cụ tìm kiếm. Thật dễ dàng cho dù bạn đang xây dựng trang web của mình bằng hệ thống quản lý nội dung hay từ đầu. Bạn chỉ cần biết một số HTML và CSS.

Ghi chú của người biên tập: Bài đăng này ban đầu được xuất bản vào tháng 9 năm 2020 và đã được cập nhật để có tính toàn diện.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề cách thêm hình ảnh

Hướng dẫn Powerpoint – Hướng dẫn chèn hình và xử lý hình ảnh trong powerpoint

alt

  • Tác giả: KSTHAO VLOG
  • Ngày đăng: 2021-10-03
  • Đánh giá: 4 ⭐ ( 2201 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn Powerpoint – Hướng dẫn chèn hình và xử lý hình ảnh trong powerpoint
    Video này hướng dẫn các bạn thực hành cách chèn hình ảnh từ bên ngoài và từ thử viện hình ảnh vào trong powerpoint và cách xử lý đối với hình ảnh được chèn vào trong powerpoint.
    Xem thêm một số video hướng dẫn khác về powerpoint:
    Hướng dẫn tạo vòng quay số may mắn trong powerpoint
    https://youtu.be/uKaFt_XaUgo
    Hướng dẫn ghi âm và xuất ra video trong powerpoint
    https://youtu.be/rp4pwzgyFf4
    Hướng dẫn tạo tiêu đề đẹp bằng ảnh nền trong powerpoint
    https://youtu.be/WOEy9bbuZU0
    Hướng dẫn cắt hình ảnh trong powerpoint
    https://youtu.be/Nzu3id-w_fY
    Hướng dẫn làm bài tập câu hỏi trắc nghiệm có đáp án trong powerpoint
    https://youtu.be/-_71iXowdy4
    Hướng dẫn làm đồng hồ đếm ngược 5 giây trong powerpoint
    https://youtu.be/HFdZLj8HB4E
    Hướng dẫn đổi hình nền slide (Background) trong powerpoint
    https://youtu.be/mRiwFcSAxTs
    Chèn hiệu ứng chuyển tiếp giữa các Slide trong powerpoint
    https://youtu.be/6PY_8kqs8QU
    Hướng dẫn làm video clip bằng phần mềm powerpoint
    https://youtu.be/bY3UCOv8kow
    Hướng dẫn chèn video và xử lý video trong powerpoint
    https://youtu.be/o9OS7YKUyCg
    Thực hành định dạng kiểu chữ đẹp trong powerpoint
    https://youtu.be/bzEvgut2vQs
    Hướng dẫn chèn hình và xử lý hình ảnh trong powerpoint
    https://youtu.be/6MB93afIsiU
    Vẽ hình ảnh trong powerpoint
    https://youtu.be/1gErWkdo12Y
    Cách thêm hiệu ứng và cài đặt hiệu ứng trong Powerpoint
    https://youtu.be/Mdw7Qv1p-vw
    Chèn nhạc và âm thanh trong powerpoint
    https://youtu.be/RuoVm22kKlk
    Cách chèn video và hình ảnh vào trong powerpoint
    https://youtu.be/1-3D9a-x-iw
    Cách làm đồng hồ đếm ngược 10 giây trong powerpoint
    https://youtu.be/enzM2IoIOt8
    Cách làm VÒNG XOAY TÌNH YÊU trò chơi giải trí trong powerpoint
    https://youtu.be/ggsJPi1JBic
    powerpoint
    KSTHAO Kênh chia sẽ kiến thức, đăng kí kênh để theo dõi Vlog nhé!

Thêm hình ảnh vào một bảng tính

  • Tác giả: support.google.com
  • Đánh giá: 3 ⭐ ( 9553 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể thêm hình ảnh có kích thước dưới 50 MB ở định dạng .png, .jpg hoặc .gif. Làm theo nguyên tắc sử dụng hình ảnh. Không hỗ trợ định dạng tệp SV

Thêm khung ảnh - Trực tuyến và Miễn phí

  • Tác giả: photoretrica.com
  • Đánh giá: 4 ⭐ ( 3243 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thêm khung vào hình ảnh của bạn một cách nhanh chóng và dễ dàng. Đặt ảnh của bạn vào một trong bộ sưu tập khung ảnh lớn của chúng tôi để làm cho chúng trở nên đặc biệt.

Chèn ảnh vào Photoshop, Hướng dẫn cách thêm ảnh vào Ps

  • Tác giả: tuhocdohoa.vn
  • Đánh giá: 5 ⭐ ( 5430 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chèn ảnh vào Photoshop - Có những cách thêm ảnh và quản lý hình ảnh nào và bạn cần lưu ý những gì khi chèn ảnh vào trong photoshop.

Mẹo chèn hình ảnh vào Word không gây rối văn bản

  • Tác giả: tinhocmos.edu.vn
  • Đánh giá: 3 ⭐ ( 9170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để tránh gây nhàm chán cho nội dung văn bản, Microsoft Word đã cung cấp thêm cho người dùng tính năng chèn hình ảnh vào Word.

Thêm hình ảnh vào ứng dụng Android

  • Tác giả: developer.android.com
  • Đánh giá: 5 ⭐ ( 8884 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách xây dựng một ứng dụng đơn giản bằng các hàm có khả năng kết hợp.

✓ 3 Cách chèn hình ảnh vào Excel

  • Tác giả: thuthuat.tip.edu.vn
  • Đánh giá: 5 ⭐ ( 4925 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Giới thiệu và tổng quan về câu lệnh SQL IF - câu lệnh if với select trong sql

By ads_php