Hoe een koppeling in een HTML-document te maken. Tag A - de syntaxis en attributen

  1. URL of "adres" van een pagina op internet
  2. <A> tag en de basissyntaxis
  3. Absolute en relatieve referentie
  4. Relatieve link naar map hoger dan huidige
  5. Attributen van de <A> tag. Hoe een document te openen door te verwijzen in een nieuw venster
  6. Titel link. Het titelkenmerk voor de tag <A>
  7. Attribuut hyperlink nofollow. Verbied de overdracht van het "vertrouwen" van de site door middel van verwijzing
  8. Interne link of anker in het document
  9. Verbindingsanker - Afbeelding
  10. uitbreiding

Verwijzingen (of hyperlinks) doordringen het internet zoals bloedvaten. Als er geen links waren, zou er geen internet zijn.

Hoe een link in een HTML-document te maken en de kenmerken correct te registreren, wat een URL is en hoe zoekmachines met links te maken hebben - in deze volgende les voor beginners om HTML te leren.

URL of "adres" van een pagina op internet

Elk HTML-document op het web heeft zijn eigen "exacte adres". Het wordt "URL" genoemd, uit het Engels. URL - Uniform Resource Locator

De URL-structuur is vaak zichtbaar in de adresbalk van de browser. Het omvat:

  1. De protocolnaam is http: // of https: //
  2. Domein van de site
  3. de map of het pad naar de map waar dit document zich bevindt,
  4. Bestandsnaam (hoeft niet altijd).

Dankzij dit "exacte adres" werd het mogelijk om naar dit document te verwijzen vanuit de tekst van een ander document.

<A> tag en de basissyntaxis

Ik hoop dat het woord 'syntaxis' je niet langer bang maakt 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> linktekst </a>

Zoals u kunt zien, moet er na het begin van de tag <A> een verplicht href-kenmerk zijn dat het adres aangeeft van het document waarnaar u wilt gaan.

Binnen de <A> containertag zelf bevindt zich een tekst (hoewel er mogelijk een afbeelding is), wat de tekst van de link is. Het wordt ook " anker " of eenvoudigweg - anker genoemd.

Absolute en relatieve referentie

In de bovenstaande voorbeelden werden absolute referenties gebruikt. Degenen die de volledige URL van het document bevatten.

In sommige gevallen bevat het href-kenmerk geen volledige URL met de naam van het protocol en het domein van de site. Als het document waarnaar de koppeling leidt, zich op dezelfde site bevindt, kunt u de relatieve link gebruiken die leidt vanaf de plaats waar het document zich bevindt.

Schema wanneer relatieve referentie wordt toegepast

Voorbeeld: een koppeling van het eerste.html-document leidt naar het bestand second.html, dat zich in de nieuwsmap bevindt.

Relatieve link naar map hoger dan huidige

code:

<a href="../first.html"> dit is een relatieve link naar een bestand op mapniveau één </a>

Deze link leidt naar het bestand first.html in de "parent" -directory, d.w.z. een niveau hoger .

De combinatie ../ geeft een map een niveau hoger weer vanaf de opgegeven positie van het bestand waaruit de koppeling wordt gemaakt.

Attributen van de <A> tag. Hoe een document te openen door te verwijzen in een nieuw venster

Om het document te openen in een nieuw browsertabblad, moet u het kenmerk target = "_ blank" gebruiken

Om het document te openen in een nieuw browsertabblad, moet u het kenmerk target = _ blank gebruiken

Kenmerkkoppeling target = "_ blank"

Misbruik het niet. Het is niet nodig om interne links naar de site te maken met dit kenmerk. Gebruikers zullen geïrriteerd zijn door het "vonkende venster".

In het algemeen, met dit doelkenmerk - het hele verhaal. Er zijn nog steeds een aantal betekenissen, maar ze worden tegenwoordig nog maar zelden gebruikt.

Dit komt omdat ze zijn ontworpen om met de site te werken op frames die niet langer populair zijn en met de komst van HTML5 tot het verleden behoren.

Titel link. Het titelkenmerk voor de tag <A>

Een ander bruikbaar kenmerk is title = "Tekst die uitlegt waar deze link naartoe leidt"

syntax:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="de pop-up hint"> dit is een hintkoppeling </a>

Zoals je kunt zien, geeft de browser het weer als een tooltip. En toch houdt het rekening met de zoekmachines.

Kenmerkhint voor koppelingstitel

Attribuut hyperlink nofollow. Verbied de overdracht van het "vertrouwen" van de site door middel van verwijzing

Er is een meer dubbelzinnig attribuut voor de links rel = "nofollow"

Hij vertelt aan zoekmachines dat het linkdocument misschien niet betrouwbaar is. Tegelijkertijd worden vertrouwens ("vertrouwen") -indicatoren van de bronsite niet door verwijzing naar de site verzonden.

Het onderwerp "vertrouwen" en link-ranglijst staat nog voorop, maar als het kort is, zal het "lot" van sites in de zoekmachines ook afhangen van het aantal links naar deze site. Hoe meer van hen, des te gezaghebbender sites linken - hoe meer geloofwaardigheid van de site door verwijzing.

In sommige gevallen is het de moeite waard om links naar dit kenmerk te 'screenen'. Bijvoorbeeld als u een negatieve beoordeling over een dienst schrijft.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> slechte site </a>

Interne link of anker in het document

In grote teksten is vaak de installatie van zogenaamde "ankers" in logische delen van het document vereist. Dan kun je op deze plek doorverwijzen.

De eenvoudigste manier om het te gebruiken is om een ​​lokale inhoudsopgave te maken van hyperlinks die naar deze ankers leiden. Dergelijke inhoudsopgaven worden meestal aan het begin van het artikel geplaatst.

Wanneer u zo'n anker maakt, wordt het kenmerk name gebruikt in plaats van het kenmerk href.

De syntaxis voor het maken van een anker is:

<a name="top"> </a>

Wanneer u een link maakt, voegt u aan het einde van de URL het teken # - de naam van het 'anker' toe:

<p> <a href="#top"> Boven </a> </ p>

De overgang zal precies naar deze plaats zijn, d.w.z. De browser plaatst deze plaats in het bovenste zichtbare gedeelte.

Vaak plaatsen ze in lange documenten helemaal onderaan een dergelijke link "Top".

... na een reis door de wereld van geurige granen, vonden ze de hoogste kwaliteit van die waarvoor Afrika, Azië, Centraal- en Zuid-Amerika beroemd zijn. Daarom vandaag in de koffiehuizen van het merk Koffieboon U vindt de beste koffievariëteiten van erkende fabrikanten.

? Naar de top ?

Vanuit een ander document kunt u ook naar deze plaats gaan als u aan het einde van de URL toevoegt via het teken # naam_akkoord

<a href="http://domen-saita.ru/dokument.html#top"> linktekst leidt naar een anker "top" in dit document </a>

Verbindingsanker - Afbeelding

Elke foto kan een link zijn.

code:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

Standaard worden de koppelingen onderstreept door de browser met een ononderbroken blauwe lijn en krijgen de koppelingsfoto's het blauwe kader.

Koppelingsfoto's krijgen een blauw kader

Om er vanaf te komen, wordt een eenvoudige regel toegevoegd aan het CSS-bestand voor de site:

a {border: 0px;}

Dit is een instructie om de randdikte nul te maken voor alle afbeeldingskoppelingen.

uitbreiding

In het volgende bericht zal ik het hebben over e-maillinks, hun attributen en methoden van "bescherming" tegen kwaadwillende spammers