Blogg maj 2007

1/5: Mer om xhtml-kod III

Attributet och värdet align="absmiddle" är inte giltig kod i html 4.01 transitional, html 4.01 strict, xhtml 1.0 transitional, xhtml 1.0 strict och xhtml 1.1. Det säger åtminstone en undersökning jag just gjorde på validator.w3.org. För att klara W3C:s validering kan du göra så här istället:

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

#mitt_lager {height: 100px; font-size: 20px;} .absolute_middle {position: relative; top: -45px;}

Spara filen som "absolute_middle.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="absolute_middle.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="mitt_lager"> <img src="min-bild.png" alt="" width="100" height="100" /> <span class="absolute_middle">min text</span> <img src="min-bild.png" alt="" width="100" height="100" /> </div>

Spara dokumentet som "bulls_eye.html" e.d.

Så här räknar du ut vad som ska stå mellan top: - och px;} i css-filen:

Bildens höjd (100) minus textens höjd (20) = 80 delat med 2 = 40 plus avståndet mellan ramens kant och bokstävernas baslinje (5) = 45.

Hur man tar reda på avståndet mellan ramens kant och bokstävernas baslinje i programmet just du använder vet du förhoppningsvis. I Dreamweaver 8 gör man så här: Välj designläge. Klicka på ramen med bilderna och texten. Peka på ramens kant. Subtrahera värdet inom parentes efter Height med det andra värdet efter Height.

Att räkna så här fungerar åtminstone ganska bra; en viss finjustering kan behövas om man använder t.ex. Å, Ä och Ö. Det finns förmodligen mer tillförlitliga sätt att räkna på. Är du bättre på matematik än jag har du förmodligen redan räknat ut vilka dessa sätt är.

☼

Den här koden kan förstås inte bara användas istället för align="absmiddle" utan också bl.a. till följande:

1. Placering av text mellan bilder i nivå med bildernas överkant. Gör så här: Ändra värdet mellan top: - och px;} i css-filen till 85. Så här räknar du ut det värdet: Bildens höjd (100) minus textens höjd (20) = 80 plus avståndet mellan ramens kant och bokstävernas baslinje (5) = 85.

2. Placering av text i det övre vänstra hörnet av den vänstra bilden. Gör så här: Skriv left: -100px; mellan -85px; och } i css-filen. Värdet mellan left: - och px;} är bildens bredd.

Det finns naturligtvis många fler möjligheter. Lycka till med ditt eget experimenterande! Skicka gärna ett mail om du har någon god idé, så lägger jag ut din kod i någon av mina framtida bloggar.

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.

PS: Jag kan till sist tipsa om att mellanslag kan tas bort i css-filer, vilket t.ex. jag föredrar. Om man vill kan man alltså skriva t.ex.:

#mitt_lager {height:100px;font-size:20px;}

6/5: Manual för nybörjare på webbpublicering 1

Alla html-filer på mkforlag.com är nu skrivna med gällande xhtml 1.1-kod (åtminstone enligt W3C:s valideringsverktyg; man kan nog utgå från att detta verktyg inte är ofelbart).

Det har varit en intressant och lärorik process som jag rekommenderar fler att ta sig igenom, framför allt de som liksom jag inte redan vet allt om html, css och c/o. Man tvingas nämligen ibland lösa problem man inte ens visste fanns eller hitta nya, ofta bättre lösningar på problem man redan löst för att klara valideringen.

Framför allt har jag placerat mer data i min css-fil, vilket har lett till mindre html-filer, vilket gagnar besökare på mkforlag.com i form av kortare nedladdningstider. Men jag har också passat på att genomföra en del andra förbättringar. Bl.a. finns nu en RSS-kanal, där information om och länkar till nya inlägg i bloggen, nya versioner av ordboken samt andra större förändringar på mkforlag.com kommer att publiceras.

Vet du inte vad RSS är, klicka på ikonen längst ner till vänster och se vad som händer. Använder du t.ex. Internet Explorer 7, Netscape 8 eller Opera 9 fungerar det som det är tänkt. Använder du någon annan webbläsare får du kanske upp en något svårbegripligare och något mindre användbar text. Hämta i så fall t.ex. Internet Explorer 7 från microsoft.com (det är gratis) och försök igen.

☼

Det är nu drygt ett år sedan jag först försökte skriva html. Jag tycker det är dags att rekapitulera och reflektera över vad jag hittills lärt mig om webbpublicering. Jag brukar göra så ibland när jag lär mig något nytt, och det brukar oftast ge ett gott resultat i form av t.ex. större säkerhet och nya insikter.

