Tự học html: links

Tự học html: links

Rate this post

Link là tính năng xác định của web bởi vì chúng cho phép bạn di chuyển từ trang web này sang trang web khác – cho phép rất ý tưởng về việc duyệt hoặc lướt.

Bạn sẽ thường bắt gặp các loại Link sau:

  • Link từ trang web này đến trang web khác
  • Link từ trang này sang trang khác trên cùng một trang web
  • Link từ một phần của trang web đến phần khác của cùng một trang
  • Các Link mở trong cửa sổ trình duyệt mới
  • Các Link khởi động chương trình email của bạn và địa chỉ mới gửi email cho ai đó

Các bài viết liên quan:

Cách tạo một Link

Các Link được tạo bằng phần tử <a>. Người dùng có thể nhấp vào bất cứ thứ gì giữa thẻ <a> mở và thẻ đóng </a>. Bạn chỉ định bạn muốn Link đến trang nào bằng cách sử dụng thuộc tính href.

Văn bản giữa phần mở đầu thẻ <a> và đóng </a> được gọi là văn bản Link hay anchor text. Ở đâu có thể, văn bản Link của bạn nên giải thích nơi khách sẽ đến được thực hiện nếu họ nhấp vào nó (đúng hơn là hơn là chỉ nói “bấm vào đây”).

Dưới đây, bạn có thể thấy Link tới IMDB đã được tạo trên trang trước.

Tự học html: links

Nhiều người điều hướng các trang web bằng cách quét văn bản để tìm các Link.

Văn bản Link rõ ràng có thể giúp khách truy cập tìm những gì họ muốn. Cái này sẽ cung cấp cho họ một tích cực hơn ấn tượng về trang web của bạn và có thể khuyến khích họ ghé thăm nó vì lâu hơn. (Nó cũng giúp mọi người sử dụng phần mềm đọc màn hình.)

Để viết văn bản Link tốt, bạn có thể nghĩ về những từ mọi người có thể sử dụng khi tìm kiếmtrang mà bạn đang Link đến.

(Ví dụ, thay vì viết “click đây” bạn có thể sử dụng một cái gì đó cụ thể hơn chẳng hạn như”bài viết mới”)

Xem thêm Tự học html: Tìm hiểu về HTML

Link đến một website khác

Các Link được tạo bằng <a> phần tử có một thuộc tính được gọi là href. Giá trị của thuộc tính href là url của trang web mà bạn muốn đến sau khi click và link

Người dùng có thể click vào vùng anchortext được giới hạn bằng tag <a> bắt đầu và kết thúc </a> và sẽ chuyển đến trang web có địa chỉ url.

Khi bạn Link đến một trang web, giá trị của href thuộc tính sẽ là toàn bộ web địa chỉ cho  trang web, đó là được gọi là một URL tuyệt đối.

Các trình duyệt link màu xanh trong trường hợp mặc định.

URL là viết tắt của Uniform Resource Locator . Mọi trang web đều có một url riêng dành riêng cho nó thường bao gồm: https://domain_name

<a href="https://other_site.com">anchor text</a>

Một URL tuyệt đối bắt đầu bằng tên miền cho trang web đó, và có thể được theo sau bởi đường dẫn đến một trang cụ thể. Nếu không có trang nào được chỉ định, trang web sẽ hiển thị trang chủ.

Link đến trang khác cùng website

Khi bạn đang link với các trang con khác trong cùng trang web, bạn không cần phải sử dụng domain name trong url mà thay vào đó bạn có thể viết tắt URL tuyệt đối thành dạng tương đối.

Nếu các trang link cùng thư mục source thì, thuộc tính href đơn giản chỉ là tên file html.

Nếu bạn có các trang khác nhau của một trang web trong các thư mục khác nhau, sau đó bạn có thể sử dụng phức tạp hơn một chút cú pháp để chỉ ra nơi trang liên quan đến hiện tại trang.

Nếu bạn nhìn vào bản tải xuống code cho mỗi trang, bạn sẽ thấy rằng tệp index.html chứa các Link sử dụng tương đối Các URL.

<a href="other_page.html">anchor text</a>

Khi Link đến các trang khác trong cùng một trang web, bạn có thể sử dụng các URL  tương đối. Những thứ này giống như một phiên bản viết tắt của tuyệt đối URL vì bạn không cần để chỉ định tên miền.

Directory structure

Trên các trang web lớn hơn, bạn nên tổ chức code của mình bằng cách đặt các trang cho mỗi phần khác nhau của trang web vào một thư mục mới. Các thư mục trên một trang web đôi khi được gọi là thư mục.

Structure

Thư mục cấp cao nhất đã biết dưới dạng thư mục gốc. Thư mục gốc chứa tất cả các tệp khác vào thư mục cho một trang web.

Mỗi phần của trang web được đặt trong một thư mục riêng biệt; điều này có ích sắp xếp các tệp.

Relationships

Mối quan hệ giữa các tệp và thư mục trên một trang web được mô tả bằng cách sử dụng giống nhau thuật ngữ như một cây gia đình.

Homepages

Trang chủ chính của một trang web được viết bằng HTML (và trang chủ của mỗi phần trong một thư mục con) được gọi là index.html.

Máy chủ web thường được thiết lập để trả về tệp index.html nếu không tên tệp được chỉ định.

Nếu bạn đang làm việc với một nội dung hệ thống quản lý, viết blog phần mềm hoặc thương mại điện tử hệ thống, bạn có thể không có các tệp riêng lẻ cho mỗi trang của trang web.

