Hvordan virker nettsider? Del 1

Hvordan virker nettsider? Del 1: Struktur med HTML


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://
FOTO: IETF HTTP Working Group
Når man begynte å lage nettsider på internett, trengte man både en måte å styre overføringen av data på, men også en måte å vise dataene. Det førstnevnte problemet ble løst ved å innføre HTTP (HyperText Transfer Protocol), en protokoll laget spesielt for å overføre «hypertekst» over internett. En HTTP-server (webserver) kjører på en maskin et eller annet sted i verden, og behandler alle forespørsler som kommer til denne maskinen. I begynnelsen var forespørslene bare mappeplasseringen av fila som man ønsket å få tilgang til (relativt til rotmappa til serveren), men senere ble det å generere sider dynamisk mer og mer utbredt. Den første spesifikasjonen for HTML, kalt HTML/1.1, er fra 1997. En nyere spesifikasjon, HTTP/2, kom i 2015, med mål om å gjøre protokollen raskere og mer effektiv.

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.

404 error
FOTO: Mocho.
CC0
HTTP-serveren sender også en statuskode med hver forespørsel. Den mest kjente er trolig 404, som altså betyr at ressursen ikke ble funnet. Alle statuskoder har tre sifre og kan hovedsakelig deles inn i 5 kategorier som signaliseres med første tall. De som begynner med 1 er kun for informasjon (eks. 100 betyr «fortsett»), de som begynner med 2 viser suksess (200 er vanligst og betyr at alt er ok) og de som begynner med 3 viser omdirigering (301 betyr at ressursen er flyttet permanent). De som begynner med 4 antyder at klienten/brukeren har gjort en feil (404, siden finnes ikke), mens de som starter med 5 forteller at serveren hadde problemer med å få fullført forespørslen (500 betyr «intern serverfeil»).

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

HTML
FOTO: TheDigitalWay.
CC0
En hvilken som helst fil med litt tekst i og med filendelse .html, vil være et HTML-dokument. Hvis du derimot vil ha et gyldig dokument, er det visse standarder du må følge. Det mest grunnleggende dokumenter som går an må ha fire typer elementer: <!DOCTYPE>, <html>, <head> og <body>. Av disse er <head> og <body> de letteste. inneholder ekstra informasjon som nettleseren kan bruke (for eksempel stilark, som jeg kommer tilbake til i neste del av dette innlegget), mens inneholder alt innholdet på siden. <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

<blockquote>gammel runeskrift</blockquote>
FOTO: Jesper Rønn-Jensen.
CC BY-SA 2.0
Mange av elementene er ganske standard, men enkelte, som <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

Nettleservindu med Google åpent
FOTO: JuralMin.
CC0
I tidligere tider ble nettsider designet til å bruke HTML-tabeller for plasseringen av elementene på siden. I de siste årene har man derimot gått mer og mer bort fra dette, for at utseende og design skal være mer uavhengige, og for at det skal være enklere å også tilpasse nettsiden til mobiler uten å ha en separat HTML-side for dette.

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:

3 kommentarer om “Hvordan virker nettsider? Del 1: Struktur med HTML

Omtaler

  • Patrick Sletvold

Legg igjen en kommentar

For å svare på din egen side, skriv inn URL-en til svaret ditt som skal inneholde en link til dette innholdets permalenke-URL. Ditt svar vil da dukke opp (muligens etter moderering) på denne siden. Ønsker du å oppdatere eller fjerne svaret? Oppdater eller slett innlegget, og skriv inn innleggets URL igjen. (Lær mer)