Les01 Htmlen Xhtml2008

F0UO1A Online Publishing > HTML practicum

HTML en XHTML

DEEL I. Een inleiding


Inhoud

DEEL I.

• Historiek

• Instrumentarium

• Een document structureren met (X)HTML.


Software voor deze les

• Browsers: Firefox en Google Chrome• Firefox extensie: Web Developer Toolbar• Text editor: Notepad

Altijd nuttig: keyboard short-cuts• Copy: ctrl+c• Paste: ctrl+v• Cut: ctrl+x• Undo: ctrl+z


Het Internet

• Ontstaan eind jaren ’60

• VSA: Dept. of Defense en universiteiten

• Interessante link:http://livinginternet.com/ttoc_i.htmInternetgeschiedenis in een notedop


Het World Wide Web

• Europa: CERN: Centre Européen pour la Récherche Nucléaire.– Tim Berners-Lee (e. a.) vinden de HTML uit.– Het CERN lanceerde het WWW in 1991.– De term hypertext komt van Ted Nelson, ca. 1965.

• USA: NCSA: National Centre for Supercomputing Applications.– Eerste populaire browser: Mosaic.– Makers van Mosaic beginnen een eigen bedrijf en

maken de Netscape browser.


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.


Browseroorlogen• Internet Explorer versus Netscape

(IE nam de leiding in 1999) • probleem: proprietary code

– markup specifiek voor Netscape of Windows browsers

– web-bouwers moesten verschillende versies voorzien

• En de winnaar is....http://www.w3schools.com/browsers/browsers_stats.asp


Gangbare browsers

http://www.w3schools.com/browsers/default.asp

Zie: statistieken

“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.”


Overlegorganen

Voor de gemeenschappelijke ontwikkeling van standaarden:

• W3C (World Wide Web consortium)http://www.w3.org/

• ISOC (en vele andere!) (Internet)http://www.isoc.org/


Moderne browsers

• De hedendaagse browsers bieden een redelijke ondersteuning van de gangbare standaarden.

• Een moderne browser ondersteunt:– HTML en XHTML– Cascading Style Sheets (CSS)– ECMAscript (gebaseerd op JavaScript)– W3C Document Object Model (DOM)

Glossarium: http://www.w3.org/TR/2003/WD-DOM-Level-3-Core-20030226/glossary.html


Bouwstenen van een webpagina

Een webpagina bestaat meestal uit:

• html

• css

• afbeeldingen

En vaak ook uit:

• javascript

• media


Praktijk

• Ontmantel een pagina met de Firefox extensie: Web Developer Toolbar

• Mooie voorbeelden vind je bij – het W3C:

http://www.w3.org/– CSSzengarden:

http://www.csszengarden.com/– CSShelppile:

http://www.artypapers.com/csshelppile/


Firefox Web Developer Toolbar

https://addons.mozilla.org/extensions/>> Developer tools : Web Developer


https://addons.mozilla.org/extensions/


HTML VALIDATOR (based on Tidy and OpenSP)

• http://users.skynet.be/mgueury/mozilla/


HTML & XHTML

• Hyper Text Markup Language

• Tekst: leesbaar door mens én machine

• inhoud > visuele presentatie


Voorbeeld

• Bekijk een eenvoudig HTML document.– “View source”– Voordeel van de firefox browser:

kleurencode maakt de broncode makkelijker leesbaar.

• HTML maakt gebruik van embedded tags


Embedded Tags

• Een tag is een aanwijzing die in het document wordt aangebracht.

• <tag> tekst tussen tags </tag>• Een tag markeert bvb het begin- en eindpunt

van elke paragraaf: <p>Dit is een paragraaf... </p>

• De meeste HTML-tags bestaan uit een start- en een eind-tag.

• Terzijde: in XHTML moet elke tag een afsluiter hebben. XHTML is rigider dan HTML.


Opbouw van een tag

<tagnaam attribuut=“waarde”> </tagnaam>

bvb: <p align=“center”> </p>

• de sluit-tag heeft nooit attributen• alvast 2 XHTML regels:

– gebruik kleine letters– zet waarden tussen aanhalingstekens


Noodzakelijke tags

• In elk HTML en XHTML document moeten de volgende tags voorkomen:– <html>– <head>– <title> – <body>

• XHTML heeft nog wat meer vereisten (zie later).


Praktijk

Maak een eenvoudig HTML-bestand met Notepad. (zie: accessoires)

1. Maak een folder op de C-schijf

2. open notepad

3. bewaar je lege bestand in de nieuwe folder als “index.html”.


Reproduceer dit:

<html>

<head>

<title>Dit is de titel van mijn document</title>

</head>

<body>

<h1>Hallo!</h1>

<p>een paragraaf</p>

</body>

</html>


Sla het bestand op en open het in je browser.


Hoe gebruik je tags?

1. Content-based stylesOm de logische opbouw van een stuk informatie weer te geven.

2. Physical stylesOm tekst vorm te geven. Maar: het streefdoel is om alles wat betreft de presentatie van tekst behandelen, uit te besteden aan stylesheets.

3. Om speciale karakters weer te geven.


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>


Praktijk

• Download & extract de zip met lesbestanden• Plak de gegeven tekst in het HTML bestand in

notepad, tussen de body tags.• Markeer de titels en tussentitels.

– <h1> </h1>

• Markeer de paragrafen en afgebroken regels.– paragraph <p> </p>– break <br> (in xhtml: <br />)

Voor een XHTML tutorial:http://www.w3schools.com/xhtml/


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


Beelden invoegen

• Image tag– <img src=“trein.jpg">

• attributen van de image tag– src = de URL van het beeldbestand src=“trein.jpg”– alt = alternatieve tekst alt=“stoomtrein”– align = alinieer tov de tekst align="middle"– 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


Opsommingen en andere lijsten

• Ordered list <ol> </ol>• unordered list <ul> </ul>• Altijd met: list item. <li> </li><ul>

<li>item 1</li> <li>item 2</li>

</ul> • Je kan lijsten laten ‘nesten’ in elkaar.Praktijk• http://www.w3schools.com/tags/tag_li.asp


Nested list

<ul> <li>melk </li> <ol> <li>karnemelk</li> <li>volle melk</li> </ol> <li>bloem</li> <li>suiker </li></ul>

• melk

1. karnemelk

2. volle melk

• bloem

• suiker


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 A Cell B

Code Resultaat


Lettertypes

• De FONT tag is Deprecated.

• Lettertypes en andere stijlbepalingen worden uitbesteed aan CSS.


Andere nuttige tags

• Definition lists

• Blocquote

• ...


Praktijk

• Voeg de juiste mark-up toe aan de rest van de tekst.

• Plaats een afbeelding in je document.

Date post:	26-Jun-2015
Category:	Technology
Upload:	culturelestudies
View:	563 times
Download:	1 times

Les01 Htmlen Xhtml2008

Technology