IT2805 · NTNU

Studieguide for IT2805 Webteknologi

Komplett pensumoversikt for webteknologi ved NTNU — med forklaringer, sentrale begreper, eksamenstips og vanlige fallgruver. Eksamensoptimalisert basert på tidligere eksamener.

Introduksjon

Denne studieguiden dekker pensum i IT2805 Webteknologi ved NTNU. Faget gir en grunnleggende innføring i hvordan man bygger nettsider og webapplikasjoner med de tre kjerneteknologiene HTML (struktur og semantisk innhold), CSS (presentasjon og layout) og JavaScript (oppførsel), og i infrastrukturen de hviler på.

Guiden er bygget opp rundt de ti temaene faget prøver deg i, og rekkefølgen følger hvor tungt de veier på eksamen: JavaScript og CSS er de to tyngste (til sammen godt over halve settet), fulgt av Canvas og SVG, HTML, HTTP og nettverk og DOM-manipulering. Webstandarder dukker opp på alle sett, men med lav vekt hver gang, mens responsivt design, webtilgjengelighet og Ajax er sentrale i dagens emnebeskrivelse og derfor med i guiden, selv om de er lite representert i de eldre oppgavesettene.

Eksamen er en firetimers skriftlig skoleeksamen som teller 100 %. Den har tre deler med ganske fast vekting: flervalg og sant/usant (ca. 30 %), korte skriftlige svar, utfylling og kodeforståelse (ca. 30 %), og kodeskriving i HTML, CSS, JavaScript og canvas (ca. 40 %). Det betyr at du både må kunne gjenkjenne riktig syntaks, spore kode du får utdelt, og skrive kode fra bunnen av. Bruk temaprøvene aktivt — de speiler nettopp disse tre oppgavetypene.

HTML

Eksamensrelevant

HTML-dokumentets struktur, semantiske elementer, blokk vs. inline, tabeller, skjemaer, bilder med alt-tekst, lenker og relative URL-er.

Dokumentstruktur

Et HTML5-dokument starter med <!DOCTYPE html>, etterfulgt av rot-elementet <html> som inneholder <head> (metadata, tittel, lenker til CSS og skript) og <body> (det synlige innholdet). HTML beskriver struktur og betydning, ikke utseende — utseendet styres av CSS.

Blokk- og inline-elementer

Et blokk-element (f.eks. <div>, <p>, <h1>) starter på ny linje og fyller bredden. Et inline-element (f.eks. <span>, <b>, <a>) ligger i tekstflyten og tar bare den plassen innholdet krever. <div> og <span> er generiske beholdere uten egen semantikk; de brukes for å gruppere innhold man vil style eller manipulere, der <div> er blokk og <span> er inline.

Tabeller

En tabell bygges av <table>, rader <tr>, overskriftsceller <th> og datasceller <td>. Antall kolonner bestemmes av hvor mange <td>/<th> som ligger i hver rad. Attributtene colspan og rowspan lar en celle strekke seg over flere kolonner eller rader.

Skjemaer og bilder

Skjema lages med <form> og kontroller som <input>, <textarea> og <button>. En tekstrute er <input type="text">, og et flerlinjes felt er <textarea rows="..." cols="...">. Bilder settes inn med <img>, der src peker på filen og alt gir alternativ tekst som vises hvis bildet ikke kan lastes (og leses av skjermlesere).

Eksempel — tabell med bilde og et skjema. Lag en tabell med to kolonner (bygning og byggeår) der bildet ligger i mappen bilder/, og under den et lite skjema for navn og e-post:

<table>
  <tr><th>Bygning</th><th>Byggeår</th></tr>
  <tr>
    <td><img src="bilder/hovedbygg.jpg" alt="Hovedbygget"></td>
    <td>1924</td>
  </tr>
</table>

<form>
  <label for="navn">Navn</label>
  <input type="text" id="navn" name="navn">
  <label for="epost">E-post</label>
  <input type="email" id="epost" name="epost">
</form>

Legg merke til at hver <label> kobles til feltet via for=id, og at alt alltid settes på bildet.

Relative URL-er

En relativ URL angir veien til en fil i forhold til den siden du er på nå. ../ går ett nivå opp i mappehierarkiet; et mappenavn etterfulgt av / går ett nivå ned. Hvis du står i genre/rock/punk/icecube.html og vil lenke til genre/rock/ramones.html, blir det ../ramones.html (ett opp fra punk, så filen i rock). Tegn deg alltid mappetreet før du svarer.

Nøkkelformler

•Dokumentskjelett: → → +
•Blokk-element = ny linje, full bredde (div, p, h1); inline-element = i tekstflyten (span, b, a)
•Antall kolonner i tabell = antall / per rad
• — alt gir alternativ tekst når bildet mangler
•Relativ URL: ../ = ett nivå opp, mappe/ = ett nivå ned

Vanlige feil

⚠️Tro at antall kolonner styres av eller en width-attributt — det er antallet celler i raden som teller.
⚠️Forveksle
(blokk) og (inline), eller tro at de bare 'virker' når CSS er på.
⚠️Glemme alt-attributten på bilder; den er obligatorisk for tilgjengelighet og fallback.
⚠️Telle feil antall ../ i relative URL-er fordi man ikke tegnet mappetreet først.

Eksamenstips

💡Øv på relative-URL-oppgaver med papir og blyant — de kommer igjen på hver eksamen.
💡Husk standardkontrollene: text, email, button, textarea (rows/cols), og koblingen label↔id.
💡Kunne forskjellen blokk/inline utenat; det dukker opp både i flervalg og i CSS-oppgaver.

Laster...

Laster…