Ønsker du å lære hvordan man tar en blank side og gjør den om til en innholdsrik nettside? Da er det viktig at du kjenner til HTML og CSS som to elementære byggeklosser for nettsider. Imidlertid er dette et komplisert fagområde, og det kan derfor være vanskelig å vite hvor man skal starte. Nettopp derfor har vi laget denne guiden som tar deg gjennom en rask introduksjon til hva du bør kunne.
Her har vi samlet alt det grunnleggende om HTML og CSS som du vil trenge dersom du ønsker å kode opp din egen nettside. På denne måten får du de verktøyene som er nødvendig for å skape noe helt eget. Men før vi går inn i det mer tekniske, så skal vi se nærmere på hva HTML og CSS egentlig her.
Hva er HTML?
HTML eller Hypertext Markup Language som det egentlig står for – er et kodespråk som definerer hvor noe på en side går. Det er HTML som vil avgjøre hvilken plassering bilder, tekst, video og andre elementer plasseres på en nettside. Kort forklart kan vi se på HTML som rammeverket som utgjør nettsiden vår.
Skal du lage din egen nettside vil det derfor være helt essensielt at man har kunnskaper om hvordan HTML fungerer. Et godt eksempel på det er bold tekst. Når du skriver dette i Word trenger du kun markere det, men om en et program skal forstå at dette er fet tekst, så vil det se slik ut <strong>er bold tekst</strong>. En forståelse for hvordan disse symbolene henger sammen, vil også la deg lese hvordan forskjellige nettsider er konstruert.
Hva er CSS?
En annen forkortelse vi har nevnt, og som er sentral for deg som skal lage din egen nettside, er CSS. Forkortelsen står for Cascading Style Sheets, og handler om hvordan styling eller presentasjon en nettside får. Kort forklart kan vi si at CSS fordeler maskinen vår noe om hvordan innholdet laget med HTML skal presenteres.
HTML er derfor det aktuelle innholdet som skal på siden, mens CSS er hvordan det skal vises på siden din. Disse to språkene slått sammen er det vi kan anse som en ferdig nettside. Det er derfor viktig at du kjenner til begge to dersom du ønsker å kode nettside med HTML og CSS.
Før du starter på nettsiden din
Før du kan begynne å lage selve siden din, så er det noen grunnleggende ting du må ordne. Den første av disse er webhosting. Du må nemlig ha et sted å laste opp nettsiden din etterhvert som du lager kode for den. Her finnes det et bredt utvalg tilgjengelig, så det trenger ikke være kostbart å finne et greit webhotell.
Deretter vil du trenge et domenenavn for nettsiden din. Dette er adressen noen må taste inn dersom de ønsker å finne siden din på nett. I mange tilfeller kan du få dette samme sted som du har kjøpt webhotell, men det er ikke nødvendigvis det billigste.
Straks du har begge disse på plass, så er du klar til å ta fatt på prosjektet ditt. her begynner vi med HTML som den første byggeblokken du bør mestre.
Lær det grunnleggende i HTML
Dersom du aldri har skrevet kode med HTML før, så kan det være mye å sette seg inn i. Heldigvis er det langt enklere enn mange tror. Her er det gjerne HTML tag som er det mest grunnleggende du bruker for å opprette ulike elementer på siden din. Vi skal derfor ta noen eksempler på dette før iv går videre.
Når vi snakker om HTML tag, så er det det innenfor <> og </> vi snakker om. Nedenfor kan du se noen eksempler på hvordan dette fungerer i praksis.
- <b> …. </b> (I dette tilfellet vil teksten mellom de to HTML Tags være i Bold)
- <h1> …. </h1> (I dette tilfellet vil teksten mellom tags bli ansett som en H1 tittel
- <p> …. </p> (innholdet her vil bli ansett som et avsnitt tekst
Dette er de mest grunnleggende HTML kodene, men det finnes også litt mer kompliserte. Skulle du ønske å lage en punktliste slik som denne:
- Punkt
- Punkt
- Punkt
Så ville det sett slik ut med HTML
<ul>
<li> Punkt </li>
<li> Punkt </li>
<li> Punkt </li>
Skulle du derimot ønske å tilføre en link til et annet sted på nettsiden din, så krever dette en litt lenger HTML kode. Da må du nemlig fortelle koden hvor du ønsker å linke til, samt hva teksten for linken skal være.
En slik enkel link vil med HTML tags se slik ut bak fasaden:
<a href=”https://nettsidelab.no/”>En link til hjemmesiden vår</a>
Forstå HTML strukturer
Selv om HTML i seg selv er ganske enkelt å forstå, så vil tags sjeldent komme alene. En enslig tag vil ikke forme noen nettside, noe som betyr at det gjerne kommer i lange remser med kode – eller strukturer som det gjerne omtales som. Vi skal derfor se nærmer epå noen strukturer slik at du kan få en bedre forståelse for hvordan dette vil se ut. En simpel struktur for en helt basic nettside vil se slik ut:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Min første nettside</p>
</body>
</html>
De forskjellige elementene du har lest nå er som følger:
- <!doctype html> – Dette er åpningen av strukturen.
- <html lang=”eng”> – Denne sier at HTML dokumentet er skrevet på engelsk.
- <head> – markerer hvor åpningen av head avsnittet starter. Her er det vanlig å legge inn koder for analyseprogrammer og lignende.
- <meta charset=”utf-8”> – definerer hvilke boksset som brukes til å skrive dokumentet.
- <title>Hello, World! </title> – Tittelen på siden (den du ser i nettleseren din)
- <body> – Her starter innholdet på siden din (det som er synlig)
- <h1>Hello, World!</h1> – H1 overskriften på siden din
- <p>min første nettside</p> – et kort avsnitt med teksten min første nettside.
- </html> – avslutningen på dokumentet ditt
Om Mats
Mats er utdannet interaksjonsdesigner og har erfaring som gründer, noe som vil si at han ikke bare er kresen når det kommer til design og brukervennlighet, men også effektivitet. Målet til Mats er derfor å klare å finne de løsningene som har gode muligheter for sømløse brukeropplevelser uten at de blir kronglete å jobbe med.
