Forside
Tutorials
Kommende
HTML tags
Programmer
LAERHTML.dk

Projekt 1 - tutorial 2

I denne del af projekt vil vi se nærmere på første "styling" af elementerne på hjemmesiden, dvs. vi kigger på former, skrifttyper og sætte lidt farve på hjemmesiden. Her kommer nemlig flere gode tags og attributter frem, så du hurtigt og nemt kan opgradere hjemmesiden.
Vi gennemgår bl.a. hvordan man sætter lidt farver på hjemmesiden og skifter udseende på teksten.


Resultat:

Vi fortsætter, hvor vi slap fra sidste del af projektet og bygger lidt ovenpå.
Igen er du velkommen til at se på videoklippet og selvfølgeligt se resultatet af hjemmesiden du skal til at opbygge.


Se resultatet

Cascading Style Sheets

Style tagget

Cascading Style Sheets eller bare CSS er det der gøre din side kønnere at se på og nemmere at strukturere. Uden det vil du ikke være i stand til at lave andet end hvad vi har gennemgået i sidste del af projektet (undtaget ved brug af det gamle "font" tag o.lign.) - altså ren tekst, overskrifter og links med billeder ind imellem.
Vil man skifte skrifttypen, lave en boks omkring sin side eller en vertikal menu i siden, skal man altså bruge CSS.
Du undre dig måske hvorfor man pludseligt skal lære et ekstra sprog da denne side hedder LAERHTML.dk, der er dog ingen tvivl om at man idag ikke kan undlade CSS og at det er stærkt knyttet til HTML.

Måden vi vil bruge CSS på er at skrive det direkte ind i vores HTML tags i form af "style" attributtet:

...</head> <body style="background-color:silver;"> ... </body>

Implementer den nye attribut i body tagget. Style attributtet giver dig nu fuld kontrol over hvordan body elementet (tagget) skal opføre sig og vise sit indhold - og da body tagget styrer alt synligt indhold på siden, er det et vigtig sted at definere de overordnede designelementer her, da det vil smitte af på alt dens underlæggede indhold. Selve style tagget tager selv en form for tags ind som dens værdi. Disse kalder man bare egenskaber i steder for tags. I eksemplet ses at "background-color" er egenskaben og "silver" er dens værdi. Du har nok også opdaget at her skrives ikke "=", men ":" før værdien og ";" efter værdien. På den måde splittes egenskaberne fra hinanden.

Se resultatet her, hvor hele baggrunden burde være grå.

background-color: ; Baggrundsfarve på elementet. Tager værdier ind i to former som ord og farvekoder. Eks:
White, Black, Red, OrangeRed osv.
#FFFFFF, #000000, #FF0000, #FF4500 osv.
rgb(255,255,255), rgb(0,0,0), rgb(255,0,0), rgb(255,69,0) osv.

Overordnet opsætning

Lad os gå lidt videre og kigge på hvad mere vi kan bestemme via CSS i body elementet. Vil man ændre skrifttypen og størrelsen til en anden, kan det gøres ved at indsætte "font-family:;" og "font-size:;" egenskaberne. Som en ekstra ting skrifter vi farven fra "silver" til farvekoden "#8B94A9" som gør baggrunden mørkere.

...</head> <body style="background-color:#8B94A9; font-family:Arial; font-size:12px;"> ... </body>
Resultatet ses her
font-family: ; Skrifttypen på/i elementet. Tager værdier som:
Verdana, Times New Roman, Georgia, monospace, Arial
Man skal dog vælge nogle almen benyttet typer da det kræver at brugeren har typen installeret på sin maskine
font-size: ; Skriftstørrelse på/i elementet. Tager værdier ind i form a pixel størrelse. Eks:
8px,12px,18px

Lad os tage skridtet videre og kigge på "div" tagget, som er et oplagt tag at bruge CSS på. Div tags bruges til at strukturere ens hjemmesiden ofte ved at bruge dem som bokse omkring ens indhold.
Lad os bruge denne fremgangsmåde på vores side.

...</head> <body style="..."> <div> ... </div> </body>

Som du kan se her sker der ikke noget. Div tagget er altså ikke noget værd i sin selv. I tagget angives style tagget igen og udfyldes med en kendt egenskab vi kender "background-color:#9CA4B6;". Denne gang med en anden farve end vi havde på "body" tagget. For at have klar fornemmelse af hvor div tagget er skaber vi en ramme omkring den med egenskaben "border". Denne skal faktisk bruge 3 former for værdier den første som angiver hvor bred rammen skal være, anden angiver hvilken type (eks: fuldt optrukket linie, streget linie, prikket linie) og den tredje angiver farven på rammen. Resultatet bliver for eksempel "border:1px solid white;". Implementerer vi dette eksempel, ser tagget sådanledes ud:

...</head> <body style="..."> <div style="background-color:#9CA4B6; border:1px solid white;"> ... </div> </body>

