A HTML 4 Block & Level Elements en Inline Elements

Transcriptie

1 A HTML 4 Block & Level Elements en Inline Elements 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 Address BLOCKQUOTE Block quotation CENTER Centered block DIR Directory list DIV Generic block-level container DL Definition list FIELDSET Form control group FORM Interactive form H1 Level-one heading H2 Level-two heading H3 Level-three heading H4 Level-four heading H5 Level-five heading H6 Level-six heading HR Horizontal rule ISINDEX Input prompt MENU Menu list NOFRAMES Frames alternate content NOSCRIPT Alternate script content OL Ordered list P Paragraph PRE Preformatted text TABLE Table UL Unordered list The following elements may also be considered block&level elements since they may contain block&level elements: DD Definition description DT Definition term FRAMESET Frameset LI List item TBODY Table body TD Table data cell TFOOT Table foot TH Table header cell THEAD Table head TR Table row 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 Java applet BUTTON Button DEL Deleted text IFRAME Inline frame INS Inserted text MAP Image map OBJECT Object SCRIPT Client-side script The following are defined as inline elements in HTML 4: A Anchor ABBR Abbreviation ACRONYM Acronym B Bold text BASEFONT Base font change BDO BiDi override BIG Large text BR Line break CITE Citation CODE Computer code DFN Defined term EM Emphasis FONT Font change I Italic text IMG Inline image INPUT Form input KBD Text to be input LABEL Form field label Q Short quotation S Strike-through text SAMP Sample output SELECT Option selector SMALL Small text SPAN Generic inline container STRIKE Strike-through text STRONG Strong emphasis SUB Subscript SUP Superscript TEXTAREA Multi-line text input TT Teletype text U Underlined text VAR Variable I

2 B Opgaven webauthoring: XHTML en CSS B.1 Practicum: ontwikkeling van een website In de te realiseren website moeten structuur en opmaak gescheiden zijn. In de eerste zittingen wordt met HTML 5 de inhoud en structuur van de site opgebouwd. In de volgende zitting(en) wordt met behulp van CSS de opmaak van de verschillende pagina s verzorgd. In een volgende zitting wordt een interactieve pagina gemaakt. De laatste zitting kan eventueel 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. 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 bouwkunde, biochemie, elektromechanica en elektronica-ict is dit een verwijzing naar het begin van de pagina. Voor de andere masters (chemie en energie) en de afstudeerrichtingen landmeten en ICT wordt er verwezen naar het midden van de desbetreffende pagina (gebruik hiervoor de ankernamen CHEM, ENERGIE, LAND en ICT). 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. Voor informatie over de afstudeerrichting landmeten in de master bouwkunde kan verwezen worden naar de website van technologiecampus Gent. Voeg aan de bachelor en de master beschrijvingen structuur-elementen toe zoals hoofdingen, paragrafen en opsommingen. overzicht abobl abocb aboem aboei B B B B A A A A amobl amocb amoem amoei B B B B Figuur B.1: Structuurtekening van een deel van de website Elke student werkt één bachelor en één master beschrijving volledig uit en gebruikt voor de drie andere verwijzingen naar bestanden van andere studenten. 2. Voor de foto s moet verwezen worden naar em01.jpg bl01.jpg bl02.jpg bl03.jpg bl04.jpg huisvesting.jpg em02.jpg cb01.png cb02.jpg cb03.jpg atc01.jpg atc02.jpg plan.jpg em03.jpg ei01.jpg ei02.jpg ei03.jpg ei04.jpg logo.jpg II

