1 DOORLOPENDE OPDRACHT KINEPOLIS Beste studenten, Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp maken/ code...
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!
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.
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”.
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.
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
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
CSS stelt je in staat om alle
van een website, maar de grafische
stijlelementen van een website in één
mogelijkheden van HTML schoten duidelijk tekort.
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
Om dit tegen te gaan begon het World Wide Web Consortium(W3C) met de ontwikkeling van zogenaamde stylesheets, waarin de
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.
De pagina's van je site worden kleiner doordat je veel minder code hoeft te
Een andere bedoeling was het aantal tags (en dus de tijd die je in je site moet steken) 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.
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.
Het Laatste Nieuws
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.
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.
<STYLE TYPE="text/css"> stijlregels ...
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.
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.
...
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.
7
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?
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:
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
Open h2_taak_2.html en sla op als
In het begin …
“jouwnaam_h2_wsp1_4.html. Neem een extern stijlblad op, waarin je stijlregels voor de class “speciaal” en de id “yyy”
…
definieert.
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!
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:
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
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 (
). Daar willen we een afstand tussen de gestippelde lijnen en tekst.
Daartoe voegen we volgende CSS eigenschappen toe aan het
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:
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.
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?
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.
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.
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.
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.
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:
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
.
Met het DIV element kan een deel (division) van een HTML-document worden ingesloten.
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 #000099 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!
Bekijken we even de HTML code in “de body” opnieuw. Het
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 (
, 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
element geen afstand heeft (bovenaan) tegenover het
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
element en het
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.
Neem in Dreamweaver de volgende code over HOOFDSTUK 5 <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; }
Dit is een stukje tekst als illustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van het div element.
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.
element toegevoegd in de body. Sla deze file op en open in IE. Lees even het tekstje in beide
elementen om je te verzekeren dat je de minimale verschillen hebt gezien.
We hebben in de body twee
’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
’s gelden de dezelfde CSS eigenschappen. Maar we willen in de tweede
de achtergrond kleur (background-color) niet lichtblauw (#99FFFF), maar bijvoorbeeld lichtoranje (#FFCC33).
We moeten dus de 2
’s een aparte naam geven. HTML geeft ons de mogelijkheid om op 2 verschillende manieren een naam te geven aan een
, met name de HTML eigenschap “class” of de HTML eigenschap “id”.
We noemen de eerste
:
div1
We noemen de tweede
:
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
’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.
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
element geen gestippelde boord geven, maar een boord bestaande uit een volle (=solid) lijn. __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________
Aan de bovenkant van de onderste
(met naam div2) , zien we zowel een gestippelde als een vaste lijn (boord).
Logisch. Het
element, met naam div1 ,heeft een gestippelde boord (border) meegekregen. Het
element met de naam 2, heeft een vaste lijn meegekregen.
In feite zouden we voor het
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
element met naam div2. __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________
Ik wil de tekst in het
element van het eerste
element (naam=div1) in het rood houden….maar ik wil de tekst van het
Met andere woorden we zouden dus ook een onderscheid willen maken tussen het
element in de eerste
, met naam div1…en het
element in de tweede
met naam div2.
Hier kunnen we de HTML eigenschappen “class” en “id” toepassen. Op een webpagina kunnen meerdere
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.
Dit is een stukje tekst als illustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van het div element.
Dit is een tweede stukje tekst alsillustratie bij mijn eerste webpagina. Dit is een onderdeel van oefeningen betreffende het gebruik van meerdere div element.
Sla deze aanpassingen op. We hebben echter nog geen CSS eigenschappen toegevoegd aan “p1” en aan “p2”.
element met de naam p1 blijft ongewijzigd tegenover de vroegere CSS eigenschappen van het
element (met name de letter kleur blijft rood).
Wat betreft het
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
element van het tweede
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?
