Websiteontwikkeling HTML 5 & CSS. Naam: Klas: 2016 versie:concept-0.2.0

Transcriptie

1 Websiteontwikkeling HTML 5 & CSS X Naam: Klas: 2016 versie:concept-0.2.0

2 Voorwoord CONCEPT Voorwoord In deze module 'Websiteontwikkeling' komen de onderdelen HTML5 en CSS3 aan de orde. Opbouw van de module Vereisten Toetsing en afsluiting Het maken van alle opdrachten van dit hoofdstuk. Het inleveren van de eindopdrachten. Aantekeningen Op de laatste zes pagina's is de mogelijkheid voor het maken van aantekeningen. I Websiteontwikkeling HTML 5 & CSS

3 Voorwoord Websiteontwikkeling HTML 5 & CSS II

4 Inhoudsopgave Inhoudsopgave H1 HTML HTML... 3 Voorbereiding...3 Mappenstructuur...3 Webbrowsers...4 Webpagina's opslaan...5 Basis elementen...6 Elementen...7 Commentaar...7 Niveaus van de tags...8 Opmaak voor tekst...9 Tekst benadrukken...10 Koppen...14 Opsomming en lijsten...15 Leestekens en symbolen...16 Tabellen...18 Hyperlinks...19 Eerste webpagina...21 IFRAME...21 Afbeeldingen...22 Mappenstructuur...24 De slag om Groenlo...25 Valideren en testen...27 Formulieren...27 Publiceren...31 Zoekmachines...32 H2 CSS Stylbladen...33 Selectoren...35 Margin, border en padding...37 Border Style...37 Lettertype...39 Bijlagen Appendices...43 Aantekeningen...55 III Websiteontwikkeling HTML 5 & CSS

5 Inhoudsopgave Websiteontwikkeling HTML 5 & CSS IV

6 HTML 5 H1 HTML 5 HTML Html (HyperText Markup Language) werd in 1991 ontwikkeld door Tim Berners-Lee. Deze ontwikkeling was destijds revolutionair. Hiervoor kon men via het internet informatie met elkaar delen via de command-line interface. Html maakt het verspreiden van informatie makkelijker doordat men op linken kan klikken om aan nieuwe informatie te komen. Hiervoor moest je van te voren al weten waar wat stond om het te kunnen bekijken. Html is een scripttaal voor internetdocumenten deze hebben de extensie.html of.htm. Deze documenten maken het mogelijk om op een grafische manier door het Internet te bewegen. Internetdocumenten staan op een webserver ergens in het Internet, hierdoor kan iedereen die op het Internet kan deze bekijken. Internetdocumenten zijn aan elkaar gelinkt (hyperlink {NL = snelkoppeling}) dit maakt het mogelijk om diverse documenten met elkaar te koppelen en van de ene informatie naar de andere informatie te gaan. Zo een pagina {EN = site}, in de volksmond ook webpagina {EN = webpage of website} genoemd. Internetdocumenten die uit pure html-code bestaan zijn statische pagina's waarop tekst en afbeeldingen staan. Dynamisch wil zeggen dat er niets op deze pagina kan bewegen en een simpele opmaak hebben. Vaste elementen van een webpagina zijn verschillende soorten opmaak van tekst, plaatjes en links naar andere webpagina's. Deze links kunnen worden gebruikt om naar andere pagina's te surfen. Er zijn webbrowsers die dergelijke documenten voorlezen, andere zetten ze om in puntjes op een braillemachine, maar de meeste browserinstallaties geven een webpagina weer op een computerscherm en kunnen ook animaties en geluid weergeven. Sommige webbrowsers zijn geïntegreerde pakketten, waarin bijvoorbeeld ook een client en een Usenetclient zitten. Vrijwel alle browsers hebben de mogelijkheid om weblocaties op te slaan (bladwijzers), bestanden te downloaden, een geschiedenis bij te houden van waar de gebruiker geweest is en om verschillende soorten media weer te geven. Sommige browsers voegen hier nog andere dingen aan toe zoals meerdere tabbladen, pop-upblockers, advertentiefiltering en automatisch zoeken op een zoekmachine. Voorbereiding Voordat we HTML pagina's kunnen gaan maken, moet er eerst de juiste software gedownload en geïnstalleerd worden. Notepad++ Voor het maken van HTML documenten, gebruiken we Notepad++. Dit programma is te downloaden via: Opdracht 1: Maak de map 'LokaleApps' aan in de map 'Documenten'. Maak de map 'NotepadPlusPlus' aan in de map 'LokaleApps'. Download het 'zip package', dit is compressiebestand, waarbij het programma al direct werkt. Pak het zip-bestand uit naar de map 'Documenten\LokaleApps\NotepadPlusPlus'. Maak een snelkoppeling van 'Documenten\LokaleApps\NotepadPlusPlus\notepad++.exe' naar het bureaublad. Mappenstructuur Opdracht 2: Maak de volgende mappenstructuur aan, zoals op de rechter afbeelding hiernaast. 3 Websiteontwikkeling HTML 5 & CSS

7 HTML 5 Webbrowsers Een webbrowser (ook wel (internet)browser genoemd) is een computerprogramma om webpagina's te bekijken. Populaire browsers zijn Internet Explorer, Mozilla Firefox, Google Chrome, Safari en Opera. Minder bekende, alternatieve browsers zijn Iceweasel, Camino, Konqueror, CoolNovo, Lunascape en Seamonkey. Het gebruik van een browser is in de volksmond synoniem aan surfen op het internet. Voor meer en andere webbrowsers kijk op: Naam Fabrikant Besturingssysteem Logo Website Internet Explorer Microsoft MS-Windows Edge Microsoft MS-Windows Mozilla Firefox Mozilla Foundation divers Google Chrome Google Inc. divers esktop/index.html Safari Apple Mac OS X Opera Opera Software divers Een browser zet webpagina's die op een webserver staan om in een voor mensen leesbare vorm. De gehele inhoudt van een webpagina wordt eerst gedownload, vervolgens zet de webbrowser de gedownloade informatie in een grafische weergave om. Het is aan te raden om je website te testen met bij voorkeur alle webbrowsers. Het kan zijn dat de website er anders uitziet in de verschillende webbrowser. Dit komt omdat sommige html-code niet door alle webbrowsers ondersteund wordt. Extensions Extensions of Add-ons zijn uitbreidingen voor een webbrowser. Zo kunnen uitbreidingen aan een webbrowser toegevoegd worden om: veilig te browsen, makkelijker zoeken met diverse zoekmachines en vele andere mogelijkheden. Mozilla Firefox kent de meeste uitbreidingen. Apparaten Tegenwoordig kun je met diverse apparaten websites bekijken: computer, tablet en smartphone. De resolutie van elk apparaat verschilt waardoor de webpagina anders wordt weergegeven. Het kan dus zijn dat de website op een computer er goed en mooi uitziet, maar op een smartphone niet. In het hoofdstuk CSS behandelen we wat je moet doem om de website zo te maken dat het op elk apparaat lees- en werkbaar is. Server Computer Tablet Smartphone Bewaren Bekijken Bekijken Bekijken Websiteontwikkeling HTML 5 & CSS 4

