Se side 8-9. Kapittel 1: HTML5 og CSS Hyper Text Markup Language 1990-årene: Tim Berners-Lee ville strukturere tekster og lage klikkbare henvisninger på nettsider. CSS, Cascading Style Sheets Håkon Wium Lie brukte HTML, men utseendet på nettsidene var ikke optimalt. Han laget CSS som brukes til å styre utseendet til nettsider. 1. Åpne en nettside. Den har CSS. 2. I non nettlesere kan du i toppmenyen velge: vis - stil - ingen stil Nå ser du siden uten CSS. Bilde inn

aftenposten.no Uten CSS:

I 1995 ble programmeringsspråket LiveScript lansert. Nå kunne man skrive kode som skapte interaktivitet. LiveScript ble forløperen til JavaScript, som du skal lære om resten av skole året. JavaScript brukes i dag på 9 av 10 nettsider Hva er en nettleser? Hva er en nettside? Internettapplikasjoner – programmer som kjører i nettleseren. Nettbank, e-post, tegneprogrammer, millioner nettspill Før brukte man Flash, måtte ha en plug-in. Silverlight var Microsofts alternativ. Quic-Time måtte man ha for å se videofilmer og Java for å logge inn i nettbank. HTML5 – nettleseren løser alle disse oppgavene, uten noen tilleggsprogrammer: vise video, spille lyd, spille spill, tegne, vise vektorgrafikk og animasjoner, bruke geolokasjon. Løs PRØV SELV oppgaver på side 11

1.2 Kom i gang med HTML-koding Side 12 1.Lag en mappe du kaller kap1 2.Åpne et utviklerverktøy eller Notisblokk 3.Lagre nytt dokument med filnavn: MinSide.html 4.Skriv inn koden som står på side 13. Velg fil og lagre 5.Åpne filen i en nettleser Åpne koden på side 13 i Kodeeditoren Ulike tagger. Se innsiden av omslaget: … forteller nettleseren at dette er et html-dokument Start- og slutt-tagg Struktureres i og I har vi og endre til "fr" for fransk I har vi overskrift går til. Taggen for avsnitt.

HTML-elementer Side 14 body-element p-element

Sette inn bilder og lenker – side 14 bilde lenke Attributter – side 15 Gir tilleggsinformasjon om HTML-elementer Defineres i start-taggen til HTML-elementer Verdien skal alltid stå i anførselstegn " Legg inn taggene og attributtene, nederst på side 15, i koden din Du finner bildefiler du kan laste ned på elevnettstedet: kode.cdu.no

Et HTML-dokument har en struktur vi kaller DOM – Document Object Model Strukturen ser ut som et slektstre: De taggene som står under hverandre i «slektstreet» ligger "inni" hverandre i koden Dette kaller vi en DOM struktur PRØV SELV Side 16

1.3 Strukturering med semantiske HTML-elementer Semantiske HTML-elementer har navn som sier noe om innholdet Semantisk = meningsbærende Brukes i artikler, blogger, nyheter mm

Vi går gjennom eksemplene fra læreboka Kode 2 Koden til en blogg Side 18 PRØV SELV side 19 Lister Side 20 Tabeller Side 21 og Side 22 PRØV SELV side 22