<% Mess="" If Session("Medlem") <> True Then Mess="Du måste vara inloggad för att se sidan!" End If %>

Logisk kontra fysisk formatering

 

BEGREPP

Innan vi tittar på skillnaden mellan fysiska och logiska element är det på sin plats att förklara några begrepp.

Taggar som omsluter enstaka ord eller meningar kallas för INLINE-element eftersom de ligger i den löpande texten. Taggar som omsluter hela stycken kallas för BLOCK-element. Per definition kan ett BLOCK-element omsluta en eller flera INLINE-element. I XML terminologi kallas båda dessa element för CONTAINERs då de har ett innehåll, nämligen text.

Exempel på INLINE-element är:

Exempel på BLOCK-element är:

ATTRIBUT

Allmänna attribut

Följande attribut kan användas i alla element:

class

class kopplar formatering i ett CSS dokument eller i ett <STYLE>-element till elementet

<div class="datestamp">

id (IDentity)

id ger elementet ett namn som kan användas som mål för en länk. Den kan också koppla en specifik formatering i ett CSS dokument eller i ett <STYLE>-element till elementet. Eftersom en länk inom ett dokument måste vara unik, följer det att namnet som anges med id bara får förekomma en gång i dokumentet.

<div id="headline">

lang (LANGuage)

lang tillåter specifikation av språket för elementet vilket många sökmotorer kan ta hänsyn till. Själva språket anges med en bokstavskombination enligt RFC1766 normen. Det är vanligt att hela sidan är i ett språk varför lang då kan anges i body elementet. Avvikelser kan anges för individuella elementet.

Eftersom enbart lang inte är äkta XHTML är det vanligt att man även använder xml:lang för att vara kompatibla med både XML och HTML.

<body xml:lang="en" lang="en">

style

style tillåter CSS formatering inne i dokumentet.

<style>
h2 {
color: green;
}
</style>

title

title kopplar en text till elementet som oftast visas som en etikett när markören hålls över elementet.

<acronym title="eXtensible HyperText Markup Language" xml:lang="se" lang="se">XHTML</acronym>
Visas som:
XHTML

Placera markören över texten för att se effekten.

Uppgift

Skapa ett dokument som visas enligt följande:

PEERSWEDEN

är en förening för samverkande auktoriserade konsultföretag inom dataområdet.

All text ska finnas inom två p-element medan formateringen ska finnas i ett style-element. Ett förslag till utformning finns här.

INLINE-element

Ibland tycks det finnas mer än ett INLINE-element som har samma effekt på hur texten de omsluter ska visas. T.ex. b och strong ger båda text i fetstil men de har olika innebörd. Taggen b ger alltid fetstil och bestämmer direkt hur texten ska hanteras, medan strong ger en starkt betonad text som normalt även den visas med fetstil.

Tänk dig nu in i situationen för en synskadad som besöker en sida med dessa taggar. För den synskadade hjälper det inte att texten är i fetstil, men de hjälpmedel som en synskadad använder sig av kan använda andra sätt att meddela textens utseende. Taggen b skulle för en som får all text uppläst maskinellt kunna innebära att orden fetstil börja och fetstil sluta används, medan taggen strong skulle kunna tolkas genom att ljudnivån höjs för texten som är i fetstil. Var jag synskadad skulle jag tveklöst föredra den höjda ljudnivån, då detta stör textens innebörd mindre.

Taggarna som direkt bestämmer hur texten ska visas kallas för fysiska-element, medan de som ger texten en innebörd eller särskild betydelse kallas för logiska-element. I XHTML vill man komma bort från de begränsningar som fysiska-element innebär, då dessa är hårt knutna till bläddrarens sätt att visa text på en bildskärm. Fysiska-element är inte förbjudna men logiska-element är att föredra, då man överlåter till applikationen som tolkar texten, hur det sedan ska behandlas.

LOGISKA INLINE-element

acronym - förkortning

Då bläddrare inte har något sätt att visa att texten är en förkortning används elementet än så länge sparsamt men kommer att öka i användning med tiden. Eftersom man kan tala om vilket språk man använder sig av med attributen xml:lang och lang får detta element mest nytta om man även använder attributen title för att förklara förkortningen.

eXtensible HyperText Markup Language förkortas:<acronym title="eXtensible HyperText Markup Lanuage" xml:lang="se" lang="se">XHTML</acronym>
Visas som:
eXtensible HyperText Markup Lanuage förkortas:XHTML

