• nội tuyến

Opera Software

Giải phẫu của một mỏ neo

Bạn có thể biến bất kỳ phần tử hoặc văn bản nội tuyến nào thành liên kết HTML bằng cách thêm phần tử

Opera Software

Opera Software

Khách truy cập kích hoạt liên kết này [bằng cách nhấp chuột, kích hoạt bằng bàn phím hoặc thậm chí bằng giọng nói trong một số trường hợp] sẽ rời khỏi trang hiện tại và chuyển đến trang chủ Opera. Có nhiều thay đổi hơn xảy ra với chính liên kết và chúng ta sẽ xem xét những thay đổi đó sau khi nói về kiểu dáng liên kết

Thẻ neo có một số thuộc tính bạn có thể thêm

• Opera Software
  
  
  
  

  7 khác

• Opera Software
  
  
  
  

  7 có thể đóng một số vai trò, tùy thuộc vào thuộc tính nào được đặt. Thuộc tính phổ biến nhất mà bạn sẽ sử dụng là thuộc tính

  Opera Software
  
  
  
  

  7 để biến nó thành một trang neo. Neo trang là mục tiêu trong trang cho các liên kết khác trên trang đó. Bạn liên kết với chúng bằng cách đặt ID vào thuộc tính

  Jump to a001

• Jump to a002
• Jump to a003

Jump to Menu

4

Thật tiện lợi, hầu hết các trình duyệt ngày nay đều cho phép bạn viết điều này dưới dạng “tốc ký” bằng cách đặt ID trực tiếp vào phần tử bạn muốn liên kết đến, như thế này

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

5

Điều này đơn giản hơn nhiều và chúng tôi khuyên bạn nên làm theo cách này bất cứ khi nào có thể

HTML sau chứa các ví dụ về các loại liên kết khác nhau

Mở tệp này trong trình duyệt bạn chọn và thử nghiệm với nó. Bạn sẽ thấy rằng việc kích hoạt bất kỳ liên kết nào trong danh sách đầu tiên sẽ chuyển đến phần thích hợp của cùng một trang. Bạn cũng có thể nhận ra rằng URL trong thanh vị trí của trình duyệt của bạn đã thay đổi và hiện hiển thị mã định danh đoạn ở cuối URL, điều đó có nghĩa là khách truy cập có thể đánh dấu phần này hoặc gửi liên kết qua email cho người khác để gửi cho họ chính xác nơi họ nên đến. Tóm lại

• Liên kết neo có thể có mã định danh phân đoạn là giá trị của thuộc tính

  Opera Software
  
  
  
  

  7 để bao gồm một số thông tin bổ sung. Trình duyệt sẽ hiển thị chú giải công cụ khi khách truy cập di con trỏ chuột qua liên kết. Chú giải công cụ thường cho họ biết nội dung của liên kết. Ví dụ: bạn có thể giới thiệu nhỏ về nội dung và vị trí của tài liệu được liên kết

  
  TAG index
  
  Anchor example
  
  Jump to a001

• Jump to a002
• Jump to a003

Jump to Menu

9

Tuy nhiên, bạn không thể mong đợi khách truy cập có đủ kiên nhẫn và phối hợp tay mắt để dựa vào thông tin quan trọng này. Người dùng khiếm thị, những người không thể nhìn rõ trang [hoặc có thể không nhìn thấy gì], rất có thể không tiếp cận được thông tin này. Mặc dù trình đọc màn hình có tùy chọn đọc thuộc tính

Jump to a001
Jump to a002
Jump to a003


a001
paragraph text ...

a002
paragraph text ...

a003
paragraph text ...



Jump to Menu

2

