Våra första webbsidor: Skillnad mellan sidversioner

Versionen från 8 januari 2015 kl. 22.18

Nu ska vi titta på hur vi kan skapa en första webbsida.

Programvaror

För att kunna skapa sidan behöver du något slags editorprogram som du kan använda för att skriva in texten som bygger upp din webbsida. Det finns flera olika dedikerade program som främst är till för att skapa webbsidor, såsom t.ex. Adobes DreamWeaver, Oracles NetBeans osv. Dessa är dock inte nödvändiga, det går faktiskt bra att skriva dina webbsidor i så gott som alla program som man kan redigera text i. Två bra program för ändamålet är Notepad++ och Sublime. Bägge är relativt enkla texteditorer som är anpassade för att skriva kod. Men om du inte har något annat så duger något i stil med Windows inbyggda notepad gott.

Webbpublicering

När du jobbar lite smått, så här i början, duger det bra att bara köra mot filer direkt 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. Ett bra alternativ är dock Webbstjärnan, vilket är en tävling för skolungdomar. De som deltar i tävlingen får en gratis .se-domän och fri plats på ett webbhotell under ett års tid. Detta är en jättebra resurs för skolor och du bör kolla in den. Kanske du och din klass kan bli den som skapar årets bästa sajt för Webbstjärnan!

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 som heter test, ska den döpas till "test.html". Försök dock att döpa dina sidor till något vettigare än så, det blir mycket lättare att hålla reda på allting då. Om du redan från början vänjer dig vid att sätta 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 och så ska man leta reda på en specifik av dessa. Så lägg dig till med goda vanor redan ifrån början!

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8”>
    <title>Första sidan</title>
  </head>
  <body>
    <h1>Första sidan</h1>
  </body>
</html>

Med hjälp av det du läst hitintills, borde du relativt lätt kunna gissa hur denna sida kommer att se ut. Ladda in sidan i din favoritwebbläsare. Såg den 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 text som vi hade som rubrik som sidtitel. Det är helt fritt att ha olika sidtitel och första rubrik.

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 den sett ut så här:

<!DOCTYPE html><html><head><title>Första sidan</title></head><body><h1>Första sidan</h1></body></html>

Det vill säga allt på en enda 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 komprimera koden som bygger upp sidan, så att det blir mindre antal bytes som måste skickas till slutanvändaren. 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. I såna fall 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 sedan 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 leverar till din webbläsare).

"White space"

Webbläsaren har lite speciellt hantering för hur den 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:

<h1> En     rubrik	</h1>

skulle visas likadant som:

<h1>En rubrik</h1>

Det här gör så att ibland så försvinner formateringen som man gjort, till exempel:

Ett
ord
på
varje
rad

skulle visas som:

Ett ord på varje rad

Vilket kanske inte alls var det man tänkt sig. Det finns olika sätt att komma runt detta, men vi återkommer till det senare.

`<p>`

Nej, nu är det dags för en ny tagg, så 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:

<p>Stycken är till för att dela upp löptext.</p>
<p>Man kan också ha olika stycken!</p>

Ovanstående skulle skapa två stycken. Varje p-element skulle bli 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 dock viktigt att tänka på den så kallade semantiken. Varje tagg har ett specifikt syfte, dvs det finns en speciell mening med den och vi ska 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>. Vi återkommer till dem lite senare. Men, kom ihåg; det finns en tanke bakom varje tagg, använd dem för det de är till för!

Att sluta eller inte sluta...

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, bäst att alltid 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:

<!DOCTYPE html>
<html>
  <head>
    <title>Den andra sidan</title>
  </head>
  <body>
    <h1>Den andra sidan</h1>
    <p>Det här är den andra sidan vi skapat</p>
    <p>Det är en väldigt spartansk sida</p>
    <p>Men det blir bättre med tiden...</p>
  </body>
</html>

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

Nästa aktivitet: List-grunder

@@ Rad 109: / Rad 109: @@
 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 [[tagg]]ar, så vi kan åstadkomma något lite roligare...
+Övningar: [[Våra första webbsidor övningar]]
 Nästa aktivitet: [[List-grunder]]