計算機程序設計

如何插入HTML中的超鏈接? 創建和在HTML中使用超鏈接

超文本是一個包含鏈接到其他文本的文本。 例子是作者對複雜的定義或翻譯腳註筆記在書頁底部,一旦發現外語文本。 互聯網網站的超文本的複雜系統跳轉從一個網頁到另一個網頁本身,也無關單主題資源之間。 這種結構是實用,節省了大量的時間,使訪問者快速找到您所需要的信息,而不是迷失在大量的轉換。

插入超鏈接

在HTML中插入使用描述符(標籤),其被插入在正確的位置的超鏈接。 通常它是一個文本中本身就是一種超鏈接是文本結構。 但鏈接是更多的圖形(圖標,按鈕,圖片); 它們將被進一步討論。 他們在網頁上的位置不限於文字,而是取決於設計決策者現場。

首頁谷歌

這是如何插入超鏈接到由標籤進行HTML文檔的例子。 網站訪問者可以看到帶下劃線的文本是從周圍的文字(顏色HTML鏈接可以是任何東西)的顏色不同,“谷歌主頁”,通過點擊,他將獲得的主頁,“谷歌”搜索引擎。 應當指出的是,超鏈接的文本應當包含在過渡將進行信息。 這一原則應遵循並作為一項規則!

標籤結構 ...

您可能會注意到標籤 - 雙打:需要關閉標籤

HREF - 標籤屬性指定鏈接的目標。

https://google.com/ - 屬性值,請將其上,使過渡的資源的URL地址。 它是雙或單引號。 這取決於的HTML規則的嵌套標籤的結構。

首頁谷歌

整個結構是一個萬維網文檔的一個元素

根據HTML的規則,一些元素可以包含其他元素。 標識符也不例外。 如果程序員需要以粗體字谷歌突出,您可以通過使用標籤的 的做到這一點,根據文本格式的嵌套標籤的序列中的一般規則。 網站管理員應該知道如何創建一個HTML無差錯的超鏈接,否則他們將無法正常工作。 斷開鏈接到電腦俚語叫“毆打”。

主網頁的谷歌

這裡:元素

主網頁的谷歌

它包含嵌套

谷歌

現在該頁面的訪問者看到的超級鏈接以粗體字“谷歌”。

絕對超鏈接

使用網站包含域名的絕對URL的地址超鏈接(.RU,.COM,.ORG,.GOV ),稱為絕對的,語法如下:

協議://文件的域名/路徑

例如地址在美國的搜索引擎廣泛:https://aol.com - 絕對的,因為它包含了域名.COM。

絕對超鏈接是用於導航到其他網站的網頁或訪問位於另一台服務器上的資源。 過渡是通過使用因特網協議來執行。 協議 - 這不是本文的話題,但是,當他們參與創作的超鏈接,則必須至少簡單地提一下:

  • HTTPHTTPS -最常見的; 為他們的網頁不同網站之間進行切換;
  • FTP -上傳文件到服務器或從網站用戶下載的協議;
  • 郵寄地址-直接發送電子郵件從網站上,沒有去到個人電子郵件郵件協議。

有特殊用途(地鼠,遠程登錄)的幾個報告,是相當罕見的,它的使用需要編程或系統管理專業知識。

相對超鏈接

隨著相對尋址,用於生活的轉變,並在HTML中使用超鏈接不會導致超越它。 如果頁面是運行垂直滾動條,有時很長,如在字典中那麼大,這是非常方便的,適當的,使用相對鏈接跳轉至所需的字母。

創建在線詞典,在網頁的開頭的程序員的字母,而如果不是因為使用的鏈接,用戶將有一個很長的時間把鼠標的滾輪去的字母“I”。

使用屬性名稱 標籤創建一個相對鏈接:

回到信我

稱為錨,回到我的信 -錨目的地。 對於錨的正確顯示,建議使用字母和數字,所以不寫“我”,雖然它本來也無可厚非。

現在,從字母表頁面字母“I”開頭的轉變,就必須使HTML文檔,以字母“I”開始在錨栓:

在錨的前代表數字符號,沒有它,就信的過渡將無法正常工作。

建立一個網站時,相對尋址

方便創建軟件網站最常見的算法:

  • 在您的計算機和它的網站的快速訪問的方便位置上的文件夾;
  • 創建主頁的文件夾中的index.html;
  • 創建二次網頁(index.html的/第2頁)的;
  • 創建一個文件夾,並把它在圖像文件;
  • 創建一個文件夾,並把它的其他對象(文件下載,例如);
  • 網站內容的填充;
  • 放置在網站上的文件的託管。

一定要用於網站的元素之間的通信鏈路,並且將知道如何插入到HTML中的超鏈接到同一網站的另一個頁面非常有用。 如果網站駐留在同一台服務器上的同一目錄下,就沒有必要使用絕對地址。 當傳輸文件到託管對象之間的聯繫,該網站仍然存在,因為他們託管和將被放置在同一個目錄。

假設一個程序員創造了一個主頁index.html的網站,其中有一個鏈接到另一個頁面page2.html,裝飾用圖片img.png。 然後對圖像的相對路徑是這樣的:

提示:在本課題的研究是最好用的,這是需要獲取能力轉型地址的拼寫正確,並且要學會理解別人的代碼的原因簡單的文本編輯器。 在這個階段將是沒有錯誤寫在筆記本上的超鏈接,HTML 不會原諒他們 了良好的效果 ,並給出了一個錯誤。