Placera markören över förkortningen för att se effekten.

bdo - skrivriktning (BiDirectional Override)

I vissa språk skriver man i motsatt skrivriktning och, när man ska citera någonting i det språket, är det lämpligt att ändrar skrivriktningen, så att citatet är fullt förståligt för den som kan språket. När man använder bdo taggen måste man dessutom ange skrivriktningen.

Persiska för mjukvara är <bdo xml:lang="fa" lang="fa" dir="rtl"> &#1606;&#1585;&#1605;&#8204;&#1575;&#1601;&#1586;&#1575;&#1585;</bdo> och skrivs i västerländsk stil som narm&zwnj;afz&#257;r
Visas som:
Persiska för mjukvara är نرم‌افزار och skrivs i västerländsk stil som narm‌afzār

I exemplet ovan har vissa bläddrare svårt att återge det sista ordet på rätt sätt. Entity &zwnj; (Zero Width Non Joiner) används för att markera att det persiska ordet för mjukvara är tvådelat. Själva entityn ska inte synas utan hindra att bokstäverna länkas ihop, men ordet bör inte avstavas.

code - kod

Programkod som t.ex. XHTML ska omges av code-taggen.

<code>
    &lt;font style="color:blue"&gt;&lt;h2&gt;&lt;/font&gt;
    Microsoft XML guru sees power for the people&lt;font
    style="color:blue"&gt;&lt;/h2&gt;&lt;/font&gt;
    Published: April 27, 2005, 1:57 PM PDT
</code>
Visas som:
<h2>Microsoft XML guru sees power for the people</h2>
Published: April 27, 2005, 1:57 PM PDT

cite - citat

Text som är tagen från en annan källa eller som återges från en persons uttalande ska skrivas inom ett cite element. Precis som för acronym kan attributen för språk och förklaringen användas.

<cite title="Tim Berners-Lee - The World Wide Web: A very short personal history" xml:lang="en" lang="en">I wrote in 1990 a program called &quot;WorlDwidEweb&quot;</cite>
Visas som:
I wrote in 1990 a program called "WorlDwidEweb"

Placera markören över den visade texten för att se effekten.

dfn - definition

Om det förekommer ovanliga ord eller termer i texten kan dessa anges med dfn vid sin första förekomst. Glöm inte acronym om det är en förkortning.

<dfn>Cascading Style Sheet</dfn> som f&ouml;rkortas till <acronym>CSS</acronym> &auml;r en samling regler f&ouml;r den fysiska formateringen av ett dokument
Visas som:
Cascading Style Sheet som förkortas till CSS är en samling regler för den fysiska formateringen av ett dokument

em - betonad (EMphasize)

Text som är viktig och därmed ska betonas skrivs inom em-taggar.

XHTML &auml;r <em>&auml;kta</em> XML som simulerar HTML
Visas som:
XHTML är äkta XML som simulerar HTML

kbd - tangentbord (KeyBoarD)

Text som ska matas in via tangentbordet ska anges i ett kbd-element.

F&ouml;r att f&aring; ett bindestreck &#39;&#8209;&#39; som inte avstavas kan UNICODE tecknet 8209 anv&auml;ndas. Detta skrivs in som en entity: <kbd>&amp;#8209;</kbd>.
Visas som:
För att få ett bindestreck '‑' som inte avstavas kan UNICODE tecknet 8209 användas. Detta skrivs in som en entity: &#8209;.

q - citation (Quotation)

Längre citat bör anges med q då man kan använda attribut cite för att ange en URL till ursprungstexten.

<q cite="http://www.famous-quotations.com" title="Bill Gates (Born 1955) , Microsoft Founder, in 1981" lang="en" xml:lang="en">
640K ought to be enough for anybody</q>
Visas som:
640K ought to be enough for anybody

Placera markören över den visade texten för att se effekten.

samp - exempel (SAMPle)

Ska texten visa ett exempel på en utskrift eller en inmatning används samp, vilket oftast ger en font där varje tecken tar lika mycket plats.

<samp>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;main.css&quot;/&gt;</samp>
Visas som:
<link rel="stylesheet" type="text/css" href="main.css"/>

strong - starkt betonad

Text som är viktigare än em-text kan återges i ett strong-element som starkt betonad.

