HTML skakels
Skakels word in byna alle webblaaie gevind. Skakels laat gebruikers toe om van bladsy tot bladsy te klik.
HTML-skakels - Hiperskakels
HTML-skakels is hiperskakels.
Jy kan op 'n skakel klik en na 'n ander dokument spring.
Wanneer jy die muis oor 'n skakel beweeg, sal die muispyltjie in 'n handjie verander.
Let wel: 'n Skakel hoef nie teks te wees nie. 'n Skakel kan 'n prent of enige ander HTML-element wees!
HTML-skakels - Sintaksis
Die HTML <a>-tag definieer 'n hiperskakel. Dit het die volgende sintaksis:
<a href="url">link text</a>
Die belangrikste kenmerk van die <a> element is die
hrefkenmerk, wat die skakel se bestemming aandui.
Die skakelteks is die deel wat vir die leser sigbaar sal wees.
Deur op die skakelteks te klik, sal die leser na die gespesifiseerde URL-adres stuur.
Voorbeeld
Hierdie voorbeeld wys hoe om 'n skakel na W3Schools.com te skep:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By verstek sal skakels soos volg in alle blaaiers verskyn:
- 'n Onbesoekte skakel is onderstreep en blou
- 'n Besoekte skakel is onderstreep en pers
- 'n Aktiewe skakel is onderstreep en rooi
Wenk: Skakels kan natuurlik met CSS gestileer word, om 'n ander voorkoms te kry!
HTML-skakels - Die teikenkenmerk
By verstek sal die gekoppelde bladsy in die huidige blaaiervenster vertoon word. Om dit te verander, moet jy 'n ander teiken vir die skakel spesifiseer.
Die targetkenmerk spesifiseer waar om die gekoppelde dokument oop te maak.
Die targetkenmerk kan een van die volgende waardes hê:
_self- Verstek. Maak die dokument oop in dieselfde venster/oortjie as waarop dit geklik is_blank- Maak die dokument in 'n nuwe venster of oortjie oop_parent- Maak die dokument in die ouerraam oop_top- Maak die dokument in die volle liggaam van die venster oop
Voorbeeld
Gebruik target="_blank" om die gekoppelde dokument in 'n nuwe blaaiervenster of oortjie oop te maak:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Absolute URL's vs. Relatiewe URL's
Beide voorbeelde hierbo gebruik 'n absolute URL ('n volledige webadres) in die hrefkenmerk.
'n Plaaslike skakel ('n skakel na 'n bladsy binne dieselfde webwerf) word gespesifiseer met 'n relatiewe URL (sonder die "https://www"-deel):
Voorbeeld
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
HTML-skakels - Gebruik 'n prent as 'n skakel
Om 'n prent as 'n skakel te gebruik, plaas net die <img>
merker binne die <a>merker:
Voorbeeld
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Skakel na 'n e-posadres
Gebruik
mailto:binne die
hrefkenmerk om 'n skakel te skep wat die gebruiker se e-posprogram oopmaak (om hulle 'n nuwe e-pos te laat stuur):
Voorbeeld
<a href="mailto:[email protected]">Send email</a>
Knoppie as 'n skakel
Om 'n HTML-knoppie as 'n skakel te gebruik, moet jy 'n paar JavaScript-kode byvoeg.
JavaScript laat jou toe om te spesifiseer wat by sekere geleenthede gebeur, soos 'n klik van 'n knoppie:
Voorbeeld
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Wenk: Kom meer te wete oor JavaScript in ons JavaScript-tutoriaal .
Skakel titels
Die titlekenmerk spesifiseer ekstra inligting oor 'n element. Die inligting word meestal as 'n nutswenk-teks gewys wanneer die muis oor die element beweeg.
Voorbeeld
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Meer oor Absolute URL's en Relatiewe URL's
Voorbeeld
Gebruik 'n volledige URL om na 'n webblad te skakel:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Voorbeeld
Skakel na 'n bladsy wat in die html-lêergids op die huidige webwerf geleë is:
<a href="/html/default.asp">HTML tutorial</a>
Voorbeeld
Skakel na 'n bladsy wat in dieselfde vouer as die huidige bladsy geleë is:
<a href="default.asp">HTML tutorial</a>
Jy kan meer lees oor lêerpaaie in die hoofstuk HTML-lêerpaaie .
Hoofstuk Opsomming
- Gebruik die
<a>element om 'n skakel te definieer - Gebruik die
hrefkenmerk om die skakeladres te definieer - Gebruik die
targetkenmerk om te definieer waar om die gekoppelde dokument oop te maak - Gebruik die
<img>element (binne<a>) om 'n prent as 'n skakel te gebruik - Gebruik die
mailto:skema binne diehrefkenmerk om 'n skakel te skep wat die gebruiker se e-posprogram oopmaak
HTML-skakelmerkers
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .