Html, xhtml en Ftp

  • 665 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
665
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML en XHTML DEEL II. XHTML in Praktijk & FTP
  • 2. Inhoud DEEL II
    • opbouw van een tag
    • een minimaal html document
    • belangrijkste tags
    • Verder:
    • table
    • list
    • speciale tekens
    • XHTML in praktijk
      • Tidy
      • W3C validator
    • Connecteren met de server
      • FTP studentenaccount
  • 3. Een minimaal HTML-document
    • <html>
    • <head>
    • <title> Dit is de titel van mijn document </title>
    • </head>
    • <body>
    • <h1>Hallo!</h1>
    • <p> een paragraaf </p>
    • </body>
    • </html>
  • 4. Herhaling: Opbouw van een HTML-tag
    • < tagnaam attribuut1=&quot;waarde&quot; attribuut2=&quot;waarde&quot; >
    • </ tagnaam >
    • de sluit-tag heeft nooit attributen
    • meerdere attributen scheiden dmv spatie
    • alvast 2 XHTML regels:
      • gebruik kleine letters
      • zet waarden tussen aanhalingstekens
  • 5. Structuur aanbrengen
    • Stukken tekst:
      • paragraph <p> </p>
      • division <div> </div>
      • break <br> (in xhtml: <br /> )
    • Hoofdingen:
      • heading 1 -> 6 bv. <h1> </h1>
    • Een horizontale lijn:
      • horizontal rule <hr> (in xhtml: <hr /> )
    • [Zeldzaam] Weergeven zoals in de code:
      • pre-formatted <pre> </pre>
  • 6. Herhaling Hyperlinks
    • Anchor tag
      • <a href=&quot;http://www. maerlant . be &quot;> Ga naar Maerlant </a>
    • Attributen van de anchor tag
      • href=&quot;url&quot;
      • target=&quot;_blank&quot; (nieuw venster)
      • name=&quot;omhetevenwat&quot;
    • Link naar een locatie in de pagina
      • 2 anchors nodig
      • named anchor <a name=&quot;hiernaartoe&quot;></a>
      • anchor <a href=&quot;#hiernaartoe&quot;>klik hier</a>
    • Praktijk http://www.w3schools.com/html/html_links.asp
  • 7. Anchor tag
    • absolute link: bv. <a href=“http://www.kuleuven.ac.be”>Klik</a>
    • image als link
      • <a href= &quot; doc01.htm &quot; ><img src= “ trein.jpg “ alt=“trein”></a>
    • link naar een punt in pagina
      • <a href=&quot;#references&quot;>Additional References</a>
      • <a name=&quot;references&quot;> References</a>
    • link naar emailadres
      • <a href=“mailto:test@test.com”>mail naar test</a>
  • 8. Relatieve links
    • Relatief = naar een document op dezelfde server
    • relatieve link :
      • vanuit a.htm naar map b
      • <a href= “ b &quot; >Klik</a>
      • vanuit b1.htm naar d.htm
      • <a href=“../../study/d.htm”>Klik</a>
      • <a href=“/study/d.htm”>Klik</a>
      • van om het even waar naar de map ‘news’
      • <a href=“/news/”>Klik</a>
  • 9. Herhaling Beelden invoegen
    • Image tag
      • <img src=&quot; trein.jpg &quot;>
    • attributen van de image tag
      • src = de URI van het beeldbestand src=&quot;trein.jpg&quot;
      • alt = alternatieve tekst alt=&quot;stoomtrein&quot;
      • align = alinieer tov de tekst align=“right&quot;
      • width = breedte in pixels width=&quot;50&quot;
      • height = hoogte in pixels height=&quot;100&quot;
    • JPEG, GIF en PNG
    • Praktijk http://www.w3schools.com/tags/tag_img.asp http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align
  • 10. Beeld en tekst
    • Browsers behandelen beeldmateriaal als (grote) tekstkarakters. Default= display inline.
    • Afbeeldingen worden door de meeste browsers default geplaatst op de baseline van de regel tekst waar ze in staan.
    • Image map: je kan binnen een beeld velden definiëren, die afzonderlijke anchor tags kunnen krijgen.
  • 11. Tekst en beeld uitlijnen
    • XHTML geeft 5 opties voor het align waarde:
    • Om tekst naast een beeld te laten lopen:
      • left
      • right
    • Om een beeld ten opzichte van de tekstregels te plaatsen:
      • top
      • middle
      • bottom
    • 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.
    • Zie voorbeeld in COURSE DOCUMENTS
  • 12. List
    • Ordered list <ol> </ol>
    • unordered list <ul> </ul>
    • Altijd met: list item. <li> </li>
    • Je kan lijsten laten ‘nesten’ in elkaar.
    • Praktijk
    • http://www.w3schools.com/tags/tag_li.asp
    • HTML lists + CSS
    • http://css.maxdesign.com.au/listutorial
    • <ul>
      • <li> appel </li>
      • <li> peer </li>
    • </ul>
  • 13. Tabellen
    • Een tabel dient in XHTML om cijferreeksen en data in te presenteren.
    • In HTML gebruikt men tabellen vaak om een layoutraster te creeëren.
    • Een tabel wordt opgebouwd aan de hand van een reeks tags:
    • table, table body, table header , table row, table data
    • Praktijk http://www.w3schools.com/tags/tag_table.asp
  • 14. tabel
    • <table border=&quot;1&quot;> <tr> <td>Cell A</td> <td>Cell B</td> </tr>
    • </table>
    Code Resultaat Cell B Cell A
  • 15. Speciale tekens
    • ASCII = American Standard Code for Information Interchange
    • HTML gebruikt een uitbreiding van ASCII: ISO-Latin-1
    • ‘ Speciale’, ‘Europese’ karakters moeten omgezet worden in een code.
    • Opbouw van zo’n code:
      • & nbsp ; (nbsp = no breaking space)
      • & amp ; (amp = & = ampersand)
      • & eacute ; (é)
  • 16. Meer uitleg:
    • http://www.kerryr.net/pioneers/ascii.htm
  • 17. Lettertypes
    • De FONT tag is Deprecated .
    • Lettertypes, achtergrondkleuren, randen en andere stijlbepalingen worden uitbesteed aan CSS.
  • 18. van XHTML naar HTML: strengere regels
    • XHTML is HTML die zich aan de XML regels houdt. Het is een brug naar XML toe.
    • XHTML moet ‘welgevormd’ zijn.
    • http://www.w3.org/MarkUp/2004/xhtml-faq
  • 19. Waarom XHTML
    • overgangsperiode
    • &quot;forward compatibility&quot;
    • semantisch web
    • “ accessibility”
  • 20. Het minimale XHTML document
    • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
    • <!DOCTYPE html
    • PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional //EN&quot;
    • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional .dtd&quot;>
    • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang= &quot; en &quot; lang= &quot; en &quot; >
    • <head>
    • <title> This is the title </title>
    • </head>
    • <body>
    • <p>a simple paragraph</p>
    • </body>
    • </html>
  • 21. Definities
    • UTF ( Unicode ): character encoding
    • 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.
    • 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.
    • xml:lang : zegt in welke taal het document is opgesteld.
    • In detail:
    • http://www.w3.org/TR/xhtml1/
  • 22. Syntax: XHTML = strengere regels
    • Attribu ut name n moeten in kleine letters.
    • Attribu ut waarden moeten tussen aanhalingstekens.
    • Attribu ut waarden moeten expliciet gemaakt zijn.
    • id attrib uut ipv name
    • nieuwe verplichte elementen
    • nesting
    • eindtags
    • behandeling van lege elementen
  • 23. links
    • http://www.thenetplace.com/xml.php
    • http://www.alistapart.com/articles/betterliving/
    • http://xml.coverpages.org/sgml.html
  • 24. W3C Markup Validator
    • http://validator.w3.org/
    • “ 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. ”
    • Hoe vindt de Validator jouw bestand?
      • Het staat al op een server: geef de URL door.
      • Het staat nog op je PC: upload je bestand.
  • 25. Tidy
    • gratis programma
    • zet een gegeven HTML-pagina om naar, HTML volgens de standaard uit de DTD die je meegeeft.
    • Je vindt het bij het W3C.
    • 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/
  • 26. CSS oefening
    • Maak een nieuwe map op je C-schijf om alle bestanden van je site in te zetten.
    • Download de lesbestanden , zet ze in je nieuwe map.
    • Open het html - bestand in notepad .
    • Voeg beelden toe met de img-tag.
    • Link stylesheet : typ binnen de head tags:
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=“ stijlen .css&quot;>
  • 27. CSS class toevoegen
    • In notepad, voeg je een class selector toe aan je CSS document, waarmee je belangrijke tekst wil markeren.
    • CSS syntax: selector {property: value}
    • .belang {
    • font-weight: bold;
    • color: #CC0033;
    • }
  • 28. FTP
    • File Transfer Protocol
    • Je bestanden op de studentenserver zetten.
    • Mailaccount en webspace staan in dezelfde map. Wis je mail niet!
    • Programma: Filezilla of Dreamweaver
  • 29. FTP client: Filezilla
    • gratis programma
    • http://filezilla.sourceforge.net/
  • 30. Oefening:
    • Met Filezilla:
    • maak een verbinding met je webruimte,
    • maak de map public_html aan,
    • zorg ervoor dat je hoofdpagina index.htm heet,
    • zet al je bestanden op de juiste plaats op de server
    • en post een link naar je site op het forum.
  • 31. Vervolg
    • Dreamweaver