Nettsider i dag blir stadig mer avanserte, men for få år siden var det ikke uvanlig at nettsidene var ganske så enkle, med mye mindre dynamisk informasjon enn i dag. De sosiale medienes tid hadde ennå ikke kommet for fullt, og det var langt ifra vanlig å ha en egen nettside. Svært mye av dette er forandret idag, men likevel er det meste av teknologien bak den samme. I dagens internettfokuserte verden, kan det faktisk være ganske praktisk å vite hvordan all denne teknologien bak nettsidene fungerer, og kanskje kunne bruke den selv. Det er det som er temaet for dette innlegget.
HTTP: kommunikasjon over internett
HTTP-protokollen er delt inn i flere typer forespørsel. De fire mest kjente er GET, POST, PUT og DELETE. GET brukes for å etterspørre informasjon, som en nettside. POST brukes for å sende ny data, for så å hente tilbake de oppdaterte dataene/nettsiden. PUT gir serveren beskjed om å lagre ny informasjon, men i motsetning til POST sender den ikke noe tilbake (annet enn en bekreftelse på at alt gikk bra). DELETE sier seg kanskje selv, for mens PUT (og POST) oppretter og oppdaterer ressurser, vil DELETE rett og slett slette dem. Det er også fem ande typer, men disse er det ikke nødvendig å vite noe om for øyeblikket, siden de er betydelig mer tekniske eller mindre brukt.
Protokollen overfører også, i tillegg til selve hyperteksten (innholdet), diverse annen informasjon som sendes i såkalte «headers». Disse kan deles opp i flere katgorier, nemlig de generelle, de som kun er ment for forespørsler, de som kun er for svar og de som inneholder mer informasjon om innholdet i forespørselen/svaret. De generelle inneholder informasjon som datoen og informasjon om tilkoblingen. De for forespørsler inneholder informasjon om hva slags HTTP-forespørsel det er, hva som blir forespurt, hva slags data som forventes som svar og informasjon om nettleseren/programmet som sender forespørselen (kalt User Agent på engelsk). «Headers» av server-typen kan for eksempel inneholde informasjon om serveren og innholdstypen av det som blir sendt (dette er text/html for HTML-innhold). Den siste kategorien inneholder ekstra informasjon, som typisk er lengden på innholdet, språket og tegnkodingen.
CC0
Struktur med HTML
Det bringer oss over på selve sidene. Problemet med å vise fram dataene var det HTML (HyperText Markup Language) som var løsningen på. I internetts begynnelse var meningen med HTML å skape struktur i vitenskapelige dokumenter, men senere ble dette bygget videre på. De første årene var det stort sett Tim Berners-Lee som jobbet med dette og rundt 90-tallet ble HTML presentert for allmenheten.
HTML fikk navnet sitt fra ideen om hypertekst, som er strukturert tekst med hyperlenker til andre tekster. Dette er opprinnelsen til det vi kjenner som linker, altså knapper, eller ord i teksten vi trykker på for å komme til andre steder på internett. Siden HTML er basert på strukturerte elementer, er det naturlig at også utvalget elementer i bruk vil utvides etterhvert. Mens det først kun fantes grunnleggende elementer som de for et avsnitt og en link, er de senere kommet mange nye, som bilder og tekstbokser. I den nyeste versjonen HTML5 (du har kanskje hørt dette begrepet bli brukt som en erstatning til Flash og andre nettleserplugins) er det nå også innebygd støtte for video og lyd.
Oppbygningen
CC0<!DOCTYPE>, <html>, <head> og <body>. Av disse er <head> og <body> de letteste.
<html>-elementet er rett og slett en samlegruppe for <head> og <body>. <!DOCTYPE> derimot, forteller hva slags dokument det er snakk om. Det vanligste er <!DOCTYPE html>, som vil si et HTML5-dokument. I tillegg er det også vanlig med et <title>-element i <head>-delen. Dette forteller tittelen på nettsiden, og vises blant annet i fanelinja i nettleseren. Alle disse elementene må også lukkes, med unntak av <!DOCTYPE>. Dette gjelder de fleste HTML-elementer. De åpnes med <element> og lukkes med </element> (der element er navnet på elementet, for eksempel body, p, div, h1 osv.). Innholdet plasseres i midten. Et grunnleggende HTML-dokument kan derfor se slik ut:<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Innhold -->
</body>
</html>Hvis du åpner et slikt dokument i nettleseren vil du ikke se noen ting! Til det trenger vi flere elementer.
Mange elementer og egenskaper!
I tillegg til de grunnleggende elementene finnes det mange flere (jeg har allerede nevnt noen). Noen eksempler (med forklaring) er:
<p>: et avsnitt<div>: grupperer andre elementer, men lager linjeskift før/etter<span>: grupperer andre elementer, men lager ikke synlig mellomrom<input>: tekstboks, avkrysningsboks og lignende<a>: link<main>: samme som<div>, men signaliserer at dette er hovedinnholdet.<blockquote>: nesten samme som<div>, men markerer et sitat
CC BY-SA 2.0<img> (bildeelementet), er verdt å se nærmere på. For det første trenger ikke <img>-elementet å lukkes. For det andre er det et godt eksempel på et element som trenger ekstra informasjon for å fungere. Siden det ikke har noe innhold (det trengs jo ikke å lukkes), blir informasjonen om hvilket bilde som skal vises plassert i en attributt, eller egenskap. Egenskaper skrives på formen <element egenskap="verdi"></element> (der element fortsatt er elementet, egenskap er egenskapen og verdi er verdien til egenskapen). Et bilde vil derfor kunne settes inn med følgende HTML-kode:
<img src="bilde.png">Dette vil sette inn bildet bilde.png fra samme mappe som dokumentet ligger i. Et annet slikt element er <br>, som setter inn en ny linje.
Hvis du fulgte med tidligere så du kanskje at jeg brukte et element som så slik ut:
<!-- Innhold -->Dette er en kommentar. Den påvirker ikke resultatet i det hele tatt, men hjelper deg å forstå hva som er hva. I stedet for Innhold kan du nemlig skrive hva som helst, selv andre HTML-elementer. Dette er et triks som ofte brukes når man arbeider med HTML og ønsker å midlertidig fjerne et element. Bare skriv
<!-- kommentar --> (der kommentar er kommentaren), så er det som om det aldri hadde finnes.Design: sette det sammen
CC0
Derfor et utseendet og designet nå for tiden kun styrt av stilark med CSS (Cascading Style Sheets). Dette er noe jeg skal ta for meg i neste del av forklaringen på hvordan nettsider virker. Noe jeg imidlertid skal nevne her, er hvor mye mer avanserte nettsidene har blitt etter hvert og hvor mye effekt det har å legge til litt ekstra styling. Jeg har et par gode eksempler på dette. Det første er Facebook. Hvis vi bruker Wayback Machine (arkivtjeneste for nettsider), kan vi se at utseendet fra 2006 varierer svært mye fra slik det ser ut i dag, og virker ikke bra på små skjermer. Det eneste som egentlig er felles er fargen og logoen.
Et annet eksempel man kan bruke for å få en forståelse av hva styling gjør med HTML, er å sammenligne en nettside der alt annet enn HTML er fjernet, med originalen som også inneholder styling. Da vil alt innholdet være under hverandre, med menyer øverst. Ofte vil også menyen vises som en vertikal liste og gjerne ha overdrevent store ikoner og bilder. Her er et eksempel med Multitek sin forside (slik den så ut den 10. oktober) med all styling fjernet: