Læringsportfolio - Interaktionsdesign

Strukturering af HTML

Et HTML dokument består altid af nogle grundlæggende elementer.

Grundelementerne i HTML består af:

<!DOCTYPE html>
Doctype er det første man skriver i sit HTML dokument. Den fortæller browseren hvilken version HTML, der bliver anvendt.
<html>
Dette tag fortæller, at vi starter et HTML dokument og at det indeholder alle andre HTML tags.
<head>
Denne kode er placeret mellem <html> og <body>, fungere som en slags container af metatags. Alt der er placeret i <head≶ bliver ikke synligt på siden. Metatags indeholder metadata omkring siden. En meta tag indeholder typisk informationer, som beskrivelse af siden keywords (søgeord) eller andre metatags.

<head> indeholder også <title>, som fungerer som titlen på siden.
<body>
<body> er selve kroppen på siden. Det er alt det synlige på siden. Et body tag består som udgangspunkt af:
- <header>
  Fungere som en slags container for introduktionsindhold på siden eller navigationslinks. Det er her man normalt indsætter logo.
- <nav>
  Består af navigationslink
- <aside>
  Bruges som sidebar på en hjemmeside eller som en fakta boks
- <footer>
  Et område, hvor man typisk skriver adressen på virksomheden og kontakt informationer. Bliver også brugt til vigtige links. Footeren er altid lokaliseret i bunden af siden.

Et eksempel:

<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body>
<header>Dette er en header</header>
<nav>Dette er navigationen</nav>
<aside>Dette er en sidebar</aside>

</body>

</html>

Indrykning

Når man koder er det en rigtig god idé, at lave indrykninger. Det er med til at give dig en god struktur, og giver dig et godt overblik over din kode. Indrykning er meget vigtig, da et HTML dokument hurtigt kan blive uoverskueligt og stort.

Semantiske tags

Semantiske tags er tags, der definerer deres indhold, som eksempelvis: <header> og <nav>, hvorimod ikke semantiske tags, ikke siger så meget som eksempelvis <div> og <span>. Semantiske tags, giver både mening for mennesker og maskiner. Semantiske tags er vigtige at have med i sin kode, da Google bruger det til at rangere din side, ved at den nemmere kan læse indholdet.

Andre semantiske tags

<header>
<footer>
<p>
<nav>
<section>
<article>
<aside>

Ikke semantiske tags

<div> Bruges til at inddele et område.
<span> Et område

Definitionslister:

Defineres med <dt></dt> som er (titlen) <dd> </dd> som er definitionen, vises indrykket i forhold til titlen.

Et eksempel:

Index.html

Index.html er navnet, man kalder sin fil, der skal vises i en bestemt mappe. Den bruges til at fortælle browseren hvilken side, der skal vises som det første når man går ind på en side.

Links

Sådan angiver man et link i HTML.
<a href=”#”>Her er et link</a> <a> fortæller det er et link
href=”side2.html” fortæller hvor linket fører hen.

Tabeller i HTML

I HTML kan man lave tabeller. En tabel består altid af:

<table> Definere tabellens start

<th> Definere et tabelhoved

<tr> Definere en tabelrække

<td> Definere tabelcelle

Tabeller er normalt uden kant, for at give den en kant, har vi givet den 1 px border. Tabeller kan indeholde, tekst, billeder og meget andet.

Typer af links

Man har i koden mulighed for, at indsætte forskellige skrifttyper i forskellige tykkelser, men man skal vide, at de fonte der er på ens computer, ikke kan vises hos ens brugere, hvis de ikke har den installeret. Derfor er en god ide at bruge skrifttyper som er hostet på nettet, fx Google fonts eller Adobe Typekit.

Eksterne links: Det der menes med eksterne links, er at man linker til andre sider uden for serveren.
Interne links: der linkes til en side, der ligger på samme server.
Absolute vs. Relativ adressering Handler om at linke til filer der ligger i samme mappe, og at linke til filer der ligger i en helt anden mappe på serveren. s

Billeder

Du kan indsætte et billede på din side ved hjælp af <img> tagget. Img tagget skal indeholde src=”” Src = Source, også kaldet stien på dansk.

Eksempel: <img src=”stien til dit billede”>

I billeder skal man altid huske, at have en ”alt” attribut med – det er en alternativ tekst der kommer frem, hvis billedet ikke kan indlæses. Alt attributten bruges også til søgemaskiner. <img> er et tag, som ikke afsluttes med et </img> tag.

<img> tagget afsluttes således: <img src=”stien.html” alt=”stien” />

Ovenfor ser vi, at vi afslutter <img> med en skråstreg sidst i tagget.

Kommentar

Det er rigtig vigtigt at skrive kommentar i sin kode under hele processen. På den måde skaber du struktur og overblik over din kode. Du kan på den måde eksempelvis se hvor hver sektion starter og slutter.

HTML
CSS /* Din kommentar her */

Validering

Det er rigtig vigtigt at skrive kommentar i sin kode under hele processen.
På den måde skaber du struktur og overblik over din kode. Du kan på den måde eksempelvis se hvor hver sektion starter og slutter.

HTML
CSS /* Din kommentar her */

Opgave: