HTML-practicum. Medische Informatiekunde. Module 1.1 Onderdeel Netwerken

HTML-practicum Medische Informatiekunde Module 1.1 Onderdeel Netwerken Dr.ir. G.J. Louter Afdeling Klinische Informatiekunde AMC, J1b-114, tel: 020-5665183 e-mail: Baas.Louter@amc.uva.nl Studiejaar: 2009-2010 Versie 4, 31 augustus 2009 1

Inleiding Doel van dit practicum: Aan alle MIK-studenten in deze fase van de studie ten minste een zelfde basisniveau te geven in het programmeren in HTML, de programmeertaal 1 om webpagina s te maken. Het practicum is tevens een inleiding op een volgende opdracht in deze module waarin een in HTML geschreven invulformulier moet worden gemaakt. Ook is de vaardigheid in HTML van belang bij het bijhouden van een persoonlijk portfolio op het internet. Het HTML-practicum in module 1 bestaat uit 2 sessies een van 3 en een van 2 contacturen. De eerste practicumsessie (HTML-1) is op dinsdag 1 september; de tweede sessie (HTML-2) is op vrijdag 4 september. Deze 4 contacturen zullen voor velen onder jullie krap zijn om en alle stof van het practicum door te nemen en de opdrachten uit te voeren: het is daarom uitdrukkelijk de bedoeling om een deel van het practicum buiten de reguliere practicumtijd te doen. De planning is dat je voor de do-it-yourself cursussen die in deze practicumhandleiding genoemd worden het eerste deel van de eerste practicum sessie op 1 september gebruikt. Enkele regels bij dit practicum: Voor dit practicum krijg je geen cijfer; het telt dus niet mee voor je tentamen. Wel is het practicum verplicht en dien je er bovendien een voldoende voor te halen. Als je geen voldoende haalt voor dit practicum krijg je geen eindcijfer voor deze module. Je mag in dat geval wel gewoon deelnemen aan de toets van deze module. De beoordeling van dit practicum gebeurt aan de hand van in te leveren uitwerking van een aantal opdrachten. Samenwerking tijdens het maken van opdrachten is toegestaan: je kunt vaak een hoop leren door met elkaar te praten. Het is echter uitdrukkelijk de bedoeling dat ieder zijn eigen uitwerking inlevert en dat die uitwerkingen duidelijk verschillend zijn. Hierbij geldt het volgende: o Het kopiëren van code van het internet wordt gezien als fraude. In het geval van kopiëren van een medestudent geldt dit ook voor de persoon die bewust z'n code o heeft laten kopiëren! Als het vermoeden bestaat dat code is gekopieerd kan een assistent middels een mondelinge toetsing de kennis en vaardigheden van de student testen. Als deze toets resulteert in een onvoldoende dan heeft dit gevolgen voor de eindbeoordeling van het practicum. Zoals hierboven al is vermeld wordt van de student een bepaalde mate van zelfstandigheid verwacht. Er is alleen begeleiding op de geprogrammeerde practicumuren. Maar voor zeer dringende vragen kan uiteraard altijd naar een van de assistenten ge-e-maild worden. Lees de handleiding (ook de do-it-yourself handleiding) nauwkeurig door voordat je met de opdrachten begint! Het stellen van vragen waarvan het antwoord letterlijk in de handleiding staat kan een nadelige invloed hebben op de beoordeling. Er wordt bij de beoordeling ook gekeken naar: o o o Een nette structurering van de HTML-code. Hierbij is indentering van geneste code (inspringen van deze code) belangrijk. Het gebruik van duidelijk commentaar tussen de code. Te veel en overbodig commentaar is uiteraard ook niet goed. Vind een goede balans. Een nette grafische lay-out van de HTML-pagina s. 1 Strikt genomen is HTML geen programmeertaal maar een computertaal, meer specifiek: een opmaaktaal Versie 4, 31 augustus 2009 2

Het practicum HTML (Hypertext Markup Language) is een computertaal die speciaal gemaakt is om webpagina s te maken. HTML is een markup language, d.w.z. dat het markups (bij HTML heten dat tags) gebruikt om de tekst op een scherm te formatteren. HTML maakt deel uit van een algemenere standaard om markup languages te maken, SGML (Standard Generalized Markup Language) 1. HTML is principieel zo opgebouwd dat je hiervoor slechts een beperkte set van karakters nodig hebt: de z.g. 7 bit ASCII-karakterset (hierin komen alleen gewone cijfers, letter en leestekens voor en niet allerlei speciale karakters als bv ó, ö, è, ±, ¼,, ñ en ę. In deze module zal de ASCII-karakterset nog aan de orde komen). Hierin verschilt een HTML file dus principieel van bv. een.doc file bij MS Word: hierin wordt ook tekst geformatteerd (om te printen). In een.doc file komen wél allerlei controle-karakters voor. Gebruik van Notepad Een HTML-file bevat dus pure tekst, zonder controlekarakters. De programmeertaal kan je daarom het best begrijpen als je deze als tekst leert, en als je begrijpt wat de logica is van het formatteren van tekst, van het maken van links naar andere pagina s en van het gebruik van hulpprogramma s. Natuurlijk zijn er flashy ontwikkelomgevingen waarmee je snel en overzichtelijk HTML-code kunt produceren en waarmee je ook prachtige webpagina s kunt maken. Om HTML te leren zijn dit soort programma s echter juist verwarrend: soms maken ze spaghetti van de HTML-tekst door allerlei niet-triviale code toe te voegen. Dit is b.v. goed te zien in een HTML-pagina die met MS Word geproduceerd is en waarin een tabel staat 2. In dit practicum wordt om HTML-files te maken daarom gebruik gemaakt van de barebone tekstverwerker Notepad. Notepad werkt goed Textpad samen met Microsoft Internet Explorer, het Notepad HTML Beauty browserprogramma dat we gebruiken om de webpagina s te bekijken. Overigens: elke andere browser, b.v. Firefox, Safari of Opera, moet natuurlijk ook goed werken. Naast Notepad zijn er twee eenvoudige HTML-editors op de practicummachines die je als je wilt ook mag gebruiken: MAX s HTML Beauty en Textpad. Deze editors zijn handig, omdat ze zelf kunnen indenteren (inspringen van tekst om bij elkaar horende delen beter te kunnen onderscheiden) en omdat ze syntax highlighting gebruiken (kleuren om de tags en attributes weer te geven). Een van de assistenten kan je helpen als je deze programma s niet kunt vinden. Er zijn meerdere manieren om een file met Notepad te bekijken. Hier volgen er 3 Klik 2 keer op een HTML-file en Internet Explorer start automatisch op. De source tekst (de HTML-code dus) van deze file kan je te zien krijgen door in het menu Page - View Source te selecteren (zie plaatjes hiernaast). Notepad wordt dan automatisch opgestart 3. Zet bij Notepad onder Format-menu Word Wrap aan, anders kan je lange regels niet goed zien. 1 In HTML geven de markups dus de formattering van de data (is hier: de tekst) aan. Dit in tegenstelling tot bv. XML, een andere markup language uit de familie van SGML: hierin worden de markups gebruikt om betekenis te gegeven aan de data. 2 Als je eenmaal goed HTML kunt programmeren is er natuurlijk niets op tegen om met gespecialiseerde HTML-ontwikkelomgevingen te werken. 3 In Explorer kan je bij Tools-Internet Options -Programs instellen welke tekstverwerker je wilt gebruiken. Voor dit practicum hoort dit op Notepad ingesteld te zijn. Je kunt beter niet Word gebruiken als editor Versie 4, 31 augustus 2009 3

