HTML Verankeren

Inhoudsopgave:

HTML Verankeren
HTML Verankeren

Video: HTML Verankeren

Video: HTML Verankeren
Video: [HTML 5] 11. Iframe 2024, Mei
Anonim

Het anker op de site is erg handig als u wilt dat de artikelen op uw site een gemakkelijke overgang hebben tussen de lijstitems. Ze slaan de pagina om naar het gewenste punt of openen de gewenste pagina, zodat de gebruiker snel de informatie kan vinden die hij nodig heeft.

HTML verankeren
HTML verankeren

Als u uw eigen site schrijft, had u moeten nadenken over hoe u uw sitenavigatie gemakkelijker kunt maken. Om ervoor te zorgen dat de gebruiker niet tussen alle pagina's van uw site hoeft te zoeken naar de informatie die hij nodig heeft, kunt u het beste de "anker"-techniek gebruiken. Het zal een link maken naar alle informatie of documenten waar dan ook op uw site.

Theorie

Om een anker te maken, heb je twee elementen nodig:

  • Het deel van de code, dat de link naar ons anker aangeeft, is achtergelaten in een ander deel van de site.
  • Elk deel van de code waarin een identifier kan worden gespecificeerd, is ons anker.

Eerst moet je het eerste deel van het anker maken - een link ernaar. Een ankerlink bestaat uit twee delen: een paginalink en een ankerlink.

  1. Maak een "a"-tag of een andere tag die het "href"-kenmerk ondersteunt
  2. Maak in deze tag het attribuut "href" aan
  3. Geef een link naar de sitepagina op in de attribuutwaarde.
  4. Geef na de link de link naar het anker aan met het symbool "#" en een willekeurige naam voor het anker (samen geschreven, bijvoorbeeld: "#anchor")

Als u punt 3 overslaat en geen link naar de sitepagina opgeeft, wordt op de huidige pagina naar het anker gezocht. Dat wil zeggen, als u een link naar een anker op dezelfde pagina wilt maken, kunt u de link naar de pagina zelf weglaten.

Het blijft om het tweede deel van het anker te maken - de identifier. Het verwijst naar elke tag in de sitecode die het id-kenmerk ondersteunt. Om een anker te maken, heb je nodig:

  1. Maak een "id"-kenmerk in de vereiste tag.
  2. Geef in het kenmerk "id" de waarde op van de ankernaam die in de vorige stap is opgegeven. (voorbeeld:)

Na deze twee stappen verschijnt er een link op de site die u naar het opgegeven anker brengt.

Praktijk

Laten we eens kijken hoe we een anker kunnen maken aan de hand van een specifiek voorbeeld.

We hebben een eenvoudige pagina zoals deze:

Beeld
Beeld

We hebben tekst bovenaan en onderaan de pagina, veel "br"-tags die ruimte tussen de teksten creëren. We moeten een anker maken zodat we snel naar de tekst onderaan kunnen kijken.

Maak hiervoor een nieuwe tag - "a" na het opschrift "tekst bovenaan". Daarin creëren we het attribuut "href". Om het anker gemakkelijker te maken, zullen we "naar beneden" in de link schrijven.

Beeld
Beeld

Nu specificeren we de waarde "#yakor" in het attribuut - dit zal een link zijn naar de naam van het anker.

Beeld
Beeld

Het eerste deel van het anker - de link ernaar - is klaar. Nu hoeft alleen nog het anker zelf te worden gemaakt. We gaan naar het gewenste deel van de pagina. In dit geval is dat "tekst onderaan". Aangezien dit eenvoudige tekst zonder tag is, moeten we deze maken. Om dit te doen, plaatst u de tekst in een "paragraaf" - tag "p".

In deze tag creëren we het "id" attribuut en voeren we de waarde "yakor" erin in. De waarde "yakor" komt overeen met de ankernaam die in de link is opgegeven.

Beeld
Beeld

Nu werkt ons anker zoals het hoort.

Aanbevolen: