Forside    Kirkevekst    Data    Lydteknikk    Stikkordliste    Om Meg    Gjestebok    UK.gif

HTML programmering

Hvordan lage en enkel layout

av Jan Einar Visnes Print  
05. mar 2005 21:23

Du har kanskje prøvt deg litt frem med å lage egne html sider på internett, men ønsker å komme videre. Jeg vil her gi deg noen enkle eksempel du kan bruke for å videre utvikle hjemmesiden din og lage en enkel layout.

Vi skal begynne med et forholdsvis enkelt eksempel, hvor siden er delt inn i 4 deler, med hode, meny til venstre, hoveddelen, og fot/avslutning på siden.

Foto: Jan Einar Hvis du har skrevet noe i HTML kode så kjenner du sikkert til de grunnleggende elementer (eller tagger som vi kaller dem) som må være med på en side:

<html>
<head>
<title>...sidens tittel...</title>
</head>
<body>
...sidens tekst...
</body>
</html>

For å lage en slik layout og inndeling som illustrasjonen viser, kan vi bruke en tabell. Denne tabellen har 3 rader og 2 kolonner, hvor de to cellene på første og siste rad er slått sammen til en celle. Denne koden skal inn mellom <body> og </body>.

<table>
<tr>
<td colspan=2>
  ...Hodet på siden...
</td>
</tr>

<tr>
<td width="20%">
  Side 1
  Side 2
  Side 3
</td>

<td>
  ..teksten på siden...
</td>
</tr>

<tr>
<td colspan=2>
  ...foten på siden...
</td>
</tr>
</table>
Her kommer tabellen
Ny rad
Ny celle som går over 2 kolonner

Avslutning på cellen
og linjen

Ny linje hvor kolonnen er
20% av bredden til tabellen.
Her kommer menyen...


Avslutning på cellen

Ny celle påsamme rad
Her kommer selve siden

Avslutning på raden

Ny rad
som skal gå over begge kolonner

Avslutning på cellen
og på raden
og på tabellen.

I menyen oppretter du linker til de andre sidene som du skal ha på nettstedet ditt.

Foto: Jan Einar Om du ønsker en mere avansert menystruktur på sidene dine, kan du legge inn en ekstra linje under hodet på siden og her hovedmeny-linker til de andre hovedsidene dine. Om du har mange sider og det blir stadige endringer og tillegg, kan det etterhvert bli strevsomt å vedlikeholde menystrukturen i alle filene.

Vil du ha tips om hvordan du kan gjøre dette enklere, se artikkelen om "Server Side Include Test". Test først om internett serveren din kan håndtere dette før du legger alt for mye arbeid i å utvikle sidene dine. Ikke alle web-hoteller støtter Server Side Include (SSI).

For mere informasjon om html programmering og layout: www.htmldog.com

Google search:
Jan Einar Visnes
Internett/Google
Sponsorer: