Skriv ett nytt inlägg! Aktuellt just nu (5) Senaste inläggen

Datorköp Hårdvara Program för PC Program för MAC Annonsprogram / Virus Windows XP, 7 och 8.x Windows 10 01. Internet 02. Microsoft Office 03. Operativsystem 08. Tillbehör 09. Spel 10. Nätverk & Brandväggar 11. Fildelning 12. Säljes/köpes 13. Övrigt 14. Off-topic Webbläsare Undersökningar/kluring Varningar För sajtvärd och medarbetare
Webbdesign

HTML - Grundstenen i webbdesign

2007-03-23 20:22 #0 av: johan

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.

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

<html>

<head>

<title>Hej Världen!</title>

</head>

<body>

<h1>Hej Världen!</h1>

<p>Självklart måste den första sedan vi skapar vara en

Hello World-sida. </p>

 

<h2>Mina favoritsajter</h2>

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

<ul>

<li>

<a href=”http://www.ifokus.se”>iFokus</a>

</li>

<li>

<a href=”http://www.google.se”>Google</a>

</li>

<li>

<a href=”http://www.svd.se”>Svenska Dagbladet</a>

</li>

</ul>

</body>

</html>

 

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 <html>, vilket betyder att vi ska börja ett HTML-dokument.

På sista raden ser du en kod där det står </html>. 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:

<strong>här är fet text <em>och understruken</strong></em>.

Koden <em> måste avslutas innan koden <strong>. Detta är rätt:

<strong>här är fet text <em>och understruken</em></strong>.

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 <a>. 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:

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

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:

<html>

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 </html>.

Nästa block av kod är:

<head>

<title>Hej Världen!</title>

</head>

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

Mellan startkoden <head> och slutkoden </head> lägger man metadata, eller information om sidan. Det enda man verkligen behöver ha här är ju koden <title> 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.

Koderna <html>, <head> och <title>får bara finnas en enda gång i sidan.

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.

Hur title-elementet visas på Google

Sidans innehåll

Nu har vi kommit till blocket:

<body>

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.

Du kanske la märke till rubriken ”Hej världen” blev större än den andra texten? Rubrikkoden <h1> skapar en rubrik.

<h1>Hej Världen!</h1>

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.

För att visa helt vanlig text använder man koderna:

<p>Här är texten i stycke 1.</p>

<p>Här är texten i stycke 2.</p>

Varje <p>…</p> är ett stycke text. P står för Paragraph, vilket betyder stycke på engelska.

För att göra listor används koden:

<ul>

<li>Punkt 1</li>

<li>Punkt 2</li>

</ul>

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.

Om man vill ha en numrerad lista använder man istället <ol>, vilket står för Ordered List.

Nu återstår bara koden för länkar:

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>.

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.

Rubriker

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.

Titta på nedanstående sida. Visst är det ganska enkelt att avgöra vilka rubriker som är viktigast?

Exempel på hur rubriker skiljer sig åt

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.

Exempel på hur DN använder rubriker för att visa vad som är viktigaste nyheten

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>.

Rätt använda rubriker är bra ur flera synpunker:

  • Läsbarhet. 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 Skriv texter som blir lästa.
  • Sökbarhet. Sökmotorer som Google och MSN lägger mycket stor vikt vid rubriker. Försök att beskriv den kommande texten väl.
  • Tillgänglighet. 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.

Text

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 en helt annan historia.

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.

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.

Tecken

Entitet

Å

&aring;

Ä

&auml;

Ö

&ouml;

Å

&Aring;

Ä

&Auml;

Ö

&Ouml;

Här kan du se en komplett lista på alla HTML-entiteter.

Bilder

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.

Så här skulle det se ut för att visa bilden som heter logotyp.gif och ligger i mappen images.

<img src=”images/logotyp.gif” alt=”Min logotyp” />

Attributet src (source/källa) bestämmer bildens filnamn. På webben fungerar bildformaten GIF, JPG och PNG.

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.

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.

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 />.

Länkar

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.

Så här ser en länk ut:

<a href=”http://www.sajten.com/”>Texten som ska vara klickbar</a>

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.

Om du vill att länken ska öppnas i ett nytt fönster kan du använda attributet target=”_blank”.

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:

<a href=”http://www.google.se/”><img src=”google-logga.gif” alt=”Google-logotyp” /></a>

 

Tabeller

Tabeller ska användas för att presentera information i tabellform, dvs. i rader och kolumner.

