en

een marge te geven. Door position van het rechts blok de waarde fixed te geven, kan het verschil tussen absolute en fixed ge¨ıllustreerd worden.

3.14

Mediatypen

CSS is bruikbaar voor verschillende media of weergaveapparaten. Met stijlbladen kan je bepalen hoe een document moet weergegeven worden op bijvoorbeeld beeldscherm, papier, spraaksynthesizer, brailleapparaat, ... Enkele mediatypen van CSS 2.1 zijn: all screen print

geschikt voor elk apparaat in de eerste plaats bedoeld voor een kleurenbeeldscherm bedoeld voor gepagineerd materiaal en voor documenten die op scherm in de weergave afdrukvoorbeeld worden bekeken

Aangeven dat een stijlregel voor een bepaald mediatype bedoeld is: • voor de stijlregels het doelmedium aangeven: @media print { @media screen {

body { font: 10pt serif; } body { font: 14px sans-serif; }

} }

• bij het importeren van stijlbestanden: @import url("scherm.css") screen; @import url("print.css") print; • in het link element aangeven voor welk mediatype een gekoppeld stijlbestand bestemd is: Als je in ´e´en stijlblad regels voor verschillende mediatypen declareert, kan je best elk mediatype expliciet vermelden. Elke declaratie zonder mediatype is namelijk van toepasssing op alle mediatypen.

3.15

Alternatieve stijlbladen

In de eerder gegeven voorbeelden voor het koppelen van externe stijlbladen aan een document is het title attribuut niet aan het link element toegevoegd: Wanneer aan deze regel een attribuut title toegevoegd wordt, verschijnt dat in het stijlbladenmenu van de browser (niet bij IE). Dat biedt de gebruiker de mogelijkheid het stijlblad uit te schakelen of een alternatief stijlblad te kiezen. Naast of in plaats van deze vaste stijlbladen (welke in alle gevallen door de browser gebruikt moeten worden) biedt HTML 4.0 de mogelijkheid alternatieve stijlbladen te specificeren. Bijvoorbeeld een stijlblad voor normaal gebruik en een stijlblad met grotere letters voor mensen met een verminderd gezichtsvermogen. Deze alternatieven zouden door de browser aan de gebruiker gepresenteerd moeten worden, waarna deze een keuze kan maken. Een alternatief stijlblad wordt gedefinieerd door voor het rel attribuut van het link element de waarde "alternate stylesheet" op te nemen. Het title attribuut wordt gebruikt om een alternatief stijlblad een naam te geven. Deze naam kan de browser gebruiken bij de presentatie van de alternatieven.

36

Een alternatief kan uit meerdere stijlbladen bestaan. Via het title attribuut krijgen deze stijlbladen dezelfde naam. Als het alternatief gekozen wordt, moet de browser alle erbij behorende stijlbladen gelijktijdig gebruiken. Door voor ´e´en van de alternatieven als waarde voor het rel attribuut niet alternate stylesheet maar gewoon stylesheet op te nemen, wordt dat alternatief als voorkeur aangewezen. Deze voorkeur wordt aangehouden indien de gebruiker geen keuze maakt uit de verschillende alternatieven. Het title attribuut moet in dit geval wel gebruikt worden, omdat het stijlblad anders niet als alternatief, maar als vast stijlblad gezien wordt. Ook het meta element kan gebruikt worden om aan te geven dat een stijlblad de voorkeur heeft. Als waarde voor het content attribuut wordt dan de naam van het stijlblad opgenomen: <meta http-equiv="default style" content="normaal.css" /> Wanneer zowel het link element als het meta element gebruikt zijn om een stijlblad als voorkeur te defini¨eren, dan gaat die via het meta element voor. Indien meerdere stijlbladen als voorkeur gedefinieerd worden met het meta element, dan wordt het stijlblad gebruikt, dat als laatste is opgenomen. Indien twee of meer link elementen stijlbladen met voorkeur defini¨eren, dan heeft het stijlblad dat als eerste is opgenomen voorrang. De verschillende soorten stijlbladen mogen ook gelijktijdig gebruikt worden: In bovenstaand voorbeeld wordt het stijlblad "stijl.css" altijd gebruikt. Afhankelijk van de keuze van de gebruiker wordt "stijl.css" gecombineerd met "normaal.css" of "groot.css". Indien de gebruiker geen keuze maakt, wordt "stijl.css" in combinatie met het stijlblad met voorkeur "normaal.css" gebruikt. Merk op dat dat het gebruik van alternatieve stijlbladen op dit moment niet door alle browsers ondersteund wordt.

37

3.16

Overzicht van stijleigenschappen

de box de margin de border

breedte en hoogte

margin-top, margin-right, margin-bottom, margin-left en margin border-style, border-color, border-top-width, border-right-width, border-bottom-width, border-left-width, border-width, border-top, border-right, border-bottom, border-left en border padding-top, padding-right, padding-bottom, padding-left en padding width, height

plaatsing van elementen regelhoogte indeling zwevende elementen positioneren

line-height en vertical-align display en white-space float en clear position, top, right, bottom, left, z-index, clip, overflow en visibility

lettertypen

font-family, font-variant, font-style, font-weight, font-size en font

kleur en achtergrond

color, background-color, background-image, background-repeat, background-attachment, background-position en background

tekst

word-spacing, letter-spacing, text-decoration, text-transform, textalign en text-indent

lijsten

list-style-type, list-style-image, list-style-position en list-style

de padding

38

4

Formulieren

Een webpagina kan ook gegevens opvragen van de gebruiker, bijvoorbeeld om namen en e-mail adressen te verzamelen van personen die verwittigd willen worden van een aanpassing aan de website. Dit gebeurt door middel van een formulier of web form aangegeven met een

tag. Hierbij wordt er door middel van attributen aangegeven wat er met de ingevulde informatie dient te gebeuren.

Het attribuut method geeft aan dat de “get” methode gebruikt moet worden om de gegevens te versturen. Het alternatief hiervoor is de “post” methode. Het verschil tussen beide wordt verderop uitgelegd. Het attribuut action in de

