Blogg april 2007

28/4: Om xhtml 1.1 och annan standard

När det gäller att följa regler är jag motsägelsefull. Å ena sidan följer jag gärna regler som jag anser gör mitt och andras liv lättare att leva och irriterar mig på de som bryter mot dessa samma regler. Å andra sidan bryter jag gärna mot regler som jag anser gör mitt och andras liv svårare att leva.

T.ex. har jag brutit mot regeln att en blogg "uppdateras regelbundet, oftast dagligen", som jag formulerade 10 feb. 2007 i bloggen "Vad är en blogg?", helt enkelt eftersom jag inte haft något jag velat skriva om i bloggform, men har inte legat sömnlös en enda nanosekund för det!

Det betyder dock inte att jag varit overksam. Jag har lagt ganska mycket tid på att utveckla formen för den svenska ordbok jag utlovat ska publiceras på den här webbplatsen och kom också så långt med det att jag publicerat version 0.1-001 och version 0.1-002.

Efter ett tag var skillnaderna mellan ordbokssidorna och mina andra html-sidor så stora att jag insåg att en fullständig genomgång av allt jag hittills publicerat var nödvändig för att min webbplats även i fortsättningen skulle vara så homogen som jag vill att den ska vara.

Jag bedömde också att jag nu kunde tillräckligt mycket om html, xhtml, css och company för att kunna skriva html som skulle klara valideringen på validator.w3.org.

Om alla skrev html på exakt samma sätt skulle livet bli lättare att leva för t.ex. utvecklare av webbläsare, eftersom de skulle slippa ta hänsyn till olika dialekter av html, och för användare av dessa samma webbläsare, eftersom webbläsarna gissningsvis skulle vara mer tillförlitliga och kräva färre inställningar. (Att alla skulle skriva html på exakt samma sätt är förstås en lika stor utopi som fred på jorden eller glass till varje skolbarn som svarat rätt på en fråga.)

Om det ska vara just W3C:s standard eller någon annan standard som ska gälla kan man förstås fråga sig, men W3C verkar, såvitt jag med mina begränsade kunskaper kan bedöma, göra ett bra jobb, och förtjäna allt stöd de kan få.

Som ikonen längst ner till höger säger är den här sidan skriven med kod som klarat W3C:s validering för xhtml 1.1, den senaste färdigutvecklade versionen av html. Under de närmaste veckorna kommer också resten av sidorna på mkforlag.com att skrivas om med kod som klarar W3C:s validering för xhtml 1.1.

Om du inte läser källkod kommer du nog inte att märka mycket av just denna omskrivning. Däremot kommer du att gagnas av en del andra förändringar, t.ex. placeringen av fler länkar till vänster om den här texten, som gör att du inte behöver förflytta musen lika många meter, och något kortare nedladdningstider tack vare något mindre storlek på html-filerna (märkbart bara om du har en långsam anslutning till webben).

☼

För den som liksom jag är intresserad av att skriva kod med gällande xhtml 1.1 e.d. citerar jag nedan en del kod jag tror kan vara användbar även för andra. Jag inkluderar också några kommentarer jag tror kan vara till hjälp för nybörjare och kanske en och annan med viss erfarenhet.

Jag är ju som sagt själv allt annat än expert på det här. Jag gjorde mina första försök att skriva html med Word 2000 för drygt ett år sedan (hur väl det fungerade vet var och en som försökt; numera handskriver jag all kod, oftast i Dreamweaver 8), jag har under långa perioder av tiden sedan dess ägnat mig åt annat än att skriva html etc., och jag är allt annat än bra på logik (t.ex. begriper jag ännu inte mycket om hur man skriver javascript).

Att jag ändå lärt mig så mycket som jag gjort beror främst på att jag är språkvetare och så länge jag kan minnas varit mycket intresserad av allt som har med skrivet språk att göra. Som jag ser det är html mer likt ett språk än t.ex. matematik eller vad annat man kan jämföra med. Några exempel:

Starttaggar, t.ex. <p> och <div>, visar att något börjar, liksom stor bokstav visar att en mening börjar och indrag att ett stycke börjar. Sluttaggar, t.ex. </p> och </div>, visar att något slutar, liksom punkt visar att en mening slutar och ny rad att ett stycke slutar. Det går att utveckla resonemanget mycket mer, men jag nöjer med mig här med två exempel.

Nedanstående kod för sökning med google klarar W3C:s validering för xhtml 1.1. Text du behöver eller kan behöva byta ut eller ta bort är ljusbrun eller ljusblå.

<action="http://www.google.com/search" method="get">
<div>
<input type="text" name="q" value="" id="textbox" alt="" size="20" maxlength="300" />
<input type="submit" name="btnG" value="Google-sökning" class="v10c" />
<input type="hidden" name="domains" value="http://www.mkforlag.com" /><br />
<input type="radio" name="sitesearch" value="" id="radio-1" alt="" />
<label for="radio-1">www</label>
<input type="radio" name="sitesearch" value="http://www.mkforlag.com" id="radio-2" alt="" checked="checked" />
<label for="radio-2">mkforlag</label>
</div>
</form>

Gör så här om du vill använda koden:

Rad 3: Byt ut 20 mot önskad längd på textboxen och 300 mot önskad maxlängd på textboxen. Värdena anger såvitt jag förstår ungefär hur många bokstäver som får plats i boxen; t.ex. innebär värdet 20 att 21 bokstäver får plats.

Rad 4: class="v10c" kan tas bort. Jag har gett submit-knappen en klass, eftersom jag vill att texten på knappen ska vara i just Verdana 10 punkter grön för att harmonisera med den övriga layouten på min webbsida.

Rad 5 kan tas bort men behövs om du vill att besökare fortfarande ska kunna söka på just din webbplats utan att använda bakåtknappen efter att ha gjort en googlesökning. Om du väljer att behålla rad 5, byt ut mkforlag.com mot adressen till din webbplats. http://www. behöver du antagligen inte byta ut, men jag har markerat de bokstäverna också, eftersom det förekommer att webbadresser börjar på något annat sätt.

Rad 7: www kan bytas ut mot t.ex. "Sök hela webben", som Google valt att kalla radioknappen ifråga.

Rad 8: http://www.mkforlag.com: se kommentar till rad 5. Ta bort checked="checked" om du inte vill att radiknappen ska vara markerad redan när besökare anländer till din webbplats.

Rad 9: Byt ut mkforlag mot namnet på din webbplats e.d.

Nedanstående kod för inbäddning av en flashvideo i ett html-dokument klarar W3C:s validering för xhtml 1.1. Text du behöver byta ut är ljusbrun eller ljusblå.

<div>
<object type="application/x-shockwave-flash" data="mk_logo.swf" width="160" height="80">
<param name="movie" value="mk_logo.swf" />
</object>
</div>

Gör så här om du vill använda koden:

Rad 2 och 3: Byt ut mk_logo mot namnet på din swf-fil.

Rad 2: Byt ut 160 mot vidden i pixlar och 80 mot höjden i pixlar på din video.

Om det är något av det här du inte förstår, skicka ett mail eller använd kontaktformuläret (klicka på Kontakt längst upp på sidan för att komma dit). I den mån jag kan lovar jag att hjälpa dig.

Mer kod kommer i kommande bloggar!

29/4: Mer om xhtml-kod

Jag experimenterade lite med min kod för googlesökning och kunde konstatera följande:

Rad 3: name=" måste följas av q" för att det ska fungera. q står väl för övrigt för "question", närmare bestämt en fråga till google.

Rad 4: btnG kan bytas ut mot go eller ekvatorialguinea eller 0123456789 eller åiåaäeö eller liknande; det finns dock förmodligen tecken som inte fungerar. btnG står väl för övrigt för "button Go", närmare bestämt klicka här om du vill att googlesökningen ska utföras. åiåaäeö (å i åa ä e ä "och i ån är en ö") är ett citat från "Räggler å paschaser" av Gustav Fröding från 1895, närmare bestämt från anekdoten "Dumt fôlk", som kan läsas på The Dumt Fôlk Homepage.)

Rad 5: name=" måste följas av domains" för att det ska fungera.

Rad 6 och 8: name=" måste följas av sitesearch" för att det ska fungera.

Om det är något av det här du inte förstår, skicka ett mail eller använd kontaktformuläret (klicka på Kontakt längst upp på sidan för att komma dit). I den mån jag kan lovar jag att hjälpa dig.

30/4: Mer om xhtml-kod II

I bloggen den 28 april 2007 utlovades mer html-kod. Här kommer ett exempel jag tror kan vara användbart även för andra.

Hur man får en html-sida att alltid vara centrerad oavsett vilken upplösning det är på bildskärmen.

Skriv så här i en extern css-fil (text du kan byta ut är lila):

body {text-align: center; margin-top: 0px; margin-left: 0px;}
#main {position: relative; margin-top: 0px; margin-right: auto; margin-left: auto; width: 1000px; height: 570px;}
#content {position: absolute; top: 0px; left: 200px; width: 600px; height: 570px; text-align: justify;}

Rad 1: Så länge någon annan regel inte säger något annat centreras allt mellan <body> och </body> i html-dokument som är länkade till den här css-filen.

Rad 2-3: T.ex. centreras lagret main i vilket man sedan placerar alla andra lager etc., t.ex. lagret content.

Spara filen som "vill-till-mitten.css" e.d.

Skriv så här i head-delen av ett html-dokument, t.ex. precis före </head> (text du kan byta ut är lila):

<link href="vill-till-mitten.css" rel="stylesheet" type="text/css" />

Skriv så här i body-delen av ett html-dokument (text du kan byta ut är lila):

<div id="main">
<div id="content">Den här texten är alltid centrerad oavsett vilken upplösning det är på skärmen. Jag fyller på med mer text som inte fyller någon annan funktion än att visa vad som händer när texten blivit längre än ramen är bred.</div>
</div>

Spara dokumentet som "alltid-i-centrum.html" e.d.

Om det är något av det här du inte förstår, skicka ett mail eller använd kontaktformuläret (klicka på Kontakt längst upp på sidan för att komma dit). I den mån jag kan lovar jag att hjälpa dig.