Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 1: Inleiding xHTML.

Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 1: Inleiding xHTML."— Transcript van de presentatie:

1 Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 1: Inleiding xHTML

2 Webtechnologie Labo 1 2 Inhoud: Les 1 HTML XHTML WELLFORMED VALID BASISELEMENTEN

3 Webtechnologie Labo 1 3 HTML: Ontstaan HyperText Markup Language HTML = HyperText Markup Language Een taal voor de opmaak van documenten. HTML wordt vooral gebruikt op het World Wide Web, om webpagina’s te tonen. HTML: Bedacht door Tim Berners-Lee (1991) Verder ontwikkeld door het World Wide Web Consortium (W3).W3

4 Webtechnologie Labo 1 4 HTML: Hypertext? HYPERTEXT niet lineair Tekst die niet lineair is opgebouwd links Tekst die links kan bevatten naar andere teksten, zowel op een gelijk, als een hoger, als een lager niveau.

5 Webtechnologie Labo 1 5 HTML: Markup? MARKUP Elementen Elementen zijn de bouwstenen Elementen worden aangeduid dmv een TAG Meer gegevens over het element kunnen in een attribuut geplaatst worden. test BeginelementAttribuutEindelement

6 Webtechnologie Labo 1 6 HTML: Taal = regels Om een taal te begrijpen moeten er afspraken gemaakt worden: Open standaarden Open standaarden via W3CW3C HTML is een taal nooit af is. Zolang de technologie zal evolueren zal HTML mee- evolueren.

7 Webtechnologie Labo 1 7 HTML: Korte Geschiedenis Geschiedenis van HTML 13 nov 1990: eerste HTML pagina (link) 13 nov 1990: eerste HTML pagina (link)link 1995: eerste standaard – HTML 2.0 1995: eerste standaard – HTML 2.0 1996: HTML 3.0 (geen standaard door NN3) 1996: HTML 3.0 (geen standaard door NN3) jan. 1997: tweede standaard – HTML 3.2 jan. 1997: tweede standaard – HTML 3.2 dec. 1997: derde standaard – HTML 4.0 dec. 1997: derde standaard – HTML 4.0 dec 1999: vierde standaard – HTML 4.0.1 dec 1999: vierde standaard – HTML 4.0.1 Meer informatie Meer informatie Meer informatie Meer informatie

8 Webtechnologie Labo 1 8 HTML: Korte Geschiedenis SGML XML HTMLxHTML XML = Strikte vorm van SGML XML = Strikte vorm van SGML HTML: afgeleid van SGML HTML: afgeleid van SGML XHTML: afgeleid van XML (strikte SGML) XHTML: afgeleid van XML (strikte SGML)

9 Webtechnologie Labo 1 9 xHTML: Korte Geschiedenis xHTML 1.0 Extensible HTML HTML, maar met strikte syntax Nieuwe tak van SGML Volledig compatibel met HTML 4.01 Gebaseerd op XML Weinig verandering aan de elementen Nieuwe regels Hoofdzaak: Nieuwe regels

10 Webtechnologie Labo 1 10 xHTML: Terminologie EXTENSIBLE Uitgebreide versie van HTML 4.01 Is de nieuwe standaard Uitbereiding dmv: Meer mogelijkheden met betere scheiding tussen de 3 basispeilers van een document: Grafische opmaak (style) Structureel (tree) Inhoud(content)

11 Webtechnologie Labo 1 11 xHTML: Terminologie Extensible Hypertext Markup LanguageWebpagina Inhoud … … Files van het type html Grafische opmaak Stylesheets Files van type css of xsl Structuur Document Type Defenition *.dtd file

12 Webtechnologie Labo 1 12 xHTML: Voordelen Vlottere uitwisseling eenzelfde bron verschillende media. Vlottere uitwisseling van gegevens van eenzelfde bron (dezelfde inhoud) naar verschillende media. WEB telefoon WEB televisie WAP Browser

13 Webtechnologie Labo 1 13 xHTML: in 3 ‘smaken’ xHTML Frameset Indien we frames gebruiken op een pagina. xHTML Transitional Indien we opmaak binnen de xHTML willen gebruiken. xHTML Strict De strengste vorm,die zorgt voor een volledige scheiding van inhoud en opmaak.

14 Webtechnologie Labo 1 14 xHTML: in 3 ‘smaken’ Hoe maken we een nieuwe pagina in de Strict ‘smaak’?

15 Webtechnologie Labo 1 15 Dreamweaver installatie Dreamweaver 8 installeren is kinderspel, dubbelklik op de installatiefile en dan een aantal keer op OK. Voer daarna je persoonlijke code in om Dreamweaver 8 te registreren. Indien je die nog niet hebt, kies dan voor de trial.

