Hvordan nettlesere kan vise HTML-dokumenter

Når brukere bla til en webside, er HTML-innholdet som sendes fra serveren til nettleseren, der det vises. De viktigste komponentene som er involvert i å vise en webside er HTML markup og CSS (Cascading Style Sheets). HTML strukturer definere innholdet i dokumentet, som kan inneholde tekst, bilder, video og andre medietyper. CSS erklæringer diktere hvordan nettleseren skal vise HTML-elementer i dokumentet. Det er små forskjeller mellom ulike nettlesere når viser HTML.

Oppsett

HTML og CSS definere hvordan websideelementer skal være lagt ut i forhold til hverandre. HTML-elementer på en side er inne i tags:

<Div> En side element </ div>

Disse elementene kan være anordnet på ulike måter. Nettleseren bruker elementene selv og CSS erklæringer å bestemme hvordan siden skal presenteres. CSS-regler erklære bredder og element stillinger:

div {width: 80%; float: left;}

Dette betyr at "div» vil oppta 80% av bredden av dens inneholdende element og vil sitte på den samme horisontale adgang som helst element flytende til dens venstre, noe som gir disse passer inn i det inneholdende elementet.

Tekst

En rekke HTML elementtyper kan inneholde tekst som skal vises til brukerne, med CSS definere fonter, tekststørrelse, tekst stil, justering og farge. Følgende eksempel HTML viser noen teksten i et avsnitt:

<P> Noen avsnitt tekst </ p>

Leseren vil automatisk vise dette med nye linjer, effektivt linjeskift, før og etter "p" element. Denne CSS-kode definerer ulike aspekter av teksten for leseren å reflektere når siden er presentert:

p {font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; color: # 00FFFF; text-align: center;}

The Box Model

The Box Model i CSS er en metode for å instruere leseren om området å være okkupert av elementer. Hvert HTML-elementet kan ha en viss bredde, et område med padding lagt til hver side, en ramme rundt elementet inkludert polstret området, så en margin utenfor som definerer et område rundt element som ikke kan inneholde andre elementer. Målingene brukes kan være faste, som i følgende eksempel:

div {padding: 10px; margin: 5px;}

Målinger kan alternativt være i forhold til elementet størrelse, som i dette eksemplet:

div {width: 100px; padding: 5%; margin: 2%;}

Bilder

Bilder i HTML kan vises i både forgrunnen og bakgrunnen. Forgrunnen bilder er inkludert i HTML-koden, forteller nettleseren for å vise dem sammen med de andre elementene i dokumentet, som følger:

<Img alt = "bilde" />

Alternativt bilder kan vises i bakgrunnen, bak visse elementer som i dette eksempelet CSS forteller nettleseren hvilket bilde som skal vises bak et bestemt element type, samt hvordan det skal vises:

div {background: # 000000 URL ( 'backpicture.jpg') repeat-x;}

Bildet vil bli gjentatt langs "x" akse og en svart farge vises bak alle andre synlige delen av elementet.