HTML og CSS 16. januar 2015 16.01.2014
Dagens program Litt repetisjon fra sist (Innblandet litt ny terminologi og nye elementer) Bilder CSS Skrifttyper Farger Validere (igjen) Hvordan jobbe hjemmefra
Repitisjon: HTML-skjelettet <!DOCTYPE html> <html lang= "no" > <head> <meta charset= "utf-8" /> <title>Tekst</title> </head> <body> Innhold </body> </html> Presentasjonens tittel 16.01.2014
Repetisjon: Elementer og attributter Byggesteinene i HTML-dokumenter er elementer Alle elementnavn skrives med små bokstaver Eksempel: <h1>God morgen</h1> Dette elementet heter h1 Elementets innhold er «God morgen» Start-tagg: <h1> Slutt-tagg: </h1> Alle elementer må åpnes med en start-tagg og lukkes med en slutt-tagg De fleste HTML-elementer kan ha ett eller flere attributter Eksempel: <a href="http://www.hioa.no/">Lenke til HiOA</a> Attributter er par av navn og verdi Verdien skrives med anførselstegn rundt
Blokk- og inline-elementer Blokk-elementer Visuelt: Vises på en ny linje og avsluttes med et linjeskift Innhold: Kan generelt inneholde ren tekst, andre blokkelementer og inline-elementer Inline-elementer brukes til å merke opp bokstaver, ord eller setninger i blokkelementer Visuelt: Vises ikke på en ny linje, men flyter som en del av teksten i blokkelementet Innhold: Kan inneholde ren tekst og andre inline-elementer, men ikke blokkelementer
Elementer vi har snakket om Blokkelementer Avsnitt: p Overskrifter: h1, h2, h3, ... Lister Punkliste: ul Listepunkt: li Nummererte lister: ol Definisjonsliste: dl Definisjonsterm: dt Definisjonsbeskrivelse: dd Lenke: a
Elementer vi ikke har snakket om Inline-elementer Viktig tekst: em (NB! Ikke <i>) Enda viktigere tekst: strong (NB! Ikke <b>) Titler i løpende tekst: cite Hevet: sup Senket: sub
Hypertekstlenker Elementet a med attributtet href brukes generelt for å lage hypertekstlenker i HTML href-attributtet angir en URL Lenke til et eksternt nettsted: <p> <a href="http://www.oslomiddelalderfestival.org/"> Oslo middelalderfestival</a> arrangeres hvert år.</p> I nettleser: Oslo middelalderfestival arrangeres hvert år. Lenke for å sende e-post: <p>Send en e-post til <a href="mailto:oslo.ladegaard@sensewave.com">Oslo Ladegård</a> for mer informasjon</p> I nettleser: Send en e-post til Oslo Ladegård for mer informasjon
Absolutte og relative adresser http://www.jbi.hio.no/bibin/dkdm2/introduksjon.pptx For interne lenker på et nettsted kutter vi ut protokoll og navn på tjenermaskin Eksempel: HTML: <p> Lenke til <a href="/bibin/dkdm2/introduksjon.pptx" >forrige forelesning</a></p> Lenke til forrige forelesning Kalles en absolutt adresse
Relative adresser Som regel bruker vi relative adresser internt på et nettsted Ettersom denne og forrige forelesningspresentasjon ligger i samme mappe, kan vi adressere slik: <p>Lenke til <a href="introduksjon.pptx">forrige forelesning</a></p>
Bokmerker Du kan legge inn «bokmerker» i dokumentet ved å bruke attributtet id på et hvilket som helst HTML-element Ofte passer det å legge inn bokmerke til en underoverskrift eller referanse Eksempel: <p id="ref1"> Sitatet er hentet fra Snorre Sturlasons bok "Heimskringla".</p> NB! Navnet på bokmerket må være unikt i dokumentet
Referere til bokmerker Vi kan referere til et bokmerke ved å bruke inline- elementet a (anchor) Innholdet i elementet er en tekst som beskriver bokmerket i kontekst Vi bruker attributt href for å angi navnet på bokmerket Attributtets verdi skal være navnet på bokmerket med tegnet # foran Eksempel: <p>(...) Der satt han godt til for å forsvare landet mot ... Danmark <a href="#ref1"><sup>1</sup></a>.</p> I nettleser: (...) Der satt han godt til for å forsvare landet mot ... Danmark. 1
En liten avsporing: Entiteter Noen spesialtegn må kodes i HTML Eksempel: Aschehoug & co Blir: Aschehoug & co & kalles en entitet Entiteter må brukes for tegn som har spesiell betydning i HTML & for & (tegnet er reservert for entiteter, så vi må si eksplisitt at vi mener tegnet) < for < (tegnet er reservert for tagger i HTML) > for > (tegnet er reservert for tagger i HTML)
Oppgave Opprett en ny fil i Textpad eller annet redigeringsprogram Lim inn de obligatoriske taggene fra forrige ukes forelesning. http://bibin.hioa.no/~jornda/skjelett.txt Lagre filen som harry-hole.html Husk at filen må lagres på M: i mappen public_html Legg inn tekst som finnes på http://bibin.hioa.no/~jornda/harry-hole.txt Bruk elementene som du har lært om for å markere strukturen i dokumentet Se på resultatet i en nettleser: http://bibin.hioa.no/~s12345/harry-hole.html Inkluder en relativ lenke til nettsiden du laget forrige uke
Bilder img (image): Et tomt inline-element Attributter src (source): En URL som angir adressen til bildet alt (alternative text): En tekstbeskrivelse av bildet som vises dersom nettleseren ikke kan vise bilder. Svært viktig for blinde og svaksynte brukere! Eksempel: <p><img src="http://www.jbi.hio.no/bibin/KoG1vev/bilder/tim_berne rs_lee.jpeg" alt="Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW" /></p>
Resultat Den alternative teksten, Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW, vises hvis du slår av bildevisning i nettleseren
Bildeformater: GIF og JPEG Graphic Interchange Format Komprimering uten tap av informasjon Kan maksimalt inneholde 256 farger Patentert Passer best på strektegninger og logoer, eller generelt bilder med store ensfargete bildeflater JPEG Joint Photographic Experts Group Komprimerer med tap av informasjon Kan ha millioner av farger Passer best for fotografier
Bildeformater: PNG PNG Portable Network Graphics En W3C-standard Komprimering uten tap av informasjon Kan ha millioner av farger God erstatning for GIF
Flickr http://www.flickr.com/ Search > Advanced Search > Only search within Creative Commons-licensed content lisensen finnes til høyre under 'License' Attribution - oppgi opplysning om hvem som har tatt bildet Noncommercial - ikke tjern penger på bildet No Derivative Works - ikke endre bildet
Oppgave – legg til bilde Bruk Flickr (http://www.flickr.com/) for å hente et bilde av Jo Nesbø Klikk på 'Search' og deretter 'Advanced Search’ Avgrens søket til innhold som kan gjenbrukes ved å krysse av 'Only search within Creative Commons-licensed content’ Hvordan kan bildet brukes? Sjekk lisensen som står til høyre i skjermbildet! Klikke på nedlastningsikonet og velg størrelse. Last ned bildet. Velg enten et nytt navn når du laster ned, eller etterpå fra Windows Utforsker. Legg bilde inn i ditt dokument ved å bruke <img>-taggen. Skriv en alternativ tekst Hvor stort er bildet? Windows Utforsker kan brukes for å finne ut dette Hvor stort er bildet i piksler? Hvor stort er bilder i bytes?
Hva er CSS? En separat fil som knyttes til HTML-dokumentet CSS-filer er ren tekst (som HTML) CSS-filer kan skrives i hvilken som helst slags ren tekst-editor HTML brukes for dokumentets innhold og struktur CSS brukes for presentasjon av HTML-dokumentet Et CSS-stilark er et sett med regler for hvordan elementer i HTML-dokumentet skal «dekoreres»
Hvordan koble til stilarket? Et element kalt link i head-elementet <!DOCTYPE html> <html lang="en"> <head> <meta charset= " utf-8" /> <link rel="stylesheet" href="stilarknavn.css" type="text/css" /> <title>Et HTML-dokument med stil</title> </head> <body> <h1>Et HTML-dokument med stil</h1> <p>Her kommer selve dokumentinnholdet.</p> </body> </html>
Koble CSS til HTML dokumentene Åpne et nytt tekstdokument Lagre den som stilark.css Legg <link>-taggen inn i head i begge HTML-filene du har laget til nå. <link rel="stylesheet" href="stilark.css" type="text/css" /> Lagre HTML-filene.
Stilark: Fordeler Skille innhold og struktur fra presentasjon! Mindre dokumenter, raskere nedlasting Kan endre utseendet for hele nettstedet på et blunk Samme dokument, flere presentasjonsmåter Eksempel: CSS Zen Garden
CSS: Cascading Style Sheets URL: http://www.w3.org/TR/CSS/ CSS Level 1 en W3C-anbefaling i 1996 Utviklet av Håkon Wium Lie og Bert Bos CSS Level 2 en W3C-anbefaling i 1998 CSS Level 3 – fremdeles i utvikling av W3C – men mye er allerede implementert i browsere.
CSS-eksempel CSS er et sett med regler for hvordan elementer i dokumentet skal vises Her er et eksempel på en slik regel: h1 { color: red; } Resultat: Alle h1-elementer i dokumentet vises med skriftfargen rød
Generell syntaks Regler defineres generelt slik: selektør { deklarasjon; ...} Deklarasjon er på formen: egenskap: verdi Merk at flere deklarasjoner kan inngå i samme regel En selektør velger ut hvilke HTML-elementer som regelen gjelder for Deklarasjonen setter verdier for ulike egenskaper ved elementene som velges CSS-spesifikasjonen gir en oversikt over alle egenskaper som kan justeres
Tilbake til eksemplet h1 { color: red; } I dette eksemplet er: ... selektøren HTML-elementet h1 ... deklarasjonen color: red Egenskapen color får verdien red
CSS underveis Start med en regel for body-elementet Sett for eksempel skrifttype (og eventuelt -størrelse), bakgrunns- og forgrunnsfarge Regler som settes for body «arves» av alle andre elementer
Skriftegenskaper font-family Setter hvilken skrifttype som skal brukes font-size Setter skriftstørrelsen font-weight Angir hvor uthevet skriften skal være. De vanligste verdiene er normal og bold font-style Angir skriftens stil. De vanligste verdiene er normal og italic
Skrifttyper Egenskapen heter font-family Eksempel: body { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-Serif; } Verdien for font-family er en liste av skrifttyper i prioritert rekkefølge Ulike nettlesere og operativsystemer har ikke de samme skrifttypene innebygd Avslutt alltid en slik liste med en generisk skrift-familie
Resultat i nettleseren Her bruker vi CSS-regelen på en HTML-fil med én hovedoverskrift og to avsnitt. Skrift på body-elementet: CSS-filen
Generiske skrift-familier – 1 Serif Proporsjonal skrift med tekstdekorasjoner. Passer best på papir. Eksempler på serif-skrifttyper: Times New Roman og andre Times-varianter, Palatino, Garamond og Book Antiqua Eksempel:Dette er skrift satt med skriftfamilien Serif Sans-Serif Proporsjonal skrift uten tekstdekorasjoner. Passer best på skjerm. Eksempler på sans-serif-skrifttyper: Trebuchet MS, Verdana, Arial, Helvetica og Gill Sans. Eksempel: Dette er skrift satt med skriftfamilien Sans-Serif
Generiske skrift-familier – 2 Monospace Ikke-proporsjonal skrift. Bokstavene i og m tar like mye plass. Eksempel på monospace-skrifttyper: Alle Courier-varianter Eksempel: Dette er skrift satt med skriftfamilien Monospace
Skriftstørrelse Egenskapen heter font-size Eksempel: h1 { font-size: 1.3em; } Her settes skriftstørrelsen for HTML-elementet h1 til 1,3 ganger størrelsen til skriften i body-elementet Når det ikke settes skriftstørrelse brukes nettleserens standardstørrelse eller brukerens preferanser em kalles en relativ målenhet og anbefales av W3C px (piksler) er en annen relativ målenhet Absolutte målenheter finnes også (for eksempel pt, dvs. punkter), men frarådes
Resultat i nettleseren
Farger Farger kan settes på forgrunn og bakgrunn: color: forgrunnsfarge, det vil si selve skriften background-color: bakgrunnsfarge Eksempel: Slik angis at alle h1-elementer skal ha hvit skrift på rød bakgrunn: h1 { color: white; background-color: red; }
Resultat i nettleseren
Mer om farger Farger kan angis på forskjellige måter Direkte ved engelsk navn aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow og white (hvit – ikke hensiktsmessig å demonstrere på hvit bakgrunn...) Rundt 140 farger etter oppdatering av CSS. http://www.w3schools.com/cssref/css_colornames.asp RGB-verdi RGB er et akronym for red, green, blue – de tre fargene som blandes for å bygge opp enhver annen farge på dataskjermer
RGB RGB-verdien kan angis på to forskjellige måter: rgb(rød-verdi, grønn-verdi, blå-verdi) De ulike verdiene kan angis på to forskjellige måter: Et heltall fra og med 0 til og med 255 Eksempel: h1 { color: rgb(255, 0, 0); } (alle hovedoverskrifter blir røde) Et desimaltall fra og med 0% til og med 100% Eksempel: h1 { color: rgb(100%, 0%, 0%); } (alle hovedoverskrifter blir røde) #rrggbb Her angis blandingsforholdet som et heksadesimalt tall (dvs. et tall i tallssystemet med grunntall 16). De to første sifrene angir rød, tredje og fjerde grønn, og de to siste blå. Dette var det eneste tillatte i HTML tidligere. Les mer og finn eksempler fra Wikipedia-artikkelen Web colors Eksempel: h1 { color: #ff0000; } (alle hovedoverskrifter blir røde)
Oppgave: Endre skrifttype og farge på teksten Legg inn en regel i css filen din som endrer skrifttypen i nettsiden til 'verdana'. Hvilken selektør skal brukes? Lagre CSS-filen og frisk opp HTML-filen(e) i nettleseren Endre størrelse på overskriftene Endre fargen på overskriftene
Luft og rammer: Boksmodellen i CSS Både padding, margin og border kan reguleres med CSS
Mer luft mellom skrift og kanter h1 { padding: 0.4em; } Her sier vi at det skal være luft på 0,4 em mellom elementinnholdet og boksen rundt langs alle fire kanter For å differensiere kan vi bruke egenskapene for retning i stedet: padding-left padding-top padding-right padding-bottom
Eksempel
Ramme h1 { border: black solid thin; } Lager en svart heltrukken tynn linje rundt elementets innhold og padding Første verdien er farge Andre verdi er linjetype. Aktuelle verdier er none, dotted, dashed, solid, double, groove, ridge, inset og outset Tredje verdi er tykkelsen på linjen. Følgende verdier er tillatt: thin, medium og thick Også her kan rammen differensieres i de ulike retningene: border-left border-top border-right border-bottom
Eksempel
Marger Vi vil bli kvitt margen mellom overskriften og avsnittet h1 { margin-bottom: 0; } Setter bunnmargen til h1-elementet til 0
Hvorfor ble ikke luften borte? p-elementet har en toppmarg Kvitter oss med denne ved å lage en ny regel for p- elementet: p { margin-top: 0; } Setter toppmargen for p-elementet til 0
Felles regler for flere elementer Bruk en selektør som lister opp elementene med komma mellom Eksempel: h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } Resultat: Alle seks overskriftstyper blir skrevet med hvit tekst på rød bakgrunn
Flere regler for samme element Flere regler for samme element slås sammen til én Eksempel: h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } h1 { font-size: 1.4em; } Resultat: Hovedoverskrifter (h1 blir vist med hvit skrift på rød bakgrunn (første regel) og med en skriftstørrelse som er 1,4 ganger skriften i body-elementet (andre regel)
Nummererte lister og CSS Endre nummereringsmåte i nummererte lister: list- style-type Settes på ol-elementet Eksempel: ol { list-style-type: upper-roman; } Aktuelle verdier: decimal, lower-alpha, upper-alpha, lower- roman og upper-roman Samme som <ol type=…> som vi brukte forrige gang.
Punktlister og CSS Endre punktlister Settes på ul-elementet Eksempel: ul { list-style-type: square; } Aktuelle verdier: disc, circle og square Sette inn bilde i stedet for vanlig markør: list-style-image Eksempel: ul { list-style-image: url("../bilder/glis.gif"); }
Oppgave: Lister Markere listen over bøkene som en liste Prøv både 'ol' og 'ul' Endre visning av listen ved å legge inn 'ol { list-style- type: lower-alpha; }' Valgene er listet på W3Schools (http://www.w3schools.com/cssref/pr_list-style-type.asp) Legg merk til at noen av valgene passer til ol-lister og andre til ul-lister. Hva skjer hvis du skriver 'ol { list-style-type: none; }'?
Oppgave: Boksmodell – padding og margin Eksperimenterer med å øke og redusere plassen rundt listepunktene ved å bruke: Padding Margin
Oppgave: Boksmodell - Border Sett en ramme rundt hovedoverskriften i nettsiden Se på mulighetene for å endre rammen: Farge Bredden Stil Er det mulig å plassere en ramme både under og over teksten, men ikke ved sidene? W3School's informasjon om border (http://www.w3schools.com/css/css_border.asp) Presentasjonens tittel 16.01.2014
<header><article><footer> Eksperimenter med <header>, <article> og <footer> og legg css på disse – farge, fonter? Presentasjonens tittel 16.01.2014
Valider, valider, valider… Valider både HTML (http://validator.w3.org/) og CSS (http://jigsaw.w3.org/css-validator/)
Hvordan jobbe hjemmefra Hvis du jobber hjemmefra, og vil publisere nettsider derfra, kan du bruke et SFTP-program for å overføre filer. Dette krever at du først definerer ett passord til bruk av SFTP: http://bibin.hioa.no/sftp/ Når du har skaffet deg ett passord, kan du bruke et SFTP-program til å overføre filer med. For eksempel kan FileZilla lastes ned, som er et bra program som også brukes ved HiOA. Vent et lite øyeblikk etter at du har trykket på lenken, så kommer det opp et nedlastingsvindu i nettleseren. Velg Åpne og følg instruksjonene på skjermen for å installere programmet. Start programmet etter at du har installert. Velg Fil → Serveradministrasjon. Deretter klikker du på Ny server. Kall «serveren» for Bibin og fyll ut skjermbildet du får opp som forklart neste slide.
Server: bibin.hioa.no Port: 22 Protokoll SFTP - SSH File Transfer Protocol Innloggingstype: Normal Bruker s123456 (byttes ut med studentnummeret ditt som brukes til vanlig innlogging på skolens maskiner) Password passord (som du laget overfor)
Presentasjonens tittel 16.01.2014
Velg Koble til. I vinduet som vises velg Alltid godta denne serveren, legg til denne nøkkelen i cache: Presentasjonens tittel 16.01.2014
Det du har gjort nå, trenger du bare gjøre én gang Det du har gjort nå, trenger du bare gjøre én gang. Hver gang du fra nå av skal bruke FileZilla, kan du velge Fil → Serveradministrasjon og klikke på Bibin. Den venstre delen av vinduet viser filene dine på PC- en du jobber fra. På høyre side er filene på bibin.hioa.no og mappen public_html. Du kopierer filer fra PC-en til bibin.hioa.no ved å dra dem over fra venstre til høyre del av skjermbildet. NB! åpne mappenpublic_html i høyre del av vinduet før du flytter over filene, slik at de havner på korrekt sted. Presentasjonens tittel 16.01.2014
Presentasjonens tittel 16.01.2014