⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

 

Det här är en artikel som är del av en serie där vi ska skapa en webbsida, idag ska du få lära dig HTML grunder – För att kunna fullfölja uppgiften ska du ha en texteditor och en webbläsare. I nästa del går vi igenom grunderna i CSS.

 

HTML

HTML (HyperText Markup Language) är ett uppmärkningsspråk används för att strukturera upp och presentera information på webbsidor. Organisationen W3C » (World Wide Web Consortium) fastställer standarder för hur HTML-kod ska skrivas och användas. HTML är från början avsett för att endast visa text helt utan formatering och utan bilder eller andra layout element. Idag använder vi stilmallar – CSS » för att effektivt formatera HTML dokumentats innehåll och utseende. HTML används för att ange ett dokuments struktur (rubriker, styckeindelning m.m.), metainformation (språk, författare, plats i en hierarki) och i viss mån hur dokumentet skall visas.

 

Textredigerare

Du ska ju skriva koden på din dator, och kommer att behöva en textredigerare till det (du kan använda redigeraren längst ner på sidan för snabbt testa grejer). Windows Notepad och Mac TextEdit / Textredigerare fungerar jättebra, men det kan underlätta att ha s.k. färgkodning. Med rärgkodning så kommer koden att får olika färg, beroende på om det är en tagg, dess attribut eller värde (jag förklarar senare), en kommentar eller vanlig text. Det finns en del bra gratis textredigerare för HTML, och en av de populäraste för Windows är nog Notepad++, som till stor del är översatt på svenska. Komodo Edit som finns för Windows, Linux och Mac är också ett bra alternativ, och har en hel del avancerade inställningar. Sedan har vi ConTEXT, som ska vara bra, men har inte själv någon erfarenhet av den. Min absoluta favorit är en IDE (Integrated Development Enviroment) som heter NetBeans, den har en massa bra funktioner, som resultat i realtid när den används tillsammans med webbläsaren Google Chrome. Det har även dykt upp en ny Open Source IDE för Webbutveckling som heter Brackets (jag gjorde en liten artikel om den här). Vidare finns så kallade WYSIWYG-editorer (WYSIWYG betyder What You See Is What You Get) som Dreamweaver, och den har en designvy som man kan jobba i där man lägger till element med dra & släpp teknik, men jag tycker att man i början ska försöka koda så mycket som möjligt för hand, då det är bästa sättet att lära sig (tycker jag). Som sagt det är inte så viktigt nu i början, vilken du väljer, bara det inte är en redigerare som formaterar texten, som t.ex. Word för då får man med en massa kodsom du inte ser och det resulterar i att sidan inte kommer att fungera som du vill eller inte fungera över huvud taget.

Du kan självklart använda redigeraren längst ner på den här sidan.

 

HTML taggar och element, vad är det?

Ett HTML dokument består av en uppsättning start- och slut-taggar, och dom ser ut så här:

En tagg börjar med ett mindre-än-tecken ( < ) och slutar med ett större-än-tecken ( > ), däremellan så finns namnet på taggen. Efter start-taggen kommer själva texten som ska visas och därefter en sluttagg som är likadan som starttaggen fast den innehåller ett snedstreck ( / ) precis efter mindre-än-tecknet ( < ).

En tagg har alltid ett elementnamn, och mellan taggarna skriver man in innehåll som t.ex. text:

 

Lite jargong

Jag kommer att använda mig av en del HTML jargong som kan vara bra att förstå, först får du se på lite HTML kod:

Taggar

Taggar är det som omger elementen, alltså med ett start-tagg och slut-tagg. I exemplet ovan är dessa taggar: <p>, </p> och <img />.

Attribut
Är i exemplet ovan (med tjock text): <img src=”blomma.jpg” alt=”Bild på blomma” />

Värden
Här är några exemplet på värden (med tjock text): <img src=”blomma.jpg” alt=”Bild på blomma” />

Element
Ett element är allt det här: <start-tagg>Innehåll</slut-tagg>

Källkod
Syftar till texten i en program fil

Ett element är allt från start-tagg till slut-tagg
Start tagg Element innehåll Slut tagg
<p> Det här är ett stycke </p>
<a href=”default.htm”> Detta är en länk </a>
<br/>

Viktigt! De olika HTML-taggarna har en semantisk innebörd och det är viktigt att använda dessa för rätt saker så att de olika sökmotorerna ska bättre förstå och tolka HTML-dokumentet men också för tillgänglighet och användarvänlighet.

 

Då kör vi igång!

Vi börjar med att skapa ett grundläggande HTML dokument, så öppna din textredigerare och skriv in det här:

  • Allt mellan <html> och </ html> beskriver webbsidan
  • Det är mellan <head> taggarna som man kan skriva metainformation som språk, författare, och teckenkodning (mer om det snart)
  • Texten mellan <body> och </ body> är det synliga innehållet på sidan

<html> står högst upp och talar om för webbläsaren att här börjar den HTML-kod som beskriver hur sidan ska struktureras, och avslutningstaggen </html> indikerar slutet av HTML-dolumentet. Innanför <head> & </head> taggarna talar man till exempel om vad sidan heter och vilken teckenkodning man använder (mer om det snart). <body> taggarna anger dokumentets ramar, så allt som skrivs mellan dom hamnar på sidan.

