Khái niệm cơ bản về HTML: Làm việc với các liên kết Thẻ A và các thuộc tính của nó rel, target, name

Nhãn là một trong những thành phần quan trọng của HTML và được dùng để tạo liên kết. Tùy thuộc vào sự hiện diện của tên tham số hoặc thẻ href đặt một liên kết hoặc neo. Điểm neo là dấu trang trong một trang có thể được chỉ định làm mục tiêu liên kết. Khi bạn sử dụng một liên kết trỏ đến một điểm neo, bạn sẽ được đưa tới một dấu trang trong trang web.

Tùy chọn

Ví dụ về việc sử dụng thẻ

Nhìn vào bức ảnh của tôi!

Mô tả thông số thẻ

Giữa các thẻ Và Không cần thiết phải viết văn bản vì bạn chỉ cần cho biết vị trí của liên kết.

Tham số này là bắt buộc đối với neo

Cú pháp

Ví dụ về Tạo điểm neo bằng tham số tên:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Đứng đầu

tham số MỤC TIÊU

Đây không phải là tham số bắt buộc.

Cú pháp

Tranh luận

Đối số là tên của cửa sổ hoặc khung được chỉ định bởi tham số tên. Nếu tên không tồn tại được đặt, một cửa sổ mới sẽ được mở. Sau đây được sử dụng làm tên dành riêng.

• _trống- Tải trang vào một cửa sổ trình duyệt mới.
• _bản thân- Tải trang vào cửa sổ hiện tại.
• _cha mẹ- Tải trang vào khung cha, nếu không có khung thì tham số này hoạt động như _bản thân.
• _đứng đầu- Hủy tất cả các khung và tải trang trong cửa sổ trình duyệt đầy đủ, nếu không có khung thì tùy chọn này hoạt động như _bản thân.

Giá trị mặc định là _bản thân.

Mở trong cửa sổ mới

tham số TITLE

Đây là một tham số tùy chọn.

Cú pháp

Ví dụ về tạo chú giải công cụ:

Bản vẽ

Xin chào các độc giả thân mến của trang blog. Tôi quyết định dành ấn phẩm hôm nay cho khía cạnh quan trọng nhất của quản trị trang web, nơi tôi sẽ cố gắng giải thích chi tiết siêu liên kết là gì, siêu liên kết này được liên kết chặt chẽ với nhau, do đó, không cường điệu, là nền tảng của Internet.

Nhưng để tạo chính xác các siêu liên kết và chèn chúng vào mã của các trang web (ví dụ: trang web của bạn), bạn cần nghiên cứu lĩnh vực tương ứng của ngôn ngữ đánh dấu siêu văn bản (), vì các phần tử này được hình thành bằng HTML một thẻ có khả năng nâng cấp liên kết lên loại mong muốn.

Vì vậy, hôm nay chúng ta sẽ xem siêu liên kết bao gồm những phần nào, cách sử dụng thuộc tính trống đích giúp mở một trang trong một cửa sổ (tab) mới, cách biến bất kỳ hình ảnh nào thành liên kết và nhiều chi tiết quan trọng khác. Trong số những thứ khác, thông tin này sẽ giúp bạn tiến bộ trong việc học ngôn ngữ HTML.

Siêu liên kết là gì và nó có thể được gọi là liên kết không?

Trả lời câu hỏi được đặt ra trong tiêu đề, tôi sẽ nói rằng thuật ngữ “liên kết” có phạm vi ngữ nghĩa rộng hơn (liên kết đến Siberia, ngân hàng để xác định người trả tiền, văn bản trong sách, v.v.), bao gồm cả ý nghĩa vốn có trong khái niệm về “siêu liên kết” , chỉ được liên kết với siêu văn bản, giúp có thể nhận biết thông tin phi tuyến tính.

Như vậy, siêu liên kết là trường hợp đặc biệt của liên kết, vì vậy hoàn toàn có thể sử dụng chúng trong các chủ đề ngày nay một cách bình đẳng. Đây là những gì tôi sẽ tận dụng trong suốt bài viết hôm nay, sử dụng cả hai thuật ngữ để tránh spam từ khóa không cần thiết.

