HTML © Eva von Pepel
* [ HTML-referensbok ] * [ Referensböcker ] *
HTMLs främsta kännetecken och det karaktärsdrag som åtskiljer språket från flesta andra markeringsspråk är dess unika hypertextegenskaper och interaktiva dokument. Hypertext är vanlig text som markeras (aktiveras) på så sätt att den skapar en länk mellan en Web-källa och en annan.
En länk har två änden och en destination. Änderna kallas för ankare (anchor). Länken börjar vid länkkällan och pekar till en destinationskälla (mål/target). När dessa två ankare sammankopplas med varandra skapar de en hyperlänk. Ett ankare är alltså en källa eller target av en hypertextlänk. Hyperlänk är relation mellan dessa två ankare: huvud (target) och svans (källa). Det är svansen, som med hjälp av hypertext, länkas med huvudet.
När du klickar på denna länk kommer du att förflyttas (länkas) till en annan plats. Den andra platsen kan vara en annan plats (ett annat element) i samma dokument, t ex ett specifikt stycke eller ett annat dokument som kan finnas var som helst på ens egen server eller vilken annan server som helst. Det länkade målet kan vara ett annat HTML-dokument, en bild, en audiofil m.m. En aktiverad länk kan även exekvera ett CGI-program eller öppna epostklienten. Med ett enda musklick kan du bläddra bland dokumenten oberoende av deras georgraiskt läge. Det är just det som kallas för surfing.
Länkkällan skapas av elementet A samt dess attributvärde HREF=URI som specificerar målkällans adress.
<A HREF="ref.html"> HTML-referens</A>
Målkällan skapas av ett namngivet ankare som är antingen elementet A och dess attribut NAME eller ett valfritt element som tar attributet ID. Målkällan måste alltså ha ett namn. Varje URI som adresserar ankaret måste uppge detta namn som fragment identifier.
<A NAME=sek1>
Sektion 1</A>
eller
<H1 ID="sek1">
Sektion 1</H1>
Fragment identifier
När en URI refererar till en plats inuti en källa adresserar den det namn med vilket ankaret identifierades (namngivits). Sådana URI börjar med en stege (#) , följs av ankarets namn och kallas fragment identifiers.
<A HREF="#sek1"> Till Sektion 1</A>
Markeras: <A></A> - båda obligatoriska
Får innehålla: inlineelement exklusive A
Får finnas i: blockelement, inlineelement exklusive A
Elementet A skapar länkarna. När attributet HREF, NAME eller ID är specificerat definierar elementet en länkkälla som användaren kan aktiviera, dvs besöka den länkade källan. I visuella www-klienter aktiveras länkarna via musklick eller tangentordskommando, i andra kan de aktiveras t ex via röstkommando.
Början på ett ankare markeras med starttaggen <A> och slut med sluttaggen </A>. Båda är obligatoriska. Ankare är ett inlineelement och som sådant får enbart innehålla andra inlineelement exklusive ett annat A. Förekomst av ett A-element i ett annat A är förbjudet.
Mellan start- och sluttaggen skriver du det innehåll som ska visas på skärmen. Detta innehåll kallas för etikett och när en besökaren klickar på den aktiveras länken.
Det är lätt att åtskilja hypertext från vanlig text då www-klienter visar den understruken och i en annan färg så som pekdonet ändras och visas som en hand när det passerar över en länk. Genom olika BODY-attribut kan du välja färgen på länkar. Om länkarna blandas med vanlig text, dvs om de inte utgör en innehållsförteckning eller liknande, bör de länkade orden följa naturligt. Skriv inte Klicka här utan länka ett eller flera lämpliga ord som redan finns i texten. T ex i en mening "Information om ankare finns i HTML Referensboken", orden Information om ankare är mest lämpliga.
En etikett kan innehålla en bild istället för text, eller båda två. Om bilden används klickar användaren på den. Länkbilder åtskiljs från de vanliga bilderna genom en ram runt om dem. Även här ändras pekdonet.
Ordet "Innehållsförteckning" skapar en etikett och ser ut enligt följande:
<A HREF="toc.html">Innehållsförteckning
</A>
Innehållsförteckning
| HTML 4.0 | HTML 4.0 Transitional | HTML 3.2 |
|---|---|---|
| %attrs; HREF, NAME, REL, REV, HREFLANG, TYPE, SHAPE COORDS, CHARSET, ACCESSKEY, TABINDEX, onfocus, onblur | samma som i HTML 4.0 plus TARGET | NAME, HREF, REL, REV, TITLE |
Attributet lokaliserar en Web-källa och på så sätt definierar en länk mellan det befintliga elementet och målkällan som genom t ex ett klick kan aktiveras av besökaren. Målkällan kan aktivieras på ett antal olika sätt, till exempel genom att öppna ett nytt HTML-dokument i samma eller ett annat fönster, starta ett nytt program, m.m.
HREF tar tre värden: 1. URI, 2. #NAMN, 3. MAILTO:
Värdet lokaliserar den källan som ska visas/exekveras när länken aktivieras. URI:n måste vara exakt. DOKUMENTNAMN.html och dokumentnamn.html är inte samma dokument.
Dokumentet är externt och kan finnas i samma bibliotek i ett annat bibliotek eller var som helst på nätet. Till exempel om du vill länka till dokumentet med adressen http://vonpepel.com/ref/html/ankare.html, skriver du:
<A HREF="http://vonpepel.com/ref/html/ankare.html"> Info om ankare</A>
OBS! Adressen måste citeras och hela sökvägen anges om det gäller externa dokument. Om du var ägaren till eva-biblioteket (interna dokument) behöver du inte skriva hela adressen. En relativ länk räker:
<A HREF="ref/html/ankare.html">Info om ankare</A>
Om båda dokumenten fanns i samma bibliotek kan du förkorta vidare: (exemplen på hur du länkar filer som ligger i olika bibliotek finns i slutet av detta dokument)
<A HREF="ankare.html">Info om ankare</A>
När du klickar på orden (etiketten) "Info om ankare" kommer du att förflyttas till ankare.html-dokumentet. Du kan byta orden "Info om ankare" mot en bild eller ikon. I sådana fall klickar du på bilden istället för orden:
<A HREF="ankare.html"><img src="bild.gif"></A>
Värdet refererar till ett namngivet ankare, t ex:
<A NAME=sek1>Sektion 1</A> är ett namngivet ankare.
Det namngivna ankaret kan finnas i samma dokument eller var som helst på nätet. Om det finns i samma dokument skriver du:
<A HREF="#sek1">Till sektion 1</A>
Om det finns i samma bibliotek men i ett annat dokument, t ex ref.html, skriver du:
<A HREF="ref.html#sek1">Till sektion 1</A>
Om det finns i ett annat bibliotek, skriver du bibliotekets namn. Om det finns på en annan server skriver du hela sökvägen. Observera att värdet alltid citeras.
Värdet specificerar en epostadress till vilken ett meddelande kan postas direkt från dokumentet. Min adress är eva@algonet.se, därför skriver jag:
<A HREF="mailto:eva@algonet.se">Text</A>
Det är alltid bättre att uppge epostadressen istället för "Text". Om en besökare skriver ut dokumentet syns inte adressen utan bara "Text"-orden.
<A HREF="mailto:eva@algonet.se">eva@algonet.se</A>
Attributet namnger det befintliga ankaret så att det kan användas som målkällan av ett annat ankare.
Värdet måste vara unikt - två ankare kan inte ha samma namn i ett dokument, inte ens om ett namn skrivs med versaler och ett med gemena. Om namnet används som fragment identifier måste strängen vara exakt.
<A HREF="#sek1">Till sektion 1</A>
<A HREF="#sek2">Till sektion 2</A>
ID är ett av de attribut som beskrivs under det gemensamma namnet %attrs;. Med attributet kan du namnge ett valfritt element och på så sätt skapa en målkälla. Till exempel:
<H1 ID=sek1>Sektion 1</H1>
Senare i dokumentet (eller från ett annat dokument) kan du referera till denna källa som till ett namngivet ankare:
<P>Se <A HREF="#sek1">sektion 1</A> för mer information.</P>
OBS! Två ankare kan inte ha samma namn i ett dokument. Exemplen nedan är ogiltiga om dessa två ankare förekomer i samma dokument.
<H1 ID="sek1">Sektion 1</H1> och <A NAME=sekt1>Sektion 1</A>
Tänk på följande innan du bestämmer dig med vilket attribut du ska namnge källorna:
TITLE är ett av de attribut som beskrivs under det gemensamma namnet %attrs;. Just i länkar (både A och LINK) är attributet mycket användbart då det förser elementen med en titel som kan till exempel presenteras i form av tooltip när musen passerar över den eller läsas av taldatorer. Oberoende av www-klient förser TITLE användarna med information om den länkade källan.
<P>Mer om ankarens titel hittar du i <A HREF="ankare.html#sek1" title="Gå till Sektionen 1"> sektionen 1</A>
Forward link. Attributet beskriver relation från det befintliga dokumentet till det dokument som länkas via HREF. Värdet är en lista av länktyper. De olika typerna separeras med ett mellanslag.
HTML 4.0 definierar följande länktyper:
<A REL=glossary HREF="lexikon.html">Lexikon</A>
"lexikon.html" är lexikon för det befintliga dokument
<A REL=prev HREF="title.html">Elementet TITLE</A>
<A REL=next HREF="meta.html">Elementet META</A>
<A REL=start HREF="index.html">Inledning</A>
<A REL=copyright HREF="bilagor/copy.html">Copyright</A>
Linktyper som PREV, NEXT, START specificerar placering av ett specifikt dokument inuti en dokumentserie och kan användas som navigeringsredskap. Tyvärr, har denna egenskap dåligt stöd i www-klienter. Dessa länkar talar även för sökmotorer var dokumenten kan hittas.
<A TITLE="Svensk manual" type="text/html" rel="alternate" hreflang="sv" href="svensk.html">Svensk manual</A>
<A TITLE="Fransk manual" type="text/html" rel="alternate" hreflang="fr" href="fransk.html">Fransk manual</A>
Alternativa länkar. En pekar till en svensk manual och den andra till en fransk. Har du alternativa dokument bör du alltid referera till dem enligt ovan så att sökmotorer kan föreslå användaren alternativa versioner.
Reversed link. Attributet beskriver relation till från ankaret specificerat av attributet HREF till det befintliga dokumentet. Värdet beror på själva relationen (typ av länken) - se REL.
En länk i dokumentet A:
<A HREF="dokB.html" REL="valfrirelation">
Till dokument B</A>
Har samma betydelse som en länk i dokumentet B:
<A HREF="dokA.html" REV="valfrirelation">
Till dokument A</A>
<A REV=subsection HREF="index.html"> Till inledningen</A>
det befintliga dokumentet är en del av (subsektion) av det länkade "index.html"
Attributet specificerar MEDIA-typ av en innehållsdel. Värdena kan till exempel vara: "text/html", "image/png", "image/gif", "video/mpeg". Listan på alla registrerade MEDIA-typer finns hos IANA.
<A HREF="bild.pgn" TYPE="image/pgn">Mitt porträtt</A>
Detta attribut föreser www-klienten med information om språket som dokumentet "på andra sidan" av länken använder. HREFLANG kan enbart förekomma om attributet HREF är specificerat.
Värdet uppges oftast som en två-bokstavs-språkkod (OBS! ej dataspråk) som kan även inkludera dialekt, t ex sv för svenska, en för engelska, eller en-cockney för cockney-engelska. Hela listan med språkkoder finns i ISO 639 som kan hittas på http://www.oasis-open.org/cover/iso639a.html, http://www.ietf.org/rfc/rfc1766.txt
<A HREF="manualer/engelsk.html" HREFLANG=en> Engelsk version</A>
Då avkodningen av den länkade källan kan skilja sig från avkodningen i det befintliga dokumentet kan du med hjälp av attributet CHARSET tala om för www-klienten vilken avkodning används "på andra sidan" av länken.
Värdet specificerar teckenavkodning av den länkade källan, t ex ISO-8859-1. Lista på registrerade teckenavkodningar finns hos IANA.
<A href="dok.html" charset="UTF-8"> Till UTF-8-dokument</A>
Med detta attribut kan användaren få tillträde till elementet via ett kort tangent-bordskommando. Elementet får fokus när användaren klickar på den specificerade tangenten, t ex länken följs. Värdet är ett Unicode tecken. I exemplet nedan kommer ett klick på tangenten A ta besökaren till "Innehållsförteckningen".
<P><A ACCESSKEY=A REL=contents HREF="toc.html">Innehållsförtecknig</A></P>
Observera att även ALT-tangenten bör vara nedtryckt om du använder Windows eller CMD om du är MAC-användre.
Attributet specificerar det befintliga elementets placering i dokumentets tabbordning, dvs följd i vilken elementet kommer i fokus under tangentbords-navigering. Värdet är en siffra mellan 0 och 32767. Följande regler gäller:
<P>Gå till
<A TABINDEX=5 HREF="ref/html/ankare.html">Information om ankare</A>
och
<BUTTON TYPE="button" name="get-database" TABINDEX=1 onclick="get-database">Hämta databasen</BUTTON></P>
I HTML 4.0 kan elementet A användas istället för AREA för att länka en hotspot i klickbara bilder (imagemaps) med ett dokument. I ett sådant fall tar ankaret attributen SHAPE (värden rect, circle, poly, default) för att specificera form på den klickbara delen samt COORDS för att uppge koordinatorerna.
Se "Klickbara bilder", avsnittet "MAP/blockelement/A" och "Object"
Dessa attribut är s.k. inre händelser. Något sker efter det att www-klienten har laddat dokumentet. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.
Attributet är nedskrivet och används för att specificera i vilken ram den länkade källan ska visas. Om ram med detta namn inte finns öppnar www-klienten ett nytt fönster.
<A HREF="ankare.html" target="_top">Ankare</A>
visar dokumentet i ett helskärm tomt fönster istället för användarens eventuella ram. Tillåtna värden är:
Ett ankare kan samtidigt skapa en länk (attributet HREF) och namnge en källa (attributet NAME). I exemplet nedan namnges stycket "sek1" så som länken till en bild skapas.
<P>Ankarets egenskaper illustreras <A NAME=sek1 HREF="ankare.gif">i denna bild</A>
Ett ankare kan vara tomt, dvs utan etikett. Dessvärre hittar inte alla www-klienter dessa länkar och därför, åtminstone för tillfället, bör de undvikas.
<A NAME=sek1></A>
Även då en del retar sig på understrykningar är dess borttagande inte alltid någon bra ide. Många är vana vid understrukna länkar och dess borttagande kan orsaka vissa svårigheter med att upptäcka dem. Det går inte att bli av med understrykningen via HTML. Du kan antingen ändra inställningar i din www-klient eller använda stilmallar. Du kan dock använda HTML dock för att ta bort ramen runt bilder.
Denna länk har ingen understrykning
<A HREF="ref.html" STYLE="text-decoration: none">Referensguide</A>
Denna bild har ingen ram
<A HREF="ref.html"> <img src="bild.gif" border=0></A>
Färgen på denna länk ändrades med elementet FONT. OBS! inte lla www.klienter stödjer detta.
<A HREF="ref.html"> <FONT color=red>Referensguide</FONT></A>
En relativ URL lokaliserar dokument som är relativa till till dokumentet där länken befinner sig. Om elementet BASE är frånvarande kan relativa adresser uppges enbart om dokumenten finns på samma server.
En absolut URL lokaliserar dokument oberoende av andra dokument. En absolut adress måste uppges om dokumenten finns på olika servrar.
URL (Uniform Resource Locator) är en standard som specificerar olika objekt på Internet, t ex en fil eller nyhetsgrupp
http, ftp, news, telnet är objektorienterat protokoll för distribution av information, mao en överföringsmetod
Många har problem med att länka filer som finns i underbibliotek med filer som finns i andra bibliotek. Här kommer några exempel på hur filer länkas:
fil3 ska länkas med fil 4 som finns i samma bibliotek - bibC
<A HREF="fil4">FIL4</A>
fil1 ska länkas till fil2 i bibB som finns ett steg under
<A HREF="bibB/fil2">FIL2</A>
fil1 ska länkas till fil3 i bibC som finns två steg under
<A HREF="bibB/bibC/fil3">FIL3</A>
fil2 ska länkas till fil3 i bibC som finns ett steg under
<A HREF="bibC/fil3">FIL3</A>
fil2 ska länkas till fil1 i bibA som finns ett steg över
<A HREF="../fil1">FIL1</A>
fil4 ska länkas till fil2 i bibB som finns ett steg över
<A HREF="../fil2">FIL2</A>
fil4 ska länkas till fil1 i bibA som finns två steg över
<A HREF="../../fil1">FIL1</A>
Precis på samma sätt länkar du mangivna ankare, tex
<A HREF="../../fil#namn">Länkens namn</A>