方法單擊超鏈接

默認情況下,新頁面在當前瀏覽器窗口打開時,用戶點擊超鏈接。 但是,一個Web程序員可以更改默認和強制打開網頁,例如,在一個新的窗口。 為此有具有一定的價值目標屬性。 沒有什麼地方可以表達表。

目標屬性的值
_blank 在一個新的瀏覽器窗口中打開頁面
_self 在當前窗口中(默認設置)打開的頁面
_parent 在父框架中打開頁面
_top 使用框架取消所有這些,在目前的瀏覽器窗口中打開頁面

用於應用屬性的語法目標:

首頁谷歌

首頁“谷歌”將打開一個新窗口。

注:在新標籤中打開頁面,對於這個屬性沒有值,並通過在瀏覽器中設置的用戶設置。

超鏈接的顏色

一個有經驗的互聯網用戶隨著時間的推移,應該注意到的是,超鏈接是從周圍的文字顏色不同,它們通常是藍色的。 在他通過,然後又回到了以前的網頁鏈接,是丁香。 在非標準顏色有點HTML中使用超鏈接,但分配等網站。

設置的鏈接在所述標記中的屬性和它們的值的顏色,這在RGB系統(#00FF00)或與該顏色的名稱的直接指示(“綠色”)用作HTML顏色。 有三種類型的鏈接的屬性:

  • 鏈路 - 定義未訪問鏈接的顏色;
  • 虛連接 - 指定通過它用戶已經通過鏈接的顏色;
  • ALINK - 指定切換到不同的頁面時,鏈接的顏色。 它速度快,所以你不能總是抓住這個效果。

標記實例:

<車身鏈路=«#330099»ALINK =«#FF0000»的Vlink =«#990066“>

如果您在標籤應用這些屬性,web文檔的參考值將是深藍色,被訪問 - 紫色和主動 - 橙紅色。

圖形超鏈接

進步和網頁設計的發展需要知道如何在HTML作為圖像插入超鏈接。 很顯然,該圖片必須與目標網頁的內容。 例如,藥用植物的主頁能在植物的照片的形式呈現,點擊,用戶會去描述植物的藥性的頁面。

廣泛使用的方法來在由圖形編輯器(GIMP時,Photoshop)的網絡設計者創建的美麗的圖形代替靜態按鈕()。

要插入圖形作為該網站的網頁的超鏈接使用相同的語法,但使用圖片代碼插入HTML的規則,而不是文本:

標籤以相同的方式適用屬性指定替代文本,寬度,高度,及其它。

從網站上呼籲

HTML5標準,擴大了利用互聯網的功能,現在你可以不僅可以從手機,而是直接從該網站的電話。 為了這個目的,你也可以使用超鏈接HTML文檔中,並且他們的語法如下:

... 派對 ...

取而代之的是字的“當事人”的規定在電話簿直觀的來電者接觸。 您也可以將圖形文件(用戶照片)。

這電話都是到現場做,你不僅要有一個參考用戶的電話號碼,但也安裝到您的計算機的VoIP程序耳機(麥克風,耳機),上網速度應該超過0.5 MB /秒。 通話付費取得交通流量。 因此,如果互聯網是無限的,該電話是免費的。

倫理創建超級鏈接

通過將網站在互聯網上,網站管理員應該知道什麼樣的有在HTML超鏈接,而不是只權專業使用它們,但也堅持以下規定:

  • 該超級鏈接應該是很容易看到,不同於其周圍的文本。 用戶必須知道它是 - 一個超鏈接。
  • 用戶應該清楚在那裡他將通過單擊鏈接獲得。 要做到這一點,最好是使用更多的屬性稱號,這簡要地描述了轉換頁。 應用屬性的語法是:

Yandex的

  • 用戶必須獲得,當你點擊鏈接有關文件的準確信息將被下載。

一旦不是預期的網頁或下載錯了文件,用戶是最直接的現場留下的99%和從不在將來不下去。

防徐來創建超鏈接

除了如何在HTML插入超鏈接的問題的技術方面,應更強調道德方面。 有很多網站,其訪問被阻止用戶的安全軟件(殺毒軟件),甚至國家。 這些是已經在不潔的Web程序員手工製作的網站。

一來,他們採取的招數 - 是插入的“隱形”超鏈接的網頁上。 騙子知道如何創建在HTML中的超鏈接,並使用下劃線屬性刪除鏈接並給它周圍文本的顏色,使普通用戶並沒有看到她。 並與其他網絡技術工具(CSS,JavaScript的,PHP)的幫助下可以編程他們的行為。 例如,的onmouseover JavaScript語言事件激活網頁元素的效果。 當用戶將光標移動到一個無形的紐帶,他會在其他網站上的廣告頁面。 或者更糟的是,當有一個看不見的鏈接,他的計算機上的文件,並開始下載並安裝不需要的軟件。 通常,改變瀏覽器主頁,垃圾硬盤和其他大型活動的病毒。

不久,這些網站落入病毒庫,安全性和網民的環境的“黑名單”。 這類網站不會持續很長時間,他們不得不改變他們的名字不斷地遷移在互聯網上,更改主機提供商。 這是不利於網站的推廣,要總是尋求它的創造者,永遠不會成功megaportals,比如,例如社交網絡。 除其他事項外,這些技巧會導致這些人的行為的受害者許多負面情緒。

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 zhtw.atomiyme.com. Theme powered by WordPress.