Nhưng cũng có những dịch vụ vô hình, được tạo bằng cách sử dụng và nằm bên trong, có nhiệm vụ gửi nhiều tín hiệu và lệnh tới trình duyệt để thực hiện một chức năng cụ thể.

Ví dụ: bằng cách sử dụng siêu liên kết dịch vụ, có thể hiển thị một biểu tượng. Chúng chỉ có thể được xem như một phần của mã HTML (để thực hiện việc này, hãy nhấp vào bất kỳ trang nào đang mở trong trình duyệt):

Hiện tại, chúng ta hãy để các liên kết dịch vụ một mình và xem xét mô hình chung của việc tạo siêu liên kết. Điểm chung của họ là họ đều có thuộc tính href bắt buộc, giá trị của nó là địa chỉ tài liệu (). Liên kết HTML có thể dẫn đến trang nội bộ của trang web hoặc tài liệu bên ngoài.

Một lưu ý quan trọng hơn. Việc sử dụng thuộc tính href làm cho các siêu liên kết có thể nhấp được, nghĩa là nó cho phép người dùng tự động đi đến trang tương ứng của trang web sau khi nhấp vào chúng.

Cách tạo siêu liên kết trong HTML bằng href

Vì vậy, chúng ta đã biết rằng để tạo một liên kết, cần có thẻ a và thuộc tính href, các tham số của chúng có thể là các loại URL khác nhau. Bởi vì Một cái này, sau đó giữa phần mở đầu và đóng cửa chứa nội dung sẽ được hiển thị trên trang web.

Cái này nội dung được gọi là neo và có thể được trình bày dưới dạng văn bản hoặc hình ảnh (chúng ta sẽ nói thêm về cách tạo liên kết hình ảnh bên dưới). Như tôi đã lưu ý, neo sẽ có thể nhấp được. Hãy xem một ví dụ về siêu liên kết có nội dung văn bản. Đây là thiết kế của nó trong mã HTML:

một chút về mỏ neo

Ngoài HTTP, giao thức HTTPS an toàn có thể được sử dụng. Liên kết không nhất thiết phải dẫn đến một trang web. Tất cả phụ thuộc vào giá trị href, có thể là đường dẫn đến một số tệp:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

Tải xuống

Trên trang web, liên kết này sẽ có dạng sau:

Trình duyệt “hiểu” rằng một đối tượng có phần mở rộng .zip chỉ có thể dùng để tải xuống, đó là điều người dùng được nhắc thực hiện.

Nhân tiện, đường dẫn đến bất kỳ tệp nào đôi khi được chỉ định qua FTP(). Sau đó, trong URL được sử dụng làm tham số thuộc tính href, bạn chỉ cần thay thế giao thức HTTP (HTTPS) bằng FTP. Liên kết tập tin sẽ trông như thế này:

tải xuống từ máy chủ

Nhưng đó không phải là tất cả. Theo cách tương tự một liên kết email được tạo bằng giao thức giả mailtoĐể truy cập nhanh vào công cụ viết thư:

viết thư

Sau khi nhấp vào liên kết như vậy, một cửa sổ ứng dụng email mặc định sẽ xuất hiện, trong đó bạn có thể soạn văn bản của tin nhắn và gửi nó đến địa chỉ đã được chỉ định, như bạn có thể đoán, từ href.

Trong thực tế, các siêu liên kết tới thư trước đây thường được quản trị viên web và chủ sở hữu các tài nguyên lớn sử dụng để đảm bảo sự thuận tiện cho người dùng và khách hàng có thể truy cập biểu mẫu thư chỉ bằng một cú nhấp chuột.

Nhưng kiểu liên lạc trên các tài nguyên web này không còn quá phổ biến (đặc biệt là vì nó có thể được cài đặt chẳng hạn), vì các địa chỉ email được mở theo cách này sẽ bị phần mềm chủ động chặn và bị nhiều loại kẻ gửi thư rác sử dụng.

Tôi chỉ đưa ra ví dụ về các giao thức phổ biến nhất là một phần của URL, do đó, URL này là tham số của thuộc tính href khi hình thành siêu liên kết. Ngoài HTTP (HTTPS), FTP và mailto, còn có những giải pháp khác để giải quyết các vấn đề chuyên biệt hơn. Có lẽ chúng ta sẽ xem xét chúng chi tiết hơn trong các ấn phẩm khác.