16 Webtechnologie Labo 1 16 Dreamweaver - Workspace

17 Webtechnologie Labo 1 17 xHTML in Dreamweaver Dreamweaver 8 is een excellent hulpmiddel om xHTML code te schrijven. Dreamweaver 8 maakt wel niet zomaar valid xHTML code. Er moeten eerst een aantal dingen geconfigureerd worden. Op de volgende slides kan je stap voor stap volgen wat er moet gebeuren Voer nu eerst alle stappen uit voordat we verder gaan.

18 Webtechnologie Labo 1 18 xHTML in Dreamweaver Een nieuwe xHTML File Open Dreamweaver, klik File > New, dan krijg je dit dialoogvenster. Selecteer: "Basic Page" in Category en "HTML" in Basic Page. Kies bij document type (DTD) de "XHTML 1.0 Strict". Dit dien je te doen elke keer je een nieuwe pagina maakt!

19 Webtechnologie Labo 1 19 xHTML in Dreamweaver Een nieuwe file zal geopend worden. In code view zal je nu de volgende code zien: Untitled Document

20 Webtechnologie Labo 1 20 xHTML in Dreamweaver - preferences 1. Accessibility Edit > Preferences Onder Category selecteer je "Accessibility" en vink daar alle checkboxen aan: Form Objects, Frames, Media, Images and Tables. Hoewel dit niet vereist is voor een valid xHTML pagina, zal dit makkelijker zijn om te werken.

21 Webtechnologie Labo 1 21 xHTML in Dreamweaver - preferences 2. Code Formatting Selecteer nu "Code Format" en zorg ervoor dat "Default Tag Case" en "Default Attribute Case" op lowercase staan, zoals in het voorbeeld is weergegeven. Vink ook "Use Div Tag for centering" aan.

22 Webtechnologie Labo 1 22 xHTML in Dreamweaver - preferences 3. Default Nieuw Bestand Selecteer New Document en zorg ervoor dat "XHTML Strict" is geselecteerd. De default extension zet je op ".htm"

23 Webtechnologie Labo 1 23 xHTML in Dreamweaver - preferences 4. Instellingen om in Dreamweaver te valideren Als laatste puntje: selecteer Validator en deselecteer daar alles! Nu ben je klaar om xHTML te gaan schrijven met Dreamweaver!

24 Webtechnologie Labo 1 24 xHTML: Het prille begin Benodigdheden voor 1 xHTML-document DOCTYPE-declaratie (om aan te duiden welke ‘smaak’ je gebruikt) - element

25 Webtechnologie Labo 1 25 OPDRACHT Maak tijdens de lessen een reference aan in de snippets. Reference? Een reference is een naslagwerk waarin je hier stukjes code bewaart. Snippets? In de Files panel vind je de tab snippets. Daar maak je een map ‘reference’ aan, met daarin twee mapjes, nl. xHTML en CSS. In die mapjes maak je dan de codestukjes aan. Dit is een tip voor tijdens het examen, om sneller te kunnen werken!

26 Webtechnologie Labo 1 26 A-oefening 1: Hello World Maak een nieuw “hello world” xHTML bestand. (zie volgende slide) Valideer het bestand (Shift + F6) Geef het bestand weer in een browservenster (F12 of Ctrl+F12)

27 Webtechnologie Labo 1 27 A-Oefening 1: Hello World Maak volgend document in Dreamweaver Hier moet een titel komen Hello World! Bekijk het in Internet Explorer of Firefox Valideer het met de Validator (Shift+F6)

28 Webtechnologie Labo 1 28 A-Oefening 1b: Hello World Verwijder/wijzig enkele tags bvb Hier moet een titel komen Hello World! Bekijk het in Internet Explorer of Firefox Wat is het verschil? Valideer het! Wat is het verschil?

29 Webtechnologie Labo 1 29 Wellformed versus Valid Wellformed xHTML Beantwoordt aan de xHTML-syntax Wordt door de ‘parser’ herkend als document tree Valid xHTML Is well-formed Beantwoord aan een structuurdocument (DTD) ‘Wellformed’ Nederlands Beantwoordt aan de spellingsregels Volgt het Groene Boekje ‘Valid’ Nederlands Is juist gespeld Beantwoord aan de grammaticaregels

30 Webtechnologie Labo 1 30 Wellformed – 4 hoofdregels Slecht 1 rootelement Tags staan in kleine letters Gebalanceerde tags of tags altijd sluiten Juist nesten van tags (geen overlapping) Afsluiten van attributen met dubbele aanhalingstekens Volwaardige en expliciete vermelding van attributen Correcte weergave van speciale tekens

