kaxigt.com

Jag skriver om webben för webben

Hem » HTML-guider » Att länka: katalogstruktur

Att länka: katalogstruktur

Postad: 31 juli 2004 | HTML-guider | No Comments
Lästid: 5 minuter
Den här guiden tar upp att skapa katalogstrukturer och hur man länkar från, till och mellan dessa.

Det här med att länka kan ställa till med problem. Framförallt om man inte har en struktur i sin webbkatalog utan låter sina bilder och html-dokument ligga ”fritt” i en enda mapp. Här kikar vi på hur man bygger en bra katalogstruktur. Hur vi länkar inom – utom mapparna. Lite olika länkattribut som target. Och till sist vad man bör undvika när man ska länka.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

Vad är då en bra katalogstruktur? Vi ska titta på exemplet här nedan:

lankhelp.jpg

Förmodligen har Du redan en huvudmapp i där du har samlat det du vill ha på hemsidan. Här i exemplet döper vi den till webb. Ditt syfte med en hemsida är kanske att beskriva dina intressen, lägga ut lite bilder, kanske lite musik, eventuellt lite grafik och lite annan blandad kompott.

För att då skapa en bra struktur är det viktigt att göra en så kallad undermapp till var och en av de teman/ämnen Du vill lägga ut på nätet. Dessa undermappar ger Du ett namn som anknyter till dess innehåll. Vill du lägga ut grafik? Döp då gärna mappen till just grafik. Samla sedan allt som rör din grafik i denna mapp – även de html-dokument som tillhör grafiken.

Fortsätt sedan och gör likadant tills du får en mapp till varje innehåll.

I det här exemplet kallar vi mapp 1 för grafik
I det här exemplet kallar vi mapp 2 för musik
I det här exemplet kallar vi mapp 3 för intresse
I det här exemplet kallar vi mapp 4 för bilder
I det här exemplet kallar vi mapp 5 för blandat

Nu har vi samlat alla fem undermapparna och lagt dem inuti huvudmappen. Det innebär att då du öppnar upp huvudmappen webben så ligger undermapparna ensamna i den.

Alla websajter måste dessutom ha en index-sida, så nästa steg är att infoga din sida index.html i katalogen. Och det är nu som detta strukturerade katalogsystem är till hjälp!

Din index-sida lägger du sonika löst i huvudmappen – inte i någon av de andra mapparna [se exemplet ovan]. Med andra ord, allt innehåll till din webbsajt lägger du i mappar. De dokument Du använder för att bygga upp sidan med ligger kvar i huvudmappen. Exempel på dessa dokument kan vara index.html, sidebar.html, header.html, footer.html men kan även vara main.html och style.css, om du använder css-mallar.

Hur länkar vi då?

Anta att vi har alla länkar samlade i index.html och därifrån vill vi skicka besökarna till respektive sida. Då blir exempelvis sökvägen till grafiksidan denna:

<a href="grafik/grafikindex.html" title="grafikindex">grafiken</a>

Vi ska ta detta igen steg för steg. Studera gärna strukturen i exemplet högst upp.
<a href=” är startattributet för länken

<a href=”grafik/grafikindex.html” title=”” innebär att sökvägen först leder till mappen grafik. Och inuti den mappen har du ett html-dokument som heter grafikindex.html. Title-attributet är lika viktigt som alt-attributet för bilder. Det beskriver vad länken innehåller som syns när man för musen över länken. Du avslutar med länktaggen </a>

Det spelar ingen roll i vilket dokument du lägger dina huvudlänkar som leder ut till sidan, det enda Du bör komma ihåg är att så länge detta dokument ligger löst i huvudmappen så måste sökvägen till respektive mapp stå först, och dokumentets ”namn” (sökväg) direkt efteråt åtskilt med en slash /.

Att länka inom samma mapp

All länkning inom samma mapp görs enklast med kort sökväg.

Länkar du en bild i din grafikmapp till ditt grafikindex.html så blir sökvägen i ditt dokument:

<img src="bild.jpg" alt="">

Länkar du till ett annat dokument i samma mapp skriver du efter samma princip i ditt dokument:

<a href="grafik2.html" title="">mer grafik</a>

Du kan länka till hur många sidor som helst. Du kan också ha ett särskilt länkindex i varje mapp.

Länka mellan mapparna