Jag kombinerar denna återresa med att försöka skriva den manual för nybörjare på webbpublicering jag själv velat ha för drygt ett år sedan, närmare bestämt en manual med a) korta förklaringar av precis vartenda tecken, ord etc. i html- och css-dokument, b) korta stycken kod man kan klippa ut och klistra in och lätt modifiera efter de behov och önskemål man har samt c) en adress (e-mail eller snailmail) eller ett telefonnummer till någon man kan få hjälp av om man kör fast.

Kanske finns det redan en sådan manual och en sådan service. Helt säker kan man aldrig vara, men jag har åtminstone inte träffat på detta på någon av de tusentals webbsidor jag besökt. (Däremot har jag förstås hittat mycket som är användbart för den som har vissa förkunskaper och försökt följa femtioelva mer eller mindre obegripliga, ofta helt eller delvis felaktiga råd från människor med större eller mindre okunskap om html, css och c/o.)

☼

Lektion 1: Ett fungerande html-dokument.

Öppna en texteditor, t.ex. Notepad alias Anteckningar. Det finns antagligen en genväg till programmet på adressen Startmenyn > Alla program > Systemverktyg > Notepad.

Har du ingen texteditor eller vill använda en som är mer avancerad än Notepad alias Anteckningar finns många alternativ att hämta gratis. De flesta av de jag provat fungerar inte som jag vill eller har enligt min mening för många olika funktioner. Den enda av de texteditorer jag provat jag är nöjd med är Notepad2 från flos-freeware.ch.

Skriv så här (text du kan byta ut är lila):

<html> <head> <title>Mitt dokument</title> </head> <body> Min text. </body> </html>

Spara filen som abc.html e.d.

Speciellt för Notepad: Välj "Filformat: Alla filer". Behåller du det förvalda "Filformat: Textdokument" kommer filen att sparas som en .txt-fil även om du skriver .html sist. I Notepad2 kan du behålla det förvalda alternativet "Filformat: All Files".

Öppna abc.html med Internet Explorer eller någon annan webbläsare. Om du gjort allt rätt bör det stå Min text i övre vänstra hörnet av bildskärmen (eller något annat om du valt att skriva något annat). Jag skriver "bör" eftersom det kanske finns någon webbläsare som kräver mer av ett html-dokument än de allra mest grundläggande delarna.

Kommentarer till de olika tecknen, förkortningarna och orden i dokumentet:

<html> 1a. visar att ett html-dokument börjar 1b. inleder dokument skrivna med "HTML", HyperText Markup Language ("hypertextuppmärkningsspråk"), som används för att berätta för webbläsare hur ett helt dokument eller en del av ett dokument ska visas, t.ex. när text ska börja på ny rad, och vilka egenskaper dokumentet eller delen av dokumentet ska ha, t.ex. att text är en hyperlänk till en annan plats i samma dokument eller till ett annat dokument

<head> 1a. visar att head-delen av ett html-dokument börjar 1b. kommer alltid efter <html> 1c. innehåller bl.a. sidans titel

<title> 1a. visar att title-delen av ett html-dokument börjar 1b. placeras alltid i head-delen av ett html-dokument

Mitt dokument 1a. titeln på dokumentet 1b. syns i webbläsare (längst ner i aktivitetsfältet och högst upp i tabbar) 1c. syns i längst upp i resultatposter från sökningar på internet med t.ex. google 1d. syns i favoriter-listan (om någon väljer att lägga till din sida där)

</title> 1. visar att title-delen av ett html-dokument slutar

</head> 1. visar att head-delen av ett html-dokument slutar

<body> 1a. visar att body-delen av ett html-dokument börjar 1b. placeras alltid efter </head> 1c. innehåller det författaren av html-sidan vill att besökare ska se eller interagera med

Min text 1a. html-sidans egentliga innehåll (text, bilder etc.) 1b. placeras alltid efter <body>

</body> 1. visar att body-delen av ett html-dokument slutar

</html> 1. visar att ett html-dokument slutar

starttagg 1a. kod som visar att något börjar, t.ex. <html>, <head>, <title> och <body> 1b. inleds med <, vänster vinkelparentes, och avslutas med >, höger vinkelparentes

sluttagg 1a. kod som visar att något slutar, t.ex. </title>, </head>, </body> och </html> 1b. inleds med <, vänster vinkelparentes, och avslutas med /, snedstreck, och >, höger vinkelparentes

☼