31 Webtechnologie Labo 1 31 Wellformed – 4 hoofdregels (1/2) Slecht 1 rootelement: Dit is het enige mogelijke rootelement voor xhtml Zorg dus dat je document begint met en eindigt met Daarboven moet wel de DOCTYPE staan! Tags en attributen staan in kleine letters = OK = Niet OK

32 Webtechnologie Labo 1 32 Wellformed – 4 hoofdregels (2/2) Gebalanceerde tags of tags altijd sluiten = OK = Niet OK Juist nesten van tags (geen overlapping) … = OK … = Niet OK

33 Webtechnologie Labo 1 33 Wellformed – regels Afsluiten van attributen met “ ” version=“1.0”= OK version=‘1.0’= Niet OK version=“1.0’= Niet OK version=‘1.0”= Niet OK Volwaardige en expliciete vermelding van attributen checked=“checked” = OK checked= Niet OK

34 Webtechnologie Labo 1 34 Wellformed – regels Correcte weergave van speciale tekens &  &of & <  <of < >  > of > ‘  &apos; of " “  &qout; of ' ©  ©of © Installeer hiervoor PIHentiteiten.mxpPIHentiteiten.mxp

35 Webtechnologie Labo 1 35 A-Oefening 2:,,,,, Headings of hoofdingen of koptekst Containertag Kan gebruikt worden voor titels h1  h6 Na de hoofding komt telkens een “new line character” Maak deze oefening na

36 Webtechnologie Labo 1 36 A-Oefening 3: New line character – een ‘enter’ Unaire tag – speciale syntax Probeer deze oefening

37 Webtechnologie Labo 1 37 A-Oefening 4: Horizontal rule - horizontale lijn Unaire tag – speciale syntax Maak deze oefening na

38 Webtechnologie Labo 1 38 A-Oefening 5: … … Paragraaf Probeer deze oef.

39 Webtechnologie Labo 1 39 A-Oefening 6: Commentaar Probeer deze oefening Dit is een lijn tekst

40 Webtechnologie Labo 1 40 B-Oefening 1 Maak volgende voorbeeld na Maak volgende voorbeeld na Controleer de well-formedness Controleer de well-formedness

41 Webtechnologie Labo 1 41 TIP Wij kiezen voor de extensie.htm Je mag van het W3C eigenlijk vrij kiezen tussen *.htm en *.html Wees consequent en ga niet ‘mixen’ Maak in DW een minimaal xHTML document en sla dit op als Code Snippet

42 Webtechnologie Labo 1 42 Lijsten Opsommingen maken Gebruik geen – Gebruik geen * Gebruik geen ° … xHTML biedt elementen aan voor opsommingen!

43 Webtechnologie Labo 1 43 Lijsten HTML/xHTML kent 3 soorten lijsten

44 Webtechnologie Labo 1 44 Unordered list Ordered list eerste item tweede item derde item eerste item tweede item derde item

45 Webtechnologie Labo 1 45 Definition lists definition term definition description second definition term second definition description

46 Webtechnologie Labo 1 46 A-oefening 7 Maak de lijstjes uit slide 44 en 45 na opgelet: niet copy-pasten, door xHTML zelf in te tikken krijg je het in de vingers... !

47 Webtechnologie Labo 1 47 A-oefening 8 Lijsten nesten = lijstje in een lijstje je kan lijsten ook gaan combineren hou je code overzichtelijk!

48 Webtechnologie Labo 1 48 xHTML: Attributen bij xHTML-elementen kan je verdere eigenschappen aangeven vb:.... Bekijk de code van dit voorbeeldvoorbeeld

49 Webtechnologie Labo 1 49 xHTML: Attributen die eigenschappen heten attributen attributen verschillen van element tot element. Enkele attributen kan je bij (ongeveer) elk element plaatsen: titletooltip-text style voegt css-eigenschappen toe idgeeft een unieke naam classcss-klasse

50 Webtechnologie Labo 1 50 Attributen een attribuut heeft altijd een waarde (value) die waarde staat ALTIJD tussen " " bvb:...

51 Webtechnologie Labo 1 51 A-oefening 9 : attributen Vertrek van het document A-oefening1.htm. Voeg bij de hoofdtitel de tooltip tekst: "main title" toe, bij de 2e titel "short description" en bij de 3e titel: "objectives".

52 Webtechnologie Labo 1 52 Basis elementen: tekst structureren id bijvoegen voor latere verwijzingen id attribuut moet uniek zijn binnen het document Gebruik best als referentie een woord dat verwijst naar de functie van het element niet naar een grafisch aspect Vb: zeker niet kan

53 Webtechnologie Labo 1 53 Einde Les 1 Begin volgende les: Aantal basisvraagjes Probeer zoveel mogelijk te scoren