Các loại siêu liên kết

Bây giờ hãy thử phân loại các liên kết theo tiêu chí nhất định.

Theo phạm vi của họ:

1. Bên ngoài— dẫn đến các trang nằm bên ngoài trang web mà chúng được đăng tải;

2. Nội địa— kết nối các trang web nằm trong cùng một tài nguyên web.

Theo định dạng:

2. Về mặt đồ họa e - trong trường hợp này, neo của siêu liên kết là một hình ảnh (bao gồm hình thu nhỏ), biểu ngữ, nút, v.v.

Theo loại URL phân phát dưới dạng giá trị của thuộc tính href:

1. tuyệt đối, chứa chỉ báo rõ ràng về giao thức truyền dữ liệu (ví dụ: HTTP) và tên miền của trang web (trong mọi thứ về miền).

Các liên kết như vậy thường được sử dụng nhất khi đề cập đến các trang từ nguồn bên ngoài. Trong trường hợp này, giá trị href sẽ bao gồm đường dẫn đầy đủ đến tệp hoặc trang web mong muốn. Đây là một ví dụ về siêu liên kết tuyệt đối:

Bối cảnh - nó là gì?

2. Liên quan đến, một trong các tùy chọn để tạo sẽ là đường dẫn được chỉ định liên quan đến thư mục gốc của trang web (do đó có tên của loại siêu liên kết này). Trong trường hợp này, giao thức (HTTP) và tên miền trang web sẽ bị xóa khỏi URL:

Bối cảnh - nó là gì?

Các siêu liên kết tương đối trên một trang web có thể cung cấp liên kết đến các trang nội bộ. Ở dạng này chúng ngắn hơn, giúp cho việc viết mã HTML dễ dàng hơn. Tất nhiên, mọi thứ không đơn giản như vậy và yêu cầu phạm vi phủ sóng rộng hơn, bạn có thể thấy điều này nếu theo liên kết được cung cấp.

Các thuộc tính của thẻ

Bây giờ, hãy xem những thuộc tính nào khác tồn tại, ngoài href bắt buộc và chúng có thể ảnh hưởng như thế nào đến việc tạo siêu liên kết. Bạn có thể tìm thấy dữ liệu đầy đủ nhất về vấn đề này, có thể nói là "tận mắt" trên trang web chính thức của Hiệp hội W3C Quốc tế, nơi thông tin cập nhật xuất hiện nhanh nhất.

Chúng hoàn toàn giống nhau và bắt đầu mở trang web trong tab hiện tại. Nếu bạn muốn trang mở trong tab mới khi theo link thì nên thêm khi tạo link thuộc tính mục tiêu với tham số trống:

Bối cảnh - nó là gì?

Mặc dù một số quản trị viên web và chuyên gia SEO tin rằng sẽ tốt hơn nếu khách truy cập có cơ hội lựa chọn (nghĩa là không chỉ định trống mục tiêu), bởi vì nếu cần, trang có thể được mở trong tab mới bằng menu ngữ cảnh (di chuyển con trỏ đến liên kết, nhấp chuột phải và nhấp vào điểm thích hợp):

Hơn nữa, như bạn có thể thấy, trong trường hợp này người dùng có lợi thế là có thể mở trang web không chỉ trong một tab mới mà còn trong một cửa sổ mới(tùy chọn này không thể được triển khai qua HTML, chỉ sử dụng tập lệnh).

Nhưng tôi tin rằng không phải tất cả người dùng mới làm quen đều hoàn toàn quen thuộc với các khả năng và cài đặt của các trình duyệt phổ biến (). Rất có thể người đọc, sau khi theo dõi một siêu liên kết bên ngoài và mất dấu trang nguồn (thay vào đó, tài liệu người nhận sẽ xuất hiện), sẽ chỉ thất vọng đóng tab đó lại.

Do đó, chủ sở hữu tài nguyên web không chỉ có thể mất đi một khách truy cập đầy hứa hẹn mà còn bị suy giảm các yếu tố hành vi (), dẫn đến mất vị trí trang trong bảng xếp hạng.