Bằng cách cung cấp thông tin về các tệp được liên kết và bản chất của chúng, bạn để khách truy cập của mình quyết định phải làm gì với chúng, thay vì mong đợi họ có một số cài đặt trình duyệt hoặc phần mềm được cài đặt sẵn. Ví dụ, nếu bạn kết hợp thông tin đó với kiểu dáng thông minh, bạn thậm chí có thể làm cho các liên kết đó trông hấp dẫn và trực quan hơn bằng cách đưa ra các loại liên kết khác nhau có biểu tượng dễ nhận biết [xem thêm về điều này trong hướng dẫn/Danh sách kiểu dáng và liên kết]. Nếu muốn an toàn, bạn cũng có thể cung cấp phần trợ giúp giải thích các định dạng tệp khác nhau là gì và nơi bạn có thể lấy phần mềm cần thiết để hiển thị chúng

Bên ngoài so với. liên kết nội bộ

Một trong những nỗi sợ hãi lớn nhất đối với các trang web kinh doanh là mọi người rời khỏi trang web sớm. Đây thường là lý do khiến các trang web không cung cấp liên kết của bên thứ ba [trừ khi bên thứ ba trả tiền để có đặc quyền có lưu lượng truy cập web hướng đến họ]. Chúng ta sẽ quay lại đánh giá lỗi này sau;

Khung và cửa sổ bật lên — chỉ cần nói không

Nỗi sợ mất khách truy cập vào các trang web khác trong khi vẫn muốn liên kết với chúng đã mang lại cho chúng tôi hai đổi mới [?] trong quá trình phát triển web vốn là một cái gai đối với khía cạnh khả năng sử dụng trong nhiều năm. khung và cửa sổ bật lên

Sử dụng khung HTML có nghĩa là bạn tách trang được hiển thị trong trình duyệt thành nhiều tài liệu khác nhau. Lợi ích là tài liệu dường như vẫn giữ nguyên ngay cả khi bạn tải nội dung khác, từ máy chủ của riêng bạn hoặc từ máy chủ của bên thứ ba. Đây là nơi tính hữu dụng kết thúc, tuy nhiên. Nói một cách đơn giản, các khung hình mang lại trải nghiệm người dùng tồi tệ. Ví dụ: khi một trang web sử dụng khung

• Công cụ tìm kiếm không thể lập chỉ mục toàn bộ trang. Trong kết quả tìm kiếm, thay vào đó, chúng có thể chỉ hiển thị các phần của trang không có ý nghĩa ngoài ngữ cảnh
• Khách truy cập không thể đánh dấu trang trong tình trạng họ xem nó. Lần tới khi họ mở dấu trang đó, họ sẽ thấy trạng thái ban đầu của bộ khung, không phải trang khi họ rời khỏi nó
• Những khách truy cập phụ thuộc vào công nghệ hỗ trợ gặp rất nhiều khó khăn khi điều hướng xung quanh các bộ khung
• Các bên thứ ba có thể không muốn các trang web của họ được hiển thị bên trong một bộ khung và do đó sử dụng các tập lệnh “bộ ngắt khung” để thay thế các bộ khung bằng URL thực khi bạn cố gắng nhúng chúng. Điều này cũng được sử dụng để ngăn chặn bọn tội phạm dụ dỗ người dùng Internet nhập thông tin cá nhân vào một

trang web có vẻ hợp pháp [“lừa đảo”]

Các liên kết bên trong một bộ khung sử dụng thuộc tính

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

Tóm lại, không sử dụng thuộc tính

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

Lợi ích của outbound và inbound link

Có một số lý do chính đáng để liên kết đến các trang web của bên thứ ba ngay cả khi họ là đối thủ cạnh tranh

• Nó mang lại cho bạn sự tín nhiệm trong mắt khách truy cập, cho họ biết rằng bạn rất chắc chắn về chất lượng nội dung của mình đến mức bạn không tránh khỏi sự cạnh tranh
• Đó là một cơ hội để cung cấp một dịch vụ đầy đủ. Bạn có thể liên kết đến nội dung và bài viết hoặc thậm chí là sản phẩm trên các trang web khác mà bạn không đề cập nhưng điều đó có thể gây hứng thú cho những khách truy cập muốn tìm hiểu sâu hơn về chủ đề hiện tại
• Bạn có thể chứng minh một quan điểm bằng cách xây dựng bài viết cũ hơn của bên thứ ba và đưa ra giải pháp tốt hơn hoặc khác biệt trong khi tham khảo bài viết cũ thông qua liên kết

Tính hữu ích của các liên kết trong nước [liên kết trỏ từ trang web của bên thứ ba đến trang web của bạn] ít được tranh luận hơn. Các trang web chất lượng cao khác liên kết với trang web của bạn càng thường xuyên thì bạn càng có thứ hạng cao hơn trong các công cụ tìm kiếm. Tuy nhiên, trước khi điều đó xảy ra, bạn cần chứng minh rằng bạn không ngại liên kết với những người khác

Điều này đưa chúng ta đến một phần rất quan trọng khác của việc tạo liên kết tốt. làm thế nào để từ chúng

từ ngữ liên kết

Chúng tôi đã đề cập ngắn gọn về điều này trong phần về liên kết đến các tài nguyên không phải HTML, nhưng thật tốt khi tự nhắc nhở bản thân rằng các liên kết không chỉ là các yếu tố tương tác mà còn là một phần không thể thiếu của bản sao trang.

Một số công nghệ hỗ trợ sẽ cung cấp một danh sách các liên kết thay vì toàn bộ tài liệu để cho phép khách truy cập nhanh chóng điều hướng và tìm liên kết họ muốn. Điều này có nghĩa là văn bản liên kết của bạn cần phải có ý nghĩa ngoài ngữ cảnh cũng như trong ngữ cảnh. Bạn có thể dễ dàng kiểm tra điều này trong Opera bằng cách mở bất kỳ trang web nào và chọn

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

Bạn cũng nên đảm bảo rằng trang của mình không chứa nhiều liên kết có cùng cách diễn đạt nhưng trỏ đến các tài nguyên khác nhau. Sai lầm kinh điển là các liên kết “bấm vào đây”, có nội dung như "Để tải xuống phiên bản mới nhất của công cụ của chúng tôi, hãy nhấp vào đây". Sẽ tốt hơn nhiều nếu sử dụng văn bản liên kết giải thích những gì liên kết trỏ đến. Ví dụ: chuyển câu đó thành “Bạn có thể tải xuống phiên bản mới nhất của công cụ của chúng tôi và tự mình dùng thử. ”

Điều tương tự cũng áp dụng cho các liên kết “thêm”. Chúng thường được tìm thấy trong các trang web tin tức, nơi bạn thấy một tiêu đề và một số văn bản giới thiệu, theo sau là liên kết “thêm” hoặc “câu chuyện đầy đủ”. Giải pháp cho vấn đề này là sử dụng hình ảnh “thêm” được liên kết với một số văn bản thay thế duy nhất hoặc thêm phần tử

Opera Software

Kiểu dáng liên kết

Việc xử lý đầy đủ kiểu dáng liên kết nằm ngoài phạm vi của bài viết này [nhưng bạn có thể tìm thêm thông tin trong hướng dẫn/Danh sách kiểu dáng và liên kết]. Tuy nhiên, điều quan trọng cần nhớ là hình thức của các liên kết là rất quan trọng và có một số trạng thái liên kết khác nhau cần xem xét. Các trạng thái liên kết [được gọi là bộ chọn lớp giả CSS] là

• 
  TAG index
  
  Anchor example
  
  Jump to a001

• Jump to a002
• Jump to a003

Jump to Menu

56 [mặc định] — xác định kiểu liên kết chưa được truy cập nói chung. Theo mặc định, các liên kết chưa được truy cập có màu xanh lam

TAG index

Anchor example

Jump to a001

Jump to a002

Jump to a003

Jump to Menu

57 — xác định kiểu liên kết đã được nhấp [đã truy cập]. Theo mặc định, các liên kết đã truy cập có màu tím

TAG index

Anchor example

Jump to a001

Jump to a002

Jump to a003

