Wikipendium

Share on Twitter Create compendium Add Language
Edit History
Tools
  • Edit
  • History
  • Share on Twitter

  • Add language

  • Create new compendium
Log in
Table of Contents
  1. Læringsmål
    1. Kunnskap
    2. Ferdigheter
    3. Generell kompetanse
  2. HTML
    1. Struktur
      1. Head og Body
    2. Nyttige tagger
‹

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 .
  • Contact
  • Twitter
  • Statistics
  • Report a bug
  • Wikipendium cc-by-sa
Wikipendium is ad-free and costs nothing to use. Please help keep Wikipendium alive by donating today!