Kap 1. Intro til webutvikling

Utviklingsmiljø
- enkel teksteditor som notepad++, textedit, sublime, etc.
- IDE (Integrated Development Environment), fex VS Code
Ditt første prosjekt
- for de fleste: Et første møte med tagger/merker og attributter
- <head> for direktiver som ikke skal vises (head=hode)
  - <title> for overskrift (i vindusrammen)
  - <meta> for metainfo
    - charset="..." for tegnsett (character set)
  - <link> for å lenke inn ressurser (som et stilark)
    - rel="stylesheet" angir lenkens hensikt (relation)
    - type="text/css" for MIME-type
    - href="..." for selve lenken (hyperreference)
- <body> for det som skal vises (body=kropp)
  - <h1> for overskrift (header 1)
  - <p> for avsnitt (paragraph)
  - <a> for lenke til nettside (anchor)
    - href="..." for selve adressen
  - <img> for bilde (image)
    - src="..." for lenke til bildet (source)
    - alt="..." for alternativ tekst (hvis bildelenken feilet)
- stilsetting (CSS):
  - farger (forgrunn, bakgrunn)
  - skrift (fontfamilie)
  - luft (over, under, venstre, høyre)
  - størrelse (høyde, bredde, dybde)
  - innramming (type, tykkelse, farge)
  - skyggelegging (varianter, retning, gradvis)
Filer, tegnsett
- foreslår små bokstaver i filnavn
- filendelser som .html og .css (for HTML og CSS)
  - vil ikke alltid vise filendingen i Windows utforsker
  - "dir" i terminal viser filending
- index.html brukes tidvis som filnavn:
  - hvis en i nettleser utelater filnavnet, som i http://localhost/ibe102/kap1, vil webserver måtte velge seg ei fil
  - webserver (f.eks. Apache) vil da velge f.eks. index.html
  - for spesielt interesserte, dette er direktivet DirectoryIndex i httpd.conf (se apache.org), som dere kan styre f.eks. fra XAMPP-konsollet:
- tegnsett for lagring
  - fast lengde:
    - hvert tegn kodes med like mange bit,
    - som i "gammeldags" ASCII
      - 7-bits: 127 tegn mulig, a-z, A-Z, 0-9, diverse tegn
      - 8-bits: 256 mulige, får med de norske + andre alfabet
        
        æøå lagres som E6 F8 E5 (hex)
    - eller det svært vanlige Windows-1252 (8-bit)
      - i Notepad++ kalt "ANSI" (misvisende)
      - æøå lagres som E6 F8 E5 (hex)
    - lett å forstå/kode, men ikke optimal på plassbruk
  - variabel lengde per tegn, de vanligste kodes med færrest bit
    - som i UTF-8 (Unicode): Hvert tegn lagres med 1, 2, 3 eller 4 byte (8 bit per byte).
      - 0xxxxxxx (2⁷ mulige, altså 127 vanligste tegn, tilsvarer ASCII 7-bit)
      - 110xxxxx 10xxxxxx (2¹¹ = 2048 mulige, definerer 1920 tegn inkl. de norske)
      - 1110xxxx 10xxxxxx 10xxxxxx (2¹⁶ = 65536 mulige)
      - 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx (2²¹ mulige, her finnes "resten" + endel emojier)
    - eksperiment med min teksteditor og UTF-8
      - "abc" til fil1.txt lagres som 3 byte (1 byte per tegn)
      - "æøå" til fil2.txt lagres som 6 byte (selv om det er 3 tegn)
God kode
- reserverte ord må skrives korrekt
- lite eller mye luft mellom ordene er uvesentlig for programvaren (dvs nettleseren)
- for lærere, andre utviklere, og sensor bør koden være lettlest ("pen")
  - innrykk (indent) med tabulator (tab) eller x antall blanke
- teksteditor vil ofte vise koden pent med fargelegging og fornuftig innrykk (pretty print)

Øvelse:

Boka har "ditt første prosjekt"
Jeg la ut øving-X-Y-Z for å lenke 3 sider til en ring.
w3schools sitt HTML tutorial frem til <img>

Kap 2 HTML og CSS

HTML
- Hypertext Markup Language (oppmerkingsspråk for hypertekst)
  - utviklet av briten Tim Berners-Lee ca 1989.
    - han jobbet den gang ved CERN i Sveits, og ville koble sammen tekstdokumenter med hyperlenker
  - er en språkstandard som industrien kan forholde seg til
    - de som skriver kode følger standarden
    - de som lager nettlesere (som skal lese/tolke kode) følger standarden
  - HTML5 er gjeldende utgave (kom i 2008)
  - W3C (World Wide Web Consortium) lager anbefalingene
- HTML har elementer
  - språkregler: syntaks må følges (grammatikken)
    - start+sluttmerker: Som i <strong>...</strong>
    - bare startmerke: Som i <br/> (kortsluttet) og i <img...>
    - attributt til et element: Som i <img src="...">
  - vokabular: mengden ulike element for ulike formål ("alle ordene")
    - mye av dette kommer i kap 4
- Malfil: Det som nesten alle dokument vil bestå av
CSS
- Cascaded Style Sheet ("kaskaderte" stilark)
  - Utviklet av Håkon Wium Lie m.fl. ca 1995
  - eget språk med egne språkregler (syntaks)
