Uge 45 xhtml og CSS

Uge 45 xhtml og CSS Beginning CSS and Web Development kap. 1 - 11

Plan • Xhtml opbygning • CSS • Divs, class, id • Baggrunde, farver og billeder • Tekst • Links • Lister • Tabeller • Stand-up programmering

Xhtml vs. html • i XHTML skal alle elementer afsluttes • i XHTML skal alle elementer skrives med små bogstaver (lowercase) • i XHTML skal værdien af attributter stå med anførelsestegn (dette er kun under trans. og frameset, vi bruger strict) • i XHTML tillades minimerede attributter ikke • i XHTML bruges attributten "id" til identifikation og ikke ”name” <option selected> i stedet < option selected=”selected” />

Xhtml definition • Definition af dokument (øverst i dokumentet) • Tre typer • Strict (rent markup, sammen med css) • Transitional (kan stadigt bruge html attributter) • Frameset (til brug af framesets) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Xhtml start af dokument • Starter med tagget <html> med attributterne • Xmlns (hvor kan finde definition for hvad dokumentet må indeholde af tags og attributter) • Xml:lang (hvilket sprog er dokumentet skrevet i) <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Xhtml header • Information til browseren • Content-type (hvordan skal den opfatte indholdet af dokumentet) • Charset (hvilket karaktersæt bliver der brugt) • Stylesheet (et evt. eksternt stylesheet der skal loades) • Title (hvilken titel skal siden have i browseren) • Script (import af evt. eksternt javascript) <head> <metahttp-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="styles/styles.css" type="text/css"/> <title>GorillaScript</title> </head>

Xhtml skabelon • Alt inden for body-tagget er det der vil blive præsenteret i browseren • Så nu er vi klar til at gå i gang med CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>UntitledDocument</title> </head> <body> </body> </html>

CSS (CascadingStyleSheet) • Bruges til at definere udseendet for vores xhtml dokument • Gør det muligt at adskille udseende og indhold • Vi kan derfor ændre udseendet for multiple sider med bare et style-sheet • Kan også bruges sammen med html og xml • Et CSS-dokument er bygget op af selektorer og attributter for hvad der skal ske med den enkelte selektor

Oprettelse af stylesheet • Et eksternt stylesheeter egentligt bare en tekst-fil med css som efternavn. Det stylesheet som vi bruger til de kommende eksempler hedder styles.css • Det eksterne stylesheet forbindes til vores xhtml-dokument via en meta-information i headeren af vores xhtml-dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="styles/styles.css" type="text/css"/> <title>UntitledDocument</title> </head> <body> </body> </html>

