HTML văn bản có thể nhấp
Các siêu liên kết thực sự quan trọng — chúng là thứ làm cho Web trở thành một trang web. Bài viết này trình bày cú pháp cần thiết để tạo liên kết và thảo luận về các phương pháp hay nhất về liên kết Show
Siêu liên kết là gì?Siêu liên kết là một trong những đổi mới thú vị nhất mà Web cung cấp. Chúng đã là một tính năng của Web ngay từ đầu và là thứ làm cho Web trở thành một trang web. Siêu liên kết cho phép chúng tôi liên kết tài liệu với các tài liệu hoặc tài nguyên khác, liên kết đến các phần cụ thể của tài liệu hoặc cung cấp ứng dụng tại một địa chỉ web. Hầu hết mọi nội dung web đều có thể được chuyển đổi thành một liên kết để khi được nhấp hoặc kích hoạt, trình duyệt web sẽ chuyển đến một địa chỉ web (URL) khác Ghi chú. Một URL có thể trỏ tới các tệp HTML, tệp văn bản, hình ảnh, tài liệu văn bản, tệp video và âm thanh hoặc bất kỳ thứ gì khác tồn tại trên Web. Nếu trình duyệt web không biết cách hiển thị hoặc xử lý tệp, nó sẽ hỏi bạn có muốn mở tệp không (trong trường hợp đó, nhiệm vụ mở hoặc xử lý tệp được chuyển cho một ứng dụng gốc phù hợp trên thiết bị) Ví dụ: trang chủ của BBC chứa nhiều liên kết trỏ đến không chỉ nhiều câu chuyện tin tức mà còn cả các khu vực khác nhau của trang web (chức năng điều hướng), trang đăng nhập/đăng ký (công cụ người dùng), v.v. Giải phẫu của một liên kếtLiên kết cơ bản được tạo bằng cách gói văn bản hoặc nội dung khác, xem Liên kết cấp khối, bên trong phần tử 5 và sử dụng thuộc tính 6, còn được gọi là Tham chiếu siêu văn bản hoặc đích, chứa địa chỉ web
Điều này cho chúng ta kết quả sau Tôi đang tạo một liên kết đến trang chủ Mozilla Thêm thông tin hỗ trợ với thuộc tính tiêu đềMột thuộc tính khác mà bạn có thể muốn thêm vào các liên kết của mình là 7. Tiêu đề chứa thông tin bổ sung về liên kết, chẳng hạn như loại thông tin mà trang chứa hoặc những điều cần lưu ý trên trang web
Điều này mang lại cho chúng tôi kết quả sau và di chuột qua liên kết sẽ hiển thị tiêu đề dưới dạng chú giải công cụ Tôi đang tạo một liên kết đến trang chủ Mozilla Ghi chú. Tiêu đề liên kết chỉ được hiển thị khi di chuột, điều đó có nghĩa là những người dựa vào điều khiển bàn phím hoặc màn hình cảm ứng để điều hướng các trang web sẽ gặp khó khăn khi truy cập thông tin tiêu đề. Nếu thông tin của tiêu đề thực sự quan trọng đối với khả năng sử dụng của trang thì bạn nên trình bày nó theo cách mà tất cả người dùng đều có thể truy cập được, chẳng hạn bằng cách đặt nó trong văn bản thông thường học tích cực. tạo liên kết ví dụ của riêng bạnTạo tài liệu HTML bằng trình chỉnh sửa mã cục bộ của bạn và mẫu bắt đầu của chúng tôi
Liên kết cấp khốiNhư đã đề cập trước đây, hầu hết mọi nội dung đều có thể được tạo thành một liên kết, ngay cả các phần tử cấp khối. Nếu bạn có một hình ảnh muốn tạo thành một liên kết, hãy sử dụng phần tử 5 và tham chiếu tệp hình ảnh với phần tử 9
Ghi chú. Bạn sẽ tìm hiểu thêm về cách sử dụng hình ảnh trên Web trong một bài viết sau Sơ lược nhanh về URL và đường dẫnĐể hiểu đầy đủ các mục tiêu liên kết, bạn cần hiểu URL và đường dẫn tệp. Phần này cung cấp cho bạn thông tin bạn cần để đạt được điều này URL hoặc Bộ định vị tài nguyên thống nhất là một chuỗi văn bản xác định vị trí của một thứ gì đó trên Web. Ví dụ: trang chủ tiếng Anh của Mozilla được đặt tại 0URL sử dụng đường dẫn để tìm tệp. Đường dẫn chỉ định vị trí của tệp bạn quan tâm trong hệ thống tệp. Hãy xem một ví dụ về cấu trúc thư mục, xem thư mục tạo siêu liên kết Gốc của cấu trúc thư mục này được gọi là 1. Khi làm việc cục bộ với một trang web, bạn sẽ có một thư mục chứa toàn bộ trang web. Bên trong thư mục gốc, chúng tôi có một tệp 2 và một tệp 3. Trong một trang web thực, 2 sẽ là trang chủ hoặc trang đích của chúng tôi (một trang web đóng vai trò là điểm vào cho một trang web hoặc một phần cụ thể của trang web. )Ngoài ra còn có hai thư mục bên trong thư mục gốc của chúng tôi - 5 và 6. Mỗi cái này có một tệp duy nhất bên trong chúng - tệp PDF ( 7) và tệp 2, tương ứng. Lưu ý rằng bạn có thể có hai tệp 2 trong một dự án, miễn là chúng ở các vị trí hệ thống tệp khác nhau. 2 thứ hai có lẽ sẽ là trang đích chính cho thông tin liên quan đến dự án
Ghi chú. Ví dụ: bạn có thể kết hợp nhiều phiên bản của các tính năng này thành các URL phức tạp. 95mảnh tài liệuCó thể liên kết đến một phần cụ thể của tài liệu HTML, được gọi là đoạn tài liệu, thay vì chỉ đến đầu tài liệu. Để làm điều này, trước tiên bạn phải gán thuộc tính 96 cho phần tử mà bạn muốn liên kết đến. Nó thường hợp lý để liên kết đến một tiêu đề cụ thể, vì vậy tiêu đề này sẽ trông giống như sau 8Sau đó, để liên kết đến 96 cụ thể đó, bạn nên đưa nó vào cuối URL, trước ký hiệu dấu thăng/pound ( 98), chẳng hạn 1Bạn thậm chí có thể tự mình sử dụng tham chiếu đoạn tài liệu để liên kết đến một phần khác của tài liệu hiện tại 2URL tuyệt đối so với URL tương đốiHai thuật ngữ bạn sẽ bắt gặp trên Web là URL tuyệt đối và URL tương đối URL tuyệt đối. Trỏ tới một vị trí được xác định bởi vị trí tuyệt đối của nó trên web, bao gồm cả giao thức và tên miền. Ví dụ: nếu một trang 2 được tải lên một thư mục có tên là 6 nằm bên trong thư mục gốc của máy chủ web và miền của trang web là 51, thì trang đó sẽ có sẵn tại 52 (hoặc thậm chí chỉ là 53, vì hầu hết các máy chủ web chỉ xem . )Một URL tuyệt đối sẽ luôn trỏ đến cùng một vị trí, bất kể nó được sử dụng ở đâu URL tương đối. Trỏ tới một vị trí có liên quan đến tệp mà bạn đang liên kết từ đó, giống như những gì chúng ta đã xem xét trong phần trước. Ví dụ: nếu chúng tôi muốn liên kết từ tệp ví dụ của chúng tôi tại 52 đến tệp PDF trong cùng thư mục, thì URL sẽ chỉ là tên tệp — 7 — không cần thêm thông tin. Nếu PDF có sẵn trong một thư mục con bên trong 6 được gọi là 5, thì liên kết tương đối sẽ là 91 (URL tuyệt đối tương đương sẽ là 80. )Một URL tương đối sẽ trỏ đến các vị trí khác nhau tùy thuộc vào vị trí thực tế của tệp mà bạn tham chiếu từ đó — ví dụ: nếu chúng tôi chuyển tệp 2 của mình ra khỏi thư mục 6 và vào thư mục gốc của trang web (cấp cao nhất, không có trong bất kỳ thư mục nào) Tất nhiên, vị trí của tệp 7 và thư mục 5 sẽ không thay đổi đột ngột vì bạn đã di chuyển tệp 2 — điều này sẽ khiến liên kết của bạn trỏ đến sai vị trí, vì vậy nó sẽ không hoạt động nếu bạn nhấp vào. bạn cần cẩn thậnLiên kết thực tiễn tốt nhấtCó một số thực hành tốt nhất để làm theo khi viết liên kết. Bây giờ chúng ta hãy nhìn vào những điều này Sử dụng từ ngữ liên kết rõ ràngThật dễ dàng để ném các liên kết lên trang của bạn. Như thế là không đủ. Chúng tôi cần làm cho tất cả người đọc có thể truy cập các liên kết của mình, bất kể bối cảnh hiện tại của họ là gì và họ thích công cụ nào hơn. Ví dụ
Hãy xem xét một ví dụ cụ thể Văn bản liên kết tốt. Tải xuống Firefox 3Văn bản liên kết xấu. Nhấn vào đây để tải Firefox 0mẹo khác
Liên kết đến các tài nguyên không phải HTML — để lại biển chỉ dẫn rõ ràngKhi liên kết tới một tài nguyên sẽ được tải xuống (chẳng hạn như tài liệu PDF hoặc Word), được phát trực tuyến (như video hoặc âm thanh) hoặc có tác dụng không mong muốn tiềm ẩn khác (mở cửa sổ bật lên hoặc tải phim Flash), bạn nên thêm từ ngữ rõ ràng Ví dụ
Hãy xem xét một số ví dụ, để xem loại văn bản nào có thể được sử dụng ở đây 1Sử dụng thuộc tính tải xuống khi liên kết với tải xuốngKhi bạn đang liên kết đến một tài nguyên sẽ được tải xuống thay vì mở trong trình duyệt, bạn có thể sử dụng thuộc tính 89 để cung cấp tên tệp lưu mặc định. Đây là một ví dụ với liên kết tải xuống phiên bản Windows mới nhất của Firefox 2học tích cực. tạo menu điều hướngĐối với bài tập này, chúng tôi muốn bạn liên kết một số trang với một menu điều hướng để tạo một trang web nhiều trang. Đây là một cách phổ biến mà một trang web được tạo ra — cùng một cấu trúc trang được sử dụng trên mọi trang, bao gồm cùng một menu điều hướng, vì vậy khi các liên kết được nhấp vào, nó sẽ tạo ấn tượng rằng bạn đang ở cùng một nơi và nội dung khác là Bạn sẽ cần tạo các bản sao cục bộ của bốn trang sau, tất cả trong cùng một thư mục. Để có danh sách tệp đầy đủ, hãy xem thư mục menu-menu-bắt đầu
Bạn nên
Ví dụ hoàn thành sẽ trông giống như trang sau Ghi chú. Nếu bạn gặp khó khăn hoặc không chắc mình đã hiểu đúng hay chưa, bạn có thể kiểm tra thư mục navigation-menu-marked-up để xem câu trả lời chính xác Liên kết emailCó thể tạo các liên kết hoặc nút mà khi được nhấp vào sẽ mở một email gửi đi mới thay vì liên kết đến một tài nguyên hoặc trang. Điều này được thực hiện bằng cách sử dụng phần tử 5 và lược đồ URL 11Ở dạng cơ bản nhất và thường được sử dụng, liên kết 11 cho biết địa chỉ email của người nhận dự định. Ví dụ 3Điều này dẫn đến một liên kết trông như thế này. Gửi email đến hư không Trên thực tế, địa chỉ email là tùy chọn. Nếu bạn bỏ qua nó và 6 của bạn là "mailto. ", một cửa sổ email gửi đi mới sẽ được mở bởi ứng dụng email của người dùng mà không có địa chỉ đích. Điều này thường hữu ích vì liên kết "Chia sẻ" mà người dùng có thể nhấp để gửi email đến địa chỉ họ chọnChỉ định chi tiếtNgoài địa chỉ email, bạn có thể cung cấp các thông tin khác. Trên thực tế, bất kỳ trường tiêu đề thư tiêu chuẩn nào cũng có thể được thêm vào URL 14 mà bạn cung cấp. Những từ được sử dụng phổ biến nhất trong số này là "subject", "cc" và "body" (không phải là trường tiêu đề thực, nhưng cho phép bạn chỉ định một thông báo nội dung ngắn cho email mới). Mỗi trường và giá trị của nó được chỉ định làm cụm từ truy vấnĐây là một ví dụ bao gồm cc, bcc, chủ đề và nội dung 4Ghi chú. Các giá trị của từng trường phải được mã hóa URL bằng các ký tự không in được (các ký tự vô hình như tab, dấu xuống dòng và dấu ngắt trang) và phần trăm thoát dấu cách. Ngoài ra, hãy lưu ý việc sử dụng dấu chấm hỏi (_______415) để phân tách URL chính khỏi các giá trị trường và dấu và (&) để phân tách từng trường trong URL 11. Đây là ký hiệu truy vấn URL tiêu chuẩn. Đọc Phương thức GET để hiểu ký hiệu truy vấn URL nào được sử dụng phổ biến hơn choDưới đây là một số URL 14 mẫu khác
Kiểm tra kỹ năng của bạnBạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . liên kết Bản tóm tắtĐó là cho các liên kết, bây giờ dù sao đi nữa. Bạn sẽ quay lại các liên kết sau này trong khóa học khi bạn bắt đầu xem xét cách tạo kiểu cho chúng. Tiếp theo đối với HTML, chúng ta sẽ quay lại ngữ nghĩa văn bản và xem xét một số tính năng nâng cao/bất thường hơn mà bạn sẽ thấy hữu ích — Định dạng văn bản nâng cao là điểm dừng tiếp theo của bạn Văn bản có thể nhấp trong một trang web là gì? văn bản neo là gì? . Trong các trình duyệt hiện đại, nó thường có màu xanh lam và được gạch chân, chẳng hạn như liên kết này tới trang chủ Moz.
3 loại siêu liên kết trong HTML là gì?Siêu liên kết văn bản – Sử dụng một từ hoặc cụm từ để đưa khách truy cập đến một trang, tệp hoặc tài liệu khác. Siêu liên kết hình ảnh – Sử dụng hình ảnh để đưa khách truy cập đến một trang, tệp hoặc tài liệu khác. Siêu liên kết đánh dấu – Sử dụng văn bản hoặc hình ảnh để đưa khách truy cập đến một phần khác của trang web |