Du är här: keryx/artikel/21. Hoppa till huvudinnehållet (h) Sidans menysektion:
Keryx logotype

Det är lätt att koda rätt

Om denna artikel

Modern webbkodning i HTML 4, XHTML och CSS 2 bör ske för hand. Det är inte alls så svårt som det var för några år sedan. Teknikutvecklingen har gjort det lättare, inte svårare.

Publicerad: 2004-12-19

Uppdaterad: 2005-09-26

 

I min tjänst som datalärare så undervisar jag i tre kurser som på ett extra tydligt sätt berör webben. Dels är det skolverkets kurs "webbdesign", dels är det två lokala kurser på Nils Ericssonsgymnasiet som heter "Sidbeskrivningsspråk" och Webbserverteknik". Den första av dessa har en tonvikt på XHTML, CSS2 och XML. Den andra har sin tonvikt på PHP (eller ASP eller JSP) och databasdrivna webbsajter.

OBS! Denna artikel är fortfarande inte klar!

Denna artikel är under bearbetning. Sedan jag först skrev den har jag emellertid blivit varse att de kom att se bedrövlig ut i Internet Explorer (vad annars?) MSIE vidgar nämligen boxarna om en pre-tagg inte är tillräckligt bred. Det skall inte göras, utan innehållet skall i stället sticka utanför (sompå Firefox och Opera).

Tills vidare gäller dock att artikeln inte är färdig, och bör läsas med förstånd!

Till min förvåning har jag funnit att många av mina kollegor i Sverige inte lär eleverna koda sina sidor för hand, utan använder Frontpage (i bästa fall Go-Live eller Dreamweaver). Man tror att det är svårt att koda för hand. I denna artikel tänker jag visa att så inte är fallet. Men det har varit svårt att koda för hand. På generation-fyra tiden, när webbläsarna ännu bara hade lite stöd för CSS, när man tvingades använda javaskript för allt möjligt (som vi idag gör med CSS), när Netscape och Internet Explorer hade varsina tolkningar av CSS-kod, HTML-kod och olika syntax för JavaScript - då var det svårt. Själv kastade jag in handduken och använde ett WYSIWYG-program. I mitt fall föll valet på Netobjects Fusion.

Idag är läget annorlunda. För det första har dagens webbläsare bra stöd för CSS, för det andra har man alltmer börjat följa en och samma standard. Om man håller sig till de officiella standarderna från World Wide Web-consortium, så fungerar det till 90 %. Såvida du inte skall göra hemskt avancerade saker och vill få med dig minsta detalj i din design också på ökänt krångliga webbläsare som bara några få använder.

Varför koda för hand?

I december 2004, när detta skrivs, så har Netscape version fyra och Internet Explorer version fyra helt upphört att vara faktorer att räkna med. De som använder dessa webbläsare har faktiskt möjligheten - och skyldigheten - att byta upp sig. Det finns en annan grupp människor, som inte har denna möjlighet, nämligen de handikappade. I somliga fall skall man räkna med att de inte alls ser min sida utan får den uppläst för sig i en text-to-speech-browser eller tar del av den via blindskrift i speciella Braille-terminaler. Att anpassa sina sidor till dessa är som jag ser det en skyldighet utifrån en vettig människosyn.

Det andra skälet är att dagens webbsajter inte är statiska, utan är dynamiskt skapade i realtid från databaser eller via inhämtad data från XML-filer. När man börjar skapa sådana så måste man lik förbaskat börja koda för hand om man inte gjort det tidigare. Att lära ut webbteknik bara genom WYSIWYG-verktyg är som att lära bilmekaniker bara sköta ångdrivna motorer.

Varför blev det svårt?