tag geeft aan waar de doorgestuurde gegevens naartoe moeten: 1. de data worden naar een computerprogramma (hier knoppen.pl) gestuurd, dat deze verwerkt: action="http://www.denayer.wenk.be/cgi-bin/knoppen.pl". 2. de data worden als e-mail naar een persoon gestuurd: action="mailto:[email protected]?subject=formgeg". Wanneer de gegevens via e-mail verstuurd worden, kan het onderwerp van de e-mail aangegeven worden na het vraagteken (?) op het einde van het e-mail adres. In dit geval moet nog een bijkomend attribuut in de tag opgenomen worden: enctype="text/plain" om aan te geven dat de ingevulde gegevens van het formulier als gewone ASCII-tekst over het internet zullen verstuurd worden. Als method wordt ook best post gebruikt. De tag wordt dan: 4.0.1

INPUT

Met de tag kunnen verschillende dingen ingevoerd worden. Elk element kan best een attribuut name krijgen, omdat deze naam gebruikt wordt als de sleutel voor de bijhorende waarde als de data uit de form doorgestuurd wordt naar de webserver. Bovendien kan het ook nuttig zijn om een unieke naam id toe te voegen, zodat de gegevens ook via JavaScript verwerkt zouden kunnen worden. Het soort van invoerelement dat getoond wordt, wordt bepaald door het type attribuut. Dit zijn de mogelijke waardes voor dit type attribuut. text : ´e´en lijn tekst. Het size attribuut geeft de breedte van het input veld aan; het maxlength attribuut het maximaal aantal tekens dat door de gebruiker kan ingetikt worden; met het value attribuut kan reeds een default tekst in het invoerveld geplaatst worden. checkbox : een item met twee toestanden: geselecteerd of niet geselecteerd. De default toestand is niet geselecteerd; met het attribuut checked="checked" kan de default toestand geselecteerd gemaakt worden. De verschillende elementen van de checkbox kunnen manueel geselecteerd en gedeselecteerd worden door te klikken. radio : om een keuze te maken uit verschillende mogelijkheden. Er kan slechts ´e´en keuze gemaakt worden uit een bepaalde groep. De groep wordt bepaald door hetzelfde name attribuut. E´en van de buttons uit zo’n groep heeft normaal het checked="checked" attribuut om de default waarde aan te geven. Welke keuze op een bepaald moment gemaakt is, wordt aan het CGI script doorgegeven door het desbetreffende value attribuut toe te kennen aan de name attribuutswaarde. 39

hidden : een onzichtbaar element in de form; kan gebruikt worden om status informatie in op te nemen. Bij het doorsturen naar de server wordt het desbetreffende value attribuut toegekend aan de name attribuutswaarde. submit : een specifieke push knop om aan te geven dat de form volledig ingevuld is en dat de data kan doorgezonden worden naar de Web Server. reset : om alle invoervelden te herstellen naar de toestand zoals deze was wanneer de form voor het eerst getoond werd door de browser: tekstvelden worden leeg gemaakt, radioknoppen en checkboxen krijgen terug hun default waarde. De gebruiker kan dan opnieuw met de invoer beginnen. button : een neutrale knop; acties die uitgevoerd moeten worden wanneer op zo’n knop geklikt wordt, kunnen bijvoorbeeld in een Javascript functie gedefinieerd worden. Bij submit, reset en button kan met het value attribuut de tekst aangegeven worden die op de knop moet geplaatst worden. Bij andere invoervelden wordt normaal verklarende tekst geplaatst, zodat de gebruiker weet wat hij verwacht wordt in te vullen. Deze verklarende tekst wordt best in een tag geplaatst. Hierbij verwijst invoer_id naar het id attribuut van het invoerelement waarbij deze beschrijving hoort. Zo weet de webbrowser welke uitleg bij welk invoerelement hoort. Dit stelt hem dan in staat om bijvoorbeeld het formulier beter toegankelijk te maken voor aangepaste (spraak)software, of om het juiste formulierveld te selecteren als de gebruiker klikt op de bijhorende tekst. Een form is zelf een blocklevel element, dat op zijn beurt andere blocklevel elementen moet bevatten. De invoerelementen en hun beschrijvingen moeten dus in bijvoorbeeld

’s worden ingepakt.

---

Naam:

---

Interesse in: Beesten Planten UFO’s

---

Hoeveelheid: Beperkt Uitgebreid

40

Frequentie: Dagelijks Wekelijks Maandelijks

Merk op dat bij een groep van checkboxen deze elk een verschillende naam (“beest”, “plant” en “ufo”) hebben en dat er meerdere kunnen default geselecteerd zijn. Bij een groep radiobuttons is de naam (bijv. “quan”) telkens dezelfde en kan er slechts ´e´en geselecteerd zijn. Nadat de gebruiker een ingevulde form doorgestuurd heeft, moet de ingevulde informatie langs de server kant ge¨ınterpreteerd worden door een script (zie volgende hoofdstukken). 4.0.2

SELECT

In plaats van een groep radiobuttons kan ook een OPTION menu gebruikt worden. De verschillende mogelijkheden worden aangegeven door tags. Deze tags zijn samengebracht in een <select> ... paar. Het name attribuut heeft dezelfde functie als bij input: het geeft een naam aan de sleutel die in het CGI script gebruikt wordt om de waarde op te vragen. De waarde die na selectie aan de sleutel toegekend wordt, is gelijk aan de tekst uit het menu. Door bij het attribuut value te geven, kan een specifiek bepaalde waarde doorgegeven worden in plaats van de tekst van de optie (dit wordt eigenlijk niet veel gedaan). Frequentie: <select name="freq"> Dagelijkse rapportering Wekelijkse rapportering Maandelijkse rapportering Jaarlijkse rapportering Wanneer de gebruiker niets wijzigt aan de selectie, zal het paar freq=Maandelijkse+rapportering doorgestuurd worden naar het script. Merk op dat door de URL codering de spatie vervangen is door een plus teken. Het <select> tag heeft nog twee bijkomende attributen. Met size wordt een scrolled list gemaakt: er worden slechts een aantal van de mogelijkheden getoond en door te scrollen krijgt men andere mogelijkheden te zien. Normaal kan slechts ´e´en optie uit de mogelijkheden geselecteerd worden en doorgegeven aan het CGI script (cfr. radiobuttons). Wanneer toch meerdere opties tegelijk moeten kunnen geselecteerd worden, moet het attribuut multiple gespecificeerd worden. <select name="freq" size="3" multiple="multiple">

41

Omdat size gelijk is aan 3 krijgt men maar drie van de vier mogelijkheden te zien. Omdat multiple="multiple" gespecificeerd is, kan de sleutel “frequ” verschillende waarden krijgen. Wanneer meer dan ´e´en selectie gekozen is, worden meerdere paren naar het script doorgestuurd: freq=Dagelijkse+rapportering&freq=Maandelijkse+rapportering 4.0.3

