Html, xhtml en Ftp
31
HTML en XHTML DEEL II. XHTML in Praktijk & FTP
-
Upload
culturelestudies -
Category
Technology
-
view
700 -
download
0
Transcript of Html, xhtml en Ftp
HTML en XHTML
DEEL II. XHTML in Praktijk& FTP
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
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>
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
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>
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
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>
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>
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
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.
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
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>
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
tabel
<table border="1"><tr><td>Cell A</td><td>Cell B</td></tr>
</table>
Cell BCell A
Code Resultaat
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)é (é)
Lettertypes
• De FONT tag is Deprecated.• Lettertypes, achtergrondkleuren,
randen en andere stijlbepalingen worden uitbesteed aan CSS.
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
Waarom XHTML
• overgangsperiode• "forward compatibility"• semantisch web• “accessibility”
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>
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/
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
links
• http://www.thenetplace.com/xml.php• http://www.alistapart.com/articles/betterliving/• http://xml.coverpages.org/sgml.html
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.
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/
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">
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;
}
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
FTP client: Filezilla
• gratis programma• http://filezilla.sourceforge.net/
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.
Vervolg
• Dreamweaver
