Våra första webbsidor
Nu ska vi titta på hur vi kan skapa en första webbsida.
Programvaror
För att kunna skapa en sida, behöver du något slags editorprogram som du kan använda för att skriva in den text som bygger upp sidan. Det finns flera olika program som främst är till för att skapa webbsidor, såsom t.ex. Adobes DreamWeaver, Apache NetBeans (vilken är gratis), osv. Dessa är dock inte helt nödvändiga, det går faktiskt att skriva webbsidor i så gott som alla program i vilka man kan redigera text. Några bra program för ändamålet är Notepad++, Atom, Brackets och Sublime. Dessa är relativt enkla texteditorer som är anpassade för att skriva kod. Förutom Sublime så är de alla helt gratis, så ladda ner någon av dessa, så du har ett bra verktyg att jobba med! (Sublime är gratis att testa och man kan testa det hur länge som helst).
Webbpublicering
När du jobbar lite smått, så här i början, duger det bra att köra mot filer på din dator. När du blir mer seriös kommer du att behöva lägga dina saker på en riktig webbserver. Det finns många olika sätt på vilket man kan göra detta, kanske har din skola en webbserver med plats för elevmaterial, kanske du köper plats på ett webbhotell eller kanske du sätter upp en egen server.
Vissa webbskaparprogram, t.ex. Netbeans och Webstorm, har inbyggd webbserverfunktionalitet som gör att du kan testa dina sidor på ett bättre sätt. De har även plugins som gör att de kan samverka med vissa webbläsare. Dessa plugins gör att det blir enklare att testa och debugga dina webbsidor.
Filnamn och filändelser
När man sparar en webbsida bör dess filnamn ha ändelsen ".html", då kommer systemet att fatta att detta är ett HTML-dokument. Så om vi skulle vilja skapa en sida och vill att filen ska heta "test", ska den döpas till "test.html".
Försök dock att döpa dina sidor till något vettigare än "test.html", då blir det mycket lättare att hålla reda på saker och ting. Om du redan från början vänjer dig vid att ange vettiga filnamn, så kommer det att betala sig i längden. Inget kan vara jobbigare än att ha en uppsjö av filer som heter mer eller mindre samma sak. Det kan bli en mardröm när man ska leta reda på en specifik fil ibland dessa. Så lägg dig till med goda vanor redan ifrån början!
Det är även en bra idé att bygga upp en vettig katalogstruktur för din webbsajt. Kanske samlar du all grafik i en katalog, all CSS i en annan, osv. Då blir det ännu enklare att hålla reda på var saker finns.
När du väl ska jobba på "riktigt" med webbutveckling, kommer du säkert att utgå ifrån något slags mallsajt. Väldigt få skapar en webbsajt ifrån grunden, man vill slippa allt grundläggande småjobb. Istället utgår man ifrån en bra mall. Då kan man komma igång med det intressanta och roliga jobbet snabbare. En bra mall för webbsajter är; HTML5 Boilerplate. Det är en välgenomtänkt grund som löser många småproblem och som får igång din sajt mycket snabbare. Det är inte fusk att utgå ifrån något liknande! Det är så man jobbar när man webbutvecklar på riktigt.
Den första sidan
Nu har vi alla byggklossar som krävs för att skapa vår första webbsida (visserligen en mycket tråkig sådan). Här följer koden för en basal webbsida, skriv in eller kopiera in den i en tom textfil och spara den sedan med ett vettigt namn:
Med hjälp av det du läst hitintills, borde du relativt lätt kunna gissa hur denna sida kommer att se ut. Klicka på "Result". Såg sidan ut såsom du tänkt dig?
Vi får en i det närmaste blank webbsida, det enda som syns är rubriken ”Första sidan”. Detta kommer även att vara den titel som visas på webbfönstret eller -fliken (nej, ”Första sidan” är definitivt inte en bra titel på en webbsida, men du kommer väl knappast att lägga ut denna sida på nätet? :-)). Vi hade förstås inte behövt ange samma både som rubrik som sidtitel. Det är helt fritt att ha olika sidtitel och första rubrik.
"White space"
Vi ska titta på hur webbläsare hanterar så kallad ”white space”, dvs saker som mellanslag, tabb, enter, osv – alltså tecken som inte ”syns”. Rent generellt kan man säga att webbläsaren försöker dra ihop allt white space så långt som möjligt och ”kastar bort” det som inte behövs. Ett exempel på detta:
De extra mellanslagen försvann alltså och enbart ett blev kvar när sidan visades.
Det här beteendet gör så att formateringen ibland försvinner, till exempel:
Detta kanske inte alls var det man tänkt sig. Det finns olika sätt att komma runt detta, t.ex. genom att använda pre-taggen. Denna är till för att visa upp förformaterad text.
Om vi lägger till pre runt om texten i vårt tidigare exempel, skulle det bli som följer:
Lägg märke till att i HTML-koden står pre på en egen rad och texten fortsätter under denna. I resultatet kan du se att även detta radbyte är med. Det är dock inte nödvändigt att ha pre på en egen rad, såsom i exemplet. Vill du undvika att få en första radbrytning, kan du helt enkelt lägga din text direkt efter pre-taggen.
Som du ser så blir det även lite annorlunda utseende på texten i ett pre-element. Ofta visas innehållet med en icke-proportionell font. Om du vill att det ska se ut som övrig text, måste du använda dig av CSS för att stajla om innehållets utseende.
Att formatera kod
Försök att redan nu lägga dig till med att indentera HTML-koden på ett snyggt och logiskt vis. Det kommer du att tjäna på i längden! Dock så är det som så att indenteringen inte spelar någon som helst roll för själva webbläsaren. Den hade glatt svalt koden även om koden för vår sida hade sett ut så här:
<!DOCTYPE html><html><head><meta charset=”utf-8”><title>Första sidan</title></head><body><h1>Första sidan</h1></body></html>
Det vill säga allt på en och samma rad. Men du kan ju tänka dig hur svårläst det skulle bli om man skrev all kod så! Så gör inte så med kod som du håller på att utveckla!
För kod som ska ut i produktion gäller dock lite andra regler...
Det faktum att inte webbläsaren behöver en massa mellanslag, tabbar, return. osv gör att man kan plocka bort dessa och minifiera koden som bygger upp sidan. Det gör så att det blir ett mindre antal bytes som måste skickas till slutanvändaren. Man kan även välja att komprimera sidan, detta görs oftast av själva webbservern. När man gör stora webbsidor (t.ex. Aftonbladets-sidor), kan man spara in väldigt mycket plats genom att dra ner på överflödiga tecken.
Om man gör detta, bör man skilja på utvecklingskod och den distribuerade produktionskoden som man lägger upp på sin webbserver. Man har alltså en uppsättning snyggt formaterad kod som man jobbar med och sedan använder man ett verktyg som minimerar den koden som ska läggs upp på ens sajt. Lägg märke till att detta är något man låter ett verktyg sköta och inget man gör för hand!
Aftonbladet är dåliga på att göra detta. Gå in på deras sajt och välj "Visa sidkälla" och titta på koden. Vilken röra - tänk dig att behöva hålla reda på allt det innehållet! (Självklart är det inte någon som sitter och kodar varje sida på sajter som Aftonbladet. Istället gör man små mallar som sedan ett program slår samman, fyller med innehåll och levererar till din webbläsare.)
<p>
Nej, nu är det dags för en ny tagg, så att vi kan göra vår sida lite mer innehållsrik!
Taggnamnet "p" är en förkortning av engelskans ”paragraph”, dvs. svenskans ”stycke”. När vi vill ha vanlig text, så kallad löptext, i ett dokument så sätter vi den inom p-taggar. Detta gör att webbläsaren förstår att det är ett sammanhängande textstycke. Ett exempel på dess användning:
Ovanstående skapar två stycken. Varje p-element blir att innehålla respektive exempeltext. Vanligtvis påbörjas varje stycke på en helt egen rad, dvs p-taggen ger en radbrytning. Detta går dock att styra med hjälp av CSS, så man kan få till vilket utseende som helst på ett p-element.
Semantik
När man använder en tagg är det viktigt att tänka på den så kallade semantiken. Varje tagg har ett specifikt syfte, dvs det finns en speciell mening med den. Självklart så ska vi enbart använda taggarna för de syfte de är ämnade för. Även om jag helt och hållet kan definiera om hur en p-tagg uppför sig med hjälp av CSS, så betyder det inte att jag ska göra det. Jag ska enbart formatera och använda den såsom något som är relaterat till ett stycke – det vill säga dess semantiska betydelse. Vill jag ha något slags beteende som det inte finns en tagg för eller att jag vill göra något slags markering som enbart har med slututseendet att göra, då ska jag använda mig av de taggar som inte har en semantiska betydelse; <div> och <span>.
Kom ihåg; det finns en tanke och mening bakom varje tagg, använd dem för det som de är till för!
Att avsluta eller inte avsluta...
P-taggen är en av de taggar som inte alltid behöver en sluttagg. I de flesta fall kommer allt att fungera även om vi utelämnar den. Men i några specialfall kommer det inte att fungera och därför är det, som nämnts tidigare, oftast bäst att skriva dit sluttaggarna.
De flesta verktyg har funktionalitet som gör det väldigt enkelt att skriva dit sluttaggarna, direkt du skriver ”</” så fyller ditt verktyg antagligen automatiskt i korrekt tagg som ska stängas. Så var inte lat och utelämna avslutande taggar!
En sida med mer innehåll
Nu provar vi att lägga med vår senaste tagg i en enkel sida. Något sånt här kan det bli:
Nu har vi åstadkommit en webbsida som knappt skulle varit OK ens i början av 1990-talet. Men det är ju en bra början i alla fall! I kommande aktiviteter går vi vidare med lite fler taggar, så vi kan åstadkomma något lite roligare...
Övningar
Våra första webbsidor övningar
Lägg till de taggar som behövs för att sidans innehåll ska ha korrekt semantik (klicka på "Edit on CodePen" för att utföra övningen).