Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

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.

Liknende presentasjoner


Presentasjon om: "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."— Utskrift av presentasjonen:

1 HTML og CSS 16. januar

2 Dagens program — Litt repetisjon fra sist (Innblandet litt ny terminologi og nye elementer) — Bilder — CSS — Skrifttyper — Farger — Validere (igjen) — Hvordan jobbe hjemmefra

3 Repitisjon: HTML-skjelettet Tekst Innhold Presentasjonens tittel

4 Repetisjon: Elementer og attributter Byggesteinene i HTML-dokumenter er elementer — Alle elementnavn skrives med små bokstaver — Eksempel: God morgen — Dette elementet heter h1 — Elementets innhold er «God morgen» — Start-tagg: — Slutt-tagg: — 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: Lenke til HiOA — Attributter er par av navn og verdi — Verdien skrives med anførselstegn rundt

5 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

6 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

7 Elementer vi ikke har snakket om Inline-elementer — Viktig tekst: em (NB! Ikke ) — Enda viktigere tekst: strong (NB! Ikke ) — Titler i løpende tekst: cite — Hevet: sup — Senket: sub

8 Hypertekstlenker Elementet a med attributtet href brukes generelt for å lage hypertekstlenker i HTML — href-attributtet angir en URL — Lenke til et eksternt nettsted: Oslo middelalderfestival arrangeres hvert år. — I nettleser: Oslo middelalderfestival arrangeres hvert år.Oslo middelalderfestival Lenke for å sende e-post: Send en e-post til Oslo Ladegård for mer informasjon — I nettleser: Send en e-post til Oslo Ladegård for mer informasjonOslo Ladegård

9 Absolutte og relative adresser For interne lenker på et nettsted kutter vi ut protokoll og navn på tjenermaskin — Eksempel: HTML: Lenke til forrige forelesning — Lenke til forrige forelesning — Kalles en absolutt adresse

10 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: Lenke til forrige forelesning

11 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: Sitatet er hentet fra Snorre Sturlasons bok "Heimskringla". — NB! Navnet på bokmerket må være unikt i dokumentet

12 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: (...) Der satt han godt til for å forsvare landet mot... Danmark 1. I nettleser: (...) Der satt han godt til for å forsvare landet mot... Danmark. 1

13 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)

14 Oppgave 1.Opprett en ny fil i Textpad eller annet redigeringsprogram 2.Lim inn de obligatoriske taggene fra forrige ukes forelesning. 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å Bruk elementene som du har lært om for å markere strukturen i dokumentet 6.Se på resultatet i en nettleser: 7.Inkluder en relativ lenke til nettsiden du laget forrige uke

15 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:

16 Resultat Den alternative teksten, Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW, vises hvis du slår av bildevisning i nettleseren

17 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

18 Bildeformater: PNG PNG Portable Network Graphics En W3C-standard Komprimering uten tap av informasjon Kan ha millioner av farger God erstatning for GIF

19 Flickr — — 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

20 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 -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?

21 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»

22 Hvordan koble til stilarket? Et element kalt link i head-elementet Et HTML-dokument med stil Et HTML-dokument med stil Her kommer selve dokumentinnholdet.

23 Koble CSS til HTML dokumentene 1.Åpne et nytt tekstdokument 2.Lagre den som stilark.css 3.Legg -taggen inn i head i begge HTML-filene du har laget til nå. 4.Lagre HTML-filene.

24 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 GardenCSS Zen Garden

25 CSS: Cascading Style Sheets — URL: — CSS Level 1 en W3C-anbefaling i 1996 — Utviklet av Håkon Wium Lie og Bert BosHåkon Wium Lie — CSS Level 2 en W3C-anbefaling i 1998 — CSS Level 3 – fremdeles i utvikling av W3C – men mye er allerede implementert i browsere.

26 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

27

28 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

29 Tilbake til eksemplet — h1 { color: red; } — I dette eksemplet er: —... selektøren HTML-elementet h1 —... deklarasjonen color: red — Egenskapen color får verdien red

30 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

31 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

32 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

33 Resultat i nettleseren — Her bruker vi CSS-regelen på en HTML-fil med én hovedoverskrift og to avsnitt. — Skrift på body-elementet: CSS-filen

34 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

35 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

36 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

37 Resultat i nettleseren

38 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; }

39 Resultat i nettleseren

40 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. RGB-verdi RGB er et akronym for red, green, blue – de tre fargene som blandes for å bygge opp enhver annen farge på dataskjermer

41 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)Web colors

42 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

43 Luft og rammer: Boksmodellen i CSS — Både padding, margin og border kan reguleres med CSS

44 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

45 Eksempel

46 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

47 Eksempel

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

49 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

50 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

51 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)

52 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 som vi brukte forrige gang.

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

54 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-style- type: lower-alpha; }' Valgene er listet på W3Schools (http://www.w3schools.com/cssref/pr_list-style-type.asp)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; }'?

55 Oppgave: Boksmodell – padding og margin Eksperimenterer med å øke og redusere plassen rundt listepunktene ved å bruke: — Padding — Margin

56 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)http://www.w3schools.com/css/css_border.asp Presentasjonens tittel

57 — Eksperimenter med, og og legg css på disse – farge, fonter? Presentasjonens tittel

58 Valider, valider, valider… — Valider både HTML (http://validator.w3.org/) og CSS (http://jigsaw.w3.org/css-validator/)HTMLCSS

59 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: — 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.FileZilla — 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.

60 Server: bibin.hioa.no Port: 22 Protokoll SFTP - SSH File Transfer Protocol Innloggingstype: Normal Bruker s (byttes ut med studentnummeret ditt som brukes til vanlig innlogging på skolens maskiner) Password passord (som du laget overfor)

61 Presentasjonens tittel

62 — Velg Koble til. I vinduet som vises velg Alltid godta denne serveren, legg til denne nøkkelen i cache:

63 — 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

64


Laste ned ppt "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."

Liknende presentasjoner


Annonser fra Google