8 HTML 5 Webpagina's opslaan In Notepad++ wordt een nieuw document in een nieuw tabblad geopend. Voor het opslaan van webpagina's klik je op Opslaan als, er verschijnt een extra venster. Hier voer je drie handelingen uit: 1. Geef het bestand een naam en extensie. In het voorbeeld hiernaast is dat: pagina.html. 2. Stel het bestandstype in op All types (*.*). 3. Klik nu pas op de knop Opslaan. Bestandsnaam Een bestand bestaat is uit twee delen. Één naam en één extensie. Deze twee worden gescheiden door een. (punt). Voorbeeld het bestand: leesmij.txt leesmij is de naam van het bestand txt is de extensie van het bestand (een tekst bestand) Hoe lang de bestandsnaam mag zijn, wordt bepaald door het besturingssysteem. Tegenwoordig mag de bestandsnaam uit 255 tekens bestaan. Dit is van toepassing bij de volgende besturingssystemen: Linux, Macintosh, Unix en Windows. Onder karakters vallen de cijfers 0 t/m 9 en letters a t/m Z en leestekens / : < _ = ( ) < > ;. De spatie valt ook onder de karakters! Bij het uitwisselbaar van bestanden tussen verschillende besturingssystemen, mag je eigenlijk alleen maar gebruik maken de volgende leestekens: _ het underscore teken (laagliggende streepje) het min teken Door leestekens te gebruiken bij de naamgeving van een bestand kan het zijn dat er iets anders in de adresbalk kan komen te staan. Vb: Dit heeft met de instellingen en soort server te maken waar het bestand opstaat. Bij het opslaan van HTML document zijn er een aantal punten waarmee je rekening moet houden. Naam van het bestand met kleine letters schrijven. Enige leestekens in de bestandsnaam mogen zijn: _ (underscore) en (minteken). Gebruik 'html' als extensie. Bestandsnaam is meestal gelijk aan de titel van de webpagina. Bestandsnaam is kort geschreven. 5 Websiteontwikkeling HTML 5 & CSS

9 HTML 5 Basis elementen Elk HTML document is opgebouwd uit de elementen: DOCTYPE, HTML, HEAD, TITLE en BODY. DOCTYPE Elk document start met het element DOCTYPE. Het DOCTYPE element moet altijd op de eerste regel worden geplaatst! Eigenschappen: tag: <!DOCTYPE> <!DOCTYPE html> Voor het schrijven van HTML 5 documenten wordt <!DOCTYPE html> gebruikt en voor HTML 4.01 documenten: <!DOCTYPE>. DOCTYPE is géén HTML element, maar een instructie voor de webbrowser. De webbrowser weet dan hoe het document moet worden weergeven. HTML Na het <!DOCTYPE html> wordt op de volgende regel <html> geplaatst. Het element HTML geeft aan dat alles wat tussen de start- en eind-tag van dit element staat HTML taal is. Het eind-tag wordt altijd op de laatste regel van het HTML document geplaatst! Eigenschappen: <html> </html> <html> </html> HEAD Elk HTML document heeft het element HEAD. Dit element wordt op de volgende regel, direct na <html> geplaatst. In het element HEAD worden eigenschappen voor het gehele HTML document opgegeven. Deze eigenschappen zijn voornamelijk voor de webbrowser en zoekmachines. Eigenschappen: <head> </head> <head> </head> TITLE Het element TITLE wordt op de volgende regel, direct na <head> geplaatst. Het element TITLE springt op de regel een stuk in. Dit inspringen heeft een lengte, als die van vier spaties. Met het inspringen wordt aangegeven, dat TITLE onderdeel uitmaakt van HEAD. Tevens is zo het HTML document beter te lezen. Het inspringen kun je doen door vier spaties te typen (in Kladblok), maar kan ook door op de TAB-toets te drukken. Bij de instellingen van het bewerkingsprogramma kan de TAB-lengte worden ingesteld. Meestal zie je dat de TAB-lengte uit drie tot vier spatie bestaat. Eigenschappen: <title> </title> <title>mijn eerste html document</title> BODY Elk HTML document heeft het element BODY. Dit element wordt op de volgende regel, direct na </head> geplaatst. Tussen de start- en eind-tag van het element body staat de de tekst en afbeeldingen, die door de webbrowser aan de gebruiker getoond worden. Eigenschappen: <body> </body> <body> </body> Opdracht 3: Type de code uit de afbeelding over en sla het document op als: pagina_01.html. Bekijk hierna de webpagina door deze met een webbrowser te openen. Websiteontwikkeling HTML 5 & CSS 6

10 HTML 5 Elementen Een HTML document is opgebouwd uit HTML code. Deze code bestaat uit verschillende elementen, die het mogelijk maken dat het HTML document in de webbrowser wordt weergegeven. s Op het moment dat een elementen tussen twee puntige haakjes geplaatst is, voorbeeld: <font>. Dan noemen we dit een 'tag'. s bestaan weer uit een start-tag en een sluit-tag. Voorbeelden van start-tag en een sluit-tag: <head> </head> <a> </a> <font> </font> Enkele tags bestaan alleen uit een start-tag. Het regeleinde element BR is hier een voorbeeld van. Het toepassen van deze tag, kan op twee manieren geschreven worden: <br>. Attributen Diverse elementen beschikken over attributen. De attributen van een element noemt men in het Engels: 'attribut'. Attributen geven aan wat de eigenschap van een element moet zijn. Enkel eigenschappen van een element kunnen zijn: de kleur van de tekst, de achtergrondkleur, de grote van het lettertype, de grootte van de breedte of hoogte, en nog veel meer. In het volgende voorbeeld zie je hoe het element FONT in een HTML document wordt toegepast: <font color= red >Hallo wereld< /font> <font> is de start-tag van het element FONT {lettertype}. </font> is de sluit-tag van dat element. color is het attribuut voor de kleur. red is de waarde van het attribuut color {kleur}. De waarde van een attribuut wordt tussen aanhalingstekens geplaatst. Het resultaat van de bovenstaande code is te zien in afbeelding 1. Afbeelding 1 In het vorige voorbeeld, kon je zien, dat er géén spaties in het attribuut staat. Maar wel tussen het element en het attribuut. Op het moment dat een element meerdere attributen bevat, wordt dit vaak als volgt opgeschreven: <font color= red size= 12 >Hallo wereld</font> Soms zie je dat de elementen en tags geheel in hoofdletters geschreven zijn. Dit is een schrijfwijze. Wij hanteren bij het schrijven van HTML en CSS de volgende regels: s en attributen worden met kleine letters geschreven. Het attribuut wordt zonder spaties geschreven. De waarde van het attribuut staat tussen aanhalingstekens ". Tussen de attributen staat één spatie. Bij elk niveau inspringen met één TAB. Voorzie het HTML document van voldoende commentaar. Commentaar Voor een betere leesbaarheid van HTML en CSS documenten, is het raadzaam om het document van commentaar te voorzien. Op het moment dat je het document maakt weet je exact welke HTML code waarvoor gebruikt wordt, maar weet je dat ook nog naar één week of één maand? Natuurlijk is het commentaar ook handig, voor anderen. Stel dat je met z'n tweeën aan een website werkt en je moet iets aan het document van de ander aanpassen. Het commentaar helpt je, om snel de juiste aanpassingen uit te kunnen voeren. Eigenschappen: <!-- --> <!-- Een opmerking --> Het commentaar is alleen te zien, als je de HTML code bekijkt. Bij het bekijken van een HTML pagina binnen een webbrowser is het commentaar onzichtbaar geworden. Opdracht 4: Type de code uit de afbeelding over en sla het document op als: pagina_02.html. Bekijk hierna de webpagina door deze met een webbrowser te openen. 7 Websiteontwikkeling HTML 5 & CSS

11 HTML 5 Niveaus van de tags Een HTML document bevat veel elementen en tekst. Als nu de elementen en tekst achter elkaar of per regel worden opgeschreven, dan kan het document voor een ontwikkelaar onleesbaar zijn. In de onderstaande tabel zie je twee voorbeelden van de niveau aanduiding. Het inspringen van de tekst, doe je door op de 'TAB toets' van het toetsenbord te drukken. Notepad++ laat de tekst dan inspringen vier spaties. Voorbeeld HTML document Voorbeeld tabel Foute niveau aanduiding <!DOCTYPE html> <html> <head> <title>mijn eerste html document</title> </head> <body> <font color="red" size="12">hallo wereld</font> </body> </html> <table border="1"> <tr> <th>kop 1</th> <th>kop 2</th> </tr> <tr> <td>rij 1, cel 1</td> <td>rij 1, cel 2</td> </tr> <tr> <td>rij 2, cel 1</td> <td>rij 2, cel 2</td> </tr> </table> Juiste niveau aanduiding <!DOCTYPE html> <html> <head> <title>mijn eerste html document</title> </head> <body> <font color="red" size="12">hallo wereld</font> </body> </html> <table border="1"> <tr> <th>kop 1</th> <th>kop 2</th> </tr> <tr> <td>rij 1, cel 1</td> <td>rij 1, cel 2</td> </tr> <tr> <td>rij 2, cel 1</td> <td>rij 2, cel 2</td> </tr> </table> Door in te springen is het document beter te lezen. Probeer om per regel niet meer van 80 karakters te gebruiken. Websiteontwikkeling HTML 5 & CSS 8

12 HTML 5 Opmaak voor tekst Nu kunnen we beginnen om een website te maken. Als je tekst in een HTML pagina typt, dan is deze tekst onopgemaakt. Dat wil zeggen dat wij programmeurs moeten aangeven hoe de tekst eruit komt te zien, denk hierbij aan kleur, lettertype, letter grote, onderstreept, enz. maar ook de plaats waar de tekst op het beeldscherm komt te staan. Alinea Een stuk tekst dat in een blokje bij elkaar staat noemt men alinea. Dit blokje tekst heeft aan het begin als aan het einde vrij ruimte. <p> </p> <p>tekst</p> gewone tekstregel <p>alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea alinea </p> gewone tekstregel Opdracht 5: Regeleinde Bij HTML wordt alle tekst achterelkaar weergegeven. Om de tekst op een nieuwe regel te laten beginnen moet het element BR worden toegepast. : <br> na het element regeleinde<br>begint de tekst op een nieuwe regel Opdracht 6: 9 Websiteontwikkeling HTML 5 & CSS

13 HTML 5 Tekst benadrukken De volgende elementen die behandeld worden, zijn ervoor om tekst, letters of cijfers een ander uiterlijk te geven. Italic Om tekst schuingedrukt te benadrukken, gebruik je het element I. <i> </i> <i>schuingedrukt</i> normale tekst en <i>italic</i> tekst. Opdracht 7: Schuin geschreven. Bold Om tekst vet te benadrukken, gebruik je het element B. <b> </b> <b>vet gedrukt</b> normale tekst en <b>bold</b> tekst. Opdracht 8: Vetgedrukt. Underlined Om tekst enkelvoudig te onderstrepen, gebruik je het element U. <u> </u> <u>onderstreept</u> normale tekst en <u>underlined</u> tekst. Opdracht 9: Onderstreept. Websiteontwikkeling HTML 5 & CSS 10

14 HTML 5 Doorstrepen Om tekst door te strepen, gebruik je het element S. <s> </s> Mijn auto is <s>rood</s> blauw van kleur. Opdracht 10: Doorstrepen. Markeren Om tekst te markeren, gebruik je het element MARK. <mark> </mark> De eind-tag wordt geschreven met het <mark>slash teken</mark>. Opdracht 11: Markeren. Sup tekst Om tekst klein en hoog weer te geven, gebruik je het element SUP.  Tien tot de macht twee, schrijf je zo: 10². Opdracht 12: Hoger geschreven tekst. 11 Websiteontwikkeling HTML 5 & CSS

15 HTML 5 Sub tekst Om tekst klein en laag weer te geven, gebruik je het element SUB.  De formule voor zwavelzuur is: H₂SO₄. Opdracht 13: Lager geschreven tekst. Kleine tekst Om tekst kleiner weer te geven, gebruik je het element SMALL. <small> </small> Deze Mercedes is <small>kleiner dan</small> deze Volvo. Opdracht 14: Tekst klein geschreven. Em De tekst wordt benadrukt doordat de tekst schuin geschreven is. <em> </em> Deze Mercedes is <em>kleiner dan</em> deze Volvo. Opdracht 15: Tekst klein geschreven. Strong De tekst wordt benadrukt doordat de tekst vet geschreven is. <strong> </strong> <strong>let op:</strong> het gaat regenen. Opdracht 16: Tekst klein geschreven. Websiteontwikkeling HTML 5 & CSS 12

16 HTML 5 Strong De tekst wordt benadrukt doordat de tekst vet geschreven is. <strong> </strong> <strong>let op:</strong> het gaat regenen. Opdracht 17: Tekst klein geschreven. Code, samp, kbd en var Code wordt gebruikt om aan te geven dat dit code is die ingevoerd moet worden bijvoorbeeld bij de command promt. Samp wordt gebruikt om te laten zien wat het resultaat is van de command prompt. Kbd wordt gebruikt om aan te geven wat de gebruiker in bijvoorbeeld de command prompt intypt. Var wordt gebruikt om variabelen aan te geven. De tekst wordt benadrukt doordat de tekst iets kleiner geschreven is. <code> </code> Type in de cmd in: <code>shutdown -s -t 0</code>. Opdracht 18: Tekst klein geschreven. 13 Websiteontwikkeling HTML 5 & CSS

17 HTML 5 Koppen HTML kent standaard zes verschillende soorten tekstkoppen {EN = headers}: H1 t/m H6. Koppen gebruik je, als je een onderscheidt in een groot stuk tekst wilt aanbrengen. Kop 1 (H1) geeft aan wat het onderwerp van de tekst is. Kop 2 (H2) geeft aan uit welke onderdelen het onderwerp is opgebouwd. Op het moment dat je sub onderwerp weer kunt onderverdelen, dan maak je gebruik van Kop 6 (H6). <h1> </h1> <h1>kop 1</h1> gewone tekst <h2>kop 2</h2> gewone tekst Opdracht 19: Koppen. Vul het voorbeeld aan tot en met H6. Websiteontwikkeling HTML 5 & CSS 14

