Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp

Transcriptie

1 DOORLOPENDE OPDRACHT KINEPOLIS Beste studenten, Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp maken/ code schrijven voor de Kinepolis website. Wat hoort er thuis op zo een website? Een menu Social media De films van deze week Welke films er in de aanbieding zijn Welke evenementen er doorgaan Welke bioscopen er zijn Een zoekbalk Een film top 10 Nieuwsitems, met foto, header en paragraaf Enkele onderdelen die in de kijker mogen We beginnen nu met een herhaling van de html kennis van het afgelopen jaar, die we elke les uitbreiden met de nieuwe CSS kennis. Ik wil dat jullie met regelmaat aan dit project werken en hierin evalueren. Op het einde van de lessenreeks, wil ik een mooie website in css zien, waarin de nieuwe technieken gebruikt zijn die jullie doorheen de lessen aangeleerd hebben. Dit telt mee voor jullie permanente evaluatie! Het is NIET de bedoeling dat de website exact hetzelfde ingedeeld wordt als de bestaande website. Wees creatief! 1

2 EEN STUKJE ZELFSTUDIE We hebben ons het afgelopen jaar nog niet beziggehouden met formulieren. Dit is een stukje zelfstudie. Ik geef jullie wel een aantal links mee waar jullie meer informatie kunnen terugvinden over formulieren en de opbouw hiervan. Jullie krijgen een aangepaste opdracht. Zorg dat je deze informatie begrijpend leert, en dat het duidelijk is waar elk onderdeel voor staat. Copy paste is dus NIET voldoende. OPDRACHT Formulieren 2

3 HOOFDSTUK 1: HERHALINGSOPDRACHT: Websiteproductie 1 Bekijk de afbeelding layout.jpg. De bedoeling is dat je net zoals het vorige jaar deze layout omzet naar HTML. Deze opdracht telt mee voor je punten van het dagelijks werk. Zorg dat elke pagina gelinkt is. (menu met hyperlinks) Het logo bestaat uit de afbeelding logo.jpg. De afbeelding heet taart.jpg. KLEUREN De header is volledig zwart en de tekst en links LETTERTYPE Het gebruikte lettertype is Century Gothic. zijn volledig wit. Roze: #b82750 Donkergroen: #1c5c4e Lichtgroen: # Geel: #f8e7a1 VOOR DE SNELLE WERKERS Maak een zelfde layout als de deze, maar met een andere opmaak (andere kleuren, tekst, afbeeldingen), voor het portfolio van een computerwinkel. 3

4 HOOFDSTUK 2: CSS - DE BASIS INTRODUCTIE STYLESHEETS In het begin van de geschiedenis van het World Wide Web was er HTML, een taal om hypertext documenten mee te beschrijven. De opmaak van die documenten was in het begin absoluut niet belangrijk, het ging om de inhoud en het klikken. Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle <h3> tags 18 punten groot moet zijn in de kleur rood en met het lettertype Arial. Naarmate de techniek zich ontwikkelde kwam de nadruk steeds meer te liggen op de opmaak van een website, maar de grafische mogelijkheden van HTML schoten duidelijk tekort. Om dit tegen te gaan begon het World Wide Web Consortium(W3C) met de ontwikkeling van zogenaamde stylesheets, waarin de CSS stelt je in staat om alle stijlelementen van een website in één document onder te brengen. Dat wil zeggen dat je maar één document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld het lettertype aanpassen dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. opmaak van een HTML-document wordt beschreven. Een andere bedoeling was het aantal tags (en dus de tijd die je in je site moet steken) te De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden. verminderen. Dat is allemaal aardig gelukt in Cascading Style Sheets(CSS). CSS code is browservriendelijk. Een ander groot voordeel is dat het nu veel makkelijker is om een aantal documenten dezelfde stijl mee te geven en die stijl ook snel weer te veranderen. 4

