Hướng dẫn sử dụng thẻ HyperLink trong HTML

Một website có thể chứa các đường backlinks khác nhau để link trực tiếp với các trang khác hay trong một phần của một trang. Những link này được gọi là Hyperlinks (siêu link).

Hyperlinks cho phép khách truy cập vào các website khác nhau bằng cách bấm chuột vào từ, cụm từ, & hình ảnh. Chính vì vậy, bạn có thể tạo các đường Hyperlinks sử dụng văn bản hoặc hình ảnh có trên website của các bạn.

I.Text backlinks trong HTML

Thẻ a trong HTML

Một link được xác nhận bằng cách sử dụng thẻ <avàgt;. Thẻ này gọi là thẻ neo (anchor tag), & bất kỳ ở giữa thẻ mở <avàgt; & thẻ đóng </avàgt; trở thành một phần của đường link & khi người sử dụng có thể bấm chuột vào phần đó để tới với ebook được gán link. Dưới đây là cú pháp sử dụng thẻ <avàgt;.

<a

href

=

"đường dẫn url tới trang HTML"

...

danh-s

á

ch-thu

c-t

í

nh

>

Backlinks Text

</avàgt;

Chẳng hạn text backlinks trong HTML

Hãy cùng xem chẳng hạn sau mà link với trang http://vietjack.com trong trang của các bạn.

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du text backlinks trong HTML

</titlevàgt;

</headvàgt;

<bodyvàgt;

<pvàgt;

Click chuot vao duong backlinks sau:

</pvàgt;

<a

href

=

"http://vnexpress.net"

target

=

"_self"

>

Một website có thể chứa các đường backlinks khác nhau để link trực tiếp với các trang khác hay trong một phần của một trang. Những link này được gọi là Hyperlinks (siêu link).

Hyperlinks cho phép khách truy cập vào các website khác nhau bằng cách bấm chuột vào từ, cụm từ, & hình ảnh. Chính vì vậy, bạn có thể tạo các đường Hyperlinks sử dụng văn bản hoặc hình ảnh có trên website của các bạn.

Tính chất target trong HTML

Tất cả chúng ta đã sử dụng tính chất target trong chẳng hạn trước. Tính chất này được sử dụng để xác nhận địa điểm nơi đường backlinks được mở. Dưới đây là các tùy chọn:

Tùy chọn
Diễn đạt

_blank
Mở trang link trong cửa sổ mới

_self
Mở trang link trong cùng một khung giống với khung chứa link

_parent
Mở trang link trong khung nguồn chứa đường backlinks

_top
Mở trang link trong cửa sổ toàn màn hình

targetframe
Mở ebook được link trong đã đặt tên

Chẳng hạn

Dưới đây là chẳng hạn để thấu hiểu sự khác nhau căn bản trong các tùy chọn ở trên:

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du text backlinks trong HTML

</titlevàgt;

<base

href

=

"../html/"

>

</headvàgt;

<bodyvàgt;

<pvàgt;

Click chuot vao mot trong cac backlinks sau:

</pvàgt;

<a

href

=

"../html/text_link_trong_html.jsp"

target

=

"_blank"

>

Vi du gia tri _blank

</avàgt;

|

<a

href

=

"../html/text_link_trong_html.jsp"

target

=

"_self"

>

Vi du gia tri _self

</avàgt;

|

<a

href

=

"../html/text_link_trong_html.jsp"

target

=

"_parent"

>

Vi du gia tri _parent

</avàgt;

|

<a

href

=

"../html/text_link_trong_html.jsp"

target

=

"_top"

>

Vi du gia tri _top

</avàgt;

</bodyvàgt;

</htmlvàgt;

Nó sẽ hiển thị kết quả sau, bạn bấm chuột vào các đường backlinks khác nhau để hiểu sự khác nhau giữa các tùy chọn trên của tính chất target.


Sử dụng Base Backlinks trong HTML

Khi bạn link ebook HTML với cùng một website, nó không yêu cầu một địa chỉ URL đầy đủ cho toàn bộ mọi backlinks. Bạn có thể từ bỏ nó nếu bạn sử dụng thẻ <basevàgt; trong phần tiêu chủ đề liệu. Thẻ này được sử dụng để phân phối một đường backlinks nền tảng cho toàn bộ các backlinks. Vì vậy, trình duyệt sẽ xâu chuỗi các đường backlinks liên quan với đường backlinks nền tảng & sẽ khiến cho nó thành một đường backlinks đầy đủ.

Xem Thêm  but write there options with OS specific suffixes. E.g. Windows option is ""font_name""

Chẳng hạn

Dưới đây là chẳng hạn về sử dụng thẻ <basevàgt; để xác nhận đường backlinks nền tảng URL & sau đó tất cả chúng ta có thể sử dụng các đường liên quan cho toàn bộ các đường backlinks mà không cần phân phối đường link đầy đủ cho các backlinks.

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du text backlinks trong HTML

</titlevàgt;

<base

href

=

"../html/"

>

</headvàgt;

<bodyvàgt;

<pvàgt;

Click chuot vao duong backlinks sau:

</pvàgt;

<a

href

=

"../html/text_link_trong_html.jsp"

target

=

"_blank"

>

Bai huong dan HTML

</avàgt;

</bodyvàgt;

</htmlvàgt;

Kết quả là khi bạn nhấp vào đường backlinks: Bai huong dan HTML.

Hiện tại thì URL đã cho <a href=”../html/text_link_trong_html.jsp” được xem là <a href=”http://vietjack.com/html/text_link_trong_html.jsp&#8221;.

Click chuot vao duong backlinks sau:

Bai huong dan HTML

Link tới một khu vực trang trong HTML

Bạn có thể tạo nên một backlinks tới khu vực rõ ràng trong website bằng cách sử dụng tính chất name. Bạn thực hiện qua 2 bước:

Trước hết tạo một link tới khu vực trong trang mà bạn mong muốn tới & đặt tên nó sử dụng thẻ <a…> như ở dưới đây:

<h1vàgt;

Vi du text backlinks trong HTML

<a

name

=

"top"

></avàgt;</h1vàgt;

Bước 2, bạn tạo nên một siêu link để connect ebook & xác nhận địa điểm mà bạn mong muốn tới.

<a

href

=

"../html/text_link_trong_html.jsp#top"

>

Ve dau trang

</avàgt;

Nó sẽ tạo nên đường backlinks sau, từ đó bạn bấm chuột vào Ve dau trang để về phần đầu của trang.

Setup màu cho các backlinks trong HTML

Bạn có thể cài đặt màu cho backlinks của các bạn, chẳng hạn: active backlinks & visited backlinks bằng cách sử dụng các tính chất backlinks, alink & vlink của thẻ <bodyvàgt;.

Chẳng hạn

Dưới đây là một chẳng hạn. Bạn lưu code trong check.htm & mở nó bằng bất kì trình duyệt nào để hiểu cách các tính chất backlinks, alink & vlink này làm việc.

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du text backlinks trong HTML

</titlevàgt;

<base

href

=

"../html/"

>

</headvàgt;

<body

alink

=

"#54A250"

backlinks

=

"#040404"

vlink

=

"#F40633"

>

<pvàgt;

Click chuot vao duong backlinks sau:

</pvàgt;

<a

href

=

"../html/text_link_trong_html.jsp"

target

=

"_blank"

>

Bai huong dan HTML

</avàgt;

</bodyvàgt;

</htmlvàgt;

Nó sẽ tạo nên kết quả sau:

Click chuot vao duong backlinks sau:

Bai huong dan HTML

Tạo Download Backlinks trong HTML

Bạn có thể tạo các backlinks văn bản để các ebook PDF, DOC, hoặc ZIP được tải về máy khi người sử dụng nhấp vào backlinks đó. Điều này vô cùng dễ dàng, bạn chỉ cần phân phối tên URL đầy đủ của file đó. Chẳng hạn

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du text backlinks trong HTML

</titlevàgt;

</headvàgt;

<a

href

=

"../html/test.pdf"

>

Download PDF File

</avàgt;

</bodyvàgt;

</htmlvàgt;

Nó sẽ tạo kết quả sau:

II.Image backlinks trong HTML

Chẳng hạn Image Backlinks trong HTML

Dưới đây là một chẳng hạn về sử dụng hình ảnh như một siêu link. Tất cả chúng ta chỉ cần sử dụng một hình ảnh bên trong một siêu link tại địa điểm của văn bản.

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du image backlinks trong HTML

</titlevàgt;

</headvàgt;

<bodyvàgt;

<pvàgt;

Click vao backlinks sau:

</pvàgt;

<a

href

=

"http://vietjack.com"

