IT2805: Webteknologi

Tags:

webtek

NB! Denne siden er under konstruksjon og er derfor ikke komplett. Legg gjerne til informasjon der det mangler.

Læringsmål

Fra https://www.ntnu.no/studier/emner/IT2805/2021

Kunnskap

Historikk og utvikling av World Wide Web og assosierte teknologier
Klient-tjener arkitetkuren for web og kommunikasjonsprotokollen HTTP/HTTPS.
Formater og språk som benyttes i moderne web-sider og -applikasjoner; HTML, XHTML, CSS, XML, XSLT, Javascript, DOM
Webprogrammering med Javascript/DOM (klientside)
Prinsipper for god design, universell utforming, multiplattform-applikasjoner

Ferdigheter

Design og utvikling av websider og webapplikasjoner
Bruk av verktøy

Generell kompetanse

Anvendelse av webteknologi
Innhenting av informasjon, benytte dokumentasjon og spesifikasjoner

HTML

HTML er et markeringsspråk (markup language) for strukturering av nettsider. HTML-kode er tekst i klammer <html>, disse kalles gjerne for tagger. Et element består som regel av to tagger, en start-tag og en slutt-tag, som f.eks. <body> </body>. Mellom taggene kan man legge inn innholdet man vil ha i elementet.

Alle elementer kan også ha attributter som gir ytterligere informasjon om elementet. Attributter kan kun legges til i start-taggen. I <a> taggen brukes for eksempel href attributten til å spesipisere URL-en til nettsiden en lenke fører til.

<body>
    <a href="https://example.com/">example.com</a>
</body>

Noen elementer som <img> og <br> kun består kun av én tag. Disse kalles for void elementer og skal ikke ha innhold på samme såte som andre elementer, de skal kun ha attributter.

<body>
    <img src="bilde.jpg" alt="bilde">
</body>

Struktur

Et HTML dokument må følge en definert struktur for å kunne bli lest riktig av en nettleser. Alle HTML dokumenter skal starte med en deklarasjon som forteller nettleresen hvordan den skal lese dokumentet. Ved å skrive <!DOCTYPE html> forteller man nettleseren at dokumentet skal leses som et HTML5 dokument.

Dokumentet trenger også et rot-element hvor alle andre elementer skal ligge. Det elementet heter <html> og alt innholdet i dokumentet, uten om deklarasjonen, skal ligge mellom start- og slutt-tagger til <html> elementet.

Head og Body

<html> elementet har to underelementer, <head> og <body>.

<head> elementet inneholder informasjon om dokumentet, innholdet i <head> blir ikke vist på nettsiden. Her ligger blant annet koblinger til stilark, fanetittel og metadata.

I <body> ligger alt innholdet som skal vises på nettsiden, f.eks. overskrifter, paragrafer, bilder, tabeller o.l.

Dette er et eksempel på hvordan et HTML dokument kan se ut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Nyttige tagger

Det finnes en del HTML tagger, her er en liste med noen nyttige tagger man burde kunne:

Tag	Beskrivelse
`<a>`	Definerer en lenke
`<article>`	Definerer en artikkel
`<button>`	Definerer en trykkbar knapp
`<canvas>`	Definerer et canvas for å tegne grafikk med f.eks JavaScript
`<div>`	Definerer en vilkårlig seksjon i dokumentet
`<figure>`	Definerer en figur, ofte brukt med `<img>`
`<figcaption>`	Definerer en beskrivelse til `<figure>`
`<footer>`	Derfinerer en footer
`<form>`	Definerer et skjema for bruker-input
`<h1>` til `<h6>`	Definerer overskrifter der h1 er størst og h6 er minst
`<header>`	Definerer en header
`<img>`	Definerer et bilde
`<input>`	Definerer et input-felt, brukes ofte med `<form>`
`<label>`	Definerer en label for et input-felt
`<li>`	Definerer et punkt i en liste
`<link>`	Definerer en relasjon til en annen fil, ofte til CSS-stilark
`<main>`	Definerer hovedinnholdet til et dokument
`<nav>`	Definerer et område navigeringslenker
`<ol>`	Definerer en ordnet liste (nummerert liste)
`<p>`	Definerer en paragraf
`<script>`	Definerer et område for JavaScript
`<ul>`	Definerer en uordnet liste

Written by

havardnyboe

Last updated: Sat, 13 Nov 2021 01:05:11 +0100 .