5 STIJLEN VERBINDEN MET HTML Inline stijlen Wanneer een stijl slechts één keer in een document wordt toegepast, kun je gebruik maken van een inline stijl. Je doet dat door het STYLE attribuut toe te voegen aan het element waarvan je de opmaak wilt bepalen. Als waarde van het STYLE attribuut neem je de stijldeclaratie op, waarin de gewenste stijl is vastgelegd: <Element STYLE="stijldeclaratie"> Wil je bijvoorbeeld enkel één specifieke paragraaf in het rood weergeven, dan kan je dit doen door binnen je HTML-document een inline stijl toe te voegen. Met een Inline Style Sheet worden de stijlelementen direct toegevoegd aan de HTML tag. Dit is niet handig, omdat je de stijlelementen bij iedere tag opnieuw moet intypen. Gebruik deze manier enkel en alleen wanneer je een unieke stijl aan één enkele tag wilt geven, niet als je de stijl op meerdere tags of pagina s wilt gebruiken. <h1 style="color:red;"> Het Laatste Nieuws <h1> Oefening op Inline Stijlen Voeg inline stijlen toe aan h1, h2 en p. Zorg ervoor dat elk onderdeel een andere tekstkleur bevat. Zoek hiervoor even op hoe je de tekstkleur in CSS verandert. 5

6 Stijlblok Stijlen welke slechts op één document betrekking hebben, kunnen worden opgenomen in een stijlblok dat geplaatst wordt in de head van dat document. Hiervoor wordt gebruik gemaakt van het STYLE element. Aan het STYLE element wordt minimaal het TYPE attribuut toegevoegd. Voor Cascading Style Sheets is dat "text/css". Het STYLE element mag een onbeperkt aantal malen opgenomen worden in een document. <HEAD> <STYLE TYPE="text/css"> stijlregels </STYLE>... </HEAD> Oefening op Stijlblok Sla een kopie op van h2_taak_1.html en zorg ervoor dat alle stijlen werken vanuit één stijlblok in de head van het document. 6

7 Extern stijlblad Een extern stijlblad, is een document waarin stijlen zijn beschreven die in één of meer HTMLdocumenten gebruikt kunnen worden. De verwijzing vanuit een HTML-document naar een stijlblad gebeurt met behulp van het LINK element, dat wordt opgenomen in de head van het document. Aan het LINK element worden in ieder geval de attributen HREF, REL en TYPE toegevoegd. <HEAD> <LINK HREF="css/basis.css" REL="stylesheet" TYPE="text/css">... </HEAD> Het HREF attribuut specificeert welk stijlblad geopend moet worden. Bij Cascading Style Sheets gaat het om een bestand, waarvan de bestandsnaam de extensie "css" heeft. (dit moet je dan ook aanmaken) Het REL attribuut geeft aan dat het bij het gerelateerde bestand gaat om een stylesheet en heeft dan ook als waarde "stylesheet". Het TYPE attribuut definieert het Internet Media (MIME) type van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css". Oefening op Extern Stijlblad Sla opnieuw een kopie op van h2_taak_1.html en zorg ervoor dat alle stijlen werken vanuit één externe css-file in de head van het document.!! Tijdens deze lessen geven we de voorkeur aan een extern stijlblad. OPDRACHT WEBSITE BAKKERIJ Stel nu, je maakt een website voor een bakkerij. Wanneer maak je gebruik van een inline stijl, een stijlblok of een stijlblad? Schrijf neer welke informatie je op de website zou plaatsen. (word-document) Hoe ga je het menu uitschrijven/ onderverdelen? Welke tactiek is er het best gepast voor deze website? Waarom zijn de andere 2 technieken niet geschikt? 7