3 3. Maak een index.html pagina met daarin een verwijzing naar de overzichtspagina van de vorige opgave en een verwijzing naar een pagina met een tabel. Maak een pagina (olod.html) met een tabel met informatie over enkele opleidingsonderdelen (OPO) van het vierde semester van een bachelor opleiding naar keuze (zie onderwijsaanbod KULeuven, Vermeld per opleidingsonderdeel ook de onderwijsactiviteiten (OLA). In deze pagina en ook in de overzichtspagina kan een verwijzing opgenomen naar de index pagina. Eventuele uitbreiding. 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. Voeg in de indexpagina een verwijzing naar deze pagina met tekening toe. 4. Verfraai de opmaak van de bachelor en de master beschrijving door stijlkenmerken toe te kennen (via een extern stijlblad) aan de verschillende structuur-elementen. Breng per opleidingsonderdeel een gepaste achtergrondkleur aan in de tabel en gebruik een andere achtergrondkleur voor de onderwijsactiviteiten. Zorg voor voldoende tussenruimte tussen de tabelelementen aligneer de verschillende tabelwaarden gepast, bijv. OPO-tekst links, OLA-tekst gecentreerd, en getallen rechts, en breng randen aan. Gebruik een extern stijlblad om de verschillende html pagina s een gelijkaardig uitzicht te geven, bijvoorbeeld: tekstkleur, achtergrondkleuren van de verschillende elementen op een pagina, linker- rechtermarge van de body, tussenruimte tussen paragrafen, inspringen bij het begin van een tekstparagraaf,... Zorg er ook 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. 5. Wijzig de opmaak van de index pagina, door gebruik te maken van semantische HTML 5 elementen. Maak een apart bestand met daarin de verschillende verwijzingen, nl. overzicht, (ev. plan,) tabel en bestelformulier, en ook het logo. Voorzie een kleine kolom waarin dit apart bestand ingevoegd wordt (via een object). 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. logo overzicht plan (ev.) tabel bestelling overzicht 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. Pas in het extern stijlblad de nodige elementen aan om het uitzicht van de verschillende html pagina s consistent te houden. 6. Maak een bestelformulier voor het bestellen van cursussen. Plaats hierop enkele tekstvelden III

4 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 met de ingevulde gegevens zijn naar jezelf Validatie. Alle html-pagina s en css-stijlbladen moeten gevalideerd worden. door gebruikt te maken van en B.2 Project: ontwikkeling van een website In het kader van het OPO projectwerk wordt door de groepsleden een website ontwikkeld. Aangezien elke student van de groep een deel van de website maakt, wordt hieronder aangegeven hoe de verdeling over de verschilende studenten kan zijn met behulp van de afkortingen S1, S2, S3 en eventueel S4. In deze website worden een aantal elementen opgenomen: (S1) een overzichtspagina (index.html) 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 KULeuven en De Nayer (deze logo s kan men terugvinden op Toledo onder de rubriek projectwerk); de andere pagina s bevatten allemaal de bovenste band (als menu) maar niet de onderste band met de logo s; (S2) probleemstelling: situering en doelstellingen; (S2) aanpak van het probleem (werkwijze en chronologie) met eventuele vermelding van enkele technische wetenswaardigheden; (S1 of S4 indien er een vierde student in de groep aanwezig is) realisaties met foto s, tekeningen, en eventueel korte en relevante videofragmenten; (S4) tijdslijn als een imagemap waarbij er verwezen wordt naar ankers aangebracht in de pagina met de aanpak; (S2) conclusies: zowel wetenschappelijke als technologische; (S4) conclusies: persoonlijke elementen met een prentje als background (bijv. een groepsfoto); (S3) referentielijst : opsomming van de belangrijkste geraadpleegde werken en websites (als link); (S3) een formulier met o.a. een textarea voor commentaar en een select om een waarderingscijfer tussen 1 en 5 toe te kennen; (S1,S2,S3,S4) een extern stijlblad (of meerdere verschillende) voor de globale opmaak van de site; bij de evaluatie wordt nagegaan welke verschillende html-elementen (bijv. anker, tabel, opsomming) en css-elementen (bijv. font, positionering, kleur) opgenomen zijn in de website. Alternatief project. Voor studenten die wel het opleidingsonderdeel netwerken en objectoriëntatie maar niet het opleidingsonderdeel projectwerk in hun programma opgenomen hebben, wordt individueel een website ontwikkeld. Het onderwerp moet verband houden met de wetenschappelijke inhoud van één of ander gevolgd opleidingsonderdeel in het eerste semester van het academiejaar Welk opleidingsonderdeel IV

5 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 projectwerk; 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); een formulier met o.a. een textarea voor commentaar en een select om een waarderingscijfer tussen 1 en 5 toe te kennen; een extern stijlblad voor de globale opmaak van de site; bij de evaluatie wordt nagegaan welke verschillende html-elementen (bijv. anker, tabel, opsomming) en css-elementen (bijv. font, positionering, kleur) opgenomen zijn in de website. Op de webserver campdn is een template (inclusief de verwijzing naar html5.js) beschikbaar die als basis gebruikt kan worden voor alle html-pagina s van je project. 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 B.1. in de practicumopgave. In deze structuurtekening moet bij elke webpagina aangegeven worden welke student deze pagina gemaakt heeft. (Op het mondeling examen zal over de gemaakte webpagina s een vraag gesteld worden.) Dit verslag moet ten laatste op 16 december 2016 afgeleverd worden aan iemand van de technologiecluster computerwetenschappen (lokaal C205). Op het moment van afgave moeten ook de verschillende bestanden op de webserver geinstalleerd zijn. B.3 File transfer protocol De verschillende bestanden worden op één of ander computersysteem gemaakt en moeten dan getransfereerd worden naar de webserver campdn. Op deze webserver zal je per groep (gekoppeld aan het projectwerk of het alternatief project) een loginaam (bijv. m3) en paswoord toegewezen krijgen. Deze webserver is alleen vanuit het lokaal campusnetwerk bereikbaar. Wanneer de web-pagina s thuis ontwikkeld zijn, moeten deze eerst via attachments van een naar de file-server laurel gebracht worden. Wanneer de bestanden in een directory op laurel beschikbaar zijn (bijv. public_html/project), kan volgende procedure gebruikt worden om deze te transfereren naar de webserver: 1. start een terminal waarin de C-shell draait 2. % cd public html/project (directory met de webpagina s van het project) 3. opstarten: % ftp campdn.local.thomasmore.be (naam van de webserver) loginnaam: hier moet ingelogd worden: paswoord: de prompt is ftp> V