18 HTML 5 Opsomming en lijsten Voor het opsommen van lijsten kun je in HTML uit drie varianten kiezen. Numerieke opsomming Met het element OL worden opsommingslijst gemaakt. Elke opsomming krijt één nummer aan het begin van de opsomming. De lijst begint standaard bij het getal 1. de tweede opsomming cijfer 2, enz. In het Engels noemt men dit 'order list' {geordende / gesorteerde lijst}. Opsomming: Opsomming lijst: <ol> </ol> <li> </li> <ol> <li>groningen</li> <li>den Haag</li> </ol> Opdracht 20: Opsomming met nummers. Symbolen opsomming Met het element UL worden opsommingslijst gemaakt. Elke opsomming heeft aan het begin van de opsomming een symbool. Standaard is dit een dikke zwarte punt. Dit symbool kan in elk willekeurig leesteken of afbeelding gewijzigd worden. In het Engels noemt men dit 'unorderd list' {ongeordende lijst}. Opsomming: Opsomming lijst: <ul> </ul> <li> </li> <ul> <li>rotterdam</li> <li>amsterdam</li> </ul> Opdracht 21: Opsomming met symbolen. 15 Websiteontwikkeling HTML 5 & CSS

19 HTML 5 Gefineerde lijst De derde manier van een opsomming is met het element DL. Dit creëert opsommingslijsten met een kopje erboven. Opsomming: Opsomming lijst: Opsomming lijst: <dl> </dl> <dt> </dt> <dd> </dd> <dl> <dt>ms-word</dt> <dd>- tekstverwerker</dd> <dt>ms-excel</dt> <dd>- spreadsheet</dd> <dd>- rekenmachine</dd> </dl> Opdracht 22: Lijst. Leestekens en symbolen In Nederland heeft bijna elk computersysteem een QWERTY-toetsenbord. Dit geeft aan wat er op het beeldscherm verschijnt op het moment dat een letters, cijfers, leestekens of functietoetsen wordt ingedrukt. Nu kennen we in de Nederlandse taal afwijkende letters, zoals: é, ü, á, à, enz. Deze letters zijn opgebouwd uit één letter en één leesteken. Om in een HTML pagina dit soort letters te creëren, moet er met een code gewerkt worden, voorbeeld: Een e met trema (") (Duits: umlaut) wordt dus: ë De woorden voor deze tekens zijn: acute ( ), grave (`), circ (^), tilde ( ), ring ( ), cedil (,), uml(") "Niet één, maar zeven zeeën heeft de Griekse held Odysseus bevaren", zo schreef Homerus het op. Opdracht 23: Websiteontwikkeling HTML 5 & CSS 16

20 HTML 5 Opdracht 24: Op deze website geef je informatie over jezelf weer. Vertel op deze pagina iets over jezelf: Wanneer en waar je geboren bent. Je hobby's en interesses. Wat je zo leuk vind aan ICT. Waarom je voor ICT gekozen hebt. Controleer met de webbrowser of dit overeenkomt met afbeelding 2. Afbeelding 2: overmezelf.html De webpagina 'overmezelf.html' heeft een standaard opmaak (lay-out). Bij het onderdeel 'CSS' gaan we pas de lay-out van onze website aanpassen! 17 Websiteontwikkeling HTML 5 & CSS

21 HTML 5 Tabellen Het werken met tabellen ken je misschien van het werken met MS Word. Bij HTML heeft het dezelfde functie. Binnen HTML worden tabellen ook gebruikt om tekst of afbeeldingen over de breedte van het beeldscherm te verdelen. s Tabel Tabel kop Regel Kolom Attributen border width: height: <table> </table> <th> </th> <tr> </tr> <td> </td> dikte van de rand. breedte van de tabel, tabel kop, kolom of regel. hoogte van de tabel, tabel kop, kolom of regel. <table border="1"> <tr> <th>kop, kolom 1</th> <th>kop, kolom 2</th> </tr> <tr> <td>rij 1, kolom 1</td> <td>rij 1, kolom 2</td> </tr> <tr> <td>rij 2, kolom 1</td> <td>rij 2, kolom 2</td> </tr> <tr> <td>rij 3, kolom 1</td> <td>rij 3, kolom 2</td> </tr> </table> Opdracht 25: Tabel. Websiteontwikkeling HTML 5 & CSS 18

22 HTML 5 Hyperlinks 'Hyperlinks' of ook 'links' worden gebruikt om naar andere websites te verwijzen. Door op een hyperlink te klikken wordt een andere webpagina gedownload en op het beeldscherm weergegeven. Door op hyperlinks te klikken kun je het gehele www {World Wide Web} doorlopen. Attributen <a> </a> href: de url van de website. target: het doel waar de link moet worden weergegeven. _blank een nieuwe webpagina. _self in de huidige webpagina. _top begin van webpagina. <a href=" target="new">computer info</a> Opdracht 26: Opdracht 27: mijnstartpagina.html Plaats nu 50 links in deze pagina. Organiseer de links per groep: school, zoeken, sociaal, enz. (maximaal 10 per groep). Tip! Voor het attribuut 'target' gebruik '_blank' controleer met de webbrowser of dit overeenkomt met afbeelding 3. Opdracht 28: navigatiebalk.html Als bestandsnaam geef je op: 'navigatiebalk.html', Tip! Voor het attribuut 'target' gebruik '_parent'. Controleer met de webbrowser of dit overeenkomt met afbeelding 4. Afbeelding 3: mijnstartpagina.html Afbeelding 4: navigatiebalk.html 19 Websiteontwikkeling HTML 5 & CSS

23 HTML 5 ID-link Met hyperlinks kun je naar andere websites navigeren. Websites lijken soms net op een behangrol; ze zijn erg lang en dan moet je naar beneden scrollen. Met een ID-link (interne hyperlink) kun je op dezelfde pagina navigeren. Hiermee kun je naar het einde van de webpagina gaan of naar een bepaald deel. Dit realiseer je door op een punt in de pagina een ID te creëren. Met de link verwijs je dan naar dat ID. Attributen <a> </a> id: een unieke naam, voor een 'ID link' in het document. href: de hyperlink naar het ID in een website. target: het doel waar de link moet worden weergegeven. _blank een nieuwe webpagina. _self in de huidige webpagina. _top begin van webpagina. In het voorbeeld hieronder wordt een interne hyperlink weergegeven waarmee je naar het begin en naar het eind van het document kunt navigeren. <!-- deze code moet net onder <body> geplaatst worden --> <a id="begindocument"></a> <br> <!-- deze code moet net boven </body> geplaatst worden --> <a href="#begindocument">omhoog</a> Opdracht 29: In het voorbeeld bij de html-code staat in het midden 1x <br>. Om de werking van ID te kunnen zien moet je in plaats van 1x <br> er 75x <br> invoegen. Opdracht 30: Zou je het werken met 'ID links' ook kunnen toepassen in het bestand: 'mijnstartpagina.html'? Beschrijf kort hoe je dit hebt toegepast: Websiteontwikkeling HTML 5 & CSS 20

24 HTML 5 Eerste webpagina De bestandsnaam van het HTML document verteld iets over de inhoud van de webpagina. Een uitzondering is de eerste pagina van de website. De eerste webpagina moet je opslaan onder de naam 'index.html'. Op de webserver kan ingesteld worden wat de naam is voor de eerste webpagina. Standaard wordt 'index.html' of 'default.html' gebruikt. Op het moment dat je ' in een webbrowser intypt, dan laat de webserver, waar de website van op staat, jou altijd de eerste pagina zien. Type maar eens ' in. Opdracht 31: Als bestandsnaam geef je op: 'index.html'. Onder <body> type je: 'Welkom op mijn website.'. Sla het bestand op als 'index.html'. Controleer met de webbrowser of dit overeenkomt met afbeelding 5. IFRAME Met het element IFRAME kan een webpagina in een webpagina weergegeven worden. Attributen src: frameborder width: height: <iframe> </iframe> de url. dikte van de rand. breedte van het IFRAME. hoogte van het IFRAME. Afbeelding 5: index.html <iframe src=" width="800" height="200" frameborder="1"></iframe> Opdracht 32: Opdracht 33: Open in 'Notepad++' het bestand 'index.html'. Plaats in het begin van de documenten (onder <body>) een IFRAME. Dit IFRAME verwijst naar het document: 'navigatiebalk.html'. Maak het IFRAME zo klein, dat er géén schuifbalken zichtbaar zijn! Controleer met de webbrowser of dit overeenkomt met afbeelding 6. Afbeelding 6: index.html Tip! Om een hyperlink te krijgen voor 'Home' moet je gebruik maken van een andere optie bij het attribuut 'target'. Opdracht 34: Voer nogmaals de vorige opdracht uit, maar dan voor de documenten: overmezelf.html test.html startpagina.html 21 Websiteontwikkeling HTML 5 & CSS

25 HTML 5 Afbeeldingen Een afbeelding bestaat uit pixels, één pixel is één puntje dat uit één kleur bestaat. Des te groter een afbeelding is, des te meer pixels er zijn. Grote afbeelding nemen dan ook meer opslagcapaciteit in beslag. Met een digitale-camera is snel een foto gemaakt. Deze foto's / afbeeldingen hebben een bestands-grote van meer dan 1 MiB. Deze afbeeldingen zijn ideaal om op fotopapier af te drukken of als poster. Natuurlijk kun je deze afbeeldingen ook gebruiken als achtergrond voor het bureaublad van jou computer. Voor websites zijn foto's, die groter zijn dan '500 x 500 pixels' niet ideaal. Dit heeft er mee te maken dat als een website bekeken wordt niet alleen de website van de server wordt gedownload, maar ook alle afbeeldingen. Stel er staan tien afbeelding van elk 2,5 MiB op de website. Degene die de website wil bekijken, moet minimaal 25 MiB downloaden, voordat de website te zien is. Het Internet kan bij jou thuis wel snel zijn, maar hoe snel is de internetverbinding bij anderen? Of via een mobiele telefoon? Bedenk: Mensen hebben een hekel aan wachten en aan een te lange laadtijd van websites! Duurt het te lang, dan daalt het aantal bezoekers! Om ervoor te zorgen dat de website snel geladen wordt, zul je de afbeeldingen moeten verkleinen. Hoe klein moeten deze afbeelding dan worden? Dat ligt aan de afbeelding en de tekst op de website. Om afbeeldingen te verkleinen kun je gebruik maken van de applicatie 'MS-Paint' of 'Gimp'. Natuurlijk bestaan er tal van tools die via het Internet gedownload kunnen worden. De resolutie wordt in pixels weergegeven, zoals bijvoorbeeld: 978 x Het eerste getal voor de x geeft de breedte van de afbeelding weer. Het tweede getal de hoogte van de afbeelding. De gehele afbeelding bestaat dus uit pixels (978 keer 1191). Op het moment dat je afbeeldingen gaat verkleinen, moet je erop letten dat de verhouding tussen de breedte en hoogte van de afbeelding gelijk blijft. Dit doe je door hetzelfde aantal te delen. Stel dat je de afbeelding vier keer wilt verkleinen, dan deel je de breedte door vier en de hoogte deel je door vier. Afronden naar boven! te breed te hoog juiste verhouding Breedte gedeeld door 2 en hoogte gedeeld door 4 Breedte gedeeld door 4 en hoogte gedeeld door 2 Breedte en hoogte gedeeld door 4 De nieuwe resolutie is dan: 245 x 298 pixels. Opdracht 35: Afbeelding verkleinen. Download de afbeelding 'tip_of_the_iceberg.jpg'. Deze staat in het vak binnen de digitale leeromgeving. Open het bestand 'tip_of_the_iceberg.jpg' met 'MS-Paint'. Wat is de resolutie van deze afbeelding? Verklein de afbeelding met een verhouding van 6. Wat is nu de resolutie van de afbeelding: Sla het bestand op als 'tip_of_the_iceberg.png'. LET OP! Extensie van het bestand is PNG. Websiteontwikkeling HTML 5 & CSS 22

26 HTML 5 IMG Img staat voor 'image' wat in het Nederlands afbeelding betekent. Met het element IMG voeg je afbeeldingen aan de webpagina toe. : Attributen src: alt: border width: height: <img> locatie en naam van de bestand. naam van de afbeelding. dikte van de rand. breedte van de afbeelding. hoogte van de afbeelding. Met het attribuut 'alt' geef je een naam aan de afbeelding. Zoekmachines maken hier gebruik van, als iemand een afbeelding van een 'ijsberg' zoekt, dan verschijnt de afbeelding van jou website in het zoekresultaat. Bij het onderdeel 'Zoekmachines' gaan we hier uitgebreider op in. <!-- de afbeelding wordt verkleind --> <img src="tip_of_the_iceberg.png" alt="ijsberg" width="97" height="119"> <!-- de afbeelding wordt vergroot --> <img src="tip_of_the_iceberg.png" alt="ijsberg" width="194" height="238"> Opdracht 1: Neem het voorbeeld over en controleer met de webbrowser of dit overeenkomt met de bijbehorende afbeelding. Opdracht 2: Open met 'Notepad++' het bestand 'overmezelf.html'. Voeg een afbeelding van jezelf toe (pasfoto). Sla dit bestand op als: 'pasfoto.png'. Let hierbij op: De bestands-grote van de afbeelding. Het attribuut: alt, width en height. Je naam staat onder de afbeelding. Controleer met de webbrowser of dit overeenkomt met afbeelding 7. Afbeelding 7: pasfoto 23 Websiteontwikkeling HTML 5 & CSS

