Het "head" element Het "meta" element Formulieren Opmaak & attributen Cascading Style Sheets JavaScript Dynamic HTML XHTML introductie
inschrijven nog mogelijk!
Webbuilding gevorderden – les 1 • • • • • •
Herhaling: HTML basis tags Het element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0
HTML basis tags • Herhaling: – Start tag: – Eind tag: – Inhoud van elementen omringen met tags Bv. < tag > inhoud – Uitzonderingen: • Sommige elementen hebben geen inhoud Bv. , • Sommige elementen hebben geen eindtag Bv. , ,
HTML basis tags • Herhaling: – Tags moeten afgesloten worden:
…
– Tags op de correct manier afsluiten: …
– Attributen enkel bij de start tag: …
– Attributen bij de correcte tags zetten: …
– Attribuutwaarden tussen aanhalingstekens zetten: …
HTML basis tags • Internet Explorer configureren: nieuwe versies
Webbuilding gevorderden – les 1 • • • • • •
Herhaling: HTML basis tags Het element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0
Het element • Bevat algemene of meta-informatie • meta = "informatie over…" • Subelementen worden niet weergegeven op het scherm
Het element • Toegelaten elementen: – base – link – meta – title – style – script
URL basis voor alle links bron referentie meta informatie pagina titel definitie van paginastijlen definitie van paginascripts
Het element • Voorbeelden van toegelaten elementen: – base – link
– meta – title – style – script
<meta name="keywords" content="HTML, DHTML" /> pagina titel <style type="text/css">... <script language="Javascript">...
Het element • Foute syntax – Voorbeeld:
This is some text
– Gecorrigeerd door browser: • weggelaten • getoond in het begin van de pagina
– Browserafhankelijk!
Webbuilding gevorderden – les 1 • • • • • •
Herhaling: HTML basis tags Het element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0
Het <meta> element • Bevat meta - informatie zoals • Bevat informatie over de pagina - n i houd • Doelgroep: – browers, zoekmachines, … – in het verleden vaak misbruikt om gebruikers aan te trekken – momenteel niet bekend in welke mate gebruikt
Het <meta> element • Mogelijke meta element names: – – – – –
Oefening 1 • Maak een pagina aan die: – Relevante meta-info bevat (auteur, beschrijving, titel, …) – Na 3 seconden doorverwijst naar htmlhelp.org – Volgend extern stylesheet heeft: g_les1_oef1.css
Oefening 1 • Oplossing:
Oefening 1 • Oplossing meta - n i formatie:
Webbuilding gevorderden – les 1 • • • • • •
Herhaling: HTML basis tags Het element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0
Formulieren • • • • •
Gebruiker mogelijkheid geven tot invoer Bevat (formulier)elementen Slechts één per pagina mogelijk Formulier zelf is niet zichtbaar Tag:
– method: • 2 manieren van versturen: POST en GET • POST: gebruiken bij wijzigingen in database enz • GET: gebruiken als je geen wijzigingen maakt (idempotent) • http://www.w3.org/TR/html401/interact/forms.html#submit-format
Formulieren • (formulier)element: Buttons – 2 soorten: submit en reset – submit: • verstuurd de formulierinhoud... • naar "action"... • volgens de "method" methode.
– reset: • wist het formulier
Formulieren • Oefening 2 – De inhoud van het paswoord mag niet leesbaar zijn – Slechts één geslachtskeuze is mogelijk – "Verzenden" stuurt het formulier via POST naar: http://www.karelnijs.be/_OpenLeren/g_les1_oef2 _verwerk.php
– "Wissen" wist het formulier
Formulieren • Oefening 2
Formulieren • (formulier)element: Paswoordveld – ~ tekstveld – Ingevulde waarde niet leesbaar voor gebruiker – Opm.: wordt wel verstuurd als clear text!
Webbuilding gevorderden – les 1 • • • • • •
Herhaling: HTML basis tags Het element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0
Multimedia in HTML (sneak preview) • Multimedia in opmars de laatste jaren • Mogelijkheden: – – – – –
Flash Geluid Video Java applets ...
• Toevoegen via de
Multimedia in HTML (sneak preview) • Geluid toevoegen
B0F6 -
<param name="filename" value="takemeaway.wav"> De browser ondersteunt het OBJECT element niet, of kan het geluidsfragment niet insluiten.
tekst bij problemen
Webbuilding gevorderden – les 1 • • • • • •
Herhaling: HTML basis tags Het element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0
HTML 4.0 • HTML is een tekst opmaak taal • Tags werden voorzien voor: – paragrafen – titels (headings)
p h1, h2, ...
• Noodzaak ontstond voor mooiere websites
HTML 4.0 • Oplossing = formattering? – Formattering mogelijkheid wordt toegevoegd: • font tag • color attribute
– Problemen: • Onderhoud wordt ondoenbaar • Vele herhaling van opmaak • Consistentie problemen
– Gevolg: kosten swingen de pan uit voor grote websites
HTML 4.0 • Oplossing = HTML 4.0! – Geen opmaak meer in het HTML document zelf – Alle opmaak verplaatst naar aparte CSS file – Bereikt (en gewenst) resultaat: • HTML document bevat enkel document inhoud en structuur • Opmaak in apart bestand is: – herbruikbaar – gescheiden – onderhoudbaar
• controle van presentatie layout mogelijk zonder de document inhoud te verknoeien inhoud van "Web building gevorderden, les 2"
HTML 4.0 • Volgende stap = XHTML – – – –
Enkel lower case tags en attributen Correcte syntax vereist (automatische) Controle mogelijk! Opmaak gescheiden van inhoud
HTML 4.0 • Volgende stap = XHTML – Voorbeeld: XHTML test alles ok
alles in vet = nodig voor XHTML
Huiswerk: extra oefening • Oefening 2 uitbreiden met hobbies en provincie
Huiswerk: extra oefening • Oefening 2 uitbreiden met hobbies en provincie – De fysieke lengte van alle velden moet even lang zijn. – In het naam en voornaam veld mogen maximum 15 letters ingevuld worden. – De maximum lengte van het paswoord = 6 – Tips: • Keuzelijst: select en optgroup • Vindjes: gebruik voor de naam de arraynotatie: hobbies[]