target

=

"_self"

>

<img

src

=

"./images/logo3.png"

alt

=

"Vietjack Homepage"

border

=

"0"

/>

</avàgt;

</bodyvàgt;

</htmlvàgt;

Kết quả là khi bạn bấm chuột vào hình ảnh, bạn sẽ tới trang được link bởi hình ảnh đó.

Click vao backlinks sau:

Xem Thêm  scrollable regions

Này là cách dễ dàng nhất để tạo nên một đường backlinks sử dụng hình ảnh. Kế đến tất cả chúng ta học cách tạo các Đường backlinks sử dụng hình ảnh có độ nhạy chuột – Mouse-Sensitive Image Links.

Hình ảnh nhạy chuột trong HTML

Chuẩn HTML & XHTML phân phối một chức năng mà cho bạn nhúng nhiều backlinks khác nhau trong một hình ảnh đơn. Bạn có thể tạo nên các backlinks khác nhau trên nền tảng các link khác nhau có trên hình ảnh. Khi các backlinks khác nhau được đính kèm tới các tọa độ khác nhau, tất cả chúng ta bấm chuột vào các phần khác nhau của ảnh để mở các trang tọa độ. Những hình ảnh có độ nhạy chuột như thế được gọi như các Image Map.

Có 2 phương pháp để tạo nên Image Map:

  • Image Map trên Server – Được kích hoạt bởi các tính chất imap của thẻ <imgvàgt; & yêu cầu quyền truy cập vào một Server & các ứng dụng giải quyết liên quan đến Image Map.
  • Image Map trên Client – Được tạo nên với tính chất usemap của thẻ <imgvàgt; , cùng lúc tương ứng với các thẻ <mapvàgt; & <areavàgt;.

 

Image Map trên Server

Tại đây bạn có thể đơn giản đăt hình ảnh của các bạn vào trong một siêu link & sử dụng tính chất ismap tạo các hình ảnh đặc biệt. Khi người sử dụng nhấp vào một vị trí trong ảnh, trình duyệt thông qua các tọa độ của con trỏ chuột cùng với xác nhận địa chỉ URL trong thẻ <avàgt; để tới Server. Server sử dụng link con trỏ chuột để xác nhận ebook nào (website) được trả lại trình duyệt.

Khi được sử dụng, tính chất href chứa trong thẻ <avàgt; phải chứa địa chỉ URL của một ứng dụng Server giống như cgi hoặc PHP script … để giải quyết yêu cầu trên nền tảng link đó.

Các link của địa điểm chuột được tính toán bằng Pixel từ góc trên cùng bên trái của ảnh, khởi đầu với (0,0). Các link mà được đặt trước bởi một dấu hỏi sẽ được thêm vào phần cuối của URL.

 

Chẳng hạn, nếu một người sử dụng nhấp vào (20,30) từ góc trên cùng bên trái của ảnh:

Click vao backlinks sau:

Nó được tạo nên bởi đoạn trích code sau:

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du Image Map trong HTML

</titlevàgt;

</headvàgt;

<bodyvàgt;

<pvàgt;

Click vao backlinks sau:

</pvàgt;

<a

href

=

"../index.jsp"

target

=

"_self"

>

<img

ismap

src

=

"./images/logo3.png"

alt

=

"Vietjack Homepage"

border

=

"0"

/>

</avàgt;

</bodyvàgt;

</htmlvàgt;

Sau đó trình duyệt gửi các tham số tìm kiếm tới Server mà có thể được giải quyết bởi ismap.cgiscript hoặc map file & bạn có thể link bất kì ebook (website) nào bạn thích tới những link này:

../

index

.

jsp

?

20

,

30

Theo phương pháp này bạn có thể gán các backlinks khác nhau tới các tọa độ khác nhau của hình ảnh & khi các tọa độ được được bấm chuột vào, bạn có thể mở các website tương ứng. Để thấu hiểu hơn về tính chất ismap, bạn có thể theo dõi trong Cách sử dụng Image ismap?

Image Map trên Client

Image Map trên Client được cho phép bởi tính chất usemap của thẻ <img /> & được khái niệm bởi các thẻ mở rộng đặc biệt <mapvàgt; and <areavàgt;.