Ngoài ra, việc mở một trang trong tab liền kề rất thuận tiện từ quan điểm khả năng sử dụng (). Người dùng theo siêu liên kết đến một trang web, nhận thông tin bổ sung và như thể không có chuyện gì xảy ra, tiếp tục nghiên cứu tài liệu chính.

Để tạo ra một bức tranh khách quan, cần nói thêm rằng việc áp dụng “target="_blank”” cho bất kỳ liên kết bên ngoài nào sẽ tiềm ẩn một số rủi ro bảo mật. Nếu bất kỳ ai quan tâm, bạn có thể đọc, trong đó đưa ra các đề xuất để khắc phục sự cố khi sử dụng mục tiêu trống, cũng như các tùy chọn thay thế để thực hiện tác vụ mở trang web trong tab mới.

Có vẻ như tôi đã lưu ý tất cả ưu và nhược điểm của việc sử dụng giá trị trống để mở siêu liên kết trong tab mới. Nếu bạn đọc các bài viết trên blog của tôi, có lẽ bạn đã đoán được thái độ của tôi đối với thông số thuộc tính mục tiêu này.

Hiện tại, ưu điểm của nó lớn hơn nhược điểm đối với tôi và tôi là người ủng hộ vô điều kiện. Dựa trên những thực tế trên, bạn có thể đưa ra ý kiến ​​​​của riêng mình về vấn đề này. Mặc dù...có tính đến sự xuất hiện của hoàn cảnh mới, nó có thể thay đổi.

Làm thế nào để tạo liên kết băm, neo và tại sao chúng lại cần thiết?

Tiếp theo, tôi muốn bạn chú ý đến một loại siêu liên kết khác, loại siêu liên kết này có thể hữu ích nếu nội dung trên một trang web khá đồ sộ và cần được cấu trúc để cải thiện khả năng điều hướng.

Bạn không cần phải tìm đâu xa để lấy ví dụ, chỉ cần nhìn vào mục lục của ấn phẩm này ngay từ đầu. Bạn có thấy có một danh sách các phần của bài viết? Các siêu liên kết đến những phần này chỉ là các liên kết băm. Sau khi nhấp vào bất kỳ phần nào trong số chúng, trình duyệt sẽ cuộn trang đến nơi bắt đầu phần tương ứng.

Các liên kết như vậy được tạo ra khá đơn giản. Đầu tiên bạn cần tạo mỏ neo bằng cách đặt nhãn tương ứng ở vị trí bắt buộc trên trang dưới dạng ID, đây là một trong những thuộc tính chung được áp dụng cho bất kỳ thẻ HTML nào.

Nhờ tính phổ biến của ID, các thẻ neo như vậy có thể được cài đặt ở hầu hết mọi nơi trên trang web. Vì văn bản thường được chia thành các đoạn văn nên chúng cũng có thể được áp dụng cho các tệp . Tôi chủ yếu đặt các điểm neo để chia bài viết thành các phần hợp lý:

Do đó, sau khi đánh dấu tất cả các vị trí cần thiết trong mã HTML, chúng tôi sẽ tạo siêu liên kết đến chúng. Để thực hiện điều này, cuối cùng, sau dấu gạch chéo cuối cùng “/” trong URL (như bạn đã biết, là giá trị của thuộc tính href), chúng ta viết tuần tự dấu thăng “#” và tên nhãn (ID ):

Làm thế nào để hình thành liên kết băm và neo?

Ngoài ra, nếu một liên kết neo như vậy được đặt trên cùng một trang với các liên kết neo thì một phần của URL cho đến và bao gồm cả dấu gạch chéo cuối cùng trước hàm băm có thể được bỏ qua và chỉ có “#” cộng với tên ID được sử dụng làm tham số href (thực chất đây là một trong những lựa chọn cho liên kết tương đối):

Làm thế nào để hình thành liên kết băm và neo?

Nghĩa là, khi biên soạn mục lục cho một cuốn sách hướng dẫn tối ưu hóa mã HTML, bạn có thể dễ dàng sử dụng tùy chọn gọn nhẹ này. Nếu bạn chỉ đặt một dấu thăng làm URL, không có tên của mã định danh, thì từ vị trí đặt liên kết đó, trang sẽ cuộn lên trên:

Đứng đầu

