Kristian Bror januar 26, 2018

Innlegget leses best på den opprinnelige studentbloggen

Mange kan oppleve inngangen til produksjon og posting av eget materiale på internett som vanskelig, særlig siden bygging av nye nettsteder gjerne innebærer bruk av kodespråk som HTML, CSS eller PHP. Her kommer derfor en kjapp innføring i hva HTML (HyperText Markup Language) er, hvordan det virker og hvordan unngå det, dersom man ønsker det.

 

HTML er det grunnleggende kodespråket vi i dag benytter oss av for å bygge nettsteder, og virker ved at nettleseren leser koden som en beskrivelse for hvordan nettsiden skal se ut. Når du for eksempel besøker denne nettsiden, vil nettleseren finne noe som ser omtrent slik ut: 

Dette er for de fleste av oss et uforståelig rot av tekst i ulike farger, og nettleseren oversetter derfor teksten til bilder, farger og tekst. Etter at nettleseren har lest igjennom rotet, ender den opp med å i stedet vise deg noe mye mer brukervennlig, nemlig dette:

Hvordan gjør nettleseren dette? Når nettleseren skal oversette kode til et forståelig nettsted, leter den etter ulike tag’er, slik som <!DOCTYPE html> – som forteller hvilket språk nettsiden er kodet i, i dette tilfellet HTML, <html> – som markerer starten på HTML-koden, og gjør det lettere for nettleseren å forstå hvordan den skal lete. Når nettleseren vet hva den skal se etter, og hvordan den skal lete, starter jakten etter de tre innholdstag’ene; <head>, <body> og <footer>.

<Head>-tag’en forteller nettleseren hva som skal stå helt øverst på siden, i vårt tilfelle navigasjonslinja og tittelfeltet. I tittelfeltet finner vi nettsidens navn «Kristian Bror Vevelstad» og beskrivelse «Min ferd gjennom den digitale verden».  I tillegg finner vi en del annen kode under <head>-tag’en, slik som søkemotoroptimisering (SEO), Googles tag manager og CSS-beskrivelsene som er et overordnet dokument som forteller hvordan ting som skrifttype, skriftstørrelse og andre lignende elementer skal se ut. CSS er et eget skriftspråk vi ikke skal gå inn på nå, men som du kan lese mer om her.
<Body>-tag’en omfatter selve innholdet på nettsiden, så i vårt tilfelle selve blogg-innleggene i rekkefølge, med sine respektive titler, innhold og kommentarfelt, og sidelinjen, hvor jeg har plassert lenker til sosiale media og de nyeste kommentarene fra rundt på siden. Siden jeg bruker WordPress til å drive nettsiden finner vi i  tillegg informasjon om nettsidens tema, og hvordan dette skal oppføre seg.
<Footer>-tag’en er linja helt nederst på nettstedet, og inneholder gjerne informasjon om hvem som eier og drifter nettstedet, og også helst kontaktinformasjon. I mitt tilfelle er footeren tom, og virker som «en avslutning på nettsiden i en annen farge.»
Alle åpningstag’er trenger også en tilsvarende lukke-tag, så på slutten av <head>-tag’en, og før <body>-tag’en begynner finner vi en </head>, som markerer slutten på headeren.

Mange bruker i dag mye heller verktøy som gjør all denne byggingen for seg, slik som WordPress, SquareSpace eller Adobes Dreamweaver. WordPress og Squarespace er på overflaten ganske like, begge er nettbaserte verktøy som gir deg muligheten til å bygge ditt eget nettsted, i oppstarten benyttet medstudent Kristian Østlie seg av Squarespace, men gikk over til WordPress etterhvert siden mulighetene for å skreddersy nettsiden slik han ønsket (også med tanke på nettbutikk senere) var bedre hos WP. Han beskriver forskjellen slik:

Squarespace er tilrettelagt for enkel bruk over flere plattformer med f.eks. egen blogg app til apple og android. De har også egen intergrert analytics del som er grei nok. Fokuset er veldig på at det skal være enkelt for brukeren. WordPress er mer åpent for tilrettelegging og tredjepart. Det er enkelt når man har satt seg inn i det og man kan bygge videre til å bli store sider (blur.se er et eksempel) Det er også enklere å skreddersy etter dine ønsker da du starter med ett theme og konkretiserer dette i motsetning til squarespace hvor du endrer bilder og tekst på themet i stor grad.» – Kristian Østlie

Forskjellen til mer konfigurerende, og Software-baserte verktøy som Adobes Dreamweaver baserer seg i hovedsak på hvordan de nettbaserte som nevnt over i hovedsak brukes til å redigere temaer eller implementere utvidelser, bygger man med Dreamweaver hele nettstedet fra grunnen av. Her vil man måtte sette inn «wrappere» som inneholder tagger, og derfra sette inn medier selv. I tillegg vil man måtte styre hele nettstedets filer selv, mens Squarespace eller WordPress gjør dette for deg.

 

Hvis du fortsatt ønsker å sette opp et nettsted har du nå fått en grunnleggende innføring i hva HTML er og hvordan det virker, og hvordan man best kan benytte seg av det.