Presentasjon fra 2. forelesning

Download Report

Transcript Presentasjon fra 2. forelesning 

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
— Listepunkt: li
— 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:[email protected]">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 inlineelementet 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 &amp; co
— Blir: Aschehoug & co
— &amp; kalles en entitet
Entiteter må brukes for tegn som har spesiell betydning i
HTML
— &amp; for & (tegnet er reservert for entiteter, så vi må si
eksplisitt at vi mener tegnet)
— &lt; for < (tegnet er reservert for tagger i HTML)
— &gt; for > (tegnet er reservert for tagger i HTML)
Oppgave
1. Opprett en ny fil i Textpad eller annet redigeringsprogram
2. Lim inn de obligatoriske taggene fra forrige ukes forelesning.
http://bibin.hioa.no/~jornda/skjelett.txt
3. Lagre filen som harry-hole.html
4. Husk at filen må lagres på M: i mappen public_html
5. 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
6. Se på resultatet i en nettleser:
http://bibin.hioa.no/~s12345/harry-hole.html
7. 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
GIF
•
•
•
•
•
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
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
1. Bruk Flickr (http://www.flickr.com/) for å hente et bilde av Jo Nesbø
2. Klikk på 'Search' og deretter 'Advanced Search’
3. Avgrens søket til innhold som kan gjenbrukes ved å krysse av 'Only
search within Creative Commons-licensed content’
4. Hvordan kan bildet brukes? Sjekk lisensen som står til høyre i
skjermbildet!
5. 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.
6. Legg bilde inn i ditt dokument ved å bruke <img>-taggen.
7. Skriv en alternativ tekst
8. 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
1. Åpne et nytt tekstdokument
2. Lagre den som stilark.css
3. Legg <link>-taggen inn i head i begge HTML-filene du
har laget til nå.
<link rel="stylesheet"
href="stilark.css" type="text/css" />
4. 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, r
ed, 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 pelementet:
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: liststyle-type
— Settes på ol-elementet
— Eksempel: ol { list-style-type: upper-roman; }
— Aktuelle verdier: decimal, lower-alpha, upper-alpha, lowerroman 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
1. Markere listen over bøkene som en liste
2. Prøv både 'ol' og 'ul'
3. Endre visning av listen ved å legge inn 'ol { list-styletype: 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.
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å PCen 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