HTML - Grundstenen i webbdesign
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.
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!
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:
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:
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 kodenKoderna ,
ochKoden
Sidans innehåll
Nu har vi kommit till blocket:
Detta markerar början på sidans innehåll. Mellan
och 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 -element i sidan.Du kanske la märke till rubriken ”Hej världen” blev större än den andra texten? Rubrikkoden
skapar en rubrik.
Hej Världen!
Det finns h1, h2, h3, h4, h5, och h6. ”H” står för Heading, vilket betyder just rubrik på engelska.
är den största och viktigaste rubriker, är näst viktigast och så vidare. Mer om detta senare.
För att visa helt vanlig text använder man koderna:
Här är texten i stycke 1.
Här är texten i stycke 2.
Varje
…
är ett stycke text. P står för Paragraph, vilket betyder stycke på engelska.För att göra listor används koden:
- Punkt 1
- Punkt 2
Denna kod blir en punktlista.
- står för Unordered List, dvs. Onumrerad lista.
- står för List Item och markerar varje punkt i listan.
Om man vill ha en numrerad lista använder man istället
- , vilket står för Ordered List.
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.
- som står för list item.
Så här ser koden ut för en onumrerad lista:
- Dajmstrut
- Piggelin
- 88:an
Så här blir resultatet:
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
- . Detta är dock rekommenderat att göra med CSS istället för HTML.
- är ändå precis densamma.
Div-koden
Den sista koden vi ska titta närmare på är
-koden.-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. Kodenanvä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:
Välkommen
Detta är innehållet på min sida
Loginruta...Om du tittar lite extra på id-attributen på varje
-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
- [Personlig sida](javascript:void top.ShowProfile('johan'))
- [Kontakta](javascript:void top.ShowProfile('johan', 'Contact.aspx'))
Datum för publicering
- 2007-03-23
Mvh // Johan
Född vid 334.00 PPM
Annons:2007-03-24 20:290#1Mycket bra artiklar, men varför är koderna skrivna i xhtml när det står att det ska handla om html?
Vänliga hälsningar
Alexander Isaksson
2007-03-24 21:220#2Fö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.
Mvh // Johan
Född vid 334.00 PPM
2007-03-25 00:030#3Blev 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.
Vänliga hälsningar
Alexander Isaksson
2007-03-25 12:590#4Jä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
2007-03-29 01:070#5Bra 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 //Kristin
2007-03-29 01:250#6Fråga; Jag jobbar i EditPlus och då lägger programet till
Du har taggen:
Vad är skillnaden? är det xhtml och html 4.0.
och så ser jag att de sidor som jag öppnar i iframe har
taggen "ramlat bort". Bör jag lägga till den igen eller ska jag välja din tagg?Hälsningar Kristin
Annons:2007-04-19 18:220#7Under 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.2007-11-08 19:160#8haha
2008-01-26 13:480#9Bra artikel! Min hemsida www.elsahofverberg.info.se är helt gjort i HTML.
2008-11-02 13:310#10Jättebra artikel!
Lite grund - html som ni säkert redan visste:
överstruken texttjock text
understruken text
lutande/kursiv text
2008-11-02 22:270#11#10: För fet stil ska man undvika b och istället använda , eftersom i den semantiska webben beskriver man inte utseende, utan innehåll. säger bara fet stil, medan säger att man betonar något och rent visuellt presenteras det som fet stil.
Istället för ska man använda .
Understruken stil ska man undvika helt och hållet, eftersom det är så förknippad med länkar.
Bara för att vara lite strukturfascist. :)
Mvh // Johan
Född vid 334.00 PPM
2008-11-03 19:140#12Hä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).
2008-12-11 19:450#13Intresant läsning. Måste försöka lära mig mer om HTML och allvad det innebär.
Hälsningar Gnidde.
Annons:2008-12-21 15:530#14Jättebra artikel!
2008-12-22 21:500#15Jä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.. >'<2008-12-22 22:030#16Framgå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
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å.
Upp till toppen2008-12-23 16:280#17Ok, tack för att du tog dig tid atg svara :)
Ä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!Annons:Bli medlemVåra sajterHundratals sajter med samma medlemskap
Skapa ett gratis konto och delta i diskussionerna.
Logga inSkapa kontoInte medlem? Bli medlem!
Annons:
Numrerade listor görs på nästan exakt samma sätt. Enda skillnaden är att man använder koden
- istället för
- . Koden
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 och .
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?
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.
I DN:s exempel är ”Börsen ned tre dagar i rad” skapad med koden
, dvs. den viktigaste rubriken, och de två mindre artiklarna använder koden
.
Rätt använda rubriker är bra ur flera synpunker:
Text
Att skriva texter i HTML-koden är busenkelt. Varje stycke läggs inom
och
. 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
.
står för break, vilket betyder brytning.
-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
Å
å
Ä
ä
Ö
ö
Å
Å
Ä
Ä
Ö
Ö
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 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.
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 -koden inte har någon som andra koder haft. Precis som med
-koden är detta för att -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 -koden.
Så här ser en länk ut:
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 och ä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 -kod istället för text som ska bli klickbar. Det skulle kunna se ut så här:
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:
Plats Stad Datum Debaser Stockholm 22/4 Trägårn Göteborg 28/4 Så här ser tabellen ut i webbläsaren:
Alla tabeller startar med koden
och avslutas med
.För varje rad i tabellen används
respektive .står för table row, dvs. tabellrad. Rubriker i tabeller skapas med koden
. Det som är så bra med -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
, vilket står för table data. Ju fler -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:
…
För att bestämma bredden på kolumner finns det två sätt. Det klassiska sättet är att ange width-attributet på
- eller -koderna, så här: Eller om du vill göra en kolumn hälften så bred som hela tabellen kan du skriva:
Ett bättre sätt är dock att använda koderna
och . 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: **
** ** **** ** ** ** ** ** Plats Stad Datum Debaser Stockholm 22/4 Trägårn Göteborg 28/4 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
- . Det står för Unordered list, vilket betyder onumrerad lista. För att visa varje punkt i listan används koden