IT2805: Webteknologi
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 |