Tabeller kan även användas för layout, men det rekommenderas att man använder CSS 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.

Det finns flera HTML-koder som har med tabeller att göra. Så här ser koden för en tabell med rubriker ut:

<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>

Så här ser tabellen ut i webbläsaren:

Bild som visar hur tabellen ser ut

Alla tabeller startar med koden <table> och avslutas med </table>.

För varje rad i tabellen används <tr> respektive </tr>. <tr> står för table row, dvs. tabellrad.

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.

Tabellceller skapas med koden <td>, vilket står för table data. Ju fler <td>-koder du har desto fler kolumner från tabellen.

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:

<table width=”400”> … </table>

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:

<td width=”100”></td>

Eller om du vill göra en kolumn hälften så bred som hela tabellen kan du skriva:

<td width=”50%”></td>

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:

<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>

Det allra bästa är dock att göra detta med CSS, vilket du kan läsa mer om i artikeln Bättre webbplatser med CSS.

Listor

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å moderna webbplatser används listor till mycket mer t ex navigation. Det är beskrivet mer detaljerat i artikeln om CSS.

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.

Så här ser koden ut för en onumrerad lista:

<ul>

<li>Dajmstrut</li>

<li>Piggelin</li>

<li>88:an</li>

</ul>

Så här blir resultatet:

Bild som visar hur punktlistan ser ut

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.

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.

Div-koden

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.

Ett exempel skulle kunna vara detta:

<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>

 

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.

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 artikeln om CSS!

 

 

Relaterade länkar

Av: johan

Datum för publicering

  • 2007-03-23
Anmäl
2007-03-24 20:29 #1 av: Isak

Mycket bra artiklar, men varför är koderna skrivna i xhtml när det står att det ska handla om html?

Anmäl
2007-03-24 21:22 #2 av: johan

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.

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.

Allt som man använder för XHTML fungerar även för HTML, men inte tvärtom.

Kul att du gillar artiklarna. Det gör det roligare att fortsätta. 

Anmäl
2007-03-25 00:03 #3 av: Isak

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.

Anmäl
2007-03-25 12:59 #4 av: Brittinger

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 Skrattande

Anmäl
2007-03-29 01:07 #5 av: Runsviks

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 funderaGlad //Kristin

Anmäl
2007-03-29 01:25 #6 av: Runsviks

Fråga; Jag jobbar i EditPlus och då lägger programet till
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

Vad är skillnaden? är det xhtml och html 4.0.

och så ser jag att de sidor som jag öppnar i iframe har
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?

Hälsningar Kristin

Anmäl
2007-04-19 18:22 #7 av: Kaj

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 Läs mer på länken efter som det inte säger någonting om var man hamnar.
Vill man ändå ha det t ex en webbsida som har ett antal länkar som måste heta Läs mer så kan man lösa detta genom att lägga in en Title 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.

EX:
<a title="Denna text visas när du hovrar över länken" href=""http://www.sajten.com/"">Texten som ska vara klickbar</a>

Anmäl
2007-11-08 19:16 #8 av: sweetii

haha

Anmäl
2008-01-26 13:48 #9 av: Ellsa
Bra artikel! Min hemsida www.elsahofverberg.info.se är helt gjort i HTML.
Anmäl
2008-11-02 13:31 #10 av: MangoPeperoniOwner

Jättebra artikel!

Lite grund - html som ni säkert redan visste:

<strike>överstruken text</strike>

<b>tjock text</b>

<u>understruken text</u>

<i>lutande/kursiv text</i>

 

 

Anmäl
2008-11-02 22:27 #11 av: johan

#10: 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.

Istället för <i> ska man använda <em>.

Understruken stil <u> ska man undvika helt och hållet, eftersom det är så förknippad med länkar.

Bara för att vara lite strukturfascist. :)

 

Anmäl
2008-11-03 19:14 #12 av: guraknugen

Här 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.

Här 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.

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…

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).

Anmäl
2008-12-11 19:45 #13 av: Gnidde

Intresant läsning. Måste försöka lära mig mer om HTML och allvad det innebär.

Anmäl
2008-12-21 15:53 #14 av: Eostra

Jättebra artikel! Glad

Anmäl
2008-12-22 21:50 #15 av: Cuyi

Jättebra artikel :)
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.. >'<

Anmäl
2008-12-22 22:03 #16 av: Inkanyezi

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.

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.

Man skriver alltså till exempel koden <img src="12345.png" alt="bild av huset">

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".

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å.

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.