Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

HTML og CSS 16. januar 2015 16.01.2014.

Liknende presentasjoner


Presentasjon om: "HTML og CSS 16. januar 2015 16.01.2014."— Utskrift av presentasjonen:

1 HTML og CSS 16. januar 2015

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
<!DOCTYPE html> <html lang= "no" > <head> <meta charset= "utf-8" /> <title>Tekst</title> </head> <body> Innhold </body> </html> Presentasjonens tittel

4 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=" til HiOA</a> 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 Definisjonsliste: dl Definisjonsterm: dt Definisjonsbeskrivelse: dd Lenke: a

7 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

8 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=" 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 Ladegård</a> for mer informasjon</p> I nettleser: Send en e-post til Oslo Ladegård for mer informasjon

9 Absolutte og relative adresser
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

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: <p>Lenke til <a href="introduksjon.pptx">forrige forelesning</a></p>

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: <p id="ref1"> Sitatet er hentet fra Snorre Sturlasons bok "Heimskringla".</p> 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: <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

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 Opprett en ny fil i Textpad eller annet redigeringsprogram
Lim inn de obligatoriske taggene fra forrige ukes forelesning. Lagre filen som harry-hole.html Husk at filen må lagres på M: i mappen public_html Legg inn tekst som finnes på Bruk elementene som du har lært om for å markere strukturen i dokumentet Se på resultatet i en nettleser: 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: <p><img src=" rs_lee.jpeg" alt="Bilde av Sir Tim Berners-Lee, grunnleggeren av WWW" /></p>

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

20 Oppgave – legg til bilde
Bruk Flickr ( 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?

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

23 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.

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 Garden

25 CSS: Cascading Style Sheets
URL:  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.

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, red, 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)

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 <ol type=…> 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 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 ( 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 ( Presentasjonens tittel

57 <header><article><footer>
Eksperimenter med <header>, <article> og <footer> og legg css på disse – farge, fonter? Presentasjonens tittel

58 Valider, valider, valider…
Valider både HTML ( og CSS (

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. 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 16.01.2014

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

63 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

64 Presentasjonens tittel 16.01.2014


Laste ned ppt "HTML og CSS 16. januar 2015 16.01.2014."

Liknende presentasjoner


Annonser fra Google