Slideserie 1: Introduksjon til html PJ 1100/Kreative utviklingsprosjekter Høst 2011 29.08.11 Rolando Gonzalez 2010
[email_address] 29.08.11
Temaer for slideserien <ul><li>Om foreleser (den ene av de to) </li></ul><ul><li>Emnebeskrivelse (lenke) </li></ul><ul><li...
Om foreleser <ul><li>Rolando Antonio Gonzalez (gonrol@nith.no) </li></ul><ul><li>Bachelor Informatikk (NITH) </li></ul><ul...
Emnebeskrivelse <ul><li>Se lenke på emneside PJ 1100 for emnebeskrivelse </li></ul>29.08.11
Ukeplan <ul><li>Se på Itslearning:  </li></ul><ul><li>Studieinfo  >  Time og ukeplaner  >  Time- og ukeplaner høsten 2011 ...
Innleveringer <ul><li>HTML og CSS 10 % uke 39 </li></ul><ul><li>Teori kreativ teknikk 10 % uke 44 (?) </li></ul><ul><li>Pr...
html <ul><li>Hyper Text Markup Language </li></ul><ul><li>Brukes for å legge til innhold på nettsider </li></ul><ul><li>Fi...
Merknad om htmleksempler <ul><li>Merk at det er et mål for faget å kjenne til forskjellige htmlvarianter slik at eksemplen...
Semantisk koding <ul><li>Med semantisk korrekt koding menes bruk av tagger slik de original var tiltenkt brukt. For eksemp...
DOCTYPEdeklarasjonen <ul><li>“ The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). A DTD specifies the ...
DOCTYPEdeklarasjonen <ul><li>DOCTYPEdeklarasjonen vil vi finne øverst i et html dokument og denne redegjør for hvilken htm...
W3C <ul><li>W3C er en internasjonal organisasjon som jobber med å etablere webstandarder.  </li></ul><ul><li>Tilbyr htmlop...
Headere- overskrifter <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3...
<p>, <br/>, <em>, <strong> og kommentarer <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;...
Hyperlenker <ul><li>…………………… </li></ul><ul><li><p>Følgende 4 linker referer til e-aviser:<br/> </li></ul><ul><li><a href=&...
Kommentar forrige kode <ul><li>Pga plassbesparelse er HTML-teksten ikke formatert optimalt på slidene </li></ul><ul><li>De...
Designprinsipp: Hyperlenker <ul><li>” Hyperlenker skal gi en utvetydig indikator på hvor brukeren havner” (oversatt fra en...
E-post link <ul><li>……………………… . </li></ul><ul><li><head> </li></ul><ul><li><title>Mail link</title> </li></ul><ul><li></he...
Navigering: Tilbake til toppen <ul><li>Interne lenker i lengre dokumenter kan hjelpe brukeren til å lettere finne frem. </...
Relative lenker <ul><li>I de tilfeller hvor en jobber med større nettsider kan det for ordens skyld bli nødvendig med en h...
Relative lenker <ul><li>Filen ligger i en undermappe </li></ul><ul><li><a href = &quot;b1/ib1.html&quot;>Ib1</a> </li></ul>
Relative lenker <ul><li>Filen ligger rett utenfor mappen ”søkerfilen” ligger i </li></ul><ul><li><a href = &quot;../Golfsi...
Noen prinsipper mht. linker <ul><li>La navnene på linkene være utvetydige </li></ul><ul><li>Unngå å benytte teksten ”Klikk...
Lister: UL, OL og DL  <ul><li>OL: Ordered list </li></ul><ul><li>Nummererte lister. Brukes for lister som skal vise en spe...
Lister eksempel: OL <ul><li>…………………………………… .. </li></ul><ul><li><head> </li></ul><ul><li><title>Tester lister</title> </li...
Lister eksempel: UL <ul><li>………………………………… </li></ul><ul><li><head> </li></ul><ul><li><title>Tester lister</title> </li></u...
Lister eksempel: DL <ul><li>……………………………………… . </li></ul><ul><li><dl> </li></ul><ul><li><dt>Accessibility</dt> </li></ul><u...
Nøsting av lister <ul><li>Lister er De Facto standard tag for navigasjonsmenyer. Med kun HTML og CSS lager man fullverdige...
Blockquote  <ul><li>Kan for eksempel brukes når: </li></ul><ul><li>Man siterer fra artikler, bøker, og andre tekster </li>...
Blockquote <ul><li><body> </li></ul><ul><li><p>I sin nyeste bok &quot;Tulleboken&quot; av Ginger Freddy skriver han:</p> <...
Legge til bilder 1 <ul><li>……… . </li></ul><ul><li><body> </li></ul><ul><li><h3>Et par planet-bilder</h3> </li></ul><ul><l...
Legge til bilder 2 <ul><li><body> </li></ul><ul><li><img src = &quot;planets.jpg&quot; height = &quot;300&quot; width = &q...
table <ul><li>……………………………………………………… </li></ul><ul><li><table> </li></ul><ul><li><tr>  <!- - Table row -- > </li></ul><ul><...
<hr /> Horizontal ruling <ul><li>Kan benyttes for å markere seksjonsdeling. </li></ul><ul><li>Ganske vanlig når en ønsker ...
<hr/> Horizontal ruling <ul><li>…………… .. </li></ul><ul><li><title></title> </li></ul><ul><li><style = &quot;text/css&quot;...
Eksempel bruk hr:  (hr{border: 1px dashed #000000;})
Bilder som link <ul><li>……………… .. </li></ul><ul><li><a href = &quot;http://www.imdb.com/find?s=all&q=Simpsons&quot;> </li>...
<div> <ul><li>divtagen brukes for å skape logiske divisjoner på en side. Linjeskift forekommer før og etter divisjonen.  <...
HTML 5 sideinndelingstager <ul><li>Header </li></ul><ul><li>Section </li></ul><ul><li>Nav </li></ul><ul><li>Aside </li></u...
Validering av (X)HTML (5) <ul><li>Gå inn på: http://validator.w3.org/ </li></ul><ul><li>Velg menyen ”Validate by file uplo...
Etter validering <ul><li>Får kodebit med link til bilde som bevis på validering som kan velges å brukes på siden </li></ul>
Feilmeldinger under validering <ul><li>Merk at en feil i din kode under validering kan oppfattes som mange feil.  </li></u...
Litteraturliste/Referanseliste <ul><li>Felke-Morris, Terry (2007): ”Web Development & Design Foundations with XHTML” </li>...
Upcoming SlideShare
Loading in …5
×

Pj1100 slideserie1 intro_html

400 views

Published on

asd

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
400
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pj1100 slideserie1 intro_html

  1. 1. Slideserie 1: Introduksjon til html PJ 1100/Kreative utviklingsprosjekter Høst 2011 29.08.11 Rolando Gonzalez 2010
  2. 2. [email_address] 29.08.11
  3. 3. Temaer for slideserien <ul><li>Om foreleser (den ene av de to) </li></ul><ul><li>Emnebeskrivelse (lenke) </li></ul><ul><li>Ukeplan (lenke) </li></ul><ul><li>Innleveringer </li></ul><ul><li>Innføring i (X)HTML (5) </li></ul><ul><li>Semantikk og html </li></ul><ul><li>Diverse elementer </li></ul><ul><li>Validering av kode </li></ul>
  4. 4. Om foreleser <ul><li>Rolando Antonio Gonzalez (gonrol@nith.no) </li></ul><ul><li>Bachelor Informatikk (NITH) </li></ul><ul><ul><li>Generell IT utdannelse med fordypning i Systemutvikling </li></ul></ul><ul><li>Master ISM (Information Systems Management) </li></ul><ul><li>Har forelest/foreleser C#/.Net, Java, html, css, javascript, HCI og Usability, Adobe produkter og Webjournalistikk. </li></ul>
  5. 5. Emnebeskrivelse <ul><li>Se lenke på emneside PJ 1100 for emnebeskrivelse </li></ul>29.08.11
  6. 6. Ukeplan <ul><li>Se på Itslearning: </li></ul><ul><li>Studieinfo > Time og ukeplaner > Time- og ukeplaner høsten 2011 > Timeplaner høsten 2011 </li></ul>29.08.11
  7. 7. Innleveringer <ul><li>HTML og CSS 10 % uke 39 </li></ul><ul><li>Teori kreativ teknikk 10 % uke 44 (?) </li></ul><ul><li>Prosjekt uke 1: handlingsplan 35 % </li></ul><ul><li>Prosjekt uke 2: klikkbar løsning 35 % </li></ul><ul><li>Presentasjon av prosjekt: 10 % </li></ul>29.08.11
  8. 8. html <ul><li>Hyper Text Markup Language </li></ul><ul><li>Brukes for å legge til innhold på nettsider </li></ul><ul><li>Finnes i forskjellige varianter og versjoner: </li></ul><ul><ul><li>Xhtml 1.1 (Strict/Transitional), html 4.01, html 5 </li></ul></ul>29.08.11
  9. 9. Merknad om htmleksempler <ul><li>Merk at det er et mål for faget å kjenne til forskjellige htmlvarianter slik at eksemplene vil være i forskjellige htmldoctypedeklarasjoner. </li></ul>29.08.11
  10. 10. Semantisk koding <ul><li>Med semantisk korrekt koding menes bruk av tagger slik de original var tiltenkt brukt. For eksempel at h1 benyttes for å lage overskrifter og ikke bare benyttes over alt hvor en ønsker større tekst. </li></ul><ul><li>I noen tilfeller må vi kanskje spørre oss om hva vi legger til på siden egentlig er før vi velger tag. For eksempel: Er et bildegalleri en liste eller tabell? </li></ul><ul><li>Graden av semantisk koding kan påvirke graden av Accessibility. </li></ul>
  11. 11. DOCTYPEdeklarasjonen <ul><li>“ The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). A DTD specifies the rules for the markup language, so that the browsers render the content correctly.” </li></ul><ul><li>(W3C, 2011) </li></ul>29.08.11
  12. 12. DOCTYPEdeklarasjonen <ul><li>DOCTYPEdeklarasjonen vil vi finne øverst i et html dokument og denne redegjør for hvilken htmlvariant siden er kodet i. </li></ul><ul><li>HTML 5: </li></ul><ul><li><!DOCTYPE html> </li></ul><ul><li>XHTML 1.0 Transitional: </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul>29.08.11
  13. 13. W3C <ul><li>W3C er en internasjonal organisasjon som jobber med å etablere webstandarder. </li></ul><ul><li>Tilbyr htmlopplæring: </li></ul><ul><li>http://www.w3schools.com/ </li></ul>29.08.11
  14. 14. Headere- overskrifter <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> </li></ul><ul><li><title>Side med headere</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Dette er h1</h1> </li></ul><ul><li><h2>Dette er h2</h2> </li></ul><ul><li><h3>Dette er h3</h3> </li></ul><ul><li><h4>Dette er h4</h4> </li></ul><ul><li><h4>Dette er h4</h4> </li></ul><ul><li><h5>Dette er h5</h5> </li></ul><ul><li><h6>Dette er h6</h6> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>NB! H6 er minste header. Det vil si h7, h8 osv finnes ikke </li></ul>
  15. 15. <p>, <br/>, <em>, <strong> og kommentarer <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>Fem elementer i ett</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p> Paragraf i kroppen, lager så et linjeskift med br her <br/> </li></ul><ul><li>etterfulgt av mer tekst </li></ul><ul><li></p> </li></ul><ul><li><p> </li></ul><ul><li><em> Dette er en uthevet tekst med hjelp av em-tagen</em><br/> </li></ul><ul><li><strong> strong bruker man når man ønsker at et ord eller tekst skal være ekstra synlig</strong> </li></ul><ul><li></p> </li></ul><ul><li><!-- Dette er en kommentar. --> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  16. 16. Hyperlenker <ul><li>…………………… </li></ul><ul><li><p>Følgende 4 linker referer til e-aviser:<br/> </li></ul><ul><li><a href=&quot;http://vg.no&quot;>VG.no</a> <br/> </li></ul><ul><li><a href=&quot;http://dagbladet.no&quot;>Dagbladet.no</a><br/> </li></ul><ul><li><a href=&quot;http://aftenposten.no&quot; >Aftenposten.no</a><br/> </li></ul><ul><li><a href=&quot;http://bergensavisen.no&quot; title=”Bergensavisen”>Bergensavisen.no</a> </li></ul><ul><li></p> </li></ul><ul><li><p>Denne linker til en html fil som ligger i samme mappe som denne siden<br/> </li></ul><ul><li><a href=&quot;headere.html&quot;>Header eksempel</a><br/> </li></ul><ul><li></p> </li></ul><ul><li>……… .. </li></ul>
  17. 17. Kommentar forrige kode <ul><li>Pga plassbesparelse er HTML-teksten ikke formatert optimalt på slidene </li></ul><ul><li>Det ideelle hadde kanskje blitt ca sånn: </li></ul><ul><li>………… .. </li></ul><ul><li><head> </li></ul><ul><li><title>Hyperlenke test</title> (Innrykk ved nytt element i annet element) </li></ul><ul><li></head> </li></ul><ul><li>(Gjerne litt luft. Spesielt hvis blokkene er store) </li></ul><ul><li><body> </li></ul><ul><li><h1>Side med linker</h1> </li></ul><ul><li><h1>Side med linker</h1> </li></ul><ul><li><p>Følgende 4 linker under referer til e-aviser</p> </li></ul><ul><li><ul> </li></ul><ul><li><li><a href=&quot;http://vg.no&quot;>VG.no</a></li> </li></ul><ul><li><li><a href=&quot;http://dagbladet.no&quot;>Dagbladet.no</a></li> </li></ul><ul><li></ul> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  18. 18. Designprinsipp: Hyperlenker <ul><li>” Hyperlenker skal gi en utvetydig indikator på hvor brukeren havner” (oversatt fra engelsk) </li></ul><ul><li>(Heim, 2008, p.460) </li></ul><ul><li>Pass på ordbruken. Ta gjerne utgangspunkt i hva lenker vanligvis kalles. </li></ul><ul><li>Dette faller blant annet under konseptet ”Navigering” </li></ul>
  19. 19. E-post link <ul><li>……………………… . </li></ul><ul><li><head> </li></ul><ul><li><title>Mail link</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Mailto elementet er nyttig med hensyn til &quot;kontakt oss&quot; menyen </li></ul><ul><li><a href = &quot;mailto:gonrol@nith.no&quot;>gonrol@nith.no</a>* </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>*Krever at brukeren har konfigurert Outlook eller annet mailsystem. </li></ul>
  20. 20. Navigering: Tilbake til toppen <ul><li>Interne lenker i lengre dokumenter kan hjelpe brukeren til å lettere finne frem. </li></ul><ul><li>…………………………………… . </li></ul><ul><li><head> </li></ul><ul><li><title>Link til toppen</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Toppen</h1> </li></ul><ul><li><a id=&quot;top”></a> </li></ul><ul><li><p>Paragraf</p> </li></ul><ul><li><p><a href=&quot;#top&quot;> Til Toppen</a</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Relative lenker <ul><li>I de tilfeller hvor en jobber med større nettsider kan det for ordens skyld bli nødvendig med en hierarkisk mappestruktur. </li></ul><ul><li>Link til en fil som ligger i samme mappe: </li></ul><ul><li><a href = ”priser.html”>Priser</a> </li></ul>
  22. 22. Relative lenker <ul><li>Filen ligger i en undermappe </li></ul><ul><li><a href = &quot;b1/ib1.html&quot;>Ib1</a> </li></ul>
  23. 23. Relative lenker <ul><li>Filen ligger rett utenfor mappen ”søkerfilen” ligger i </li></ul><ul><li><a href = &quot;../Golfside.html>Golfside</a> </li></ul><ul><li>Filen ligger i en mappe rett utenfor mappen ”søkerfilen” ligger i </li></ul><ul><li><a href = &quot;../KodeEksempler/test.html&quot;>Tester</a> </li></ul><ul><li>” ../” kan altså tolkes som ”en mappe ut” </li></ul>
  24. 24. Noen prinsipper mht. linker <ul><li>La navnene på linkene være utvetydige </li></ul><ul><li>Unngå å benytte teksten ”Klikk her” som lenken: </li></ul><ul><li>Feil: For å gå til VG.no Klikk her </li></ul><ul><li>Riktig: Klikk her for å gå til VG.no </li></ul><ul><li>Det er vanskeligere å lese tekst på nett enn på papir. Unngå å plassere linker i store bolker med tekst </li></ul><ul><li>Pass på linking til ”døde sider” </li></ul><ul><li>(Felke-Morris, 2007) </li></ul><ul><li>(Nielsen, 2002) </li></ul>
  25. 25. Lister: UL, OL og DL <ul><li>OL: Ordered list </li></ul><ul><li>Nummererte lister. Brukes for lister som skal vise en spesifikk rekkefølge eller rangering av punkter </li></ul><ul><li>UL: Unordered list </li></ul><ul><li>Benyttes for lister hvor det ikke spiller noen rolle hvilken rekkefølge punktene kommer i </li></ul><ul><li>DL: Definition list </li></ul><ul><li>Ord/definisjons forklaringer. Kan sammenlignes med strukturen i ordbøker </li></ul>
  26. 26. Lister eksempel: OL <ul><li>…………………………………… .. </li></ul><ul><li><head> </li></ul><ul><li><title>Tester lister</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h2>The worlds fastest land animals</h2> </li></ul><ul><li><ol> </li></ul><ul><li><li>Cheetah 70 m.p.h.</li> </li></ul><ul><li><li>Pronghorn Antelope 61 m.p.h.</li> </li></ul><ul><li><li>Wildebeest 50 m.p.h.</li> </li></ul><ul><li><li>Lion 50 m.p.h.</li> </li></ul><ul><li><li>Thomson's Gazelle 50 m.p.h.</li> </li></ul><ul><li></ol> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  27. 27. Lister eksempel: UL <ul><li>………………………………… </li></ul><ul><li><head> </li></ul><ul><li><title>Tester lister</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Handleliste</h1> </li></ul><ul><li><ul> </li></ul><ul><li><li>Partyhatter</li> </li></ul><ul><li><li>Champagne</li> </li></ul><ul><li><li>Ballonger</li> </li></ul><ul><li><li>Sugerør</li> </li></ul><ul><li><li>Russisk Kaviar</li> </li></ul><ul><li></ul> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  28. 28. Lister eksempel: DL <ul><li>……………………………………… . </li></ul><ul><li><dl> </li></ul><ul><li><dt>Accessibility</dt> </li></ul><ul><li><dd>Accessibility is a general term used to describe </li></ul><ul><li>the degree to which a system is usable by as </li></ul><ul><li>many people as possible. </li></ul><ul><li></dd> </li></ul><ul><li><dt>Usability</dt> </li></ul><ul><li><dd>Usability is a term used to denote the ease with which </li></ul><ul><li>people can employ a particular tool or other human-made </li></ul><ul><li>object in order to achieve a particular goal. </li></ul><ul><li></dd> </li></ul><ul><li></dl> </li></ul>
  29. 29. Nøsting av lister <ul><li>Lister er De Facto standard tag for navigasjonsmenyer. Med kun HTML og CSS lager man fullverdige navigasjonsmenyer. </li></ul>… <ul> <li><a href=&quot;index.html&quot;>Hjem</a></li> <li><a href=&quot;omOss.html&quot;>Om oss</a></li> <li><a href=&quot;produkter.html&quot;>Produkter</a> <ul> <li><a href=&quot;dvd.html&quot;>DVD</a></li> <li><a href=&quot;blueRay.html&quot;>Blue-Ray</a></li> <li><a href=&quot;spill.html&quot;>Spill</a></li> </ul> </li> <li><a href=&quot;kontaktOss.html&quot;>Kontakt oss</a></li> </ul> …
  30. 30. Blockquote <ul><li>Kan for eksempel brukes når: </li></ul><ul><li>Man siterer fra artikler, bøker, og andre tekster </li></ul><ul><li>Man ønsker å fremheve reviews fra brukere </li></ul>
  31. 31. Blockquote <ul><li><body> </li></ul><ul><li><p>I sin nyeste bok &quot;Tulleboken&quot; av Ginger Freddy skriver han:</p> </li></ul><ul><li><blockquote> </li></ul><ul><li>&quot;Akk o ve der er mange stjerner. Men hvor mange kan der være?&quot; </li></ul><ul><li><blockquote> </li></ul><ul><li>&quot;Altfor mange at telles! Sukk!&quot; </li></ul><ul><li></blockquote> </li></ul><ul><li></blockquote> </li></ul><ul><li></body> </li></ul>
  32. 32. Legge til bilder 1 <ul><li>……… . </li></ul><ul><li><body> </li></ul><ul><li><h3>Et par planet-bilder</h3> </li></ul><ul><li><img src = &quot;planets.jpg” alt=”Planet 1”/> </li></ul><ul><li><img src = &quot;planets2.jpg” alt=”Planet 2”/> </li></ul><ul><li><img src = &quot;planets3.jpg” alt=”Planet 3”/> </li></ul><ul><li></body> </li></ul><ul><li>………… </li></ul>
  33. 33. Legge til bilder 2 <ul><li><body> </li></ul><ul><li><img src = &quot;planets.jpg&quot; height = &quot;300&quot; width = &quot;500&quot; alt = &quot;Venus&quot;/> </li></ul><ul><li><img src = &quot;planets2.jpg&quot; height = &quot;300&quot; width = &quot;500&quot; alt = &quot;Saturn&quot;/> </li></ul><ul><li><img src = &quot;planets3.jpg&quot; height = &quot;300&quot; width = &quot;500&quot; alt = &quot;Jupiter&quot;/> </li></ul><ul><li></body> </li></ul><ul><li>Hvis man setter ”height” og ”width” på </li></ul><ul><li>bilder øker det ladehastigheten på siden. </li></ul><ul><li>(Felke-Morris, 2008). </li></ul><ul><li>Dreamweaver hjelper oss med å finne </li></ul><ul><li>høyde og bredde på bildene. </li></ul>
  34. 34. table <ul><li>……………………………………………………… </li></ul><ul><li><table> </li></ul><ul><li><tr> <!- - Table row -- > </li></ul><ul><li><th>Tittel</th> <!- - Table head - -> </li></ul><ul><li><th>Kategori</th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Spiderman3</td> <!- - Table data - -> </li></ul><ul><li><td>Action</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>Batman</td> </li></ul><ul><li><td>Action</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  35. 35. <hr /> Horizontal ruling <ul><li>Kan benyttes for å markere seksjonsdeling. </li></ul><ul><li>Ganske vanlig når en ønsker å skille produkter på produktsider eller som en markering helt nederst på siden </li></ul>
  36. 36. <hr/> Horizontal ruling <ul><li>…………… .. </li></ul><ul><li><title></title> </li></ul><ul><li><style = &quot;text/css&quot;> </li></ul><ul><li>hr{ </li></ul><ul><li>text-align:left; <!- - Fungerer i IE--> </li></ul><ul><li>margin:0 auto 0 0; <!- - Fungerer i FF- -> </li></ul><ul><li>width:50%; <!- - Kan også benytte pixler: ”width:200;”- -> </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><div> </li></ul><ul><li><img src = &quot;logo1.jpg&quot; alt=&quot;logo&quot;/> </li></ul><ul><li><hr /> </li></ul><ul><li></div> </li></ul><ul><li>……………………… . </li></ul>
  37. 37. Eksempel bruk hr: (hr{border: 1px dashed #000000;})
  38. 38. Bilder som link <ul><li>……………… .. </li></ul><ul><li><a href = &quot;http://www.imdb.com/find?s=all&q=Simpsons&quot;> </li></ul><ul><li><img src = &quot;Simpsons.jpg&quot; height = &quot;200&quot; width = &quot;125&quot;/></a> </li></ul><ul><li>………………… </li></ul><ul><li>Nyttig for sider som er avhengige av </li></ul><ul><li>å mange bilder på en side+Pop-ups </li></ul>
  39. 39. <div> <ul><li>divtagen brukes for å skape logiske divisjoner på en side. Linjeskift forekommer før og etter divisjonen. </li></ul><ul><li>Med nye html 5 tager (se neste slide) blir bruken av div mindre nødvendig. </li></ul><ul><li>Kombineres med id for å styles med css og for identifisering: </li></ul><ul><li><div id = ”topNavigation”></div> </li></ul>
  40. 40. HTML 5 sideinndelingstager <ul><li>Header </li></ul><ul><li>Section </li></ul><ul><li>Nav </li></ul><ul><li>Aside </li></ul><ul><li>Article </li></ul><ul><li>Footer </li></ul>29.08.11
  41. 41. Validering av (X)HTML (5) <ul><li>Gå inn på: http://validator.w3.org/ </li></ul><ul><li>Velg menyen ”Validate by file upload” </li></ul><ul><li>Søk etter filen på ditt området (for eksempel H: hvis du bruker skolens område) </li></ul><ul><li>Last opp og trykk ”Check” </li></ul><ul><li>Få tilbakemelding om validert/ikke validert </li></ul>
  42. 42. Etter validering <ul><li>Får kodebit med link til bilde som bevis på validering som kan velges å brukes på siden </li></ul>
  43. 43. Feilmeldinger under validering <ul><li>Merk at en feil i din kode under validering kan oppfattes som mange feil. </li></ul><ul><li>Begynn alltid med å se på de øverste feilene, rett opp og valider på nytt. </li></ul>
  44. 44. Litteraturliste/Referanseliste <ul><li>Felke-Morris, Terry (2007): ”Web Development & Design Foundations with XHTML” </li></ul><ul><li>Addison Wesley, 3rd edition </li></ul><ul><li>Lie, Håkon Wium; Bos, Bert (2005): Cascading style sheets: Designing for the web </li></ul><ul><li>Addison Wesley, 3rd edition </li></ul><ul><li>W3.org, (2005): Introduction to web accessability </li></ul><ul><li>http://www.w3.org/WAI/intro/accessibility.php </li></ul><ul><li>Heim, Steven (2008): The resonant interface </li></ul>

×