8 CLASS EN ID Met behulp van de attributen CLASS en ID kunnen aan bijna elk element in een document stijlen worden toegevoegd, welke met behulp van een CLASS-selector of ID-selector zijn opgenomen in een extern stijlblad of een ingesloten stijlblok. De stijlregels in een stijlblad of een stijlblok voor een class-naam en een id-waarde hebben de volgende opbouw:.class-naam { stijldeclaratie #id-waarde { stijldeclaratie CLASS Het CLASS attribuut wordt toegepast, wanneer een element niet elke keer in dezelfde stijl moet worden uitgevoerd (en dus geen stijl voor het element gedefinieerd kan worden), of als dezelfde stijl voor verschillende elementen gebruikt moet kunnen worden. <Element CLASS="class-naam"> <style type="text/css" media="screen">.html{ text-transform:uppercase; </style> </head> <body> <p class="html"> </p> In het begin 8

9 ID Het ID attribuut wordt toegepast indien de waarde ervan slechts één keer in een document wordt gebruikt. Het verbinden van de stijl met een element gebeurt in het geval van het ID attribuut via een id-waarde. <Element ID="id-waarde"> Oefening op CLASS en ID <style type="text/css" media="screen"> #paragraaf1{ color:green; </style> </head> <body> <p id="paragraaf1"> Open h2_taak_2.html en sla op als jouwnaam_h2_wsp1_4.html. Neem een extern stijlblad op, waarin je stijlregels voor de class speciaal en de id yyy definieert. </p> In het begin Opdracht Vragen over dit hoofdstuk 1. Zoek op wat het W3C juist inhoud! 2. Waarom heeft men CSS uitgevonden? 3. Waarvoor staat CSS? 4. Wat zijn de voordelen van CSS? 5. Waarom maakt men gebruik van inline stijlen? 6. Hoe ziet een inline stijl eruit? Geef een voorbeeld! 7. Waarom maakt men gebruik van stijlblokken? 8. Hoe wordt een stijlblok opgebouwd? 9. Waarom maakt men gebruik van een extern stijlblad? 10. Hoe wordt een extern stijlblad opgebouwd? 11. Wanneer wordt een CLASS attribuut toegepast? 12. Wanneer wordt een ID attribuut toegepast? 13. Geef een voorbeeld van elk! 9

10 HOOFDSTUK 3: CSS MARGIN EN PADDING MARGIN EN PADDING Met Margin en Padding kun je de witruimte om en in een element (meestal een Div dit bekijken we in het volgende hoofdstuk) bepalen. PADDING Padding wordt gebruikt om de witruimte in een element te bepalen. Er onstaat een lege ruimte tussen de wand van het element en de inhoud ervan. p{ padding: 10px; Oefening op Padding Open h3_taak_1.html uit het mapje HOOFDSTUK 3 en sla deze op onder jouw eigen naam. Voeg volgende code toe in de head: <style type="text/css"> h1{ color:blue; font-size:30px; h2{ color:green; font-size:20px; p { color:red; font-family:verdana; font-size:12px; background-color:#dddddd; border:1px dotted #000099; </style> 10

11 Het zal je misschien al opgevallen zijn, maar alle tekst, inclusief titels en subtitels, staan keurig onder elkaar. De afstand tussen de linkse rand en tekst is overal gelijk. Binnen de tekstparagrafen <p> is er geen afstand tussen de tekst en de gestippelde randen. Dit soort wensen lossen we op met de CSS eigenschappen: margin en padding. We gaan ons eerst even richten op de alinea s tekst (<p>). Daar willen we een afstand tussen de gestippelde lijnen en tekst. Daartoe voegen we volgende CSS eigenschappen toe aan het <p> element in de head. p { color:red; font-family:verdana; font-size:12px; background-color:#dddddd; border:1px dotted #000099; padding-left:5px; padding-top:5px; padding-right:5px; padding-bottom:5px; Voer dit even uit in Firefox of Internet Explorer. Je ziet dat we dus met het toevoegen van de Padding eigenschap, een afstand gemaakt hebben van 5px tussen tekst en boord. 11

12 Alleen stellen we vast dat dit het heel veel schrijfwerk vraagt. Padding-left.paddingbottom.padding-right Men heeft daar een oplossing voor bedacht. Kijk maar even naar onderstaande code: p { color: red; font-family: verdana; font-size: 12px; background-color:#dddddd; border:1px dotted #000099; padding: 5px 5px 5px 5px; Hier staat de padding CSS eigenschap gevolgd door 4 groottes. De eerste grootte slaat op padding-top. De tweede grootte slaat op padding-right. De derde grootte slaat op padding-bottom. De vierde grootte slaat op padding-left. Je kunt dit ook onthouden met het woord TROL (Top(top) Rechts(right) Onder(bottom) Links(left)) MARGIN Margin wordt gebruikt om de witruimte om een element heen te bepalen. Zo kan je bijvoorbeeld meer ruimte om een foto vrijmaken en staat een tekst dus wat verder van de foto af. p{ margin: 10px; Oefening op Margin Open h3_taak_2.html en sla op onder je eigen naam. Zorg ervoor dat de tekstalinea s inspringen, zodat niet alles meer onder elkaar komt. Zorg er ook voor dat de body 50px verschuift. 12

13 Herinner u de TROL regel bij Padding. Dezelfde regel geldt bij Margin. De eerste grootte slaat op Top. De tweede op Rechts. De derde op Onder, en de vierde op Links. Opdracht Vragen over dit hoofdstuk 1. Teken uit wat een margin en padding met een object doet! 2. Definieer de margin tussen een tekst en een foto. 3. Waarvoor staat de TROL-regel? 13

14 HOOFDSTUK 4: CSS DIV EN SPAN DIV en SPAN De DIV en SPAN elementen, zijn 2 elementen van HTML waarvan we tot nu toe nog geen gebruik gemaakt hebben. Tabellen doen vanaf nu enkel nog dienst als tabel. Het positioneren van onderdelen, gaan we op een andere manier aanpakken. DIVs zijn als het ware blokken, die we kunnen positioneren hoe we zelf willen. Dit doen we door gebruik te maken van CSS. Zowel de DIV als de SPAN tag vormen een container. Wat wil zeggen dat zij beide de "inhoud" van hun tag als 1 object zien en dit ook duidelijk kunnen positioneren in een document. Het verschil tussen beiden is dat de DIV tag een "line-break" veroorzaakt en de SPAN tag niet. Om dit verder te verklaren, neem je de volgende code in een HTML-document over. <html <head> <title>hoofdstuk 4</title> <style type="text/css"> DIV{ border: 1px solid green; span{ border: 1px solid purple; </style> </head> <body> <DIV> Vestibulum blandit ligula sit amet justo viverra nec gravida erat luctus. Nunc non leo non magna scelerisque aliquam sed nec eros. Duis dictum vehicula gravida. In hac habitasse platea dictumst. Nam sit amet enim nisi. Pellentesque id risus diam. Vestibulum justo sem, ullamcorper pulvinar fringilla vitae, congue in arcu. </DIV><br /><br /> <span> 14

15 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat risus nec lacus luctus vel mollis nulla varius. In hac habitasse platea dictumst. Donec eleifend massa id justo porta auctor posuere tellus luctus. Donec viverra sagittis nulla ut pharetra. </span> </body> </html> Wat gebeurt er hier? Een DIV kan bestaan uit meerdere andere DIVs. Zo kan je bijvoorbeeld beslissen dat alle inhoud in het midden en 200 pixels van de randen af moet komen, maar daarbinnen, de tekst ook nog eens aan de rechterkant geplaatst moet worden. Voor het toevoegen van een stijl aan de elementen DIV en SPAN kan gebruik gemaakt worden van de attributen STYLE, CLASS en ID. Oefening op DIVS Maak een nieuw bestand aan. Sla het bestand op als h4 jouweigennaam_1.html in de map HOOFDSTUK 4. Voer de volgende code in: <DIV STYLE="color: red; background-color: white;"> <H2>Dit is H2</H2> <P>Deze tekst is ingesloten door het P element.</p> </DIV> 15

16 Wat gebeurt er hier? Het DIV element De meeste actuele HTML cursussen gebruiken nog steeds tabellen om de lay-out van een webpagina op te maken. Gegeven het feit dat dit door de officiële webinstanties wordt afgeraden, is er daarnaast ook het feit dat de HTML code van tabellen behoorlijk complex is. Met DIV element kan een deel (division) van een HTML-document worden ingesloten. Door het ALIGN attribuut toe te voegen, kan de uitlijning van dat deel worden vastgelegd. Daarnaast kan aan de ingesloten inhoud een stijl worden gekoppeld met behulp van de attributen STYLE, CLASS, of ID. Het DIV element heeft een vergelijkbare functie als het SPAN element, alleen kan het elementen op blokniveau (zoals P, UL, TABLE en FORM) bevatten. De opbouw is: <DIV> </DIV> Hier zie je een linker kolom (navigatie-menu), en een rechterkolom (met onderaan dan weer 3 kolommen). Om deze kolommen te maken, moeten we gebruik maken van de HTML eigenschap <div>. Met het DIV element kan een deel (division) van een HTML-document worden ingesloten. 16

17 Oefening 2 op DIVs Open het bestand h4_jouweigennaam_2.html uit de map Hoofdstuk 4. Hier is het DIV element opgenomen in de Body. Verder is er aan het P element een CSS eigenschap in de Head toegevoegd. Nu moet jij door middel van CSS eigenschappen het DIV element beschrijven. De DIV moet 250px breed zijn. De achtergrondkleur van de DIV moet gelijk zijn aan #99FFFF. Waarom verandert de achtergrondkleur niet? Zorg er nu voor dat de DIV 300px hoog is. Wat gebeurt er? Voeg nu een boord toe van 1px dik met een kleur # en gestippeld. Van de Paragraaf willen we enkel de onderste boord overhouden. Hoe lossen we dit op? Het is wenselijk dat je de browser Firefox installeert. Browsers kunnen verschillend reageren op de aangeleverde code. Open je deze file in een oude versie van Internet Explorer, dan is er geen spatie boven de Paragraaf, maar doe je hetzelfde in Firefox dan heb je wel spatie boven de Paragraaf. We zien dat hier bovenaan er een stukje blauw is tussen de bovenste rand en de grijze oppervlakte met tekst. Bij Internet Explorer hadden we dit niet! Wie heeft nu gelijk? Zoals altijd Firefox! 17

18 Bekijken we even de HTML code in de body opnieuw. Het <p> element staat voor het begin van een nieuwe paragraaf (alinea) tekst. Als u in het dagelijkse leven een tekst schrijft, en u begint een nieuwe alinea of paragraaf, dan laat u een blanco regel tegenover de vorige alinea. Met andere woorden de webstandaard is dat bij de start van een paragraaf (<p>, alinea) er wordt begonnen met een blanco regel. Firefox volgt keurig die regel op. Internet Explorer doet dit niet. Maar we moeten een webpagina maken die op dezelfde manier wordt gezien door Firefox als door Internet Explorer. Hoe lossen we dit op? We gaan de CSS eigenschap margin hiervoor gebruiken. De margin eigenschap bepaalt de positie van een element tegenover een ander element. We willen dat het <p> element geen afstand heeft (bovenaan) tegenover het <div> element. We slaan het bestand nogmaals op en openen het nu opnieuw in Firefox. Door middel van deze CSS eigenschap hebben we aan Firefox verteld dat we geen afstand (blanco regel) willen tussen het <p> element en het <div> element. Met dit alles hoop ik te hebben aangetoond dat je steeds een webpagina moet testen in IE en Firefox. Soms zul je code moeten aanpassen om de pagina op dezelfde manier weergegeven te hebben in beide browsers. Browsers - Opdracht 1. Zoek op welke browsers er sinds 2012 het grootste marktaandeel hebben 2. Welke invloed heeft dit op het schrijven van code? 3. Wat is het verschil tegenover de vorige jaren? 4. Plaats alles in een word-document, en noteer je bronnen (naam bron + url) Opdracht na dit hoofdstuk Installeer op je thuiscomputer Internet Explorer 6 en de meest recente versie en Firefox. 18

19 Opdracht Vragen over dit hoofdstuk 1. Wat is een DIV? 2. Wat is het verschil tussen een DIV en een SPAN? 3. Waarom raadt men je af om tabellen te gebruiken voor het opbouwen van websites? 19

20 HOOFDSTUK 5: MEERDERE DIVS Neem in Dreamweaver de volgende code over <html> <head> <title>hoofdstuk 5</title> <style type="text/css"> div{ background-color:#99ffff; height:300px; width:250px; border:1px dotted #000099; p { margin:0px; color:red; font-family:verdana; font-size:12px; background-color:#dddddd; border-bottom:1px dotted #000099; padding:5px 5px 5px 5px; </style> </head> <body> <div> <p> Dit is een stukje tekst als illustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van het div element. </p> </div> <div> <p> Dit is een tweede stukje tekst als illustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van meerdere div element. </p> </div> </body> </html> 20

21 We hebben een tweede <div> element toegevoegd in de body. Sla deze file op en open in IE. Lees even het tekstje in beide <p> elementen om je te verzekeren dat je de minimale verschillen hebt gezien. We hebben in de body twee <div> s opgegeven. Ik mag vermoeden dat je deze ook onder elkaar verwacht. Sla het bestand op onder je eigen naam in het mapje van HOOFDSTUK 5. Voor beide <div> s gelden de dezelfde CSS eigenschappen. Maar we willen in de tweede <div> de achtergrond kleur (background-color) niet lichtblauw (#99FFFF), maar bijvoorbeeld lichtoranje (#FFCC33). We moeten dus de 2 <div> s een aparte naam geven. HTML geeft ons de mogelijkheid om op 2 verschillende manieren een naam te geven aan een <div>, met name de HTML eigenschap class of de HTML eigenschap id. We noemen de eerste <div>: We noemen de tweede <div>: div1 div2 PS: Bij het kiezen van namen moet je er rekening mee houden dat je nooit begint met cijfers. Er wordt geen rekening gehouden met kleine of hoofdletters. Hoe voegen we die namen nu toe aan de verschillende <div> s in de body? Je ziet nu nog geen verandering tegenover de vorige oefening. Dit voor de heel eenvoudige reden dat we de CSS eigenschappen van div1 en div2 nog niet hebben bepaald. 21

22 Voeg volgende CSS eigenschappen toe: <style type="text/css"> #div1{ background-color: #99FFFF; height:300px; width:250px; border:1px dotted #000099; #div2{ background-color: #FFCC33; height:300px; width:250px; border:1px dotted #000099; p { margin:0px; color: red; font-family: verdana; font-size: 12px; background-color:#dddddd; border-bottom:1px dotted #000099; padding:5px 5px 5px 5px; </style> In vergelijking met de vorige oefening hebben we nu geen CSS eigenschappen meer voor <div>, maar zijn er twee <div> s gecreëerd. Herinner je dat we gekozen hebben om iedere <div> een unieke naam te geven (div1 en div2). We vertellen CSS dat het gaat om een unieke naam, door voor de naam een # teken toe te voegen. CSS weet nu dat we een element hebben met de unieke naam div1, en eentje met de unieke naam div2. 22

23 Wat betreft de eigenschappen voor het element met de unieke naam div2, hebben we de achtergrond kleur (background-color) #FFCC33 gekozen. De eerste div (met naam div1) blijft de achtergrond kleur #99FFFF behouden. We gaan het tweede <div> element geen gestippelde boord geven, maar een boord bestaande uit een volle (=solid) lijn. Aan de bovenkant van de onderste <div> (met naam div2), zien we zowel een gestippelde als een vaste lijn (boord). Logisch. Het <div> element, met naam div1,heeft een gestippelde boord (border) meegekregen. Het <div>element met de naam 2, heeft een vaste lijn meegekregen. In feite zouden we voor het <div> element, met naam div1, geen enkele border (boord) moeten hebben onderaan. Met andere woorden we moeten het de algemene CSS eigenschap border: 1px dotted #000099;, vervangen door border (boord) eigenschappen voor de bovenkant (top), de linkerkant (left) en de rechterkant(right). Voor de onderkant (bottom) geven we geen enkele CSS eigenschap op. Deze boord wordt ingevuld door de CSS border-eigenschappen van het <div> element met naam div2. Ik wil de tekst in het <p> element van het eerste <div> element (naam=div1) in het rood houden.maar ik wil de tekst van het <p> element in de tweede <div> (met naam div2) nu in het donker blauw! 23

24 Met andere woorden we zouden dus ook een onderscheid willen maken tussen het <p> element in de eerste <div>, met naam div1 en het <p> element in de tweede <div> met naam div2. Hier kunnen we de HTML eigenschappen class en id toepassen. Op een webpagina kunnen meerdere <p> elementen voorkomen (met andere woorden meerdere alinea s tekst)..dus willen we een naam hebben die we meerdere malen kunnen gebruiken. Dit betekent dat we moeten gebruik maken van de HTML eigenschap class. We passen in ons bestand de HTML code ( opgenomen in de body ) aan zoals hieronder weergegeven. <body> <div id="div1"> <p class="p1"> Dit is een stukje tekst als illustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van het div element. </p> </div> <div id="div2"> <p class="p2"> Dit is een tweede stukje tekst alsillustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van meerdere div element. </p> </div> </body> Sla deze aanpassingen op. We hebben echter nog geen CSS eigenschappen toegevoegd aan p1 en aan p2. 24

25 Neem onderstaande CSS eigenschappen op in het bestand. <style type="text/css"> #div1{ background-color: #99FFFF; height:300px; width:250px; border:1px dotted #000099; #div2{ background-color: #FFCC33; height:300px; width:250px; border:1px solid #000099;.p1{ margin:0px; color: red; font-family: verdana; font-size: 12px; background-color:#dddddd; border-bottom:1px dotted #000099; padding:5px 5px 5px 5px;.p2{ margin:0px; color: #330099; font-family: verdana; font-size: 12px; background-color:#dddddd; border-bottom:1px dotted #000099; padding:5px 5px 5px 5px; </style> Een class wordt voorafgegaan door een. (punt). 25

26 Het <p> element met de naam p1 blijft ongewijzigd tegenover de vroegere CSS eigenschappen van het <p> element (met name de letter kleur blijft rood). Wat betreft het<p> element met de naam p2 veranderen we de letter kleur (color) in donkerblauw (#330099). Na opslaan van de veranderingen kun je dit bestand bekijken in Internet Explorer. Je stelt vast dat inderdaad de tekst in het <p> element van het tweede <div> element, met de naam div2, nu weergegeven wordt in het donkerblauw (#330099). Opdracht Vragen over dit hoofdstuk 1. Bouw een DIV op die bestaat uit 3 verschillende DIVS, met elk een andere kleur en inhoud! 2. Waar moet je rekening mee houden bij het kiezen van namen voor je DIV? 3. Hoe wordt een class opgebouwd? 26