Je kunt Notepad ook vanuit het Start-menu opstarten en in Notepad je file openen. Let op dat je bij het zoeken in Notepad aangeeft dat je alle filetypes wilt zien, anders lukt het niet. Tot slot kan je ook met de rechtermuisknop op een HTML-document klikken en in het dan zichtbaar wordende menu aangeven dat je het wilt openen met Notepad. Manuals voor HTML Deze practicumhandleiding bevat geen HTML manual: er zijn voldoende goede HTML tutorials te vinden op op het internet. Voor dit practicum zijn er drie uitgekozen. Maar je mag ook een andere manual gebruiken als je dat prefereert. http://www.w3schools.com/html/ Deze cursus staat op de site van het World Wide Web Consortium (W3C), de beheerder van standaarden van het WWW. Deze tutorial is de meest formele. De cursus is compact, met een editor die in de website is gebouwd en geeft een overzicht van de belangrijkste tags en bijbehorende attributes. Als je het HTML basic-deel van deze cursus doorneemt heb je een idee van wat je zoal met HTML kunt doen. Als je ook het HTML advanced-deel doorneemt heb je ook een duidelijk beeld van de verschillen tussen de formele HTML 4.01 standaard en de oudere en informele HTML versies waarin afgekeurde tags en attributen voorkomen. http://www.handleidinghtml.nl/ Een Nederlandstalige inleiding in HTML, waarin je in een paar pagina s de essentie leert van wat HTML is, hoe het is opgebouwd, hoe je een HTML document maakt en hoe je een HTML document kunt controleren (door de validation tool van het W3C te gebruiken). http://www.mcli.dist.maricopa.edu/tut/ Deze online cursus, Writing HTML van het Maricopa Center for Learning and Instruction (MCLI) is al redelijk oud: hij stamt uit 1994 met laatste updates in 2006 (voor versie 4 van HTML). Maar het is een meer volledige cursus dan op de eerder genoemde twee sites. Writing HTML laat aan de hand van veel voorbeelden zien hoe HTML code leidt tot mooie web-pagina s. De cursus kan b.v. gebruikt worden om de HTML-files die er beschikbaar gesteld worden te kopiëren naar je computer, om ze dan te veranderen en te kijken wat precies het effect is van tags en attributen op de webpagina s. Er staan met name mooie voorbeelden in van het gebruik van tabellen om de pagina in te delen. Een klein nadeel van deze (oude) cursus is wel dat een aantal HTML tags niet conform de HTML 4.01 standaard is. Je hoeft deze cursus niet via internet te doen. De cursus staat als zip file op blackboard en je kunt de cursus op je practicumcomputer zetten. Op die manier kan je ook eenvoudiger bij de files komen die in deze cursus beschikbaar zijn. Mijn suggestie is om eerst de Nederlandstalige cursus http://www.handleidinghtml.nl/ door te nemen. Dit geeft je een snel overzicht over wat HTML is. Klik niet op alle links, maar lees gewoon pagina voor pagina de inleiding. Gebruik de link onderaan elke pagina met vervolg om naar de volgende pagina te gaan. Lees daarna de cursus http://www.w3schools.com/html/. Voor de eerste opdracht volstaat het om de onderwerpen uit HTML Basic door te nemen, behalve die gaan over tabellen, forms en frames. Lees ook het onderwerp HTML 4.0 Why? Van het HTML Advanced deel. In dat deel komt de validatie van een HTML file aan de orde, In de eerste opdracht zal je gevraagd worden om een HTML-file te valideren. Gebruik de cursus Writing HTML http://www.mcli.dist.maricopa.edu/tut/ ten slotte voor: Meer details en voorbeeld HTML-files over de onderwerpen in de vorige manuals. Bijvoorbeeld bij het gebruik van (onzichtbare) tabellen en frames Gebruik van commentaar in je HTML code (lesson 1). Structuur brengen in je website door her gebruik van directories en door het splitsen van files in meerdere deelfiles (lesson 14). Relative linking (lesson 8a) Versie 4, 31 augustus 2009 4

