HTML koder for nettpublisering - Kunnskapsbasen
HTML koder for nettpublisering
På denne sida finner du nyttige HTML koder for nettpublisering og bruk i læringsverktøy, som Digit.
English version: HTML codes for online publishing
En god ressurs for HTML og kodesnutter er W3schools. Her kan man finne forskjellige elementer og kodesnutter: W3schools HTML
Ønsker du mer informasjon om hvordan bygge nettkurs, skjekk ut: Nettkurs 1-2-3
Hva er HTML?
HTML står for HyperText Markup Language, og det er grunnlaget for å lage nettsider. Tanken bak HTML er å strukturere og definere innholdet på en nettside ved å bruke koder, kalt "tags". Her er en veldig enkel forklaring:
1. HTML er som en oppskrift:
- Tenk på HTML som oppskriften til en nettside. Den forteller nettleseren hvordan den skal vise innholdet.
2. Tags er instruksjoner:
- Tags er som instruksjoner i oppskriften. De markerer ulike deler av innholdet. For eksempel, `<h1>`-taggen markerer overskrift, og `<p>`-taggen markerer et avsnitt.
3. Strukturering av innhold:
- HTML lar deg strukturere innholdet ditt. Du kan ha overskrifter, avsnitt, lister, bilder, linker, osv. hver med sin tilhørende tag.
4. Åpne og lukke tags:
- De fleste tags kommer i par – en åpnings-`<tag>` og en lukkings-`</tag>`. For eksempel, `<p>` markerer starten av et avsnitt, og `</p>` markerer slutten av det samme avsnittet.
5. Eksempel:
- Her er et enkelt eksempel:
```html
<html>
<head>
<title>Min Nettside</title>
</head>
<body>
<h1>Velkommen!</h1>
<p>Dette er en enkel nettside laget med HTML.</p>
</body>
</html>
Tekstformatering
For å sentrere tekst med inline styling i HTML, kan du bruke style-attributtet direkte på HTML-elementet. "Style" attributtet er et element i HTML koding om kan forandre på utseende til sin korresponderende del. Denne brukes til å endre farge, posisjon, font osv. Her er en enkel måte å sentrere tekst på:
<p style="text-align: center;">Dette er midtstilt tekst med inline styling.</p>
I dette eksempelet brukes style-attributtet direkte på <p>-elementet for å angi at teksten skal være sentrert. text-align: center; er CSS-stilen som brukes for å oppnå sentreringen.
I digit plattformen så er det mulig å formatere teksten direkte i tekst editoren uten behov for å endre html koden selv.
Her kan du teste ut koden og få mer informasjon: W3Schools Stiler
Her kan du teste ut koden og få mer informasjon: W3Schools Formatering
Bilder
Bilder er essensielle for å gjøre nettkurs og ressurser mer engasjerende og forståelige. De gir visuell støtte som kan hjelpe studenter med å forstå komplekse konsepter og holde interessen deres. Bilder kan også bidra til å bryte opp tekstmengden og gjøre lærematerialet mer tilgjengelig og minneverdig.
Høyrestilt bilde
Her er det bare å følge oppskriften og erstatte delene som er uthevet:
Alternativ tekst: Kort bildebeskrivelse
Lenke til bildet: Linken du kopierer fra nettet eller en annen lagringsløsning
Referanse: Hvem har tatt bildet, hvor bildet er lagret
Kodesnutt: <figure style="padding-left: 20px; float: right;"><img width="500" alt="Alternativ tekst her" src="Link til bilde her"/><figcaption style="text-align: center">Referanse her</figcaption></figure>
Venstrestilt bilde
Her er det bare å følge oppskriften og erstatte delene som er uthevet:
Alternativ tekst: Kort bildebeskrivelse
Lenke til bildet: Linken du kopierer fra nettet eller en annen lagringsløsning
Referanse: Hvem har tatt bildet, hvor bildet er lagret
Kodesnutt: <figure style="padding-right: 20px; float: left;"><img width="500" alt="Alternativ tekst her" src="Link til bilde her"/><figcaption style="text-align: center">Referanse her</figcaption></figure>
Midtstilt bilde
Her er det bare å følge oppskriften og erstatte delene som er uthevet:
Alternativ tekst: Kort bildebeskrivelse
Lenke til bildet: Linken du kopierer fra nettet eller en annen lagringsløsning
Referanse: Hvem har tatt bildet, hvor bildet er lagret
Kodesnutt: <figure style="text-align: center;"><img width="500" alt="Alternativ tekst her" src="Link til bilde her"/><figcaption>Referanse her</figcaption></figure>
Bilde som er tilpasset bredden eller høyde på skjermen
Her er det bare å følge oppskriften og erstatte delene som er uthevet:
Alternativ tekst: Kort bildebeskrivelse
Lenke til bildet: Linken du kopierer fra nettet eller en annen lagringsløsning
Referanse: Hvem har tatt bildet, hvor bildet er lagret
Kodesnutt: <figure><img width="1200" style="height: 100%; object-fit: cover;" alt="Alternativ tekst her" src="Lenke til bilde her" /><figcaption style="text-align: center">Referanse her</figcaption></figure>
Her kan du teste ut koden og få mer informasjon: W3Schools bilder
Lenker
I nettkurs og ressurser spiller lenker en avgjørende rolle ved å tilrettelegge tilgangen til eksisterende informasjon og relevante ressurser. Disse lenkene fungerer som veivisere som leder studenter til eksterne kilder for å utvide deres forståelse, samtidig som de tilbyr tilleggsressurser som beriker læringsopplevelsen. Gjennom bruk av lenker blir ikke bare nettbasert materiale en kilde til kunnskap, men også et verktøy for utforskning og dypdykk i det aktuelle emnet.
Hvordan legge til en lenke
Skriv inn lenken her: Legg inn den lange URL lenken til nettsiden du vil til
Hva er lenken: En kort beskrivelse om hva lenken er
Hva som vises: Skriv inn det du vil leseren skal se som lenken
<a href="Skriv inn lenken her" title="Hva er lenken" target="_blank" rel="noopener">Hva som vises </a>
Eksempel:
Skriv inn lenken her: Legg inn den lange URL lenken til nettsiden du vil til
Hva er lenken: En kort beskrivelse om hva lenken er
Hva som vises: Skriv inn det du vil leseren skal se som lenken
<a href="https://www.w3schools.com/html/html_images.asp" title="HTML koder for bilde" target="_blank" rel="noopener">W2school HTML bilder </a>
Og lenken vil se slik ut: W3school HTML bilder
Endre farge på lenke
Skriv inn lenken her: Legg inn den lange URL lenken til nettsiden du vil til
Hva er lenken: En kort beskrivelse om hva lenken er
Hva som vises: Skriv inn det du vil leseren skal se som lenken
style="color: red; red er den fargen på engelsk du vil lenken skal ha
<a href="Skriv inn lenken her" title="Hva er lenken" target="_blank" rel="noopener" style="color: red;">Her skriver du hva som skal vises som lenken </a>
<a href="https://www.w3schools.com/html/html_images.asp" title="HTML koder for bilde" target="_blank" rel="noopener" style="color: red;">W2school HTML bilder </a>
Og lenken vil se slik ut: W2school HTML bilder
Her kan du teste ut koden og få mer informasjon: W3Schools lenker
Tabeller
I nettkurs og ressurser er bruk av tabeller en god måte å organisere og presentere komplekse data på. Tabeller gir en strukturert og oversiktlig måte å sammenligne og analysere informasjon på, noe som gjør dem uvurderlige for å tydeliggjøre sammenhenger og mønstre. Gjennom tabeller kan studenter raskt og effektivt få tilgang til og forstå omfattende data, noe som bidrar til en mer systematisk og innsiktsfull læringserfaring.
Vanlig tabell
For å endre informasjonen i en tabell i HTML, kan du gjøre følgende:
- For å endre overskrifter i tabellen, rediger innholdet mellom <th> og </th> tagsene.
- For å endre innholdet i cellene, rediger innholdet mellom <td> og </td> tagsene.
- Legg til eller fjern <tr> tags og deres tilhørende <td> eller <th> tags for å legge til eller fjerne rader eller kolonner.
- Husk at <th> tags brukes for overskrifter og <td> tags brukes for dataceller.
Eksempel kode:
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
<td>Row 1, Cell 4</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
<td>Row 2, Cell 4</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
<td>Row 3, Cell 4</td>
</tr>
</tbody>
</table>
Her kan du teste ut koden og få mer informasjon: W3Schools tabeller
Layout eksempler
Det kan lønne seg å inkludere forskjellige gjentagene elementer gjennom nettkurset som byr på variasjon og kan hjelpe leseren gjennom infomrasjonen. Bilder og gruble spørsmål er gode elementer ettersom det bryter opp teksten og gir leseren et avbrekk. Her kommer det noen eksempler på forskjellige elementer som kan være hjelpsomme i utformingen av ressursen.
Her ser du bruken av grublestopp for at å bryte opp teksten og la lesren stoppe opp og tenke over hva de har lest. Det er også lagt en farget stripe over og under innholder for å tydeligjøre infomrasjonen og gi en unversiell utforming for ressursen. Video elementet forsterker pausen og bidrar til bedre læring med varierte læringsmetoder.
Ønsker du mer inspirasjon til layput, skjekk ut: Nettkurs 1-2-3
Hjelp/Support
Ved øyeblikkelig behov for hjelp kan Orakel kontaktes på NTNU hjelp.
Ta kontakt med Seksjon for læringstøtte (SLS) via NTNU Hjelp for pedagogisk støtte.
