apasje.COM Startside og startportal for Tromsø

Legg i Favoritter  |  Bytt Startside

 

HTML Programmering, del 6 av 7

Bruk av elementer

Vår eksempel side skal gjøres ferdig, så vi fortsetter der vi slapp på forrige del. Tabell var laget, så det som gjenstår er å sette alt på plass med innhold inni:

Vi starter med teksten, som vi plasserer sammenhengende slik den er satt opp, i den cellen som var merket med "innhold/tekst" i forrige del:

Forklaring til attributter og formatering

Teksten inneholder alt fra overskrift, avsnitt, tvunget linjeskift, fet tekst og størrelse til farge på teksten. Ved bruk av elementer husker vi at tagger skal starte og slutte.

I en overskrift har du flere muligheter til å påvirke tekst med elementet <h>, med størrelse fra 1 til 6. Vi har brukt størrelse 3 som er en mellomstørrelse, men som første overskrift burde h1 vært brukt. Bruk av <h> taggen skaper automatisk avsnitt, og har mange fordeler, men er ikke et tema her.

Imidlertid kan det sies at så lenge den ikke er definert med et attributt, brukes forhåndsatt standardinnstilling i formateringen i din nettleser. Dvs, skrifttype f.eks. er "Times New Roman".

For farge på tekst finnes attributtet STYLE i p taggene som kombinert med css attributtene  color=" " og font=" " setter farge, størrelse og skrifttype på teksten. Fargen er gjengitt i hexidecimal kode, og denne kan du bruke Fargevelgeren som du finner under Hjemmeside ressurser oppe til høyre.

Bildet som også var på siden, plasserer vi i cellen som var merket "Tiltenkt plass bilde" (se forrige del). Likeså setter vi i cellen merket "Vannrett linje" inn taggen:

<hr style="border: 1px dotted #003399;" />

Her ser vi at linjestørrelsen er 1 pixel med hex farge for blå. Dotted betyr at linjen skal være prikket, og kunne ellers vært 'dashed' eller 'solid' som betyr henholdsvis stiplet og heltrukken linje.

I cellen merket "Bunntekst" setter vi inn teksten med koden:

<p style="color: #910620; font: 0.7em arial, verdana; float: left;">
Bunntekst for avsluttende frase.
</p>

og for "Copyright" cellen:

<p style="color: #910620; font: 0.7em arial, verdana; float: right;">
Ditt navn © 2007.
</p>

Avslutning

Alt som gjenstår nå er å få linkene og reklamen på plass.

Når det gjelder reklame, anbefales Tradedoubler. De leverer løsninger som settes inn på en webside med eventuelt et javascript, og har enkle løsninger.

Når man bruker scripts og andre ting på siden, er ofte behovet for å huske noe tilstede. Da benyttes en kode som lar deg skrive små huskelapper inne i selve html koden.

Det som gjøres er simpelthen å skrive en stor spesialtagg, som begynner med en venstre spissklamme (<) etterfulgt av et utropstegn (!) og to bindestrek (--). Etter denne skriver du teksten som skal huskes, som igjen avsluttes med to bindestrek og en spissklamme til høyre (>).

Dette fungerer slik:

<!-- Ting du ønsker å notere inni denne -->

Viktig å huske her er slutttaggen --> etter det du skriver i huskelappen. Glemmer du den gjøres hele koden etter åpningstaggen <!-- usynelig på en side.

Linkene laget vi i del 4, og disse settes inn i cellen merket "Meny" fra forrige del. Reklamen som skal være, settes inn i den ene cellen som er merket "Reklame".

Ja, en ting til! Som du kanskje la merke til i koden øverst, hadde vi en <h> tagg! Overskriften vi laget tidligere i fet, vanlig tekst er byttet ut med denne. Likedan med STYLE attributtet i p taggen for linkene.

Vi forandrer på STYLE attributtet for linkene til "font: 0.7em arial, verdana; float: left;", slik at innrykket fjernes og at linkene plasseres til venstre i cellen.

Da er alt på plass, og koden er blitt litt mer omfattende, så vi åpner et nytt vindu for å se på den:

Vår eksempel side kildekode!

Da har vi i realiteten bygget en liten mini web side med de kodene! Obs, har glemt bare en ting til! Om du studerte tabell koden nøye, oppdaget du at  attributtene  align=" x " og valign=" x " er føyd til i meny, tekst og reklame cellene slik at alt begynner på samme høyde..

Vår eksempel side er ferdig

Følger du retningslinjene og putter kodene samt URL'er til eget bilde, reklame og linker i en tekstbehandler, skal dette virke.

Vi kan alltids ta en titt hvordan dette eksempelet ser ut i nettleseren:

Vår eksempel side - Ferdig!

Ja, det funker. På eget initiativ er det lagt til en valideringslink for å sjekke at kodene holder mål. Prøv det.

Virker ikke linken til validering, er det fordi du har en brannmurregel som sperrer for scriptet. Da kan du validere selve URL'en til eksempelsiden her.

Vi avslutter, klikk neste del..

 

---