Lære Introduktion til HTML for Strukturering af Indhold

Bemærk

Fremadrettet vil vi dække det grundlæggende i HTML, CSS og JavaScript.

Vi vil bruge analogien med at bygge et hus for at hjælpe dig med at forstå koncepterne.

Et generelt overblik vil være tilstrækkeligt, da al kode vil blive genereret ved hjælp af ChatGPT.

HTML er fundamentet for enhver webside. Det definerer strukturen og indholdet på et website, ligesom vægge, døre og tag udgør et hus.

HTML er opbygget af elementer, som typisk kommer i par: et åbnings-tag og et luknings-tag. Disse elementer danner et hierarki, hvor nogle elementer er indlejret i andre for at skabe en meningsfuld sidestruktur.

Eksempel

Klik på Kør kode for at se resultatet:

index.html

Tilføjelse af forskellige tags i HTML

I HTML kan vi bruge forskellige tags til at tilføje forskellige typer indhold på websiden. Her er, hvordan vi kan tilføje tekst, billeder, links og mere:

Tilføjelse af tekst

For at tilføje tekst til websiden kan vi bruge <p>-tagget til afsnit, <h1> til <h6> til overskrifter på forskellige niveauer.

index.html

Tilføjelse af billeder

For at tilføje billeder kan vi bruge <img>-tagget. Angiv billedets kilde (src-attributten) og inkluder eventuelt attributter som alt for alternativ tekst samt width og height for dimensioner.

<img src="image.jpg" alt="Description of the image" width="300" height="200" />

Tilføjelse af links

For at tilføje hyperlinks til andre websider eller ressourcer kan vi bruge <a>-tagget. Angiv URL'en til destinationssiden ved hjælp af href-attributten.

index.html

Tilføjelse af lister

For at oprette ordnede (nummererede) eller uordnede (punkttegnede) lister kan <ol> og <ul>-tags anvendes, henholdsvis. Inden i disse tags bruges <li>-tagget for hvert listeelement.

index.html

Tilføjelse af formularer

For at oprette formularer til brugerinput kan forskellige formularrelaterede tags som <form>, <input> og <button> anvendes.

index.html

Vi kan tilføje en bred vifte af indhold til websiden ved hjælp af disse HTML-tags, fra simpel tekst og billeder til interaktive formularer. Nedenfor finder du websiden med de relevante tags.

index.html

Videovejledning

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Stryg for at vise menuen

Bemærk

Fremadrettet vil vi dække det grundlæggende i HTML, CSS og JavaScript.

Vi vil bruge analogien med at bygge et hus for at hjælpe dig med at forstå koncepterne.

Et generelt overblik vil være tilstrækkeligt, da al kode vil blive genereret ved hjælp af ChatGPT.

HTML er fundamentet for enhver webside. Det definerer strukturen og indholdet på et website, ligesom vægge, døre og tag udgør et hus.

Eksempel

Klik på Kør kode for at se resultatet:

index.html

Tilføjelse af forskellige tags i HTML

I HTML kan vi bruge forskellige tags til at tilføje forskellige typer indhold på websiden. Her er, hvordan vi kan tilføje tekst, billeder, links og mere:

Tilføjelse af tekst

For at tilføje tekst til websiden kan vi bruge <p>-tagget til afsnit, <h1> til <h6> til overskrifter på forskellige niveauer.

index.html

Tilføjelse af billeder

<img src="image.jpg" alt="Description of the image" width="300" height="200" />

Tilføjelse af links

For at tilføje hyperlinks til andre websider eller ressourcer kan vi bruge <a>-tagget. Angiv URL'en til destinationssiden ved hjælp af href-attributten.

index.html

Tilføjelse af lister

For at oprette ordnede (nummererede) eller uordnede (punkttegnede) lister kan <ol> og <ul>-tags anvendes, henholdsvis. Inden i disse tags bruges <li>-tagget for hvert listeelement.

index.html

Tilføjelse af formularer

For at oprette formularer til brugerinput kan forskellige formularrelaterede tags som <form>, <input> og <button> anvendes.

index.html

Vi kan tilføje en bred vifte af indhold til websiden ved hjælp af disse HTML-tags, fra simpel tekst og billeder til interaktive formularer. Nedenfor finder du websiden med de relevante tags.

index.html

Videovejledning

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 2