Jump to Menu

58 — xác định kiểu của một liên kết trong khi con trỏ chuột đang di chuột qua nó

TAG index

Anchor example

Jump to a001

Jump to a002

Jump to a003

Jump to Menu

59 — xác định kiểu của một liên kết khi nó được đặt tiêu điểm [hoặc được tô sáng] bằng cách nhấp chuột hoặc thông qua một cơ chế điều khiển thay thế khác như bàn phím

TAG index

Anchor example

Jump to a001

Jump to a002

Jump to a003

Jump to Menu

90 — xác định kiểu của liên kết khi nó được kích hoạt; . Đây cũng là kiểu của liên kết được kích hoạt lần cuối khi bạn đến một tài liệu bằng cách sử dụng chức năng Quay lại của trình duyệt

HTML5. liên kết cấp khối

Trong HTML4, phần tử

Opera Software

7 bị hạn chế chuyển các phần tử nội tuyến khác thành liên kết. Điều này tốt cho hầu hết các trường hợp, nhưng nó trở nên khó chịu, chẳng hạn như khi bạn muốn biến toàn bộ phần biểu ngữ quảng cáo chứa hình ảnh và đoạn văn thành một liên kết. Để mã vẫn hợp lệ, bạn sẽ phải bọc từng đoạn văn bản và từng hình ảnh trong liên kết riêng của nó — tất cả sẽ đến cùng một nơi — điều này không chỉ lặp đi lặp lại một cách khủng khiếp mà còn gây nhầm lẫn cho công nghệ hỗ trợ và người dùng của nó. Đặt một phần tử nội tuyến xung quanh một phần của nội dung cấp khối cũng làm cho kiểu dáng hoạt động kỳ lạ, trừ khi bạn nhớ đặt nó hiển thị giống như một phần tử cấp khối bằng CSS

May mắn thay, HTML5 loại bỏ hạn chế này, cho phép bạn đặt một liên kết duy nhất xung quanh bất kỳ lượng nội dung nào bạn muốn. Để nó hoạt động bình thường, bạn vẫn phải đặt liên kết hoạt động giống như một thành phần cấp khối, nhưng điều này dễ dàng và linh hoạt hơn nhiều so với trước đây. Hãy xem một ví dụ

Opera Software

5

Ở đây bạn có thể thấy rằng chúng ta có phần tử

Opera Software

7 bao bọc cả tiêu đề và đoạn văn. Để làm cho điều này hoạt động chính xác, chúng tôi đã đặt nó thành

TAG index

Anchor example

Jump to a001
Jump to a002
Jump to a003


Jump to Menu

93 trong CSS. Nếu bạn tự thử ví dụ, bạn sẽ thấy rằng toàn bộ khối là một phần của khu vực liên kết có thể nhấp. Tôi cũng đã thêm thay đổi màu nền khi di chuột để hiển thị rõ hơn

Phần kết luận

Chúng tôi đã đề cập rất nhiều trong bài viết này, nhưng có lẽ điều quan trọng nhất là nhớ không chỉ liên kết làm gì mà còn nhớ chúng nên làm gì

Sự khác biệt giữa ID và tên trong HTML là gì?

id được sử dụng để xác định phần tử HTML thông qua Mô hình đối tượng tài liệu [thông qua JavaScript hoặc được tạo kiểu bằng CSS]. id dự kiến ​​​​là duy nhất trong trang. tên tương ứng với thành phần biểu mẫu và xác định nội dung được đăng lại máy chủ

Tôi có thể sử dụng ID trong thẻ neo trong HTML không?

Thuộc tính id có thể được sử dụng để tạo một ký tự neo ở thẻ bắt đầu của bất kỳ phần tử nào [bao gồm cả phần tử A] . Ví dụ này minh họa việc sử dụng thuộc tính id để định vị một neo trong phần tử H2. Neo được liên kết thông qua phần tử A.

Chúng tôi có thể đặt tên cho thẻ neo không?

ID neo là gì?