I webbens barndom hade dess konstruktörer ingen direkt tanke på att hemsidor skulle ha en exakt grafisk form. Det hörde till själva iden att en hemsida skulle kunna se annorlunda ut i olika webbläsare. Detta gillade inte somliga hemsidesmakare och man låg på för att få större kontroll. Till en början löstes detta med allt fler HTML-taggar. Man använde <font> för att styra sina typsnitt, man använde <center> för att centrera texten, etc. Somliga taggar introducerades av Netscape och blev aldrig standardiserade. Dit hör vederstyggligheter som <spacer> och den för sin tid banbrytande, men idag utgångna taggen <layer>. Andra icke-standardiserade taggar kom från Microsoft, inklusive den för nybörjare så populära, men för seriös design förhatliga taggen <marquee>.

Taggarna och deras attribut blev många och fyllde olika funktioner. De äldsta stod för språklig logik: <p> för stycke ("paragraph"), <ul> för icke-numrerad lista, <h1> för rubriknivå ett, etc.

Dessa taggar kom att missbrukas. Man lärde sig att <p> skapade ett radavstånd mellan två stycken och använde den som dubbla radbrytningar, i stället för två <br>. Man kunde ha <h3> som sin huvudrubrik, i stället för <h1> för att slippa få alltför stor text. Osv.

Till detta kommer alla de taggar som bara har grafisk funktion: <b>, <i>, <center>, <font> och <u>. Om man ville ha understrukna rubriker på alla sina sidor till en början, men sedan ångrade sig, så blev det många ställen att ändra i koden för att ta bort alla <u>.

Men värst av allt var att man började använda tabeller för att skapa sidstruktur. Tabeller utan kantlinjer var ett tag det enda verktyg som stod till buds för att dela in sin sida i enkla områden som sidhuvud, sidfot och spalter. I webbens barndom när man ofta hade 640 pixlars skärmbredd var det inte så viktigt med spalter, idag finns det knappast en sajt som inte har minst två spalter. Många har ända upp till fyra.

Detaljkontroll över layouten fick man med osynliga bilder, vars enda uppgift var att ta upp lite plats. Ville man flytta en text några pixlar åt höger, så in med en osynlig gif-bild. Ville man ändra sin design på en sajt bestående av 40 sidor så hade man 40 sidors kod att pilla med. Undra på att vi använde WYSIWYG-verktyg med sajtövergripande justeringsmöjligheter!

Varför har det blivit lätt?

Tre små bokstäver: CSS. Idag kan vi separera form från funktion. HTML-koden säger vad det är CSS-koden säger hur det skall se ut. Detta innebär att kodningen blivit mycket lättare. För det första är den idag konsekvent. Man följer ett tydligare regelverk och håller inte på med en massa knepiga speciallösningar (förutom när man vill få MSIE att fatta samma sak som Mozilla, Firefox, Konqueror, Safari och Opera - vars CSS stöd i alla fallen är överlägset bättre än MSIEs - men detta är överkomligt och inte alls något att bli rädd för).

Idag måste man lära sig två saker: HTML, men mycket mindre HTML jämfört med några år sedan. Utvecklingen har skett via förenkling, inte som på 90-talet, via komplicering. Det andra man behöver lära sig är CSS, vilket kan verka avskräckande till en början, men CSS-kodning är mycket logiskt uppbyggd. Fattar man systemet kommer det att gå som en dans.

Ett exempel

Titta på följande två bilder. Den ena kommer från kristdemokraternas rikssida och den andra från ett system för lokalavdelningar som jag håller på att utveckla. Lägg märke till att det ser i stort sett likadant ut i båda fallen.

bild från kd-riks hemsida Nästan likadan bild från mitt system

Ta nu en titt på den HTML-kod som används på rikssidan för att skapa det du ser till vänster. Bli inte förskräckt och läs inte detaljerna. Detta är dålig kod, men tänk i din vånda på att jag ändå justerat koden från originalet för att öka läsbarheten!

