Forside
Tutorials
Kommende
HTML tags
Programmer
LAERHTML.dk

Projekt 1 - tutorial 3

I denne del af projektet kigger vi på at lave en menu og få struktureret hjemmesiden. Her vil jeg gennemgå links, punktopstilling og tabeller.


Resultat:

Igen fortsætter vi fra sidste del af projektet og bygger lidt ovenpå.
Se resultatet af hjemmesiden du skal til at opbygge.
Som du kan se er der tre html sider. Disse peger på hinanden igennem en menu vi senere laver, som stort set bare er nogle links.


Se resultatet - index.htm
Se resultatet - historie.htm
Se resultatet - kontakt.htm




Links & filstruktur

Links ("henvisning" eller "sammenkædning") er trykbar tekst som henviser til nye sider eller en ny del af din eksisterende side. Herunder ses et link som henviser en til lærhtml.dk´s hjemmeside.

<a target="_blank" href="http://laerhtml.dk">Lær html</a>

Brugeren ser følgende:


<a target="" href=""></a> Tager to attribut ind, det første er "target" som styre hvordan siden skal åbens. Her er mulighederne _self, _blank, _parent, _top.
_self åbner siden i den nuværende side og _blank åbner siden i et nyt vindue.
Det andet attribut er "href" hvor man skal angive den side dit tag skal henvise til.
Selve indholdet er den tekst brugeren ser og kan klikke på.

Inden vi går igang med at opstille en menu skal vi først have skabt nogle sider som vi kan henvise til. Hold dig til få sider til at begynde med, jeg skaber selv to enkelte sider. Den ene vil være en kontakt side og den anden vil være en side der fortæller lidt om New Yorks historie.
Grundlæggende er den nye side bare en ny html fil, som vi nu skal til at skabe. Det nemmeste er at kopiere filerne og give dem et nyt navn.
Som vist på billedet har jeg skabt kopier af index.htm to gange og omdøbt filerne til "historie.htm" og "kontakt.htm".

Nu når vi har vores hjemmeside lagt ud som filer, kan vi lave en menu så siderne kan henvise til hinanden.
Lad os til at begynde med lave en form for menu område. Lad os skabe to horisontal linjer og lave menupunkterne derimellem.

<hr /> Skaber en horisontal linie

Lige efter det første "hr" tag skaber vi menuen. Først laver vi tre links til de tre filer vi lige har lavet og dertil skaber vi separator mellem de tre links, ved at indsætte to store i´er.

...</hr> <hr /> <a href="index.htm"> Forside</a> I <a href="historie.htm">Historie</a> I <a href="kontakt.htm">Kontakt</a> <hr /> ...

Se resultatet her
Da siderne er kopier af samme side kan man umiddelbart ikke se forskel når man klikker imellem menupunkterne. Men kigger man på url adressen i browseren kan man se at man faktisk befinder sig på de nye sider, hvor den sidste del af url´en skifter imellem index.htm, historie.htm og kontakt.htm.
Lad os sætte noget mere tydeligt forskel på siderne. Efter den sidste horisontale linie indsætter vi en overskrift. Foreksempel har jeg i historie.htm filen, skrevet "Historie" som overskrift.

...<hr /> <h3>Historie</h3> <a...

Angiv en overskift på alle sider og slet evt. billedet på kontaktsiden, så den ser lidt mere simple ud. Se resultat her.

Tabeller

Vi har nu godt fat i hvordan en hjemmeside fungere, men det ville være dejligt med lidt mere kontrol over hjemmeside strukturen. Normal ville man fraråde at bruge tabeller til at skabe sin hjemmesideopbygning, men som jeg ser det er det den eneste hurtige og nemme måde at lære strukturering på. Og misforstå ikke, tabeller har været og er stadig brugt til layouts og det sikre et ens udseende på tværs af browseren, men det er en amatør/gammel tilgang. Vil du lære det rigtigt fra start af, så tag en uddybende CSS tutorial(kommer på LÆRHTML.dk) eller køb en bog heromkring, hvis du har tænkt dig at gå design amok.
Tabeller er lige til og logiske at arbejde med, først definere man tabel tag´et, hvori man først angiver sine rækker og så inden i dem, angiver kolonerne:

<table border="1"> <tr> <td>Række1, Kolonne1</td> <td>Række1, Kolonne2</td> </tr> <tr> <td>Række2, Kolonne1</td> <td>Række2, Kolonne2</td> </tr> </table>

Sådan ser det ud i browseren:

Række1, Kolonne1 Række1, Kolonne2
Række2, Kolonne1 Række2, Kolonne2

Som du nok har opdaget er der kommet et attribut på, nemlig border som tegner en grænse op omkring tabellen og dens celler. Disse er ikke så pæne, men er gode til at vise layoutet på tabellen som om lidt også til være layoutet på hjemmesiden.

Strukturering

Lad os gå igang med at anvende tabellen på projekt hjemmesiden, indtil videre vil vi kun kode i index.htm siden. Inden i div elementet indkapsler vi alt med en tabel. For god ordens skyld laver vi mindst en række med mindst en kolonne.