TEXTAREA

Bij input met het type text kan een hele lange rij van tekens ingetikt worden. Dit is echter niet gebruiksvriendelijk. Het zou interessanter zijn om een twee-dimensionale ruimte te voorzien waarin tekst over verschillende lijnen gespreid, kan ingetikt worden. Dit kan met de tag. Deze heeft drie attributen: rows geeft het aantal lijnen aan (de hoogte van de tekstruimte) en cols de breedte van een lijn. name wordt zoals gewoonlijk gebruikt om aan het zaakje een naam te geven. <i>Commentaar:</i> <textarea name="melding" rows="5" cols="50"> Er is een eindtag . Gewoonlijk volgt deze onmiddellijk op de tag. Indien er toch tekst tussen staat, wordt deze als default tekst in de tekstruimte geplaatst. Meestal wil de gebruiker wel iets anders dan deze default tekst overbrengen en moet hij deze dus eerst verwijderen. Default tekst voorzien heeft slechts in zeer uitzonderlijke gevallen zin. 4.0.4<br /> <br /> Opmaak van formulieren<br /> <br /> Het is belangrijk dat formulieren een duidelijk uiterlijk hebben. Hiervoor kunnen horizontale lijnen (<hr />) en regelovergangen (<br />) gebruikt worden. Om een mooie layout te krijgen kan eventueel gebruik gemaakt worden van tabellen, maar in XHTML kan beter met CSS gewerkt worden. Bij elkaar horende invoerelementen kunnen gegroepeerd worden met behulp van <fieldset> waardoor deze elementen omkaderd worden. Zo’n groep kan dan benoemd worden met de <legend> tag. <form> <fieldset> <legend> Frequentie: </legend> <input type="radio" name="freq" value="week" checked="checked" /> Wekelijks <br /> <input type="radio" name="freq" value="maand" /> Maandelijks </fieldset> <input type="submit" /> <input type="reset" value="opnieuw" /> </form> Een <fieldset> is een block level element en kan dus niet binnen een <p> gebruikt worden.<br /> <br /> 4.1<br /> <br /> Verwerking van invoer<br /> <br /> We weten nu hoe we een webformulier moeten maken, maar nog niet hoe de gegevens van de gebruiker uiteidenlijk ergens verwerkt moeten worden. Hiervoor dient de Common Gateway Interface (CGI). 4.1.1<br /> <br /> Functie van CGI.<br /> <br /> CGI is een standaard voor de interface tussen externe toepassingen met informatie servers zoals HTTP of webservers. Een gewoon HTML document is statisch: het tekst bestand wijzigt niet. Een CGI-programma daarentegen wordt in real-time uitgevoerd: het kan dus op een dynamische manier informatie op het scherm brengen. 42<br /> <br /> Een voorbeeld is het koppelen van een database aan het World Wide Web, zodat gebruikers van over heel de wereld deze database kunnen raadplegen. Hiervoor moet een CGI programma geschreven worden dat de webdaemon zal uitvoeren: de vraag wordt naar de database engine gestuurd, het antwoord wordt ontvangen en HTML geformatteerd naar het scherm van de client gestuurd. In plaats van het koppelen van een database kan ook aan andere toepassingen gedacht worden. Belangrijk is wel dat de uitvoering van het CGI programma niet te veel tijd in beslag neemt. Anders zit de gebruiker maar wat op zijn scherm te staren en dat kan vervelend worden. Het verwerken van de inkomende data wordt meestal gedaan door een script (bijv. in Perl) of door een programma (bijv. in C geschreven). De gebruikte programmeertaal moet in staat zijn tekst, bestanden en informatie te manipuleren. Een formulier is op zich niet moeilijk om te maken. De constructie gebeurt op een gelijkaardige manier als andere pagina’s mbv. specifieke HTML tags. Het script dat de informatie die door de form opgenomen is, moet ontvangen en verwerken, is meestal een stuk ingewikkelder.<br /> <br /> Naam: Janine<br /> <br /> Hoi, janine!<br /> <br /> Submit 6 <br /> <br /> Form aanvraag ?<br /> <br /> Web Server <br /> <br /> <br /> <br /> <br /> <br /> HTML antwoord data<br /> <br /> CGI Script<br /> <br /> <br /> <br /> antwoord<br /> <br /> Web Server <br /> <br /> <br /> <br /> <br /> <br /> Een voorbeeld. De basis van interactieve pagina’s wordt weergegeven in de volgende form en bijhorend Perl script. <html> <head> <title>Goedendag</title> </head> <body> <h1>Goedendag </h1> <p> Om reactie te krijgen, tik uw naam in en druk op de enter toets </p> <form method="get" action="/cgi-bin/goedendag.pl"> <hr /> <p> <label for="vnaam">Naam:</label> <input type="text" name="voornaam" id="vnaam" /> </p> <hr /> </form> </body> </html> Merk op dat dit formulier geen submit knop heeft. Aangezien er hier toch maar ´e´en tekstveldje is, is dit echter geen probleem: de informatie zal gewoon verstuurd worden als de gebruiker een return typt. In bovenstaande form is voor scriptverwerking gekozen en dat script zit in het Perl-bestand “goedendag.pl”. 43<br /> <br /> #!/usr/local/bin/perl $ingegeven = $ENV{’QUERY_STRING’}; @paren = split( /&/, $ingegeven); foreach $paar ( @paren ) { ($sleutel, $waarde) = split( /=/, $paar ); $verwerken{$sleutel} = $waarde; } print "Content-type: text/html\n\n"; print "<html><head>\n<title>HTML uit CGI script</title>\n</head>\n"; print "<body>\n"; print "Hoi, <strong>$verwerken{’voornaam’}</strong>!\n"; print "<hr />\n</body></html>\n";<br /> <br /> 4.2<br /> <br /> Transport van informatie<br /> <br /> Telkens een client een URL aanspreekt die correspondeert met een CGI programma, zal de server het programma in real-time uitvoeren. De invoer die door de client gegenereerd wordt, moet aan het programma doorgegeven worden. De uitvoer van het programma wordt min of meer direct doorgestuurd naar de client. 4.2.1<br /> <br /> Informatie van de client.<br /> <br /> Voor het doorgeven van parameters aan het programma gebruikt CGI omgevingsvariabelen. Bijvoorbeeld, QUERY_STRING is gedefinieerd als alles wat volgt na de eerste ? in de URL. Deze informatie kan toegevoegd worden door een HTML form (met de GET methode). Er zijn twee manieren om een form te raadplegen en dit wordt aangegeven in de omgevingsvariabele REQUEST_METHOD. De GET methode: het CGI programma ontvangt de ge¨encodeerde form data via de omgevingsvariabele QUERY_STRING. De POST methode: het CGI programma ontvangt de ge¨encodeerde form data via stdin. Bij het einde van de data stuurt de server echter geen EOF. Met de omgevingsvariabele CONTENT_LENGTH kan men wel bepalen hoeveel data moet gelezen worden van stdin. Bij de ontwikkeling van een form wordt aan elk input element een name attribuut gegeven. Wanneer de gebruiker data in deze items van de form plaatst (wordt de waarde van het item genoemd), zal deze data ge¨encodeerd worden in form data. Form data is een stroom van naam=waarde paren van elkaar gescheiden door een & teken. Alfanumerieke tekens worden normaal doorgestuurd; spaties worden omgevormd naar plussen (+). Sommige speciale tekens zoals tabs en ampersands worden omgezet in een hexadecimaal equivalent van de vorm %HH: een procent teken gevolgd door twee hexadecimale cijfers. Hiernaast is een tabel weergegeven met de meest voorkomende ge¨encodeerde tekens.<br /> <br /> Teken \t (tab) \n (return) / ~ : ; @ &<br /> <br /> hex code %09 %0A %2F %7E %3A %3B %40 %26<br /> <br /> Bij een form met drie input velden: <form action="env.cgi" method="get"> <p> Familienaam: <input type="text" name="fnaam" id="fnaam" size=30 /> <p> Voornaam: <input type="text" name="vnaam" id="vnaam" size=30 /> <p> E-mail: <input type="text" name="email" id="email" size=30 /> </form> 44<br /> <br /> </p> </p> </p><br /> <br /> zal bijvoorbeeld de volgend string als form data gevormd worden: fnaam=van+den+bergh&vnaam=eric&email=eric%40vito.be De omzettingsprocedure moet de data splitsen op de ampersands. Voor elk paar dat bekomen wordt, moet zowel de naam als de waarde URL gedecodeerd worden: plussen terug omzetten in spaties en hexadecimale getallen in de corresponderende tekens. Daarna kan met de naam en de waarde om het even wat gedaan worden. Gewoonlijk worden ze bij een Perl script verzameld in een associatieve array. Indien een form een tekstarea aanbiedt, kan er geen maximum gezet worden op de lengte van de ingetikte tekst en is het dus mogelijk dat zeer veel data doorgestuurd wordt. Hierbij kan een probleem optreden met de GET methode. Bij deze methode wordt alle input van de form samengeperst in ´e´en omgevingsvariabele QUERY_STRING. De lengte van een omgevingsvariabele is echter wel beperkt: ergens tussen 256 en 1024 tekens. De POST methode gebruikt standard input om de data over te brengen en hier is geen beperking op de lengte van de input data. Daarom is deze methode meestal te verkiezen, alhoewel het enkele lijnen meer code vraagt in het verwerkingsscript. 4.2.2<br /> <br /> Opladen van bestanden<br /> <br /> In een formulier kun je de gebruiker de mogelijkheid bieden, om gelijk met de rest van de informatie een bestand naar de server te sturen. Cruciaal daarbij is dat je de beschikking hebt over een script of programma op de server, dat de informatie uit het formulier kan afhandelen en weet wat er met het verzonden bestand moet gebeuren: bijvoorbeeld opslaan op de server, per e-mail doorsturen, of er bepaalde gegevens uithalen en die op de een of andere manier verwerken. Aan het form element moet het enctype attribuut met de waarde multipart/form-data toegevoegd worden en moet het method attribuut de waarde post hebben. Met het action attribuut leg je daarnaast vast, welk script of programma op de server de te verzenden informatie moet afhandelen. Het type attribuut van het input element met de waarde file zorgt ervoor dat er een tekstveld en een knop (meestal met de letters BROWSE) in het formulier te zien zijn. <form method="post" action="lezen.pl" enctype="multipart/form-data"> <p> Bestand: <input type="file" name="bnaam" size="60" /> </p> <p> <input type="submit" value="Stuur op" /> <input type="reset" /> </form><br /> <br /> </p><br /> <br /> Drukken op de knop opent een venster waarin een bestand geselecteerd kan worden, waarna in het tekstveld de naam (inclusief het volledige pad) van het geselecteerde bestand wordt weergegeven. 4.2.3<br /> <br /> Een document terug naar de client.<br /> <br /> De output van het CGI programma moet juist geformatteerd zijn zodat de webserver er geen problemen mee heeft. CGI kan verschillende types documenten terugsturen: een beeld, een HTML document, een gewone tekst, of zelfs een audio clip. CGI kan ook een referentie naar een ander document terugsturen. De client (browser) moet wel weten welk documenttype gestuurd wordt, zodat het juist kan afgebeeld worden. CGI moet daarom aan de server het documenttype laten weten, zodat deze dat kan doorgeven aan de client. Om het type aan de server door te geven, verwacht CGI dat het programma een korte hoofding in de output plaatst. Deze hoofding bestaat uit ASCII tekst: een aantal lijnen van elkaar gescheiden door linefeeds of carriage returns (of beide) en afgesloten door ´e´en lege lijn. De rest van de uitvoer kan dan van het type zijn zoals aangegeven in de hoofding. Normaal wordt een volledig document met een corresponderend MIME type (Multipurpose Internet Mail Extensions) teruggestuurd. In dit geval moet aan de server aangegeven worden welk soort document via een MIME type uitgevoerd gaat worden. Normale MIME types zijn text/html voor HTML, en text/plain voor ASCII tekst. Om bijvoorbeeld HTML terug te sturen naar de client, moet de output zijn: 45<br /> <br /> Content-type: text/html <html><head> <title>HTML uit CGI script</title> </head> <body> Hoi, <strong>janine</strong>! <hr /> </body></html> 4.2.4<br /> <br /> MIME types.<br /> <br /> Een MIME type bestaat uit twee delen: een algemeen type en een specifiek type. Bijvoorbeeld, HTML heeft als algemeen type text en als specifiek type html. Major type application<br /> <br /> data voor spec appl.<br /> <br /> text<br /> <br /> tekstuele data<br /> <br /> audio<br /> <br /> geluid data<br /> <br /> image<br /> <br /> beeld data<br /> <br /> video<br /> <br /> video data<br /> <br /> Minor type octed-stream postscript rtf x-compress x-gzip x-tar html plain basic x-aif x-wav gif jpg tiff x-xbitmap mpeg quicktime<br /> <br /> 46<br /> <br /> binair bestand PS data Rich text data UNIX compressed data Gnu zipped data UNIX tar data HTML gewone ASCII tekst au of snd file data aif file data wav file data gif file data jpeg file data tiff file data xbm file data mpeg film quicktime film<br /> <br /> 5<br /> <br /> Server Side Includes<br /> <br /> 5.1<br /> <br /> Inleiding<br /> <br /> SSI, of Server Side Includes, is een handig onderdeel van CGI. Met SSI kun je allerlei informatie dynamisch opnemen in je website. Die informatie kan uit allerlei dingen bestaan, zoals: de tijd en/of datum, een header, een menu, een footer, etcetera. Met SSI kun je het updaten van je site een stuk gemakkelijker maken. Je kunt gedeelten die telkens worden weergegeven op je pagina’s opslaan in een extern bestand en de inhoud van dit bestand laten inlezen in de betreffende pagina. Je kunt hier bijvoorbeeld denken aan een menu. Dit menu is hetzelfde voor iedere pagina. Als je nu iets wilt veranderen aan het menu dan moet je alle HTML pagina’s van je site wijzigen. Dat kost je een heleboel tijd natuurlijk, zeker als je site uit tientallen of zelfs honderden pagina’s bestaat. Met SSI kun je het menu opslaan in een extern bestand en dit aanroepen vanuit de pagina. Wil je iets veranderen aan het menu? Dan hoef je nu alleen dit ene externe bestand waar het menu in staat te wijzigen. De veranderingen zie je daarna op alle pagina’s van je site. SSI bespaart je hierdoor dus een hoop tijd. Verder wordt ook de totale schijfruimte die je site nodig heeft kleiner, doordat je sommige codes opslaat in ´e´en bestand en je ze niet meer in iedere pagina hoeft op te nemen. SSI commando’s kunnen als HTML commentaar (tussen <!-- en -->) toegevoegd worden in webpagina’s. Zo’n webpagina met SSI moet wel het suffix .shtml hebben. Door de .shtml extensie kan de server zien dat het hier om een SSI bestand gaat en dat er SSI commando’s in kunnen staan.<br /> <br /> 5.2<br /> <br /> Echo commando in SSI<br /> <br /> Met dit commando kan je onder andere de tijd en datum aan je site toevoegen. Om de datum en tijd op je .shtml pagina te tonen, voeg je de volgende code toe op de plaats waar je de datum en tijd wilt hebben: <p> <b>Het is nu: <!--#echo var="DATE_LOCAL" --> </b> </p> De tijd wordt weergegeven aan de hand van de servergegevens. Dus: als op de server niet de juiste tijd staat ingesteld, wordt ook niet de juiste tijd op je pagina’s getoond. Verder zal het je opvallen dat de tijd en datum naar Amerikaans model is opgemaakt. Je kunt daar wat aan doen door gebruik te maken van de timefmt code. Je doet dat door ´e´en van onderstaande codes voor de echo var code van hierboven te zetten: <!--#config timefmt="%d-%m-%Y" --> Hiermee krijg je een datum naar Vlaams model die er zo uit zal zien: 15-09-2002 Hier nog een veelgebruikte code voor het weergeven van de tijd met SSI: <!--#config timefmt="%H:%M:%S" --> Nu zie je de tijd in uren, minuten en seconden, dus bijvoorbeeld: 22:05:37 Er zijn nog veel meer mogelijkheden voor het weergeven van tijd- en datumgegevens. Je kunt alles naar eigen smaak aanpassen door onderstaande variabelen in de timefmt code van hierboven te verwerken.<br /> <br /> 47<br /> <br /> Code %a %A %b %B %c %C %d %D %e %H %I %j %m %M %n %p %r %R %S %t %T %U %w %W %x %X %y %Y %Z<br /> <br /> Omschrijving naam van de weekdag, afgekort naam van de weekdag, voluit naam van de maand, afgekort naam van de maand, voluit de toepasselijke locale tijd standaard tijd en datum weergave dag van de maand: 01 tot 31 datum als: %m/%d/%y dag van de maand: 1 tot 31 uur: 00 tot 23 uur: 01 tot 12 dag van het jaar: 001 tot 366 maand van het jaar: 01 tot 12 minuut: 00 tot 59 teken voor een nieuwe regel string met AM of PM tijd als: %I:%M:%S %p tijd als: %H:%M seconden: 00 tot 59 voor het invoegen van een tab karakter tijd als: %H:%M:%S weeknummer van het jaar: 00 tot 53 (zondag eerste dag van week) dag van de week: zondag=0 weeknummer van het jaar: 00 tot 53 (maandag eerste dag van week) datumweergave specifiek voor het land tijdweergave specifiek voor het land jaar van de eeuw: 00 tot 99 jaar als viercijferig getal (bijv. 2002) naam van de tijdzone<br /> <br /> Je kunt een bezoeker automatisch laten zien wanneer een pagina voor het laatst is bijgewerkt. Ook leer je hoe je de referer op het scherm kunt tonen en hoe je dat kunt gebruiken voor de navigatie op je site. Met de LAST_MODIFIED variabele in SSI kun je laten zien wanneer een pagina voor het laatst is bijgewerkt. Je zet hiervoor de volgende code in de .shtml pagina op de plaats waar je de gegevens wilt tonen: <!--#echo var="LAST_MODIFIED" --> Je ziet nu de datum en tijdgegevens van het tijdstip waarop de pagina voor het laatst is bijgewerkt. Dus een complete, goede code voor gebruik op een Nederlandse pagina is bijvoorbeeld: <p> <b> Deze pagina is voor het laatst bijgewerkt op: </b> <!--#config timefmt="%d-%m-%Y om %H:%M:%S" --> <!--#echo var="LAST_MODIFIED" --> </p> Het resultaat wordt dan zoiets als dit: Deze pagina is voor het laatst bijgewerkt op: 15-09-2002 om 20:05:33 Ook kun je eenvoudig de referer op je pagina laten zien met behulp van de echo tag. Gebruik hiervoor deze code:<br /> <br /> 48<br /> <br /> <!--#echo var="HTTP_REFERER" --> Nu wordt de URL van de pagina waar de bezoeker vandaan kwam op het scherm getoond. We kunnen deze informatie gebruiken voor de navigatie binnen de site door de HTTP_REFERER variabele in een link te verwerken: <a href="<!--#echo var="HTTP_REFERER"-- rel="nofollow">">Terug naar vorige pagina</a> Als de bezoeker nu op de link klikt dan gaat hij terug naar de pagina waar hij vandaan kwam. Het is dus een soort vorige-knop. Als de bezoeker direct op de pagina kwam (dus door het adres in de browser in te typen of via bookmarks) dan blijft de HTTP_REFERER variabele leeg en kan de bezoeker dus ook niet teruggestuurd worden naar een pagina. Er zijn nog een hoop andere variabelen die je kunt gebruiken voor het echo commando in SSI. <!--#echo <!--#echo <!--#echo <!--#echo <!--#echo<br /> <br /> 5.3<br /> <br /> var="REMOTE_ADDR" --> var="HTTP_USER_AGENT" --> var="SERVER_SOFTWARE" --> var="DOCUMENT_URI" --> var="DOCUMENT_NAME" --><br /> <br /> het IP adres van een bezoeker de browser die de bezoeker gebruikt ge¨ınstalleerde software op de server het pad naar het document op de server de bestandsnaam van het document<br /> <br /> Include commando<br /> <br /> Het include commando in SSI is de meest gebruikte en handigste functie. Met het include commando kun je stukken tekst en/of code in een .shtml-bestand inlezen vanuit een extern bestand. Veel websites hebben bijvoorbeeld aan de rechterkant van de pagina een menu staan. Dit menu staat op elke pagina. Je zou dit menu in een extern bestand kunnen zetten en vervolgens via het include commando het menu in de pagina aanroepen. Nu hoef je de hele code voor het menu niet meer op iedere pagina te zetten en als je iets aan het menu wilt veranderen of toevoegen, dan hoef je nu alleen het externe bestand waar het menu in staat maar aan te passen. Om een extern bestand aan te roepen in je pagina gebruik je deze code: <!--#include file="bestandsnaam.txt" --> Hierboven wordt een .txt bestand gebruikt, maar je kan ook een .html of ander soort bestand op deze manier laten inladen. Het bestand dat je wilt includen kan ook in een subdirectory staan: <!--#include file="subdirectorynaam/bestandsnaam.txt" --> Heb je het bestand boven je Document Root directory staan (de directory waarin de index-pagina van je site staat), dan moet je gebruik maken van een virtual include : <!--#include virtual="/directorynaam/bestandsnaam.txt" --> Voorbeeld : menu in een extern bestand. In een externe tekstbestand menu.txt wordt de code voor het menu geplaatst: <div style="width: 150px; border: solid 1px black; background-color: #9fc; padding: 3px; margin: 4px 2px 4px 2px;"> <ul> <li> <a href="index.html" rel="nofollow">Home</a> </li> <li> <a href="pagina1.html" rel="nofollow">Pagina 1</a> </li> <li> <a href="pagina2.html" rel="nofollow">Pagina 2</a> </li> <li> <a href="pagina3.html" rel="nofollow">Pagina 3</a> </li> <li> <a href="pagina4.html" rel="nofollow">Pagina 4</a> </li> </ul> </div> 49<br /> <br /> In het .shtml bestand waarin je het menu gaat aanroepen wordt het tekstbestand menu.txt opgenomen door middel van het include commando: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testbestand</title> </head> <body> <p> Welkom op deze testpagina. Hieronder zie je het menu. </p> <!--#include file="menu.txt" --> <p> Dit is de overige tekst van de pagina. </p> </body> </html> Het menu wordt hier vrij ver bovenaan de pagina geplaatst. Natuurlijk kun je het menu op een compleet andere plaats zetten, dat is zelfs beter met zo’n soort menu. Aan de linker- of rechterkant is vaak de beste optie. Het grote voordeel van SSI: stel nu dat je een link aan je menu wilt toevoegen. Je hoeft nu alleen nog maar het bestand menu.txt te veranderen! Daarna zie je op alle .shtml pagina’s het nieuwe menu verschijnen. Dit bespaart je veel tijd als je site uitgroeit naar tientallen of zelfs honderden pagina’s. Natuurlijk kun je naast het menu nog andere includes gebruiken, zoals voor de header (bijvoorbeeld een logo van je site) of een voettekst (bijvoorbeeld met copyright informatie).<br /> <br /> 5.4<br /> <br /> Uitvoeren van CGI scripts met behulp van SSI<br /> <br /> De aanbevolen code voor het uitvoeren van een CGI script is: <!--#include virtual="/cgi-bin/scriptnaam.cgi" --> Deze code zal op de meeste servers werken die SSI ondersteunen. Je moet bij het gebruik van include virtual het script in een directory plaatsen waar je CGI scripts mag uitvoeren (meestal cgi-bin). Als het bovenstaande niet werkt op je server, dan kan je het proberen met het exec commando. De code daarvoor is: <!--#exec cgi="/cgi-bin/scriptnaam.cgi" --> Bij bovenstaande codes geldt natuurlijk dat je scriptnaam.cgi moet veranderen in de naam van het script dat je wilt uitvoeren. Ook het pad (/cgi-bin/scriptnaam.cgi) kan anders zijn.<br /> <br /> 50<br /> <br /> A<br /> <br /> Opgaven webauthoring: XHTML en CSS<br /> <br /> A.1<br /> <br /> Labo: ontwikkeling van een website<br /> <br /> In de gerealiseerde website moeten structuur en opmaak gescheiden zijn. In de eerste twee zittingen wordt met XHTML de inhoud en structuur van de site opgebouwd. In de volgende twee zittingen wordt met behulp van CSS de opmaak van de verschillende pagina’s verzorgd. In de vijfde zitting wordt een interactieve pagina gemaakt. De laatste zitting kan gebruikt worden om het geheel af te werken. 1. Gegeven een bestand met een vlakke tekst met de beschrijving van een academische bachelor opleiding, master opleidingen en enkele bestanden met beeldjes. Gevraagd: vorm deze tekst om naar een hypertekst, zoals in de figuur aangegeven. Een eerste webpagina (overzicht.html) bevat wat algemene informatie met daarin een opsomming met verwijzingen naar de vier bachelor opleidingen en naar master opleidingen. Voor de masteropleidingen bouw, bio, elektromechanica en elektronica is dit een verwijzing naar het begin van de pagina. Voor de andere masters en de minor informatica wordt er verwezen naar het midden van de desbetreffende pagina (gebruik hiervoor de ankernamen LAND, CHEM, ELEKTRO en INFO). In de beschrijving van de bachelor opleiding (aboXX.html) is o.a. een groot beeld ( B ) opgenomen en een kleiner beeld ( A ) met een koppeling naar een pagina met de beschrijving van de bijhorende masteropleidingen. In de beschrijving van de master opleiding (amoXX.html) worden bovenaan een aantal verwijzingen opgenomen naar bepaalde onderdelen van de tekst. Onderaan kan ook een verwijzing terug naar boven opgenomen worden. Daarnaast is ook hetzelfde groot beeld ( B ) als in de bachelor beschrijving opgenomen. Voeg aan de bachelor en de master beschrijvingen structuur-elementen toe zoals hoofdingen, paragrafen en opsommingen. overzicht<br /> <br /> abobl<br /> <br /> abocb B<br /> <br /> A<br /> <br /> aboem B<br /> <br /> A<br /> <br /> aboei B<br /> <br /> A<br /> <br /> B<br /> <br /> A<br /> <br /> amobl<br /> <br /> amocb<br /> <br /> amoem<br /> <br /> amoei<br /> <br /> B<br /> <br /> B<br /> <br /> B<br /> <br /> B<br /> <br /> Figuur 1: Structuurtekening van een deel van de website Elke student werkt ´e´en bachelor en ´e´en master beschrijving volledig uit en gebruikt voor de drie andere verwijzingen naar bestanden van andere studenten. 2. De foto’s kunnen gevonden worden op http://chaplin/~a200/images: bck.jpg cb01.jpg ei01.jpg em01.jpg<br /> <br /> bl01.jpg cb02.jpg ei02.jpg em02.jpg<br /> <br /> bl02.jpg cb03.jpg ei03.jpg em03.jpg 51<br /> <br /> bl03.jpg grondplan.jpg ei04.jpg atc01.jpg<br /> <br /> bl04.bmp logo.jpg huisvesting.jpg atc02.jpg<br /> <br /> 3. Maak een index.html pagina met daarin een verwijzing naar de overzichtspagina van de vorige opgave, een verwijzing naar een pagina met een tekening en een verwijzing naar een pagina met een tabel. Maak een pagina (plan.html) met de tekening, die een plan van het hoofdgebouw voorstelt. Breng een imagemap aan zodat bij het klikken op bepaalde plaatsen op het plan, een gepaste foto getoond wordt. Maak een pagina (olod.html) met een tabel met informatie over de verschillende opleidingsonderdelen van het vierde semester van een bachelor opleiding naar keuze. In deze twee pagina’s en ook in de overzichtspagina wordt een verwijzing opgenomen naar de index pagina. 4. Verfraai de opmaak van de bachelor en de master beschrijving door stijlkenmerken toe te kennen aan de verschillende structuur-elementen. Breng per opleidingsonderdeel een gepaste achtergrondkleur aan in de tabel. Zorg er voor dat de verwijzing in het overzicht naar de eigen uitgewerkte bachelor tekst een andere opmaak heeft dan de verwijzing naar de drie andere bachelor teksten. Voorzie twee alternatieve stijlbladen voor de overzichtspagina: een eerste gewone met tekst op een lichte achtergrond en een tweede met een achtergrondbeeld waarbij de voorgrondtekst duidelijk leesbaar blijft. 5. Wijzig de opmaak van de index pagina. Maak een apart bestand met daarin de verschillende verwijzingen (overzicht, plan, tabel en bestelformulier) en ook het logo. Voorzie een kleine kolom waarin dit apart bestand ingevoegd wordt (SSI). Gebruik de rest om de inhoud van de gekozen pagina te tonen. Wanneer nog geen pagina gekozen is (bij eerste bezoek) wordt de overzichtspagina getoond. Ook bij het klikken op het logo wordt de overzichtspagina getoond.<br /> <br /> logo overzicht plan<br /> <br /> overzicht<br /> <br /> tabel bestelling Pas alle html-pagina’s aan zodat op elke pagina een smalle linkerkolom met de verwijzingen getoond wordt. De brede rechterkolom wordt gebruikt om de desbetreffende inhoud te tonen. 6. Maak een bestelformulier voor het bestellen van cursussen. Plaats hierop enkele tekstvelden voor naam en adres. Gebruik als basis de tabel van een vorige oefening door deze uit te breiden met een extra kolom met een checkbox. Voorzie twee radiobuttons om aan te geven dat de besteller al of niet lid is van de desbetreffende kring. Breng een select aan om de gewenste kleur van het voorblad van de cursussen te kiezen. Voeg ook een textarea toe waarin de gebruiker eventueel commentaar kan toevoegen. Zorg voor een mooie opmaak door gepaste stijlkenmerken te gebruiken. De bijhorende actie bij submit moet het versturen van een e-mail met de ingevulde gegevens zijn naar de gebruiker a200@denayer.wenk.be. Voor het testen kan je best eerst je eigen e-mail adres gebruiken. Validatie. Alle html-pagina’s en css-stijlbladen moeten gevalideerd worden. Hiervoor kan de lokale validator gebruikt worden: http://validator.denayer.wenk.be .<br /> <br /> 52<br /> <br /> A.2<br /> <br /> Project: ontwikkeling van een website<br /> <br /> In het kader van het wetenschappelijk project wordt door de groepsleden een website ontwikkeld. In deze website worden een aantal elementen opgenomen: • een overzichtspagina (index.shtml) met drie delen: bovenaan een band met een aantal links naar de verschillende andere pagina’s; middenin de eigenlijke inhoud met titel, namen van groepsleden, onderwerp, referentienummer; naam van de projectbegeleider en namen van derden die belangrijke bijdragen of informatie geleverd hebben; onderaan een band met logo’s van de associatie K.U. Leuven, het Wetenschappelijk project en De Nayer, volgens de layout van de poster; de andere pagina’s bevatten allemaal de bovenste band (als menu) maar niet de onderste band met de logos’s; • probleemstelling: situering en doelstellingen; • aanpak van het probleem (werkwijze en chronologie) met eventuele vermelding van enkele technische wetenswaardigheden; • realisaties met foto’s, tekeningen, en eventueel korte en relevante videofragmenten; • conclusies: eventueel zowel wetenschappelijke als persoonlijke; • referentielijst : opsomming van de belangrijkste geraadpleegde werken en websites (als link); • een formulier met een textarea voor commentaar en een select om een waarderingscijfer tussen 1 en 5 toe te kennen; • bij de evaluatie wordt nagegaan welke verschillende html-elementen (bijv. anker, imagemap, tabel, opsomming) en css-elementen (bijv. font, positionering, kleur) opgenomen zijn in de website. De verschillende pagina’s moeten op een webserver geinstalleerd worden. Daarnaast moet een verslag van 1 bladzijde afgegeven worden waarin aangegeven wordt hoe de verschillende bestanden samenhangen: verwijzingen en inline beelden. Zie als voorbeeld figuur 1. in de labo-opgave. Dit verslag moet ten laatste op 17 december 2010 afgeleverd worden aan iemand van de vakgroep informatica (lokaal C205). Op het moment van afgave moeten ook de verschillende bestanden op de webserver geinstalleerd zijn. Alternatief project. Voor studenten die wel het opleidingsonderdeel informatietechnolgie maar niet het opleidingsonderdeel wetenschappelijk project in hun programma opgenomen hebben, wordt individueel of in groep (maximum drie groepsleden) een website ontwikkeld. Het onderwerp moet verband houden met de wetenschappelijke inhoud van ´e´en of ander gevolgd opleidingsonderdeel in het eerste semester van het academiejaar 2010-11. Welk opleidingsonderdeel en welk hoofdstuk of hoofdstukken ervan kan zelf gekozen worden, maar moet wel goedgekeurd worden door iemand van de vakgroep informatica (lokaal C205). De bedoeling hiervan is om te vermijden dat twee (groepen van) studenten hetzelfde onderwerp behandelen. In deze website worden een aantal elementen opgenomen: • de layout van de overzichtspagina is gelijkaardig aan de index-pagina van het wetenschappelijk project; de titel van het project wordt vervangen door de naam van het desbetreffende opleidingsonderdeel; • probleemstelling van het gekozen hoofdstuk uit het gekozen opleidingsonderdeel: situering en doelstellingen; • een korte historiek van het probleem; • verklarende tekst met enkele technische wetenswaardigheden, en foto’s, tekeningen, en eventueel korte en relevante videofragmenten; • wetenschappelijke conclusies; • referentielijst : opsomming van de belangrijkste geraadpleegde werken en websites (als link);<br /> <br /> 53<br /> <br /> • een formulier met een textarea voor commentaar en een select om een waarderingscijfer tussen 1 en 5 toe te kennen; • bij de evaluatie wordt nagegaan welke verschillende html-elementen (bijv. anker, imagemap, tabel, opsomming) en css-elementen (bijv. font, positionering, kleur) opgenomen zijn in de website.<br /> <br /> A.3<br /> <br /> File transfer protocol<br /> <br /> Pas op: De informatie in deze sectie kan mogelijk in de loop van het semester nog veranderen. Actuele informatie zal tijdens de labo’s verstrekt worden. De verschillende bestanden worden op ´e´en of ander computersysteem gemaakt en moeten dan getransfereerd worden naar de webserver telescript. Op deze webserver zal je per groep (gekoppeld aan het wetenschappelijk project of het alternatief project) een loginaam (bijv. m3) en paswoord toegewezen krijgen. Het overbrengen van je bestanden naar deze webserver kan via het ftp protocol vanop de Windows pc in het labo A02.17. Hierbij gebruik je best het grafische FTP-programma WS_FTP LE. Nadat de webpagina’s naar de webserver opgeladen zijn, kan de website mbv. een browser bekeken worden (ook van buiten de hogeschool) via de URL: http://telescript.denayer.wenk.be/~m3 waarbij m3 de loginnaam is op telescript. Ook via http://www.wetenschappelijkproject.be zijn de verschillende websites te bezoeken.<br /> <br /> 54<br /> <br /> B<br /> <br /> Blocklevel en Inline Elementen<br /> <br /> Most HTML 4 elements permitted within the BODY are classified as either block&level elements or inline elements. Block&level elements typically contain inline elements and other block-level elements. When rendered visually, block&level elements usually begin on a new line. The following are defined as block&level elements in HTML 4: ADDRESS CENTER DIV FIELDSET H1 H3 H5 HR MENU NOSCRIPT P TABLE<br /> <br /> Address Centered block Generic block-level container Form control group Level-one heading Level-three heading Level-five heading Horizontal rule Menu list Alternate script content Paragraph Table<br /> <br /> BLOCKQUOTE DIR DL FORM H2 H4 H6 ISINDEX NOFRAMES OL PRE UL<br /> <br /> Block quotation Directory list Definition list Interactive form Level-two heading Level-four heading Level-six heading Input prompt Frames alternate content Ordered list Preformatted text Unordered list<br /> <br /> The following elements may also be considered block&level elements since they may contain block&level elements: DD FRAMESET TBODY TFOOT THEAD<br /> <br /> DT LI TD TH TR<br /> <br /> Definition description Frameset Table body Table foot Table head<br /> <br /> Definition term List item Table data cell Table header cell Table row<br /> <br /> The following elements may be used as either block&level elements or inline elements. If used as inline elements (e.g., within another inline element or a P), these elements should not contain any block-level elements. APPLET DEL INS OBJECT<br /> <br /> BUTTON IFRAME MAP SCRIPT<br /> <br /> Java applet Deleted text Inserted text Object<br /> <br /> Button Inline frame Image map Client-side script<br /> <br /> The following are defined as inline elements in HTML 4: A ACRONYM BASEFONT BIG CITE DFN FONT IMG KBD Q SAMP SMALL STRIKE SUB TEXTAREA U<br /> <br /> Anchor Acronym Base font change Large text Citation Defined term Font change Inline image Text to be input Short quotation Sample output Small text Strike-through text Subscript Multi-line text input Underlined text<br /> <br /> ABBR B BDO BR CODE EM I INPUT LABEL S SELECT SPAN STRONG SUP TT VAR<br /> <br /> 55<br /> <br /> Abbreviation Bold text BiDi override Line break Computer code Emphasis Italic text Form input Form field label Strike-through text Option selector Generic inline container Strong emphasis Superscript Teletype text Variable<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/informatietechnologie9e175dfe062f69983f4d0f4c75ec0e0e67989" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Informatietechnologie"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">