All länkning mellan mapparna görs med exakt adress.

Vill Du länka en bild från mappen bilder till din indexsida skriver du sökvägen <img src=”bilder/bild.jpg” alt=””> i ditt index-dokument. Eller Du kanske vill koppla ett dokument från grafikmappen till din indexsida? Länken ser då ut så här i ditt index-dokument:

<a href="grafik/ditt_valda_dokument.html">Nytt på grafiksidan</a>

Länka till en annan webbsida i samma katalog:

<a href="dok.htm" title=""></a>

Länka till en annan webbsida i annan katalog men samma webbserver

<a href="mappens_namn/dokumentets_namn.htm" title=""></a>

Ankarlänk

Syntaxen för att länka till en plats (en ankarlänk) på samma sida är:

<a href="#böcker"></a>

Ankaret dit länken ska söka sig blir denna:

<a name="böcker"></a>

Principen vid target och ”tillbaka”-länk

När man länkar är det viktigt att ange rätt target – det vill säga rätt mål där sidan ska öppnas. Vi säger att du har en hemsida och du vill att alla länkar ska öppnas var och en för sig själv i nya fönster, då måste du ange target=”_blank”. Vill du att de istället ska öppnas i samma fönster kan du antingen skriva target=”_self” eller så låter du bli att ange target överhuvudtaget (bäst).

Frames bör man inte använda på grund av att det varken är användarvänligt eller håller en web standard samt att frames är ett föråldrat (obsolete) sätt att bygga hemsidor på. Använder du ändå frames anger du i vilken frame target ska öppnas.

I target=”_top” öppnas dokumentet i hela webbfönstret och alla ramar försvinner. Detta är inte likställt med syntaxen target=”top” då detta refererar till en topframe i framesetet. Var noga med skillnaden.

Du kan även länka target=”left” – ”right” – ”bottom” och då öppnas länken i den ram som man angett som mål. target=”_parent” länkar till den ram i där länkarna ligger, dvs i samma ram som länken du klickade på finns. Finns det ingen ram så fungerar det på samma sätt som _self.

Tillbakalänkar

Slutligen det här med tillbakalänk om indexsidan ligger utanför mapparna. Det enda Du då behöver tänka på är att Du länkar inifrån och ut. En enkel länk ser då ut så här:

<a href="../index.html" title="">tillbaka igen</a>

Slashen ../ talar om att sökvägen ska gå mot hårddiskens filstruktur, det vill säga bakåt. Om jag då har ett dokument i mappen bilder och vill länka mig ur den mappen för att komma tillbaka till index.htm så ser det ut så här i en ”tillbaka-länk” ett steg bakåt:

<a href="../index.htm" title="index">index.htm</a>

Här tar vi två steg bakåt om jag länkar från en mapp (steg 1) som ligger inuti en annan mapp (steg 2) och vill nå mitt index-dokument som ligger utanför:

<a href="../../index.htm" title="index">index.htm</a>

Ganska enkelt och bra!

Undvik å ä och ö

Character encoding UTF-8 är default nuförtiden och klarar att tolka våra svenska tecken. Använder du doctype XHTML strict bör du skriva om entiteterna så de validerar. Det är också skillnad på hur character encoding visar brödtexten på själva webbsidan mot hur man namnger filer och mappar som ska läsas in och tolkas av servern.

Slutligen – när man lägger upp mappar och dokument tänker man inte alltid på att IT-språket som webbservrarna kommunicerar med varandra är på engelska. Självfallet ställer detta till med problem när man laddat upp sidorna och ska testköra på nätet. Men vad nu då tänker Ni kanske. Det fungerade ju på min dator när jag testkörde innan jag skickade upp allt på servern?

Sant!

Men våra datorer förstår svenska då språket är ilagt programmeringen. World Wide Web kan däremot inte ett skvatt svenska som serverspråk. Alla fil- och mappnamn bör därför inte innehålla å ä eller ö. Kanske detta har varit ett problem Ni inte tänkt på?

Du kan dock skriva ut å ä ö så här i brödtexten. Vad gäller fil/mapp/katalognamn så användes inte omskrivningen. Du får hitta ett annnat passande namn. Varför inte ett på engelska?

å - &aring;
ä - &aering;
ö - &ouml;
Å - &Aring;
Ä - &Aering;
Ö - &Ouml;