Siêu liên kết - nó là gì, cách tạo liên kết và chèn mã vào HTML (href, mục tiêu trống và các thuộc tính khác của thẻ a). Target = "_blank" và các giá trị thuộc tính mục tiêu khác
Nhiều trang web sử dụng phương pháp mở các liên kết bên ngoài trong một cửa sổ mới. Ví dụ: thông thường, theo cách này, các liên kết đến trang web của nhà phát triển hoặc kết quả tìm kiếm sẽ được mở. máy tìm kiếm. Thông thường, thuộc tính thẻ được sử dụng cho việc này< >:
Nói chung, việc hướng dẫn người dùng cách mở một liên kết là không hay. Các chuyên gia về khả năng sử dụng trang web nhất trí khẳng định rằng chính người dùng có thể quyết định cách mở liên kết. Anh ấy sẽ sắp xếp các cửa sổ của mình mà không có mong muốn của chúng tôi về vấn đề này. Hơn nữa, chúng tôi cũng sẽ phá vỡ chức năng của nút “Quay lại” của trình duyệt tiêu chuẩn. Sự can thiệp thô bạo vào thói quen như vậy rất có thể sẽ gây ra sự thù địch!
Ngoài ra, còn tạo ra ấn tượng xấu: “Người dùng đang rời khỏi trang web! Có thể anh ấy sẽ không bao giờ quay lại đây nữa! À-ah-ah! Phải làm gì? hãy mở ra liên kết mới trong một cửa sổ khác! Có lẽ, khi anh ấy đã nhìn thấy mọi thứ mình cần, sau đó đóng cửa sổ này lại, anh ấy sẽ đến với chúng ta lần nữa và khi đó anh ấy chắc chắn sẽ trở thành khách quen!
Tôi hy vọng ý nghĩa đã rõ ràng - hãy lấp đầy trang web bằng những nội dung hữu ích và chất lượng cao nội dung thú vị và sau đó du khách sẽ quay trở lại một cách có ý thức và độc lập.
Tuy nhiên, ngoài vấn đề đạo đức, còn có khía cạnh kỹ thuật của vấn đề - thuộc tính mục tiêu không có trong đặc tả nghiêm ngặt của XHTML 1.0 và do đó sẽ không vượt qua được quá trình xác thực!
Giải pháp hợp lệ: JavaScript
Nếu, bất chấp các đoạn trước, bạn vẫn quyết định (hoặc bị buộc) mở trang trong một cửa sổ mới, thì ít nhất hãy làm điều đó một cách chính xác.
Đây là lúc JavaScript ra tay giải cứu. Hãy thử đánh chặn sự kiện onclick liên kết và buộc một cửa sổ mới mở bằng hàm window.open(). Sau đó, chúng tôi sẽ cấm theo liên kết trong cửa sổ gốc bằng cách chỉ định return false:
Liên kết sẽ mở trong một cửa sổ mới
Chúng tôi kiểm tra giải pháp kết quả: .
Mọi thứ đều tuyệt vời. Trình duyệt tự tin mở liên kết trong cửa sổ mới. Trình xác thực làm hài lòng chúng tôi bằng một thông báo thành công màu xanh lá cây. Có vẻ như bạn có thể bình tĩnh lại, nhưng thực tế không phải vậy! Hãy thử cài đặt trình chặn cửa sổ bật lên cứng trong trình duyệt của bạn và nhấp lại vào liên kết!
Một giải pháp tốt hơn
Trình chặn cửa sổ bật lên được thiết kế chủ yếu để chống lại các quảng cáo gây phiền nhiễu. Tính năng này có sẵn ở tất cả trình duyệt hiện đại. Một số trình duyệt thậm chí còn cung cấp cấp độ khác nhau chặn. Ví dụ: trong Opera 9+, bạn chỉ có thể chặn các cửa sổ “không mong muốn” hoặc mọi thứ.
Tôi không biết có bao nhiêu phần trăm người dùng gặp khó khăn triệt để với cửa sổ bật lên, nhưng chỉ với những cài đặt này, thay vì mở cửa sổ, một dấu nhắc nhỏ “cửa sổ bật lên bị chặn” sẽ chỉ xuất hiện. Hơn nữa, ngay cả biểu hiện phản hồi của trình duyệt này đối với một cú nhấp chuột cũng có thể bị tắt trong cài đặt. Trong trường hợp này, liên kết sẽ mất chức năng: “Tôi nhấp vào, nhưng không có gì xảy ra!”
Nếu sau khi đọc xong có ai đó nói: “Bạn không thể làm hài lòng tất cả mọi người! Chà, bác sĩ của họ là ai mà mọi thứ đều bị tắt đối với họ, thì chúng ta không đi chung đường với những người như vậy. Đối với phần còn lại chúng tôi sẽ tiếp tục.
Liên kết sẽ mở trong một cửa sổ mới
Ở đây chúng ta đã lợi dụng thực tế là hàm window.open() trả về true nếu cửa sổ được mở thành công và ngược lại là false. Nghĩa là, trong trường hợp liên kết được mở thành công trong một cửa sổ mới, chúng tôi sẽ chặn việc mở liên kết trong cửa sổ riêng của nó, bởi vì return sẽ là!true=false. Và ngược lại, nếu không mở được cửa sổ, trả về true sẽ cho phép link hoạt động bình thường.
Xin chào các độc giả thân mến của trang blog. Tôi quyết định dành tặng ấn phẩm ngày hôm nay khía cạnh quan trọng nhất 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ì, đượ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 ngôn ngữ liên quan đánh dấu siêu văn bản(), vì các phần tử này được hình thành bằng cách sử dụng thẻ HTML a, thẻ này có , cho phép bạn hiện đại hóa liên kết thành dạng 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ổ 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 này trương hợp đặc biệt liên kết, do đó 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ụ: 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):
Bây giờ, 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 bắt buộc href, giá trị của nó là địa chỉ tài liệu (). liên kết HTML có thể dẫn đến cả trang nội bộ của trang web và tài liệu bên ngoài.
Khác lưu ý quan trọng. 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
Như vậy, chúng ta đã biết rằng để tạo liên kết bạn cần bắt buộc thẻ a và thuộc tính href, tham số của chúng có thể là URL nhiều loại 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, bảo mật Giao thức HTTP S. 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 được tạo ra để e-mail sử dụng giao thức giả mailto Vì truy cập nhanhđến 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ổ sẽ xuất hiện với cài đặt mặc định ứng dụng thư, trong đó bạn có thể soạn nội dung tin nhắn và gửi nó đến địa chỉ được chỉ định, được lấy, 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 giao tiếp trên tài nguyên web này không còn quá phổ biến (đặc biệt là khi bạn có thể cài đặt chẳng hạn), vì mở theo cách này địa chỉ bưu chính bị phần mềm tích cực chặn và được 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 trang web (tất cả về tên miền).
Các liên kết như vậy thường được sử dụng nhiều nhất khi đề cập đến các trang có nguồn tài nguyên bên ngoài. Trong trường hợp này, giá trị href sẽ bao gồm đường dẫn đầy đủ tới tập tin mong muốn hoặc các trang web. Đâ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). Đồng thời, từ địa chỉ URL Giao thức (HTTP) và tên miền trang web sẽ bị thu hồi:
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 quốc tế W3C, nơi thông tin thực 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 cách sử dụng danh mục(di chuyển con trỏ đến liên kết, nhấp chuột phải và nhấp vào mục tương ứng):
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 trình duyệt phổ biến(). Rất có thể người đọc, sau khi truy cập 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 trở nên tồi tệ hơn. yếu tố hành vi(), điều này sẽ dẫn đến mất vị trí trang khi 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 đi theo một siêu liên kết đến một trang web và nhận được Thông tin thêm 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 bổ sung thêm việc áp dụng “target="_blank"” cho bất kỳ liện kết ngoại Hóa ra nó gây ra một số rủi ro về 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 và cũng được trình bày lựa chọn thay thế thực hiện nhiệm 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.
TRÊN khoảnh khắc nàyĐối với tôi, ưu điểm của nó nhiều hơn nhược điểm 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. 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 (trên thực tế, đây là một trong những lựa chọn tham chiếu 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ế, điều này lựa chọn đơn giản nhất, một lần nữa phục vụ lợi thế bổ sung khả năng sử dụng của tài nguyên vì nó làm cho cuộc sống của khách truy cập trở nên 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.
Theo mặc định và không có ứng dụng Công cụ CSS siêu liên kết đượ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à đăng ký cho anh ấy thông số bắt buộc(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 thực tế Bạn có thể sử dụng ý tưởng này làm công cụ để tự động chèn ảnh vào trong siêu liên kết, nơi bạn chọn lần đầu tiên từ thư viện hoặc tải xuống hình ảnh mong muốn và dá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:
Hầu hết các nhà phát triển web thậm chí không nhận ra:
Trang chúng tôi liên kết đến bằng cách sử dụng target="_blank" truy cập trang nguồn thông qua đối tượng window.opener.
Ví dụ, theo cách này ngay bây giờ tab mở có thể thay đổi window.opener.location, tức là Thay vì tab trước đó, hãy tải một trang hoàn toàn khác một cách âm thầm.
Điều tồi tệ nhất là lỗ hổng này xuất hiện trên nhiều trang web phổ biến trong và ngoài nước: mặc dù nó đã được sửa trên Facebook vài ngày trước nhưng nó vẫn hoạt động, chẳng hạn như trên Yandex.Mail.
Ví dụ tấn công
Dựa trên hành vi này của trình duyệt, bạn có thể đưa ra nhiều kịch bản, đây là kịch bản đơn giản nhất:
1. Một email được gửi đến nạn nhân, có thể từ một địa chỉ giả. Nội dung bức thư hoàn toàn không quan trọng: cái chính là ép nạn nhân truy cập vào một liên kết có mã độc. Ví dụ: đây có thể là một yêu cầu xem những chú mèo dễ thương như bên dưới. Yandex tự động thêm Target="_blank" vào tất cả các email.
2. Nạn nhân mở một lá thư trong Yandex.Mail, nhấp vào liên kết, liên kết này sẽ mở ra một trang đệm trong tab mới để thực hiện mã độc, thay vì Yandex.Mail, tải một trang web lừa đảo, rất giống với trang ban đầu, nhưng, chẳng hạn, yêu cầu bạn nhập lại thông tin đăng nhập và mật khẩu của mình, đồng thời, để xóa nghi ngờ, thực sự chuyển hướng đến mèo .
Một ví dụ về mã này:
// Thay thế Yandex.Mail ban đầu bằng một cái giả window.opener.location = "http://e-m-a.il/yandex.ru"; // Chuyển hướng đến mèo để loại bỏ nghi ngờ window.location = "https://imgur.com/0A5ZGBN";
3. Một nạn nhân tin tưởng Yandex và nhìn mèo quay lại tab trước với thư. Vì cô ấy không mở bất cứ thứ gì trong đó và cũng không thay đổi địa chỉ, nên rất có thể cô ấy sẽ bị lừa và nhập tên người dùng và mật khẩu của mình, những thông tin này thực sự sẽ được gửi cho kẻ tấn công.
Điều duy nhất có thể gây nghi ngờ là địa chỉ của trang này khác, nhưng nó có thể được làm rất giống với địa chỉ ban đầu và thiêt bị di động nó thường bị ẩn theo mặc định.
Sự đối đãi
May mắn thay, bạn có thể khắc phục mọi thứ khá dễ dàng: bạn cần thêm thuộc tính rel="noopener noreferrer" vào tất cả các liên kết có target="_blank" .
Tôi vui mừng chào đón bạn đến với trang blog! Trong bài viết hôm nay chúng ta sẽ bắt đầu nói về ngôn ngữ đánh dấu siêu văn bản html. Ấn phẩm này sẽ là tác phẩm đầu tiên thuộc loại này (và cũng không phải là tác phẩm cuối cùng), vì tôi chưa bao giờ viết bất cứ điều gì như thế này trước đây.
Kế hoạch đăng bài:
Nhưng bây giờ, khi tôi gõ kiến thức cần thiết và thử nghiệm chúng trong thực tế, tôi sẽ vui lòng chia sẻ chúng với độc giả của mình. Chẳng hạn, không phải vô cớ mà người ta đã bỏ ra bao nhiêu công sức và thời gian ở giai đoạn đầu để biết cách chèn liên kết vàohtml. Đương nhiên sau khi đọc bài viết của tôi bạn cũng sẽ biết và làm được điều này.
Nói chung, điều đáng lưu ý là thẻ liên kếtđơn giản là cần thiết trong công việc của những người tối ưu hóa, bởi vì bánh mì của họ chỉ là Tối ưu hóa công cụ tìm kiếm và, và tất nhiên, các chuyên gia trong lĩnh vực SEO rất có thể không thể làm được nếu không có liên kết, chứ đừng nói đến những blogger bình thường :).
Có lẽ, thẻ liên kết htmlMỘT là một trong những thứ tôi sử dụng nhiều nhất, cùng với thẻ img, cần thiết để hiển thị hình ảnh trong văn bản. Trung bình, trong mỗi bài viết tôi xuất bản có khoảng năm liên kết, cả hai đều dẫn đến trang nội bộ, và với những cái bên ngoài.
Đừng quên điều đó thẻ cho trang webhtml không chỉ được sử dụng khi viết bài. Ngoài ra, chúng sẽ cần thiết khi thay đổi mã của mẫu bạn đã cài đặt CMS WordPress hoặc bất kỳ hệ thống quản lý nội dung nào khác.
Vì vậy, bạn cần phải học ít nhất những điều cơ bản nhất thẻ html, để không gặp vấn đề gì sau này khi làm việc với các liên kết. Ví dụ: nếu bạn sử dụng " Trình chỉnh sửa trực quan“Khi bạn viết bài, điều này không tốt lắm, vì nếu trình soạn thảo này không hoạt động, bạn thậm chí sẽ không biết mã cơ bản để thêm liên kết.
Nói chung, kiến thức về các khái niệm cơ bản trong ngôn ngữ đánh dấu html, Tôi nghĩ nó sẽ giúp ích rất nhiều cho bạn và giúp cuộc sống của bạn dễ dàng hơn. Tuy nhiên, thời gian bạn dành bây giờ để nghiên cứu những tài liệu có thể mới đối với bạn sẽ không bị lãng phí.
Ngoài ra còn có nhiều sắc thái khác sẽ giúp công việc của bạn dễ dàng hơn và bạn sẽ đọc về những sắc thái đó bên dưới trong bài viết của tôi - đó là những sắc thái rel=”Không theo", Và mục tiêu = “_trống", và nhiều điều thú vị khác liên quan đến link.
Thẻ liên kết A – tạo siêu liên kết trong tài liệu html có và không có neo
Như tôi đã lưu ý ở trên, liên kết là một trong những thẻ html được tôi sử dụng nhiều nhất. Chúng cần thiết để người dùng có thể nỗ lực đặc biệt Di chuyển từ tài liệu này sang tài liệu khác chỉ bằng một cú nhấp chuột.
Tuy nhiên, để chỉ định đường dẫn tới siêu liên kết, bạn phải sử dụng thuộc tínhhref. Nhờ nó, bạn có thể và nên chỉ định URL của trang bạn muốn liên kết tới. Đây có thể là các trang nội bộ của trang web của bạn hoặc các trang của bất kỳ tài nguyên nào khác trên World Wide Web.
Mỏ neo thẻ html liên kết Một yếu tố quan trọng được tính đến robot tìm kiếm, vì vậy bạn cần chú ý đến nó Đặc biệt chú ý. Tôi khuyên bạn nên sử dụng nó trong neo từ khóa, mà bạn muốn bài viết của mình đạt được vị trí đầu tiên trong kết quả tìm kiếm.
Đã hiểu một chút về lý thuyết siêu liên kết trong tài liệu html, bạn có thể bắt đầu ví dụ rõ ràng. Đây là mã liên kết sẽ có:
Như bạn có thể thấy, liên kết bắt đầu bằng dấu ngoặc mở "<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа — «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».
Ngoài ra, tôi khuyên bạn nên sử dụng các liên kết không neo, vì nếu chỉ các siêu liên kết có neo dẫn đến tài nguyên của bạn, điều này có thể đặt ra câu hỏi cho các công cụ tìm kiếm và dẫn đến hậu quả xấu. Chắc hẳn bạn đã nghe nói về thuật toán giật gân của Google có cái tên đáng sợ Penguin :).
Mở liên kết trong một cửa sổ mới. thuộc tính target_blank
Chà, chúng tôi đã sắp xếp thẻ html A, nhưng đó không phải là tất cả. Có nhiều thuộc tính khác sẽ hữu ích cho bạn khi làm việc với các liên kết. Một trong số chúng - thuộc tínhmục tiêu_blank.
Cần thiết để liên kết bạn đã chèn vào tài liệu html mở ra trong cửa sổ trình duyệt Internet mới. Điều này rất hữu ích khi bạn đang viết một bài báo dài và tham khảo các ấn phẩm trước đây của mình. Do đó, trang người dùng đang đọc vẫn mở và các liên kết được mở trong các tab khác trong trình duyệt.
Mục tiêu trống trong html chúng được sử dụng rất thường xuyên vì nó giúp ích về mặt hành vi của khách truy cập trên trang web của bạn, tức là nó ảnh hưởng đến các yếu tố hành vi của nó. Do đó, nếu bạn vẫn không sử dụng thuộc tính đích với tham số _blank, tôi khuyên bạn nên đọc kỹ phần này.
Như bạn có thể nhận thấy, không có sự khác biệt cụ thể nào về vị trí đặt thuộc tính bắt buộc, vì thứ tự của chúng không quan trọng bên trong các thẻ html.
Thuộc tính rel nofollow và thẻ noindex. Chặn liên kết lập chỉ mục
Hãy bắt đầu làm việc với thuộc tính liên kết rel trong tài liệu HTML. Thuộc tính này với tham số nofollow được sử dụng để tránh chuyển trọng lượng trang của bạn sang bất kỳ trang nào khác.
Như bạn đã biết, bất kỳ trang nào, ngay cả trang vừa được tạo và không có liên kết bên ngoài từ các tài nguyên khác, đều có trọng số riêng, trên 0. Người dùng không thể nhìn thấy điều này, nhưng các công cụ tìm kiếm đều tính đến tất cả.
Do đó, để sức nặng bên trong các trang của bạn không bị trôi đi khỏi bạn, một số liên kết cần được kèm theo thuộc tính liên kết nofollow. Các liên kết bao gồm thuộc tính này sẽ không chuyển trọng số sang các trang web khác.
Một cách tự nhiên, thuộc tínhliên kết nofollow không nên được sử dụng khi bạn liên kết đến các trang nội bộ trên trang web của mình, vì liên kết nội bộ có thẩm quyền là chìa khóa để tối ưu hóa thành công tài nguyên và sự phát triển hơn nữa của tài nguyên đó.
Tôi chỉ sử dụng thuộc tính trên nếu tôi đang liên kết đến các trang bên ngoài. Ví dụ: như bạn có thể nhận thấy, ở cuối bài viết của tôi, tôi thường mời những người đăng bài trở thành độc giả của tôi trên Twitter () và đưa ra một liên kết đến tài khoản của tôi, đương nhiên tôi gửi liên kết này trong rel nofollow. Nó trông như thế này:
Một lần nữa, vị trí đặt rel nofollow, trước hoặc sau thuộc tính href, không thành vấn đề. Ngoài ra, trong các liên kết như vậy, bạn không nên viết từ khóa vào neo, vì điều này không có ý nghĩa gì, bởi vì trước tiên chúng tôi tạo một liên kếtKhông theo, có nghĩa là nó không chuyển trọng lượng.
Bây giờ đáng để thảo luận nhãnnoindex. Nó dùng để ngăn robot tìm kiếm lập chỉ mục các phần tử trang không cần thiết. Hơn nữa, điều này không chỉ áp dụng cho các siêu liên kết mà còn áp dụng cho một số phần văn bản nhất định.
Nhân tiện, khi tôi truy cập bất kỳ trang web nào, tôi ngay lập tức thấy siêu liên kết bị đóng ở đâu để lập chỉ mục và ngược lại, nó ở đâu, nó mở. Tất cả là nhờ tiện ích bổ sung tuyệt vời dành cho trình duyệt Opera. Ngoài ra, bằng cách sử dụng plugin này, tôi có thể theo dõi các thông số tài nguyên khác, chẳng hạn như AlexaRank.
Liên kết neo và cách thực hiện. Thuộc tính tên
Và bây giờ có lẽ mình sẽ khám phá được một điều rất thú vị đối với nhiều người khi làm việc với link. Cá nhân tôi chỉ biết về nó sau khi sử dụng WordPress hơn sáu tháng. Vì vậy, bây giờ chúng ta sẽ nói về liên kết neo.
Nhờ anh ấy, và cả khi sử dụng liên kết băm, bạn không chỉ có thể tham khảo một số bài viết mà còn có thể tham khảo một vị trí cần thiết trong đó, tức là đến một phần nhất định của văn bản. Điều này là cần thiết khi số lượng ấn phẩm rất lớn và sẽ khó tìm được thông tin cần thiết về nó.
Đầu tiên, trong bài viết mà bạn muốn liên kết đến, bạn cần chọn một phần văn bản mà trang sẽ cuộn tới trong trình duyệt Internet. Nghĩa là, nếu bạn đưa ra một liên kết, giả sử về một cài đặt (không phải ví dụ về neo), thì thuộc tính tên phải được đặt trong phần bắt buộc của ấn phẩm.
Như bạn có thể thấy, thuộc tính tên không có neo, vì neo bao gồm thẻ mở và thẻ đóng A. Bạn phải tự đặt tham số thuộc tính, nó được biểu thị sau dấu bằng và dấu ngoặc đơn, như trong ví dụ trên; .
Bây giờ ngay trong bài đăng mới, bạn cần chỉ định một liên kết băm bằng cách sử dụng một neo được chuẩn bị trước. Như vậy, liên kết sẽ ngay lập tức mở ra vị trí cần thiết trong văn bản. Liên kết băm này sẽ trông như thế này:
Sau đó, người đọc trang web của bạn sẽ có thể, bằng cách đi theo các liên kết như vậy, sẽ truy cập trực tiếp vào một khu vực cụ thể trên trang.
Vâng, đó là tất cả đối với tôi, nếu bạn có bất kỳ câu hỏi nào, hãy hỏi họ trong phần bình luận. Tôi lưu ý rằng đây không phải là bài viết cuối cùng về html; trong tương lai gần sẽ có nhiều ấn phẩm hơn về chủ đề này.
Đoạn kết video: họa sĩ vẽ nhanh trên kính
Từ tác giả: Một liên kết có thể có thuộc tính đích kiểm soát những gì xảy ra khi nó được nhấp vào. Một giá trị có thể có cho thuộc tính này là _blank, cho phép trình duyệt mở một cửa sổ mới (hoặc tab nếu người dùng thích) khi nhấp vào liên kết này.
Điều này được coi là "sai" trong HTML (có thể chỉ trong XHTML?), nhưng dù sao cũng được sử dụng vì nó hoạt động. Trong HTML5 mọi thứ trở nên hoàn toàn hợp pháp. Nhưng có lý do có ý nghĩa nào để làm điều này không?
Lý do tệ: vì bạn thích như vậy
Cho dù bạn có thích hay không, target="_blank" vẫn thay đổi hành vi mặc định. Liên kết mở trên cùng một trang là hành vi mặc định (như thể liên kết có target="_self"). Có lẽ bạn đã hiểu rõ và mở tất cả các liên kết trong cửa sổ/tab mới. Tuyệt vời, nhưng tốt hơn hết hãy giả định rằng hầu hết người dùng đều cảm thấy thoải mái hơn với hành vi mặc định. Và do đó, họ cảm thấy kém thoải mái hơn khi bạn áp đặt điều gì đó khác biệt lên họ.
Nếu đây là công cụ nội bộ dành riêng cho bạn thì hãy làm bất cứ điều gì bạn muốn. Nếu người khác đang sử dụng trang web, hãy để nguyên như vậy. Cũng cần lưu ý rằng người dùng có thể mở liên kết trong cửa sổ/tab mới bằng cách nhấp chuột phải vào liên kết (và chọn tùy chọn mong muốn). Điều này có nghĩa là cả hai loại hành vi đều có sẵn cho các liên kết. Điều này cũng có nghĩa là nếu bạn muốn mở các tab mới thì cứ thoải mái làm điều đó, nhưng bạn không nên ép buộc hành vi đó đối với bất kỳ ai. Và khi sử dụng target="_blank" thì điều này chỉ có thể thực hiện được.
Lý do tồi: bạn muốn người dùng không bao giờ rời khỏi trang của bạn
Lý do tồi: liên kết “nội bộ” và “bên ngoài” khác nhau.
Các liên kết "nội bộ" của chúng tôi (trỏ tới trang web của chúng tôi) hoạt động như bình thường, nhưng các liên kết "bên ngoài" của chúng tôi (trỏ đến các trang web khác) sẽ mở trong một cửa sổ/tab mới. Điều này liên quan đến hai lý do trên, chỉ có điều điều này còn tệ hơn. Bạn biết rằng các liên kết không phải trả tiền là lý tưởng, nhưng nếu chúng có nghĩa là người dùng sẽ phải rời khỏi trang web của bạn thì bạn muốn phá hủy lý tưởng đó. Tôi đã nghe nhiều người nói rằng đó là một "truyền thống". Nó ngụ ý rằng nó cần phải được thực hiện theo cách này. Nhưng điều này là không đúng sự thật.
Lý do Xấu: Liên kết PDF
Hoặc bất kỳ loại tài nguyên phi mạng nào khác. Tại sao bạn cần phải làm điều đó một cách khác nhau? Bạn có thể quay lại bằng nút quay lại. Nếu bạn muốn giúp người dùng tải xuống một tệp mà không cần mở nó thì đây là một mục tiêu xứng đáng để dễ sử dụng, nhưng có nhiều cách để đạt được nó. Người mới bắt đầu có thể sử dụng thuộc tính tải xuống.
Lý do tồi: khách hàng của tôi muốn nó như vậy
Tôi hiểu lý lẽ "Tôi không muốn đấu tranh vì nó" vì bạn không còn nhiều sức lực. Nhưng thật kỳ lạ là hóa ra đó lại là một trận chiến. Nếu khách hàng không tin tưởng bạn trong vấn đề này thì nói chung họ tin tưởng bạn ở điểm gì? Bạn có thể đi theo cách này:
Theo mặc định, các liên kết mở bình thường. Có một số lý do tại sao bạn có thể thay đổi hành vi này và nó sẽ thành công, nhưng đối với hầu hết các liên kết thì điều đó là không thể. Chúng tôi không muốn áp đặt mong muốn của mình lên người dùng và có thể khiến họ khó chịu vì điều nhỏ nhặt này. Chúng tôi cần người dùng có ý kiến tốt về chúng tôi.
Và chúng tôi hy vọng rằng cách tiếp cận bình tĩnh và hợp lý của bạn sẽ giúp khách hàng nghĩ tốt về bạn.
Lý do tồi: Trang cuộn vô hạn
Cuộn vô hạn là một điều khó khăn. Một mặt, nó có thể mang lại trải nghiệm tốt cho người dùng vì nó có thể cung cấp nội dung liên tục. Và nó có thể gây ấn tượng xấu nếu thực hiện không đúng cách. Trong hầu hết các trường hợp, việc quay lại trên một trang cuộn vô hạn sẽ đưa bạn trở lại nơi bạn đã dừng lại. Giải pháp cho vấn đề phức tạp này là công việc của bạn. Việc chỉ buộc các liên kết mở trong tab mới để vấn đề này không bao giờ xảy ra là bạn đang trốn tránh công việc của mình.
Lý do chính đáng: người dùng bắt đầu phát lại nội dung đa phương tiện
Ví dụ: nhạc, video, podcast... Người dùng bắt đầu phát. Di chuyển các trang sẽ dừng nó. Tại thời điểm này, hãy mở các liên kết trong tab mới hoặc hỏi xem người dùng có chắc chắn muốn rời khỏi trang hay không. Vì thế bạn sẽ cố gắng làm điều tốt cho anh ấy và không để anh ấy rời trang.
Chúng tôi đã đề cập đến ý tưởng này. Nếu phương tiện đang được phát, hãy xử lý các liên kết theo cách đặc biệt. Nếu không thể phát được, các liên kết sẽ ở trạng thái bình thường. Bất chấp những gì tôi nói, hãy tìm trên YouTube - khi thay đổi video, họ không làm phiền bạn bằng câu hỏi này.
Lý do chính đáng: người dùng đang làm việc trên trang này với nội dung nào đó có thể bị mất khi nó thay đổi
Có lẽ người dùng đang viết một cái gì đó. Hoặc sắp xếp nó theo thứ tự. Làm bất cứ điều gì. Nhấp vào một liên kết và thay đổi trang có thể là một khoảnh khắc vừa thú vị vừa đáng sợ. Tôi đã mất tất cả những gì tôi đã làm? Ngay cả khi bạn đảm bảo rằng anh ta sẽ không bị mất việc, bạn cũng nên tránh khiến người dùng rơi vào trạng thái hoảng sợ như vậy. Tôi nghĩ về CodePen, nơi người dùng thường viết mã. Để giúp đỡ họ, chúng tôi làm như sau:
Các liên kết thông thường (chẳng hạn như liên kết chân trang) hoạt động bình thường nhưng chúng tôi phát hiện xem có thay đổi nào chưa được lưu trong trình chỉnh sửa hay không và đề xuất lưu chúng trước khi thoát khỏi trang.
Nếu bạn truy cập một trang web khác (hoặc trình duyệt của bạn gặp sự cố), chúng tôi sẽ lưu trạng thái của người chỉnh sửa trong localStorage để bạn không bị mất tác phẩm của mình.
Hoàn thiện công việc lại là một vấn đề hoàn toàn khác. Tất nhiên, bạn không muốn mất khách hàng khi họ rời khỏi trang web. Các liên kết đến nội dung như “Thông tin vận chuyển” sẽ mở ra mà bạn không cần phải rời khỏi trang web. Theo tôi, “Đọc bài viết” sẽ không mang lại cho bạn bất kỳ kinh nghiệm nào. Vì việc quay lại (thường) rất dễ dàng (hầu hết các trình duyệt thậm chí còn cuộn trở lại vị trí trước đó), nên thực sự không có nguy cơ mất bất kỳ thứ gì.
Lý do chính đáng: một số điểm kỹ thuật
Tôi đang tạo một email cần mở trong Outlook Kangaroo 2009 Enterprise Edition và các liên kết phải có target="blank" nếu không chúng sẽ mở ở chế độ xem thanh bên và... Tuyệt vời.
Khía cạnh kỹ thuật
Đột nhiên bạn phải...
Cách buộc người dùng xác nhận mong muốn rời khỏi trang.