<table cellpadding="0" cellspacing="0" border="0" width="100%" 
       summary="Denna tabell innehåller artikelpuffar.">
  <tr>
    <td width="5" valign="top" style="background-color: #000000;">
      <img src="images/box_topleft.gif" alt="Ruta">
    </td>
    <td width="150"
        style="color: #FFFFFF;
               background-color: #000000;
               font-family: Verdana; font-size: 12px;"
        align="center" height="20">
          <b><font color="#FFFFFF">Julkort</font></b>
    </td>
    <td width="5" valign="top" 
           style="background-color: #000000;" align="right">
      <img src="images/box_topright.gif" alt="Ruta">
    </td>
  </tr>
  <tr>
    <td valign="top" colspan="3" width="160">
      <table cellpadding="3" cellspacing="0" border="0" width="160">
        <tr>
           <td background="images/boxbg.gif" width="100%">
             <img src="/attachment/46/28346.jpg"
                   Alt="Bild p&#229; ett pepparkakshj&#228;rta" 
                   width="154" height="181" border="0">
           </td>
        </tr>
        <tr>
           <td background="images/boxbg.gif" width="100%">
             <p>Julens budskap når inte heller i år alla människor. 
               Solidaritet är att dela med sig en smula av sitt hjärta.
             </p>
             <p>
               <a href="/vykort/vykort_form.asp?Attachment_Id=28337">
                 <img src="http://foo.se/images/arrow.gif"
                      align="absmiddle" border="0"> Skicka julkort
               </a>
             </p>
              <p class="small">
                <a href="article.asp?Article_Id=9281" title="Julkort">
                  <img src="/images/arrow.gif" alt="" 
                          border="0" align="middle">
                    &nbsp;L&auml;s mer&nbsp;</a>
              </p>
           </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="background-color: #000000;" colspan="3">
      <img src="/images/pixel.gif" alt="" width="1"
              height="1" border="0">
    </td>
  </tr>
</table>
<br>

Jämför det med min kod:

<div class="hoger2">
  <h3>Julkort</h3>
    <p>
        <img src="http://foo.se/attachment/46/28346.jpg"
             alt="Bild på ett pepparkakshjärta"
             height="181" />
        Julens budskap når inte heller i år alla människor.
        Solidaritet är att dela med sig en smula av sitt 
        hjärta.<br />
        <br />
        <a href="http://foo.se/vykort/vykort_form.asp?Attachment_Id=28337">
          <img src="iconsandbgimages/arrow.gif" alt="pil" />
          Skicka julkort</a>
        <br />
        <br />
        <a href="http://foo.se/article.asp?Article_Id=9281">
          <img src="iconsandbgimages/arrow.gif" alt="pil" />
          Läs mer</a>
  </p>
</div>

Min kod är löjligt mycket enklare att skriva, eller hur?

Den är 60 % mindre - vilket innebär att servern belastas mindre, att bandbredden på uppkopplingen kan vara mindre, att sidan laddas av webbläsaren mycket snabbare - och att kodaren får mindre att skriva. Lägg därtill att hemsidan i skrivande stund innehåller inte mindre än åtta sådana här block, och du börjar förstå dumheten.

Dessutom är min kod mycket - oerhört mycket - bättre för visuellt handikappade.

Genomgång

Den groteska koden

Låt oss inte orda så mycket om den. Låt oss konstatera att de har lagt en tabell inuti en annan tabell (som i sin tur ligger i ytterligare en tabell som strukturerar hela sidan) och att flera tabellceller endast är platshållare för grafik. Dessutom har man använt CSS-kod föga intelligent. Man blandar ömsom CSS-kod och ömsom grafikstyrande HTML-kod. Och man använder sig av style-attributet för att lägga CSS-koden direkt i taggen. Eftersom hemsidan i skrivande stund rymmer åtta block, som sagt, så upprepas style-informationen åttafalt utöver det utdrag du såg ovan!

Min HTML-kod

Jag börjar med den anonyma taggen <div> som anger att här börjar ett område helt enkelt. Jag använder ingen tabell, därför att den information jag skall presentera inte är ämnad för tabeller. Om jag vill visa hur den aktuella ställningen är i elitserien så blir det en tabell. Men inte här.

Min div-tagg har attributet class="hoger2", som hänvisar till min CSS-kod. Jag återkommer till den.

Sedan följer en rubrik. Det är inte sidans huvudrubrik och inte heller en vanlig underrubrik. Jag väljer därför taggen <h3> för att markera rubrikens underordnade ställning (inte dess visuella storlek).

