HTML Programmering, del 4 av 7
Linker og flere tagger
Antar at den eksempel siden i Del 3 kommer vi ikke veldig langt med, så vi skal fylle på med litt mer interiør i BODY.
Først setter vi inn en overskrift i den tomme p taggen, og gjør den fetere med bold taggen, som er <b>. (eng;Bold) Husk nå at de fleste tagger skal avsluttes, så det blir seende slik ut: <b>Overskrift på Vår eksempel side!</b>.
En meny på siden er også ønskelig, så vi skal tilføye fire linker. (Disse blir ikke linket til noen ekte sider!) Vi plasserer linksettet til venstre med litt innrykk, og bruker kort avstand i linjehøyden med "brake" taggen <br />.
<br /> er et tvunget linjeskift og et element, og en selvlukkende tagg!
Menyen blir seende slik ut i ren html kode:
<p style="margin-left: 120px;">
<a href="meny-1.html">Menyrad
1</a><br />
<a href="meny-2.html">Menyrad
2</a><br />
<a href="meny-3.html">Menyrad 3</a><br
/>
<a href="meny-4.html">Menyrad 4</a><br
/>
</p>
Her noterer vi oss at p taggen inneholder attributtet STYLE, med deklarasjonen "margin-left: 120px;" som betyr 120 pixler innrykk fra venstre. Du kunne også hatt flere attributter om ønskelig.
Til slutt setter vi inn en hel vannrett linje for å avslutte med, og den selvlukkende taggen her er: <hr />
Vent! Vi legger til noen attributter på denne, bare for å vise i praksis. Vi gjør den stiplet, og med 1 pixels høyde, samt en blå farge. Da blir det slik:
<hr style="border: 1px dotted #003399;" />
Da har hele HTML dokumentet fått mer innhold, men kun BODY delen har fått flere tagger.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vår eksempel side!</title>
</head>
<body>
<p>
<img style="border: 0px none;"
src="468x60.gif" width="468"
height="60"
alt="Apasje" />
</p>
<p><b>Overskrift
på Vår
eksempel side!</b></p>
<p>Denne setningen står mellom p tagger. P tagger er avsnitt.</p>
<p>Dette er et nytt avsnitt.</p>
<p style="margin-left: 120px;">
<a href="meny-1.html">Menyrad
1</a><br />
<a href="meny-2.html">Menyrad
2</a><br />
<a href="meny-3.html">Menyrad 3</a><br
/>
<a href="meny-4.html">Menyrad 4</a><br
/>
</p>
<hr style="border: 1px dotted #003399;" />
</body>
</html>
Vi ser hvordan siden nå er blitt: Vis eksempel 2
Fremdeles ikke mye å skryte av! Men vi la til blant annet overskrift i fet tekst med bold taggen, meny og en vannrett linje. <b> taggen kan med fordel erstattes med taggen <strong> </strong>, som også vil gjøre skriften fetere, spesielt i ord du vil søkemotorer skal registrere!
Verdt å merke seg angående start tagg og slutt tagg er at settes ikke slutt taggen inn umiddelbart etter f.eks. overskriftens slutt vil all tekst under denne arve fet skrift nedover i dokumentet.
Det var dette med å lukke døren etter seg..
Vi vil ha mer på siden vår
Den lille siden vi prøver å lage skal bli en liten web side i miniatyr, men designmessig går det vel ikke så bra. Tekst, bilder og annet innhold lar seg vanskelig plassere uten ordentlig form for struktur!
Alt kan jo ikke bare komme rett under hverandre, eller vannrett. Vi trenger å stilsette litt mer en det lille innrykket, eller en annen form for å plassere innholdet der vi vil på siden. Her er det to muligheter, CSS eller tabeller.
Det letteste, men ikke det beste, er bruk av tabeller. Dette begynner vi med på neste side. Bruk av CSS lærer du mer om i CSS og stilsett kurset på apasje, se oppe til venstre i menyen.
Skal vi bare gå rett til del 5? Du må tilbake til disse sidene uansett når ting skal omsettes i praksis, så vi fortsetter bare med læring til underbevisstheten.
SØK ressurser
HJELP til Hjemmesiden
Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.