Skapa webbplats/webbsidor

Lite förenklat så skapas webbplatser med tre stycken tekniker:

HTML
Hypertext Markup Language - själva innehållet i webbplatsen
CSS
Cascading Stylesheets ("stilmallar") - design, med färg, form och typografi
JavaScript
Interaktion i webbplatsen, exempelvis en knapp som visar eller döljer en meny

HTML - Hypertext Markup Language

HTML brukar kallas för ett "märkspråk" och skapar själva innehållet (text, bilder, länkar etcetera) i webbplatser. Det tvistas en del om HTML är programmeringsspråk eller inte, men det spelar mindre roll - tänk bara på att HTML = Innehåll.

HTML-kod skrivs med något som heter "HTML-element", vilket i enklare ordalag brukar benämnas "HTML-taggar". HTML-element byggs vanligt vis upp med en start- och en slut-tagg.
Vill vi till exempel skapa en huvudrubrik skriv detta såhär:

<h1>Min överskrift</h1>

I ovan exempel är då <h1> start-taggen som säger "här börjar en huvudrubrik" och </h1> är slut-taggen som säger att "här slutar rubriken" - och allt däremellan är själva texten som syns på skärmen.

Vi har olika nivåer på rubriker, från h1, h2, h3 hela vägen ner till h6.

Vill vi göra ett stycke med text, då heter det elementet p, och skrivs såhär:

<p>Ett stycke med text</p>

Ser ganska enkelt ut väl? (Och ja, det är det ju också!)

För att våra besökares webbläsare ska förstå att det är webbsidor vi vill göra behövs även lite extra kod. Ett exempel på hur en "komplett" webbsida kan se ut är såhär: 

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min webbplats</title>
</head>
<body>
    <h1>Min webbplats</h1>
    <p>Hej, jag heter Mattias och tycker om katter!</p>
</body>
</html>

HTML-filer sparas sedan med filändelsen .html - och startsidan döps till index.html

CSS - Cascading Stylesheet

CSS brukar på svenska benämnas för "stilmallar", vilket är ett ganska bra namn som beskriver lite vad CSS faktiskt gör - det vill säga en mall för vilken stil webbsidor ska ha, med färger, typsnitt, storlekar och liknande.

Att ge något i HTML design med CSS brukar kallas "CSS-regler", det vill säga olika regler för hur olika saker ska se ut.
Vill vi till exempel ge bakgrunden till en webbsida färgen röd, då skriver vi:

body { background-color: red; }

body i HTML är hela webbsidans innehåll, och är det element som omsluter allt synligt. Så sätter vi en bakgrundsfärg på den så gäller det för allt som syns i besökarens webbläsar-fönster.

Vi kan ange färg med namn på färger, exempelvis green, red, blue, yellow och så vidare. Men det finns även andra sätt att ange färg, som exempelvis "hex-koder", där #FF0000 också betyder röd.

Demonstration

Nedan finns en film som visar hur vi kan skapa en enklare webbplats med hjälpa av HTML och CSS (och ytterst lite JavaScript).

Notering: ovan film är lite lång (50 minuter). Starta gärna Visual Studio Code och koda samma sak som mig under tiden jag gör det. Så får du dels prova på lite webbutveckling och dels testköra din utvecklings-miljö.

Du kan ladda ner de färdiga filerna från ovanstående film här: webbplats.zip

Tanken med denna film är inte att ni ska ingående lära er HTML och CSS, utan att få ett exempel och en lättare kännedom över hur dessa bitar hänger ihop.
Ett par sektioner fram, i "Publicering", så går vi igenom hur vi kan göra denna webbplats synlig på Internet.

JavaScript

Med JavaScript kan vi skapa interaktion i våra webbsidor, och göra saker som att läsa in data utifrån, visa/dölja element med knapptryckningar och mycket mer. Ett exempel på hur JavaScript kan se ut är följande:

alert("Hej Webbutvecklings-studenter!");

Ovan gör då en ruta som visas i webbläsaren med frasen "Hej Webbutvecklings-studenter!", samt en knapp för att stänga denna.

Det verkar väl inte heller så svårt? (Det är det inte heller!)

Mer om JavaScript

Det finns en del saker att känna till om JavaScript, saker som vi kommer kika på längre fram i kommande kurser under programmet.
En sådan sak som du kommer stöta på ofta är begreppet "ramverk". Vad är då ramverk? Jo, det finns en hel del olika saker som vi vanligtvis utvecklar med JavaScript, som kan vara krångliga eller arbetskrävande att göra på egen hand. För att komma runt detta har utvecklare utvecklat olika typer av lösningar för dessa problem, som då kallas "ramverk". Det är vanligtvis en eller flera JavaScript-filer som vi kan ladda ner och inkludera i våra projekt, som hjälper oss göra lite mer avancerade webbsidor eller webbapplikationer.

Nedan är ett urval av sådana ramverk:

jQuery
Äldsta ramverket i denna lista. Var väldigt populärt för några år sedan, men lite mindre så nuförtiden. Används mycket för att underlätta till exempel bildvisningar (till exempel att en besökare klickar på en liten bild, och en större version av samma bild visas ovanpå), bildspel (olika bilder som växlar efter några sekunders paus) eller inhämtning av data utifrån.
Mycket av ovanstående som var krångligt att göra för några år sedan har nu blivit enklare med hjälp av senare versioner av CSS och JavaScript, så behovet av jQuery har blivit mindre.
Vi kommer använda oss av jQuery ganska lite i denna utbildning - med undantag av just bildvisning/bildspel när vi kommer in på kurs inom bildbehandling.
React
React är ett lite större ramverk som har blivit populärt på senare år. Utvecklades ursprungligen av Facebook, och just Facebook är ett bra exempel på en webbplats som bygger på React - notera hur Facebook laddar och visar sin information, nästan som en "app" på en mobiltelefon även i webbläsare.
React är ganska komplext att komma in i, men väldigt kraftfullt.
Angular
Ett annat ramverk som är ganska likt React till funktionalitet. Utvecklas till stor del av Goodles utvecklare.
Komplext och kraftfullt även detta.
Vue (uttalas "view")
Även detta ett kraftfullt ramverk, som är lite mindre komplext än ovanstående två.
Gå vidare: Webbserver