Se resultatet her.
Forsætter vi med at style vores hjemmeside ved hjælp af dette div tagget, vil det være oplagt at kigget på "width" og "height" egenskaberne. Disse styrer bredden og højden på elementet som i vores tilfælde er hele hjemmesidens indhold, da vores div tag omslutte alt indholdet i body´en. Vi skal altså til at lege med strukturering af hjemmesiden.
"width" og "height" tagende tager bl.a. to former for værdier ind; i form af procenter og pixel værdier. Indsæt først bredden og så højden således "width:500px; height:100%;".

...</head> <body style="..."> <div style="background-color:#9CA4B6; border:1px solid white; width:500px; height:100%;"> ... </div> </body>

Se resultatet her.
Som du kan se er bredden af indholdet på hjemmesiden nu ikke længere bestemt af browserens størrelse, men af den bredde du angav. Højden er til gengæld tilpasset til browerens størrelse og følger med hvis denne ændres eller hvis indholdets mængde stiger udover browseren højde. Leg eventuelt lidt rundt med disse to CSS egenskaber og deres værdier.

width:; Værdi i form af, eks:"auto", 12px, 50%.
bestemmer bredden på elementet.
height:; Værdi i form af, eks:"auto", 12px, 50%.
bestemmer højden på elementet.

Næste ting vi skal kigge på er hvordan vi centrere hjemmesiden (ligesom LAERHTML.dk er i midten af din browser nu). For at opnå dette skal vi angive "margin" egenskaben i vores div tag. Igen kan denne egenskab tage procenter, pixel værdier og ordet "auto", hvilket er det vi skal bruge nu. Indsæt følgende i div taggets style "margin:auto;". Ydermere skal du tilføje "text-align:center;" i body taggets style attribut. (vi kommer tilbage til denne egenskab om lidt). Du burde nu have noget HTML kode som ser således ud:

...</head> <body style="... text-align:center;"> <div style="background-color:#9CA4B6; border:1px solid white; width:500px; height:100%; margin:auto;"> ... </div> </body>

Se resultatet her.

Egenskaben "margin" siger lidt sig selv, det skaber en margen omkring ens element om det så er tekst, billede eller f.eks. et div tag. Det smarte trick vi har lavet her, er at udnytte margin´en til at centrere div-elementet, da margin´en sørger for lige store mellemrum til højre og ventre side af browserens ydrepunkter i bredden.

Den sidste ting vi skal have styr på er teksten indeni div området. Lad os starte med at få lidt afstand mellem kanten af div rammen og teksten. Angiv egenskaben "padding" med en lille afstand på 15 pixels, gør det således padding:15px;. Padding er en egenskab der virker på samme måde som margin, men hvor margin skaber afstand ud mod det omgivende, så skaber padding afstand til sit eget indhold.
Næste ting ift. teksten er at få den ventrejusteret så det ikke er centeret længere. Originalt var teksten venstrejusteret, men som et resultat af at centrer body´s indhold arvede div elementet også denne egenskab, derfor skal vil nu kompensere for det, ved at specificere egenskaben for div elementet også. Dette gøres ved hjælp af text-align egenskaben, som tager værdierne left,center,justify og right. Vi skal selvfølgeligt bruge left.
Vi er nu tilbage med den endelige kode for denne del af projektet:

...</head> <body style="background-color:#8B94A9; font-family:Arial; font-size:12px; text-align:center;"> <div style="background-color:#9CA4B6; border:1px solid white; width:500px; text-align:left; height:100%; padding:15px; margin:auto;"> ... </div> </body>

Se resultatet her.

text-align:; tager værdierne left, center, justify, right.
padding:; Værdi i form af, eks:12px, 50%.
Styre mellemrummet fra kanten af elementet ind mod sig selv og sig indhold. Kan specifiseres til at gælde én retning ved at angive den efter egenskaben:
padding-top:15px; padding-bottom:15px; padding-right:20px; padding-left:20px;
margin:; Værdi i form af, eks:"auto", 12px, 50%.
Styre mellemrummet fra kanten af elementet ud mod det omgivende miljø. Kan specifiseres til at gælde én retning ved at angive den efter egenskaben:
margin-top:15px; margin-bottom:15px; margin-right:20px; margin-left:20px;

Den sidste jeg lige vil nævne er at de forskellige browser kan vise forskellige ting. Dette er et kendt problem og optimering af hjemmesiden til alle browser er et projekt i sig selv. I dette projekt vil siden centrere sig i Google Chrome efter anvendelsen af "margin:auto;", hvor det i Internet Explorer også kræver en tilføjelse af "text-align:center;" i body´en. Endnu et problem i Internet Explorer er at der kommer en ramme omkring billedet, dette kan kompenseres for ved at tilføje et style tag i img tagget og angive "border:none;".
Overordnet set har vi kun tilføjet 2 linjer tekst, men hvor hele hjemmesiden er blevet ændret, dette er styrken ved CSS.

<< FORRIGE PROJEKT - [Projekt oversigt] - PROJEKT 1, TUTORIAL 3, STRUKTUR >>