Najnowsze tutoriale tworzenie stron internetowych

HTML Linki


Linki znajdują się w prawie wszystkich stronach internetowych. Linki umożliwiają użytkownikom kliknij drogę od strony do strony.


HTML Linki Opis

hiperłącze, albo po prostu link, jest odwołaniem do danych, które czytelnik może śledzić bezpośrednio albo poprzez kliknięcie, dotykając lub uciążliwy.

Hiperłącze wskazuje na całego dokumentu lub do określonego elementu w dokumencie. Hypertext jest tekst z hiperłączy. Tekst, który jest powiązany z nazywany jest anchor text.

System, który jest używany do przeglądania i tworzenia hipertekstu jest system hipertekstowy, a także utworzyć hiperłącze jest hiperłącze (lub po prostu połączyć). Użytkownik po hiperłącza mówi się poruszać lub przeglądać hipertekstu.


HTML Linki - Hiperłącza

linki HTML są hiperłącza.

Hiperłącze to tekst lub obraz można kliknąć i przejść do innego dokumentu.


Linki - składni HTML

W HTML, linki są zdefiniowane z <a> tagu:

<a href=" url "> link text </a>

Przykład

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Spróbuj sam "

href atrybut określa adres docelowy (http://www.w3ii.com/html/default.html)

Tekst łącza jest widoczna część (Visit our HTML tutorial) .

Kliknięcie na tekst linku, wyśle ​​na podany adres.

Tekst łącza nie musi być tekst. Może to być obraz HTML lub jakikolwiek inny element HTML.

Bez spływu kreską na adresy podfolderów, może generować dwa żądania do serwera. Wiele serwerów automatycznie dodawać końcowy ukośnik na adres, a następnie utworzyć nową prośbę.


lokalne Linki

Powyższy przykład stosować bezwzględnej URL (A full web address) .

Miejscowy Link (link to the same web site) jest określona ze względnym adresem URL (without http://www.... ) .

Przykład

<a href="html_images.asp">HTML Images</a>
Spróbuj sam "

HTML Linki - Kolory

Po najechaniu kursorem na odnośnik, dwie rzeczy zazwyczaj się zdarzyć:

  • Strzałka myszy zamieni się w małej dłoni
  • Kolor elementu łączącego zmieni

Domyślnie, link będzie wyglądał następująco (in all browsers) :

  • Nieodwiedzonych link jest podkreślony i niebieski
  • Odwiedzanej link jest podkreślony i fioletowy
  • Aktywny link jest podkreślony i czerwony

Można zmienić domyślne kolory, używając stylów:

Przykład

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Spróbuj sam "

HTML Linki - The target Atrybut

target atrybut określa gdzie otworzyć powiązany dokument.

Ten przykład otwiera połączony dokument w nowym oknie przeglądarki lub w nowej karcie:

Przykład

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Spróbuj sam "
Wartość docelowa Opis
_blank Otwiera połączony dokument w nowym oknie lub karcie
_self Otwiera połączony dokument w tej samej ramce, gdyż został kliknięty (this is default)
_parent Otwiera połączony dokument w ramce nadrzędnej
_top Otwiera połączony dokument w pełnym ciała okna
framename Otwiera połączony dokument w ramce o nazwie

Jeśli strona jest zablokowana w ramce, można użyć target="_top" , aby wyrwać się z ramą:

Przykład

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Spróbuj sam "

HTML Linki - Obrazek jako link

Oczywiste jest, aby użyć wizerunki jako linki:

Przykład

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Spróbuj sam "

border: 0 dodaje zapobiec IE9 (and earlier) wyświetlanie obramowanie wokół obrazu.


HTML linki - Tworzenie zakładek

zakładki HTML są stosowane, aby umożliwić czytelnikom, aby przejść do poszczególnych części strony internetowej.

Zakładki są praktyczne, jeśli strona ma długie stron.

Aby zakładkę, należy najpierw utworzyć zakładkę, a następnie dodać link do niego.

Po kliknięciu łącza, strona przewinie do miejsca, z zakładką.

Przykład

Najpierw utwórz zakładkę z id atrybutu:

<h2 id="tips">Useful Tips Section</h2>

Następnie dodać link do zakładki ("Useful Tips Section") , w obrębie tej samej strony:

<a href="#tips">Visit the Useful Tips Section</a>

Lub dodaj link do zakładki ("Useful Tips Section") , z innej strony:

Przykład

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Spróbuj sam "

Podsumowanie rozdziału

  • Użyj HTML <a> elementu do zdefiniowania link
  • Użyj HTML href atrybutu, aby zdefiniować adres linku
  • Użyj HTML target atrybut do określenia gdzie otworzyć powiązany dokument
  • Użyj HTML <img> elementu (inside <a> ) użyć obrazka jako link
  • Użyj HTML id atrybut ( id=" value ") , aby określić zakładki na stronie
  • Użyj HTML href atrybutu ( href="# value ") , aby połączyć się z zakładką

Sprawdź się z ćwiczeniami!

Ćwiczenie 1 » ćwiczenie 2» ćwiczenie 3 » ćwiczenie 4» ćwiczenie 5 »


Tagi HTML Link

Etykietka Opis
<a> Definiuje hiperłącze