Hình ảnh dự kiến để tạo bản đồ được chèn vào trang sử dụng thẻ <img /> được xem như là một hình ảnh thông thường, trừ khi nó đưa thêm một tính chất là usemap. Giá trị của tính chất usemap được sử dụng để thẻ <mapvàgt; link với thẻ map & image. Thẻ <mapvàgt; cùng với thẻ <areavàgt; xác nhận toàn bộ các tọa độ ảnh & backlinks tương ứng.

Xem Thêm  Ý nghĩa của LFL là gì? - lfl là gì

Thẻ <areavàgt; thẻ map xác nhận hình khối & tọa độ để xác nhận ranh giới của mỗi lần bấm chuột vào hình ảnh. Sau đây là chẳng hạn:

<!DOCTYPE htmlvàgt;

<htmlvàgt;

<headvàgt;

<titlevàgt;

Vi du USEMAP trong HTML

</titlevàgt;

</headvàgt;

<bodyvàgt;

<pvàgt;

Tim kiem va click vao mot vi tri tren hinh anh sau

</pvàgt;

<img

src

=

"./images/logo3.png"

alt

=

"HTML Map"

border

=

"0"

usemap

=

"#html"

/>

<!-- Tao Image Map -->

<map

name

=

"html"

>

<area

shape

=

"circle"

coords

=

"80,80,20"

href

=

"../css/index.jsp"

alt

=

"CSS Link"

target

=

"_self"

/>

<area

shape

=

"rect"

coords

=

"5,5,40,40"

alt

=

"jQuery Link"

href

=

"../jquery/index.jsp"

target

=

"_self"

/>

</mapvàgt;

</bodyvàgt;

</htmlvàgt;

Hệ tọa độ trong HTML

Giá trị thực sự của các tọa độ lệ thuộc hoàn toàn vào hình khối trong thắc mắc. Dưới đây là tóm lược sơ lược.

rect = x1 , y1 , x2 , y2
x1 & y1 là các tọa độ góc trên bên trái của hình chữ nhật; x2 & y2 là các tọa độ góc dưới bên phải.
circle = xc , yc , radius
xc & yc là các tọa độ ở trọng điểm của vòng tròn, & radius là bán kính vòng tròn. Một vòng tròn trọng điểm tại 200,50 với bán kính 25 sẽ có tính chất
poly = x1 , y1 , x2 , y2 , x3 , y3 , … xn , yn
Các cặp x-y xác nhận các đỉnh của hình đa giác, với một dòng được vẽ từ 1 điểm tới điểm khác. & các điểm rộng nhất có tính chất .

Toàn bộ các tọa độ đều có quan hệ với góc trên bên trái của ảnh (0,0). Mỗi hình có một URL tương ứng. Bạn có thể sử dụng các hình ảnh trong software để thấy tọa độ của các địa điểm khác nhau.

III.Thư điện tử backlinks trong HTML

Thẻ thư điện tử trong HTML

Thẻ <avàgt; phân phối cho bạn lựa chọn xác nhận một địa chỉ thư điện tử để gửi thư. Trong lúc sử dụng thẻ này như một thẻ thư điện tử, bạn sẽ sử dụng mailto: địa chỉ thư điện tử cùng với tính chấthref. Dưới đây là cú pháp sử dụng mailto thay vì sử dụng http:

<a

href

=

"mailto:abc@example.com"

>

Send Thư điện tử

</avàgt;

Đoạn code này tạo nên đường backlinks sau mà bạn có thể sử dụng để gửi thư điện tử.

Hiện tại nếu một người sử dụng nhấp vào backlinks này, nó sẽ chạy một Thư điện tử Client ( giống Lotus Notes, Outlook Express…) setup trong laptop của người sử dụng. Sẽ không có nguy cơ hay bất trắc gì khi sử dụng lựa chọn này để gửi thư điện tử bởi vì nếu người sử dụng không có thư điện tử Client setup bằng máy, khi đó nó sẽ chẳng thể gửi được thư điện tử.

Setup mặc định cho thư điện tử trong HTML

Bạn có thể cài đặt mặc định thư điện tử subject & thư điện tử body cùng lúc với thư điện tử address. Dưới đây là chẳng hạn cài đặt mặc định cho subject & body.

<a

href

=

"mailto:abc@example.com?subject=Feedback&body=Message"

>

Send Feedback

</avàgt;

Đoạn code này tạo nên đường backlinks sau mà bạn có thể sử dụng để gửi thư điện tử.

Share this:

Like this:

Like

Loading…

Viết một bình luận