Vil du lære, hvordan du tager en tom side og gør den til en indholdsrig hjemmeside? Så er det vigtigt, at du kender HTML og CSS som to elementære byggeklodser til hjemmesider. Det er dog et kompliceret fagområde, og det kan derfor være svært at vide, hvor man skal starte. Netop derfor har vi udarbejdet denne guide, der tager dig igennem en hurtig introduktion til, hvad du skal kunne.
Her har vi samlet alt det grundlæggende om HTML og CSS, som du skal bruge, hvis du vil kode din egen hjemmeside. Ved at kode kan du skabe et unikt design, der giver besøgende et godt indtryk af dit websted. På den måde får du de værktøjer, du skal bruge til at skabe noget, der er dit helt eget. Men før vi kommer ind på de mere tekniske ting, lad os se nærmere på, hvad HTML og CSS egentlig er her.
Hvad er HTML?
HTML eller Hypertext Markup Language som det egentlig står for – er et kodesprog, der definerer, hvor noget på en side skal hen. Det er HTML, der bestemmer, hvilke lokationsbilleder, tekst, video og andre elementer, der placeres på en hjemmeside. Kort forklaret kan vi se på HTML som den ramme, der udgør vores hjemmeside.
Skal du lave din egen hjemmeside, vil det derfor være helt essentielt, at du har viden om, hvordan HTML fungerer. Et godt eksempel på det er fed tekst. Når du skriver dette i Word, skal du kun fremhæve det, men hvis et program skal forstå, at der er tale om fed tekst, vil det se ud som om dette <strong>er fed tekst</strong>. En forståelse af, hvordan disse symboler hænger sammen, vil også give dig mulighed for at læse, hvordan forskellige websider er opbygget.
Hvad er CSS?
En anden forkortelse vi har nævnt, og som er central for dig, der skal lave din egen hjemmeside, er CSS. Forkortelsen står for Cascading Style Sheets, og handler om, hvordan en hjemmeside styles eller præsenteres. Kort forklaret kan vi sige, at CSS fortæller vores maskine noget om, hvordan indholdet, der er skabt med HTML, skal præsenteres.
HTML er derfor det faktiske indhold, der skal være på siden, mens CSS er, hvordan det skal vises på din nye side. Disse to sprog kombineret er, hvad vi kan betragte som en færdig hjemmeside. Det er derfor vigtigt, at du kender begge dele, hvis du ønsker at kode en hjemmeside med HTML og CSS.
Før du starter på din hjemmeside
Før du kan begynde at oprette selve din side, er der nogle grundlæggende ting, du skal ordne. Den første af disse er webhosting. Du skal have et sted at uploade dit websted, da du opretter kode til det. Her findes et bredt udvalg, så det behøver ikke være dyrt at finde en god webhost.
Dernæst skal du bruge et domænenavn til din hjemmeside. Dette er den adresse, som nogen skal indtaste, hvis de vil finde din side online. I mange tilfælde kan du få dette samme sted, hvor du har købt webhotel, men det er ikke nødvendigvis det billigste.
Så snart du har begge disse på plads, er du klar til at starte dit projekt. her starter vi med HTML som den første byggeklods, du skal mestre.
Lær det grundlæggende i HTML
Hvis du aldrig har skrevet kode med HTML før, kan det være meget at sætte sig ind i. Det er heldigvis langt enklere, end mange tror. Her er det som regel HTML-tagget, som er det mest basale, du bruger til at lave forskellige elementer på din side. Ved at sætte dig ind i, hvordan HTML fungerer, får du et bedre grundlag for at skabe en god hjemmeside. På længere sigt vil en veldesignet hjemmeside bidrage til succes. Vi skal derfor tage nogle eksempler på dette, før vi går videre.
Når vi taler om HTML-tag, er det det, der er inde i <> og </>, vi taler om. Nedenfor kan du se nogle eksempler på, hvordan det fungerer i praksis.
- <b> …. </b> (I dette tilfælde vil teksten mellem de to HTML-tags være fed)
- <h1> …. </h1> (I dette tilfælde vil teksten mellem tags blive betragtet som en H1-titel)
- <p> …. </p> (indholdet her vil blive betragtet som et tekstafsnit)
Dette er de mest grundlæggende HTML-koder, men der er også noget mere kompliceret. Skulle du have lyst til at lave en punktopstilling som denne:
- Bullet
- Bullet
- Bullet
Det ville se sådan ud i HTML
<ul>
<li> Bullet </li>
<li> Bullet </li>
<li> Bullet </li>
Skulle du derimod have lyst til at tilføje et link til et andet sted på din hjemmeside, kræver det en lidt længere HTML-kode Du skal så fortælle koden, hvor du vil linke til, samt hvad teksten for linket skal være
Sådan et simpelt link med HTML-tags vil se sådan ud bag facaden:
<a href=”https://hjemmesidebygger.dk/”>Et link til vores hjemmeside</a>
Forstå HTML-strukturer
Selvom HTML i sig selv er ret let at forstå, kommer tags sjældent alene. Et enkelt tag vil ikke forme nogen webside, hvilket betyder, at det ofte kommer i lange striber kode – eller strukturer som den. Vi vil derfor se nærmere på nogle strukturer, så du kan få en bedre forståelse af, hvordan dette kommer til at se ud. En simpel struktur for en meget grundlæggende hjemmeside vil se sådan ud:
<!doctype html>
<html lang=”en”<
<head>
<meta charset=”utf-8”>
<title>Hej verden!</title>
</head>
<body>
<h1>Hej verden!</h1>
<p>Min første hjemmeside</p>
</body>
</html>
De forskellige elementer, du har læst nu, er som følger:
- <!doctype html> – Dette er åbningen af strukturen.
- <html lang=”eng”> – Denne side angiver, at HTML-dokumentet er skrevet på engelsk.
- <hoved> – markerer, hvor åbningen af hovedsektionen starter. Her er det almindeligt at indtaste koder til analyseprogrammer og lignende.
- <meta charset=”utf-8”> – definerer, hvilket boxset der bruges til at skrive dokumentet.
- <title>Hej, verden! </title> – Titlen på siden (den du ser i din browser)
- <body> – Det er her indholdet på din side starter (det der er synligt)
- <h1>Hej verden!</h1> – H1 overskriften på din side
- < p>Min første hjemmeside</p> – et kort afsnit med teksten Min første hjemmeside.
- </html> – slutningen af dit dokument
