XHTML og CSS
HTML eller XHTML
Siden Tim Berners-Lee ved CERN introduserte HTML i 1989, har vi hatt:
- Flere versjoner av HTML med litt forskjellige egenskaper
- En serie med nettlesere som i varierende grad har tolket de ulike HTML-versjonene forskjellig.
- Nettleserene har hatt stor grad av toleranse når det gjelder å tolke HTML. De har akseptert HTML som ikke er velformet i henhold til krav om at elementer skal være lukkede, ikke overlappe osv.
- Nettlesere har også introdusert sine egne små finurligeheter for å oppnå spesielle effekter.
En forvirret verden hvor det praktisk talt er umulig å holde seg ajour med hva som virker, hvordan det virker og under hvilke betingelser det virker. Det beste vi kan gjøre er å fokusere på det abeidet som gjøres i W3C og håpe at anbefalingene derfra får gjennomslag.
- Fremtiden er XHTML og XML (+ CSS)
- XHTML er en versjon av HTML
Hva er XHTML?
- XHTML står for E X tensible H yper T ext M arkup L anguage
- XHTML skal erstatte HTML
- XHTML er nesten identisk med HTML 4.01
- XHTML er en strengere og renere versjon av HTML
- XHTML er HTML definert som en XML applikasjon
- XHTML er en anbefaling fra W3C
Krav til xhtml-tagger
- Alle tagger må lukkes. De fleste kommer i par med en start tag og en stopp tag
- Enkle tagger må lukke seg selv eks, <br />
- Alle tagger skrives med små bokstaver
- Alle verdier til attributter må være i ""
eks <a href=”http://www.hiof.no”>Høgskolen i Østfold</a>
- Elementer skal nøstes riktig
- Galt <p><a href=”http://www.hiof.no”>Høgskolen i Østfold </p></a>
- Riktig <p><a href=”http://www.hiof.no”>Høgskolen i Østfold </a></p>
Style Sheets - CSS
- Stilesett definerer hvordan HTML-sider vises i browseren
- Stilsett lagres vanligvis i Style Sheets
- Eksterne stilsett er arbeidsbesparende
- Ekstene stilsett lagres i filer med extension .css
- Multiple stildeffinisjoner vil sammenfalle (cascade) til en.
- Style Sheet løser problemet med å skille på innhold og layout
- HTML- definerer innhold
- CSS-definerer layout
Eksempel xhtml
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> test1 </title>
<link rel="stylesheet" type="text/css" href="minstil1.css" />
</head>
<body>
<h1>Dette er en HTML-side med Style Sheet</h1>
<p> Style Sheet er ikke så vanskelig og det er ganske lurt.</p>
<p> Style Sheet gir websider som er enkle å vedlikeholde</p>
</body>
</html>
Eksempel stilsett
h1, h2, h3 { color:green; }
h1 { margin-left:40px; }
p { margin-left:20px; }
test1.html,
minstil1.css
Validering
Det er viktig å validere koden slik at du er sikker på at den er riktig
På ww3 finned det validtators for html, xhtml, css og linker i et dokument.
http://www.w3.org/QA/Tools/
bad.html
Interne Style Sheet
En intern Style Sheet kan brukes når et enkelt dokument har en unik syle. Man definerer en intern Style Sheet i head seksjonen med <style> -tag
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
test2.html
Hvilken stil vil bli brukt når det er flere stiler definert for et HTML-dokument.
Stilene vil sammenfalle "cascade" til et nytt "virtuelt" stilsett (Style Sheet) etter følgende regler, hvor nummer fire har høyest prioritet.
- Browser default
- Eksternt stilsett .CSS
- Internt stilsett (innenfor <head> -taggen)
- Inline style (innenfor et HTML element)