De opdrachten opmerking 1-9-2009: doe validatie van HTML pas op vrijdag na college!! Opdracht 1: lees de tutorial(s) Voordat je zelf een eerste HTML-file gaat maken zal je of al flink ervaring moeten hebben met HTML of eerst een aantal onderwerpen van één van de genoemde cursussen HTML bestudeerd moeten hebben. Begin dus deze eerste practicumsessie met het bestuderen hiervan! Gebruik hiervoor maximaal 1 uur! Zorg dat je voldoende HTML kent en snapt om opdracht 2 te maken. Zorg er voor dat je commentaar in je HTML kunt zetten en dat je relatieve links kunt maken (en ook snapt hoe dat werkt!). Het onderwerp relative links wordt overigens ook in het college van 1 september behandeld. Je kunt voor dit onderwerp dus ook de sheets er even op nakijken, Als je denkt al veel ervaring te hebben in HTML zou je deze eerste opdracht 1 misschien over kunnen slaan. Opdracht 2: maak een eenvoudige HTML-file en valideer deze Als tweede opdracht moet je een heel eenvoudige HTML pagina maken. OPDRACHT 2a Maak een werkdirectory op de netwerk drive (dus niet op de harde schijf van je practicumcomputer! Die kan je nl. alleen maar op de betreffende computer gebruiken): dit wordt de directory waarin je je website gaat opslaan. Geef de directory de naam Opdracht2<naam>, waarbij <naam> je eigen achternaam is 1. Open de Microsoft Notepad applicatie en maak een HTML-file waarin alleen de volgende tags gebruikt worden (neem de DOCTYPE tag letterlijk over) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html>, </html> <head>, </head> <title>, </title>, met de tekst: Dit is de titel <body>, </body> met de tekst: Dit is de tekst. <p>, </p> Zorg dat de boven genoemde tags voorkomen met de juiste HTML-structuur en save de file in de zojuist aangemaakte directory. Zorg ervoor dat je de file opslaat als.html file type. Open de file met MS Internet Explorer en kijk of wat je ziet klopt: zijn alle teksten waar je ze verwacht? Ga naar de W3C site en valideer de HTML-file die je net gemaakt hebt. Het valideren van HTML-files is ook aan de orde geweest in het college van 1 september (zie sheets). Laat het resultaat zien aan een van de assistenten 1 In de notatie < > maken de haken zelf geen deel uit van de directorynaam!! Versie 4, 31 augustus 2009 5

Om te zien wat de gevolgen kunnen zijn van een strikte standaard ga je de file in de volgende opdracht een klein beetje veranderen en opnieuw valideren. OPDRACHT 2b HTML kent een aantal attributen om de kleur van achtergrond en tekst te veranderen. Het attribuut dat vaak gebruik wordt om de achtergrond van het browser-venster te kleuren is bgcolor. Zoek in de W3C cursus op hoe je bgcolor moet gebruiken en pas dit attribuut toe bij de <body> tag. Kies zelf een kleur, bv red. Save de file onder een nieuwe naam. Open de file met MS Internet Explorer en kijk of wat je ziet klopt: is de kleur zoals je die ziet correct? Ga naar de W3C site en valideer deze nieuwe HTML-file. Analyseer het resultaat en geef een oplossing voor het probleem (er zijn er meerdere) Laat het resultaat zien aan een van de assistenten en bespreek ook de oplossing met hem. Versie 4, 31 augustus 2009 6

Opdracht 3 In deze opdracht ga je een eigen website maken. Het onderwerp en de lay-out daarvan mag je zelf kiezen. Als suggestie: veel studenten maken een persoonlijke website met informatie over hobby s, studie en vakanties. Maar je kunt natuurlijk ook net doen of je een eigen (medisch?) bedrijfje hebt of je kunt een voorlichtingswebsite maken voor bv een huisartsenpraktijk. Je mag ook een heel zakelijke aanpak kiezen door gewoon op webpagina s te laten zien wat de opdracht is. Het kan handig zijn nu al te anticiperen op het portfolio dat je dit jaar (niet tijdens dit practicum) moet maken. Hierin dient o.a. een curriculum vitae voor te komen. Je kunt dus ook alvast een CV maken. Voordat je begint: er is een aantal vaak voorkomende ergernissen mbt webpagina s. Ik adviseer je om eerst bv de volgende URL te bezoeken om deze zoveel mogelijk te voorkomen: http://www.useit.com/alertbox/9605.html Kijk op deze site ook eens naar de top tien van WEB design fouten in vorige jaren, bv 2005 (die zijn extra interessant voor beginnende programmeurs): http://www.useit.com/alertbox/designmistakes.html OPDRACHT 3 Maak zelf een complete website, uitgaande van de technieken die tot nu toe aan de orde kwamen. De hierna genoemde elementen dienen in ieder geval in je webpagina s voor te komen. Elk ingeleverd HTML-document wordt hierop gecontroleerd; als er iets ontbreekt (of juist overbodig is) krijg je het terug om te verbeteren. Ook moet de code gevalideerd worden. Je mag hiervoor de Frameset defintie van de DTD gebruiken. Eisen aan HTML file: Geen onnodige toeters of bellen Gebruik (voor deze opdracht) absoluut geen extra toeters of bellen, ook niet als je al een ervaren HTML-programmeur bent (in dat geval ben je gewoon sneller klaar dan een onervaren programmeur!). Goed gestructureerde website De website moet hiërarchisch geordend zijn Hoewel er meer mogelijkheden zijn is de opdracht voor dit practicum om een folder te maken met als naam: Opdracht3<naam>, waarbij <naam> je eigen achternaam is. In deze folder zitten een HTML-document, n.l. index.html, en tenminste 2 folders: b.v. een voor de HTML-files (bv html-documents ) en een voor alle plaatjes (bv images ). De file index.html is de startpagina. Een andere logische verdeling van directories is ook toegestaan. De website moet een afgerond geheel zijn Dit houdt in dat de website-folder overal op een computer mag staan en dan toch moet werken, ook op een andermans computer of vanaf de server-schijf. Dit lukt alleen als je relatieve links gebruikt bij je <a href= > tag. Inleveren website Het is de bedoeling dat je van je website eerst een.zip file maakt en dat je deze zip-file inlevert. Je kunt dat met het programma WinZIP doen, maar als je met je rechter muisknop klikt op de te comprimeren folder kan je met Send To- Compressed (zipped) Folder hetzelfde bereiken. Versie 4, 31 augustus 2009 7