Sedan kommer det ett stycke, som börjar med taggen <p>, och som innehåller bild och text. Bilder är normalt att betrakta som en del av den löpande texten, så taggen <img> läggs inuti stycket. Alla bilder i detta sammanhang är 154 pixlar breda, så jag tar bort attributet "width" och flyttar breddangivelsen till CSS-koden. Höjden varierar från bild till bild, så det attributet ("height") får vara kvar.

Jag behåller attributet "alt", för det är viktig för visuellt handikappade.

Ny rad markeras med taggen <br> som här skrivs med XHTML-syntax: <br />.

Taggen <a> som anger själva länkarna är i stort sett oförändrade.

Så avslutas först taggen <p> och sist div-taggen. Enkel kod. Språkligt logisk kod. Bra för servern, bra för bandbredden, bra för webbläsarna, bra för handikappade. Bättre än någonsin det kommer bli i Frontpage.

CSS-koden

Men hur får jag då samma utseende som det blev i den groteska grötkoden? Svar, genom att jag i min CSS-fil har följande kod:

div.hoger2 {
    width: 158px;
    background: black;
    -moz-border-radius: 8px 8px 0px 0px;
    padding: 1px;
    padding-bottom: 1.2em;
    margin-bottom: 12px;
}
div.hoger2 h3 {
    color: white;
    font-family: Verdana, Lucida, Arial, Helvetica, sans-serif;
    font-size: 9.5pt;
    text-align: center;
    margin: 4px 0px;
}
div.hoger2 img {
    width: 154px;
    padding-bottom: 5px;
}
div.hoger2 a img {
    width: 13px;
    height: 13px;
    padding-bottom: 0px;
}
div.hoger2 p {
    background: white;
    font-size: small;
    margin: 0px;
    padding: 2px 2px 4px 2px;
    width: 154px;
}

Var detta lättare?

Någon kanske tycker att vad vi nu gjorde var att ersätta krånglig HTML-kod med lika krånglig CSS-kod. Om du inte stiftat bekanstskap med CSS förut, så bör du veta att detta inte är ett nybörjarexempel. Detta exempel är för att visa på kraften i att separera design från innehåll.

Du kan titta på denna sida för att se hur utseendet växer fram beroende på CSS-koden. Kom också ihåg att mitt exempel är en del av ett system med fler inställningar. Du kanske inte kan reproducera resultatet med en gång.

Betänk också att jag inte skrev koden rakt av, utan prövade mig fram med olika lösningar, tills jag hittade en som fungerade väl. (Den är också ännu bara prövad i Firefox och inte i MSIE.)

Div-elementets CSS

Låt oss gå igenom den. Först kommer det en klass-selektor. I HTML-koden skrev jag <div class="hoger2". Det motsvaras av "div.hoger2" i CSS-koden. Det block som sedan följer, omslutet av måsvingar, kommer alltså att styra hur dessa div-block beter sig.

Deras bredd blir 154 pixlar exklusive innermarginaler och kantlinjer. Bakgrunden sätts till svart.

Kantlinjen skapas av bakgrundsfärgen i sig, så jag hoppar över den angivelsen. Till kantlinjen kommer ett browserspecifikt tillägg. Nu handlar det alltså inte längre om webbstandard, men jag har valt att använda lösningen för att demonstrera kraften i CSS. Den kommande standarden för CSS, CSS 3, kommer att stödja rundade hörn. Mozilla och Firefox (och alla andra webbläsare som bygger på den s.k. "gecko-motorn") stödjer detta lite grann redan nu. För att vara artiga och tala om att nu kommer något icke-standardiserat, så börjar man med "-moz". Opera har sina egna liknande tillägg som börjar med "-op". Microsoft kör i vanlig ordning över alla andra och har inga liknande prefix för sina icke-standardiserade lösningar, såsom uttrycket "expression".

"-moz-border-radius: 8px 8px 0px 0px" anger att det översta vänstra och översta högra hörnet skall ha åtta pixlars rundning, samt ingen rundning alls på de nedre hörnen.

