### Hello world ```html <!DOCTYPE html> <html> <head> <!-- Dette er en kommentar. <title> vises i tab-baren --> <title>Hello world</title> <meta charset="utf-8"> </head> <body> <h3>Hello world!</h3> </body> </html> ``` ### XML HTML er en slektning til XML, men er inkompatible. Begge stammer fra SGML. XML kan anses som en forenkling av HTML, slik at det kan gjøre forståelse av HTML enklere. XML betyr eXtensible Markup Language, og er en måte å markere ting på, for å gjøre tekst enklere for en maskin å tolke. ```xml <handleliste> <vare antall="1"> Brød </vare> <vare mengde="2" enhet="kg"> Mel </vare> <vare antall="1"> Såpe </vare> </handleliste> ``` I en slik oppsetning er handleliste forelderen (parent) til vare som er barnet (child). Dette er relative begreper, ens barn er en annens forelder. ### HTML HTML betyr HyperText Markup Language, og begrenser hvilke nøkkelord og attributter man kan bruke. HTML sier noe om hva en side inneholder, men skal til hovedregel ikke si noe om hvordan den skal vises; dette skal helst gjøres med CSS. ### Tagger HTML benytter seg av fire ulike taggetyper: #### 1. !doctype ```html <!DOCTYPE html> ``` Dette er en deklarerende tag øverst i en HTML-fil som sier at det følgende dokumentet er i html5-format. Dette er for å skille seg fra andre språk i XML-familien. Denne blir vanligvis generert automatisk når man bruker Django, så man trenger ikke å bruke denne så ofte. #### 2. kommentarer ```html <!-- Dette er en kommentar. --> ``` I motsetning til andre språk har HTML kun flerlinjekommentarer. Det er ikke ofte man behøver å kommentere i HTML-kode, men kan være greit viss man ønsker å kommentere ut ting under testing. #### 3. standard tagger ```html <div></div> ``` Dette er oppsettet for en standard tag i HTML. Dette bruker man til å dele inn stoff på en side og betegne hva det inneholder, for å senere med CSS å kunne spesifisere utseende. Man kan ikke ha overlappende tagger, dvs. `<div><span></div></span>` er forbudt. #### 4. selvlukkende tagger ```html <img src="example.com/img.jpg" alt="eksempelbilde"> ``` Noen tagger lukker seg selv. Viss du ser i gammel HTML-kode vil du se en skråstrek på slutten av slike: `<br/>.` Dette er for å gjøre siden kompatibel på eldre nettlesere, men er ikke lenger standard, så i HTML5 skriver man bare `<br>`. ### head vs body Inni `<html></html>`-taggen som deklarerer hvor HTML-innholdet er, kommer det alltid to elementer, `<head></head>` og `<body></body>` #### head Her skriver man deklarerende ting, det vil si informasjon om HTML-siden som ikke er synlig. (Man kan gjøre den synlig viss man vil, men det vil man helst ikke.) Inni her legger man gjerne til javascript- og css-referanser. (Man kan også gjøre det i `<body></body>`). Denne er trolig automatisk generert i Django, så man trenger nødvendigvis ikke lage denne. #### body Her kommer selve innholdet, altså det som vises til brukeren. Hvordan dette faktisk ser ut bestemmes i CSS-en. (Man kan også bestemme dette i HTML-dokumentet, men det vil man helst ikke.) Inni her legger man til det man synes er relevant. ### Semantisk HTML De vanligste taggene som brukes i HTML er `<div></div>` for større "bokser" og `<span></span>` for enkeltlinjer/ord. HTML handler om å si hva som er inneholdt i slike tagger, så det kan være greit å prøve å lære seg mer spesifikke tagger etter hvert. Skal du for eksempel ha en artikkel, bør man nytte seg av `<article></article>`, lager man en navigasjonsbar har man `<nav></nav>`. Slike spesifikke tagger kan man lære seg etter hvert (eller overse helt). ### Attributter Attributter brukes for å spesialisere en tag. Hver tag har et bestemt sett med attributter, så her kan det være greit å slå opp. Noen attributter, som class er universelle. Attributter kommer vanligvis med en påfølgende verdi, som man skriver etter et likhetstegn og med verdien inn bokstavparenteser: ```html <link rel="stylesheet" href="path/styling.css"> ``` Noen attributter er boolske, og har ingen verdi; dets tilstedeværelse angir den automatisk som sann: ```html <link src="path/script.js" defer> ``` En ting å merke seg er at HTML dessverre har tre ulike måter å referere til adresser på, src, href, url. Hvilken som skal benyttes avhenger av hvilken tag man bruker. ### Klasser og ID-er. I tillegg til tagger kan man klassifisere tagger ytterligere med attributtene class og id. #### Klasse Dette gir muligheten for en grundigere spesifisering enn hva man kan gjøre med tagger alene. Dette gjør det senere enklere å formatere ting i CSS. ```html <span class="sitat"> Å kommentere eller ikke kommentere </span> <div class="article"> Å spise eller ikke spise </div> ``` Den siste her viser hvordan man kan lage en "artikkel" uten å bruke riktig HTML-tag. Dette bør unngåes, da man kan får to måter å spesifisere en ting på. Bedre er ```html <article class="news-article"> Å spise eller ikke spise </article> ``` Merk at attributt-verdier vanligvis bruker kebab-case, dvs. bindestrek mellom ord, ikke camel_case eller SnakeCase. #### ID Dette brukes for å markere enkeltelementer. Man kan ikke gi to elementer samme ID. ```html <nav id="top-navigation-bar"> </nav> ``` ### Spesielle tegn &, <, > og ; er spesielle tegn i HTML, og bør unngås i tekst. Skal man bruke disse, bør man gjerne skrive &amp; &lt; &gt; &semi;. Generelt kan man skrive &symbolnavn; eller &#symbolnummer; for å få inn spesielle tegn i teksten. Dette trenger man sjelden, men kan være nyttig i visse tilfeller. &nbsp; gir non-breaking space, altså et mellomrom mellom ord som ikke deles ved linjeskift. ### CSS For å gjøre teksten din mer stilfull kan det være greit å benytte seg av CSS. Dette kan gjøres ved å bruke eksterne bibliotek som Bootstrap; da trenger man bare å markere med riktig klasse, eller man kan fikse ting sjøl. CSS bør helst være i en egen CSS-fil, men det er også mulig å skrive ting inn i en `<style> </style>`-tag. CSS står for Cascading Style Sheets. ### selector Vi har forhåpentligvis skrevet et godt HTML-dokument med gode tagger og attributter slik at vi enkelt kan referere til elementer her. Vi kan spesifisere elementer på hovedsaklig tre forskjellige måter, alt etter hvilket element vi prøver å velge: #### 1. tagger Disse kan vi velge ved å bare bruke tag-navnet: ```css span { font-family: serif; color: red; } ``` #### 2. klasser Disse kan vi velge ved å bruke klassenavnet med et punktum foran: ```css .news-article { font-style: italic; font-weight: bold; } ``` #### 3. ID Disse kan vi velge ved å bruke ID-navnet med en emneknagg foran: ```css #top-navigation-bar { background-color: #ccc; } ``` #### Andre Det finnes andre selectorer man kan bruke som velger elementer basert på attributtverdi, eller relasjon til forelder/barn-elementer. Dette kan slåes om opp nødvendig. Som regel bør man kunne få gjort det meste med de overnevnte selectorene. ### Boks-modellen Et html-element kan forestilles som en boks, der `padding` er avstand fra innholdselementet (gjerne tekst) til kanten (`border`). Kanten er ofte skjult, men kan gjøres synlig. Avstanden fra kanten til neste html-element bestemmes av `margin`. ``` --------------------- | margin | | ----border----- | | | padding | | | | --------- | | | | |content| | | | | --------- | | | | | | | --------------- | | | --------------------- ``` ### Ellers vanlige egenskaper #### Visning ``` display-element { display: none display: inline; display: block; display: inline-block; display: table; display: flex; /* ny ~2014 */ display: grid; /* ny ~2017 */ } ``` Disse indikerer hvordan elementet vil oppføre seg på siden. Vanligvis er disse automatisk angitt, f.eks. `<table></table>` har `display: table;`, `<p></p>` og `<span></span>` har `display: inline;`, `<div></div>` har `display: block`. Skal man utnytte CSS til sitt fulle bør man bruke flex og grid. #### border ```css .container-element { background-color: limegreen; border-width: 5px; border-style: solid; border-color: orangered; border-radius: 4px; margin-left: 1em; } ``` Man kan for øvrig kombinere `border-width`, `border-style` og `border-color` i ett: `border: 5px solid orangered;`. Eksempelet ovenfor er kun ment som en demonstrasjon, da det er vanlig å kombinere disse. #### Farger ```css .text-element { color: #f00; color: #ff0000; color: red; color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0); color: hsl(0, 100%, 50%); color: hsla(0, 100%, 50%, 0); } ``` Eksempelet ovenfor viser alle måtene man kan gjøre tekstfargen til et element rødt på; man behøver bare å inkludere én av disse. #### Andre ```css .link-element:hover { cursor: pointer; text-decoration: underline; } ``` Vi tar med ett eksempel på en selector som er avhengig av om musepekeren er på eller ei. Da kan lenker gjøres klikkbare. En vanlig ting å gjøre feil er å bruke `cursor: pointer;` på `div` og andre kontainere, denne skal kun brukes på tekst-elementer. #### Egenskapsrekkefølge ```css div { /* Posisjonering */ /* Visning & boks-modell */ /* Farger */ /* Tekst */ /* Annet */ } ``` Dette er kun ment til veiledning, da det foreligger ingen konvensjoner i webkom for øyeblikket. ### Videre For mer informasjon kan man søke opp ting som "CSS variables", "flexbox", "how to vertically align html element", "css not working properly" og "css grid". Er du usikker på hvordan denne siden er laget, kan du høyreklikke og trykke på "View Page Source".