OPDRACHT 3 (vervolg) Goed gestructureerde HTML-documenten De structuurtags <!DOCTYPE >, <html>, <title>, <head>, <! -- > en <body> dienen alle (op de juiste wijze) gebruikt te worden. Gebruik ook indentering om de niveaus van de tags aan te geven. Zorg voor voldoende, maar zinnig commentaar 1. Gebruik geen hoodletters voor de tagnamen. Gebruik van een aantal formattering tags Gebruik op een zinnige manier headings, lijn- en paragraafafbreking, font styles (italic, bold, ), address (in combinatie met een <hr>) en pre-formatted tekst 2. Laat tenminste 2 special symbols voorkomen (bv accent aigue of accent circonflexe). Gebruik van kleuren en fontvariaties Gebruik op een zinnige manier achtergrond- en fontkleur(en); je mag zelf kiezen of je de strict HTML4.01 standaard hiervoor gebruikt of niet. Geef een voorbeeld van een super- en een subscript (b.v H 2 O of x 2 ). Gebruik van lijsten Je dient tenminste 3 lijsten te maken, waarvan tenminste een geordende en een ongeordende. Een lijst dient een geneste lijst te bevatten. Laat ook het gebruik van het type-attribuut zien. Gebruik van image In je website moeten tenminste twee plaatjes voorkomen. Bij de <img> tag die je hiervoor nodig hebt dient zowel het align- als het alt attribuut gebruikt te worden. Een van de beelden moet inline zijn. Het andere beeld moet tegen de linker rand van de pagina liggen, terwijl de tekst er rechts omheen gaat. Daarnaast moet een derde beeld de onvervormde verkleining zijn van een van de twee beelden door gebruikt te maken van het width- en het height-attribuut. Gebruik van Anchors Het <a> tag wordt gebruikt voor het maken van links, zowel lokaal als naar andere files of naar andere websites. Maak vier soorten links: Een lokale link binnen een document, zodat je bij een lang document snel op de juiste plaats kan komen. Zorg dat je ook weer terug kan komen Een link naar een (plaats in een) ander HTML-document. Een link naar een plaatje Een link naar een website op internet Als je deze opdracht klaar hebt, laat hem dan beoordelen door een van de assistenten. Stuur, als hij akkoord bevonden wordt, je website uiterlijk voor maandag 14 september (2009), gezipt 3 naar Baas.Louter@amc.uva.nl. Als de opgave OK is krijg je antwoord en heb je voldaan aan dit onderdeel van je practicumverplichting. 1 Commentaar is bedoeld om een lezer in staat te stellen te begrijpen wat de HTML-code doet. Je mag wel aannemen dat de lezer HTML spreekt 2 De meest logische toepassing van pre-formatted tekst is die waarbij tabellen gemaakt moeten worden met spaties: dat gaat anders erg moeilijk met HTML. 3 Een niet-gezipt bestand wordt on-nagekeken retour gestuurd Versie 4, 31 augustus 2009 8