En webbplats <strong>m&aring;ste alltid ha</strong> en kontaktl&auml;nk som <em>inte</em> kr&auml;ver en
lokal e-post klient.
Visas som:
En webbplats måste alltid ha en kontaktlänk som inte kräver en lokal e-post klient.

sub - nedsänkt (SUBfix)

Text som ska visas nedsänkt anges med sub-taggen.

Den kemiska formeln f&ouml;r vatten &auml;r H<sub>2</sub>O
Visas som:
Den kemiska formeln för vatten är H2O

sup - upphöjd (SUPerfix)

Text som ska visas upphöjd anges med sup-taggen.

Einsteins formel &auml;r E=mc<sup>2</sup>
Visas som:
Einsteins formel är E=mc2

var - variabel (VARiable)

Formler innehåller variabler och ska omges med var-taggen.

I Pythagoras sats <strong>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></strong> &auml;r <var>c</var> hypotenusan.
Visas som:
I Pythagoras sats a2 + b2 = c2 är c hypotenusan.

FYSISKA INLINE-element

Fysiska element bör undvikas i möjligaste mån till förmån för logiska element. Dock finns det alltid undantag när den logiska innebörden beror på den fysiska formateringen. När författare och förlag anges i en referenslista över relevant litteratur, är det vanligt att författaren anges i kursivstil, varför i-elementet används då man enbart vill markera skillnaden mellan förlag och författarnamn istället för em-element, som drar uppmärksamhet till författarnamnet framför förlaget.

b - fetstil (Bold)

Text som ska visas med fet stil skrivs inom ett b-element

Anv&auml;nd inte <b>VERSALER</b> i ett forum d&aring; detta uppfattas som att du h&ouml;jer r&ouml;sten.
Visas som:
Använd inte VERSALER i ett forum då detta uppfattas som att du höjer rösten.

big - storstil

Elementet big ger texten den nästa större fonten. Big finns på listan över utgående element varför du avrådes från att använda det och i stället övergå till ett attribut för font-elementet.

Please don't <big>raise</big> your voice.
Visas som:
Please don't raise your voice.

br - radbrytning (BReak)

br-element används för att ovillkorligen bryta rad men ersätts ofta med p-element i löpande texter. Lägg märke till att br är ett tomt element och således skrivs <br/>

I said to my egg<br/>can you stand on one leg?
Visas som:
I said to my egg
can you stand on one leg?

i - kursivstil (Italics)

För text i kursiv stil används i-elementet. Det är vanligt att använda i-elementet istället för u-element eftersom läsaren då har lättare att skilja på klickbara länkar och vanlig text.

Detta &auml;r inte en <i>klickbar</i> text.
Visas som:
Detta är inte en klickbar text.

small - litenstil

Elementet small ger texten den nästa mindre fonten. Small finns på listan över utgående element, varför du avrådes från att använda det och i stället övergå till ett attribut för font-elementet.

Varf&ouml;r <small>viskar</small> du?
Visas som:
Varför viskar du?

tt - maskinskrift (TeleType)

För text som måste visas i ett s.k. monospaced typsnitt men som inte är av kod karaktär finns tt-elementet. I ett monospaced typsnitt upptar alla tecken lika mycket plats på bredden.

<tt>
    Deltid Sluttid<br/>
    &nbsp;&nbsp;3,12&nbsp;&nbsp;&nbsp;&nbsp;5,25<br/>
    &nbsp;&nbsp;2,58&nbsp;&nbsp;&nbsp;&nbsp;5,34
</tt>
Visas som:
Deltid Sluttid
  3,12    5,25
  2,58    5,34

Uppgift

Skapa en XHTML-sida med sidrubrik 'Kända citat'. Följande citat ska visas på sidan:

Kunskap är inte allt här i världen

Imagination is more important than knowledge.
Knowledge is limited. Imagination encircles the world.

Vem sa detta?

Det lämnas åt läsaren att ta reda på vem som citeras och lägga in detta i sidan. Ett förslag till utformning finns här.

BLOCKELEMENT

Blockelementet som alltid förekommer är body, medan p nästan alltid finns med men inte betraktas som ett blockelement, mest beroende på att man fortsätter att glömma det avslutande /p. Nu när användning av stilmallar ökar är div-elementet aktuellt.

Justering av text inom ett blockelement

Attribut align kan användas i alla blockelement tillsammans med följande värden för att placera texten:

center - centrerar

Allt i elementet centreras inom elementet.

<table border="1">
    <tr>
        <td width="100">
            <p align="center">Mitt i</p>
        </td>
        <td width="50">Normal</td>
    </tr>