<body style="..."> <div style="..."> <table border="1"> <tr> <td> <h1... ../p> </td> </tr> </table> </div> </body>

Umiddelbart sker der ikke andet end at vi har fået kant omkring indholdet, men en sikring af at udgangspunktet er korrekt er vigtigt. Se resultatet her.
Planen er nu at få menu´en vertikal, til venstre for tekst indholdet(ligesom det er på LÆRHTML.dk). Altså vi skal have to celler ved siden af hinanden(ergo to koloner i én række). Dertil skal vi have bibeholdt overskrifts området som det er nu. Altså have en celle på tværs af hjemmesiden øverst oppe(ergo en celle i én række). Dette skaber en ny udfordring da vi skal én celle henover to celler. Her skal vi have overskrift cellen til at fylde to celle, hvilken gøres ved at bruge colspan attributtet på cellen(kolonnen). Så den endelige opbygningen af tabellen vi se således ud:

<table border="1"> <tr> <td colspan="2"> OverskriftOgUnderoverskrift </td> </tr> <tr> <td> Menu </td> <td> Indhold<br /> Indhold<br /> Indhold<br /> </td> </tr> </table>

Ofte kan det være en god ide at teste ny kodestykker i et dokument for sig selv for at simplificere tingene og skabe sig en skabelonen.

OverskriftOgUnderoverskrift
Menu Indhold
Indhold
Indhold

Efter at have laver en test table ved vi nu hvordan den nuværende projekt siden skal deles op. Til at begynde laver vi en celle omkring overskriften, dvs. en række tr og en kolonne td der har en størrelse af to kolonner ligesom i test tabellen. Afslut cellen lige efter hr tag´et så det kommer med som overskrifts delen.
Slet det andet hr tag og skab istedet en ny række tr herefter, der både skal have menu links i sig og indholdet - hver i sig egen kolonne td. Afslut tabellen.
Din kode skulle gerne ligne følgende:

... <body style="..."> <div style="..."> <table border="1"> <tr> <td> <h1>... ...<hr /> </td> </tr> <tr> <td> <a href="index.htm">... </td> <td> <h3>... ...</p> </td> </tr> </table> </div> </body>...

Se resultatet her.

... ...

Strukturen er som den skal være, men siden skal lige tilrettes de nye omstændigheder.
Følgende skal gøres:

Nu begynder siden at ligne noget, men vi skal også lige have menupunkterne til at placere sig i toppen af cellen og få kanten til at gå væk på tabellen

Så langt så godt, vi mangler stadig at skabe lidt plads omkring menuområdet og selve menupunkterne.

Lister og punkter

Siden vores menu kan anses som en liste med punkter i, ville det også være en god idé at opsætte den som en liste. Hertil bruges følgende tag:


<ul></ul> Skaber en uorganiseret liste i form af prikker eller lignende.
Elementet virker ikke alene og skal indeholde li elementer(tag´s)
<ol></ol> Skaber en organiseret liste i form af tal, alfabet eller lignende.
Elementet virker ikke alene og skal indeholde li elementer(tag´s)
<li></li> Skaber et punkt i en liste.
Elementet skal være en del af ul / ol elementets indhold

Lad os opstille menuen som en liste.

... <td valign="top"> <ul> <li> <a href="index.htm">Forside</a> </li> <li> <a href="historie.htm">Historie</a> </li> <li> <a href="kontakt.htm">Kontakt</a> </li> </ul> </td> ...

Det sidste vi skal gøre er at slette prikkerne fra menupunkterne og skabe plads omkring menupunkterne. Dette vores ved hjælp af CSS, nemlig margin egenskaben.

... <td style="width:100px;" valign="top"> <ul> <li style="margin-left:-40px; margin-right:10px; margin-bottom:10px; list-style-type:none;"> <a href="index.htm">Forside</a> </li> <li style="margin-left:-40px; margin-right:10px; margin-bottom:10px; list-style-type:none;"> <a href="historie.htm">Historie</a> </li> <li style="margin-left:-40px; margin-right:10px; margin-bottom:10px; list-style-type:none;"> <a href="kontakt.htm">Kontakt</a> </li> </ul> </td> ...

CSS list-style-type egenskaben styre om punktet skal være en prik,frikant eller andet, i vores tilfælde skal værdien være none da vi ikke ønsker punkt markering. Ydermere læg mærke til at tablecellen(som er vores menuområde) td har fået en defineret en brede width:100px;.
Indtil videre har vi kun arbejdet i index.htm siden, så når der trykkes på de tre links er siderne ikke ens. Så nu skal koden fra index.htm kopieres over i historie.htm og kontakt.htm. Selvfølgeligt uden at overskrive de indholdsændringer der er fortaget (som f.eks. overskrifterne).
Når dette er gjort skulle siden gerne give det her resultat.

Det med at kopiere og indsætte kode stykke fra en html fil til en anden kan være irriterende, især når man arbejder med mange sider. Derfor er det vigtigt at færdiggøre sit design så meget som muligt og definere nogle faste indholdsområder for f.eks. tekst og billeder.