Forelesning 2: Bilder og CSS

David Massey
david.massey@jbi.hio.no
Uke 2, 2010

Repetisjon: Elementer og attributter

Byggesteinene i XHTML-dokumenter er elementer
- Alle elementnavn skrives med små bokstaver
- Eksempel: <h1>Overskrift</h1>
  - Dette elementet heter h1
  - Elementets innhold er Overskrift
  - Start-tagg: <h1>
  - Slutt-tagg: </h1>
  - Alle elementer må åpnes med en start-tagg og lukkes med en slutt-tagg
De fleste XHTML-elementer kan ha ett eller flere attributter
- Eksempel: <a href="http://www.hio.no/">Lenke til HiO</a>
  - Attributter er par av navn og verdi
  - Verdien skrives med anførselstegn rundt

Demo

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 lært – 1

Blokkelementer
- Avsnitt: p
- Overskrifter: h1, h2, h3, ...,
- Sitat: blockquote
Inline-elementer
- Viktig tekst: em
- Enda viktigere tekst: strong
- Titler: cite
- Hevet: sup
- Senket: sub

Elementer vi har lært – 2

Lister
- Punkliste: ul
  - Listepunkt: li
- Nummererte lister: ol
  - Listepunkt: li
- Definisjonsliste: dl
  - Definisjonsterm: dt
  - Definisjonsbeskrivelse: dd
Lenke: a

Hypertekstlenker

Elementet a med attributtet href brukes generelt for å lage hypertekstlenker i XHTML
- href-attributtet angir en URL
- Lenke til et eksternt nettsted:
  <p><a href="http://www.middelalderfestivalen.no/"> Oslo middelalderfestival</a> arrangeres hvert år.</p>
  - I nettleser: Oslo middelalderfestival arrangeres hvert år.

Hypertekstlenker (forts.)

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 adresser

URL: http://www.jbi.hio.no/bibin/dkdm2/2010/dmdm2_1.html
For interne lenker på et nettsted kutter vi ut protokoll og navn på tjenermaskin
- Eksempel: XHTML: <p> Lenke til <a href="/bibin/dkdm2/2010/dkdm2_1.html" >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="dkdm2_1.html">forrige forelesning</a></p>

Katalogstruktur

Adressere filen fil.html i forelesninger fra KoG1vev: forelesninger/fil.html
Adressere filen fil.html i eksempler fra forelesninger: ../eksempler/fil.html

Bokmerker

Du kan legge inn bokmerker i dokumentet ved å bruke attributtet id på et hvilket som helst XHTML-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 attributtet 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. ¹

En liten avsporing: Entiteter

Noen spesialtegn må kodes i XHTML
- Eksempel: Aschehoug & co
- Blir: Aschehoug & co
- & kalles en entitet
Entiteter må brukes for tegn som har spesiell betydning i XHTML
- & for & (tegnet er reservert for entiteter, så vi må si eksplisitt at vi mener tegnet)
- < for < (tegnet er reservert for tagger i XHTML)
- > for > (tegnet er reservert for tagger i XHTML)

Validering

Bruk W3Cs valideringstjeneste for å sjekke at en nettside er korrekt XHTML
URL: http://validator.w3.org/

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_berners_lee.jpeg" alt="Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW" /></p>

Resultat

Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW

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

GIF

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 'Additional Information'
Attribution - oppgi opplysning om hvem som har tatt bildet
Noncommercial - ikke tjern penger på bildet
No Derivavtive Works - ikke endre bildet

Hva er CSS?

En separat fil som knyttes til XHTML-dokumentet
- CSS-filer er ren tekst (som XHTML)
- CSS-filer kan skrives i hvilken som helst slags ren tekst-editor
XHTML brukes for dokumentets innhold og struktur
CSS brukes for presentasjon av XHTML-dokumentet
Et CSS-stilark er et sett med regler for hvordan elementer i XHTML-dokumentet skal «dekoreres»

Hvordan koble til stilarket?

Et element kalt link i head-elementet

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet"
      href="stilarknavn.css" type="text/css" />
      <title>Et XHTML-dokument med stil</title>
   </head>
   <body>
      <h1>Et XHTML-dokument med stil</h1>
      <p>Her kommer selve dokumentinnholdet.</p>
   </body>
</html>

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/CSS2/
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
- Det er denne som gjelder i dag
CSS Level 3 under arbeid

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

Eksempel med rødfarget
hovedoverskrift via CSS

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 XHTML-elementer som regelen gjelder for
Deklarasjonen setter verdier for ulike egenskaper ved elementene som velges
- CSS-spesifikasjonen gir en oversikt over alle de rundt 120 egenskaper som kan justeres

Tilbake til eksemplet

h1 { color: red; }

I dette eksemplet er:

... selektøren XHTML-elementet h1
... deklarasjonen color: red
- Egenskapen color får verdien red

Praktisk start

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 XHTML-fil med én hovedoverskrift og to avsnitt.

Eksempel med endring av
skrifttype med CSS

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 (som er HiOs offisielle skrifttype og som benyttes i denne presentasjonen)

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 XHTML-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

Eksempel på endring av
skriftstørrelse med CSS

Endring av skriftstørrelse på h1-elementet: CSS-filen

Farger

Farger kan settes på forgrunn og bakgrunn:

color: Forgrunnsfarge, det vil si 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

Eksempel på endring av
forgrunns- og bakgrunnsfarger med CSS

Endring av forgrunns- og bakgrunnsfarger på h1-elementet: CSS-filen

Mer om farger

Farger kan angis på forskjellige måter

Direkte ved engelsk navn: Følgende 16 verdier er definert: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow og white (hvit – ikke hensiktsmessig å demonstrere på hvit bakgrunn...)
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)

Øvelse

Lag en ny side
Endre title-taggen
Lag en relativ lenk fra siden til forrige ukes side
Lag en CSS-fil og kobler den til denne ukes side
Endre skrifttype, skriftfarger og skriftstørrelse
Legg inn et bilde
Valider siden: http://validator.w3.org

Luft og rammer: Boksmodellen i CSS

Illustrasjon av 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

Resultat i nettleseren

Eksempel på bruk av
padding-egenskapen

Endring av padding på h1-elementet: CSS-filen

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

Resultat i nettleseren

Eksempel på bruk av
border-egenskapen

Legg til ramme rundt h1-elementet: CSS-filen

Marger

Vi vil bli kvitt margen mellom overskriften og avsnittet
h1 { margin-bottom: 0; }
- Setter bunnmargen til h1-elementet til 0
Resultat:

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

Resultat i nettleseren

Eksempel på bruk av
margin-egenskapen

Fjerne luft mellom h1- og p-elementet: CSS-filen

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

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"); }

Endret liste i nettleseren

Punktliste med flere nivåer, endret utseende

CSS-fil for endring av lister

Øvelser

Jobb videre med tidligere oppgaver
Endre marger på siden vha CSS
Lag en liste og endre utseende vha CSS
Hvordan kan jeg legg inn '<david>' slik at det vises i siden?
Husk å validere

Ressurser

Fargekodene (Se også bakerst i Castro)

HTML entitetene (Se også Appendiks D i Castro)

CSS tips fra w3schools.com

Noter

¹ Bildet av Tim Berners-Lee er tatt av Uldis Bojār, hentet fra Wikimedia Commons, og publisert under Creative Commons Attribution ShareAlike 2.5-lisens.