De volgende vragen zijn verplaatst naar een ander deel van de FAQ.
Gebruik het 'anchor'-(anker)element. Het HREF-attribuut geeft de URL van het document waarnaar je wilt linken. Het volgende voorbeeld linkt naar de tekst "Webontwerp FAQ" op <URL:http://www.htmlhelp.com/nl/faq/html/>:
<A HREF="http://www.htmlhelp.com/nl/faq/html/">WebOntwerp
FAQ</A>
Zie voor meer informatie over links en het 'anchor'-element: http://www.htmlhelp.com/reference/html40/special/a.html
Eerst moet de bestemming van de link worden geïdentificeerd met een benoemd anker (een anker dat het NAME-attribuut gebruikt). Bijvoorbeeld:
<H2><A NAME="sectie2">Sectie 2: Na de introducties</A></H2>
Daarna maak je een link naar het benoemde anker. De URL van de benoemde anker is gelijk aan de URL van het document, met "#" en de naam van het anker er aan vastgeplakt. Zo kun je bijvoorbeeld elders in hetzelfde document gebruiken:
<A HREF="#sectie2">ga naar Sectie 2</A>
En net zo kun je in een ander document gebruiken:
<A HREF="thesis.html#sectie2">ga naar Sectie 2 van mijn thesis</A>
<A TARGET="_blank" HREF=...> opent een nieuw, onbenoemd venster.
<A TARGET="foobar" HREF=...> opent een nieuw, "foobar" genaamd venster, voorzover er nog geen venster of frame met die naam bestaat.
Merk op dat links waarmee nieuwe vensters worden geopend, irritant kunnen zijn voor je lezers als er geen goede reden (vanuit de lezer bekeken) voor is.
Met HTML is er geen methode om de afmetingen (of andere venster-eigenschappen) van een nieuw venster te beheersen. Maar in JavaScript kun je zulke details opgeven als je de window.open() functie gebruikt.
Begin met een normale HTML link (mogelijk een die een nieuw venster opent zoals beschreven in het antwoord op de vorige vraag). Gebruik daarna het ONCLICK-attribuut om een venster te openen met de gewenste eigenschappen voor de lezers die JavaScript aankunnen en ingeschakeld hebben. Het volgende voorbeeld specificeert een venster genaamd "popup", dat 300 bij 150 pixels groot is.
<A HREF="foo.html" TARGET="popup" ONCLICK="window.open('foo.html', 'popup', 'width=300,height=150'); return false">Zie Foo</A>
Op deze manier kan in JavaScript een nieuw venster worden opgegeven met de gewenste eigenschappen, zonder de toegang te blokkeren indien JavaScript is uitgeschakeld of niet wordt ondersteund.
Behalve de parameters height en width (die een aantal pixels als waarde kennen), kan het derde argument van window.open() de volgende booleaanse parameters bevatten (die de waarde "yes" of "no" kennen): directories, location, menubar, resizable, scrollbars, status, en toolbar. Deze booleaanse parameters beheersen de aanwezigheid van de overeenkomende vensteruitrusting in het resulterende venster.
Dit krijg je het makkelijkst voor elkaar met een klein formulier:
<FORM ACTION="[URL]" METHOD=GET>
<INPUT TYPE=submit VALUE="Tekst op knop" NAME=foo>
</FORM>
Als je knoppen naast elkaar wilt uitlijnen, moet je ze in een één-rij-tabel stoppen, met elke knop in een aparte cel.
Merk op dat zoekmachines mogelijk het doeldocument niet kunnen vinden, tenzij er ergens anders op de pagina ook een normale link is.
Een ga-naar-een-andere-pagina knop kan ook worden geprogrammeerd in JavaScript, maar het bovenstaande is standaard HTML en werkt voor meer lezers.
Dat is onmogelijk in HTML. "Terug" gaan betekent dat je naar de vorige pagina in je browse-geschiedenis gaat. Je zou een link kunnen maken naar de URL die wordt gespecificeerd in de 'HTTP Referer header' (beschikbaar in de "HTTP_REFERER" omgevingsvariabele in CGI-programma's), maar dat creëert enkel een voorwaartse link naar een nieuwe locatie in je browse-geschiedenis. En zelfs dan kan de informatie in de variabele fout zijn. Sommige browsers zenden ten onrechte deze variabele als je een bookmark gebruikt of een URL handmatig intypt, en sommigen zenden deze variabele helemaal niet (het is niet verplicht).
Je kunt "history.back()" (JavaScript) gebruiken om een terug-knop (of link) te maken. Dit werkt natuurlijk alleen als JavaScript wordt ondersteund en ingeschakeld is.
Kijk voor een meer uitgebreide uitleg naar Abigail's "Simulating the back knop" te vinden op <URL:http://www.foad.org/%7Eabigail/HTML/Misc/back_button.html>.
Denk er aan dat het enige navigatie-middel dat vaker wordt gebruikt dan de "terug"-functie de hyperlink is. Je lezers weten vrijwel zeker hoe ze de terug-knop van hun browser moeten gebruiken. Gebruikers die de meest basale functies van hun browser niet onder de knie hebben, raken alleen maar in de war wanneer verschillende pagina's die functies op verschillende manieren nabootsen.
Dit kan niet met HTML. Maar Internet Explorer 4+ ondersteunt de 'method' window.external.AddFavorite(), een zelfgemaakte uitbreiding op JavaScript die een "Toevoegen aan Favorieten"-dialoogscherm opent. Het volgende voorbeeld voldoet voor de bezoekers die met IE op je webpagina komen:
<script type="text/javascript"><!--
function addf() {
window.external.AddFavorite('http://www.htmlhelp.org/',
'Web Design Group'); }
if(document.all) {
document.write('<input type="button" onclick="addf()"'+
' value="Bookmark WDG Site">'); }
//--></script>Dit zal echter in andere browsers javascript-fouten kunnen opleveren, bijvoorbeeld bij een bezoeker die met de Opera browser op je webpage komt. 'Opera als IE' zal een fout geven, omdat die document.all kent, maar external.AddFavorite niet. Het volgende voorbeeld voorkomt, dat een niet werkende knop wordt gemaakt in andere browsers of bij hen die JavaScript hebben uitgeschakeld:
<script type="text/javascript"><!--
function addf() {
if (window.external &&
typeof window.external.AddFavorite != 'undefined') {
document.write('<a href="#" onclick="addf();return false;">'+
'Bookmark WDG Site</a>');
}
//--></script>Denk er aan dat lezers die weten hoe ze bladwijzers kunnen openen, vrijwel zeker ook weten hoe ze bladwijzers moeten aanmaken. En de enkeling die niet weet hoe hij/zij jouw site kan toevoegen aan de bladwijzers, weet waarschijnlijk ook niet hoe hij/zij de bladwijzer, die jij voor ze maakt, kunnen gebruiken. Gebruikers die de meest basale functies van hun browser niet onder de knie hebben, raken alleen maar in de war wanneer verschillende pagina's die functies op verschillende manieren nabootsen.
Dit kan niet met HTML. Maar enkele browsers ondersteunen de JavaScript 'method' window.print(), die een "Afdrukken"-dialoogscherm opent. Het volgende voorbeeld voorkomt, dat een niet werkende knop wordt gemaakt in andere browsers of bij hen die JavaScript hebben uitgeschakeld:
<script type="text/javascript"><!--
if (window.print) {
document.write('<input type="button" onclick="window.print()"'+
' value="Deze pagina afdrukken">'); }
//--></script>Denk er aan dat lezers die printers hebben, vrijwel zeker weten hoe de afdrukfunctie van hun browser werkt. Gebruikers die de meest basale functies van hun browser niet onder de knie hebben, raken alleen maar in de war wanneer verschillende pagina's die functies op verschillende manieren nabootsen.
Gebruik een "mailto:"-link, bijvoorbeeld
Stuur me een e-mail op
<A HREF="mailto:mij@mijndomein.com">mij@mijndomein.com</A>.
Note that any email address that you publish on the WWW like this will probably start receiving unsolicited commercial email (UCE, junk email). It's a good idea to protect your real email address (e.g., by filtering incoming email, or by using a separate address only for mailto links).
Dat kan je niet, niet op een betrouwbare manier. De methodes die regelmatig worden genoemd doen het niet op alle combinaties van browsers en e-mailprogramma's (niet eens op alle veelvoorkomende combinaties), en hebben vaak een belangrijk nadeel: als het mislukt, gaat de e-mail verloren.
Als je echt een subject nodig hebt, kan dat door een formulier op je pagina aan te bieden, dat gegevens stuurt naar een CGI-programma, dat de formuliergegevens naar je mailt met de gewenste onderwerpregel. Het formulier moet echter een input-veld hebben voor het emailadres van de bezoeker, en je moet maar hopen dat de bezoeker dit foutloos invult.
Hier zijn enkele andere manieren om onderwerp-achtige informatie over te brengen:
<A HREF="mailto:user@site" TITLE="Jouw Onderwerp">. De meeste browsers zullen het TITLE-attribuut negeren, maar sommige minder gebruikte browsers zullen het gebruiken als een subject voor het email-bericht. Alle browsers zullen de mail verzenden.<A HREF="mailto:user@site?subject=Jouw%20Onderwerp">, waarmee "Jouw Onderwerp" (de spatie wordt gecodeerd als "%20") in het "Subject" header veld van het e-mailbericht wordt gestopt door de meeste huidige browsers. De details van deze RFC kunnen worden gevonden op <URL:http://info.internet.isi.edu/in-notes/rfc/files/rfc2368.txt>. Merk wel op dat je mail zult kwijtraken van gebruikers van oudere browsers, dus je zult je moeten afvragen of het voor-ingevulde subject de verloren mail waard is.Gebruik gewoon de afbeelding als inhoud van de link, zoals hier:
<A HREF=...><IMG ...></A>
Gebruik het BORDER="0"-attribuut in hte <IMG>-element. Bijvoorbeeld:
<A HREF="doc.html"><IMG SRC="doc.gif" ALT="Bekijk document." BORDER="0"></A>
Gebruik een 'image map'. Client-side image maps hebben geen verwerking op de webserver nodig, waardoor de responssnelheid groter is. Server-side image maps verbergen de linkbestemmingen voor de browser, en kunnen dienen als backup voor client-side image maps voor de enkele hele oude browsers die wel server-side image maps ondersteunen maar geen client-side image maps.
De configuratiedetails van server-side image maps verschillen van server tot server. Zoek in de serverdocumentatie naar details.
Client-side image maps worden geïmplementeerd met HTML. Het MAP-element definieert een enkele image map en het AREA-element definieert specifieke gelinkte gebieden binnen die image map. Het USEMAP-attribuut van het IMG-element associeerd een image map met een bepaalde afbeelding. Een uitgebreide uitleg (met voorbeelden) is te vinden op <http://www.htmlhelp.com/reference/html40/special/map.html>. Een handleiding is te vinden op <http://ppewww.ph.gla.ac.uk/~flavell/www/imgmaptut.html>.
Als je de onderstreping van links uit wilt zetten bij het bekijken van pagina's in je browser, moet je de instellingen van je browser aanpassen . Bijvoorbeeld in Netscape 3, bij Options | General Preferences | Appearance; in Netscape 4 is het Edit | Preferences | Appearance | Colors; in Internet Explorer: View | Options | General.
Wanneer je wilt voorkomen dat links op jouw pagina worden onderstreept als bezoekers ze bekijken, is er geen manier voor om dit met HTML te bereiken. Je kunt het suggereren met behulp van stylesheets door te definiëren
a:link, a:visited, a:active {text-decoration: none}
Je kunt zo'n weergave suggereren met behulp van stylesheets. Stel in je stylesheet zoiets in:
a:link {color: blue; background: white}
a:visited {color: purple; background: white}
a:active {color: red; background: white}
a.foo:link {color: yellow; background: black}
a.foo:visited {color: white; background: black}
a.foo:active {color: red; background: black}
Gebruik dan CLASS="foo" om de links met de tweede kleur te identificeren in je HTML, zoals hier:
<A CLASS="foo" HREF=...>...</A>
Gebruik in je stylesheet de hover pseudo-class om een ander uiterlijk aan te geven voor links wanneer de cursor er boven hangt. Specificeer de hover pseudo-class na de link en visited pseudo-classes. Bijvoorbeeld:
A:link { color: blue ; background: white }
A:visited { color: purple ; background: white }
A:hover { color: red ; background: white }
Het meest waarschijnlijke is dat je een paar aanhalingstekens bent vergeten te sluiten aan het einde van een HREF-attribuut. Of je hebt misschien een ">"-teken gebruikt ergens anders binnen een tag. Alhoewel dit is toegestaan zullen sommige oudere browsers denken dat de tag daar ophoudt, zodat de rest wordt weergegeven als normale tekst.
Dit gebeurt vooral als je commentaartags gebruikt om tekst met HTML-tags "weg te commenten". (Zie het antwoord op "Hoe voeg ik commentaar in HTML in?") Alhoewel de juiste syntax <!-- --> is (zonder dat "--" ergens anders in het commentaar voorkomt), zullen sommige browsers denken dat het commentaar ophoudt bij de eerste ">" die ze zien.
Validators zullen je elke syntaxfout in je markup laten zien, maar checkers zoals Weblint en HTMLchek kunnen laten zien waar je bekende browserbugs uitlokt. Zo is het bijvoorbeeld van enkele versies van Netscape Navigator bekend dat ze moeite hebben met links naar benoemde ankers ("anchors") als de ankers zich in een tabel bevinden die het ALIGN-attribuut gebruikt. Zie ook het antwoord op "Hoe controleer ik op fouten?"
Een andere mogelijkheid is, dat de webontwerpsoftware gebruikt maakt van bestands-URL's (bijv. file:C:\pad\bestand.html). Als dat het geval is kun je ze vervangen door relatieve URL's (bijv. bestand.html) of http-URL's (bijv. http://server/pad/bestand.html).
Staat er een spatie, #, ?, of een ander speciaal teken in het pad van de bestandsnaam? Spaties zijn niet toegestaan in URL's. Wanneer je de spatie codeert door hem te vervangen door %20, werkt de link wel.
Elk teken in een URL kan worden gecodeerd als % plus de tweetallige hex waarde van het teken. (A-F in hexadecimale getallen kunnen zowel kleine letters als hoofdletters zijn.) Volgens de specificatie hoeven alleen alfanumerieke tekens en de speciale tekens $-_.,+!*'() niet te worden gecodeerd.
Alle andere tekens moeten worden gecodeerd wanneer ze in een URL voorkomen, behalve wanneer ze gebruikt worden voor hun gereserveerde doeleinden. Als je bijvoorbeeld de waarde "Jan&Jans" aan een CGI-script wilt doorgeven, moet je het "&"-teken coderen als "%26", wat bijvoorbeeld de volgende URL kan opleveren: http://www.foo.com/foo.cgi?rijm=Jan%26Jans&publiek=kind.
Merk op dat de "?" en andere "&" tekens in deze URL niet zijn gecodeerd, aangezien ze worden gebruikt voor hun gereserveerde doeleinden. Maar als deze URL wordt gebruikt als een attribuut-waarde in een HTML-document, moet het "&"-teken worden gedoceerd als "&", zoals hier: <A HREF="http://www.foo.com/foo.cgi?rijm=Jan%26Jans&publiek=kind">
Zie <URL:http://www.w3.org/Addressing/> voor de technische details.