</table>
Visas som:

Mitt i

Normal

justify - rak vänster och höger marginal

När texten överstiger bredden på elementet justeras ordens mellanrum så att både de vänstra och högra marginalerna blir raka, såsom i en tidningsspalt eller ett bokkapital.

<blockquote align="justify">
    'The time has come,' the Walrus said, 'To talk of many things:
    Of shoes - and ships - and sealing-wax -
    Of cabbages - and kings - And why the sea is boiling hot -
    And whether pigs have wings.'
</blockquote>
Visas som:
'The time has come,' the Walrus said, 'To talk of many things: Of shoes - and ships - and sealing-wax - Of cabbages - and kings - And why the sea is boiling hot - And whether pigs have wings.'

left - vänsterställ

Justera text till vänster vilket är normalt. Används inuti ett omslutande element som har annan justering.

<div align="center">
    K&ouml;r rakt fram
    <p align="left">Sv&auml;ng till v&auml;nster</p>
    Sv&auml;ng till h&ouml;ger
</div>
Visas som:
Kör rakt fram

Sväng till vänster

Sväng till höger

right - högerställ

Justera text till höger.

<div align="center">
    conduisez tout droit<br/>
    tournez &agrave; gauche
    <p align="right">tournez &agrave; droite</p>
</div>
Visas som:
conduisez tout droit
tournez à gauche

tournez à droite

Enkla BLOCK-element

address - kontaktadress

address-element har hittills mest använts för upphovsmannen till eller den ansvariga utgivaren för en webbsida. När vi strävar att vara flexibla bör alla adresser omslutas av address-element för att främja sidanalys. Det finns dock en begränsning av vikt här, då det enda blockelementet som tillåts inuti ett address-element är p-elementet.

<address>
    Ansvarig utgivare:<br/>
       webbansvarig@peersweden.se
</address>
Visas som:
Ansvarig utgivare:
    webbansvarig@peersweden.se

blockquote - citatstycke

När man ska citera en större mängd text som innehåller flera stycken är blockquote-elementet till hjälp då det normalt innebär att både vänster och höger marginal dras in en bit Det kan med fördel kombineras med em-elementet. Observera att någon fritext inte får finnas inom ett blockquote-element utan all text måste omslutas av andra element.

N&auml;r IBM hade levererat sin f&ouml;rsta mainframe trodde ledningen att kostnaden skulle var ett marknadshinder d&aring; f&aring; nationer bed&ouml;mdes ha r&aring;d. D&aring; uttalades f&ouml;ljande:
<blockquote>
    <p>
        <em>
            I think there is a world market for maybe five computers.
        </em>
    </p>
    <p>
        Thomas Watson (1874-1956) , Chairman of IBM, 1943
    </p>
</blockquote>
Hur fel han hade!
Visas som:
När IBM hade levererat sin första mainframe trodde ledningen att kostnaden skulle var ett marknadshinder då få nationer bedömdes ha råd. Då uttalades följande:
I think there is a world market for maybe five computers.

Thomas Watson (1874-1956) , Chairman of IBM, 1943
Hur fel han hade!

body - dokumentkropp

Body-elementet är viktigt då det bestämmer hur all text på en webbsida ska återges. Både bläck och underlag kan påverkas, men eftersom det gäller för hela sidan är försiktighet på sin plats.

Att använda sig av en bild som underlag ska göras med omtanke, då det kan försvåra läsbarheten av texten. Bilden kommer att upprepas för att fylla hela skärmen varför du bör kontrollera hur sidan blir med olika upplösningar. Bilder med starka färger bör tonas ner.

<body background="xhtmlpeer.gif">
    <p>V&auml;lkommen;</p>
    <p>&nbsp;</p>
</body>
Visas som:

Välkommen





Att bestämma färg på pappret är ett bättre sätt att göra sidan vilsam för läsaren, men var mycket försiktig med starka färger och kom ihåg at 5% av befolkningen har någon form av färgblindhet. Sidan som du läser just nu har en gråtonad blågrön nyans för att inte skapa för stora kontraster.

<body bgcolor="#000000">
    <font color="#FFFF00">
        Bilder g&ouml;r sig bra mot en m&ouml;rk bakgrund
        men kom ih&aring;g att ha en ljus text
    </font>
</body>
Visas som:
Bilder gör sig bra mot en mörk bakgrund men kom ihåg att ha en ljus text

