html, xhtml en ftp
TRANSCRIPT
![Page 1: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/1.jpg)
HTML en XHTML
DEEL II. XHTML in Praktijk& FTP
![Page 2: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/2.jpg)
Inhoud DEEL II• opbouw van een tag• een minimaal html document• belangrijkste tagsVerder:• table• list• speciale tekens• XHTML in praktijk
– Tidy– W3C validator
• Connecteren met de server– FTP studentenaccount
![Page 3: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/3.jpg)
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>
![Page 4: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/4.jpg)
Herhaling: Opbouw van een HTML-tag
<tagnaam attribuut1="waarde" attribuut2="waarde"> </tagnaam>
• de sluit-tag heeft nooit attributen• meerdere attributen scheiden dmv spatie• alvast 2 XHTML regels:
– gebruik kleine letters– zet waarden tussen aanhalingstekens
![Page 5: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/5.jpg)
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>
![Page 6: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/6.jpg)
Herhaling Hyperlinks• Anchor tag
– <a href="http://www.maerlant.be">Ga naar Maerlant</a>
• Attributen van de anchor tag– href="url"– target="_blank" (nieuw venster)– name="omhetevenwat"
• Link naar een locatie in de pagina – 2 anchors nodig– named anchor <a name="hiernaartoe"></a>– anchor <a href="#hiernaartoe">klik hier</a>
• Praktijkhttp://www.w3schools.com/html/html_links.asp
![Page 7: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/7.jpg)
Anchor tag
• absolute link:bv. <a href=“http://www.kuleuven.ac.be”>Klik</a>
• image als link– <a href="doc01.htm"><img src=“trein.jpg“ alt=“trein”></a>
• link naar een punt in pagina– <a href="#references">Additional References</a>– <a name="references"> References</a>
• link naar emailadres– <a href=“mailto:[email protected]”>mail naar test</a>
![Page 8: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/8.jpg)
Relatieve links
Relatief = naar een document op dezelfde serverrelatieve link :
– vanuit a.htm naar map b<a href=“b">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>
![Page 9: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/9.jpg)
Herhaling Beelden invoegen
• Image tag– <img src="trein.jpg">
• attributen van de image tag– src = de URI van het beeldbestand src="trein.jpg"– alt = alternatieve tekst alt="stoomtrein"– align = alinieer tov de tekst align=“right"– width = breedte in pixels width="50"– height = hoogte in pixels height="100"
• JPEG, GIF en PNG• Praktijk
http://www.w3schools.com/tags/tag_img.asphttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align
![Page 10: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/10.jpg)
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.
![Page 11: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/11.jpg)
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, baseline, 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
![Page 12: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/12.jpg)
List
• Ordered list <ol> </ol>• unordered list <ul> </ul>• Altijd met: list item. <li> </li>• Je kan lijsten laten ‘nesten’ in elkaar.• Praktijkhttp://www.w3schools.com/tags/tag_li.asp• HTML lists + CSShttp://css.maxdesign.com.au/listutorial
<ul>
<li>appel</li>
<li>peer</li>
</ul>
![Page 13: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/13.jpg)
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
• Praktijkhttp://www.w3schools.com/tags/tag_table.asp
![Page 14: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/14.jpg)
tabel
<table border="1"><tr><td>Cell A</td><td>Cell B</td></tr>
</table>
Cell BCell A
Code Resultaat
![Page 15: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/15.jpg)
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 = no breaking space)& (amp = & = ampersand)é (é)
![Page 17: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/17.jpg)
Lettertypes
• De FONT tag is Deprecated.• Lettertypes, achtergrondkleuren,
randen en andere stijlbepalingen worden uitbesteed aan CSS.
![Page 18: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/18.jpg)
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
![Page 19: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/19.jpg)
Waarom XHTML
• overgangsperiode• "forward compatibility"• semantisch web• “accessibility”
![Page 20: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/20.jpg)
Het minimale XHTML document
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>This is the title</title></head><body>
<p>a simple paragraph</p></body>
</html>
![Page 21: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/21.jpg)
Definities
• UTF (Unicode): character encoding• DTD: A Document Type Definition (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/
![Page 22: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/22.jpg)
Syntax: XHTML = strengere regels
• Attribuut namen moeten in kleine letters.• Attribuut waarden moeten tussen
aanhalingstekens.• Attribuut waarden moeten expliciet gemaakt zijn.• id attribuut ipv name• nieuwe verplichte elementen• nesting• eindtags• behandeling van lege elementen
![Page 23: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/23.jpg)
links
• http://www.thenetplace.com/xml.php• http://www.alistapart.com/articles/betterliving/• http://xml.coverpages.org/sgml.html
![Page 24: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/24.jpg)
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.
![Page 25: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/25.jpg)
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/
![Page 26: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/26.jpg)
CSS oefening
1. Maak een nieuwe map op je C-schijf om alle bestanden van je site in te zetten.
2. Download de lesbestanden, zet ze in je nieuwe map.
3. Open het html-bestand in notepad.4. Voeg beelden toe met de img-tag.5. Link stylesheet: typ binnen de head tags:
<link rel="stylesheet" type="text/css" media="screen" href=“stijlen.css">
![Page 27: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/27.jpg)
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;
}
![Page 28: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/28.jpg)
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
![Page 29: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/29.jpg)
FTP client: Filezilla
• gratis programma• http://filezilla.sourceforge.net/
![Page 30: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/30.jpg)
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.
![Page 31: Html, xhtml en Ftp](https://reader030.vdocuments.site/reader030/viewer/2022020110/559848c81a28ab52168b477d/html5/thumbnails/31.jpg)
Vervolg
• Dreamweaver