6 6. cd public html (gewenste directory op campdn) 7. van laurel campdn: mput *.html (bijvoorbeeld) 8. van campdn laurel: mget *.html (bijvoorbeeld) 9. andere nuttige bevelen: help : lijst van commands lmkdir : maken van een directory op laurel mkdir : maken van een directory op campdn!pwd : print working directory van laurel pwd : print working directory van campdn!ls : inhoud lokale directory van laurel ls : inhoud remote directory van campdn 10. stoppen met quit of bye Wanneer de bestanden op campdn geplaatst zijn, moeten deze bestanden van laurel verwijderd worden: % rm *.html *.css *.jpg Het is natuurlijk ook mogelijk om de transfer te initiëren vanop een Windows-PC die in het campusnetwerk is opgenomen (bijv. lokaal A202). De bestanden kunnen in dat geval via een USB-stick van thuis meegebracht worden. Een file transfer tussen een Windows-PC en een Linux-PC (campdn) moet wel in een bepaalde mode gebeuren. Deze mode is op te vragen met het ftp-command status: bin : binair, nuttig voor binaire bestanden zoals JPEG, GIF, PNG en andere beelden ascii : (nuttig voor tekstbestanden zoals HTML en CSS), er gebeurt een vertaling: Linux Windows (get) : \n wordt \n\r Windows Linux (put) : \n\r wordt \n De mode wijzigen kan door bin of ascii in te tikken. Op zo n Windows-PC is een grafische user-interface voor FTP beschikbaar, bijv. WS_FTP LE. In zo n GUI moet je dezelfde acties doen als hierboven vermeld, maar je kan deze starten door op de juiste knopjes te klikken. Ook is het mogelijk om de transfer te initiëren vanop een thin client in lokaal A217 wanneer de bestanden op een USB-stick van thuis meegebracht worden. 1. Breng de thin client in lokale mode met behulp van de toetsen CTRL-ALT-BACKSPACE ; 2. start een lokale X-term op: Start - Programs - XShells - XTerm 3. breng de USB-stick in het bovenste USB slot langs de voorkant van het toestel; 4. ga naar de directory op de USB stick waarin de bestanden staan: cd /media/usb1/iets; 5. doe met behulp van ftp campdn de transfer; 6. ontkoppel de USB-stick: cd en umount /media/usb1 7. sluit de X-term af: exit Nadat de webpagina s naar de webserver opgeladen zijn, kan de website mbv. een browser bekeken worden (ook van buiten het lokaal campusnetwerk) via de URL: waarbij m3 de loginnaam is op campdn. Ook via zijn de verschillende websites te bezoeken. VI