Opdracht 4 Doel van deze opdracht is om je te laten zien dat er een essentieel verschil bestaat tussen het hebben van webpagina s die ergens op je computer staan en het hebben van een website op je eigen computer, waardoor iedereen op het internet in principe toegang krijgt tot deze webpagina s. Als je op je harde schijf, bijvoorbeeld op je desktop, de cursus Writing HTML hebt staan, dan ziet dat eruit als een website, maar in feite browse je lokaal door een aantal files heen. Je kan dat zien aan de URL, want die begint met file:// 1 file:///c:/documents%20and%20settings/baas/desktop/module%207/writing%20html%201 9-7-2004/start.html Als je een webserver op je machine had staan, dan had je, bij juiste instellingen, deze file beschikbaar kunnen stellen als website op het intranet van het AMC, en dan had de URL er uitgezien als bijvoorbeeld: http://mik-2582.amc.uva.nl/start.html Nu kan iedereen binnen het AMC de cursus zien, via het HTTP-protocol (en niet gewoon als file). Dit heeft voordelen: zo ondersteunt het HTTP-protocol het gebruik van hulpapplicaties op de webserver, die een dynamisch gebruik van de webpagina s mogelijk maken. Voorbeelden volgen later in dit practicum: het gebruik van CGI (in de basiscursus HTML), het gebruik van ASP s, PHP of van servlets voor het benaderen van de database (in het PLEKsys webapplicatie-practicum dat je later in je studie krijgt). Opdracht 4 is een kleine uitbreiding van opdracht 3. In opdracht 4 start je op je eigen practicumcomputer een webserver op (dat is dus een computerprogramma). Daarna zorg je dat een van je medestudenten een werkende link heeft naar jouw website. De webserver die op de practicummachines is geïnstalleerd heet Tomcat Web Server. Het is een programma van The Apache Software Foundation. Voor dit practicum hoef je alleen de volgende dingen van dit Tomcat te weten: De werkdirectory van Tomcat is ingesteld op D:\Apps\apache-tomcat-6.0.20\webapps\ROOT 2. Dat wil zeggen dat deze directory gebruikt wordt als root 3 voor de HTML-files van je eigen website op de machine waarop je werkt. Als in deze ROOT directory een file index.html voorkomt4 is dit de default homepage bij deze webserver. Zorg dus dat je startpagina van je site deze naam heeft!! Elke machine in een Microsoft netwerk-domein heeft een unieke naam. Stel je machine mik-2583 heet. Als iemand de URL http://mik-2583/ gebruikt in zijn of haar browser, krijg deze automatisch verbinding met de file index.html op deze machine5. Je kunt ook het IP adres van deze machine gebruiken (als je dat weet), dus als mik- 2583 het IP-nummer 145.117.54.214 heeft, werkt ook http://145.117.54.214/ om de website op mik-2583 te openen 1 %20 staat voor een spatie 2 Let op: file-path is case sensitive. Alle puntjes en streepjes zijn ook belangrijk. Er staat een spatie tussen Tomcat en 4.1!! 3 De term root staat voor de wortel in een hiërarchische of boom structuur 4 let op: Windows gebruikt de extensie van een file om deze te koppelen aan een applicatie. File types zie je daarom standaard niet onder Windows! Ook de extensie.htm of.doc is dus meestal niet zichtbaar tenzij je zelf aangeeft dat je dat wilt zien 5 Gebruik tijdens dit practicum niet de volledige naam mondriaan.amc.uva.nl: de DNS van het AMC gaat niet goed om met de machinenamen bij de MIK. Versie 4, 31 augustus 2009 9

De machinenaam of het IP-adres van je computer kan je vinden met het DOS-commando ipconfig. Start een DOS-scherm op met Start-Programs-Accessoiries-Command Prompt. Geef in DOS het commando ipconfig /all In het verschijnende overzicht staat: Host Name: dit is de naam van je computer IP Address: dit is het IP-adres van je computer OPDRACHT 4 Zet je startpagina van je website (tijdelijk) in D:\Apps\apache-tomcat 6.0.20\webapps\ROOT. Van de machine waarop je werkt. Zorg dat er een student(e) is die vanaf diens of haar machine een URL naar jouw machine in de website heeft staan. Start de webserver applicatie Tomcat op door in het Start-menu MIK/Apache Tomcat 6.0.2-Start Tomcat te selecteren. Laat aan de assistent zien dat je server draait (hoe doe je dat?). Zet Tomcat ook weer netjes uit via het startmenu, als je klaar bent. Vergeet niet je website weer uit de Tomcat directory weg te halen en ergens op een veilige plek op te slaan (bv je home directory) Deze opdracht dien je bij een van de 2 HTML-practicumsessies te laten zien en te laten aftekenen door een van de practicumassistenten. Versie 4, 31 augustus 2009 10