Anm. 24 juli 2008: "Manual för nybörjare på webbpublicering" har utvecklats till den något mindre anspråksfulla sidan Källkod. Hjälp om du kör fast, både med koden på sidan "Källkod" och annan kod, kan du dock fortfarande få. D.v.s. i den mån mina kunskaper räcker. Jag är absolut ingen expert på dataspråk men heller ingen fullständig nybörjare. De dataspråk jag kan bäst är xhtml 1.1 och css 2.1. Vidare är jag ganska bra på CorelDraw och CorelPhotoPaint. Slutligen kan jag förstås allt(!) om skriven svenska och rätt mycket om skriven engelska.

10/5: HTML eller XHTML?

Enligt vad som skrivs av mer eller mindre initierade människor på mer eller mindre vederhäftiga webbplatser kan frågan i rubriken inte besvaras annat än tvetydigt.

Det är åtminstone den slutsats jag drar efter att ha undersökt saken under ett par dagar.

Jag gör en googlesökning på html or xhtml. Toppsvaret sammanfattar nog det nuvarande läget ganska väl:

It seems like the eternal question amongst web developers: HTML or XHTML? Wherever I look there seems to be posts in forums raising the question (robertnyman.com).

En annan möjlig sammanfattning är (åtminstone som jag, som ännu betraktar mig som nybörjare på webbpublicering, upplever det): Bla, bla, bla, sakfel, html bu, xhtml bä, bla, bla, bla, sakfel, xhtml bu, html bä.

Några exempel:

My personal opinion is that the most important thing is that you choose a strict doctype, be it HTML or XHTML (robertnyman.com).

Let's pretend that you've migrated to XHTML -- probably XHTML 1.0 Transitional, unless you're one of those weird geek alpha designers who insist on doing everything with Strict DOCTYPEs (xml.com).

Is there any advantage to using HTML 4.01 over XHTML 1.0? There is no simple answer and the benefits you will gain are tied to how you’re using the language in a given situation (webstandards.org).

How Can HTML Be Improved? The simple answer is not much at all. [...] How Can XHTML Be Improved? With a proper understanding of how to use XML and XHTML, there are really no limitations on how far XHTML can progress (sitepoint.com).

Should I be using HTML or XHTML? [...] There's absolutely no reason why we can't use one or the other, as we see fit, on a case-by-case basis (htmlgoodies.com).

Well you can't really learn XHTML without learning HTML. They are essentially the same thing but XHTML follows stricter rules (boagworld.com).

XHTML is a bridge between HTML and XML. It is not a new 'language' but a method of integrating HTML into XML and is still HTML. Nothing has changed; you are still writing HTML markup (csscreator.com).

HTML 4.1 and XHTML 1.0 were both released in 1999 and are equal standards, niether better or worse than the other. HTML is fine to use and no reason not to (killersites.com).

Och så fortsätter det på webbsida efter webbsida. Om jag blir något av att försöka förstå argumentationen är det mer förvirrad än jag var innan jag försökte förstå argumentationen.

Någon helt igenom vederhäftig webbsida med vederhäftiga argument för och emot html och xhtml som dessutom är begriplig för noviser har åtminstone jag inte hittat. Tipsa gärna om du känner till någon sådan sida, så lägger jag genast ut en länk dit (om den enligt min mening håller måttet, vill säga).

Går det att bringa reda i röran? Jag kommer förvisso inte att lyckas, eftersom jag inte har tillräckliga kunskaper, men gör ändå ett försök.

Jag gör en ny googlesökning, denna gång på html xhtml differences för att försöka hitta begripliga argument för eller emot att använda den ena eller den andra versionen av html. Jag hittar bl.a. detta:

Some of the benefits of migrating to XHTML in general are:

Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules (described in the XHTML Modularization specification). These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents.

Alternate ways of accessing the Internet are constantly being introduced. The XHTML family is designed with general user agent interoperability in mind. Through a new user agent and document profiling mechanism, servers, proxies, and user agents will be able to perform best effort content transformation. Ultimately, it will be possible to develop XHTML-conforming content that is usable by any XHTML-conforming user agent (w3.org).

Så här beskrivs W3C:

The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C's mission is:

To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web (w3.org).

Till medlemmarna i W3C hör bl.a. Adobe, Apple, Canon, Google, HP, IBM, Microsoft, Nokia, Sun Microsystems och över 400 andra mer eller mindre kända organisationer. Förutsatt att dessa organisationer inte är medlemmar bara för syns skull gör detta faktum åtminstone mig övertygad om att W3C:s standard på sikt kommer att utvecklas och fungera väl, även om all standard för närvarande uppenbarligen inte alltid fungerar som avsett, och att det sannolikt är en god idé att utgå från W3C:s senaste standard om man är nybörjare, eftersom det sannolikt är den standarden som kommer att överleva och utvecklas. (Om någon lägger fram tillräckligt tunga sakskäl som talar mot denna bedömning är jag givetvis beredd att ändra uppfattning.)

☼

Vilka varianter av HTML används de facto i webbpublikationer? En undersökning av 100 slumpmässigt utvalda webbplatser gav följande resultat vid validering på validator.w3.org:

15 %	Godkänd
85 %	Inte godkänd

Antalet fel på de 85 webbplatser som inte klarat valideringen är mellan 1 och 268.

De dokumentstyper som enligt valideringen använts är:

31 %	Ingen dokumentstyp funnen
1 %	HTML 3.2
5 %	HTML 4.0 Transitional
26 %	HTML 4.01 Transitional
1 %	HTML 4.01 Frameset
1 %	HTML 4.01 Strict
29 %	XHTML 1.0 Transitional
5 %	XHTML 1.0 Strict
1 %	XHTML 1.1

Nästa steg i mitt blygsamma försök att bringa någon reda i frågan HTML eller XHTML? blir att undersöka vilka skillnader det skulle innebära för mig att försöka skriva HTML 4.01, den oftast använda varianten av HTML enligt undersökningen ovan, istället för att försöka skriva XHTML 1.1.

Jag kontrollerar att index.html på min webbplats är godkänd xhtml 1.1. enligt W3C:s validering. Jag ändrar dokumenttypen på filen ifråga till html 4.01 Transitional. För att klara valideringen behöver jag endast ta bort blanksteget och snedstrecket i slutet av fem taggar i head-delen av dokumentet.

För mig spelar det alltså just nu ingen större roll om jag använder HTML 4.01 eller XHTML 1.1. Eftersom mina html-sidor ser ut precis som jag vill i de webbläsare som enligt statistiken från stat.cliche.se använts av de som hittills besökt min webbplats (MS Internet Explorer, som många hävdar inte skulle klara av att visa XHTML 1.1-sidor korrekt, Netscape, Opera och Firefox) tänker jag dock fortsätta använda XHTML 1.1 tills någon eller något övertygar mig om att något annat är bättre.

Jag tror att det på sikt kommer att visa sig vara ett riktigt beslut. Jag har som sagt ännu inte tillräckligt stora kunskaper om webbpublicering för att kunna göra ett val grundat på kunskap utan får istället göra ett val grundat på känsla. Känslan säger XHTML 1.1. Om den kunskap jag senare kommer att skaffa kommer att bekräfta valet känslan uppmanade mig att göra återstår att se.

15/5: MK Förlags ordbok version 0.1-003?

Det kan "gå ganska snabbt att skapa en online ordbok som är minst lika bra som de som redan finns", skrev jag 18 februari 2007. Tanken var då att MK Förlags ordbok skulle växa betydligt snabbare än den hittills gjort. Ungefär nu borde den ha innehållit definitioner av ungefär 30.000 ord.

Så har det dock inte blivit. Istället för att skriva ordbok har jag satt mig in mer i hur man skriver html och css. Den processen pågår ännu, och jag kommer att låta den pågå så länge den leder till förbättringar av olika slag på min webbplats.

Jag gör med andra ord just nu en satsning på kvalitet istället för en satsning på kvantitet.

Ordboksprojektet är dock allt annat än dött. Så fort jag är färdig med satsningen på kvalitet kommer jag åter att satsa på kvantitet, framför allt i form av fler uppslagsord i ordboken.

20/5: Manual för nybörjare på webbpublicering 2?

Tyckte du att Lektion 1 var bra och vill ha mer i samma stil? Håll ut. Mer kommer! Just nu fyller jag en del luckor i min egen kunskap om webbpublicering. Och det finns en del luckor att fylla, så det kan dröja lite innan fler lektioner publiceras.

Jag tänker nämligen göra vad jag kan för att inte skriva exempel på kod som fungerar dåligt eller inte alls. Det finns redan alldeles för mycket sådan kod på femtioelva webbplatser. Av de femtioelvatusen alias åtminstone några tusen exempel på kod från dessa webbplatser jag provat har bara någon procent fungerat som utlovat. (Det finns förvisso femtioelva andra webbplatser med femtioelvatusen exempel på kod som fungerar; jag avser här endast kod just jag provat.)

I väntan på nästan lektion kan du a) skicka ett mail, där du beskriver vad du vill göra eller har problem med, så hjälper jag dig så gott jag kan eller b) besöka htmldog.com, en väldisponerad och faktadiger webbplats om webbpublicering, som hade varit för avancerad för mig när jag var nybörjare men som kanske fungerar för dig.

☼

Anm. 24 juli 2008: Se ovan.