Les01 Htmlen Xhtml2008

740 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
740
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Les01 Htmlen Xhtml2008

  1. 1. HTML en XHTML DEEL I. Een inleiding
  2. 2. Inhoud <ul><li>DEEL I. </li></ul><ul><li>Historiek </li></ul><ul><li>Instrumentarium </li></ul><ul><li>Een document structureren met (X)HTML. </li></ul>
  3. 3. Software voor deze les <ul><li>Browsers: Firefox en Google Chrome </li></ul><ul><li>Firefox extensie: Web Developer Toolbar </li></ul><ul><li>Text editor: Notepad </li></ul><ul><li>Altijd nuttig: keyboard short-cuts </li></ul><ul><li>Copy: ctrl+c </li></ul><ul><li>Paste: ctrl+v </li></ul><ul><li>Cut: ctrl+x </li></ul><ul><li>Undo: ctrl+z </li></ul>
  4. 4. Het Internet <ul><li>Ontstaan eind jaren ’60 </li></ul><ul><li>VSA: Dept. of Defense en universiteiten </li></ul><ul><li>Interessante link: http://livinginternet.com/ttoc_i. htm Internetgeschiedenis in een notedop </li></ul>
  5. 5. Het World Wide Web <ul><li>Europa: CERN: Centre Européen pour la Récherche Nucléaire. </li></ul><ul><ul><li>Tim Berners-Lee (e. a.) vinden de HTML uit. </li></ul></ul><ul><ul><li>Het CERN lanceerde het WWW in 1991. </li></ul></ul><ul><ul><li>De term hypertext komt van Ted Nelson, ca. 1965. </li></ul></ul><ul><li>USA: NCSA: National Centre for Supercomputing Applications. </li></ul><ul><ul><li>Eerste populaire browser: Mosaic. </li></ul></ul><ul><ul><li>Makers van Mosaic beginnen een eigen bedrijf en maken de Netscape browser. </li></ul></ul>
  6. 6. http://inventors.about.com/gi/dynamic/offsite.htm?zi=1/XJ&sdn=inventors&cdn=money&tm=54&gps=392_569_1276_867&f=00&su=p554.2.150.ip_p284.5.420.ip_&tt=2&bt=0&bts=0&zu=http%3A//www.w3.org/MarkUp/tims_editor Tim Berners-Lee's Browser Editor WorldWideWeb as developed in 1991-92 This was a true browser editor for the first version of HTML and ran on a NeXt workstation. Implemented in Objective-C, it, made it easy to create, view and edit web documents.
  7. 7. Browseroorlogen <ul><li>Internet Explorer versus Netscape (IE nam de leiding in 1999) </li></ul><ul><li>probleem: proprietary code </li></ul><ul><ul><li>markup specifiek voor Netscape of Windows browsers </li></ul></ul><ul><ul><li>web-bouwers moesten verschillende versies voorzien </li></ul></ul><ul><li>En de winnaar is.... </li></ul><ul><li>http://www.w3schools.com/browsers/browsers_stats.asp </li></ul>
  8. 8. Gangbare browsers <ul><li>http://www.w3schools.com/browsers/default.asp </li></ul><ul><li>Zie: statistieken </li></ul><ul><li>“ Internet Explorer 6 is the most common browser, XP is the most dominating operating system, and most users are using a display with 1024x768 pixels or more, with a color depth of at least 65K colors . ” </li></ul>
  9. 9. Overlegorganen <ul><li>Voor de gemeenschappelijke ontwikkeling van standaarden: </li></ul><ul><li>W3C (World Wide Web consortium) http://www.w3.org/ </li></ul><ul><li>ISOC (en vele andere!) (Internet) http://www.isoc.org/ </li></ul>
  10. 10. Moderne browsers <ul><li>De hedendaagse browsers bieden een redelijke ondersteuning van de gangbare standaarden. </li></ul><ul><li>Een moderne browser ondersteunt: </li></ul><ul><ul><li>HTML en XHTML </li></ul></ul><ul><ul><li>Cascading Style Sheets (CSS) </li></ul></ul><ul><ul><li>ECMAscript (gebaseerd op JavaScript) </li></ul></ul><ul><ul><li>W3C Document Object Model (DOM) </li></ul></ul><ul><li>Glossarium: http://www.w3.org/TR/2003/WD-DOM-Level-3-Core-20030226/glossary.html </li></ul>
  11. 11. Bouwstenen van een webpagina <ul><li>Een webpagina bestaat meestal uit: </li></ul><ul><li>html </li></ul><ul><li>css </li></ul><ul><li>afbeeldingen </li></ul><ul><li>En vaak ook uit: </li></ul><ul><li>javascript </li></ul><ul><li>media </li></ul>
  12. 12. Praktijk <ul><li>Ontmantel een pagina met de Firefox extensie : Web Developer Toolbar </li></ul><ul><li>Mooie voorbeelden vind je bij </li></ul><ul><ul><li>het W3C: http://www.w3.org/ </li></ul></ul><ul><ul><li>CSSzengarden: http://www.csszengarden.com/ </li></ul></ul><ul><ul><li>CSShelppile: http://www.artypapers.com/csshelppile/ </li></ul></ul>
  13. 13. Firefox Web Developer Toolbar https://addons.mozilla.org/extensions/ >> Developer tools : Web Developer
  14. 14. https://addons.mozilla.org/extensions/
  15. 15. HTML VALIDATOR (based on Tidy and OpenSP) <ul><li>http://users.skynet.be/mgueury/mozilla/ </li></ul>
  16. 16. HTML & XHTML <ul><li>H yper T ext M arkup L anguage </li></ul><ul><li>Tekst: leesbaar door mens én machine </li></ul><ul><li>inhoud > visuele presentatie </li></ul>
  17. 17. Voorbeeld <ul><li>Bekijk een eenvoudig HTML document. </li></ul><ul><ul><li>“ View source” </li></ul></ul><ul><ul><li>Voordeel van de firefox browser: kleurencode maakt de broncode makkelijker leesbaar. </li></ul></ul><ul><li>HTML maakt gebruik van embedded tags </li></ul>
  18. 18. Embedded Tags <ul><li>Een tag is een aanwijzing die in het document wordt aangebracht. </li></ul><ul><li><tag> tekst tussen tags </tag> </li></ul><ul><li>Een tag markeert bvb het begin- en eindpunt van elke paragraaf: <p>Dit is een paragraaf... </p> </li></ul><ul><li>De meeste HTML- tags bestaan uit een start- en een eind- tag. </li></ul><ul><li>Terzijde : in XHTML moet elke tag een afsluiter hebben. XHTML is rigider dan HTML. </li></ul>
  19. 19. Opbouw van een tag <ul><li>< tagnaam attribuut=“waarde” > </ tagnaam > </li></ul><ul><li>bvb: <p align=“center”> </p> </li></ul><ul><li>de sluit-tag heeft nooit attributen </li></ul><ul><li>alvast 2 XHTML regels: </li></ul><ul><ul><li>gebruik kleine letters </li></ul></ul><ul><ul><li>zet waarden tussen aanhalingstekens </li></ul></ul>
  20. 20. Noodzakelijke tags <ul><li>In elk HTML en XHTML document moeten de volgende tags voorkomen: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><li>XHTML heeft nog wat meer vereisten (zie later). </li></ul>
  21. 21. Praktijk <ul><li>Maak een eenvoudig HTML-bestand met Notepad. (zie: accessoires) </li></ul><ul><li>Maak een folder op de C-schijf </li></ul><ul><li>open notepad </li></ul><ul><li>bewaar je lege bestand in de nieuwe folder als “index.html”. </li></ul>
  22. 22. Reproduceer dit: <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Dit is de titel van mijn document </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> Hallo! </h1> </li></ul><ul><li><p> een paragraaf </p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. Sla het bestand op en open het in je browser.
  24. 24. Hoe gebruik je tags? <ul><li>Content-based styles Om de logische opbouw van een stuk informatie weer te geven. </li></ul><ul><li>Physical styles Om tekst vorm te geven. Maar: het streefdoel is om alles wat betreft de presentatie van tekst behandelen, uit te besteden aan stylesheets. </li></ul><ul><li>Om speciale karakters weer te geven. </li></ul>
  25. 25. Structuur aanbrengen <ul><li>Stukken tekst: </li></ul><ul><ul><li>paragraph <p> </p> </li></ul></ul><ul><ul><li>division <div> </div> </li></ul></ul><ul><ul><li>break <br> (in xhtml: <br /> ) </li></ul></ul><ul><li>Hoofdingen: </li></ul><ul><ul><li>heading 1 -> 6 bv. <h1> </h1> </li></ul></ul><ul><li>Een horizontale lijn: </li></ul><ul><ul><li>horizontal rule <hr> (in xhtml: <hr /> ) </li></ul></ul><ul><li>[Zeldzaam] Weergeven zoals in de code: </li></ul><ul><ul><li>pre-formatted <pre> </pre> </li></ul></ul>
  26. 26. Praktijk <ul><li>Download & extract de zip met lesbestanden </li></ul><ul><li>Plak de gegeven tekst in het HTML bestand in notepad, tussen de body tags. </li></ul><ul><li>Markeer de titels en tussentitels. </li></ul><ul><ul><li><h1> </h1> </li></ul></ul><ul><li>Markeer de paragrafen en afgebroken regels. </li></ul><ul><ul><li>paragraph <p> </p> </li></ul></ul><ul><ul><li>break <br> (in xhtml: <br /> ) </li></ul></ul><ul><li>Voor een XHTML tutorial: </li></ul><ul><li>http://www.w3schools.com/xhtml/ </li></ul>
  27. 27. Hyperlinks <ul><li>Anchor tag </li></ul><ul><ul><li><a href=&quot;http://www. maerlant . be &quot;> Ga naar Maerlant </a> </li></ul></ul><ul><li>Attributen van de anchor tag </li></ul><ul><ul><li>href=“url” </li></ul></ul><ul><ul><li>target=“_blank” (nieuw venster) </li></ul></ul><ul><ul><li>name=“omhetevenwat” </li></ul></ul><ul><li>Link naar een locatie in de pagina </li></ul><ul><ul><li>2 anchors nodig </li></ul></ul><ul><ul><li>named anchor <a name=“hiernaartoe”></a> </li></ul></ul><ul><ul><li>anchor <a href=“#hiernaartoe”>klik hier</a> </li></ul></ul><ul><li>Praktijk http://www.w3schools.com/html/html_links.asp </li></ul>
  28. 28. Beelden invoegen <ul><li>Image tag </li></ul><ul><ul><li><img src= “trein.jpg &quot;> </li></ul></ul><ul><li>attributen van de image tag </li></ul><ul><ul><li>src = de URL van het beeldbestand src=“trein.jpg” </li></ul></ul><ul><ul><li>alt = alternatieve tekst alt=“stoomtrein” </li></ul></ul><ul><ul><li>align = alinieer tov de tekst align=&quot;middle&quot; </li></ul></ul><ul><ul><li>width = breedte in pixels width=“50&quot; </li></ul></ul><ul><ul><li>height = hoogte in pixels height=“100&quot; </li></ul></ul><ul><li>JPEG, GIF en PNG </li></ul><ul><li>Praktijk http://www.w3schools.com/tags/tag_img.asp http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align </li></ul>
  29. 29. Opsommingen en andere lijsten <ul><li>Ordered list <ol> </ol> </li></ul><ul><li>unordered list <ul> </ul> </li></ul><ul><li>Altijd met: list item. <li> </li> </li></ul><ul><li><ul> </li></ul><ul><ul><li><li> item 1 </li> </li></ul></ul><ul><ul><li><li> item 2 </li> </li></ul></ul><ul><li></ul> </li></ul><ul><li>Je kan lijsten laten ‘nesten’ in elkaar. </li></ul><ul><li>Praktijk </li></ul><ul><li>http://www.w3schools.com/tags/tag_li.asp </li></ul>
  30. 30. Nested list <ul><li><ul> </li></ul><ul><li><li> melk </li> </li></ul><ul><li><ol> </li></ul><ul><li><li> karnemelk </li> </li></ul><ul><li><li> volle melk </li> </li></ul><ul><li></ol> </li></ul><ul><li><li> bloem </li> </li></ul><ul><li><li> suiker </li> </li></ul><ul><li></ul> </li></ul><ul><li>melk </li></ul><ul><ul><li>karnemelk </li></ul></ul><ul><ul><li>volle melk </li></ul></ul><ul><li>bloem </li></ul><ul><li>suiker </li></ul>
  31. 31. Tabellen <ul><li>Een tabel dient in XHTML om cijferreeksen en data in te presenteren. </li></ul><ul><li>In HTML gebruikt men tabellen vaak om een layoutraster te creeëren. </li></ul><ul><li>Een tabel wordt opgebouwd aan de hand van een reeks tags: </li></ul><ul><li>table, table body, table header, table row, table data </li></ul><ul><li>Praktijk http://www.w3schools.com/tags/tag_table.asp </li></ul>
  32. 32. tabel <ul><li><table border = &quot;1&quot;> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </li></ul><ul><li></table> </li></ul>Code Resultaat Cell B Cell A
  33. 33. Lettertypes <ul><li>De FONT tag is Deprecated . </li></ul><ul><li>Lettertypes en andere stijlbepalingen worden uitbesteed aan CSS. </li></ul>
  34. 34. Andere nuttige tags <ul><li>Definition lists </li></ul><ul><li>Blocquote </li></ul><ul><li>... </li></ul>
  35. 35. Praktijk <ul><li>Voeg de juiste mark-up toe aan de rest van de tekst. </li></ul><ul><li>Plaats een afbeelding in je document. </li></ul>

×