6. | Indhold | |||||
6.1 | Introduktion til Ankre og Links | |||||
6.2 | Links til Andre Ressourcer (Ankre) | |||||
6.2.1 | Ankre ind i et HTML-dokument | |||||
6.2.2 | Ankre til E-mail og Nyhedsgrupper | |||||
6.3 | Sammenkædede Dokumenter (Links) | |||||
6.4 | Sti-information |
En af de vigtigste egenskaber ved HTML er muligheden for at lave links (henvisninger) til andre ressourcer - dvs.hjemmesider, billeder, lyde med videre - på Internet. Faktisk er egenskaben så vigtig, at hypertekst, som tekst med indlagte links kaldes, indgår i sprogets navn - HyperText Markup Language. Egenskaben er også en af de vigtigste årsager til World Wide Webs enorme succes.
Et anker består af to ender samt en retning. Forbindelsen begynder i kildeankret og peger på destinationsankret, der kan være en hvilken som helst ressource på World Wide Web. Når man klikker på et link af denne type, vil browseren hente den ressource, der er angivet med destinationsankret. Nemt og ligetil!
En anden type links beskriver et andet forhold mellem to ressourcer end blot det at "klikke på dette link for at besøge den tilknyttede ressource". Disse links anvender deres attributter til at udtrykke hvilket forhold, det drejer sig om. Et sådant link kunne f.eks. knytte et eksternt typografiark til et HTML-dokument.
Den almindeligste type links er ankre, der åbner en anden ressource, når brugeren f.eks. klikker på dem i sin browser. Ankre angives med A-elementet, hvis sluttag er påkrævet, og de kan kun anvendes i HTML-dokumentets krop.
Den ressource, ankeret peger på, angives med attributten href, der indeholder ressourcens placering eller adresse. Denne placering kaldes også for ressourcens URL, der står for "Universal Resource Locator". Vi vil nu anvende ankre til at dele lyntogseksemplet fra "Grundlæggende HTML" op i kapitler:
<H1>De Danske Lyntog</H1> <OL> <LI><A href="mslyntog.htm">De Første Lyntog</A> <LI><A href="malyntog.htm">MA-lyntogene</A> <LI><A href="IC-3.htm">IC-3 Togene</A> </OL>
Dette HTML-dokument anvender en ordnet liste til at danne indholdsfortegnelsen til historien om de danske lyntog, idet alle kapitler er lagt ud i hvert sit HTML-dokument, som der så henvises til. Et af disse dokumenter ser således ud:
<HTML> <HEAD> <TITLE>De Første Lyntog</TITLE> </HEAD> <BODY> <H1>1 De Første Lyntog</H1>
De allerførste lyntog blev taget i brug samtidigt med Lillebæltsbroen i maj 1935 som et led i en større trafikrevolution, der skulle revolutionere togforbindelserne mellem landsdelene. Selve lyntoget var et motorvognstog med en motorvogn med førerplads i hver ende og en mellemvogn imellem. Hver motorvogn indeholdt desuden en 2 klasse salon, ligesom en motorvogn i hvert sæt havde restaurant, hvor der kunne indtages små retter og forfriskninger, mens den anden havde et bagagerum. Mellemvognen havde en 2. klasse kupe i hver ende samt seks 1. klasse kupeer. Disse trevognssæt suppleredes senere af fire firvognssæt opbygget efter samme mønster med en ekstra mellemvogn med 2. klasse salon.
</BODY> </HTML>
De to andre kapitler har en tilsvarende opbygning. Altså ikke noget nyt under solen der.
Du skal naturligvis ikke snydes for ankrenes attributter og hændelser.
Langt de fleste links fører til et andet HTML-dokument, men af og til er det ikke tilstrækkeligt kun at linke til dokumentets start, sådan som linket vi har set ovenfor gør det. F.eks. ville indholdsfortegnelsen øverst på denne og de fleste andre sider på dette websted blot være simple oversigter, hvis de ikke henviste til steder længere nede på siden.
For at lave den type ankre skal man definere et bogmærke, der kan fungere som destinationsanker for henvisningen. Det gøres også med A-elementet, men nu sammen med attributten name. F.eks. ser overskriften herover således ud i HTML-dokumentet:
<H3><A name="bookmark">6.2.1 Ankre ind i et HTML-dokument</A></H3>
Læg mærke til, at man stadig skal anvende sluttag'et </A>, selv om det er <A>-tag'et, der er det egentlige bogmærke. HTML 4.0 introducerer herudover en anden måde at lave bogmærker på: nemlig ved hjælp af et elements id-attribut. Lavet på denne måde ville overskriften se således ud:
<H3 id="bookmark">6.2.1 Ankre ind i et HTML-dokument</H3>
Tilbage står nu kun at lave kildeankeret. Det gøres som vist ovenfor, idet man sætter tegnet "#" ind foran navnet på bogmærket. Vi anvender dette til at samle kapitlerne lyntogshistorien fra "Grunlæggende HTML" i ét dokument igen:
<H1>De Danske Lyntog</H1> <OL> <LI><A href="#mslyntog">De Første Lyntog</A> <LI><A href="#malyntog">MA-lyntogene</A> <LI><A href="#IC-3">IC-3 Togene</A> </OL> <H2><A name="mslyntog">De Første Lyntog</A></H2> . . .
Også i dette eksempel anvendes ordnede lister til at lave en indholdsfortegnelse, men denne gang fortælles historien på den samme side, som indholdfortegnelsen står i.
Man kan også lave et link ind i et andet dokument. Det gøres ved at sætte dokumentets navn ind foran "#"-tegnet:
Anden generation af lyntog var de populære <A href="lyntog3.htm#malyntog">MA-lyntog</A>.
der springer direkte til afsnittet om MA-lyntog i ovenstående eksempel.
Fremgangsmåden er den samme, uanset om destinationsankeret er lavet med A-elementets name-attribut eller en id-attribut.
Siderne på dette websted er lavet efter nøjagtigt samme metode. "A piece of cake" som de siger i udlandet.
Man kan også oprette et anker, der refererer til en e-mail adresse eller en nyhedsgruppe. Det gøres ved at sætte henholdsvis 'mailto:' og 'news:' ind først i href-attributten:
Skriv til: <A href="mailto:Carsten.Pedersen@wwwizard.dk">Carsten.Pedersen@wwwizard.dk</A>
for e-mail adresser og
HTML diskuteres i nyhedsgruppen: <A href="news:dk.internet.webdesign.html">dk.internet.webdesign.html</A>
Der er en anden måde at sammenkæde dokumenter på end ved hjælp af ankre. Den anvendes som nævnt i de tilfælde, hvor der er et andet forhold mellem dokumenterne end det, der kan udtrykkes med et anker.
Til denne form for sammenkædninger anvendes elementet LINK, der ikke har noget sluttag. LINK adskiller sig også fra A-elementet ved, at den kun kan anvendes i HTML-dokumentets hoved. Her er et lille udsnit af dette dokuments hoved:
<HEAD> <LINK rel="stylesheet" type="text/css" href="wizard.css"> <LINK rel="index" type="text/html" href="index.htm"> <LINK rel="contents" type="text/html" href="html40.htm"> <LINK rel="prev" type="text/html" href="htmltables.htm"> <LINK rel="next" type="text/html" href="htmlimages.htm"> </HEAD>
Det første link knytter et eksternt typografiark ved navn wizard.css til dokumentet. At det er et typografiark er angivet i attributten rel, der har værdien stylesheet, ligesom attributten type også fortæller, at det er et tekstdokumenten af typen css, der står for "Cascading Style Sheet", der er den engelske betegnelse for typografiark. Endelig henviser href til det dokument, der indeholder det eksterne typografiark nemlig wizard.css.
På samme måde henviser næste link til indeksdokumentet for hele dette websted, idet rel her har værdien index. type fortæller, at det er et HTML-dokument, mens href igen indeholder navnet på dokumentet, der er index.htm.
Links kan også hjælpe søgemaskiner med at finde alternative versioner af HTML-dokumentet enten på et andet sprog eller beregnet til et andet medie som f.eks. en printer:
<LINK lang="en" title="This document in English" type="text/html" rel="alternate" hreflang="en" href="http://www.someplace.com/WebWriterWizard/htmllinks.htm">
der henviser til en - fiktiv - udgave på engelsk af dette dokument. lang-attributten er anvendt for at tilkendegive, at værdien af title-attributten er på engelsk, mens det er hreflang, der angiver, at det dokument, der henvises til, er på engelsk.
Du kan læse mere om de attributter og hændelser, der er knyttet til links. Du bør også læse om de link typer, der kan bruges i forbindelse med rel-attributten.
Henvisninger til andre HTML-dokumenter, billeder, eksterne typografiark m.v. er altid angivet med er URL. Disse angivelser er enten absolutte eller relative i forhold til en base-URL, man har angivet.
En absolut URL indeholder den fuldstændige placering af et dokument som f.eks.:
http://www,wwwizard.dk/htmllinks.htm
der er den absolutte URL til denne side. Absolutte URL'er anvendes mest til at henvise til andre websteder på Internet, men er uegnede ved referencer indenfor samme websted, fordi man så skal ind og rette samtlige referencer, hvis stedet flyttes. Og det er bøvlet, skulle jeg lige hilse og sige.
Der anvender man i stedet relative URL'er, idet man går ud fra en bestemt base-URL. Denne base-URL er som regel det bibliotek, som "index.htm" ligger i, og i så fald behøver man ikke angive den. Flyttes hele webstedet, sker der ikke noget, da alle henvisninger jo stadigvæk passer.
Der kan dog være tilfælde, hvor det er uhensigtsmæssigt at anvende placeringen af "index.htm" som base-URL, og så er man nødt til at angive basen. Det gøres med elementet BASE, der ikke har noget sluttag. Base-URL'en for dette websted kan så specificeres med:
<BASE href="http://www,wwwizard.dk/">
hvor attributten href angiver base-URL'en. Ligesom LINK anvendes BASE kun i HTML-dokumentets hoved.
Der er to attributter knyttet til BASE-elementet.