Nu är det dags att döpa sidan och lägga in lite text:

Webbläsarens övre del
Bild: I webbläsarens övre del står nu namnet på sidan

Det är vanligt att man börjar med ett så kallat ”Hello World!” program när man börjar programmering. Så hör att skapa en huvudrubrik skriver du in följande:

Man brukar spara huvudsidan som index.html men du kan döpa din till vad du vill, men du måste använda .html eller .htm som filtillägg. Öppna sidan i din favorit webbläsare för att se resultatet:

Screen Shot Hej Världen utan charset
Resultat: ”Hej Världen” ser inte ut som den ska

Varför blir resultatet så här? Det är för att webbläsaren inte vet vilken teckenkodning vi använder, och för att fixa det får vi lägga till meta information om teckenkodning.

 

Teckenkodning – charset

Om webbläsaren ska förstå vad vi skriver måste vi berätta för den vilken teckenkodning som vi vill använda genom att skriva in meta information (data som är till för webbläsare, sökmotorer mm.) så att webbläsaren förstår tecken som å, ä och ö. Man skriver in informationen direkt efter <head> (start-taggen):

Notering: UTF-8 har valts som huvudsaklig teckenkodning i internetprotokoll (källa Wikipedia) Det är viktigt att den kommer innan någon utskrift, och det första som webbläsaren ska tolka för oss att se är ju <title>.

Som du såg i källkoden så använder jag förskjutning eller indentering av koden, och det gör man för att lättare se strukturen på dokumentet, d.v.s. om något är nästlat så ska det förskjutas till höger. I ovan exempel förskjuts <title> som är barn (direkt ättling i nedåtfallande led) till <head> elementet och är då nästlad. Man får då snabbt en bra bild över dokument strukturen, och det blir lättare att förstå. <h1> är en heading tag och används för att formatera text.

 

 

<DOCTYPE html>

För att en webbsida ska fungera som den ska och att alla webbläsare renderar sidan som det är tänkt, finns det en till mycket viktig komponent. Det är dokument typ deklarationen, som skrivs högst upp i dokumentet:

Den berättar för webbläsaren att i det här fallet handlar det om ett dokument skrivet i HTML version 5 (HTML5). Jag har en lista med andra doctype här.

Kommentarer i koden

Det kan vara bra att i vissa fall kommentera sin kod, speciellt om dokumentet är stort, så testa att klistra in det här ditt dokument:

Som du ser när du kollar webbläsaren så syns inte det.

 

Huvudrubriker

För att skilja på huvudrubriker, under-rubriker och paragrafer använder man olika taggar för att skilja på dom och <h1> är huvudrubrik där h betyder heading, och dom finns ner till storlek <h6> d.v.s. ju lägre nummer destå mindre. Du kan se skillnaden mellan dom här:

  • <h1>

  • <h2>

  • <h3>

  • <h4>

  • <h5>
  • <h6>
  • <p> betyder “stycke” (paragraph) och används för innehålls text.

 

Nästa steg…

Nu ska vi lägga till lite fyllning i form av ett nytt stycke:

Tips: du kan hitta utfyllnadstext om du söker efter ”Lorem Ipsum”.

Du kan experimentera med dessa taggar:

Som du märker finns det taggar som inte har någon slut-tagg, då skriver man ett snedstreck i taggen innan större-än-tecknet ( > ). Vill du ha en bra referens för alla taggar finns länkar längst ner på sidan.

 

Länkar

En mycket viktig del av en webbsida är länkar. För att kunna lägga till en länk så måste man så klart veta URL:en t.ex. http://cr8gr8designs.com. Man skapar en länk så här:

Det finns ett sätt att lägga till en mailadress som länk genom att använda mailto i href attributen > href=”mailto:mailadress@mail.com” < nu startar länken en Email app när man klickar på den. Nu ska vi testa att lägga CSS mellan <head> taggarna och vi lägger till fyra nya element i vår sida – <header>, <section> och <footer> plus <style> som ska innehålla vår CSS. Vi lägger även på en attribut i <html> taggen som anger språk.

Screen Shot index.html
Screen Shot – resultat

 

Tabeller

Nu ska vi skapa en tabell till vår sida. Nedanför kan du se strukturen av en tabell:

HTML table
HTML table

Så här är koden till tabellen:

 

Table Heading

Tabellrubrik definieras med <th> taggen:

ScreenShot: Tabellrubrik
Bild: Tabellrubrik

Som du ser hamnar texten i mitten på en tabellrubrik.

 

Tabellceller som sträcker sig över flera kolumner

För att göra så att en tabellcell fördelas över fler än en kolumn, använder du colspan attributen:

ScreenShot: table colspan
Bild: table colspan

Jag använder style attribut här för att lägga till lite CSS så att men ser vad som är vad, och vi kommer att gå igenom mer i nästa artikel. Som du ser sträcker sig den andra tabellrubriken över tvåkolumner.

 

Tabellceller som sträcker sig över flera rader

För att göra så att en cell fördelas över fler än en rad använder du rowspan attributen:

ScreenShot: table rowspan
Bild: table rowspan

 

Länkar till resurser mm.

HTML5 element list på Mozilla Developer Zone

HTML entities på W3C

Character Entity References in HTML 4 and XHTML 1.0

Skapa din första webbsida – HTML grunder

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: