Lære Introduksjon til HTML for Strukturering av Innhold

Merk

Videre vil vi dekke det grunnleggende innen HTML, CSS og JavaScript.

Vi vil bruke analogien med å bygge et hus for å hjelpe deg å forstå konseptene.

En generell oversikt vil være tilstrekkelig, siden all koden vil bli generert ved hjelp av ChatGPT.

HTML er grunnmuren i alle nettsider. Det definerer strukturen og innholdet på et nettsted, på samme måte som vegger, dører og tak utgjør et hus.

HTML består av elementer, som vanligvis kommer i par: en åpnings-tag og en lukkings-tag. Disse elementene danner et hierarki, hvor noen elementer er plassert inni andre for å skape en meningsfull sidestruktur.

Eksempel

Klikk på Kjør kode for å se resultatet:

index.html

Legge til ulike tagger i HTML

I HTML kan vi bruke ulike tagger for å legge til forskjellige typer innhold på nettsiden. Her er hvordan vi kan legge til tekst, bilder, lenker og mer:

Legge til tekst

For å legge til tekst på nettsiden, kan vi bruke <p>-taggen for avsnitt, <h1> til <h6> for overskrifter på ulike nivåer.

index.html

Legge til bilder

For å legge til bilder kan vi bruke <img>-taggen. Angi bildekilden (src-attributtet) og inkluder eventuelt attributter som alt for alternativ tekst samt width og height for dimensjoner.

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

Legge til lenker

For å legge til hyperkoblinger til andre nettsider eller ressurser, kan vi bruke <a>-taggen. Angi URL-en til målsiden ved å bruke href-attributtet.

index.html

Legge til lister

For å lage ordnede (nummererte) eller uordnede (punktmerkede) lister, kan vi bruke taggene <ol> og <ul>. Inne i disse taggene brukes <li>-taggen for hvert listeelement.

index.html

Legge til skjemaer

For å lage skjemaer for brukerinput, kan vi bruke ulike skjema-relaterte tagger som <form>, <input> og <button>.

index.html

Vi kan legge til et bredt spekter av innhold på nettsiden ved å bruke disse HTML-tagene, fra enkel tekst og bilder til interaktive skjemaer. Nedenfor finner du nettsiden med de aktuelle tagene.

index.html

Videoveiledning

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 2

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain more about the different HTML tags mentioned?

How do I use these tags to build a simple web page?

Can you give examples of how to combine these tags in a real project?

Sveip for å vise menyen

Merk

Videre vil vi dekke det grunnleggende innen HTML, CSS og JavaScript.

Vi vil bruke analogien med å bygge et hus for å hjelpe deg å forstå konseptene.

En generell oversikt vil være tilstrekkelig, siden all koden vil bli generert ved hjelp av ChatGPT.

HTML er grunnmuren i alle nettsider. Det definerer strukturen og innholdet på et nettsted, på samme måte som vegger, dører og tak utgjør et hus.

Eksempel

Klikk på Kjør kode for å se resultatet:

index.html

Legge til ulike tagger i HTML

I HTML kan vi bruke ulike tagger for å legge til forskjellige typer innhold på nettsiden. Her er hvordan vi kan legge til tekst, bilder, lenker og mer:

Legge til tekst

For å legge til tekst på nettsiden, kan vi bruke <p>-taggen for avsnitt, <h1> til <h6> for overskrifter på ulike nivåer.

index.html

Legge til bilder

For å legge til bilder kan vi bruke <img>-taggen. Angi bildekilden (src-attributtet) og inkluder eventuelt attributter som alt for alternativ tekst samt width og height for dimensjoner.

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

Legge til lenker

For å legge til hyperkoblinger til andre nettsider eller ressurser, kan vi bruke <a>-taggen. Angi URL-en til målsiden ved å bruke href-attributtet.

index.html

Legge til lister

For å lage ordnede (nummererte) eller uordnede (punktmerkede) lister, kan vi bruke taggene <ol> og <ul>. Inne i disse taggene brukes <li>-taggen for hvert listeelement.

index.html

Legge til skjemaer

For å lage skjemaer for brukerinput, kan vi bruke ulike skjema-relaterte tagger som <form>, <input> og <button>.

index.html

Vi kan legge til et bredt spekter av innhold på nettsiden ved å bruke disse HTML-tagene, fra enkel tekst og bilder til interaktive skjemaer. Nedenfor finner du nettsiden med de aktuelle tagene.

index.html

Videoveiledning

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 2