Guide

Hvad er HTML og CSS?

HTML og CSS er begge frontendkoder til at bygge hjemmesider. Det vil sige alt det, du ser på hjemmesiden.
HTML er den grundlæggende konstruktion af hjemmesiden, eksempelvis tekstbokse og billeder.  Man kan også kalde det skelettet. Hvor HTML er hjemmesidens skelet, er CSS styling af hjemmeside, i alt fra farver, til hvor de forskellige elementer skal placeres.

Der findes et utal af gratis HTML og CSS-programmer. I denne artikel bliver der gjort brug af visual studio code. For at man ikke koder i blinde, er det også en god ide at installere den extension til programmet, der hedder ’Open in browser’. På den måde kan man se den hjemmeside, man er ved at lave i en browser.

Begynder HTML

Når du har hentet programmet, starter du med at lave en ny fil, der hedder index.html.
I toppen af filen kan du lave et udråbstegn, så du kan se metatags. Metatags er udvidet kodning og ikke noget, du skal tænker over nu, men de skal være der, da browseren bruger dem for at generere hjemmesiden.

Når man koder i HTML, bruger man det, der hedder tags. Et tag ser sådan ud <>. Inde i tagget kan man så skrive de elementer, man gerne vil have på sin hjemmeside. Vil du have en overskrift, skriver du <h1> efterfulgt af overskriften og afslutter med </h1>. Din hjemmeside vil nu se sådan ud:

Vil du have en tekstboks, laver du et tag, der hedder <p> skriver din tekst </p>. Din hjemmeside har nu en tekst:

Hvis du ønsker, at din hjemmeside skal have et billede, skal du starte med at gemme valgte billede i samme mappe som koden.  Herefter laver du et tag, skriver <img src = henter billedet fra din mappe alt = billedets filnavn>. En god ting at vide er, at img tags er selvlukkende. Det vil sige, at du ikke slutter af med /> som i de andre tags. At tagget er selvlukkende betyder bare, at du ikke kan skrive i det efterfølgende.

Begynder CSS

Når du har skelettet af din hjemmeside klar i HTML, kan du begynde at style i CSS. Her skal du starte med at importere CSS til HTML head, da det er to forskellige sider, man arbejder på. Dette gøres med koden <link rel>. Nu kan du begynde at style i CSS.  I CSS bruger man ikke tags, i stedet bruger man de såkaldte ”Tuborgklammer”, som ser sådan ud {}. Vil du gerne have h1 (hovedoverskriften) en bestemt farve, skriver du h1 {color}. Når du har skrevet color, vil en farvepalette komme frem, hvor du selv kan vælge farve. Det samme kan gøres med tekstboksen, hvis du vil give den en anden farve. Husk dog, at koden er forskellig.

Nu kan du sådan set gå i gang med at opsætte en simpel hjemmeside. En god tommelfingerregel, når man koder, er at holde sin kode ren. Det vil sige, at man laver linjeskift for hver tag, eller krølletag, man laver, simpelthen for at gøre det mere overskueligt. Hvis du forsat er interesseret i at lære at kode din egen hjemmeside, holder Kommunikation og Sprog jævnligt kurser, hvor du får hands-on erfaring med kodning.

God fornøjelse!