Nettsider med html

Som nevnt i kappittelet om verktøy, bruker vi Visual Studio Code til å lage HTML-sider. Du kan selvsagt bruke andre editorer (slik som brackets, vim, notepad++ etc), men beskrivelsen av framgansmåte bygger på VSCode.

Når du åpner en ny, tom fil i VSCode av typen .html (filen har et etternavn .html) vil VSCode kunne hjelpe deg med innholdet.
Begynn med å skrive ! + enter, du vil da se følgende kode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

Her skal du bytte tittel, endre Document til Min Side. Merk at alle ord som er inne i < > (vinkelhaker) er tagger, kommandoer som styrer strukturen på sida.

Du skal nå legge inn din egen tekst mellom <body> og </body> taggene:

<h1>Hei - dette er sida mi </h1>
Litt tekst (skriv det du ønsker)
<br>
Mer tekst
på flere linjer - vises som en linje.
<p> Du kan bruke p for paragraf eller br for break for å 
få til avsnitt/linjeskift
</p>
Du kan også legge inn 
<hr>
for å få en linje som deler sida

HTML tagger du skal kjenne til

  • h1 .. h6 --- gir overskrift, h1 størst, h6 minst
  • p --- gir en paragraf <p>litt tekst</p>
  • br --- bryter linja <br> der den står
  • div --- lager en boks med innhold, <div> mye innhold</div> som tar full bredde
  • span --- marker et område i en linje <span>noen ord</span>
  • a --- lager en hyperlink < a href="adresse" >link < /a >
  • img - bilde <img src="filnavn.png">
  • table --- lager en tabell (eget kap om dette)
  • form --- lager et skjema (eget kap)

HTML tagger du bør kjenne til

  • ol --- lager en nummerert liste <ol> <li> nr1</li> <li>nr 2</li> </ol>
  • ul --- lager en punkt-liste (som denne lista) <ul> <li> et punkt </li> <li>nytt punkt</li> </ol>
  • li --- lager et punkt i en liste, ol eller ul
  • article --- marker et område med sammenhengende tekst (handler om et tema)
  • section --- en inndeling av article i mindre delemner
  • header --- topptekst på ei nettside - muligens et sammendrag eller oversikt
  • main --- hovedinnhold på ei nettside - gjerne rett etter header
  • figure --- figur/bilde
  • label --- en etikett, mye brukt i skjema (form) - les mer om dette i det kap.

HTML tagger som kobler til resurser

Disse brukes vanligvis i <head> </head> delen av html - sida.

  • script --- kobler til et javscript (styrer oppførsel, handlinger)
  • link --- kobler til en css fil som styrer utseende (skriftfarge, størrelse osv)

For å lage en script-kobling setter du markøren oppe i <head> ... </head> og lager en ny tom linje (enter).
Skriv script og velg script:src fra forslagene som kommer fram.
Skriv nå navnet på javascript filen : eksempel.js

For å lage en link gjør vi det samme, skriv link - velg link:css og skriv navnet eksempel.css

Nå skal html- sida se slik ut i editoren:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="eksemple.js"></script>
    <link rel="stylesheet" href="eksempel.css">
    <title>Min side</title>
</head>

<body>
    <h1>Hei - dette er sida mi </h1>
        Litt tekst (skriv det du ønsker)
        <br> Mer tekst på flere linjer - vises som en linje.
        <p> Du kan bruke p for paragraf eller br for break for å få til avsnitt/linjeskift
        </p>
        Du kan også legge inn
        <hr> for å få en linje som deler sida
</body>

</html>

For å få samme layout som vist over må du kanskje gjøre følgende:

Trykk Cmd+Shift+P (mac) eller Ctrl+Shift+P (win/linux) og skriv format og velg Format Document.
Da skal innrykk justeres slik at du får samme layout som vist over.

Sida di skal nå se slik ut dersom du åpner den i en nettleser

results matching ""

    No results matching ""