- Angir en stil, og må lenkes inn fra HTML
  - lurt å skille innhold+struktur (HTML) og utseende (CSS)
  - lett å bytte stil, bare lenk inn et annet stilark
    - "klovnete.css" med gul bakgrunn og glorete tegn
    - "formell.css" med iskald lysegrå bakgrunn og svarte tegn
- stilsetting av
  - elementtyper, f.eks.
    - p { stil }
    - ... <p>første...</p> <p>andre...</p> ...
  - id-markerte element (bruk # foran navn) f.eks.
    - #kunngjøring { stil }
    - <... id="kunngjøring" ...>
  - klasse-markerte element (bruk punktum foran klassenavn): f.eks.
    - .oppskrift { stil }
    - <... class="oppskrift" ... >
- valg av navn på id og class
  - tall (0-9), bokstav (a til z), understrek (_) eller bindestrek (-)
  - minst to tegn, tall kan ikke brukes som første tegn
  - mulig at æøå kan gi problemer (er bare å prøve...)
  - boka bruker camelcase, som i "viktigBoks"
    - kamelisert: de store bokstavene blir pukler
- avmerking av områder i HTML:
  - <div> ... </div> for større områder
  - <span> ... </span> for små områder som 1 tegn, ord eller setning
  - har også semantiske merker (kap 4)
- CSS box model
  - et element har et innhold
    - <p>bla, bla, bla ... </p>
    - dette innholdet (bla, bla, bla ...) blir en blokk som må plasseres som en boks (rektangel) på nettsiden
  - padding: mellom boks og ramme
  - ramme/kantlinje (border): diverse linjetyper, evt. ingenting
  - margin: fra ramme til naboelement.
  - så det er boks-i-boks-i-boks
- Nivåer
  - egen fil (external, som i de første eksemplene: <link href="klovnete.css">
    - gjelder alle som lenker inn stilfilen (praktisk)
  - eget HTML-element (internal): <style> ... </style>
    - gjelder kun dette dokumentet (litt begrenset, kan ikke gjenbrukes)
  - som attributt (inline): <... style="..." ...>
    - gjelder kun dette elementet (svært lokal)
  - kan blande disse 3 måtene
    - siste definisjon (den mest spesifikke) gjelder
      - inline har høyest prioritet
      - internal har nest-høyest
    - med !important kan en overstyre dette (boka anbefaler det ikke)
  - nettleseren har ofte en stilanalysator (F12)
  - nettleser har også et standard stilark
    - d.v.s. det som gjelder når ingenting annet er sagt
    - f.eks. at <a href=".."> tegnes med blå eller lilla skrift og understreking
  - brukerstilark (for noen nettlesere)
    - du setter stilark for din nettleser, f.eks. om du alltid vil ha stor skrift
    - vil overstyre standard stilark, men blir overstyrt av de 3 andre nivåene
  - altså: Prioritet (presedens) i stilark (viktigste øverst)
    - inline (i style="..." attributt)
    - internal (i <style>-element)
    - external (egen fil)
    - brukerstilark (i din bruker's nettleserprofil)
    - standard stilark (i nettleser, slik levert fra produsenten)

- Validering av nettside
  - må koden (HTML, CSS) være syntaksmessig korrekt?
  - nettleseren tilgir endel feil, gjør sitt beste for å vise noe
    - hopper over ord den ikke forstår
    - tillater mangelfulle sluttmerker
  - første linje <!DOCTYPE html>, for å fortelle klienten (nettleseren) at denne filen bruker kodespråket html
    - (men det går stort sett greit uten)
  - andre programmer (søkemotorer) kan kreve korrekt syntaks
  - http://validator.w3.org
- Kompatibilitet
  - siste utgave er HTML5 og CSS3
  - vil "gamle" (utdaterte) kodeord bli forstått?
    - nye <strong> eller gamle <b>? Begge gir samme utseende pr. i dag (w3s)
  - vil samme kode gi samme utseende i alle nettleserne?
- Relative og absolutte referanser
  - absolutt er fra toppen og ned
    - URL: http://www.xyz.fi/users/kd/vis.html
    - fil: "/kurs/logistikk/LOG904/index.html"
  - relativ er fra dokumentet vi er i
    - ".." betyr opp ei mappe, som i "../bilder/insekt/flue.png"
    - "bilder/mjøsa.png" betyr en fil i undermappa "bilder"
    - "." betyr "der vi er" (ganske unødvendig)
    - "bilde.png" betyr i samme mappe som vi er.
  - relativ er å foretrekke: Forenkler flytting.
    - sålenge en flytter hele mappa (se video)
- Kommentarer
  - HTML: 
  - CSS: /* ... */
  - Hvorfor?
    - lettere for andre å forstå koden
    - lettere for meg (utvikleren) å huske hvordan jeg tenkte
    - enkelt å passivisere kode når en vil prøve noe annet
      - (i stedet for å slette koden)
- Mere info om HTML og CSS
  - W3C og WHATWG: De som lager standardene (og styrer utviklingen)
  - w3schools.com (en av mange online læresteder)
  - google (selvsagt)
  - stackoverflow (SO), diskusjonsforum med moderering
  - Ctrl-U i nettleser (se koden på nettsiden)
  - F12 (inspect code)