Annons:
Etikettwebbdesign
Läst 12535 ggr
johan
2007-03-23 20:22

HTML - Grundstenen i webbdesign

Bild 1. Klicka för att öppna i full storlek.

Om du vill lära dig göra en egen hemsida är HTML en av sakerna du förr eller senare måste lära dig. Häng med så får du en enkel genomgång av de viktigaste koderna och flera bra tips om hur du lyckas!

HTML beskriver sidans innehåll

HTML är det språk som används för att beskriva en webbsidas innehåll, så som rubriker, text och bilder. Utseendet på en HTML-sida bör inte beskrivas med HTML utan med sin bästa kompis CSS, Cascading Style Sheets.

Webbdesign består av tre byggstenar, där HTML är den viktigaste.

Byggstenarna i webbdesign

Förkortningen HTML står för HyperText Markup Language. Markup är nyckelordet. Det betyder ”märka upp”, vilket är precis vad man gör med HTML. Man märker upp, eller beskriver, innehållet på sidan. Ibland används termen XHTML. X:et står för eXtensible. Exakt vad det betyder ligger utanför denna artikel, men all HTML i denna artikel är faktiskt egentligen XHTML.

Förr i tiden blandade man ofta innehåll och utseende i HTML-sidan, men det medför många nackdelar. Den som man märker som ägare till sin hemsida är att det är onödigt mycket jobb när man vill snygga till utseendet på sin hemsida.

CSS är ett så viktigt ämne att det får en helt egen artikel.

Hur skapar man HTML?

HTML-filer går att skapa i nästan vilket texteditor som helst. Alla Windows-datorer har ett program som heter Anteckningar (Notepad) som går att använda. För våra första exempel duger Anteckningar bra. Du hittar programmet under Start, Alla program, Tillbehör, Anteckningar.

Det bästa är ändå att du har ett speciellt program för att skapa dina hemsidor. Det finns flera bra, t ex Microsoft Expression Web, DreamWeaver, HomeSite, E Texteditor, TextMate eller Frontpage 2003. DreamWeaver och Expression Web är i särklass bäst på att bygga moderna webbplatser som följer webbstandardarder, men de är tyvärr ganska dyra.

Hej världen

Låt oss gå rakt på sak. Vi tittar på hur en enkel HTML-sida kan se ut. När vi bekantat oss lite med hur HTML ser ut ska vi gå in mer på detaljerna och se vad allt betyder. Om det ser ut som rena grekiskan behöver du inte oroa dig. Snart kommer allt att vara klart som korvspad.

Hej Världen!

Hej Världen!

Självklart måste den första sedan vi skapar vara en Hello World-sida.

Mina favoritsajter

Här är en lista på några av mina favoritsajter:

Jag kan skriva in ovanstående kod i Anteckningar och spara filen som HelloWorld.html. Därefter kan jag öppna filen i webbläsaren.

När vi tittar på sidan i webbläsare ser det ut så här:

Visning på hur sidan ser ut i webbläsaren.

Använda HTML-koder

Som du ser är den vanliga texten omsluten om koder, eller HTML-element som de också kallas. Varje kod början med <-tecken och slutar med >-tecken. På den andra raden ser du t ex , vilket betyder att vi ska börja ett HTML-dokument.

På sista raden ser du en kod där det står . Denna kod berättar att vi ska avsluta hela HTML-dokumentet. Lägg märke till att slut-koden innehåller ”</” istället för bara ”<” som startkoden gjorde.

Alla koder som påbörjas måste också avslutas. Alla koder ska skrivas med små bokstäver. Alla koder måste dessutom avslutas i samma ordning som de på börjades.

Detta är t ex ogiltigt:

här är fet text och understruken.

Koden måste avslutas innan koden . Detta är rätt:

här är fet text och understruken.

Attribut

Vissa HTML-koder har även attribut. Ett attribut är extra information till en kod. I exemplet ovan finns koder för att skapa länkar. Den heter . För att bestämma till vilken sida på Internet länken ska gå används attributet href=”adress”.

Alla attribut skrivs i formen namn=”värde”. Olika HTML-koder har olika attribut. Attribut som används väldigt ofta är t ex id, class och style. Style används för att bestämma utseende på element, t ex färger, teckensnitt, kantlinjer, avstånd och mycket mer. Vi återkommer till det senare. Även class och id används flitigt tillsammans med CSS.

Lägg märke till att alla attribut ska ha citationstecken runt värdet.

Sidans struktur

Nu när vi snabbt tittat på vad HTML-koder och attribut är vi redo att plocka fram förstoringsglaset och titta på sidans olika delar. Lite senare kommer vi lära gå ned mer på djupet om varje del, men än så länge klarar vi oss med en överblick.

Sidans absolut första rad är:

Denna fullständigt obegripliga rad talar om för webbläsaren vilken standard den måste rätta sig efter för att visa denna sida. Trots att jag jobbat med webbutveckling i över tio år har jag aldrig lyckats lära mig dessa utantill. Har du ett bra verktyg för att jobba med HTML så gör den detta åt dig. I annat fall brukar jag kopiera den från ett annat dokument.

Denna rad är dock väldigt viktigt! Den får nämligen Internet Explorer och andra webbläsare att bete sig på näst intill samma sätt.

Nästa rad är:

Som vi sa tidigare så är detta starten för hela dokumentet. Alla andra koder ligger mellan denna startkod och dess slut-kod som ju var .

Nästa block av kod är:

Hej Världen!

Jag har gjort indrag med tabb-tangenten för att lättare kunna se strukturen i koden.

Mellan startkoden och slutkoden lägger man metadata, eller information om sidan. Det enda man verkligen behöver ha här är ju koden som bestämmer sidans titel och är det som visas i titelraden på webbläsaren. Lägg märke till att även denna kod har en matchande slut-kod.</p> <p>Koderna <html>, <head> och <title>får bara finnas en enda gång i sidan.</p> <p>Koden <title> visas också på sökmotorer så försök alltid ha titlar som beskriver sidans innehåll. Det ökar chanserna att det är just din hemsida som lockar i sökresultatet.</p> <p><img src="/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/googletitle.jpg" alt="Hur title-elementet visas på Google" title="Hur title-elementet visas på Google" /></p> <h4 id="sidansinnehll">Sidans innehåll</h4> <p>Nu har vi kommit till blocket:</p> <p><body></p> <p>Detta markerar början på sidans innehåll. Mellan <body> och </body> läggs allt innehåll som ska visas på sidan. Innehållet kan bestå av allt möjligt, t ex rubriker, text, bilder, länkar, tabeller, listor, filmer. I princip vad du vill. Det får bara finnas ett enda <body>-element i sidan.</p> <p>Du kanske la märke till rubriken ”Hej världen” blev större än den andra texten? Rubrikkoden <h1> skapar en rubrik.</p> <h1>Hej Världen!</h1> <p>Det finns h1, h2, h3, h4, h5, och h6. ”H” står för Heading, vilket betyder just rubrik på engelska. <h1> är den största och viktigaste rubriker, <h2> är näst viktigast och så vidare. Mer om detta senare.</p> <p>För att visa helt vanlig text använder man koderna:</p> <p>Här är texten i stycke 1.</p> <p>Här är texten i stycke 2.</p> <p>Varje <p>…</p> är ett stycke text. P står för Paragraph, vilket betyder stycke på engelska.</p> <p>För att göra listor används koden:</p> <ul> <li>Punkt 1</li> <li>Punkt 2</li> </ul> <p>Denna kod blir en punktlista. <ul> står för Unordered List, dvs. Onumrerad lista. <li> står för List Item och markerar varje punkt i listan.</p> <p>Om man vill ha en numrerad lista använder man istället <ol>, vilket står för Ordered List.</p> <p>Nu återstår bara koden för länkar:</p> <p><a href=”http://www.ifokus.se”>iFokus</a></p> <p>Attributet href bestämmer vart man ska komma när man klickar på länken. Vad som ska visas som länktext skriver du mellan <a …> och </a>.</p> <p>Så där! Nu har kommit en bra bit på väg för att bli ett riktigt HTML-proffs. Nu ska vi gå vidare och fördjupa oss i rubriker, texter, länkar, bilder, tabeller och listor.</p> <h4 id="rubriker">Rubriker</h4> <p>På ett sätt är rubrikerna det viktigaste på sidan. Både det mänskliga ögat och sökmotorer som Google fäster extra stor vikt vid rubriker. Du bör använda dem väl.</p> <p>Titta på nedanstående sida. Visst är det ganska enkelt att avgöra vilka rubriker som är viktigast?</p> <p><img src="/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/htmlheadnings.jpg" alt="Exempel på hur rubriker skiljer sig åt" title="Exempel på hur rubriker skiljer sig åt" /></p> <p>Använd rubriker för att bestämma sidans disposition, alltså hur texten är organiserad med rubrik och underrubriker. Detta används flitigt i tidningar. Titta t ex på denna bild från DN.</p> <p><img src="/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/dnscreenshot.jpg" alt="Exempel på hur DN använder rubriker för att visa vad som är viktigaste nyheten" title="Exempel på hur DN använder rubriker för att visa vad som är viktigaste nyheten" /></p> <p>I DN:s exempel är ”Börsen ned tre dagar i rad” skapad med koden <h1>, dvs. den viktigaste rubriken, och de två mindre artiklarna använder koden <h2>.</p> <p>Rätt använda rubriker är bra ur flera synpunker:</p> <ul> <li><p><strong>Läsbarhet</strong>. Det räcker med att snabbt titta på sidan för att få en överblick över vad som är viktigast. Läs mer om hur du får dina texter lästa i artikeln <a href="/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb" rel="noopener noreferrer" target="_blank">Skriv texter som blir lästa</a>. </p></li> <li><p><strong>Sökbarhet</strong>. Sökmotorer som Google och MSN lägger mycket stor vikt vid rubriker. Försök att beskriv den kommande texten väl.</p></li> <li><p><strong>Tillgänglighet</strong>. Användare med funktionshinder, t ex nedsatt, syn har ofta hjälpmedel för att få sidor upplästa. Bra rubriknivåer hjälper till enormt mycket även i dessa sammanhang.</p></li> </ul> <h4 id="text">Text</h4> <p>Att skriva texter i HTML-koden är busenkelt. Varje stycke läggs inom <p> och </p>. Stycken får som standard en tom rad mellan varje stycke. Detta är något som vi kan justera med CSS, men det är <a href="/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" rel="noopener noreferrer" target="_blank">en helt annan historia</a>.</p> <p>Om du vill göra en radbrytning mitt i ett stycke kan du göra den med koden <br />. <br /> står för break, vilket betyder brytning. <br />-koden har inget innehåll och därför ingen slut-kod. I detta fall läggs därför slutkoden in direkt i startkoden. Det ser du på att den avslutas med ett /-tecken.</p> <p>Ibland kan det bli problem med våra svenska å, ä och ö. Vill man vara på den säkra sidan bör man skriva speciella koder för dessa tecken. De kallas entiteter.</p> <p><strong>Tecken</strong></p> <p><strong>Entitet</strong></p> <p>Å</p> <p>å</p> <p>Ä</p> <p>ä</p> <p>Ö</p> <p>ö</p> <p>Å</p> <p>Å</p> <p>Ä</p> <p>Ä</p> <p>Ö</p> <p>Ö</p> <p>Här kan du se en komplett lista på alla HTML-entiteter.</p> <h4 id="bilder">Bilder</h4> <p>Med bara text på sidan skulle det lätt bli lite väl tråkigt. Bilder livar alltid upp. I HTML visar du bilder med koden <img>. Img står för Image, vilket betyder just bild.</p> <p>Så här skulle det se ut för att visa bilden som heter logotyp.gif och ligger i mappen images.</p> <p><img src=”images/logotyp.gif” alt=”Min logotyp” /></p> <p>Attributet src (source/källa) bestämmer bildens filnamn. På webben fungerar bildformaten GIF, JPG och PNG.</p> <p>Attributet alt styr vilken text som ska visas om man inte har bildvisning påslaget, eller vilken text som ska läsas upp om har nedsatt syn och har en skärmläsare. Detta attribut är mycket viktigt! Även Google och andra sökmotorer läser detta attribut, vilket gör att även dina bilder blir sökbara.</p> <p>Det går också att ange attributen width och height för att bestämma bildens storlek. Det rekommenderas dock att man gör detta med CSS.</p> <p>Observera att <img>-koden inte har någon </img> som andra koder haft. Precis som med <br />-koden är detta för att <img>-koden inte har något eget innehåll. Därför avslutar man koden direkt med />.</p> <h4 id="lnkar">Länkar</h4> <p>Det som gör Internet så bra är att det sammanlänkar information från oändligt många källor. För att du ska kunna klicka på länkar och komma till en ny plats används <a>-koden.</p> <p>Så här ser en länk ut:</p> <p><a href=”http://www.sajten.com/”>Texten som ska vara klickbar</a></p> <p>Attributet href=”…” bestämmer var man ska hamna när man klickar på länken. Innehållet i koden, alltså det som står mellan <a …> och </a> är det som ska bli klickbart och visas i webbläsaren.</p> <p>Om du vill att länken ska öppnas i ett nytt fönster kan du använda attributet target=”_blank”.</p> <p>Om du vill göra en bild länkad kan du skriva en <img>-kod istället för text som ska bli klickbar. Det skulle kunna se ut så här:</p> <p><a href=”http://www.google.se/”><img src=”google-logga.gif” alt=”Google-logotyp” /></a></p> <h4 id="tabeller">Tabeller</h4> <p>Tabeller ska användas för att presentera information i tabellform, dvs. i rader och kolumner.</p> <p>Tabeller kan även användas för layout, men det rekommenderas att man <a href="/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" rel="noopener noreferrer" target="_blank">använder CSS</a> för detta istället för tabeller. I den här artikeln kommer du inte att kunna läsa något om layout-tabeller.</p> <p>Det finns flera HTML-koder som har med tabeller att göra. Så här ser koden för en tabell med rubriker ut:</p> <table> <tr> <th>Plats</th> <th>Stad</th> <th>Datum</th> </tr> <tr> <td>Debaser</td> <td>Stockholm</td> <td>22/4</td> </tr> <tr> <td>Trägårn</td> <td>Göteborg</td> <td>28/4</td> </tr> </table> <p>Så här ser tabellen ut i webbläsaren:</p> <p><img src="/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/tableexample.jpg" alt="Bild som visar hur tabellen ser ut" title="Bild som visar hur tabellen ser ut" /></p> <p>Alla tabeller startar med koden <table> och avslutas med </table>.</p> <p>För varje rad i tabellen används <tr> respektive </tr>. <tr> står för table row, dvs. tabellrad.</p> <p>Rubriker i tabeller skapas med koden <th>. Det som är så bra med <th>-koden är att den ser annorlunda ut än de andra cellerna. Det gör det tydligare att det är just rubriker. Detta är dessutom viktigt för sökmotorer och för funktionshindrade. På så sätt kan de särskilja rubrikerna från övriga rader i tabellen.</p> <p>Tabellceller skapas med koden <td>, vilket står för table data. Ju fler <td>-koder du har desto fler kolumner från tabellen.</p> <p>Om du vill göra tabellen bredare kan du använda attributet width=”bredd”. Så här skriver man gör att göra tabellen 400 pixlar bred:</p> <table width=”400”> … </table> <p>För att bestämma bredden på kolumner finns det två sätt. Det klassiska sättet är att ange width-attributet på <th>- eller <td>-koderna, så här:</p> <p><td width=”100”></td></p> <p>Eller om du vill göra en kolumn hälften så bred som hela tabellen kan du skriva:</p> <p><td width=”50%”></td></p> <p>Ett bättre sätt är dock att använda koderna <colgroup> och <col>. Då kan du nämligen bestämma bredderna för alla kolumner på en gång istället för att behöva göra det för varje rad. Då skulle tabellen se ut så här:</p> <table> **<colgroup>** **<col width=”200” />** **<col width=”200” />** **<col width=”100” />** **</colgroup>** <tr> <th>Plats</th> <th>Stad</th> <th>Datum</th> </tr> <tr> <td>Debaser</td> <td>Stockholm</td> <td>22/4</td> </tr> <tr> <td>Trägårn</td> <td>Göteborg</td> <td>28/4</td> </tr> </table> <p>Det allra bästa är dock att göra detta med CSS, vilket du kan läsa mer om i artikeln <a href="/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" rel="noopener noreferrer" target="_blank">Bättre webbplatser med CSS</a>.</p> <h4 id="listor">Listor</h4> <p>Listor är ett oslagbart verktyg för att göra texter mer lättlästa och för att strukturera saker. Det mest uppenbara användningsområdet är att skapa punktlistor eller numrerade listor.</p> <p>På moderna webbplatser används listor till mycket mer t ex navigation. Det är beskrivet mer detaljerat i <a href="/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" rel="noopener noreferrer" target="_blank">artikeln om CSS</a>.</p> <p>Vanliga punktlistor använder koden <ul>. Det står för Unordered list, vilket betyder onumrerad lista. För att visa varje punkt i listan används koden <li> som står för list item.</p> <p>Så här ser koden ut för en onumrerad lista:</p> <ul> <li>Dajmstrut</li> <li>Piggelin</li> <li>88:an</li> </ul> <p>Så här blir resultatet:</p> <p><img src="/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/bulletsexample.jpg" alt="Bild som visar hur punktlistan ser ut" title="Bild som visar hur punktlistan ser ut" /></p> <p>Du kan ha olika symboler på punkterna, t ex en rund ring eller en fyrkant. Det ställs in med attributet type. För att använda fyrkanter istället för runda punkter skriver du <ul type=”square”>. Detta är dock rekommenderat att göra med CSS istället för HTML.</p> <p>Numrerade listor görs på nästan exakt samma sätt. Enda skillnaden är att man använder koden <ol> istället för <ul>. Koden <li> är ändå precis densamma.</p> <h4 id="divkoden">Div-koden</h4> <p>Den sista koden vi ska titta närmare på är <div>-koden. <div>-koden har ett huvudsyfte. Det är att kapsla in delar av HTML-sidan i olika logiska grupper. Detta är det moderna och rekommenderade sättet att designa webbsidor. Koden <div> används för att gruppera innehåll och CSS används för att bestämma utseende för dessa.</p> <p>Ett exempel skulle kunna vara detta:</p> <div id=”Sidhuvud”><img src=”sidhuvud.gif” alt=”Sidhuvud” /></div> <div id=”Navigation”> <ul> <li><a href=”hem.html”>Hem</a></li> <li><a href=”om.html”>Om mig</a></li> <li><a href=”album.html”>Fotoalbum</a></li> </ul> </div> <div id=”Innehåll”> <h1>Välkommen</h1> <p>Detta är innehållet på min sida</p> </div> <div id=”Sidospalt”> <div id=”Login”> Loginruta </div> </div> <div id=”Sidfot”> ... </div> <p>Om du tittar lite extra på id-attributen på varje <div>-kod så kan du nog nästan föreställa dig hur den här sidan skulle se kunna se ut.</p> <p>Det bästa av allt är att den i princip skulle kunna se ut precis hur som helst! Anledningen är att koden ovan inte säger någonting alls om utseendet, utan har bara beskrivit strukturen på sidan. Med CSS kan vi designa sidan precis hur vi vill med färger, teckensnitt med mera, med mera! Mer om detta i <a href="/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" rel="noopener noreferrer" target="_blank">artikeln om CSS</a>!</p> <h4 id="relateradelnkar">Relaterade länkar</h4> <ul> <li><a href="/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06" rel="noopener noreferrer" target="_blank">Planera din hemsida </a></li> <li><a href="/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb" rel="noopener noreferrer" target="_blank">Skriv texter som blir lästa </a></li> <li><a href="/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" title="http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2" rel="noopener noreferrer" target="_blank">Bättre webbplatser med CSS </a></li> </ul> <h4 id="avjohan">Av: johan</h4> <ul> <li>[Personlig sida](javascript:void top.ShowProfile('johan'))</li> <li>[Kontakta](javascript:void top.ShowProfile('johan', 'Contact.aspx'))</li> </ul> <h4 id="datumfrpublicering">Datum för publicering</h4> <ul> <li>2007-03-23</li> </ul></div><div class="jsx-1738796669 jsx-3449298264 signature"><p>Mvh // Johan</p> <p><em>Född vid 334.00 PPM</em></p></div></div></div><div style="margin-left:0" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div><div style="margin-bottom:10px;min-height:300px" class="jsx-1781185669 ad"><div class="jsx-1781185669 ad-label">Annons:</div><div class="jsx-1781185669 ad-content"><div id="ifokus_mpu1" class="jsx-1781185669"></div></div></div></section><section class="jsx-2684761777"><div><div id="1"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/034/0342b58fbb92e9b3f772987443810f55/ifokus.jpg" loading="lazy" style="width:50px;height:50px" alt="Isak" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/3283/isak">Isak</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-03-24 20:29</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->1</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Mycket bra artiklar, men varför är koderna skrivna i xhtml när det står att det ska handla om html?</p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p><strong>Vänliga hälsningar</strong></p> <p><em>Alexander Isaksson</em></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="2"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="https://files.ifokus.se/u2/04f5394d058e5fbcd86901a3c63ad08b/64/" loading="lazy" style="width:50px;height:50px" alt="johan" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/1202/johan">johan</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-03-24 21:22</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->2</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>För att förenkla termerna lite. Jag tycker att man SKA använda XHTML för att göra rätt från början. Däremot säger man ju oftast bara HTML, så jag tyckte det kändes enklare.</p> <p>Den enda (nästan iaf) skillnaden är ju just att man måste avsluta alla element och avsluta dom i samma ordning som de påbörjades.</p> <p>Allt som man använder för XHTML fungerar även för HTML, men inte tvärtom.</p> <p>Kul att du gillar artiklarna. Det gör det roligare att fortsätta.</p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p>Mvh // Johan</p> <p><em>Född vid 334.00 PPM</em></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="3"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/034/0342b58fbb92e9b3f772987443810f55/ifokus.jpg" loading="lazy" style="width:50px;height:50px" alt="Isak" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/3283/isak">Isak</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-03-25 00:03</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->3</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Blev frälst efter att ha kläst några grundelement.  Men det är klart man kommer läsa här. Finns ju säkerligen någon man glömt bland åren.</p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p><strong>Vänliga hälsningar</strong></p> <p><em>Alexander Isaksson</em></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="4"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="/images/avatar.svg" loading="lazy" style="width:50px;height:50px" alt="Brittinger" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/6037/brittinger">Brittinger</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-03-25 12:59</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->4</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Jättebra, nästan så jag får gnugga ögonen, en kurs samtidigt som jag ska göra en hemsida, och bra skrivet så till o med tanter förstår. Jätemycket tack johan <img src="../tiny_mce/plugins/emotions/images/smiley-laughing.gif" alt="Skrattande" /></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="5"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/a3d/a3d716c7679d01dce757b74bd7138c36/patina-64.jpg" loading="lazy" style="width:50px;height:50px" alt="Runsviks" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/3882/runsviks">Runsviks</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-03-29 01:07</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->5</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Bra artikel och hoppas att många kommer på hur roligt det är att skapa hemsidor… nu fortsätter jag till nästa artikel, för nu får jag lust att bygga om min sida… ja, ska fundera<img src="../tiny_mce/plugins/emotions/images/smiley-smile.gif" alt="Glad" /> //Kristin</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="6"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/a3d/a3d716c7679d01dce757b74bd7138c36/patina-64.jpg" loading="lazy" style="width:50px;height:50px" alt="Runsviks" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/3882/runsviks">Runsviks</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-03-29 01:25</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->6</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Fråga; Jag jobbar i EditPlus och då lägger programet till <br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"></p> <p>Du har taggen: <br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p> <p>Vad är skillnaden? är det xhtml och html 4.0.</p> <p>och så ser jag att de sidor som jag öppnar i iframe har <br /> taggen <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> "ramlat bort". Bör jag lägga till den igen eller ska jag välja din tagg?</p> <p>Hälsningar Kristin</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div><div style="margin-bottom:10px;min-height:300px" class="jsx-1781185669 ad"><div class="jsx-1781185669 ad-label">Annons:</div><div class="jsx-1781185669 ad-content"><div id="ifokus_mpu1_2" class="jsx-1781185669"></div></div></div></section><section class="jsx-2684761777"><div><div id="7"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/cca/ccaaefbbd1919c57a79c359264897a2a/kaj-64x86.jpg" loading="lazy" style="width:50px;height:50px" alt="Kaj" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/1480/kaj">Kaj</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-04-19 18:22</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->7</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Under tillgängligeht och länkar kan jag bara lägga till att länkarna skall vara väl beskrivna så att webbläsare som läser upp texten för t ex synskadade skall få bra inforamtion om vad länken handlar om. Använd t ex inte texten <strong>Läs mer</strong> på länken efter som det inte säger någonting om var man hamnar. <br /> Vill man ändå ha det t ex en webbsida som har ett antal länkar som måste heta <strong>Läs mer</strong> så kan man lösa detta genom att lägga in en <strong>Title</strong> text i HRefen. Det som står i Title kommer då att läsas upp av de webläsare som kan läsa text åt synskadade. Dessutom kommer denna text att visas i en gul ruta då man hovrar över länken.</p> <p>EX: <br /> <a title="Denna text visas när du hovrar över länken" href=""http://www.sajten.com/"">Texten som ska vara klickbar</a></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="8"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="/images/avatar.svg" loading="lazy" style="width:50px;height:50px" alt="sweetii" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/32865/sweetii">sweetii</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2007-11-08 19:16</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->8</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>haha</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="9"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/a01/a019712132a383032c7b66d68e20449e/9b921beebde0a74ff0562e891232f0bb-640-480.jpg" loading="lazy" style="width:50px;height:50px" alt="Ellsa" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/12088/ellsa">Ellsa</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-01-26 13:48</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->9</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Bra artikel! Min hemsida <a href="http://www.elsahofverberg.info.se/" title="www.elsahofverberg.info.se" rel="noopener noreferrer" target="_blank"><strong>www.elsahofverberg.info.se</strong></a> är helt gjort i HTML.</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="10"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="/images/avatar-dead.svg" loading="lazy" style="width:50px;height:50px" alt="MangoPeperoniOwner" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/22951/mangopeperoniowner">MangoPeperoniOwner</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-11-02 13:31</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->10</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Jättebra artikel!</p> <p><strong>Lite grund - html som ni säkert redan visste:</strong></p> <p><strike>överstruken text</strike></p> <p><b><strong>tjock text</strong></b></p> <p><u>understruken text</u></p> <p><i><em>lutande/kursiv text</em></i></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="11"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="https://files.ifokus.se/u2/04f5394d058e5fbcd86901a3c63ad08b/64/" loading="lazy" style="width:50px;height:50px" alt="johan" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/1202/johan">johan</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-11-02 22:27</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->11</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p><span class="comment-mention" data-index="10">#10</span>: För fet stil ska man undvika b och istället använda <strong>, eftersom i den semantiska webben beskriver man inte utseende, utan innehåll. <b> säger bara fet stil, medan <strong> säger att man betonar något och rent visuellt presenteras det som fet stil.</p> <p>Istället för <i> ska man använda <em>.</p> <p>Understruken stil <u> ska man undvika helt och hållet, eftersom det är så förknippad med länkar.</p> <p>Bara för att vara lite strukturfascist. :)</p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p>Mvh // Johan</p> <p><em>Född vid 334.00 PPM</em></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="12"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="/images/avatar-dead.svg" loading="lazy" style="width:50px;height:50px" alt="guraknugen" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/23167/guraknugen">guraknugen</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-11-03 19:14</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->12</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p><a href="http://www.w3schools.com/default.asp" rel="noopener noreferrer" target="_blank">Här</a> kan man lära sig lite av varje också, fast på engelska, bland annat HTML, CSS, XML, XSLT, Javascript och en hel del annat. Man kan även ändra i exempelkod där och se vad som händer med resultatet direkt på sidan.</p> <p><a href="http://validator.w3.org/" rel="noopener noreferrer" target="_blank">Här</a> kan man kolla om en webbsida följer W3C-rekommendationerna (det är hit man kommer om man exempelvis i Opera högerklickar på en webbsida och väljer ”Kontrollera”). Får man ingan felmeddelanden här, ska sidan man testar fungera med de flesta webbläsarna på marknaden. Om inte, är det webbläsarens fel, inte sidans… Generellt i alla fall. Finns säkert undantag, som till allt annat.</p> <p>Själv har jag ingen hemsida numera, men jag hade en extremt simpel sådan för några år sedan skriven i vanlig HTML utan CSS… Aj aj aj…</p> <p>Ska göra en ny så småningom, men då blir det XML och XSLT. Borde funka bra för sidans enkla syfte. Kommer förmodligen att skriva den i en vanlig textredigerare med XML-stöd, troligen Emacs då jag är mycket förtjust i detta program sedan 1986 (då jag körde det på en PR1ME 750-minidator med operativsystemet Primos - ett operativsystem och en dator som få kommer ihåg idag).</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="13"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://www.gravatar.com/avatar/bc37bc837c058b36712b6b136f3687ec?s=64" loading="lazy" style="width:50px;height:50px" alt="Gnidde" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/12873/gnidde">Gnidde</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-12-11 19:45</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->13</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Intresant läsning. Måste försöka lära mig mer om HTML och allvad det innebär.</p></div><div class="jsx-1738796669 jsx-3449298264 signature"><p>Hälsningar Gnidde.</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div><div style="margin-bottom:10px;min-height:300px" class="jsx-1781185669 ad"><div class="jsx-1781185669 ad-label">Annons:</div><div class="jsx-1781185669 ad-content"><div id="ifokus_mpu1_3" class="jsx-1781185669"></div></div></div></section><section class="jsx-2684761777"><div><div id="14"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/9fba9dbcf124f85484322ced3d9b92d8/avatar_thumb-64x64.jpg?thumb=64x64&source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fe28%2Fe281caf87db677d2d02c88c1013a8332%2Favatar.jpg" loading="lazy" style="width:50px;height:50px" alt="Eostra" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/6442/eostra">Eostra</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-12-21 15:53</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->14</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Jättebra artikel! <img src="../tiny3/plugins/emotions/img/smiley-smile.gif" alt="Glad" title="Glad" /></p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="15"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/3cbb9181aa4db9d7a20fa74418668f85/tumblr-m359rgqzy01ru6vago1-500-large_thumb-64x64.jpg?thumb=64x64&source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fcfa%2Fcfa8565944aea8fe29522d59740a0faf%2Ftumblr-m359rgqzy01ru6vago1-500-large.jpg" loading="lazy" style="width:50px;height:50px" alt="Cuyi" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/8380/cuyi">Cuyi</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-12-22 21:50</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->15</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Jättebra artikel :) <br /> En fråga; när jag t. ex försöker sätta in en bild och sen kollar hur det ser ut så står det bara "Min, det är himla irriterande.. vill ju ha bilder inte text.. >'<</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="16"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/uploads/391/39145f4cff648e613369f86a84a2082a/eye-contact.png" loading="lazy" style="width:50px;height:50px" alt="Inkanyezi" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/11941/inkanyezi">Inkanyezi</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-12-22 22:03</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->16</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Framgår inte riktigt hur du "tittar". Det finns program som för att inte behöva ladda grafik har ett visningsläge som laddar fortare, men där bilderna bara visas som ramar; när den kommer upp på webben kommer bilden att finnas där.</p> <p>När man vill titta på en sida som man håller på och redigerar, så ska man så klart öppna i en webbläsare. Då ser man hur den ser ut i den webbläsaren.</p> <p>Man skriver alltså till exempel koden <img src="12345.png" alt="bild av huset"></p> <p>Då kommer, förutsatt att bilden 1345.png ligger i samma mapp som webbsidan, bilden att visas när du öppnar i webbläsaren. I editorn kan det däremot finnas en inställning som bara visar en ram för bilden och texten "bild av huset".</p> <p>Alltså inne i img-taggen ska det finnas en src, bildens källa, med bildfilens namn (och plats) inom citationstecken. Sedan bör man också ha en alt-tagg på samma sätt med en text för dem som inte kan se bilder. Alt-texten kommer att läsas upp för synskadade som tittar på sidan med talsyntes och den visas också för dem som tittar på sidan i webbläsare som inte är grafiska (Lynx exempelvis). Man kan utesluta alt-texten. Om du har tittat på en beskrivning där det står src="min bild" och du skriver det, så kommer naturligtvis inte någon bild att visas. Det måste vara bildfilen som src pekar på.</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><section class="jsx-2684761777"><div><div id="17"><div class="jsx-2684761777 "><div class="jsx-1772908323 root comment"><header class="jsx-3c40cd579ba45109 head"><div class="jsx-3c40cd579ba45109 avatar"><div class="jsx-3524429949 root"><div class="jsx-3524429949 avatar-container"><img src="http://ifokus-assets.se/3cbb9181aa4db9d7a20fa74418668f85/tumblr-m359rgqzy01ru6vago1-500-large_thumb-64x64.jpg?thumb=64x64&source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fcfa%2Fcfa8565944aea8fe29522d59740a0faf%2Ftumblr-m359rgqzy01ru6vago1-500-large.jpg" loading="lazy" style="width:50px;height:50px" alt="Cuyi" class="jsx-3524429949 avatar-img"/></div></div></div><div class="jsx-3c40cd579ba45109 meta"><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109 username"><a class="jsx-3c40cd579ba45109" href="/user/8380/cuyi">Cuyi</a></span></div><div class="jsx-3c40cd579ba45109 meta-row"><span class="jsx-3c40cd579ba45109">2008-12-23 16:28</span></div></div><div class="jsx-3c40cd579ba45109 likes"><div role="button" aria-label="Gilla (0 gilla-markeringar)" title="Gilla (0 gilla-markeringar)" aria-disabled="false" tabindex="0" class="jsx-3943312008 likes"><svg width="20" height="16" viewBox="0 0 20 16" fill="transparent" xmlns="http://www.w3.org/2000/svg" class="jsx-3943312008"><path d="M16.027 9.48255C12.7449 11.385 11.193 12.5756 10.2992 13.8762C10.1917 14.0358 10.0922 14.2008 10.0013 14.3704C9.92348 14.2292 9.82653 14.0557 9.70329 13.8762C8.68265 12.3901 6.75505 11.0931 3.97551 9.48255C1.81219 8.22858 0.84421 6.27226 1.38863 4.25012C1.58354 3.41653 2.04676 2.67 2.70716 2.12525C3.36755 1.58051 4.18857 1.26769 5.04402 1.23486C8.24727 1.23486 10.0018 5.77896 10.0018 5.77896C10.0018 5.77896 11.5942 2.34085 12.9291 1.75055C13.5458 1.40123 14.245 1.22358 14.9537 1.23606C15.8091 1.26889 16.6301 1.58171 17.2905 2.12645C17.9509 2.6712 18.4142 3.41772 18.6091 4.25132C19.1583 6.27225 18.1915 8.22858 16.027 9.48255Z" stroke="#017eb3" class="jsx-3943312008"></path></svg><span class="jsx-3943312008 likes-count">0</span></div></div></header><div class="jsx-1772908323 "><div class="jsx-1738796669 jsx-3449298264 message-body message-body-comment"><span class="jsx-1738796669 jsx-3449298264 index">#<!-- -->17</span><div class="jsx-1738796669 jsx-3449298264 body user-background"><div class="jsx-1738796669 jsx-3449298264"><p>Ok, tack för att du tog dig tid atg svara :) <br /> Änsålänge har jag ju inte lagt upp själva hemsidan men jag jag skriver lite på den.. tror jag förstår. Tack!</p></div></div></div><div style="margin-left:40px" class="jsx-1772908323 comment-buttons"><span class="jsx-1772908323"></span><button type="button" style="color:#005f86" class="jsx-863189090 ">Svara</button></div></div></div></div></div></div></section><div class="jsx-8d952b170aa82f59 comment-login"><button class="jsx-2505901327 ">Logga in för att kommentera!</button></div><a href="#site-top" class="jsx-2684761777 scroll-to-top">Upp till toppen</a><div style="margin-bottom:10px;min-height:300px" class="jsx-1781185669 ad"><div class="jsx-1781185669 ad-label">Annons:</div><div class="jsx-1781185669 ad-content"><div id="ifokus_mpu1_4" class="jsx-1781185669"></div></div></div></div></article><div style="height:100px"></div><div> </div></div></div></div></main></div><aside class="jsx-3713795938 sidebar sidebar-visible"><div class="jsx-3713795938 sidebar-content"><aside class="jsx-7c0db07d1cc8c84e"><div role="tablist" aria-label="Aktiv visning" class="jsx-2447797273 segments"><div role="tab" aria-selected="true" tabindex="0" class="jsx-2447797273 item selected">Bli medlem</div><div role="tab" aria-selected="false" tabindex="0" class="jsx-2447797273 item ">Våra sajter</div></div><div class="jsx-7c0db07d1cc8c84e content"><h2 class="jsx-7c0db07d1cc8c84e blue-text content-heading">Hundratals sajter med samma medlemskap</h2><p class="jsx-7c0db07d1cc8c84e"><em class="jsx-7c0db07d1cc8c84e">Skapa ett gratis konto och delta i diskussionerna.</em></p><div role="tablist" aria-label="Aktiv visning" class="jsx-2447797273 segments"><div role="tab" aria-selected="true" tabindex="0" class="jsx-2447797273 item selected">Logga in</div><div role="tab" aria-selected="false" tabindex="0" class="jsx-2447797273 item ">Skapa konto</div></div><form class="jsx-1311562031"><div class="jsx-2270570846 form-field"><label class="jsx-2270570846">Användarnamn</label><input type="text" required="" autoComplete="username" placeholder="Användarnamn" id="username" aria-label="Användarnamn" class="jsx-1012317222 " value=""/></div><div class="jsx-2270570846 form-field"><label class="jsx-2270570846">Lösenord</label><input type="password" required="" autoComplete="current-password" placeholder="Lösenord" id="password" aria-label="Lösenord" class="jsx-1012317222 " value=""/></div><div class="jsx-1489059234 form-field-checkbox"><label class="jsx-1489059234"><div class="jsx-1489059234 checkbox"><input type="checkbox" class="jsx-1489059234 " checked=""/><span class="jsx-1489059234"></span></div>Kom ihåg mig</label></div><div class="jsx-1311562031"><button type="submit" class="jsx-2505901327 ">Logga in</button></div></form><div class="jsx-7c0db07d1cc8c84e footer"><p class="jsx-7c0db07d1cc8c84e">Inte medlem?<span role="button" class="jsx-7c0db07d1cc8c84e link"> <!-- -->Bli medlem!<!-- --> </span></p><p class="jsx-7c0db07d1cc8c84e"><a class="jsx-7c0db07d1cc8c84e" href="/user/forgot-password">Glömt lösenord?</a></p></div></div></aside><div style="min-height:270px" class="jsx-3713795938"><div style="min-height:250px" class="jsx-1781185669 ad"><div class="jsx-1781185669 ad-label">Annons:</div><div class="jsx-1781185669 ad-content"><div id="ifokus_tws1_2" class="jsx-1781185669"></div></div></div></div></div></aside></div><div id="sitemap" class="jsx-1142688426 sitemap"></div><footer class="jsx-1142688426"><nav class="jsx-1142688426"><a href="https://www.ifokus.se/about" class="jsx-1142688426">Om iFokus</a><a href="https://blog.ifokus.se" class="jsx-1142688426">Bloggen</a><a href="https://support.ifokus.se" class="jsx-1142688426">Support</a><a href="https://www.ifokus.se/about/user_agreement" class="jsx-1142688426">Användaravtal</a><a href="https://www.ifokus.se/about/rules_of_conduct" class="jsx-1142688426">Skrivregler</a></nav><div class="jsx-1142688426 branding-bg"><div class="jsx-1142688426 branding"><img src="https://www.ifokus.se/images/ifokus-text-blue.svg" style="width:106px;height:23px" alt="Logotyp" class="jsx-1142688426"/><span class="jsx-1142688426 byline">Sveriges största intressenätverk</span></div></div><div class="jsx-1142688426 copyright">© Copyright <!-- -->2024<!-- --> <!-- -->iFokus</div></footer><div id="toolbar" class="jsx-3739181486"><button title="Upp till toppen" class="jsx-3739181486 img-button"><img src="/images/up.svg" style="width:20px;height:20px" alt="Upp till toppen" class="jsx-3739181486"/></button></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"discussionId":309506,"discussionResponse":{"id":309506,"accessRequired":10,"discussion":{"id":309506,"siteId":1201,"userId":1202,"accessRequired":10,"title":"HTML - Grundstenen i webbdesign","abstractText":"Om du vill lära dig göra en egen hemsida är HTML en av\nsakerna du förr eller senare måste lära dig. Häng med så får du en enkel genomgång av de viktigaste koderna och flera bra tips om hur du lyckas!","tags":["webbdesign"],"readCounter":12535,"postCount":18,"importance":0,"sticky":false,"publishedAt":1174677722,"commentedAt":1230046111},"posts":[{"id":4506985,"discussionId":309506,"userId":1202,"markdown":null,"html":"\u003ch4 id=\"htmlbeskriversidansinnehll\"\u003eHTML beskriver sidans innehåll\u003c/h4\u003e\n\u003cp\u003eHTML är det språk som används för att \u003cstrong\u003ebeskriva en webbsidas innehåll\u003c/strong\u003e, så som rubriker, text och bilder. Utseendet på en HTML-sida bör inte beskrivas med HTML utan med sin bästa kompis \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eCSS\u003c/a\u003e, \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eCascading Style Sheets\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eWebbdesign består av tre byggstenar, där HTML är den viktigaste.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/htmlbyggblock.gif\" alt=\"Byggstenarna i webbdesign\" title=\"Byggstenarna i webbdesign\" /\u003e\u003c/p\u003e\n\u003cp\u003eFörkortningen HTML står för HyperText Markup Language. Markup är nyckelordet. Det betyder ”märka upp”, vilket är precis vad man gör med HTML. Man märker upp, eller beskriver, innehållet på sidan. Ibland används termen XHTML. X:et står för eXtensible. Exakt vad det betyder ligger utanför denna artikel, men all HTML i denna artikel är faktiskt egentligen XHTML.\u003c/p\u003e\n\u003cp\u003eFörr i tiden blandade man ofta innehåll och utseende i HTML-sidan, men det medför många nackdelar. Den som man märker som ägare till sin hemsida är att det är onödigt mycket jobb när man vill snygga till utseendet på sin hemsida.\u003c/p\u003e\n\u003cp\u003eCSS är ett så viktigt ämne att det får \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003een helt egen artikel\u003c/a\u003e.\u003c/p\u003e\n\u003ch4 id=\"hurskaparmanhtml\"\u003eHur skapar man HTML?\u003c/h4\u003e\n\u003cp\u003eHTML-filer går att skapa i nästan vilket texteditor som helst. Alla Windows-datorer har ett program som heter Anteckningar (Notepad) som går att använda. För våra första exempel duger Anteckningar bra. Du hittar programmet under Start, Alla program, Tillbehör, Anteckningar.\u003c/p\u003e\n\u003cp\u003eDet bästa är ändå att du har ett speciellt program för att skapa dina hemsidor. Det finns flera bra, t ex Microsoft Expression Web, DreamWeaver, HomeSite, E Texteditor, TextMate eller Frontpage 2003. DreamWeaver och Expression Web är i särklass bäst på att bygga moderna webbplatser som följer webbstandardarder, men de är tyvärr ganska dyra.\u003c/p\u003e\n\u003ch4 id=\"hejvrlden\"\u003eHej världen\u003c/h4\u003e\n\u003cp\u003eLåt oss gå rakt på sak. Vi tittar på hur en enkel HTML-sida kan se ut. När vi bekantat oss lite med hur HTML ser ut ska vi gå in mer på detaljerna och se vad allt betyder. Om det ser ut som rena grekiskan behöver du inte oroa dig. Snart kommer allt att vara klart som korvspad.\u003c/p\u003e\n\u003cp\u003e\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \n\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003chtml\u003e\u003c/p\u003e\n\u003cp\u003e\u003chead\u003e\u003c/p\u003e\n\u003cp\u003e\u003ctitle\u003eHej Världen!\u003c/title\u003e\u003c/p\u003e\n\u003cp\u003e\u003c/head\u003e\u003c/p\u003e\n\u003cp\u003e\u003cbody\u003e\u003c/p\u003e\n\u003ch1\u003eHej Världen!\u003c/h1\u003e\n\u003cp\u003eSjälvklart måste den första sedan vi skapar vara en\n\nHello World-sida. \u003c/p\u003e\n\u003ch2\u003eMina favoritsajter\u003c/h2\u003e\n\u003cp\u003eHär är en lista på några av mina favoritsajter:\u003c/p\u003e\n\u003cul\u003e\n\n\u003cli\u003e\n\n\u003ca href=”http://www.ifokus.se”\u003eiFokus\u003c/a\u003e\n\n\u003c/li\u003e\n\n\u003cli\u003e\n\n\u003ca href=”http://www.google.se”\u003eGoogle\u003c/a\u003e\n\n\u003c/li\u003e\n\n\u003cli\u003e\n\n\u003ca href=”http://www.svd.se”\u003eSvenska Dagbladet\u003c/a\u003e\n\n\u003c/li\u003e\n\n\u003c/ul\u003e\n\u003cp\u003e\u003c/body\u003e\u003c/p\u003e\n\u003cp\u003e\u003c/html\u003e\u003c/p\u003e\n\u003cp\u003eJag kan skriva in ovanstående kod i Anteckningar och spara filen som HelloWorld.html. Därefter kan jag öppna filen i webbläsaren.\u003c/p\u003e\n\u003cp\u003eNär vi tittar på sidan i webbläsare ser det ut så här:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/helloworld.jpg\" alt=\"Visning på hur sidan ser ut i webbläsaren.\" title=\"Visning på hur sidan ser ut i webbläsaren.\" /\u003e\u003c/p\u003e\n\u003ch4 id=\"anvndahtmlkoder\"\u003eAnvända HTML-koder\u003c/h4\u003e\n\u003cp\u003eSom du ser är den vanliga texten omsluten om koder, eller HTML-element som de också kallas. Varje kod början med \u003c-tecken och slutar med \u003e-tecken. På den andra raden ser du t ex \u003chtml\u003e, vilket betyder att vi ska börja ett HTML-dokument.\u003c/p\u003e\n\u003cp\u003ePå sista raden ser du en kod där det står \u003c/html\u003e. Denna kod berättar att vi ska avsluta hela HTML-dokumentet. Lägg märke till att slut-koden innehåller ”\u0026lt;/” istället för bara ”\u0026lt;” som startkoden gjorde.\u003c/p\u003e\n\u003cp\u003eAlla koder som påbörjas måste också avslutas. Alla koder ska skrivas med små bokstäver. Alla koder måste dessutom avslutas i samma ordning som de på börjades.\u003c/p\u003e\n\u003cp\u003eDetta är t ex ogiltigt:\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ehär är fet text \u003cem\u003eoch understruken\u003c/strong\u003e\u003c/em\u003e.\u003c/p\u003e\n\u003cp\u003eKoden \u003cem\u003e måste avslutas innan koden \u003cstrong\u003e. Detta är rätt:\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ehär är fet text \u003cem\u003eoch understruken\u003c/em\u003e\u003c/strong\u003e.\u003c/p\u003e\n\u003ch4 id=\"attribut\"\u003eAttribut\u003c/h4\u003e\n\u003cp\u003eVissa HTML-koder har även \u003cem\u003eattribut\u003c/em\u003e. Ett attribut är extra information till en kod. I exemplet ovan finns koder för att skapa länkar. Den heter \u003ca\u003e. För att bestämma till vilken sida på Internet länken ska gå används attributet href=”adress”.\u003c/p\u003e\n\u003cp\u003eAlla attribut skrivs i formen namn=”värde”. Olika HTML-koder har olika attribut. Attribut som används väldigt ofta är t ex id, class och style. Style används för att bestämma utseende på element, t ex färger, teckensnitt, kantlinjer, avstånd och mycket mer. Vi återkommer till det senare. Även class och id används flitigt tillsammans med CSS.\u003c/p\u003e\n\u003cp\u003eLägg märke till att alla attribut ska ha citationstecken runt värdet.\u003c/p\u003e\n\u003ch4 id=\"sidansstruktur\"\u003eSidans struktur\u003c/h4\u003e\n\u003cp\u003eNu när vi snabbt tittat på vad HTML-koder och attribut är vi redo att plocka fram förstoringsglaset och titta på sidans olika delar. Lite senare kommer vi lära gå ned mer på djupet om varje del, men än så länge klarar vi oss med en överblick.\u003c/p\u003e\n\u003cp\u003eSidans absolut första rad är:\u003c/p\u003e\n\u003cp\u003e\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \n\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"\u003e\u003c/p\u003e\n\u003cp\u003eDenna fullständigt obegripliga rad talar om för webbläsaren vilken standard den måste rätta sig efter för att visa denna sida. Trots att jag jobbat med webbutveckling i över tio år har jag aldrig lyckats lära mig dessa utantill. Har du ett bra verktyg för att jobba med HTML så gör den detta åt dig. I annat fall brukar jag kopiera den från ett annat dokument.\u003c/p\u003e\n\u003cp\u003eDenna rad är dock väldigt viktigt! Den får nämligen Internet Explorer och andra webbläsare att bete sig på näst intill samma sätt.\u003c/p\u003e\n\u003cp\u003eNästa rad är:\u003c/p\u003e\n\u003cp\u003e\u003chtml\u003e\u003c/p\u003e\n\u003cp\u003eSom vi sa tidigare så är detta starten för hela dokumentet. Alla andra koder ligger mellan denna startkod och dess slut-kod som ju var \u003c/html\u003e.\u003c/p\u003e\n\u003cp\u003eNästa block av kod är:\u003c/p\u003e\n\u003cp\u003e\u003chead\u003e\u003c/p\u003e\n\u003cp\u003e\u003ctitle\u003eHej Världen!\u003c/title\u003e\u003c/p\u003e\n\u003cp\u003e\u003c/head\u003e\u003c/p\u003e\n\u003cp\u003eJag har gjort indrag med tabb-tangenten för att lättare kunna se strukturen i koden.\u003c/p\u003e\n\u003cp\u003eMellan startkoden \u003chead\u003e och slutkoden \u003c/head\u003e lägger man metadata, eller information om sidan. Det enda man verkligen behöver ha här är ju koden \u003ctitle\u003e som bestämmer sidans titel och är det som visas i titelraden på webbläsaren. Lägg märke till att även denna kod har en matchande slut-kod.\u003c/p\u003e\n\u003cp\u003eKoderna \u003chtml\u003e, \u003chead\u003e och \u003ctitle\u003efår bara finnas en enda gång i sidan.\u003c/p\u003e\n\u003cp\u003eKoden \u003ctitle\u003e visas också på sökmotorer så försök alltid ha titlar som beskriver sidans innehåll. Det ökar chanserna att det är just din hemsida som lockar i sökresultatet.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/googletitle.jpg\" alt=\"Hur title-elementet visas på Google\" title=\"Hur title-elementet visas på Google\" /\u003e\u003c/p\u003e\n\u003ch4 id=\"sidansinnehll\"\u003eSidans innehåll\u003c/h4\u003e\n\u003cp\u003eNu har vi kommit till blocket:\u003c/p\u003e\n\u003cp\u003e\u003cbody\u003e\u003c/p\u003e\n\u003cp\u003eDetta markerar början på sidans innehåll. Mellan \u003cbody\u003e och \u003c/body\u003e läggs allt innehåll som ska visas på sidan. Innehållet kan bestå av allt möjligt, t ex rubriker, text, bilder, länkar, tabeller, listor, filmer. I princip vad du vill. Det får bara finnas ett enda \u003cbody\u003e-element i sidan.\u003c/p\u003e\n\u003cp\u003eDu kanske la märke till rubriken ”Hej världen” blev större än den andra texten? Rubrikkoden \u003ch1\u003e skapar en rubrik.\u003c/p\u003e\n\u003ch1\u003eHej Världen!\u003c/h1\u003e\n\u003cp\u003eDet finns h1, h2, h3, h4, h5, och h6. ”H” står för Heading, vilket betyder just rubrik på engelska. \u003ch1\u003e är den största och viktigaste rubriker, \u003ch2\u003e är näst viktigast och så vidare. Mer om detta senare.\u003c/p\u003e\n\u003cp\u003eFör att visa helt vanlig text använder man koderna:\u003c/p\u003e\n\u003cp\u003eHär är texten i stycke 1.\u003c/p\u003e\n\u003cp\u003eHär är texten i stycke 2.\u003c/p\u003e\n\u003cp\u003eVarje \u003cp\u003e…\u003c/p\u003e är ett stycke text. P står för Paragraph, vilket betyder stycke på engelska.\u003c/p\u003e\n\u003cp\u003eFör att göra listor används koden:\u003c/p\u003e\n\u003cul\u003e\n\n\u003cli\u003ePunkt 1\u003c/li\u003e\n\n\u003cli\u003ePunkt 2\u003c/li\u003e\n\n\u003c/ul\u003e\n\u003cp\u003eDenna kod blir en punktlista. \u003cul\u003e står för Unordered List, dvs. Onumrerad lista. \u003cli\u003e står för List Item och markerar varje punkt i listan.\u003c/p\u003e\n\u003cp\u003eOm man vill ha en numrerad lista använder man istället \u003col\u003e, vilket står för Ordered List.\u003c/p\u003e\n\u003cp\u003eNu återstår bara koden för länkar:\u003c/p\u003e\n\u003cp\u003e\u003ca href=”http://www.ifokus.se”\u003eiFokus\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eAttributet href bestämmer vart man ska komma när man klickar på länken. Vad som ska visas som länktext skriver du mellan \u003ca …\u003e och \u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eSå där! Nu har kommit en bra bit på väg för att bli ett riktigt HTML-proffs. Nu ska vi gå vidare och fördjupa oss i rubriker, texter, länkar, bilder, tabeller och listor.\u003c/p\u003e\n\u003ch4 id=\"rubriker\"\u003eRubriker\u003c/h4\u003e\n\u003cp\u003ePå ett sätt är rubrikerna det viktigaste på sidan. Både det mänskliga ögat och sökmotorer som Google fäster extra stor vikt vid rubriker. Du bör använda dem väl.\u003c/p\u003e\n\u003cp\u003eTitta på nedanstående sida. Visst är det ganska enkelt att avgöra vilka rubriker som är viktigast?\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/htmlheadnings.jpg\" alt=\"Exempel på hur rubriker skiljer sig åt\" title=\"Exempel på hur rubriker skiljer sig åt\" /\u003e\u003c/p\u003e\n\u003cp\u003eAnvänd rubriker för att bestämma sidans disposition, alltså hur texten är organiserad med rubrik och underrubriker. Detta används flitigt i tidningar. Titta t ex på denna bild från DN.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/dnscreenshot.jpg\" alt=\"Exempel på hur DN använder rubriker för att visa vad som är viktigaste nyheten\" title=\"Exempel på hur DN använder rubriker för att visa vad som är viktigaste nyheten\" /\u003e\u003c/p\u003e\n\u003cp\u003eI DN:s exempel är ”Börsen ned tre dagar i rad” skapad med koden \u003ch1\u003e, dvs. den viktigaste rubriken, och de två mindre artiklarna använder koden \u003ch2\u003e.\u003c/p\u003e\n\u003cp\u003eRätt använda rubriker är bra ur flera synpunker:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eLäsbarhet\u003c/strong\u003e. Det räcker med att snabbt titta på sidan för att få en överblick över vad som är viktigast. Läs mer om hur du får dina texter lästa i artikeln \u003ca href=\"/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eSkriv texter som blir lästa\u003c/a\u003e. \u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eSökbarhet\u003c/strong\u003e. Sökmotorer som Google och MSN lägger mycket stor vikt vid rubriker. Försök att beskriv den kommande texten väl.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cstrong\u003eTillgänglighet\u003c/strong\u003e. Användare med funktionshinder, t ex nedsatt, syn har ofta hjälpmedel för att få sidor upplästa. Bra rubriknivåer hjälper till enormt mycket även i dessa sammanhang.\u003c/p\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"text\"\u003eText\u003c/h4\u003e\n\u003cp\u003eAtt skriva texter i HTML-koden är busenkelt. Varje stycke läggs inom \u003cp\u003e och \u003c/p\u003e. Stycken får som standard en tom rad mellan varje stycke. Detta är något som vi kan justera med CSS, men det är \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003een helt annan historia\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eOm du vill göra en radbrytning mitt i ett stycke kan du göra den med koden \u003cbr /\u003e. \u003cbr /\u003e står för break, vilket betyder brytning. \u003cbr /\u003e-koden har inget innehåll och därför ingen slut-kod. I detta fall läggs därför slutkoden in direkt i startkoden. Det ser du på att den avslutas med ett /-tecken.\u003c/p\u003e\n\u003cp\u003eIbland kan det bli problem med våra svenska å, ä och ö. Vill man vara på den säkra sidan bör man skriva speciella koder för dessa tecken. De kallas entiteter.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eTecken\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eEntitet\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eÅ\u003c/p\u003e\n\u003cp\u003e\u0026aring;\u003c/p\u003e\n\u003cp\u003eÄ\u003c/p\u003e\n\u003cp\u003e\u0026auml;\u003c/p\u003e\n\u003cp\u003eÖ\u003c/p\u003e\n\u003cp\u003e\u0026ouml;\u003c/p\u003e\n\u003cp\u003eÅ\u003c/p\u003e\n\u003cp\u003e\u0026Aring;\u003c/p\u003e\n\u003cp\u003eÄ\u003c/p\u003e\n\u003cp\u003e\u0026Auml;\u003c/p\u003e\n\u003cp\u003eÖ\u003c/p\u003e\n\u003cp\u003e\u0026Ouml;\u003c/p\u003e\n\u003cp\u003eHär kan du se en komplett lista på alla HTML-entiteter.\u003c/p\u003e\n\u003ch4 id=\"bilder\"\u003eBilder\u003c/h4\u003e\n\u003cp\u003eMed bara text på sidan skulle det lätt bli lite väl tråkigt. Bilder livar alltid upp. I HTML visar du bilder med koden \u003cimg\u003e. Img står för Image, vilket betyder just bild.\u003c/p\u003e\n\u003cp\u003eSå här skulle det se ut för att visa bilden som heter logotyp.gif och ligger i mappen images.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=”images/logotyp.gif” alt=”Min logotyp” /\u003e\u003c/p\u003e\n\u003cp\u003eAttributet src (source/källa) bestämmer bildens filnamn. På webben fungerar bildformaten GIF, JPG och PNG.\u003c/p\u003e\n\u003cp\u003eAttributet alt styr vilken text som ska visas om man inte har bildvisning påslaget, eller vilken text som ska läsas upp om har nedsatt syn och har en skärmläsare. Detta attribut är mycket viktigt! Även Google och andra sökmotorer läser detta attribut, vilket gör att även dina bilder blir sökbara.\u003c/p\u003e\n\u003cp\u003eDet går också att ange attributen width och height för att bestämma bildens storlek. Det rekommenderas dock att man gör detta med CSS.\u003c/p\u003e\n\u003cp\u003eObservera att \u003cimg\u003e-koden inte har någon \u003c/img\u003e som andra koder haft. Precis som med \u003cbr /\u003e-koden är detta för att \u003cimg\u003e-koden inte har något eget innehåll. Därför avslutar man koden direkt med /\u0026gt;.\u003c/p\u003e\n\u003ch4 id=\"lnkar\"\u003eLänkar\u003c/h4\u003e\n\u003cp\u003eDet som gör Internet så bra är att det sammanlänkar information från oändligt många källor. För att du ska kunna klicka på länkar och komma till en ny plats används \u003ca\u003e-koden.\u003c/p\u003e\n\u003cp\u003eSå här ser en länk ut:\u003c/p\u003e\n\u003cp\u003e\u003ca href=”http://www.sajten.com/”\u003eTexten som ska vara klickbar\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eAttributet href=”…” bestämmer var man ska hamna när man klickar på länken. Innehållet i koden, alltså det som står mellan \u003ca …\u003e och \u003c/a\u003e är det som ska bli klickbart och visas i webbläsaren.\u003c/p\u003e\n\u003cp\u003eOm du vill att länken ska öppnas i ett nytt fönster kan du använda attributet target=”_blank”.\u003c/p\u003e\n\u003cp\u003eOm du vill göra en bild länkad kan du skriva en \u003cimg\u003e-kod istället för text som ska bli klickbar. Det skulle kunna se ut så här:\u003c/p\u003e\n\u003cp\u003e\u003ca href=”http://www.google.se/”\u003e\u003cimg src=”google-logga.gif” alt=”Google-logotyp” /\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"tabeller\"\u003eTabeller\u003c/h4\u003e\n\u003cp\u003eTabeller ska användas för att presentera information i tabellform, dvs. i rader och kolumner.\u003c/p\u003e\n\u003cp\u003eTabeller kan även användas för layout, men det rekommenderas att man \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eanvänder CSS\u003c/a\u003e för detta istället för tabeller. I den här artikeln kommer du inte att kunna läsa något om layout-tabeller.\u003c/p\u003e\n\u003cp\u003eDet finns flera HTML-koder som har med tabeller att göra. Så här ser koden för en tabell med rubriker ut:\u003c/p\u003e\n\u003ctable\u003e\n\n\u003ctr\u003e\n\n\u003cth\u003ePlats\u003c/th\u003e\n\n\u003cth\u003eStad\u003c/th\u003e\n\n\u003cth\u003eDatum\u003c/th\u003e\n\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd\u003eDebaser\u003c/td\u003e\n\n\u003ctd\u003eStockholm\u003c/td\u003e\n\n\u003ctd\u003e22/4\u003c/td\u003e\n\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd\u003eTrägårn\u003c/td\u003e\n\n\u003ctd\u003eGöteborg\u003c/td\u003e\n\n\u003ctd\u003e28/4\u003c/td\u003e\n\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\u003cp\u003eSå här ser tabellen ut i webbläsaren:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/tableexample.jpg\" alt=\"Bild som visar hur tabellen ser ut\" title=\"Bild som visar hur tabellen ser ut\" /\u003e\u003c/p\u003e\n\u003cp\u003eAlla tabeller startar med koden \u003ctable\u003e och avslutas med \u003c/table\u003e.\u003c/p\u003e\n\u003cp\u003eFör varje rad i tabellen används \u003ctr\u003e respektive \u003c/tr\u003e. \u003ctr\u003e står för table row, dvs. tabellrad.\u003c/p\u003e\n\u003cp\u003eRubriker i tabeller skapas med koden \u003cth\u003e. Det som är så bra med \u003cth\u003e-koden är att den ser annorlunda ut än de andra cellerna. Det gör det tydligare att det är just rubriker. Detta är dessutom viktigt för sökmotorer och för funktionshindrade. På så sätt kan de särskilja rubrikerna från övriga rader i tabellen.\u003c/p\u003e\n\u003cp\u003eTabellceller skapas med koden \u003ctd\u003e, vilket står för table data. Ju fler \u003ctd\u003e-koder du har desto fler kolumner från tabellen.\u003c/p\u003e\n\u003cp\u003eOm du vill göra tabellen bredare kan du använda attributet width=”bredd”. Så här skriver man gör att göra tabellen 400 pixlar bred:\u003c/p\u003e\n\u003ctable width=”400”\u003e … \u003c/table\u003e\n\u003cp\u003eFör att bestämma bredden på kolumner finns det två sätt. Det klassiska sättet är att ange width-attributet på \u003cth\u003e- eller \u003ctd\u003e-koderna, så här:\u003c/p\u003e\n\u003cp\u003e\u003ctd width=”100”\u003e\u003c/td\u003e\u003c/p\u003e\n\u003cp\u003eEller om du vill göra en kolumn hälften så bred som hela tabellen kan du skriva:\u003c/p\u003e\n\u003cp\u003e\u003ctd width=”50%”\u003e\u003c/td\u003e\u003c/p\u003e\n\u003cp\u003eEtt bättre sätt är dock att använda koderna \u003ccolgroup\u003e och \u003ccol\u003e. Då kan du nämligen bestämma bredderna för alla kolumner på en gång istället för att behöva göra det för varje rad. Då skulle tabellen se ut så här:\u003c/p\u003e\n\u003ctable\u003e\n\n**\u003ccolgroup\u003e**\n\n**\u003ccol width=”200” /\u003e**\n\n**\u003ccol width=”200” /\u003e**\n\n**\u003ccol width=”100” /\u003e**\n\n**\u003c/colgroup\u003e**\n\n\u003ctr\u003e\n\n\u003cth\u003ePlats\u003c/th\u003e\n\n\u003cth\u003eStad\u003c/th\u003e\n\n\u003cth\u003eDatum\u003c/th\u003e\n\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd\u003eDebaser\u003c/td\u003e\n\n\u003ctd\u003eStockholm\u003c/td\u003e\n\n\u003ctd\u003e22/4\u003c/td\u003e\n\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\n\u003ctd\u003eTrägårn\u003c/td\u003e\n\n\u003ctd\u003eGöteborg\u003c/td\u003e\n\n\u003ctd\u003e28/4\u003c/td\u003e\n\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\u003cp\u003eDet allra bästa är dock att göra detta med CSS, vilket du kan läsa mer om i artikeln \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eBättre webbplatser med CSS\u003c/a\u003e.\u003c/p\u003e\n\u003ch4 id=\"listor\"\u003eListor\u003c/h4\u003e\n\u003cp\u003eListor är ett oslagbart verktyg för att göra texter mer lättlästa och för att strukturera saker. Det mest uppenbara användningsområdet är att skapa punktlistor eller numrerade listor.\u003c/p\u003e\n\u003cp\u003ePå moderna webbplatser används listor till mycket mer t ex navigation. Det är beskrivet mer detaljerat i \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eartikeln om CSS\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eVanliga punktlistor använder koden \u003cul\u003e. Det står för Unordered list, vilket betyder onumrerad lista. För att visa varje punkt i listan används koden \u003cli\u003e som står för list item.\u003c/p\u003e\n\u003cp\u003eSå här ser koden ut för en onumrerad lista:\u003c/p\u003e\n\u003cul\u003e\n\n\u003cli\u003eDajmstrut\u003c/li\u003e\n\n\u003cli\u003ePiggelin\u003c/li\u003e\n\n\u003cli\u003e88:an\u003c/li\u003e\n\n\u003c/ul\u003e\n\u003cp\u003eSå här blir resultatet:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"/Sites/b1f6387b-6b09-4821-a65a-3e3b66f2fa1f/bulletsexample.jpg\" alt=\"Bild som visar hur punktlistan ser ut\" title=\"Bild som visar hur punktlistan ser ut\" /\u003e\u003c/p\u003e\n\u003cp\u003eDu kan ha olika symboler på punkterna, t ex en rund ring eller en fyrkant. Det ställs in med attributet type. För att använda fyrkanter istället för runda punkter skriver du \u003cul type=”square”\u003e. Detta är dock rekommenderat att göra med CSS istället för HTML.\u003c/p\u003e\n\u003cp\u003eNumrerade listor görs på nästan exakt samma sätt. Enda skillnaden är att man använder koden \u003col\u003e istället för \u003cul\u003e. Koden \u003cli\u003e är ändå precis densamma.\u003c/p\u003e\n\u003ch4 id=\"divkoden\"\u003eDiv-koden\u003c/h4\u003e\n\u003cp\u003eDen sista koden vi ska titta närmare på är \u003cdiv\u003e-koden. \u003cdiv\u003e-koden har ett huvudsyfte. Det är att kapsla in delar av HTML-sidan i olika logiska grupper. Detta är det moderna och rekommenderade sättet att designa webbsidor. Koden \u003cdiv\u003e används för att gruppera innehåll och CSS används för att bestämma utseende för dessa.\u003c/p\u003e\n\u003cp\u003eEtt exempel skulle kunna vara detta:\u003c/p\u003e\n\u003cdiv id=”Sidhuvud”\u003e\u003cimg src=”sidhuvud.gif” alt=”Sidhuvud” /\u003e\u003c/div\u003e\n\u003cdiv id=”Navigation”\u003e\n\n\u003cul\u003e\n\n\u003cli\u003e\u003ca href=”hem.html”\u003eHem\u003c/a\u003e\u003c/li\u003e\n\n\u003cli\u003e\u003ca href=”om.html”\u003eOm mig\u003c/a\u003e\u003c/li\u003e\n\n\u003cli\u003e\u003ca href=”album.html”\u003eFotoalbum\u003c/a\u003e\u003c/li\u003e\n\n\u003c/ul\u003e\n\n\u003c/div\u003e\n\u003cdiv id=”Innehåll”\u003e\n\n\u003ch1\u003eVälkommen\u003c/h1\u003e\n\n\u003cp\u003eDetta är innehållet på min sida\u003c/p\u003e\n\n\u003c/div\u003e\n\u003cdiv id=”Sidospalt”\u003e\n\n\u003cdiv id=”Login”\u003e\n\nLoginruta\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\u003cdiv id=”Sidfot”\u003e\n\n...\n\n\u003c/div\u003e\n\u003cp\u003eOm du tittar lite extra på id-attributen på varje \u003cdiv\u003e-kod så kan du nog nästan föreställa dig hur den här sidan skulle se kunna se ut.\u003c/p\u003e\n\u003cp\u003eDet bästa av allt är att den i princip skulle kunna se ut precis hur som helst! Anledningen är att koden ovan inte säger någonting alls om utseendet, utan har bara beskrivit strukturen på sidan. Med CSS kan vi designa sidan precis hur vi vill med färger, teckensnitt med mera, med mera! Mer om detta i \u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eartikeln om CSS\u003c/a\u003e!\u003c/p\u003e\n\u003ch4 id=\"relateradelnkar\"\u003eRelaterade länkar\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1f5b2eaa-b79a-418a-a733-b47ad0743d06\" rel=\"noopener noreferrer\" target=\"_blank\"\u003ePlanera din hemsida \n\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=1143d3d5-1c41-4c2e-ad72-d0c01afc6ccb\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eSkriv texter som blir lästa \n\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" title=\"http://datorn.ifokus.se/Articles/Read.aspx?ArticleId=9bb3b378-a8d4-4669-9abd-3379288b05a2\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eBättre webbplatser med CSS \n\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"avjohan\"\u003eAv: johan\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e[Personlig sida](javascript:void top.ShowProfile('johan'))\u003c/li\u003e\n\u003cli\u003e[Kontakta](javascript:void top.ShowProfile('johan', 'Contact.aspx'))\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"datumfrpublicering\"\u003eDatum för publicering\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e2007-03-23\u003c/li\u003e\n\u003c/ul\u003e","images":["b8648dc6afb24d45f4148aea589687eb"],"attachments":[],"likes":0,"postedAt":1174677722,"anonymous":false},{"id":4506986,"discussionId":309506,"userId":3283,"markdown":null,"html":"\u003cp\u003eMycket bra artiklar, men varför är koderna skrivna i xhtml när det står att det ska handla om html?\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1174764581,"anonymous":false},{"id":4506987,"discussionId":309506,"userId":1202,"markdown":null,"html":"\u003cp\u003eFör att förenkla termerna lite. Jag tycker att man SKA använda XHTML för att göra rätt från början. Däremot säger man ju oftast bara HTML, så jag tyckte det kändes enklare.\u003c/p\u003e\n\u003cp\u003eDen enda (nästan iaf) skillnaden är ju just att man måste avsluta alla element och avsluta dom i samma ordning som de påbörjades.\u003c/p\u003e\n\u003cp\u003eAllt som man använder för XHTML fungerar även för HTML, men inte tvärtom.\u003c/p\u003e\n\u003cp\u003eKul att du gillar artiklarna. Det gör det roligare att fortsätta.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1174767759,"anonymous":false},{"id":4506988,"discussionId":309506,"userId":3283,"markdown":null,"html":"\u003cp\u003eBlev frälst efter att ha kläst några grundelement.\u0026nbsp; Men det är klart man kommer läsa här. Finns ju säkerligen någon man glömt bland åren.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1174777409,"anonymous":false},{"id":4506989,"discussionId":309506,"userId":6037,"markdown":null,"html":"\u003cp\u003eJättebra, nästan så jag får gnugga ögonen, en kurs samtidigt som jag ska göra en hemsida, och bra skrivet så till o med tanter förstår. Jätemycket tack johan \u003cimg src=\"../tiny_mce/plugins/emotions/images/smiley-laughing.gif\" alt=\"Skrattande\" /\u003e\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1174820380,"anonymous":false},{"id":4506990,"discussionId":309506,"userId":3882,"markdown":null,"html":"\u003cp\u003eBra artikel och hoppas att många kommer på hur roligt det är att skapa hemsidor… nu fortsätter jag till nästa artikel, för nu får jag lust att bygga om min sida… ja, ska fundera\u003cimg src=\"../tiny_mce/plugins/emotions/images/smiley-smile.gif\" alt=\"Glad\" /\u003e //Kristin\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1175123224,"anonymous":false},{"id":4506991,"discussionId":309506,"userId":3882,"markdown":null,"html":"\u003cp\u003eFråga; Jag jobbar i EditPlus och då lägger programet till \u003cbr /\u003e\n\u003c!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"\u003e\u003c/p\u003e\n\u003cp\u003eDu har taggen: \u003cbr /\u003e\n\u003c!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \n\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"\u003e\u003c/p\u003e\n\u003cp\u003eVad är skillnaden? är det xhtml och html 4.0.\u003c/p\u003e\n\u003cp\u003eoch så ser jag att de sidor som jag öppnar i iframe har \u003cbr /\u003e\ntaggen \u003c!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"\u003e \"ramlat bort\". Bör jag lägga till den igen eller ska jag välja din tagg?\u003c/p\u003e\n\u003cp\u003eHälsningar Kristin\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1175124329,"anonymous":false},{"id":4506992,"discussionId":309506,"userId":1480,"markdown":null,"html":"\u003cp\u003eUnder tillgängligeht och länkar kan jag bara lägga till att länkarna skall vara väl beskrivna så att webbläsare som läser upp texten för t ex synskadade skall få bra inforamtion om vad länken handlar om. Använd t ex inte texten \u003cstrong\u003eLäs mer\u003c/strong\u003e på länken efter som det inte säger någonting om var man hamnar. \u003cbr /\u003e\nVill man ändå ha det t ex en webbsida som har ett antal länkar som måste heta \u003cstrong\u003eLäs mer\u003c/strong\u003e så kan man lösa detta genom att lägga in en \u003cstrong\u003eTitle\u003c/strong\u003e text i HRefen. Det som står i Title kommer då att läsas upp av de webläsare som kan läsa text åt synskadade. Dessutom kommer denna text att visas i en gul ruta då man hovrar över länken.\u003c/p\u003e\n\u003cp\u003eEX: \u003cbr /\u003e\n\u003ca title=\"Denna text visas när du hovrar över länken\" href=\"\"http://www.sajten.com/\"\"\u003eTexten som ska vara klickbar\u003c/a\u003e\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1176999727,"anonymous":false},{"id":4506993,"discussionId":309506,"userId":32865,"markdown":null,"html":"\u003cp\u003ehaha\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1194545818,"anonymous":false},{"id":4506994,"discussionId":309506,"userId":12088,"markdown":null,"html":"\u003cp\u003eBra artikel! Min hemsida \u003ca href=\"http://www.elsahofverberg.info.se/\" title=\"www.elsahofverberg.info.se\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\u003cstrong\u003ewww.elsahofverberg.info.se\u003c/strong\u003e\u003c/a\u003e är helt gjort i HTML.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1201351723,"anonymous":false},{"id":4506995,"discussionId":309506,"userId":22951,"markdown":null,"html":"\u003cp\u003eJättebra artikel!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eLite grund - html som ni säkert redan visste:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrike\u003eöverstruken text\u003c/strike\u003e\u003c/p\u003e\n\u003cp\u003e\u003cb\u003e\u003cstrong\u003etjock text\u003c/strong\u003e\u003c/b\u003e\u003c/p\u003e\n\u003cp\u003e\u003cu\u003eunderstruken text\u003c/u\u003e\u003c/p\u003e\n\u003cp\u003e\u003ci\u003e\u003cem\u003elutande/kursiv text\u003c/em\u003e\u003c/i\u003e\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1225629093,"anonymous":false},{"id":4506996,"discussionId":309506,"userId":1202,"markdown":null,"html":"\u003cp\u003e\u003cspan class=\"comment-mention\" data-index=\"10\"\u003e#10\u003c/span\u003e: För fet stil ska man undvika b och istället använda \u003cstrong\u003e, eftersom i den semantiska webben beskriver man inte utseende, utan innehåll. \u003cb\u003e säger bara fet stil, medan \u003cstrong\u003e säger att man betonar något och rent visuellt presenteras det som fet stil.\u003c/p\u003e\n\u003cp\u003eIstället för \u003ci\u003e ska man använda \u003cem\u003e.\u003c/p\u003e\n\u003cp\u003eUnderstruken stil \u003cu\u003e ska man undvika helt och hållet, eftersom det är så förknippad med länkar.\u003c/p\u003e\n\u003cp\u003eBara för att vara lite strukturfascist. :)\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1225661255,"anonymous":false},{"id":4506997,"discussionId":309506,"userId":23167,"markdown":null,"html":"\u003cp\u003e\u003ca href=\"http://www.w3schools.com/default.asp\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eHär\u003c/a\u003e kan man lära sig lite av varje också, fast på engelska, bland annat HTML, CSS, XML, XSLT, Javascript och en hel del annat. Man kan även ändra i exempelkod där och se vad som händer med resultatet direkt på sidan.\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"http://validator.w3.org/\" rel=\"noopener noreferrer\" target=\"_blank\"\u003eHär\u003c/a\u003e kan man kolla om en webbsida följer W3C-rekommendationerna (det är hit man kommer om man exempelvis i Opera högerklickar på en webbsida och väljer ”Kontrollera”). Får man ingan felmeddelanden här, ska sidan man testar fungera med de flesta webbläsarna på marknaden. Om inte, är det webbläsarens fel, inte sidans… Generellt i alla fall. Finns säkert undantag, som till allt annat.\u003c/p\u003e\n\u003cp\u003eSjälv har jag ingen hemsida numera, men jag hade en extremt simpel sådan för några år sedan skriven i vanlig HTML utan CSS… Aj aj aj…\u003c/p\u003e\n\u003cp\u003eSka göra en ny så småningom, men då blir det XML och XSLT. Borde funka bra för sidans enkla syfte. Kommer förmodligen att skriva den i en vanlig textredigerare med XML-stöd, troligen Emacs då jag är mycket förtjust i detta program sedan 1986 (då jag körde det på en PR1ME 750-minidator med operativsystemet Primos - ett operativsystem och en dator som få kommer ihåg idag).\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1225736042,"anonymous":false},{"id":4506998,"discussionId":309506,"userId":12873,"markdown":null,"html":"\u003cp\u003eIntresant läsning. Måste försöka lära mig mer om HTML och allvad det innebär.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1229021134,"anonymous":false},{"id":4506999,"discussionId":309506,"userId":6442,"markdown":null,"html":"\u003cp\u003eJättebra artikel! \u003cimg src=\"../tiny3/plugins/emotions/img/smiley-smile.gif\" alt=\"Glad\" title=\"Glad\" /\u003e\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1229871191,"anonymous":false},{"id":4507000,"discussionId":309506,"userId":8380,"markdown":null,"html":"\u003cp\u003eJättebra artikel :) \u003cbr /\u003e\nEn fråga; när jag t. ex försöker sätta in en bild och sen kollar hur det ser ut så står det bara \"Min, det är himla irriterande.. vill ju ha bilder inte text.. \u0026gt;'\u0026lt;\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1229979017,"anonymous":false},{"id":4507001,"discussionId":309506,"userId":11941,"markdown":null,"html":"\u003cp\u003eFramgår inte riktigt hur du \"tittar\". Det finns program som för att inte behöva ladda grafik har ett visningsläge som laddar fortare, men där bilderna bara visas som ramar; när den kommer upp på webben kommer bilden att finnas där.\u003c/p\u003e\n\u003cp\u003eNär man vill titta på en sida som man håller på och redigerar, så ska man så klart öppna i en webbläsare. Då ser man hur den ser ut i den webbläsaren.\u003c/p\u003e\n\u003cp\u003eMan skriver alltså till exempel koden \u003cimg src=\"12345.png\" alt=\"bild av huset\"\u003e\u003c/p\u003e\n\u003cp\u003eDå kommer, förutsatt att bilden 1345.png ligger i samma mapp som webbsidan, bilden att visas när du öppnar i webbläsaren. I editorn kan det däremot finnas en inställning som bara visar en ram för bilden och texten \"bild av huset\".\u003c/p\u003e\n\u003cp\u003eAlltså inne i img-taggen ska det finnas en src, bildens källa, med bildfilens namn (och plats) inom citationstecken. Sedan bör man också ha en alt-tagg på samma sätt med en text för dem som inte kan se bilder. Alt-texten kommer att läsas upp för synskadade som tittar på sidan med talsyntes och den visas också för dem som tittar på sidan i webbläsare som inte är grafiska (Lynx exempelvis). Man kan utesluta alt-texten. Om du har tittat på en beskrivning där det står src=\"min bild\" och du skriver det, så kommer naturligtvis inte någon bild att visas. Det måste vara bildfilen som src pekar på.\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1229979802,"anonymous":false},{"id":4507002,"discussionId":309506,"userId":8380,"markdown":null,"html":"\u003cp\u003eOk, tack för att du tog dig tid atg svara :) \u003cbr /\u003e\nÄnsålänge har jag ju inte lagt upp själva hemsidan men jag jag skriver lite på den.. tror jag förstår. Tack!\u003c/p\u003e","attachments":[],"likes":0,"postedAt":1230046111,"anonymous":false}],"users":{"1202":{"id":1202,"networkId":1,"username":"johan","usernameNormalized":"johan","signature":"\u003cp\u003eMvh // Johan\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eFödd vid 334.00 PPM\u003c/em\u003e\u003c/p\u003e","avatarUrl":"https://files.ifokus.se/u2/04f5394d058e5fbcd86901a3c63ad08b/64/","createdAt":1121424765,"emailValidatedAt":1121424765,"lastLoginAt":1711633086.69,"loginCount":9361,"sites":[]},"1480":{"id":1480,"networkId":1,"username":"Kaj","usernameNormalized":"kaj","signature":"","avatarUrl":"http://ifokus-assets.se/uploads/cca/ccaaefbbd1919c57a79c359264897a2a/kaj-64x86.jpg","createdAt":1130177672,"emailValidatedAt":1130177672,"lastLoginAt":1623619525.203,"loginCount":4805,"sites":[]},"3283":{"id":3283,"networkId":1,"username":"Isak","usernameNormalized":"isak","signature":"\u003cp\u003e\u003cstrong\u003eVänliga hälsningar\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eAlexander Isaksson\u003c/em\u003e\u003c/p\u003e","avatarUrl":"http://ifokus-assets.se/uploads/034/0342b58fbb92e9b3f772987443810f55/ifokus.jpg","createdAt":1148454336,"emailValidatedAt":1148454336,"lastLoginAt":1708552474.684,"loginCount":4232,"sites":[]},"3882":{"id":3882,"networkId":1,"username":"Runsviks","usernameNormalized":"runsviks","signature":"","avatarUrl":"http://ifokus-assets.se/uploads/a3d/a3d716c7679d01dce757b74bd7138c36/patina-64.jpg","createdAt":1157304165,"emailValidatedAt":1157304165,"lastLoginAt":1599268187.833,"loginCount":995,"sites":[]},"6037":{"id":6037,"networkId":1,"username":"Brittinger","usernameNormalized":"brittinger","signature":"","avatarUrl":"http://ifokus-assets.se/images/avatar.png","createdAt":1167720315,"emailValidatedAt":1167720315,"lastLoginAt":1599268187.833,"loginCount":23,"sites":[]},"6442":{"id":6442,"networkId":1,"username":"Eostra","usernameNormalized":"eostra","signature":"","avatarUrl":"http://ifokus-assets.se/9fba9dbcf124f85484322ced3d9b92d8/avatar_thumb-64x64.jpg?thumb=64x64\u0026source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fe28%2Fe281caf87db677d2d02c88c1013a8332%2Favatar.jpg","createdAt":1196880546,"emailValidatedAt":1196880546,"lastLoginAt":1599268187.833,"loginCount":1961,"sites":[]},"8380":{"id":8380,"networkId":1,"username":"Cuyi","usernameNormalized":"cuyi","signature":"","avatarUrl":"http://ifokus-assets.se/3cbb9181aa4db9d7a20fa74418668f85/tumblr-m359rgqzy01ru6vago1-500-large_thumb-64x64.jpg?thumb=64x64\u0026source=http%3A%2F%2Fuploads.ifokus.se%2Fuploads%2Fcfa%2Fcfa8565944aea8fe29522d59740a0faf%2Ftumblr-m359rgqzy01ru6vago1-500-large.jpg","createdAt":1186506525,"emailValidatedAt":1186506525,"lastLoginAt":1685027428.852,"loginCount":591,"sites":[]},"11941":{"id":11941,"networkId":1,"username":"Inkanyezi","usernameNormalized":"inkanyezi","signature":"","avatarUrl":"http://ifokus-assets.se/uploads/391/39145f4cff648e613369f86a84a2082a/eye-contact.png","createdAt":1213009636,"emailValidatedAt":1213009636,"lastLoginAt":1599268187.833,"loginCount":7824,"sites":[]},"12088":{"id":12088,"networkId":1,"username":"Ellsa","usernameNormalized":"ellsa","signature":"","avatarUrl":"http://ifokus-assets.se/uploads/a01/a019712132a383032c7b66d68e20449e/9b921beebde0a74ff0562e891232f0bb-640-480.jpg","createdAt":1198696314,"emailValidatedAt":1198696314,"lastLoginAt":1599268187.833,"loginCount":69,"sites":[]},"12873":{"id":12873,"networkId":1,"username":"Gnidde","usernameNormalized":"gnidde","signature":"\u003cp\u003eHälsningar Gnidde.\u003c/p\u003e","avatarUrl":"http://www.gravatar.com/avatar/bc37bc837c058b36712b6b136f3687ec?s=64","createdAt":1184775496,"emailValidatedAt":1184775496,"lastLoginAt":1599268187.833,"loginCount":2601,"sites":[]},"22951":{"id":22951,"networkId":1,"username":"MangoPeperoniOwner","usernameNormalized":"mangopeperoniowner","createdAt":1216484640,"emailValidatedAt":1216484640,"lastLoginAt":1599268187.833,"removedAt":1241636185,"loginCount":550,"sites":[]},"23167":{"id":23167,"networkId":1,"username":"guraknugen","usernameNormalized":"guraknugen","createdAt":1212076092,"emailValidatedAt":1212076092,"lastLoginAt":1599268187.833,"removedAt":1302472800,"loginCount":2416,"sites":[]},"32865":{"id":32865,"networkId":1,"username":"sweetii","usernameNormalized":"sweetii","signature":"","avatarUrl":"http://ifokus-assets.se/images/avatar.png","createdAt":1194538422,"emailValidatedAt":1194538422,"lastLoginAt":1599268187.833,"loginCount":1,"sites":[]}},"feature":null,"decisions":{},"edits":{},"linkPreviews":{}},"isLoadedOnServer":true},"communityResponse":{"network":{"id":1,"name":"iFokus","domain":"ifokus.se","email":"info@ifokus.se","language":"sv","ga":"G-N0ZDQJWLPJ","settings":{"logos":{"largeLight":"https://www.ifokus.se/images/ifokus-textonly.svg","mediumLight":"https://www.ifokus.se/images/ifokus-text.svg","mediumDark":"https://www.ifokus.se/images/ifokus-text-blue.svg","round":"https://www.ifokus.se/images/i-ifokus-inv.svg"},"ads":{"scriptId":"108_1451","panorama":"4484","module":"5103","insider":"4486","insiderRight":"4708"},"apiKeys":{"googleClientId":""},"favicon":"https://www.ifokus.se/images/i-ifokus.svg"}},"site":{"id":1201,"networkId":1,"categoryId":3,"subdomain":"datorn","name":"Datorn","siteType":0,"active":true},"siteCategory":{"id":3,"networkId":1,"name":"Datorer \u0026 Prylar","color":"#999999","sort":30,"adId":"7205099367"},"community":{"id":1201,"metaDescription":"På Datorn iFokus får du svar på alla dina frågor om Word, Excel, PowerPoint, Windows, Internet med mera. Här kan du ställa frågor, diskutera med likasinnade och hitta mycket kul tips som rör din dator.","metaKeywords":"ie PowerPoint iphone windows live itunes format codec e-bok kindle upphovsrätt hotmail filmredigering ljudbok webbutveckling office 2007 movie maker safari css firefox spotify nedladdning ipod touch tv tillgänglighet html office 14 tweaks bilder javascript censur presentationer word youtube videoklipp nätet vlc guide","bannerUrl":"https://files.ifokus.se/u2/ce7611e73f44b8bdba3fd865daf1e71a/default/","activityBase":54.8784,"activityTime":1711517671.863,"colors":["#BFD2CB","#004D33"]},"settings":{"allows_anonymous":"false","default_access_discussions":"10","front_page":"false","network_wikiwords":"true","required_access_discussions":"10","required_access_posts":"10"},"lexicon":[{"networkId":1,"siteId":1201,"discussionId":1285143,"word":"Blir galen på min nya dator"},{"networkId":1,"siteId":1201,"discussionId":1417423,"word":"chkdsk"},{"networkId":1,"siteId":1201,"discussionId":1336378,"word":"Hjälp med dator"},{"networkId":1,"siteId":1201,"discussionId":1298727,"word":"ljud till text"},{"networkId":1,"siteId":1201,"discussionId":1437034,"word":"Vilka olika slags Windows konton finns det"},{"networkId":1,"siteId":1201,"discussionId":1317039,"word":"Win10: startmeny och symboler som ej funkar"},{"networkId":1,"siteId":1201,"discussionId":1314071,"word":"Windows 10"},{"networkId":1,"siteId":1201,"discussionId":1241300,"word":"Vår acer laptop blir allt sämre"}],"networkLexicon":[{"networkId":1,"word":"Användaravtal","targetUrl":"/about/useragreement/"},{"networkId":1,"word":"Avatar","targetUrl":"/about/avatar/"},{"networkId":1,"word":"Guldmynt","targetUrl":"/about/goldcoins/"},{"networkId":1,"word":"Guldmyntshoppen","targetUrl":"/about/goldcoinshop/"},{"networkId":1,"word":"iFokus","targetUrl":"/about/ifokus2/"},{"networkId":1,"word":"iFokus-bloggen","targetUrl":"/about/ifokusblog/"},{"networkId":1,"word":"iFokus utan reklam","targetUrl":"/about/adfree2/"},{"networkId":1,"word":"Insider","targetUrl":"/about/insider2/"},{"networkId":1,"word":"Intressesajt","targetUrl":"/about/interestsite/"},{"networkId":1,"word":"Kluring","targetUrl":"/about/kluring/"},{"networkId":1,"word":"Lexikon","targetUrl":"/about/lexicon/"},{"networkId":1,"word":"Medaljer","targetUrl":"/about/medals/"},{"networkId":1,"word":"Medarbetare","targetUrl":"/about/assistant/"},{"networkId":1,"word":"Sajtvärd","targetUrl":"/about/sitehost/"},{"networkId":1,"word":"Skrivregler","targetUrl":"/about/rules/"},{"networkId":1,"word":"Starta en sajt","targetUrl":"/about/startsite/"},{"networkId":1,"word":"Support iFokus","targetUrl":"/about/support/"}],"owner":{"id":56072,"networkId":1,"username":"JonasDuregard","usernameNormalized":"jonasduregard","signature":"Medarbetare på [Skepticism](http://skepticism.ifokus.se/), [Vetenskap](http://vetenskap.ifokus.se/) och [Andlig Skepticism](http://andligskepticism.ifokus.se/)","avatarUrl":"http://ifokus-assets.se/uploads/ee7/ee7b78627134d82787571085cf9670d4/jonas.jpg","createdAt":1287405038,"emailValidatedAt":1287405038,"lastLoginAt":1604959268.873,"loginCount":1249,"sites":[]},"ownerActive":false,"activityIndex":46.85678368973239,"isIpBlocked":false,"ipAddress":"192.168.28.140"},"useragent":{"isMobile":false,"isDesktop":true},"showAds":true},"page":"/discussion/[id]/[slug]","query":{"id":"309506","slug":"html---grundstenen-i-webbdesign"},"buildId":"BCvDzzKIrIYSYO7dILp9Y","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[80119,39219,19445],"gip":true,"appGip":true,"scriptLoader":[]}</script></body></html>