27 HTML 5 Mappenstructuur Als we nu in de map kijken, waar alle bestanden van onze website opgeslagen staan, dan moet deze er exact zo uitzien, zie afbeelding 8. Tot nu toe staan er zeven bestanden in de map en is alles nog zeer overzichtelijk. Als we nu meer websites gaan maken en alle afbeeldingen in dezelfde map stoppen, dan kan het al snel onoverzichtelijk worden. Misschien valt het wel mee, we gebruiken tenslotte passende namen voor de bestanden, dat ervoor zorgt dat we het overzicht bewaren. Misschien ken je dat wel dat je met de 'Windows Verkenner' een map met afbeeldingen Afbeelding 8: Huidige mappenstructuur of geluidsbestanden opent en het duurt en duurt, voordat alle bestanden weergegeven worden. Dit komt omdat er meer dan honderd bestanden in één map staan. De 'Windows Verkenner' moet eerst al die bestanden laden, voordat hij dit grafisch kan weergeven en des te meer bestanden in één map staan, des te langer duurt dit. Opdracht 3: Maak in de map waar alle webpagina's en de afbeelding staat de map 'afb' aan. Verplaats de afbeelding 'tip_of_the_iceberg.png' en 'pasfoto.png' naar de map 'afb'. Bekijk nu je website door het bestand 'index.html' met een webbrowser te openen. Bekijk alle pagina's! De afbeeldingen worden nu niet weergegeven! Open met 'Notepad++' alle bestanden die een afbeelding bevatten. Zoek het element IMG op en wijzig de waarde van het attribuut 'src'. src="pasfoto.png" wordt src="afb/pasfoto.png" Controleer met de webbrowser of alle afbeeldingen nu wel weergegeven worden. In de opdracht hierboven hebben we de naam van de map 'afb' genoemd; wat de afkorting is voor: afbeelding. Je mag dit ook voluit schrijven, maar onthoud dat de computer als volgt werkt: des te korter, des te sneller! Als je afkortingen gebruikt, gebruik afkortingen die in het dagelijkse leven ook gebruikt worden! Websiteontwikkeling HTML 5 & CSS 24

28 HTML 5 De slag om Groenlo Een vriend van je fotografeert graag in zijn vrije tijd. Afgelopen najaar heeft hij foto's gemaakt van De slag om Groenlo. Hij zou graag een website willen maken, maar weet niet hoe dit moet, daarom vraagt hij jou hulp in. De bedoeling is dat jij de website voor hem gaat maken, over De slag om Groenlo met zijn foto's erop en met allerlei extra informatie over de stad Groenlo, dit omdat hij hier geboren en getogen is. Hoofdopdracht: De slag om Groenlo Maak een website over De slag van Groenlo. Op deze website staat de volgende informatie: Het stadje Groenlo tegenwoordig. Bezienswaardigheden in en om Groenlo. Handige links met betrekking tot Groenlo. De geschiedenis van De slag om Groenlo. Informatie over Compagnie Grolle. Informatie over reënactment. De afbeeldingen die voor deze opdracht te downloaden zijn, moeten allemaal gebruikt worden! Deze staan op de digitale leeromgeving. Stappenplan Om uit het niets een leuke website te kunnen maken, moet je een aantal stappen uitvoeren. Hieronder staan de stappen weergegeven. 1. Voorbereiding. 2. Informatie verzamelen. 3. Tekst bewerken. 4. Afbeeldingen bewerken. 5. Websites maken. Stap 1 voorbereiding Als eerste maken we een mappenstructuur aan voor de nieuwe website. Een van de mappen die aangemaakt wordt is de map 'temp'. Temp is de Engelse afkorting voor 'temporary', wat in het Nederlands 'tijdelijk' betekend. In deze map sla je alle informatie en afbeeldingen op, die betrekking tot deze opdracht. Een overzichtelijke mappenstructuur is bij HTML erg belangrijk. Voor de volgende opdracht maken we een aantal mappen aan, zie afbeelding 9. De submap heet 'slagomgroenlo'. In deze map worden alle websites, afbeeldingen en stylesheets geplaatst, die te maken hebben met De slag om Groenlo. Subopdracht: Maak in de map 'html' de map 'slagomgroenlo' aan, zie afbeelding 9. Maak in de map 'slagomgroenlo' de volgende mappenstructuur aan, zie afbeelding 9. 'temp' en 'afb'. Bij het vak in de digitale leeromgeving staat een compressiebestand 'slagomgroenlo.zip', download deze. Pak het compressiebestand uit naar de locatie: '..\html\slagomgroenlo\temp'. Verwijder het compressiebestand. In de map 'temp' staan nu allerlei afbeeldingen van reënactors die De slag van Groenlo naspelen. Afbeelding 9: mappenstructuur: slag om Groenlo Stap 2 informatie verzamelen Op het moment dat je informatie aan het zoeken bent, kan het zijn dat je ook toepasselijke afbeeldingen tegenkomt. Alle afbeeldingen sla je op in de map 'temp'. Alle handige tekst kopieer je en plak je in 'Kladblok'. Als je tekst vanuit een website kopieert en plakt in de applicatie 'MS Word' plakt. Dan plak je niet alleen de tekst, maar ook de gehele opmaak van de tekst mee. Door al die verschillende opmaken in één Word-document, wordt 'MS Word' trager. Daarnaast zul je meerdere applicaties open hebben staan, zoals: een webbrowser, Notepad++, enz. Wat de computer alleen maar langzamer maakt. 'Kladblok' is een lichte applicatie en werkt met 'niet opgemaakte tekst'. Dit soort tekst moet uiteindelijk ook in 'Notepad++' geplakt worden. Zo zou je in de map 'temp' met 'Kladblok' de volgende bestanden kunnen aanmaken, waarin je alle informatie verzamelt: 25 Websiteontwikkeling HTML 5 & CSS

29 HTML 5 groenlo_heden.txt slag_om_groenlo.txt groenlo_links.txt groenlo_bezienswaardigheden.txt Opdracht 36: Subopdracht: Bekijk de afbeeldingen, die in de map 'temp' staan. Zoek informatie met de zoekmachine 'Google'. Tip voor zoekcriteria: Groenlo en Grolle slag om Groenlo geschiedenis van Groenlo Zoek een afbeelding / logo van Het wapen van Groenlo op. Deze afbeelding moet nog goed te herkennen zijn met een pixel grote van 32x32! Een geschiedenisboek raadplegen. Familie, buren, vrienden en kennissen raadplegen. Stap 3 tekst bewerken In deze stap ga je alle verzamelde informatie in tekstvorm bewerken. Dit houd in, dat de tekst samengevoegd moet worden tot een leesbare tekst. Laat deze tekst door iemand anders lezen, bijvoorbeeld je ouders, broer, zus, opa of oma. Stap 4 afbeeldingen bewerken In deze stap ga je alle verzamelde afbeeldingen verzamelen. Doordat de tekst al bewerkt is, kun je makkelijker bepalen wat voor afbeelding je bij welke tekst gaat plaatsen. Bewerk de afbeelding / logo van Het wapen van Groenlo, door het te verkleinen naar 32x32 pixels. Sla deze afbeelding op als 'favicon.png'. Stap 5 websites maken In deze stap voeg je de bewerkte tekst en afbeeldingen in de HTML bestanden. Let hierbij op de volgende punten: Maak gebruik van de gehele breedte van het beeldscherm. Pas voor elke webpagina de META elementen aan: keywords en description. Bij het element META 'shortcut icon' geeft je href="afb/favicon.png" op Wat is er nu aan de website toegevoegd of gewijzigd? Opdracht 37: Extra opdracht: Richt de website zo in, dat de foto's per jaar bekeken kunnen worden. Richt de website zo in, dat alleen een selectie met mooiste foto's ooit bekeken kunnen worden. Websiteontwikkeling HTML 5 & CSS 26

30 HTML 5 Valideren en testen Valideren Voordat je de website gaat testen is het handig om deze eerst te valideren, dit kan op: Het valideren houdt in dat de pagina gecontroleerd wordt of deze aan de standaard van HTML voldoet en of er fouten in staan. Opdracht 38: Valideer alle pagina's die je gemaakt hebt voor de opdracht Slag om grolle via Testen van websites Niet alles van HTML en CSS wordt door elke webbrowser ondersteund. Het is dan ook verstandig om de gemaakte website te test met de meest gebruikte webbrowsers, zoals: Internet Explorer, Edge, Firefox, Chrome en Opera. Opdracht 39: Test alle pagina's die je gemaakt hebt voor de opdracht Slag om grolle met bovenstaande webbrowsers. 27 Websiteontwikkeling HTML 5 & CSS

31 HTML 5 Formulieren Het is ook mogelijk om formulieren te maken met html, maar hiervoor moet je gebruik maken van PHP, Java scripts of Ajax. In deze module behandelen we alleen de html elementen voor het maken van formulieren. Het verzenden van de gegevens uit dit formulier wordt niet behandeld. Opsomming: <form> </form> <form> </form> Opdracht 40: Lijst. Input Met het element input verschijnt er een textbox waarin de gebruiker tekst kan typen. Opsomming: <input> </input> Attribute: type Geeft aan dat er tekst en getallen ingetypt mogen worden. Attribute: name De naam van de textbox {NL = invoerveld}. <form> Voornaam: <input type="text" name="voornaam"><br> Achternaam: <input type="text" name="achternaam"><br> </form> Opdracht 41: Lijst. Websiteontwikkeling HTML 5 & CSS 28

32 HTML 5 Tekstveld Met het element input verschijnt er een textbox waarin de gebruiker tekst kan typen. Opsomming: <input> </input> Attribute: type Geeft aan dat er tekst en getallen ingetypt mogen worden. Attribute: name De naam van de textbox {NL = invoerveld}. <form> Voornaam: <input type="text" name="voornaam"><br> Achternaam: <input type="text" name="achternaam"><br> </form> Opdracht 42: Lijst. <form> Wachtwoord: <input type="password" name="wachtwoord1"><br> Herhaal het wachtwoord: <input type="password" name="wachtwoord2"><br> </form> Opdracht 43: Lijst. Textarea Met de textarea creëer je een invoerveld waar tekst ingevoerd kan worden met de mogelijkheid om tekst te typen welke meer dan maar één regel gebruikt. Opsomming: Attribute: Attribute: <textarea> </tekstarea> type = submit Met deze knop wordt het formulier verzonden. type = button Dit is een standaard knop. <form> Opmerkingen:<br> <textarea name="opmerking" rows="3" cols="100">type hier u opmerking</textarea> </form> Opdracht 44: Lijst. 29 Websiteontwikkeling HTML 5 & CSS

33 HTML 5 Buttons Om een button {NL = knop} te maken maak je weer gebruik van het element input. Alleen nu wijzigt het attribuut van type naar button of submit. Opsomming: Attribute: Attribute: <input> </input> type = submit Met deze knop wordt het formulier verzonden. type = button Dit is een standaard knop. <form> <input type="submit" value="verzenden"> <input type="button" value="klik op mij"> </form> Opdracht 45: Lijst. Opdracht 46: Knoppen. Klik op de knop Verzenden en kijk hoe de webbrowser hierop reageert. Klik op de knop Klik op mij en kijk hoe de webbrowser hierop reageert. Wat is het verschil als je op de twee knoppen klikt? Selectiemenu Om selectiemenu te maken maak je weer gebruik van het element select. Een menu waarin een lijst is waar één waarde uit gekozen kan worden. Engelstalige woord is combobox. Opsomming: <select> Het beginpunt van het selectiemenu. </select> Het eindpunt van het selectiemenu. Attribute: name De naam van het selectiemenu. <option> Het startpunt van één onderdeel uit de de lijst. </option> Het eindpunt van één onderdeel uit de de lijst. Attribute: value De waarde van het onderdeel uit de lijst. <form> Kies een auto: <select name="autos"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat">fiat</option> <option value="audi">audi</option> </select> </form> Opdracht 47: Lijst. Websiteontwikkeling HTML 5 & CSS 30

34 HTML 5 Radiobutton Om selectieknoppen te maken maak je weer gebruik van het element input. Alleen nu wijzigt het attribuut van text naar radio. Radio staat voor het Engelstalige woord radiobutton. Opsomming: <input> </input> Attribute: type = radio Geeft aan dat er tekst en getallen ingetypt mogen worden. Attribute: name De naam van de radiobutton groep. Attribute: value De waarde die deze radiobutton heeft. <form> Kies een auto:<br> <input type="radio" name="auto" value="volvo"> Volvo<br> <input type="radio" name="auto" value="bmw"> BMW<br> <input type="radio" name="auto" value="mercedes"> Mercedes </form> Opdracht 48: Lijst. <form> Kies een boom:<br> <input type="radio" name="boom" value="eik"> Eik<br> <input type="radio" name="boom" value="den" checked> Den<br> <input type="radio" name="boom" value="palm"> Palm </form> Opdracht 49: Lijst. Let wel dat in de regel van de boom den dat hier het attribute checked toegevoegd is. De Den is dus standaard geselecteerd. Eindopdracht formulieren Opdracht 50: Maak het html-formulier welke hiernaast staat afgebeeld na. Bij leeftijd moet je kiezen uit: - en 10 t/m 16. Bij school moet je kiezen uit: - en Metzo College en Wezenthorst. Bij niveau moet je kiezen uit: -, basisberoeps en kaderberoeps. Bij cursus moet je kiezen uit: -, html, java, linux en windows. Afbeelding 10: Voorbeeld eindopdracht formulieren 31 Websiteontwikkeling HTML 5 & CSS

35 HTML 5 Publiceren Het doel van een website is dat andere waar ter wereld ook jou informatie kunnen lezen. Dit doe je door de website te publiceren, dat wil zeggen, dat de webpagina's op een webserver opgeslagen moeten worden. Dit opslaan heet uploaden. De meeste internetproviders (ISP) in Nederland stellen +/- 20MiB aan opslagruimte voor websites ter beschikking. Kijk eens op de website van jullie internetprovider, voor instructies over het uploaden van websites. Als dit niet mogelijk is kun je ook gebruik maken van gratis website-hosting. Let er op dat de inhoud van de websites voldoet aan de voorwaarden die de web-provider stelt! FTP programma's Met FTP programma's kunnen webpagina's op een webserver opgeslagen worden. Enkele bekende FTP programma's zijn: FileZilla. MS-Windows verkenner. gftp. Total commander. Dreamweaver (html editor). Websites kunnen bekeken worden met een webbrowser, dit gebeurd via poort 80. Voor het uploaden via FTP wordt poort 21 gebruikt. Opdracht 51: Upload de website. Lever de link van de website in op de ELO. Websiteontwikkeling HTML 5 & CSS 32

