Jasså, du har tenkt til å lære deg grunnleggende webdesign med CSS og XHTML? For meg virker det som at mange tror grunnleggende webdesign er å åpne opp FrontPage lage noen tables og legge inn noen gif-animasjoner de har funnet rundt på nettet. De som tror dette kunne ikke tatt mer feil. Det som er helt grunnleggende å kunne når man skal design websider er å vite hvilke koder som skal brukes til hva. Klart ting kan se greit nok ut dersom man bare lager en haug av tables og en svinesti av font-tags, men dette er helt feil i henhold til det som er webstandarder og også usannsynlig vanskelig å oppdatere og vedlikeholde.
W3C (World Wide Web Consortium), sammen med en god del andre grupper og enkeltpersoner har laget et sett med teknologier og grunnleggende regler for hvordan webbasert innhold skal lages og tolkes. Disse reglene blir kalt for "web standards" eller "webstandarder" (vi har ikke orddeling i det norske språket). Videre er disse reglene laget med tanke på å gi flest mulig bruker mest mulig nytte, samtidig som at sider som er laget med dagens standarder også skal kunne fungere med framtidens nye muligheter.
Det å bruke webstandarder når man designer og bygger opp nettsteder forenkler og bidrar til at kostnadene rundt produksjon holdes nede. Samtidig så vil sidene være tilgjengelige for flere typer mennesker som bruker Internett igjennom programmer og dingsebomser som foreksempel leser opp tekst for blinde. Nå tenker du kanskje at web for blinde er like fornuftig som radio for døve, men web er faktisk tekstbasert, ikke bilde eller lydbasert. Tro det eller ei, men blinde leser bøker og de bruker Internett.
Mest sannsynligvis så sitter du der og tenker "Hva faen bryr jeg meg om blinde? Ingen av de som skal inn på nettsiden min likevel!" Greit nok, men hva med folk som bruker mobilen sin til å surfe på nett, kanskje ikke så stort akkurat for øyeblikket, men det kommer. For ikke å snakke om Internett på TV, PDAer og et uendelig antall andre fremtidige dingsebomser som folk gjerne vil putte i lomma (noe som betyr at skjermplassen vil være begrenset, eller så må noen finne opp bedre og større lommer). I tillegg så er det faktisk bedre for deg som skal legge ut innhold og oppdatere disse sidene.
Jeg foreslår at du begynner pent med å titte på koden på nettopp denne siden for å se hvordan riktig bruk av mark-up ser ut. Dette kan du enkelt gjøre ved å trykke CTRL+U i FireFox på PC eller Apple+U på Mac. Dersom du ikke har FireFox så er det på tide du får deg det. Last ned FireFox!
Det første du ser når du titter i kildekoden her er (1 og 2 er hvilken linje de er på):
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
Det du ser over er det som kalles for DOCTYPE. Jeg ser ingen vits i å si noe mer om dette nå, bortsett fra at dette forteller browsere (nettlesere) hvilket språk den kan forvente seg. Du kan lese mer om forskjellige DOCTYPES på W3C. Videre har vi et område markert med <head> og avsluttet med </head>. I dette området skal det være minimum en meta-tag som forteller hvilket tegnsett som er brukt på siden og en title-tag. En title-tag skal se slik ut (uten anførselstegn) "<title>Tittel på siden</title>". Meta-tagen kan for eksempel se slik ut (igjen, uten anførselstegn) "<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />". Deretter kommer <body> som avsluttes med </body> lenger ned på siden. Body er det området der alt innholdet (tekst og relevante bilder) plasseres. Alt dette er relativt småteknisk mambojambo, men det er nødvendig. Da tror jeg faktisk at den minst spennende delen av dette lynkurset ferdig, dersom du har kommet så langt og fortsatt henger med, gratulerer!
Tross populær tro så skal man faktisk ikke bruke font eller span til å definere overskrifter. Det er fire standard tagger for overskrifter og de er følgende (rangert etter viktighet): <h1></h1>, <h2></h2>, <h3></h3> og <h4></h4>. Disse, og kun disse, skal du bruke til å definere hva som er overskrift, og hvor viktig overskriften er. En <h1> kan fint være tittelen på siden eller overskriften på en artikkel. En <h2> kan være overskriften på en artikkel dersom du har brukt <h1> som overskrift på hele siden, dersom artikkelen har fått <h1> så bruker du <h2> for undertitler og <h3> for undertitler på undertitler ogsåvidere.
Stort sett all tekst som ikke er overskrift skal inn i <p></p>, dette er en tag som markerer et avsnitt (paragraph på engelsk). Unntaket er lister. Hvilken tag du skal bruke på lister er avhengig av hva slags liste du skal ha, dersom du skal ha en liste med tall (ordered list) bruker du <ol>, om du skal ha en liste med punkter (unordered list) bruker du <ul>. Inne i disse taggene (som avsluttes med enten </ol> eller </ul>) har du list-items. List-items markeres med <li></li>. En typisk unordered list vil se slik ut i koden:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Og under har vi en unordered list i action:
- Item 1
- Item 2
- Item 3
Det skulle vel være nok om lister. Vil du ha et mykt linjeskift gjøres dette ved å bruke <br />. Bilder setter du inn ved å bruke <img src="bilde.png" width="100" height="100" />. Bilder skal stå utenfor paragrafer og andre tagger (bare tenk deg hvor irriterende det må være for en blind som leser (hører) siden og plutselig kommer det et bilde mitt inne i teksten).
Vel, hils på CSS, din nye bestevenn! CSS er forkortelse for Cascading Style Sheet og er til for å gjøre livet til webdesignere enklere. Bare tenk deg muligheten ved at du kan bytte utseende på alle dine sider kun ved å forandre på et eneste dokument! CSS bestemmer hva browseren din skal gjøre med XHTML-dokumentet den har fått. Hvordan skal for eksempel H2 taggene se ut? På denne siden har jeg lagt inn i CSS-dokumentet at h2, h3 og h4 taggene skal ha sort bakgrunn, hvit tekst, en pixel tykk ramme, padding på fem pixler og margin på 3 pixler oppe og nede og 0 pixler til høyre og venstre. Koden for dette ser slik ut:
h2, h3, h4{
background:#000;
color:#fff;
border:1px solid #000;
padding:5px;
margin:3px 0;
}
Fordelen ved å gjøre det på denne måten i forhold til å bruke font-tags er at dersom du ønsker å gjøre om på hvordan dine h3 tagger ser ut så holder det med å gjøre dette et eneste sted. La oss si at du har et nettsted med 10-20 sider på hvor alle sidene er bygd opp på samme og du plutselig bestemmer deg for at du vil at overskriften din skal være annerledes, da gjør du det på et eneste sted og sparer masse arbeid! Bare tanken på å åpne 10-20 sider for å fikse utseende på overskriften får meg til å ville legge meg til å sove.
Det ble ganske kort om CSS for nå ble jeg nemlig sulten, jeg foreslår at du tar en titt på CSS-dokumentet som er knyttet til denne siden for en liten pekepinn på hva CSS kan gjøre for deg på en ganske enkel måte. Dersom du er sulten på mer så kan du jo titte på CSS-dokumentet jeg bruker på resten av Riot On Acid.com.
Takk for at du leste Norges mest ustruktererte (og muligens eneste) CSS og XHTML lynkurs her på Riot On Acid! Kom gjerne med tilbakemelding til baby@riotonacid.com!