Opdracht 5 In dit deel van het practicum komen frames en tables aan de orde; tables zijn heel geschikt om tekst en plaatjes op de juiste plaats in je webpagina s te zetten; frames stellen je in staat om eenvoudig door je website te navigeren. Verder wordt in clickable images aandacht besteed aan hoe je positie-informatie binnen een plaatje kunt gebruiken om links te maken naar andere informatie. Tenslotte maak je kennis met het form-element, waarmee je een digitaal invulformulier in je site kunt maken om gegevens via een browser te versturen. Voor deze vijfde opdracht moet je in ieder geval de volgende onderwerpen bestudeerd hebben: Gebruik van tabellen: <table>, <td>, <tr>, <th>, attributen: rowspan, colspan, align, valign, cellpadding, cellspacing, border=0 of groter. Clickable map: gebruik van attribuut usemap in <image> en van <map name= > en <area shape=..> voor rechthoek en cirkel. Gebruik van frames: <frameset...>, <frame...>, attributen: rows, cols, border, frameborder, src. Wijzig de <a href=...> tag om de wijze van laden van het target window te beïnvloeden. Gebruik van target-attribuut bij links, met _top, _self, _blank en _parent Deze onderwerpen worden behandeld in de lessen 21, 23, en 25 van de cursus Writing HTML. Versie 4, 31 augustus 2009 11

OPDRACHT 5 De bedoeling is allereerst om een soort persoonlijke practicum website te maken waarin alle opdrachten die je al gemaakt hebt en die je nog gaat maken te vinden zijn. De structuur van de website wordt gegeven door frames. Maak een website die opgebouwd is uit (tenminste) 4 frames: Een header frame, met informatie over je zelf en over dit practicum. Je kunt hier ook een logo inzetten (bijvoorbeeld de MIK, het AMC,...) Een footer frame: met de bekende informatie over versie en mail Een frame links-midden inhoudsopgave met navigatie naar de verschillende opdrachten (eventueel met sublinks) Een frame rechts-midden met WEB-pages behorende bij de verschillende opdrachten Maak een tabel Maak een HTML-pagina met een onzichtbare tabel De bovenste rij van de tabel dient een merged rij te zijn, dus een aantal cellen gecombineerd tot een grote cel, met als tekst een zelf gekozen functionele naam van de tabel. Een van de cellen dient een een klein plaatje te zijn, een z.g. thumbnails (ook wel: post stamps) 1, dat een link is naar hetzelfde plaatje in een grote uitvoering (in een nieuw window!) Een ander plaatje moet linken naar een nieuwe HTML-pagina. met een clickable image (zie hieronder). Maak een clickable image van een medisch beeld Een van de links van de boven genoemde onzichtbare tabel leidt naar een HTML-pagina met een anatomisch plaatje van de mens (zie op blackboard voor enkele voorbeeld-plaatjes). Maak van dit plaatje een eenvoudige atlas: zorg dat je op dit medisch plaatje 3 verschillende objecten kunt aanklikken die doorverbinden naar een nieuwe HTML-pagina met informatie over het betreffende object 2. De vorm van de clickable region in het beeld moet redelijk passen, dus een cirkel of vierkant zullen waarschijnlijk onvoldoende zijn en je zult een polygoon moeten definiëren 3. Om hoekpunten te vinden van deze polygoon kan je bv. het programma ImageJ gebruiken. Dit programma kan je ook gebruiken om een thumbnail te maken van een plaatje. Je assistent kan je hierbij helpen. Als je deze opdracht klaar hebt, laat hem dan beoordelen door een van de assistenten. Stuur, als hij akkoord bevonden wordt, je website uiterlijk voor maandag 14 september, gezipt naar Baas.Louter@amc.uva.nl. Als de opgave OK is krijg je antwoord en heb je voldaan aan dit onderdeel van je practicumverplichting. 1 Het idee van een thumbnail is niet zozeer dat het beeld klein is, maar dat het beeld weinig bytes is!! Laden van plaatjes kost namelijk vaak erg veel tijd. 2 Bijvoorbeeld lever, hersenen, maag, oog, oor etc.. Met ImageJ kan je eventueel vergrotingen maken van geselecteerde regions van beelden en hier nieuwe plaatjes van maken. 3 Zie barebone : attribuut bij map is: shape= poly coords=,, Versie 4, 31 augustus 2009 12