Thay vào đó, các hệ thống này thường sử dụng một tệp mẫu cho mỗi loại trang khác nhau (chẳng hạn như các bài báo, bài đăng trên blog, hoặc Mỹ phẩm).

Chỉnh sửa tệp mẫu sẽ thay đổi tất cả các trang sử dụng mẫu đó. Đừng thay đổi bất kỳ mã  vào không phải là HTML hoặc bạn có thể phá vỡ trang.

Tự học html: links

Mọi trang và mọi hình ảnh trên một trang web có URL. URL là được tạo thành từ domain name theo sau là đường dẫn đến trang đó hoặc hình ảnh.

URL tương đối có thể được sử dụng khi Link đến các trang trong cùng domain name. Chúng cung cấp một cách viết tắt để thông báo cho trình duyệt biết nơi tìm tệp của bạn.

Khi bạn đang Link đến một trang trên trang web của riêng bạn, bạn làm không cần chỉ định miền Tên. Bạn có thể sử dụng các URL tương đối đó là một cách viết tắt để nói trình duyệt chứa một trang quan hệ với trang hiện tại.

Điều này đặc biệt hữu ích khi tạo một trang web mới hoặc tìm hiểu về HTML vì bạn có thể tạo Link giữa các trang khi chúng chỉ ở trên máy tính cá nhân của bạn (trước đây bạn có một tên miền và đã tải chúng lên web).

Bởi vì bạn không cần phải lặp lại tên miền trong mỗi Link, họ cũng nhanh hơn viết.

Nếu tất cả các tệp trong trang web của bạn là trong một thư mục, bạn chỉ cần sử dụng tên tệp cho trang đó.

Nếu trang web của bạn được tổ chức thành các thư mục riêng biệt (hoặc các thư mục), bạn cần nói với trình duyệt làm thế nào để lấy từ trang nó là hiện trên trang mà bạn đang Link đến.

Nếu bạn Link đến cùng một trang từ hai trang khác nhau mà bạn có thể, do đó, cần phải  viết hai các URL tương đối khác nhau.

Các Link này sử dụng cùng một thuật ngữ (mượn từ cây gia đình) bạn gặp ở trang trước mà giới thiệu cấu trúc thư mục.

Link đến email

Để tạo một Link mở chương trình gởi email trên thiết bị và sẵn sàng gởi một email đến địa chỉ email đã chỉ định ta sử dụng <a>. Tuy nhiên, lưu ý giá trị thuộc tính href phải được bắt đầu bằng mailto: và theo sau là địa chỉ mail chỉ định gởi email.

Xem thêm Sử dụng Mailto link trong html

Link đến một new tab

Mục tiêu Nếu bạn muốn một Link mở trong một cửa sổ mới, bạn có thể sử dụng thuộc tính target vào phần mở đầu thẻ <a>. Giá trị của cái này thuộc tính phải là _blank.

Một trong những điều phổ biến nhất lý do một tác giả trang web có thể muốn một Link được mở trong một cửa sổ mới nếu nó trỏ đến trang web khác. Trong trường hợp này, họ hy vọng người dùng sẽ quay lại đến cửa sổ có chứa trang web sau khi xem xong cái khác.

<a target = "_blank" href="https://other_site.com">anchor text</a>

Nói chung bạn nên tránh mở Link trong một cửa sổ mới, nhưng nếu bạn làm vậy, nó được coi là thực hành tốt để thông báo cho người dùng rằng Link sẽ mở ra một cửa sổ trước khi họ nhấp vào nó.

Link đến các thành phần trong 1 page

Ở đầu một trang dài bạn có thể muốn thêm một danh sách trong số nội dung Link đến phần tương ứng thấp hơn xuống. Hoặc bạn có thể muốn thêm một Link từ một phần xuống quay lại đầu trang để lưu người dùng khỏi phải cuộn lại về đầu trang.

Trước khi bạn có thể Link đến một một phần của trang, bạn cần phải xác định các điểm trong trang mà Link sẽ chuyển đến. Bạn làm điều này bằng cách sử dụng thuộc tính id (mà có thể được sử dụng trên mọi HTML yếu tố). Bạn có thể thấy rằng phần tử <h1> và <h2> trong này ví dụ đã được cung cấp id các thuộc tính xác định những các phần của trang.

<a href="#content1">anchor text</a>

<div id ="content1" ></div>

Giá trị của thuộc tính id nên bắt đầu bằng một chữ cái hoặc một gạch dưới (không phải số hoặc bất kỳ ký tự nào khác) và, trên một một trang, không có hai thuộc tính id nên có cùng giá trị.

Để Link với một phần tử sử dụng thuộc tính id mà bạn sử dụng <a> một lần nữa, nhưng giá trị của thuộc tính href bắt đầu bằng ký hiệu #, theo sau là giá trị của thuộc tính id của phần tử bạn muốn Link đến. Trong ví dụ này, <a href=”#top”> Link đến phần tử <h1> tại đầu trang có id thuộc tính có giá trị hàng đầu.

Nếu bạn muốn Link đến một một phần của một trang khác (cho dù trên trang web của riêng bạn hoặc một trang khác trang web) bạn có thể sử dụng chung kỹ thuật.

<a href="https://other_site.com/#content1">anchor text</a>

Miễn là trang bạn là Link đến có thuộc tính id xác định các phần cụ thể của trang, bạn có thể chỉ cần thêm cùng một cú pháp đến cuối Link cho trang đó.

Do đó, thuộc tính href sẽ chứa địa chỉ cho trang (URL tuyệt đối hoặc một URL tương đối), theo sau là ký hiệu #, theo sau là giá trị thuộc tính id được sử dụng trên phần tử bạn đang Link.

Leave a Reply