Embedded Files
Hvad handler det om?
Hvad handler det om?
I det første forløb skal vi starte med at stifte bekendtskab til de grundlæggende værktøjer i webudvikling.
Herefter skal vi så udvikle et nyt websted til en fiktiv kunde ud fra en case, og du kommer i denne forbindelse til at arbejde med både kommunikationsplanlægning, grafisk design og praktisk udvikling af website med HTML CSS.
Introduktion til HTML
Introduktion til HTML
Vi starter med at installere en editor til at lave hjemmesider med. Download én af disse editors:
Brackets (brugt i video - men phoenix code nedenunder er nyere).
Brackets er blevet nedlagt som en del af MS samarbejde med Adobe men er siden genopstået som open source software 😁 . Da alle videoerne er lavet med, og tager udgangspunkt i, brackets funktioner, anbefales det at du bruger denne.
Phoenix Code (anden anbefalet editor)
Phoenix code er mere moderne og hjælper en smule mere i kodearbejdet end Brackets! Phoenix code har overtaget stafetten fra Brackets, der nu ikke længere bliver udviklet på. Det er også godt det samme, da Phoenix editoren på mange måder er mindst ligeså god som Brackets. Eneste ulempe er at videoerne til højre er lavet med Brackets, kan der være nogle mindre forskelle i forhold til arbejdet i Phoenix - men det burde ikke volde de store problemer...
Andre mulige editors:
Mens din editor bliver downloadet og installeret, ser vi videoerne til højre. Hvis du ikke har lavet hjemmesider før, er det vigtigt at du ser disse, inden du går igang med at lave den første øvelse!
1. øvelse: Hands on.
1. øvelse: Hands on.
NU skal du selv til tasterne. Vi skal lave et simpelt site sammen bestående af en forside og 3 undersider. Du skal bare gøre præcis som jeg gør i videoen!
Selvom du tænker at du har knækket koden, så lad være med at gøre noget anderledes endnu. Du skal nok komme til at lave dit helt eget lige om lidt.
Du skal heller ikke bekymre dig om sitets udseende endnu - det tager vi hul på lige om lidt, når vi skal arbejde med CSS (cascading style sheets)!
2. øvelse: Lav sitet du ser herunder
2. øvelse: Lav sitet du ser herunder
I denne øvelse skal blot bruge HTML til at formattere den tekst du finder i tekstkorpus linket til højre. Her finder du også link til billedet (med de 3 cirkler) du skal bruge.
Hvis du har brug for hjælp til at finde ud af hvordan du indsætter et billede i HTML er der som altid god hjælp at hente hos w3school.com.
Se evt. også w3schools HTML element reference for en komplet oversigt over alle tilgængelige HTML tags!
Dette skal på dit portfolio site
Dette skal på dit portfolio site
Beskriv hvad HTML er, og hvilken funktion det har i tilvirkningen af hjemmesider.
Beskriv den grundlæggende opbygning i en HTML fil
Beskriv de vigtigste tags du har benyttet i øvelse 1 og 2.
Vis resultatet af øvelse 2 på siden.
Vil du vide mere?
Vil du vide mere?
Komplet oversigt over alle HTML tags i w3schools HTML tag reference
Prøv også w3schools HTML tutorial
Brug for at teste din viden om HTML? Prøv w3schools HTML exercises!
Page updated
Google Sites
Report abuse