HTML © Eva von Pepel
HTML 4.0 skiljer åt struktur från presentationen. All presentation ska numera deklareras via stilmallar. Det betyder att inga s.k. stilistiska element eller attribut är tillåtna och deras användning kommer att resultera i syntaxfel vid valideringen. Ett sådant element är CENTER och ett sådant attribut är ALIGN som används för att justera dokumentets innehåll.
För att inte "ogiltigtsförklara" de flesta av Webbens dokument publicerade W3C en övergångsversion av HTML 4.0 - HTML 4.0 Transitional där alla dessa element och attribut är tillåtna - dock nedskrivna. Nedskrivna element/attribut är sådana som planeras att tas bort ur framtida versioner av HTML (som inte nödvändigtvis betyder att även www-klienter kommer att sluta stödja dem).
Om du tänker använda elementet CENTER eller attributet ALIGN börja dina dokument med följande Dokumenttyp Deklarationen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
eller
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
Om du tänker formattera dina dokument enbart med stilmallar och inte stilistiska element/attribut börja varje dokument med följande Dokumenttyp Deklarationen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
eller
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
Texten justeras genom att tilldela det berörda elementet attributet ALIGN. Alla attribut skrivs in i starttaggen och åtskiljs med ett mellanslag.
ALIGN kan ta fyra attribut: LEFT, CENTER, RIGHT, JUSTIFY. Standardvärdet är LEFT, dvs om inget attribut uppges kommer innehåll att högerjusteras.
<P align=left>Text</P> standardvärde - behöver inte uppges
<P align=center>Text</P> centrerar ett stycke
<P align=right>Text</P> vänsterjusterar ett stycke
<P align=justify>Text</P> raka marginaler - OBS! Netscape försöker skapa raka marginaler även på sista raden - för att undangå problemet ha minst ett mellanslag mellan sista tecknet och sluttaggen </P> eller skriv sluttaggen på nästa rad.
Om du inte vill använda attributet ALIGN, dvs vill strukturera dokumentet enligt HTML 4.0 och inte HTML 4.0 Transitional och justera styckena med stilmallar skriver du följande i mallen för att t ex vänsterjustera dem:
P {text-align: right}
På så sätt kommer alla stycken att vänsterjusteras. Därför är det bättre att skapa en klass och sedan tilldela den endast de element som ska vänsterjusteras.
Stilmall:
.right {text-align: right}
HTML:
<P class=right>Text</P>
kommer att justera endast detta stycke
Om du vill justera stycket eller styckena på ett annat sätt byt ut "right" mot det lämpliga värdet.
n står för rubrikensnivå och representerar en siffra mellan 1 och 6
<Hn align=left>Rubrik></Hn> - standardvärde - behöver inte uppges
<Hn align=center>Rubrik></Hn> - centrerar en rubrik
<Hn align=right>Rubrik></Hn> - vänsterjusterar en rubrik
<Hn align=right>Rubrik></Hn> - raka marginaler
Stilmallen använder du på samma sätt som i styckena. Byt ut dock P mot en lämplig rubrik.
Bilder är s.k. inline element, dvs följer texten de befinner sig i. Attributet ALIGN som tilldelas elementet IMG justerar inte själva bilden utan kontrollerar textflöde runtom.
Attributet kan ta följande värden: TOP, MIDDLE, BOTTOM, LEFT, RIGHT, t ex
<IMG SRC="bild.gif" ALIGN=bottom> placerar texten längs ner bredvid bilden.
Justering med stilmallar sker med hjälp av egenskapen vertical-align som kan ta följande värden i CSS1: sub, super, top, text-top, middle, bottom, text-bottom. Värdet kan även uppges i procent vilket då kommer att referera till elementets radhöjd. Standardvärdet är baseline
IMG {vertical-align: middle}
Som inline element innehålls bilder av andra element. För att placera en bild på ett speciellt sätt justerar du det element bilden befinner sig i. Om bilden skapar ett stycke justerar du stycket om bilden skapar en rubrik (t ex en logo) justerar du rubriken.
<P align=VÄRDE><IMG SRC="minbild.gif"></P>
<H1 align=VÄRDE><IMG SRC="minbild.gif"></H1>
Tabeller justeras på samma sätt som stycken eller rubriker. Observera att justeringen gäller själva tabellen och inte dess (cellernas) innehåll. Tillåtna värden är LEFT, CENTER, RIGT. Standardvärdet är LEFT.
<table align=VÄRDE>
celler
</table>
Äldre bläddrare ger inte något stöd åt TABLE ALIGN=center. Du kan även centrera en tabell på följande sätt:
<DIV align=VÄRDE>
<TABLE></TABLE>
</DIV>
eller (rekommenderas ej)
<CENTER>
<TABLE></TABLE>
</CENTER>
Det finns ett antal olika sätt på vilka tabeller kan justeras med hjälp av CSS. De flesta har inte fått något stöd hos populära www-klienter - än. Föär att t ex centrera en tabell skriver du följande:
CSS:
.center {text-align: center}
HTML:
<DIV class=center>
tabell
</DIV>
För att justera cellernas innehåll horisontellt tilldelar du attributet ALIGN till TH om rubriken ska justeras, TD om cellen ska justeras eller TR om raden ska justeras. I dessa element kan ALIGN ta följande värden: LEFT, CENTER, RIGHT, JUSTIFY, CHAR, CHAROFF. Standardvärdet i TR och TD är LEFT i TH däremot är standardvärdet CENTER.
<TR align=center> - centrerar hela raden
<TD align=center> - centrerar den aktuella cellen
För att justera cellernas innehåll vertikalt använder du attributet VALIGN som kan ta följande värden: TOP, MIDDLE, BOTTOM, BASELINE. Standardvärdet är MIDDLE.
<TD valign=top> kommer att placera innehållet i början av en cell
DIV (division) är ett mycket användbart element. Med detta element kan ett obegränsat antal andra element grupperas/struktureras som en enda enhet, t ex kapitel i en bok. Elementet definierar sitt innehåll som strukturellt block utan att påverka dess presentation.
Med detta element kan du justera alla BODY element, enstaka eller grupper och tom ett helt dokument. DIV kan ta en mängd olika attribut, bl a ALIGN som i sin tur kan ta följande värden: LEFT, RIGHT, CENTER, JUSTIFY.
<DIV align=VÄRDE>
valfria element
</DIV>
Om du använder stilmallar justera DIV's innehåll på samma sätt som P eller Hn. OBS! inte varje elements innehåll justeras på detta sätt. Se justring av tabeller.
CENTERs användning är begränsad till att vara alias till <div align=center>, dvs centrera enstaka element eller grupper av element.
<CENTER>
valfria element
</CENTER>
Elementet har uppfunnits av Netscape. Trots dess support av både HTML 3.2 och HTML 4.0 Transitional är CENTER fortfarande mycket kontroversiellt p.g.a. dess ologiska och absurda egenskaper. Det absurda ligger i det faktum att CENTER är ett värde och inte element.
Exemplet nedan visar hur absurd CENTER är
En konstruktion/struktur bygger på en sammansättning av olika komponenter (element) och inte värden på deras attribut. Det går ju inte att bygga en bil av GUL. Precis på samma sätt går det inte att strukturera ett dokument med hjälp av CENTER.