HTML

Struktur och layout

Som bekant är HTML till för att beskriva strukturen på ett dokument. Inte för att avgöra hur det ska se ut eller presenteras, utan hur det är strukturerat. Ofta görs ändå "felet" att göra sin sidlayout i HTML trots att det inte är tänkt så. T ex är tabeller ett enkelt sätt att styra var på sidan saker ska ligga, men tyvärr är det inte rätt sätt att göra det på. T o m på dessa kurssidor finns det med tabeller som har andra funktioner än att innehålla tabelldata.

Det går att göra sin layout helt perfekt med tabeller, så varför inte göra det? Bland annat finns det webbläsare som inte helt stödjer tabeller och speciellt inte alla de attribut som tabeller kan ha. Då får sidan ett helt felaktigt utseende för dessa läsare, t ex på små enheter (mobila webbläsare som telefoner, handdatorer mm). Dessutom förstörs strukturen på sidan så att en sökmotor inte kan hitta rätt information. Mer och mer information som är sökbar på olika sätt läggs in på sidorna och detta kräver en mer strikt struktur för att vara praktiskt möjligt.

I exemplet med formuläret använde vi oss av en tabell för att lägga in alla formulärets delar i. Frågan är, hur ska man annars göra? Utan tabellen hade det sett ut någonting såhär:

Användarnamn Lösenord

Och koden för formuläret ser ut enligt:


<form method="post" action="#">     

	Användarnamn 

	<input type="text" name="username" size="32">

	Lösenord 

	<input type="password" name="password" size="32">

	<input type="submit" name="login" value="Logga in">

</form>

Allting hamnar på en rad (eller med en ful radbrytning p g a att sidans bredd inte räcker till) och det är inte så det är tänkt att se ut. Istället ska vi använda oss av två element som heter DIV och SPAN. DIV i HTML betyder ett logiskt avsnitt, lite som en paragraf. Därför kan vi tänka oss att varje rad i formuläret är en egen DIV. Dessutom märker vi upp Användarnamn och Lösenord med elementet LABEL.

Och nu ser koden ut såhär:


<form method="post" action="#"> 

 

<DIV>

	<LABEL>Användarnamn</LABEL>

	<input type="text" name="username" size="32">

</DIV>

<DIV>

	<LABEL>Lösenord</LABEL>

	<input type="password" name="password" size="32">

</DIV>

<DIV>

	<input type="submit" name="login" value="Logga in" 

	class="submit">

</DIV>

</form>

HTML skiljer på två sorters element. Det finns BLOCK-element och INLINE-element. BLOCK betyder att det är en del som kan ligga direkt i HTML-kroppen, BODY. Alla sådana element skapar en egen del i dokumentet och börjar också på ny rad om inte annat anges. Exempel på BLOCK-element är de olika rubriknivåerna (H1-H6), P och DIV. Vi säger att allt inom ett block tillhör en logisk enhet, något som hör ihop på ett logiskt sätt.

INLINE-element är sådana som ligger på en lägre nivå och kan bara innehålla text eller andra INLINE-element. Vi kan se på det som att BLOCK-element bygger upp den stora strukturen medan INLINE arbetar på textnivå och inte bryter det naturliga flödet genom att skapa nya rader. Exempel på INLINE-element är SPAN och B som är bra sätt att märka upp text som ska formateras.

Vi har nu skapat en struktur som beskriver innehållet men som inte uttrycker hur det ska formateras. Precis som vi vill ha det! I nästa avsnitt i kursen som handlar om stilmallar (CSS) ska vi titta på hur man skapar en snygg layout för detta formulär.