För denna demonstration av kraften i CSS är det inte nödvändigt att fixa runda hörn också i MSIE, men om jag skulle vilja göra det så fick det ske genom en åtta pixlar hög och 160 pixlar bred svart bakgrundsbild som bara upprepas enda gång: "background: url('blackimagewithroundcorners.png') no-repeat black;

Vi skapar en innermarginal på två pixlar med "padding: 2px".

För att få den svarta ytan i botten så gör vi den nedersta innermarginalen 1,2 radhöjder hög: "padding-bottom: 1.2em".

För att slippa en onödig <br> mellan våra div-element, så lägger vi in 12 pixlars bottenmarginal.

H3-taggen inuti div-taggen

Här använder jag en selektor för avkomlingar: "div.hoger h3", dvs. alla h3-taggar som finns inuti <div class="hoger2">. Just dessa h3-taggar skall ha:

Vit text (bakgrunden är ju svart): color: white;

Typsnittet skall vara Verdana. Om inte det finns så ta Lucida. Saknas det också pröva arial, osv. Skulle inget namngivet typsnitt vara installerat, så ta det standardtypsnitt systemet har för fonter utan seriffer.

Storlek 9½ punkter: "font-size: 9.5pt;".

Centrerad text - inte med taggen <center> - utan med CSS-koden "text-align: center".

Justera ned texten något och skapa lite utrymme under den: "margin: 4px (uppe och nere) 0px (höger och vänster);"

Styckets CSS-kod

Avkomlingsselektorn "div.hoger p", dvs. <p> inuti en <div class="hoger2">.

Nu vill vi ha tillbaka den vita bakgrunden: "background: white;".

Vi vill ha en extra liten storlek på texten: "font-size: x-small;"

För att upphäva p-taggens standardinställning med en rads avstånd till det som finns ovanför - så att det inte blir för stort utrymme mellan bilden och det svarta ovanför den, så skriver vi "margin: 0px;"

Vi specificerar också p-taggens bredd (exklusive padding) så att den täcker allt i bredd utom div-taggens kantlinje på en pixel: "width: 154px;"

Innermarginalen kommer att behålla den vita bakgrunden, och man räknar med den i den totala bredden: "padding: 2px (uppe) 2px (höger) 4px (nere) 2px (vänster)". Lägg märke till att man alltid går medurs och börjar längst upp.

Bildens CSS-kod

Vi hänvisar till bilden med en ny avkomlingssekektor: "div.hoger img". Detta motsvarar en <img> inuti <div class="hoger2">.

Bilden är i sig så bred så den behöver inga taggar som håller texten under sig, utan den kan ligga i texten utan problem. Däremot skall vi ha ett litet avstånd mellan den och texten som följer: "padding-bottom: 5px".

CSS-kodens placering

Denna CSS-kod placeras lämpligen i en extern stylesheet. Då kommer det bara hämtas en gång och varje ny gång man tittar på sidan så ligger det sedan cachat i surfarens dator. Spar bandbredd, spar serverbelastning, spar nedladdningstid. Alla vinner!

Nu kan man ha hur många sådana här div-block som helst. Skulle jag vilja ändra på dem, så ar jag ett ställe att ändra på. Alla block följer min enda ändring. Bekvämt och smidigt - och inte svårt.

Till råga på köpet kommer min sida troligen också få en högre placering på google och andra sökmotorer, då dess sakinnehåll lättare indexeras och ges högre prioritet.

Doctype

Vi är inte riktigt klara än. För att du skall få det förväntade resultatet måste sidan ha en korrekt DOCTYPE. Webbläsarna har två lägen: "Standard-följande" läge, och "härma gamla MSIE-buggar läge. Min kod kräver en doctype som försätter webbläsaren i standardföljande läge.

Mitt system bygger på XHTML, så jag använder:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Läs mer om detta på a list apart.

Artikelinfo
Publicerad:2004-12-19 15:15     Författare:itpastorn
Uppdaterad:2005-09-26 05:48     Ämne:Webbteknik
Uppdaterad: 2005-09-26 05:48    © Keryx