Hittills har webbsidorna bara funnits på den egna datorn. "Publicera" betyder att göra dem tillgängliga för alla på internet - som skillnaden mellan att skriva i en dagbok och att skriva en blogg alla kan läsa.
"Tänk på en hemsida som ett hus man har byggt. Just nu står huset på datorns hårddisk, ingen annan kan besöka det."
Webbhotell (Hosting): "För att folk ska kunna besöka huset måste man flytta det till en tomt på internet. Ett webbhotell är ett företag som hyr ut sådana tomter (serverutrymme) där huset (hemsidan) kan stå."
Domän (Domain): "Men hur hittar folk till tomten? De behöver en adress! En domän är den unika adressen till en webbplats, som till exempel google.com eller aftonbladet.se. Man köper rätten att använda en specifik adress under en viss tid."
"Att köpa en domän och ett webbhotell kostar pengar och kan vara lite krångligt. Men som tur är finns det fantastiska gratistjänster som låter oss publicera enkla hemsidor med bara några klick!"
nunames.se är en sida där man både kan hyra "tomten" och registrera en domän.
Domän = gatuadress för din webbsida (google.se, spotify.com, minecraft.net) - som att din webbsida får en riktig adress på internet.
Förklaring av olika domäntyper:
Webbhotell = "hyra plats" för din webbsida på internet. Servrar som är påslagna 24/7 så folk alltid kan besöka din sida. Som att hyra ett utrymme i en skyskrapa som aldrig stänger.
Din dator → Webbhotell (server) ← Besökarens dator
↑ Skapar sidan | ↑ Lagrar sidan | ↑ Tittar på sidan
"Webbadresser börjar med http:// eller https://. S:et på slutet är superviktigt!"
Poäng: "Tjänster som Netlify och GitHub Pages ger oss HTTPS automatiskt, vilket är jättebra. Webbläsaren varnar om sidan inte använder HTTPS"
Språket webbsidor pratar på internet. Som att skicka vykort - alla kan läsa.
"Är som att skicka information som ett öppet vykort. Alla som hanterar posten på vägen (routrarna vi pratade om dag 1) kan tjuvkika på vad som står."
Samma språk men krypterat/hemligt. Som att skicka brev i låst kuvert.
"Är som att skicka informationen i ett låst och förseglat brev. Bara du och mottagaren har nyckeln. Detta skyddar information som lösenord och bankuppgifter från att stjälas."
Klickar man på ikonen som finns till vänster om adressen så kan man se om sidan är säker.
GitHub Pages och Netlify ger automatiskt HTTPS. Ni behöver inte göra något extra!
Kontrollera att sidorna fungerar lokalt
Rekommenderad mappstruktur:
min-webbsida/
├── index.html
├── style.css
├── bilder/
├── profilbild.jpg
└── bakgrund.png
Orsak: Felaktiga sökvägar
Lösning:
<img src="C:\Users\Namn\Desktop\bild.jpg"> <img src="bilder/bild.jpg"> <img src="./bild.jpg">
Orsak: Fel sökväg till CSS-fil
Lösning:
<link rel="stylesheet" href="style.css">
Vanliga orsaker:
<nav class="huvudmeny">
<ul>
<li><a href="#hem">Hem</a></li>
<li><a href="#om">Om mig</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
/* Styling för nav-containern */
.huvudmeny {
background-color: #333;
padding: 0;
}
/* Ta bort punkterna från listan */
.huvudmeny ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
/* Gör list-elementen horisontella */
.huvudmeny li {
flex: 1;
}
/* Styling för själva länkarna */
.huvudmeny a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
text-align: center;
transition: background-color 0.3s;
}
/* Styling för när muspekaren är ovanför en länk */
.huvudmeny a:hover {
background-color: #555;
}
/* Aktiv sida */
.huvudmeny a.aktiv {
background-color: #0066cc;
}
@media (max-width: 600px) {
.huvudmeny ul {
flex-direction: column;
}
}
@keyframes animationsnamn {
from {
/* Startposition */
}
to {
/* Slutposition */
}
}
/* Eller med procent */
@keyframes animationsnamn {
0% { /* Start */ }
50% { /* Mitten */ }
100% { /* Slut */ }
}
@keyframes blinka {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.blinkande-text {
animation: blinka 2s infinite;
}
<h1 class="blinkande-text">Titta på mig!</h1>
@keyframes snurra {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.snurrande-box {
width: 100px;
height: 100px;
background-color: red;
animation: snurra 3s linear infinite;
}
@keyframes regnbage {
0% { background-color: red; }
16% { background-color: orange; }
32% { background-color: yellow; }
48% { background-color: green; }
64% { background-color: blue; }
80% { background-color: indigo; }
100% { background-color: violet; }
}
.regnbage-box {
width: 200px;
height: 100px;
animation: regnbage 5s ease-in-out infinite;
}
Uppgift:
Problem: Svårt att centrera och arrangera element med vanlig CSS
Lösning: Flexbox = "flexibel box" för modern layout
Gamla CSS = som att möblera med fasta möbler
Flexbox = möbler som automatiskt anpassar sig till rummet
.container {
display: flex; /* Gör container till flex-parent */
}
.item {
/* Barn-element blir automatiskt flex-items */
}
.centrera-allt {
display: flex;
justify-content: center; /* Horisontell centrering */
align-items: center; /* Vertikal centrering */
height: 100vh; /* Hela skärmhöjden */
}
<div class="centrera-allt">
<h1>Perfekt centrerad!</h1>
</div>
.container {
display: flex;
flex-direction: row; /* Horisontellt (standard) */
flex-direction: column; /* Vertikalt */
flex-direction: row-reverse; /* Horisontellt baklänges */
}
.container {
display: flex;
justify-content: flex-start; /* Vänster (standard) */
justify-content: flex-end; /* Höger */
justify-content: center; /* Centrum */
justify-content: space-between; /* Mellanrum mellan */
justify-content: space-around; /* Mellanrum runt */
}
Skapa en "kort-layout":
.kort-container {
display: flex;
gap: 20px;
flex-wrap: wrap; /* Tillåt radbrytning */
}
.kort {
flex: 1;
min-width: 200px;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
text-align: center;
}
<div class="kort-container">
<div class="kort">
<h3>Kort 1</h3>
<p>Detta är mitt första kort.</p>
</div>
<div class="kort">
<h3>Kort 2</h3>
<p>Detta är mitt andra kort.</p>
</div>
<div class="kort">
<h3>Kort 3</h3>
<p>Detta är mitt tredje kort.</p>
</div>
</div>
Uppgift:
Mål: Introducera JavaScript för att skapa interaktivitet på webbsidan.
Nu har vi byggt strukturen (HTML) och gjort den vacker (CSS). Men vad händer om vi vill att vår sida ska reagera när användaren klickar på något? Då behöver vi JavaScript!
JavaScript är som "hjärnan" som får webbsidan att reagera på användarens handlingar. Det är det som gör att knappar faktiskt gör något när man klickar på dem!
Förklaring: Det enklaste vi kan göra med JavaScript är att visa en popup-ruta när någon klickar på en knapp.
<button onclick="alert('Hej från JavaScript!')">Klicka mig!</button>
Förklaring: JavaScript kan ändra innehållet på sidan utan att ladda om den. Här ändrar vi texten i ett stycke.
<p id="mitt-stycke">Original text</p>
<button onclick="andraTex()">Ändra text</button>
<script>
function andraTex() {
document.getElementById('mitt-stycke').innerHTML = 'Ny text!';
}
</script>
Original text
Förklaring: JavaScript kan komma ihåg saker medan användaren är på sidan. Här räknar vi hur många gånger någon klickat på en knapp.
<p>Du har klickat <span id="rakna">0</span> gånger</p>
<button onclick="raknaUpp()">Klicka!</button>
<script>
let antal = 0;
function raknaUpp() {
antal = antal + 1;
document.getElementById('rakna').innerHTML = antal;
}
</script>
Du har klickat 0 gånger
Förklaring: JavaScript kan även ändra CSS-egenskaper. Här väljer vi en slumpmässig färg från en lista.
<button onclick="slumpfarg()">Slumpmässig färg!</button>
<script>
function slumpfarg() {
const farger = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
const slumpindex = Math.floor(Math.random() * farger.length);
document.body.style.backgroundColor = farger[slumpindex];
}
</script>
Obs! Denna kommer att ändra hela sidans bakgrundsfärg!
Grundläggande HTML-struktur och taggar för att bygga webbsidors innehåll
CSS för styling och layout, inklusive färger, typsnitt och responsiv design
Grundläggande JavaScript för interaktivitet och dynamiskt innehåll
Kunskap om hur man publicerar sidor på internet
Grunder i hur webbsidor anpassas till olika skärmstorlekar
Användning av Flexbox för att skapa professionella layouter
Du har nu grundläggande kunskaper inom webbutveckling. Du kan bygga strukturer med HTML, styla dem med CSS och göra dem interaktiva med JavaScript. Det är en fantastisk start!
Kom ihåg: Alla professionella webbutvecklare började någonstans. Du har redan tagit de första viktiga stegen!