Trên thực tế, đây là tùy chọn đơn giản nhất, một lần nữa đóng vai trò là một lợi thế bổ sung cho khả năng sử dụng tài nguyên, vì nó giúp cuộc sống của khách truy cập dễ dàng hơn. Bạn có thể sử dụng một hình ảnh hấp dẫn làm mỏ neo để tạo nút.

Cách bỏ gạch chân và đổi màu link

Các nhà phát triển HTML đã nghĩ đến hầu hết tất cả các sắc thái có thể giúp tối ưu hóa khía cạnh này hoặc khía cạnh kia, điều tương tự cũng áp dụng cho các siêu liên kết. Ví dụ: đi theo một siêu liên kết đến một trang web khác rồi quay lại, người dùng sẽ thấy siêu liên kết đã đổi màu.

Nếu anh ta cần lặp lại những hành động như vậy nhiều lần, anh ta sẽ có thể nhanh chóng xác định những liên kết nào anh ta đã nhấp vào và những liên kết nào anh ta chưa nhấp vào. Tùy chọn này được bao gồm trong hầu hết mọi trình duyệt. Không cần phải giải thích việc này tiện lợi như thế nào và tiết kiệm được bao nhiêu thời gian.

Siêu liên kết mặc định và không phải CSS được đánh dấu bằng gạch chân và ba tùy chọn màu sắc, mỗi thuộc tính có thuộc tính riêng cho:

• liên kết - đặt màu của siêu liên kết trên trang web (màu xanh lam theo mặc định, được chỉ định là #0000ff);
• alink - màu của siêu liên kết đang hoạt động trong khoảng thời gian nó đang được trình duyệt web xử lý (màu đỏ #ff0000);
• vlink - màu của liên kết được người dùng truy cập (màu tím, #800080).

Làm cách nào bạn có thể thay đổi màu sắc của các liên kết mà trình duyệt hiển thị cho trang web của bạn? Chà, đối với một trang HTML đơn giản nơi các trang được tạo thủ công (và tôi nghĩ thực tế không còn tài nguyên đầy đủ chức năng thuộc loại này trong thực tế hiện đại, ngoại trừ có lẽ là nhật ký và trang đích đơn giản), bạn chỉ cần tìm thẻ mở và chỉ định các tham số cần thiết cho nó (nhân tiện, bạn có thể sử dụng tên của nó để chỉ màu), ví dụ:

Nếu bạn đã cài đặt hệ thống quản lý nội dung () để quản lý tài nguyên web của mình, thì bất kể bạn sử dụng loại công cụ nào, bạn cần mở để chỉnh sửa tệp chịu trách nhiệm hiển thị tiêu đề (header), trong đó có thẻ mở .

Nếu tài nguyên của bạn đang chạy WordPress, thì để triển khai ý tưởng này một cách thực tế, bạn có thể sử dụng nó như một công cụ để tự động chèn hình ảnh vào siêu liên kết, nơi trước tiên bạn chọn từ thư viện hoặc tải xuống hình ảnh mong muốn và chèn nó vào văn bản:

Sau đó chọn mã hình ảnh thu được và nhấn nút “liên kết” của trình chỉnh sửa, sau đó bạn dán siêu liên kết đã sao chép mong muốn vào cửa sổ xuất hiện:

Nhãn

Nhãn được sử dụng để tạo liên kết và neo (“neo”) trong tài liệu HTML.

Neo (“neo”) - được thiết kế để đặt dấu trang ở một vị trí nhất định trên trang web, để điều hướng tiếp theo đến trang đó thông qua một liên kết. Hơn nữa, điểm neo có thể ở bên trong trang hiện tại hoặc bên trong một trang khác được mở thông qua liên kết tới điểm neo. Để đặt một mỏ neo, hãy sử dụng thuộc tính name với tên của mỏ neo. Ngoài ra, bất kỳ thẻ nào có thuộc tính id đều có thể được sử dụng làm thẻ neo, bao gồm cả thẻ .

Không thể chứa: các thẻ khác ở bất kỳ cấp độ lồng nhau nào.

Ví dụ HTML: Sử dụng thẻ A

Hỗ trợ phiên bản HTML

Hỗ trợ trình duyệt

Tôi tin rằng không trang HTML nào có thể tồn tại mà không có ít nhất một siêu liên kết (hoặc chỉ một liên kết). Các liên kết có thể đến các trang hoặc trang web khác cũng như các tập tin, hình ảnh, v.v.

Liên kết có thể là bên ngoài và nội bộ, văn bản và đồ họa. Các liên kết bên ngoài đề cập đến các trang web hoặc đối tượng khác trên chúng, trong khi các liên kết nội bộ thì ngược lại, đề cập đến các phần khác nhau trên trang web của bạn. Liên kết văn bản là văn bản mà khi được nhấp vào sẽ đưa bạn đến một đối tượng khác hoặc mở nó ra, trong khi liên kết đồ họa là một đối tượng (thường là hình ảnh) cũng dùng để đi đến một trang, trang web khác hoặc, chẳng hạn như hình ảnh. Các liên kết trong HTML được tạo bằng cách sử dụng thẻ (từ neo tiếng Anh - Anchor). Tiếp theo tôi sẽ cho bạn biết thêm về các liên kết.

Thẻ có thuộc tính href quan trọng và chính. Giá trị của nó là đường dẫn đến đối tượng hoặc trang web mà liên kết của chúng tôi đề cập đến dưới dạng URL. Anchor (nội dung liên kết) có thể là văn bản (liên kết văn bản) hoặc hình ảnh (liên kết đồ họa). Nếu bạn cần tạo một liên kết đồ họa, bạn cần sử dụng thẻ IMG giữa các thẻ làm điểm neo. Đây là một mã HTML mẫu đơn giản cho một liên kết:

văn bản liên kết (neo)

Tôi sẽ cho bạn một ví dụ khác để bạn có thể hiểu rõ hơn. Tôi sẽ sử dụng trang web của mình làm cơ sở:

Trên trang html trong trình duyệt, nó sẽ trông như thế này:

Màu của văn bản liên kết được đặt theo thuộc tính trong thẻ BODY. Nói một cách đơn giản, các liên kết phải tuân theo các thuộc tính sửa đổi giống như văn bản trên trang. Điều này bao gồm in đậm và in nghiêng, sử dụng tiêu đề, v.v.

Sau đây sẽ xuất hiện trên trang html:

Chúng tôi nhận được kết quả mà không có khung:

Trang chủ 1seo

Như bạn đã nhận thấy, việc chuyển sang trang khác được thực hiện trong cùng một cửa sổ. Nếu bạn muốn liên kết mở trong một cửa sổ khác hoặc cửa sổ chính (theo mặc định nó nằm trong cùng một cửa sổ), bạn có thể sử dụng thuộc tính đích sau của thẻ A:

• _blank — mở trang trong một cửa sổ mới;
• _parent - tải một liên kết trong cửa sổ chính;
• _self - mặc định. Mở liên kết trong cùng một cửa sổ.

Trang chủ của website 1seo

Ngoài ra còn có thuộc tính tiêu đề để tạo chú giải công cụ cho một liên kết:

Trang chủ của website 1seo

chữ

Nhân tiện, nếu bạn chỉ định hộp thư của mình trong URL và chỉ định giao thức mailto: thì khi bạn nhấp vào liên kết của mình, chương trình thư sẽ mở ra, nơi địa chỉ hộp thư của bạn sẽ được nhập vào trường Đến. Trong ví dụ, mã HTML sẽ như thế này:

Viết cho tôi một tin nhắn

Tôi đã cố gắng viết những điều chính bạn cần để tạo một liên kết trong HTML. Nhân tiện, nếu bạn đã đọc các bài viết trước của Hướng dẫn HTML thì tôi có thể tự tin nói rằng bạn đã biết những điều tối thiểu để tạo trang HTML chính thức đầu tiên của mình. Sau khi tạo một trang, bạn có thể tải nó lên dịch vụ lưu trữ miễn phí và xem thành quả lao động của mình. Hãy tin tôi, sau khi làm được điều này, bạn sẽ có thêm nguồn năng lượng sáng tạo dồi dào hơn nữa. Tiếp theo, tôi sẽ cho bạn biết cách tạo bảng trong HTML. Đây cũng là thông tin rất quan trọng, hãy cố gắng tiếp thu và tiêu hóa nó hoàn toàn.