När man väl har bestämt sig för bakgrunden kan man sedan välja en lämplig färg för texten.

<body bgcolor="#080000" text="#ffffff">
    Bilder g&ouml;r sig bra mot en m&ouml;rk bakgrund
    men kom ih&aring;g att ha en ljus text
</body>
Visas som:
Bilder gör sig bra mot en mörk bakgrund men kom ihåg att ha en ljus text

div - division

Div-elementet har inga egna egenskapar utan används för att koppla gemensamma stil attribut till det som omsluts av elementet. Genom att använda id och/eller class kan stil attributen hämtas från en stilmall.

<div style="color: red">
    <h4>Rubrik</h4>
    <p>Paragraf</p>
<div>
Visas som:

Rubrik

Paragraf

h2/6 - rubriknivå (Heading)

De 6 nivåerna i rubrikhierarkin anges med h-element där h2 ger den största och h6 ger den minsta rubrikfonten. Bläddraren bryter alltid rad framför och efter ett h-element

<p>The <h2>proof</h2> of the <h4>pudding</h4> is in the eating.</p>
Visas som:
The

proof

of the

pudding

is in the eating.

hr - vågrättlinje (HoRizontal)

Hr-elementet ger en vågrät linje på egen rad. Du kan använda de fyra attributen align, noshade, size och width för att manipulera utseendet.

<p>
    f&ouml;reg&aring;ende stycke
    <hr width="50%" size="4" style="color: green"/>
    f&ouml;ljande stycke
</p>
Visas som:
föregående stycke
följande stycke

p - stycke (Paragraph)

P-elementet används för all text som inte ryms inom andra element. Två eller fler p-element efter varandra särskiljes vid visning med en tom rad mellan varje stycke. Bruket att skapa tomrader genom upprepade <P> är inte tillåtet även om man använder upprepade <p></p>, eftersom ett p-element måste innehålla någonting. M.a.o. använd i så fall konstruktionen <p><br/></p>.

<p>F&ouml;rsta stycket</p>
<p>Andra stycket</p>
<p><br/></p>
<p><br/></p>
<p>Sista stycket</p>
Visas som:
Första stycket

Andra stycket





Sista stycket

pre - förformaterat (PREformated)

För text vars utseende är beroende av de tecken den består av inklusive radmatningar och mellanslag finns pre-element som bevarar dessa egenskaper. Då är det givet att det visas med ett monospaced typsnitt där alla tecken upptar lika mycket på bredden.

<pre>PROGRAM         ANV&Auml;NDNING     URL
TopStyle        Stilmallar     www.bradsoft.com
Paint Shop Pro  Grafik         www.jasc.com
WS_FTP          Fil&ouml;verf&ouml;ring  www.tucows.som</pre>
Visas som:
PROGRAM         ANVÄNDNING     URL
TopStyle        Stilmallar     www.bradsoft.com
Paint Shop Pro  Grafik         www.jasc.com
WS_FTP          Filöverföring  www.tucows.com

Komplexa BLOCK-element

Element för att skapa listor består av flera del-element varför de kallas för komplexa-element. De liknar tabeller men är något enklare i sin konstruktion. Dock måste man vara försiktig när man har list-element inuti andra list-element.

Listor är ett utomordentligt sätt att rada upp fakta och har även fördelen att visas nästan identiskt i de olika bläddrarna. En vanlig och behändig användning för listor ses i denna sidas innehållsförteckning som är uppbyggd med listor inom listor, s.k. nestlade listor.

dl - Definitionlista (Definition List)

Varje post i ett dl-element består av två element. Ett dt-element (Definition Term) som innehåller uttrycket samt ett dd-element (Definition Description) som innehåller den förklarande beskrivningen.

<dl>
    <dt>Bill Gates</dt>
    <dd>
        The inscrutable, geeky computer deity who holds the world's
        imagination and half of its software in his grasp
        started out in middle school creating programs on a crude terminal
        in the teletype room with three fascinated friends.
    </dd>
    <dt>Steve Jobs</dt>
    <dd>
        Born 1955 Los Altos CA; Evangelic bad
        boy who, with Steve Wozniak, co-founded
        Apple Computer Corporation and became a
        multimillionaire before the age of 30.
    </dd>
    <dt>Charles Babbage</dt>
    <dd>
        Born December 26, 1791 in Teignmouth,
        Devonshire UK, Died 1871, London; Known to
        some as the &quot;Father of Computing&quot; for his
        contributions to the basic design of the
        computer through his Analytical machine.
    </dd>
</dl>
Visas som:
Bill Gates
           The inscrutable, geeky computer deity who holds the world's imagination and half of its software in his grasp started out in middle school creating programs on a crude terminal in the teletype room with three fascinated friends.
Steve Jobs
       Born 1955 Los Altos CA; Evangelic bad boy who, with Steve Wozniak, co-founded Apple Computer Corporation and became a multimillionaire before the age of 30.
Charles Babbage
       Born December 26, 1791 in Teignmouth, Devonshire UK, Died 1871, London; Known to some as the "Father of Computing" for his contributions to the basic design of the computer through his Analytical machine.

ol - Ordnadlista (Ordered List)

Varje post i ett ol-element utgörs av ett li-element (LIst). Ol-elementet tar två attribut; type med vilken du väljer bland 5 sätt att punktera listan och start med vilken du bestämmer den första postens punkttal. De olika punkteringssätten är 1 med siffror, A med versaler, a med gemener, I med versala romerska siffror och i med gemena romerska siffror. Start värde måste alltid vara decimalt oavsett type angivelse.

<ol type="i" start="10">
    <li>margin-bottom</li>
    <li>margin-left</li>
    <li>margin-right</li>
    <li>margin-top</li>
</ol>
Visas som:
x.   margin-bottom
xi.   margin-left
xii.   margin-right
xiii.   margin-top

ul - Punktlista (Unordered List)

Varje post i ett ul-element utgörs av ett li-element (LIst). Ul-element tar ett attribut type med vilket du kan välja mellan 3 andra symboler utöver punkten. Dessa är circle (en ring), disc (en fylld ring) och square (en fylld fyrkant).

<ul>
    <li>SGML</li>
    <li>XML</li>
    <li>XHTML</li>
    <li>HTML</li>
</ul>
Visas som:
l   SGML
l   XML
l   XHTML
l   HTML

Nestlade listor

Egentligen är listor inuti listor inte svåra bara man håller ordning på de olika delarna. Om vi tar ett snitt ur denna sidas innehållsförteckning som exempel.

<ul>
    <li><a href="#BEGREPP">BEGREPP</a></li>
    <ul>
        <li><a href="#ATTRIBUT">ATTRIBUT</a></li>
        <ul>
            <li><a href="#Allmanna_attribut">Allmänna attribut</a></li>
            <li><a href="#class">class</a></li>
            <li><a href="#IDentity">id (IDentity)</a></li>
            <li><a href="#LANGuage">lang (LANGuage)</a></li>
            <li><a href="#style">style</a></li>
            <li><a href="#title">title</a></li>
        </ul>
        <li><a href="#Uppgift1">Uppgift</a></li>
    </ul>
    <li><a href="#INLINE-element">INLINE-element</a></li>
    <ul>
        <li><a href="#LOGISKA_INLINE-element">LOGISKA INLINE-element</a></li>
        <ul>
            <li><a href="#acronym">acronym - förkortning</a></li>
        </ul>
    </ul>
</ul>
Visas som:
l   BEGREPP
      ¡ ATTRIBUT
          n Allmänna attribut
          n class
          n id (IDentity)
          n lang (LANGuage)
          n style
          n title
      ¡ Uppgift
l   INLINE-element
      ¡ LOGISKA INLINE-element
          n acronym - förkortning

Uppgift

För att du ska bekanta dig med div-elementets möjligheter ska denna uppgift lösas med just div-element och inte med tabeller. Tabeller gillas inte alls av sökmotorer varför de ska undvikas i största mån och särskilt som sidlayout.

För att klara uppgiften behöver du lite kunskap som hör hemma i nästa avsnitt och handlar om CSS. Till div-elementet kan du koppla många egenskaper med hjälp av ett style-attribut. De egenskapar som behövs är width, background-color och float. Width bestämmer bredden på elementet, background-color anger papprets färg och float bestämmer hur elementet ska placeras i relation till andra element. Float tar left, right och auto som argument.

T.ex <div style="width:50; background-color:green; float:auto">div elementets innehåll</div>

Uppgiften är att skapa en sida med följande utseende utan att använda tabeller:

FÄRGBOLAGET STOP & GO AB

Vänster spalt

 

Höger spalt

 

 

Mittfåran

 


Ett förslag till lösningen finns här.