Web building gevorderden: CSS & JavaScript. Karel Nijs 2008/11

Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11

Leswijze Eerst wat theorie Begeleid met (korte) oefeningen Editor = Geen DreamWeaver Browser = Internet Explorer Online hulp: http://htmlhelp.com/reference/html40/ Korte pauze rond 20u

Webbuilding gevorderden: intro 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 <head> element Het <meta> element Formulieren Multimedia in HTML (sneak preview) HTML 4.0

HTML basis tags Herhaling: Start tag: <tag> Eind tag: </tag> Inhoud van elementen omringen met tags Bv. < tag > inhoud </ tag > Uitzonderingen: Sommige elementen hebben geen inhoud Bv. <br />, Sommige elementen hebben geen eindtag Bv. <br />, <img />, <hr />

HTML basis tags Herhaling: Tags moeten afgesloten worden: <p align= left > </p> Tags op de correct manier afsluiten: <b> </b> Attributen enkel bij de start tag: <font size= +1 > </font> Attributen bij de correcte tags zetten: <font face= arial > </font> Attribuutwaarden tussen aanhalingstekens zetten: <font color= red > </font>

HTML basis tags Internet Explorer configureren: nieuwe versies

Het <head> element Bevat algemene of meta-informatie meta = "informatie over " Subelementen worden niet weergegeven op het scherm

Het <head> element Toegelaten elementen: base URL basis voor alle links link bron referentie meta meta informatie title pagina titel style definitie van paginastijlen script definitie van paginascripts

Het <head> element Voorbeelden van toegelaten elementen: base <base href="http://www.karelnijs.be/" /> link <link rel="stylesheet" type="text/css" href="theme.css" /> meta <meta name="keywords" content="html, DHTML" /> title <title>pagina titel</title> style <style type="text/css">...</style> script <script language="javascript">...</script>

Het <head> element Foute syntax Voorbeeld: <head> <p>this is some text</p> </head> Gecorrigeerd door browser: weggelaten getoond in het begin van de pagina Browserafhankelijk!

Het <meta> element Bevat meta- informatie zoals <head> Bevat informatie over de pagina- inhoud 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: description keywords author refresh Uitbreidbaar (naar believen?) Bv. <meta name="security" content="low" />

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- informatie:

Formulieren Gebruiker mogelijkheid geven tot invoer Bevat (formulier)elementen Slechts één per pagina mogelijk Formulier zelf is niet zichtbaar Tag: <form> </form> Uitgebreide informatie: http://www.w3.org/tr/html401/interact/forms.html

Formulieren Attributen: name: identificatie van het formulier Bv. name="mijnformulier" action: (online) bestandsnaam dat formulierinhoud verwerkt Bv. action="http://..." 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 Bv. method="post"

Formulieren (formulier)elementen: Tekstveld <input type="text" name="naam" /> Textgebied <textarea name="naam">... </textarea> Uitschuifkeuzelijst <select name="naam">... </select>

Formulieren (formulier)elementen: Opties Vinkjes Knoppen: <input type="radio" name="naam" /> <input type="checkbox" name="naam" /> <input type="submit" name="naam" /> <input type="reset" name="naam" />

Formulieren (formulier)element: Tekstveld Goed voor korte invoer, zonder newlines Maximale lengte instelbaar Grootte veld instelbaar Initiële waarde instelbaar

Formulieren (formulier)element: Radiobuttons Beperkte keuzemogelijkheid aanbieden Adhv. het "name" attibuut worden radiobuttons gegroepeerd (formulier)element: Checkboxes Meerdere keuzemogelijkheden aanbieden

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 cleartext!

Multimedia in HTML (sneak preview) Multimedia in opmars de laatste jaren Mogelijkheden: Flash Geluid Video Java applets... Toevoegen via de <object> tag

Multimedia in HTML (sneak preview) Waarom "sneak preview"? Vele mogelijkheden (te veel op hier op te noemen) Veranderlijk Browserafhankelijk en inconsistent Indien later nodig Voorbeelden beschikbaar op CD-ROM Opzoeken op het Internet

Multimedia in HTML (sneak preview) Geluid toevoegen <object classid="clsid:22d6f312- B0F6-11D0-94AB- 0080C74C7E95" width="300" height="45" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab" type="application/x- oleobject"> </object> <param name="filename" value="takemeaway.wav"> De browser ondersteunt het OBJECT element niet, of kan het geluidsfragment niet insluiten.

Multimedia in HTML (sneak preview) Geluid toevoegen <object classid="clsid:22d6f312- B0F6-11D0-94AB- 0080C74C7E95" width="300" height="45" afmetingen codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab" type="application/x- oleobject"> <param name="filename" value="takemeaway.wav"> bestandsnaam De browser ondersteunt het OBJECT element niet, of kan het geluidsfragment niet insluiten. </object> tekst bij problemen

HTML 4.0 HTML is een tekst opmaak taal Tags werden voorzien voor: paragrafen p titels (headings) 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 lowercase tags en attributen Correcte syntax vereist (automatische) Controle mogelijk! Opmaak gescheiden van inhoud

HTML 4.0 Volgende stap = XHTML Voorbeeld: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//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"> <head> </head> <body> </body> <title>xhtml test</title> alles ok </html> 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[]