36 HTML 5 Zoekmachines Op het moment dat de website op een webserver staat, wil je ook dat de website door een ieder gevonden kan worden. Dit zoeken en gevonden worden gebeurd door zoekmachines. Google is de bekendste en meest gebruikte zoekmachine wereldwijd. Andere zoekmachines zijn: Duckduckgo is een zelfstandige zoekmachine. De anderen maken gebruik van de Google zoekmachine. META Om gevonden te worden door zoekmachines, moet je de META in de HEAD van de webpagina gaan gebruiken. Hieronder is een pagina te zien voor bijvoorbeeld een online autohandelaar <!DOCTYPE html> <html> <head> <title>jansens DriveMyCar</title> <meta name="description" content="online autoshop"> <meta name="keywords" content="auto, volvo, mercedes, bmw, ford"> <meta name="author" content="jan Janssen"> <meta charset="utf-8"> </head> <body> </body> </html> Titel De titel komt in het tabblad van de webbrowser te staan en wordt gebruikt bij het maken van favorieten / bookmarks. <title>jansens DriveMyCar</title> Beschrijving De beschrijving geeft aan welke informatie er op de website staat. <meta name="description" content="online autoshop"> Zoek woorden De zoekwoorden worden door zoekmachines gebruikt. Het aantal en soort woorden hier bepalen hoe snel de website gevonden wordt. Let op de woorden worden door één komma van elkaar gescheiden. meta name="keywords" content="jansens DriveMyCar"> Informatie over de maker Hier komt de naam van de websiteontwikkelaar te staan. <meta name="author" content="jan Janssen"> Instellingen voor weergave Deze instelling geeft aan hoe de karakters in de pagina uitgelezen moeten worden. <meta charset="utf-8"> 33 Websiteontwikkeling HTML 5 & CSS

37 CSS3 H2 CSS3 Cascading Style Sheets [CSS] wordt gebruikt voor de vormgeving van webpagina's, denk hierbij aan kleuren, lijnen en de plaats van een element. CSS wordt gebruikt om de opmaak van een website te automatiseren en het beheer te vergemakkelijken. Stylbladen Er zijn drie manieren om css toe te passen: External style sheet Internal style sheet Inline style External style sheet Bij een external [NL = extern] stijlblad staat alle css-code in één bestand. Dit vergemakkelijkt het beheer van de vormgeving van een website. Op één plek hoeft er maar iets gewijzigd te worden. Hiervoor moet je op elke html-bestand de volgende html-code bezitten, zoals weergegeven in onderstaande tabel. <head> <link rel="stylesheet" type="text/css" href="mijnstylen.css"> </head> body { background-color: lightblue; } CSS code: h1 { color: navy; margin-left: 20px; } mijnstylen.css is het bestand waar alle css in opgeslagen staat. Het is zelfs mogelijk om meerder stijlbladen voor één website te gebruiken. De opmaak die in het stijlblad mijnstijlen.css staat wordt nu op alle webpagina's toegepast die in hun HEAD een verwijzing hebben staan naar mijnstijlen.css. Internal style sheet In internal [NL = intern] stijlblad wordt geplaatst in de tag van het element op de webpagina zelf. <head> <style> body { background-color: linen; } CSS code: h1 { color: maroon; margin-left: 40px; } </style> </head> Let wel de opmaak werkt alleen op dit html-document! Inline style Inline stijlen geleden alleen voor dat ene element. Hiervan maak je gebruik mocht er zich een bijzondere uitzondering voordoen. <h1 style="color:blue;margin-left:30px;">this is a heading.</h1> CSS code: 35 Websiteontwikkeling HTML 5 & CSS

38 CSS3 <!DOCTYPE html> <html> <head></head> <body> <h1>test CSS</h1> <p>alinea</p> </body> </html> body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } CSS code: p { font-family: "Times New Roman"; font-size: 20px; } Opdracht 52: Opdracht 53: Opdracht 54: Neem de code uit bovenstaande tabel over. En zorg ervoor dat alle css-code als inline-styl wordt toegepast. Noem het bestand opdracht_01.html. Neem de code uit bovenstaande tabel over. En zorg ervoor dat alle css-code als internal-styl wordt toegepast. Noem het bestand opdracht_02.html. Neem de code uit bovenstaande tabel over. En zorg ervoor dat alle css-code als external-styl wordt toegepast. Noem het bestand opdracht_03.html. Websiteontwikkeling HTML 5 & CSS 36

39 CSS3 Selectoren In het voorgaande stuk heb je al wat css-code gezien, maar hoe is deze nu opgebouwd? Of met andere woorden wat is de synatx. Bij css is de code als volgt verdeeld: SELECTOR { DECLARATIE; DECLARATIE; } Uitleg: CSS code: body { background-color: #000000; color: yellow; } De selector geeft aan welke html element opmaak krijgt. En de Declaratie geeft aan wat voor opmaak. In bovenstaande tabel is body de selector (is ook html element). De selector wordt gevolgd door twee krullendenhaakjes {}. Declaratie Alle declaratie wordt altijd tussen de twee krullendenhaakjes geplaatst. Voor een betere leesbaarheid springt de declaratie vier spaties of één tab in. Elke declaratie eindigt altijd met het puntkommateken! De declaratie bestaat weer uit twee onderdelen die door de dubbelepunt van elkaar gescheiden worden. PROPERTY: VALUE; Property is de eigenschap van de opmaak. In bovenstaand voorbeeld zijn dit Elke declaratie eindigt altijd met het puntkommateken! Element selector Id selector Class selector Syntax 37 Websiteontwikkeling HTML 5 & CSS

40 CSS3 Div Yyy <div> </div> CSS code Deze Mercedes is <div>kleiner dan</div> deze Volvo. div { display: block; } Opdracht 55: Tekst klein geschreven. Websiteontwikkeling HTML 5 & CSS 38

41 CSS3 Margin, border en padding Achtergrond Yyy <div> </div> CSS code Deze Mercedes is <div>kleiner dan</div> deze Volvo. div { display: block; } Opdracht 56: Tekst klein geschreven. Randen Yyy Border Style <div> </div> CSS code div { display: block; } Opdracht 57: Tekst klein geschreven. Kleuren Yyy 39 Websiteontwikkeling HTML 5 & CSS

42 CSS3 <div> </div> CSS code div { display: block; } Opdracht 58: Tekst klein geschreven. yyy Yyy <div> </div> CSS code Opdracht 59: Tekst klein geschreven. Websiteontwikkeling HTML 5 & CSS 40

43 CSS3 Lettertype Het is nu mogelijk om gebruik te maken van andere letter types dan de standaard voorgeschreven lettertypes. Zelfs zonder dat de gebruiker het bewuste lettertype geïnstalleerd moet hebben. Dit doe je met regel. Property TTF/OTF fonts 9.0* WOFF fonts SVG fonts Not supported 4.0 Not supported EOT fonts 6.0 Not supported Not supported Not supported Not supported * Werkt alleen als het font wordt ingesteld als "installable". Je ziet dus dat vanaf IE 9 het woff type wordt ondersteund door alle webbrowsers. Dit lettertype valt dus ook aan te raden. Het is niet moeilijk om bijvoorbeeld ttf om te zetten naar eot of woff. Lettertype toevoegen Je moet gebruiken om de naam te verzinnen voor je lettertype (font-family) en src voor de locatie van het lettertype. Vervolgens koppel je d.m.v. font-family dat lettertype aan een bepaalde divisie of class. Als je een lettertype alleen in ttf formaat hebt kun je op de website deze heel gemakkelijk omzetten naar een woff bestand. Lettertypes kun je onder anderen downloaden van CSS { font-family: mijneigenlettertype; } src:url('betsandsnaam.woff'); div { } font-family: mijneigenlettertype; 41 Websiteontwikkeling HTML 5 & CSS