Html, xhtml en Ftp

917 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
917
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html, xhtml en Ftp

  1. 1. HTML en XHTML DEEL II. XHTML in Praktijk & FTP
  2. 2. Inhoud DEEL II <ul><li>opbouw van een tag </li></ul><ul><li>een minimaal html document </li></ul><ul><li>belangrijkste tags </li></ul><ul><li>Verder: </li></ul><ul><li>table </li></ul><ul><li>list </li></ul><ul><li>speciale tekens </li></ul><ul><li>XHTML in praktijk </li></ul><ul><ul><li>Tidy </li></ul></ul><ul><ul><li>W3C validator </li></ul></ul><ul><li>Connecteren met de server </li></ul><ul><ul><li>FTP studentenaccount </li></ul></ul>
  3. 3. Een minimaal HTML-document <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>
  4. 4. Herhaling: Opbouw van een HTML-tag <ul><li>< tagnaam attribuut1=&quot;waarde&quot; attribuut2=&quot;waarde&quot; > </li></ul><ul><li></ tagnaam > </li></ul><ul><li>de sluit-tag heeft nooit attributen </li></ul><ul><li>meerdere attributen scheiden dmv spatie </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>
  5. 5. 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>
  6. 6. Herhaling 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=&quot;url&quot; </li></ul></ul><ul><ul><li>target=&quot;_blank&quot; (nieuw venster) </li></ul></ul><ul><ul><li>name=&quot;omhetevenwat&quot; </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=&quot;hiernaartoe&quot;></a> </li></ul></ul><ul><ul><li>anchor <a href=&quot;#hiernaartoe&quot;>klik hier</a> </li></ul></ul><ul><li>Praktijk http://www.w3schools.com/html/html_links.asp </li></ul>
  7. 7. Anchor tag <ul><li>absolute link: bv. <a href=“http://www.kuleuven.ac.be”>Klik</a> </li></ul><ul><li>image als link </li></ul><ul><ul><li><a href= &quot; doc01.htm &quot; ><img src= “ trein.jpg “ alt=“trein”></a> </li></ul></ul><ul><li>link naar een punt in pagina </li></ul><ul><ul><li><a href=&quot;#references&quot;>Additional References</a> </li></ul></ul><ul><ul><li><a name=&quot;references&quot;> References</a> </li></ul></ul><ul><li>link naar emailadres </li></ul><ul><ul><li><a href=“mailto:test@test.com”>mail naar test</a> </li></ul></ul>
  8. 8. Relatieve links <ul><li>Relatief = naar een document op dezelfde server </li></ul><ul><li>relatieve link : </li></ul><ul><ul><li>vanuit a.htm naar map b </li></ul></ul><ul><ul><li><a href= “ b &quot; >Klik</a> </li></ul></ul><ul><ul><li>vanuit b1.htm naar d.htm </li></ul></ul><ul><ul><li><a href=“../../study/d.htm”>Klik</a> </li></ul></ul><ul><ul><li><a href=“/study/d.htm”>Klik</a> </li></ul></ul><ul><ul><li>van om het even waar naar de map ‘news’ </li></ul></ul><ul><ul><li><a href=“/news/”>Klik</a> </li></ul></ul>
  9. 9. Herhaling Beelden invoegen <ul><li>Image tag </li></ul><ul><ul><li><img src=&quot; trein.jpg &quot;> </li></ul></ul><ul><li>attributen van de image tag </li></ul><ul><ul><li>src = de URI van het beeldbestand src=&quot;trein.jpg&quot; </li></ul></ul><ul><ul><li>alt = alternatieve tekst alt=&quot;stoomtrein&quot; </li></ul></ul><ul><ul><li>align = alinieer tov de tekst align=“right&quot; </li></ul></ul><ul><ul><li>width = breedte in pixels width=&quot;50&quot; </li></ul></ul><ul><ul><li>height = hoogte in pixels height=&quot;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>
  10. 10. Beeld en tekst <ul><li>Browsers behandelen beeldmateriaal als (grote) tekstkarakters. Default= display inline. </li></ul><ul><li>Afbeeldingen worden door de meeste browsers default geplaatst op de baseline van de regel tekst waar ze in staan. </li></ul><ul><li>Image map: je kan binnen een beeld velden definiëren, die afzonderlijke anchor tags kunnen krijgen. </li></ul>
  11. 11. Tekst en beeld uitlijnen <ul><li>XHTML geeft 5 opties voor het align waarde: </li></ul><ul><li>Om tekst naast een beeld te laten lopen: </li></ul><ul><ul><li>left </li></ul></ul><ul><ul><li>right </li></ul></ul><ul><li>Om een beeld ten opzichte van de tekstregels te plaatsen: </li></ul><ul><ul><li>top </li></ul></ul><ul><ul><li>middle </li></ul></ul><ul><ul><li>bottom </li></ul></ul><ul><li>texttop , absmiddle , baselin e, absbottom , center zijn attributen die door Netscape en/of Internet Explorer toegelaten zijn, maar die niet in de standaard zitten. Deze attributen zijn proprietary code. </li></ul><ul><li>Zie voorbeeld in COURSE DOCUMENTS </li></ul>
  12. 12. List <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>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><ul><li>HTML lists + CSS </li></ul><ul><li>http://css.maxdesign.com.au/listutorial </li></ul><ul><li><ul> </li></ul><ul><ul><li><li> appel </li> </li></ul></ul><ul><ul><li><li> peer </li> </li></ul></ul><ul><li></ul> </li></ul>
  13. 13. 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>
  14. 14. 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
  15. 15. Speciale tekens <ul><li>ASCII = American Standard Code for Information Interchange </li></ul><ul><li>HTML gebruikt een uitbreiding van ASCII: ISO-Latin-1 </li></ul><ul><li>‘ Speciale’, ‘Europese’ karakters moeten omgezet worden in een code. </li></ul><ul><li>Opbouw van zo’n code: </li></ul><ul><ul><li>& nbsp ; (nbsp = no breaking space) </li></ul></ul><ul><ul><li>& amp ; (amp = & = ampersand) </li></ul></ul><ul><ul><li>& eacute ; (é) </li></ul></ul>
  16. 16. Meer uitleg: <ul><li>http://www.kerryr.net/pioneers/ascii.htm </li></ul>
  17. 17. Lettertypes <ul><li>De FONT tag is Deprecated . </li></ul><ul><li>Lettertypes, achtergrondkleuren, randen en andere stijlbepalingen worden uitbesteed aan CSS. </li></ul>
  18. 18. van XHTML naar HTML: strengere regels <ul><li>XHTML is HTML die zich aan de XML regels houdt. Het is een brug naar XML toe. </li></ul><ul><li>XHTML moet ‘welgevormd’ zijn. </li></ul><ul><li>http://www.w3.org/MarkUp/2004/xhtml-faq </li></ul>
  19. 19. Waarom XHTML <ul><li>overgangsperiode </li></ul><ul><li>&quot;forward compatibility&quot; </li></ul><ul><li>semantisch web </li></ul><ul><li>“ accessibility” </li></ul>
  20. 20. Het minimale XHTML document <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> </li></ul><ul><li><!DOCTYPE html </li></ul><ul><li>PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional //EN&quot; </li></ul><ul><li>&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; xml:lang= &quot; en &quot; lang= &quot; en &quot; > </li></ul><ul><li><head> </li></ul><ul><li><title> This is the title </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>a simple paragraph</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Definities <ul><li>UTF ( Unicode ): character encoding </li></ul><ul><li>DTD : A D ocument T ype D efinition (DTD) is a file that specifies which elements and attributes exist in a markup language and where they can appear. </li></ul><ul><li>xmlns declares a namespace. An XML namespace is a collection of names that can be used as element or attribute names in an XML document. </li></ul><ul><li>xml:lang : zegt in welke taal het document is opgesteld. </li></ul><ul><li>In detail: </li></ul><ul><li>http://www.w3.org/TR/xhtml1/ </li></ul>
  22. 22. Syntax: XHTML = strengere regels <ul><li>Attribu ut name n moeten in kleine letters. </li></ul><ul><li>Attribu ut waarden moeten tussen aanhalingstekens. </li></ul><ul><li>Attribu ut waarden moeten expliciet gemaakt zijn. </li></ul><ul><li>id attrib uut ipv name </li></ul><ul><li>nieuwe verplichte elementen </li></ul><ul><li>nesting </li></ul><ul><li>eindtags </li></ul><ul><li>behandeling van lege elementen </li></ul>
  23. 23. links <ul><li>http://www.thenetplace.com/xml.php </li></ul><ul><li>http://www.alistapart.com/articles/betterliving/ </li></ul><ul><li>http://xml.coverpages.org/sgml.html </li></ul>
  24. 24. W3C Markup Validator <ul><li>http://validator.w3.org/ </li></ul><ul><li>“ The W3C Markup Validation Service is a free service that checks Web documents in formats like HTML and XHTML for conformance to W3C Recommendations and other standards. ” </li></ul><ul><li>Hoe vindt de Validator jouw bestand? </li></ul><ul><ul><li>Het staat al op een server: geef de URL door. </li></ul></ul><ul><ul><li>Het staat nog op je PC: upload je bestand. </li></ul></ul>
  25. 25. Tidy <ul><li>gratis programma </li></ul><ul><li>zet een gegeven HTML-pagina om naar, HTML volgens de standaard uit de DTD die je meegeeft. </li></ul><ul><li>Je vindt het bij het W3C. </li></ul><ul><li>Om te testen of je Tidy nodig hebt, of om je code handmatig te verbeteren, gebruik je de W3C Markup validator service: http://validator.w3.org/ </li></ul>
  26. 26. CSS oefening <ul><li>Maak een nieuwe map op je C-schijf om alle bestanden van je site in te zetten. </li></ul><ul><li>Download de lesbestanden , zet ze in je nieuwe map. </li></ul><ul><li>Open het html - bestand in notepad . </li></ul><ul><li>Voeg beelden toe met de img-tag. </li></ul><ul><li>Link stylesheet : typ binnen de head tags: </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=“ stijlen .css&quot;> </li></ul>
  27. 27. CSS class toevoegen <ul><li>In notepad, voeg je een class selector toe aan je CSS document, waarmee je belangrijke tekst wil markeren. </li></ul><ul><li>CSS syntax: selector {property: value} </li></ul><ul><li>.belang { </li></ul><ul><li>font-weight: bold; </li></ul><ul><li>color: #CC0033; </li></ul><ul><li>} </li></ul>
  28. 28. FTP <ul><li>File Transfer Protocol </li></ul><ul><li>Je bestanden op de studentenserver zetten. </li></ul><ul><li>Mailaccount en webspace staan in dezelfde map. Wis je mail niet! </li></ul><ul><li>Programma: Filezilla of Dreamweaver </li></ul>
  29. 29. FTP client: Filezilla <ul><li>gratis programma </li></ul><ul><li>http://filezilla.sourceforge.net/ </li></ul>
  30. 30. Oefening: <ul><li>Met Filezilla: </li></ul><ul><li>maak een verbinding met je webruimte, </li></ul><ul><li>maak de map public_html aan, </li></ul><ul><li>zorg ervoor dat je hoofdpagina index.htm heet, </li></ul><ul><li>zet al je bestanden op de juiste plaats op de server </li></ul><ul><li>en post een link naar je site op het forum. </li></ul>
  31. 31. Vervolg <ul><li>Dreamweaver </li></ul>

×