Opdracht 6 In dit deel van het practicum komen forms aan de orde; hiermee kan je digitale invulformulieren in je site maken om via de browser gegevens te versturen. Voor deze zesde opdracht moet je in ieder geval de volgende onderwerpen bestudeerd hebben: <form> tag, met attributen: action, method De form-elements o <input> met type = text, textarea, input, password, radio, checkbox, submit, reset. o <select> met <option> Deze onderwerpen worden behandeld in de les 28a en b van de cursus Writing HTML. Gebruik van action= mailto:... Een van de opdrachten is om het formulier zo in te richten dat de ingevulde informatie via e- mail naar de eigenaar van de website gestuurd kan worden. Hiervoor gebruik je het attribuut: action = mailto: Het idee van mailto lijkt wel duidelijk: de informatie in een pagina kan per mail naar het opgegeven e-mailadres opgestuurd worden. De ontvanger kan de e-mail (ev. automatisch) verwerken, bv in een database of spreadsheet en verdere actie ondernemen. Op deze manier kan je met: action= mailto: b.v. bestellingen doen of enquêtes houden. Probleem bij mail-applicatie Tijdens het college is al opgemerkt dat het action= mailto: niet goed functioneert op de practicummachines. De reden is dat met de HTML-code het default mailprogramma op de browser-computer aangeroepen wordt, en op de practicumcomputers is dat Microsoft Outlook. De setting op deze machines om zelf mail in Outlook te lezen zijn erg onhandig in te stellen. Als je (bv. thuis) wel Outlook gebruikt zou je het overigens in principe goed moeten werken. Vandaar dat we het tijdens dit practicum iets anders doen. Om toch te zien wat voor tekst je per mail ontvangt met zo n mailto action is er op een van de webservers van de afdeling Klinische Informatiekunde (KIK) een CGI-script gezet; dit script doet niets anders dan de z.g. query-string die door HTML wordt opgestuurd weer terugzetten in een heel simpele HTML pagina, zodat je kunt zien wat voor info opgestuurd wordt. Gebruik daarom niet action= mailto: maar in plaats daarvan het attribuut action="http://www-se/cgi/showmail.pl" Bereikbaarheid van Web-server ww-se (situatie 17 augustus 2009) Het AMC kent een strikt beveiligingbeleid. De Web-server ww-se die voor die vraagstuk gebruikt wordt staat fysiek binnen het AMC, en is alleen bereikbaar als je op het intranet van het AMC aangesloten bent. Het formulier kan dus alleen binnen het AMC getest worden!! Versie 4, 31 augustus 2009 13

OPDRACHT 6 Maak een invulformulier Maak een invulformulier voor het invoeren van patiëntgegevens volgens het model dat hieronder te zien is. Maak gebruik van een onzichtbare tabel voor de ordening van elementen Radio button Text Checkbox Menu Text area Submit Verstuur je formulier via het speciale CGI naar de KIK server Gebruik het attribuut action= om de ingevulde gegevens op te sturen naar de KIK-server. Als het goed is krijg je als antwoord een nieuw HTML-scherm met daarop de informatie die verzonden is door je eigen HTML formulier. Zet de website in een folder met als naam Opdracht6<naam>. Zorg er wederom voor dat de pagina s in deze folder autonoom kunnen werken: test of de folder ook werkt als je hem op een andere directory zet. Stuur hem dan gezipt uiterlijk voor maandag 14 september naar Baas.Louter@amc.uva.nl. Als de opgave OK is krijg je antwoord en heb je voldaan aan dit onderdeel van je practicumverplichting. Versie 4, 31 augustus 2009 14