Embeddedog inlinecss • Det er foruden eksterne stylesheets muligt at lave embedded og inlinestylesheets. • Embeddedcss skrives som en del af headeren i xhtml dokumentet • Inlinecss skrives som en del af den selektor den skal påvirke. • Det er dog mest fleksibelt at benytte eksterne stylesheets på nær i nogle få enkelte tilfælde <head> <styletype="text/css"> p{ color:#666666; } </style> </head> <p style="color:#CCCCFF"> noget tekst </p>

Selektorer og attributter • Vi kan definere i vores style-sheet hvad der skal ske med den enkelte selektor i vores xhtml-dokument • Dette gøres i style-sheetet således: • Efterfølgende vil det have indflydelse på alle p-elementer i vores xhtml-dokument der benytter sig af vores style-sheet • Vi har mulighed for at ændre alle pre-defineredeselektorer i xhtml-formatetsåsom: <p>, <table>, <ul>, <li>, <img> osv. p{ padding:6px; padding-top:0px; text-align:justify; } selektor attributter

Klasser og id • I stedet for at modificere en specifik selektor direkte kan vi lave en klasse som kan tilføjes forskellige selektorer: • Denne klasse kan vi tilføje til alt der skal ”flyde til højre” dette vil se således ud i xhtml-dokumentet: .floatright{ float:right; } <img class="floatright" src="images/image.jpg" />

Klasser og id 2 • Ved at lave et id i stedet for en klasse er det muligt at referere til et specifikt sted i xhtml-dokumentet, dette gøres således i style-sheetet: • I xhtml-dokumentet kommer det til at se således ud: • Vi kan derefter lave en link til denne specifikke overskrift: • Vi behøver ikke at definere vores id’er i style-sheetet hvis de bare skal virke som et link-id #overskrift1{ font-size:12px; } <h1 id=”overskrift1">noget tekst</h1> <a href=”#overskrift1”>link</a>

Divs • I stedet for predefineredeselektorer kan vi benytte divs som byggesten til at lave vores egne indholds-containere. Dette gør xhtml og css meget fleksibelt. En container med ramme kunne se således ud i xhtml-dokumentet: • Og således i style-sheetet: <divclass="box"> </div> .box{ border:1px solid #000; width:200px; height:200px; }

Nedarvning • Xhtml og css er bygget i hierarkisk struktur hvilket betyder at en selektor der er barn af en anden selektor nedarver dennes attributter, hvis en attribut ikke er defineret specifikt for selektoren. • Dette gælder dog ikke attributter såsom border, margin og padding text-box 1 text-box 2 <div class="box"> text-box 1 <div class="box2"> text-box 2 </div> </div> .box{ border:1px solid #000; width:200px; height:200px; font:Arial, Helvetica, sans-serif; font-size:18px; } .box2{ }

Blok- og inline-elementer • Elementer såsom p og div er default blokelementer. Dette betyder at der efter afslutningen af elementet indsættes et linjeskift. • Elementer såsom span er inline-elementer og efterfølges ikke af linjeskift. Kan f.eks. Bruges til at ændre dele af en tekst. • Man kan ændre blokelementer til at være inline-elementer og selvfølgelig også modsat <divclass="box"> <p>entekst</p> <p>en anden tekst</p> </div> <divclass="box"> <p>en tekst <span class="highlight"> med highlight</span></p> <p>en anden tekst</p> </div> .highlight{ background-color:#003399; } p{ display:inline; }

Margin og padding • Fælles for alle selektorer er at vi kan tilføje margin og padding til dem • Padding definerer afstanden for elementets ydre grænse og ind til selve indholdet af elementet • Margin definerer afstanden fra elementets ydre grænse til det omsluttende element .box{ border:1px solid #000; margin:30px; width:200px; } .box2{ border:1px solid #f00; padding:30px; } margin padding

Bredde og højde • Alle elementers bredde og højde kan også defineres • Dette kan f.eks. enten gøres i pixels eller procent. • Hvis de defineres i procent forholder elementet sig til sit omsluttende element og laver den procentvise størrelse derudfra. • Pas på i forhold til padding og borders da disse også regnes med. .box{ border:1px solid #000; margin:30px; width:200px; } .box2{ border:1px solid #f00; width:90%; }

Baggrundsfarver og -billeder • Der kan defineres en baggrundsfarve for vores elementer • Vi kan også indsætte et baggrunds-billede .box{ background-color:#CCCCFF; } .box2{ background-color:#CC3366; } .box{ background-color:#CCCCFF; } .box2{ background-image:url("../images/css3.png"); }

Baggrundsbilleder: gentagelse • Vi kan bestemme hvordan vores baggrundsbillede skal opføre sig i forhold til gentagelse horisontalt og vertikalt .box2{ background-image:url("../images/css3.png"); background-repeat:repeat-x; } .box2{ background-image:url("../images/css3.png"); background-repeat:repeat-y; } .box2{ background-image:url("../images/css3.png"); background-repeat:no-repeat; }

Billeder • Vi har også mulighed for at indsætte almindelige billeder i vores containere • Billedet og teksten i containeren forholder sig nu til hinanden <divclass="box"> text-box 1 <div class="box2"> <img src="images/css3.png" class="floatright"/> text-box 2, med noget mere tekst i </div> </div> .floatright{ float:right; } img{ border: 1px solid #CCCCCC; }

Tekst • Der findes som default 7 selektorer i xhtml lavet til tekst: p, h1, h2, h3, h4, h5, h6. Hvor p er beregnet til brødtekst og h1-h6 kan bruges til overskrifter startende med h1 som det øverste niveau. <divclass="box"> <h1>overskrift 1</h1> <h2>overskrift 2</h2> <h3>overskrift 3</h3> <h4>overskrift 4</h4> <h5>overskrift 5</h5> <h6>overskrift 6</h6> <p>brødtekst</p> </div>

Tekst 2 • Som med andre elementer kan man ændre farven og baggrundsfarven • Man kan derudover også ændre på linjehøjden, afstand imellem bogstaver, tykkelsen, stilen og selve font-typen m.m. p{ color:#00ff33; background-color:#CCFFFF; } h2{ color:#663399; background-color:#FFFF99; } p{ color:#000000; background-color:#CCFFFF; font-family:Georgia, "Times New Roman", Times, serif; line-height:150%; letter-spacing:4px; font-weight:bold; font-style:italic; }

Line break • Et linjeskift i f.eks. en tekst kan ikke bare laves som et normalt linjeskift som vi er vandt til i programmer som word, notepad etc., men skal i stedet også defineres som et element: <divclass="box"> <p>Her er en tekst med linjeskift?</p> </div> <divclass="box"> <p>Her er en tekst med<br /> linjeskift?</p> </div>

Links • En vigtig del af et xhtml-dokument er hyper-links, så der kan linkes til andre steder i dokumentet og desuden til eksterne dokumenter. • Et link kan både være tekst, et billede og et helt element. • Et typisk tekst-link ser således ud i xhtml-dokumentet: <divclass="box"> <p>tekst med <a href="http://dr.dk">link til dr</a></p> </div>

Links og css • Et link kan være i fire forskellige stadier: link, visited, active og hover. Vi kan igennem vores stylesheet definere hvordan hvert af disse stadier skal se ud: a:link, a:visited, a:hover, a:active{ text-decoration:none; } a:link{ color:#CC00FF; } a:hover{ color:#CCCC00; background-color:#333333; } a:visited{ color:#CC00FF; } a:active{ color:#FFFFFF; background-color:#666600; }

Links som blok-element • Ved at lave vores links om til et blok-element kan vi få et helt element til at virke som link og ikke kun teksten • Det er også muligt at lave et billede til et link <div class="box"> <a href="http://dr.dk">link tildr</a> </div> a:link, a:visited, a:hover, a:active{ text-decoration:none; display:block; } <div class="box"> <a href="http://dr.dk"><img src="images/css3.png" /></a> </div>

Lister • Lister bruges, som navnet antyder, til at opstille tekst på listeform. Dette kan enten gøres i en uordnet eller en ordnet liste. • Forskellen på de to listetyper er at den ordnede liste er nummereret stigende ,hvorimod den uordnede ikke har nogen nummerering. • En uordnet og en ordnet liste laves således i xhtml: <div class="box"> <ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> </div> <div class="box"> <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> </div>

Lister og css • Det er muligt at ændre på den måde hvert element i listen bliver præsenteret på: • Der er i alt ca. 15 forskellige default muligheder at vælge imellem ul{ list-style-type:katakana; } ul{ list-style-type:lower-roman; } ul{ list-style-type:square; }

Lister og css 2 • Udover de default præsentationsmuligheder er det også muligt selv at indsætte et billede som skal vises ud for hvert liste-element. ul{ list-style-image:url(../images/angry.gif); }

Lister inline • Lister behøves ikke at være vertikale. Hvis vi f.eks. vil bruge en liste til en horisontal menu-bar kan listen nemt omstilles til dette ul{ list-style:none; } li{ display:inline; background-image: url(../images/angry.gif); background-repeat: no-repeat; background-position: left center; padding: 5px 10px 5px 30px; } top højre bund venstre

Lister af lister • Lister kan indeholde andre lister som igen kan indeholde andre lister. Vi kan derved lave en hierarkisk opbygning til f.eks. En indholdsfortegnelse <div class="box"> <ul> <li>element 1 <ul> <li>indre element 1</li> <li>indre element 2</li> </ul> </li> <li>element 2</li> <li>element 3</li> </ul> </div> ul{ list-style:lower-alpha; list-style-position:inside; padding: 0 00 15px; line-height:150%; }

Tabeller • Tabeller er lavet til at præsentere data i tabelform og ikke som det førhen har været tilfældet i html som en måde at lave layout på. Det har vi css til! • Tabeller er bygget op af de tre selektorertable, tr ogtd hvor tablestår for selve omgrænsningen af tabellen og trog tdhenholdsvis står for tabel-rækker og tabel-data • Det er desuden muligt at tilføje selektorenth i den første række af tabellen for at få en overskrift på den enkelte kolonne <divclass="box"> <table> <tr><th>navn</th><th>adr.</th><th>tlf.</th></tr> <tr><td>poul</td><td>en gade</td><td>12334</td></tr> <tr><td>anders</td><td>gade 3</td><td>32892</td></tr> <tr><td>sigrid</td><td>vej 21</td><td>12452</td></tr> </table> </div>

Tabeller og css • Det er muligt at ændre på tabellens udseende via css så vi kan få en pænere præsentation af vores data table{ border:0px; border-collapse:collapse; width:100%; } th{ text-align:left; background-image:url(../images/bargradient.gif); background-repeat:repeat-x; } td, th{ border-bottom:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding:3px; }

Tabeller og inlinecss • Vi vil dog også gerne have forskellige størrelser på hver af kolonnerne da nr. ikke behøves lige så meget plads som navn, dette er en af de få gange hvor vi skal skrive cssinline i selve xhtml dokumentet. <divclass="box"> <table> <tr><th style="width:6%;">nr.</th><th>navn</th><th>adr.</th><th style="width:20%;">tlf.</th></tr> <tr><td>1</td><td>poul</td><td>en gade</td><td>12334</td></tr> <tr><td>2</td><td>anders</td><td>gade 3</td><td>32892</td></tr> <tr><td>3</td><td>sigrid</td><td>vej 21</td><td>12452</td></tr> </table> </div>

Ændring af specifikke celler • Det er også muligt at tilføje en klasse til nogle af cellerne for at gøre tabellen lettere læselig <divclass="box"> <table> …. <tr><td class="tablecellgrey">2</td><td class="tablecellgrey">anders</td><tdclass="tablecellgrey">gade 3</td><td class="tablecellgrey">32892</td></tr> …. </table> </div> .tablecellgrey{ background-color:#CCCCCC; }

Kontekst specifikke selektorer • Det er muligt at bestemme hvordan elementer i forhold til deres kontekst skal opføre sig <divclass="box"> <p>text-box 1</p> <div class="box2"> <p><img src="images/css3.png" class="floatright"/> text-box 2, med noget mere tekst i</p> </div> </div> .box2 p{ color:#CCFFFF; } p{ color:#FF00FF; }

Kommentarer i css og xhtml • Man kan skrive kommentarer til sig selv og andre programmører i både xhtml- og css-koden. Disse kommentarer vil blive overset af webserveren og web-browseren. • Kommentarer i xhtml ser således ud: • Og i stylesheetet ser det således ud: • Dette kan også begge henseender bruges til at udkommentere kode som man gerne vil gemme men ikke skal bruge lige nu  /* en lille kommentar på flere linjer */

Validering af xhtml og css • Det er muligt at validere sin xhtml og css kode for at finde ud af om den overholder de standarter man har foreskrevet den burde gøre • Validering af xhtml kan foretages her: http://validator.w3.org/ • Validering af css kan foretages her: http://jigsaw.w3.org/css-validator/

Stjæl med arme og ben • Layout • Xhtml – kig på koden • Css – kig på koden • Billeder (hvis de ikke er få åbenlyse)

Stand-up programmering • Så hvordan kombinerer vi så alt det vi har lært til en færdig hjemmeside? • Start med at lave en skitse så vi har noget at gå ud fra • Lav derefter de ting som er gennemgående for alle siderne såsom header, menuer osv. • Afslut med at lave det der er specifikt for den enkelte side

Udskiftning af stylesheet • Hvorfor var det så smart at vi lavede alt vores css i et eksternt stylesheet? • Vi kan hurtigt udskifte vores stylesheet med et nyt og få et helt andet layout

Uge 45 xhtml og CSS