Đến cuối bài viết này, bạn sẽ tạo các liên kết hình ảnh trên khắp trang web của mình và Internet Show
Chúng tôi cũng sẽ xem xét một số kỹ thuật nâng cao hơn ở cuối bài viết nếu bạn cảm thấy dũng cảm. Lấy một ly cà phê, chúng ta hãy đi sâu vào
Làm thế nào để bạn tạo một siêu liên kết?Để có được các liên kết trên trang chủ của bạn, bạn cần tạo một siêu liên kết. Để làm điều này trong HTML, bạn cần sử dụng thẻ 0. Mỗi thẻ 0 có hai phần thẻ mở và thẻ đóngĐây là một ví dụ
Ở phần trên, bạn có thể thấy rằng thẻ mở 2Tạo điểm bắt đầu của siêu liên kết. Sau đó, chúng tôi đóng thẻ với 3Bất kỳ văn bản nào chúng tôi viết giữa thẻ mở và thẻ đóng đều là văn bản liên kết của bạn. Ví dụ
Để biến điều này thành một liên kết, chúng ta cần thêm một URL. Để làm điều này, chúng tôi thêm URL vào thuộc tính href. URL có thể trỏ đến bất kỳ đâu trên internet. Đối với ví dụ này, chúng tôi sẽ sử dụng trang chủ PageDart
Đảm bảo bao gồm URL đầy đủ với HTTPS ở phía trước Đó là tất cả những gì cần làm để tạo một liên kết chỉ có văn bản trong HTML. Tiếp theo, hãy xem cách chúng ta có thể thêm hình ảnh vào trang web bằng HTML Làm thế nào để bạn tạo một hình ảnh trong HTML?Để thêm hình ảnh vào trang web của bạn, hãy sử dụng thẻ 4Thẻ này hơi khác với thẻ 5 ở chỗ nó không có thẻ mở và thẻ đóngĐể tạo thẻ 4, bạn cần cung cấp cho thẻ tệp nguồn. Sử dụng thuộc tính 7 để làm điều này 1Điều này sẽ thêm một hình ảnh vào màn hình như thế này Bây giờ chúng tôi có một hình ảnh, chúng tôi cần biến nó thành một liên kết. Để làm được điều đó, chúng ta cần thêm thẻ 8 vào bên trong thẻ 0 để tạo hình ảnh liên kết trong HTMLHãy xem một ví dụ tiếp theo Hình ảnh như một liên kếtĐể biến hình ảnh thành liên kết, bạn cần thêm thẻ 8 vào bên trong thẻ 0. Vì vậy, lấy ví dụ trước đây của chúng tôi, mã nguồn sẽ trông như thế này 6Cái nào sẽ tạo ra HTML này Bằng cách thêm thẻ 8 bên trong thẻ 0, trình duyệt có thể thấy rằng hình ảnh có thể nhấp được. Bạn đã biến hình ảnh thành một liên kếtNếu bạn đang sử dụng WordPress thì bạn có thể thêm mã HTML này vào trang của mình bằng chế độ xem văn bản trong trình chỉnh sửa trang Bạn cũng có thể thêm văn bản và hình ảnh bên trong liên kết, hãy xem cái này Hình ảnh và Văn bản dưới dạng Liên kếtVí dụ trên cho thấy cách chỉ thêm một hình ảnh dưới dạng liên kết Điều gì sẽ xảy ra nếu chúng tôi muốn thêm cả hình ảnh và văn bản vào một liên kết Chà, trong trường hợp này, chúng tôi cần đảm bảo rằng chúng tôi thêm văn bản trước khi đóng thẻ 0 0Ở phần trên, chúng tôi đã thêm “PageDart Home” bên trong thẻ 0 cùng với thẻ 8. Khi được hiển thị trong trình duyệt web trên trang, nó sẽ trông như thế nàyCòn một thuộc tính nữa trên thẻ 8 mà chúng ta chưa thảo luận và bạn nên sử dụngĐó là thuộc tính 8Liên kết hình ảnh và thuộc tính AltHình ảnh trên internet phải có thuộc tính 8. Đây là một mô tả văn bản của hình ảnhTrình đọc màn hình sử dụng văn bản thay thế để trợ giúp người dùng khiếm thị. Trình đọc màn hình sẽ đọc mô tả văn bản khi tìm thấy hình ảnh Để làm điều này, chúng tôi thêm một thuộc tính 8 vào thẻ 4 như thế này 8Bây giờ khi bộ đọc màn hình đọc hình ảnh này, nó sẽ nói “PageDart. com” thành tiếng Điều quan trọng là phải tuân theo các phương pháp hay nhất khi viết văn bản thay thế hình ảnh Đảm bảo rằng bạn nghĩ về người đang sử dụng trình đọc màn hình. Viết mô tả văn bản thay thế của bạn cho họ và mô tả hình ảnh tốt nhất có thể Đây là tất cả những gì bạn cần để tạo các hình ảnh liên kết trong HTML. Tuy nhiên, có một số kỹ thuật nâng cao hơn mà bạn có thể sử dụng. Nếu bạn cảm thấy dũng cảm, chúng ta sẽ xem xét những điều này tiếp theo Kỹ thuật nâng cao. Hình ảnh dưới dạng Liên kết bằng CSSMột kỹ thuật nâng cao hơn là sử dụng CSS. CSS là viết tắt của Cascading Style Sheet và nó cho phép bạn thay đổi giao diện của trang HTML Với CSS, bạn có thể đặt hình nền trên một phần tử, chẳng hạn như thẻ 0 của chúng tôiỞ đây chúng ta sẽ có HTML trông như thế này 0Vì vậy, lần này không có gì bên trong thẻ 0 nhưng hình ảnh được thiết lập bằng cách sử dụng kiểu CSS. Điều này sẽ hiển thị như sau trong trình duyệtChúng ta có thể sử dụng kỹ thuật tương tự với thẻ 14Kỹ thuật nâng cao. Sử dụng một nútTrong ví dụ này, chúng tôi sẽ sử dụng thẻ 14 thay vì thẻ 0Chúng ta có thể tạo đầu ra giống như ví dụ trên bằng cách sử dụng HTML này 5Cái nào tạo ra đầu ra này Ở đây chúng tôi đang sử dụng JavaScript để mở một tab trình duyệt mới. Gửi người dùng đến trang chủ PageDart Tôi không biết tại sao bạn lại làm điều này. Tuy nhiên, tôi muốn cho bạn thấy những gì có thể và HTML, CSS và JavaScript có thể linh hoạt như thế nào Ví dụ cuối cùng tôi sẽ trình bày là sử dụng bản đồ hình ảnh Kỹ thuật nâng cao. Bản đồ hình ảnhBản đồ hình ảnh là những hình ảnh đơn lẻ với các khu vực có thể nhấp được. Chúng đã không còn phổ biến trong những năm qua nhưng chúng vẫn là một phần của đặc tả HTML5. Điều này có nghĩa là các trình duyệt như Internet Explorer, Chrome và Safari sẽ hỗ trợ chúng Biểu đồ là những ví dụ điển hình về Bản đồ hình ảnh, chẳng hạn như biểu đồ tổ chức, như thế này Sau đó, để biến mỗi khu vực màu hồng thành một liên kết có thể nhấp, chúng tôi sẽ tạo một 17 như thế này 7Chúng tôi đã thêm thuộc tính 18 vào thẻ 4Sau đó, trong thẻ 17, chúng tôi có thẻ 61. Mỗi khu vực này tạo ra một khu vực có thể nhấp hoạt động như một nút
Bạn có thể biến hình ảnh thành liên kết trong CSS không?Hoàn thành khóa học HTML/CSS 2022
. Một liên kết là một kết nối từ một trang Web đến một trang web khác. Chúng tôi có thể thêm các liên kết trang vào một trang web. We can add image as a link and other HTML elements as a link. A link is a connection from one Web page to another web page. We can add page links to a web page.
Làm cách nào bạn có thể đặt hình ảnh làm liên kết?Hoặc làm theo hướng dẫn từng bước của chúng tôi để liên kết hình ảnh bằng HTML bên dưới. . Bước 1. Chọn hình ảnh của bạn. Đầu tiên, tìm hình ảnh bạn muốn tạo liên kết. . Bước 2. Tối ưu hóa kích thước và quy mô. . Bước 3. Tải lên hình ảnh của bạn và lấy URL. . Bước 4. Chỉ định URL đích của bạn. . Bước 5. Tạo HTML của bạn. . Bước 6. Dán mã của bạn nếu cần |