Les 1a: Downloaden en instellen van software Software gebruik

Les 1a: Downloaden en instellen van software Software gebruik Eisen computer Deze e-cursus heb ik geschreven voor gebruikers van een Windows computer. Zelf gebruik ik voor deze cursus Windows 7. Mocht je niet in het bezit zijn van Windows, maar heb je bijvoorbeeld Mac, dan houdt het in dat sommige stukken wat ingewikkelder zijn. Voor Mac gebruikers zal ik zoveel mogelijk alternatieve software geven. Echter geef ik je geen aanvullende ondersteuning voor de software zelf. Gebruik van software Er zijn veel verschillende programma’s op de markt om je website mee te maken. Zo zijn er veel programma’s waarin al het werk voor je gedaan wordt. De meest populaire in deze categorie zijn Microsoft Frontpage en Adobe Dreamweaver. Prima software voor mensen die geen websites kunnen bouwen, maar niet wat een webontwikkelaar gebruikt. Het grote voordeel en tevens nadeel van programma's als Adobe Dreamweaver en Microsoft Frontpage, is dat de code door het programma wordt gegenereerd. Aangezien we in deze e-cursus leren om een website te bouwen is dat niet verstandig. Software die codes voor je genereren doen het nooit volledig naar wens, bovendien zul je er uiteindelijk niks van snappen. Wat dan wel? In principe is het mogelijk om je website te bouwen vanuit kladblok (aanwezig op elke computer). Aangezien kladblok maar weinig snufjes voor webontwikkelaars bevat, zou je jezelf tekort doen met Kladblok. In plaats van Kladblok, kiezen we voor een iets uitgebreidere versie van Kladblok, namelijk Notepad++ (voor Mac gebruikers raad ik Abtana Studio aan). Notepad++ Notepad++, vertaald "Kladblok++" is een ideale tekstverwerker voor onder anderen webontwikkelaars. De software bevat ondermeer regelnummeraanduiding, codemarkering en referenties voor de desbetreffende programmeertaal. Ook zijn er tal van plug-ins voor Notepad++, die het nog handiger maken om je website te bouwen in Notepad++.

Downloaden van Notepad++ In dit hoofdstuk laat ik je uitgebreid zien hoe je Notepad++ kunt downloaden en installeren. 1. Ga naar www.notepad-plus-plus.org.

2. Klik aan de linkerkant op download.

3. Vervolgens klik je op "Notepad++ Installer" (onder de download knop). 4. Sla het op een plek op waar je het bestand terug kunt vinden of open het direct. 5. Eventueel kun je het programma ook rechtstreeks downloaden via de volgende link: http://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exe

Notepad++ installeren 1. Open het bestand dat je gedownload hebt. 2. Selecteer "Nederlands" als taal en klik op OK.

3. Klik op volgende.

4. Ga akkoord met de voorwaarden.

5. Behoud de standaard installatiemap en klik vervolgens op volgende.

6. Behoud de standaard instellingen en klik op volgende.

7. Klik op "Create Shortcut on Desktop" en klik op installeren.

8. Wacht tot het programma is geïnstalleerd.

9. Klik op Voltooien.

Notepad++ gebruiken en plug-ins installeren Notepad++ staat nu op je computer en het scherm staat (als het goed is) nu voor je neus. Is dit niet het geval? Klik dan op het icoontje van Notepad++ op je bureaublad.

Je zou het volgende scherm in beeld moeten hebben:

Zoals je ziet lijkt Notepad++ veel op kladblok, maar is het net iets uitgebreider. Voordat we gebruik gaan maken van Notepad++, gaan we eerst een aantal plug-ins installeren. Voor Notepad++ zijn veel plug-ins beschikbaar die diverse functionaliteit bevatten. De plug-ins die we nu gaan installeren zijn: ·

Light Explorer

·

NPP-FTP

Dit doen we als volgt: 1. Klik op Plugins -> Plugin manager -> Show Plugin Manager 2. Ga naar het tabblad "Available". 3. Vink "Explorer" en "NppFTP" aan. Mochten deze er niet bij staan, dan zijn ze bij de installatie al geïnstalleerd. Vink dan alleen aan wat je wel kunt vinden.

4. Klik op "Install". De plug-ins worden nu gedownload en geïnstalleerd. 5. Om de installatie van de plugins af te ronden, moet Notepad++ herstart worden, klik op "Ja" bij het volgende scherm:

6. Notepad++ is opnieuw opgestart en je hebt nu de juiste plug-ins op je computer. Klik op Plugins -> Explorer -> Explorer, om de Explorer plug-in te activeren. 7. Op de volgende afbeelding zie je nu de "Explorer" plug-in aan de linkerkant:

Je werkomgeving In een aantal lessen van deze e-cursus zit een onderdeel "Probeer het zelf". Hierin vraag ik je om de stof die je geleerd hebt direct in de praktijk te brengen. Omdat je niet alles meteen kunt onthouden, vraag ik je om elke opdracht apart op te slaan in een map. De plek waar je websites wordt opgeslagen noemen we de werkomgeving. In dit onderdeel gaan we de werkomgeving opzetten voor je opdrachten. 1. Ga naar Start -> (Deze) Computer

2. Kies de C: Schrijf 3. Maak een nieuwe map aan (Rechtermuisknop > Nieuw > Map) 4. Noem de map "Lessen websites bouwen" 5. Open de map "Lessen websites bouwen" 6. Maak hierin 7 mappen "Opdracht 1", "Opdracht 2", "Opdracht 3" enzovoorts.

7. Ga naar Notepad++ en open de map "Opdracht 1" in de Explorer plug-in (aan de linkerkant van Notepad++).

Voilá! Je werkomgeving is klaar. De map "Opdracht 1" heb je nodig in les 1b, hierin maak je de eerste opdracht.

Les 1b: Maken van je eerste webpagina Internetbrowsers Een browser is het programma op je computer waarmee je websites kunt bezoeken en bekijken. Enkele populaire browsers zijn: Internet Explorer, Chrome, Firefox, Safari en Opera. De browser zet een bewerkbare code om in een webpagina, de bewerkbare code bevat instructies. De instructies die je aan de browser geeft zijn geschreven in HTML. HTML staat voor Hyper Text Markup Language.

De opbouw Hoe ziet de opbouw van een webpagina er uit? In deze les ga ik in op de opbouw en de structuur van een webpagina, deze is voor elke webpagina hetzelfde is. Met opbouw bedoel ik de code die achter een webpagina schuilt. Achter iedere pagina schuilt namelijk een broncode die instructies aan je browser geeft. In deze instructies staat wat het gedrag is van de pagina en hoe de pagina er uit moet gaan zien. Wist je dat je in elke browser de broncode kunt bekijken van de huidige pagina? Bij de meeste browsers doe je dit door met je rechtermuisknop op de pagina te klikken en vervolgens op "(Pagina)bron weergeven" te klikken.

Hieronder zie je de basis opbouw van een webpagina:

01.

02.

03.

Dit is de pagina titel

04.

05.

06. 07. 08.

Dit is de zichtbare inhoud van de pagina.

De code die je hierboven ziet is een HTML (HyperText Markup Language) code.

Tags HTML code bestaat uit verschillende tags in een boomstructuur. Elke tag begint met het "kleiner-dan" (<) teken en eindigt met "groter-dan" (>) teken. Tussen het "kleiner-dan"- en "groter-dan" (< en >) teken staat de naam van de tag, bijvoorbeeld . Binnen de tags kun je tekst typen of weer nieuwe tags openen en sluiten. Dit kan oneindige niveaus diep. Tags openen en sluiten Een tag wordt gesloten met een "slash" teken na het "kleiner-dan" (<) teken. Zo zie je in het bovenstaande voorbeeld de tag title die geopend wordt met en gesloten wordt met . De opbouw Elke pagina wordt geopend met en gesloten met . Binnen de html-tag worden alle elementen opgenomen. Met uitzondering van . Wat is leg ik je in deze e-cursus niet uit, dit is niet van belang. Zoals ik eerder vertelde kun je binnen tags weer nieuwe tags openen. Binnen de tag kunnen er echter maar 2 verschillende nieuwe tags geopend worden, namelijk head en body.

Head De tag bestaat vooral uit onzichtbare dingen zoals META code voor zoekmachines, de titel, stylesheets en javascriptbestanden en -codes. Om het niet te ingewikkeld voor je te maken, heb ik alleen de titel opgenomen (). De tekst binnen het title-tag verschijnt in het tabblad of venster die je hebt geopend. Body De <body> tag is de tag die alles op je pagina projecteert. In de body-tag vind je alle verschillende vormen van elementen (tags) die mogelijk zijn om je pagina alles te geven wat hij moet bevatten. Als voorbeeld heb ik binnen de body-tag een alinea gezet met een stukje tekst. Zou je de pagina openen, dan ziet je pagina er ongeveer zo uit: Probeer het zelf Om een beetje feeling met de code te krijgen, typ je de code over. Van overtypen leer je namelijk het snelst. Voer de volgende opdracht uit: 1. Open Notepad++ (voor Mac gebruikers Abtana Studio) 2. Klik op bestand → Nieuw bestand 3. Sla het bestand op, op de locatie Computer → C: (Lokale schrijf) → HoeBouwikEenWebsite → Klik rechterknop en vervolgens "Nieuw" → Map. Noem de map " Oefening 1" → Sla het bestand op als: "index.html" 4. Typ de code over 5. Klik in de menubalk op Uitvoeren -> Launch in… , afhankelijk van welke browser je hebt. Ik gebruik zelf Chrome ("Launch in Chrome"), maar als je Internet Explorer gebruikt, klik je "Launch in IE". 6. Experimenteer met de code door bijvoorbeeld de titel of de voorbeeld tekst aan te passen. Als alles goed is ziet je pagina er ongeveer hetzelfde uit als de afbeelding hierboven. Snap je het bovenstaande en ziet het er allemaal netjes uit, dan kun je verder met de volgende les. Klopt het niet? Lees deze les dan nog eens door totdat je resultaat goed is. Succes met deze opdracht! Les 2a: Hoe tags werken Over tags Wat is een tag? Een tag is een bepaald element dat eigenschappen geeft over de code of tekst die tussen het openen sluit tag staat. Zo is met alle tekst die tussen het openen sluit tag staat vetgedrukt. De tekst die hier staat is vetgedrukt Tags kun je door middel van attributen extra eigenschappen toekennen, waardoor het gedrag verandert. Hoe zat dat ook al weer? Elke tag begint met het "kleiner-dan" teken (<) en eindigt met "groter-dan" teken (>). Tussen het "kleinerdan"- en "groter-dan" teken (< en >) staat de naam van de tag. Bijvoorbeeld . Binnen de tags kun je tekst typen en/of weer nieuwe tags openen en sluiten. Tags openen en sluiten Het sluiten van een tag is bijna hetzelfde als het openen van een tag. Om de tag te sluiten gebruik je een "slash" teken na het "kleiner-dan" teken (</). Als we de tag als voorbeeld nemen gebruik je om de tag te openen en om de tag te sluiten. Moeten alle tags gesloten worden? Voor bijna alle tags geldt dat je ze ook weer moet sluiten. Er zijn echter ook een aantal tags die een uitzondering hebben op de bovenstaande openen sluitregel. Dit zijn tags waar je geen tekst tussen kunt typen, of de opmaak van de tekst niet mee kan veranderen. Enkele voorbeelden zijn: Zelfsluitende tags Uitleg Een enter, ook wel "break rule" <hr /> Horizontale lijn, ook wel "horizontal rule" <input /> Invoerveld, ook wel "input field" <img /> Afbeelding, ook wel "image". Bij de bovenstaande tags is het onmogelijk om een tekst tussen de openen sluittag te typen. Dit is ook niet raar, want tekst tussen een afbeelding zou een beetje vreemd zijn. Ook voor een "enter" zou het raar zijn om er tekst tussen te typen, want een enter is gewoon een nieuwe regel. De bovenstaande tags worden niet op een normale manier gesloten, ze maken gebruik van een zelfsluitende tag. Een zelfsluitende tag schrijf je bijna hetzelfde als een opentag, alleen voor het "groterdan" teken (>) komt nog een "slash" teken (/), bijvoorbeeld . Normale tag: Dit is een alinea Zelfsluitende tag: Attributen Vrijwel elke tag die je gebruikt kun je voorzien van een aantal extra optie. Dit noem je attributen. Stel dat je de tekst binnen een tag (alinea) rechts zou willen uitlijnen, dan gebruik je het attribuut "align". Omdat we de tekst rechts uit willen lijnen, moeten we "align" een waarde geven. De waarde in dit geval is het Engelse woord "right" (wat voor rechts staat). De attributen die je wilt gebruiken moet je in het opentag plaatsen. Dit gebeurt na de naam van de tag, gevolgd door een spatie, waarna de attribuut met waarde volgt. Een voorbeeld van een rechts uitgelijnde alinea: Dit is een rechts uitgelijnde alinea De opbouw van een attribuut is vrij eenvoudig. Je gebruikt de attribuutnaam bijvoorbeeld "align" gevolgd door een is-teken (=), dubbele aanhalingsteken (") openen, de waarde van het attribuut (in dit geval "right") en als laatste dubbele aanhalingsteken (") sluiten. Bijvoorbeeld align="right" of href="http://www.google.nl". LET OP: In sommige broncodes zul je nog wel eens attributen zonder aanhalingstekens tegenkomen, of worden er enkele aanhalingstekens (‘) gebruikt. Ik raad je aan om dit niet te doen, dit is een verouderde stijl en kan in de toekomst in browsers verdwijnen. Het zou jammer zijn als je de website die je gemaakt hebt totaal moet verbouwen, omdat je geen zin had om dubbele aanhalingstekens te gebruiken. Tot zover de uitleg over tags, in het volgende hoofdstuk zal ik meer in gaan op de verschillende tags die er zijn en hoe je ze kunt gebruiken. Probeer het zelf Voer de volgende opdracht uit: 1. Maak net als in je eerste opdracht een bestand aan met de naam "index.html" maar sla deze dit keer op in de map "Opdracht 2". 2. Gebruik de basis structuur uit les 1b. 3. Maak 3 verschillende alinea"s door middel van de tag. 4. Zorg ervoor dat elke alinea anders uitgelijnd wordt, met het "align" attribuut. Gebruik dewaarden "left", "center" en "right". 5. Bekijk het in je browser door de preview functie in Notepad++ te gebruiken: Klik in de menubalk op Uitvoeren -> Launch in… , afhankelijk van welke browser je hebt. Ik gebruik zelf Chrome ("Launch in Chrome"), maar als je Internet Explorer gebruikt, klik je "Launch in IE". Les 2b: Verschillende soorten tags Alinea’s en breaks Alle teksten die we in HTML code typen worden achter elkaar geplakt. Of we nou spaties, enters of tabs in de code zetten, je zult merken dat het niets uit maakt. Zo kunnen we de code overzichtelijk houden. Als alternatief van de de enter-toets (om nieuwe regels te kunnen zien), maken we gebruik van de tag (break rule, ook wel nieuwe regel) en de (paragraph tag) om een nieuwe alinea te creëren. Hieronder een voorbeeld: 01. Wat is Lorem Ipsum? 02. Lorem Ipsum is slechts een proeftekst uit het drukkerij- en 03. zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze 04. bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een 05. zethaak met letters nam en ze door elkaar husselde om een 06. font-catalogus te maken. Het heeft niet alleen vijf eeuwen 07. overleefd maar is ook, vrijwel onveranderd, overgenomen in 08. elektronische letterzetting. Het is in de jaren "60 populair 09. geworden met de introductie van Letraset vellen met Lorem 10. Ipsum passages en meer recentelijk door desktop publishing 11. software zoals Aldus PageMaker die versies van Lorem Ipsum 12. bevatten. 13. 14. Waarom gebruiken we het Het is al 15. geruime tijd een bekend gegeven dat een lezer, tijdens het 16. bekijken van de layout van een pagina, afgeleid wordt door 17. de tekstuele inhoud. Het belangrijke punt van het gebruik 18. van Lorem Ipsum is dat het uit een min of meer normale 19. verdeling van letters bestaat, in tegenstelling tot 20. "Hier uw tekst, hier uw tekst" wat het tot min of meer 21. leesbaar Nederlands maakt. Veel desktop publishing pakketten 22. en web pagina editors gebruiken tegenwoordig Lorem Ipsum als 23. hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" 24. ontsluit veel websites die nog in aanbouw zijn. Verscheidene 25. versies hebben zich ontwikkeld in de loop van de jaren, soms per 26. ongeluk soms expres (ingevoegde humor en dergelijke). Als je de bovenstaande code in een webpagina zou plaatsen zou het er al volgt uit zien: Spaties Zoals eerder aangegeven worden alle teksten in HTML netjes achter elkaar geplakt, totdat er een volgende tag volgt. Voor spaties geldt dus ook dat als je 10 spaties achter elkaar zet, je er maar een ziet. Wil je toch meer dan één spatie achter elkaar? Gebruik dan de ‘non-bracking-space‘ code, namelijk: . Zorg ervoor dat je dit altijd opent met het "en"-teken (&) en sluit met een puntkomma (;). Deze tekst heeft heel veel spaties. Dit geeft het volgende resultaat: Kopteksten Kopteksten zoals je ze in Microsoft Word kent, mogen niet in je website ontbreken. Hiervoor gebruiken we de heading tags: <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h5> De bovenstaande code geeft het volgende resultaat: Zoals je in het bovenstaande voorbeeld kunt zien, is <h1> de grootste koptekst en <h6> de kleinste koptekst. Ik raad je aan om zo min mogelijk niveaus over te slaan. Hiermee bedoel ik dat je van <h1> naar <h2> gaat en niet in eens naar <h4>. Dit heeft te maken met de vindbaarheid in zoekmachines. Zoekmachines zoals Google hechten veel waarde aan een geldige code. Bovendien vinden ze een <h1> belangrijker dan een <h6> koptekst. Ben je niet tevreden met de grootte van je kop dan kun je de grootte wijzigen. Hoe dit werkt, leg ik je uit in les 4. Basis opmaak tags Graag wil ik je kennis laten maken met de basis opmaaktags. Deze opmaaktags zijn relatief makkelijk om te onthouden. TAGNAAM CODE UITKOMST strong Deze tekst is dikgedrukt Deze tekst is dikgedrukt em Deze tekst is cursief Deze tekst is cursief u Deze tekst is onderstreept Deze tekst is onderstreept strike <strike>Deze tekst is doorgestreept</strike> Deze tekst is doorgestreept sub Deze tekst is in subscript Deze teks t i s i n s ubs cri pt sup Deze tekst is in superscript Deze teks t i s i n s upers cri pt Het wordt afgeraden om de tag te gebruiken voor het onderscheiden van stukken tekst. Dit komt omdat links ook vrijwel altijd zijn onderstreept. Hierdoor raken jouw bezoekers snel verward. Daarom raad ik je aan om alleen of te gebruiken om stukken tekst te onderscheiden. In les 5 zal ik je meer uitleg geven over de werking van links. Natuurlijk is het ook mogelijk om meerdere tags in elkaar te gebruiken, dit noem je nestelen (in het Engels "nested tags"). Gebruik bijvoorbeeld de volgende code: deze tekst is vet, cursief en onderstreep Dit geeft het volgende resultaat: Bij het gebruiken van meerdere tags in elkaar moet je opletten dat je de tags op de juiste volgorde weer afsluit. Dit doe je door de sluit tag met de open tag te spiegelen. Je opent hierboven als eerst, dan sluit je die als laatst, vervolgens open je het tag, deze sluit je als een na laatste. Als laatste open je de tag, dus sluit je die als eerst, enzovoorts. Als laatste voorbeeld geef ik je een zin die gedeeltelijk meerdere tags in elkaar heeft. Dit geeft je iets meer duidelijkheid over de volgorde van openen en sluiten: De Vette Italiaan, werd in een tekst onderstreept. De bovenstaande code geeft het volgende resultaat: Probeer het zelf Voer de volgende opdracht uit: 1. Maak een nieuwe pagina, gebruik hiervoor de basisstructuur uit les 1b. 2. Maak in deze pagina een tekst met de <h1> koptekst "Alles over tags". 3. Typ een aantal alinea’s door middel van de tag. Gebruik boven elke alinea een koptekst met <h2>. 4. Markeer gedeeltes in de tekst vet, schuin gedrukt en/of onderstreept. Gebruik in stukken tekst meerdere tags in elkaar. 5. Scheid een aantal zinnen in de tekst met en gebruik de om in sommige stukken meerder spaties naast elkaar te zetten. Les 3: Tabellen Wat is een tabel? Voordat ik laat zien hoe je een tabel kan maken moet je eerst begrijpen hoe een tabel in elkaar zit. Een tabel heeft rijen en elke rij heeft kolommen. Als je de tabel wat geavanceerder wilt maken kun je deze rijen met kolommen plaatsen in een header, body of footer. De header is de kop van de tabel, de body is het lichaam (de inhoud) en de footer is de voet van het tabel. Klinkt best logisch, toch? Tags met betekenis Omdat een tabel best lastig is als beginner geef ik je graag nog wat betekenissen: TAG BETEKENIS OMSCHRIJVING <thead> Table header Het hoofd van de tabel, ook wel kolomnaam. <tbody> Table body Het lichaam of de inhoud van de tabel. <tfoot> Table footer De voet van de tabel. <tr> Table Row De rij in de tabel. <td> Table Data De kolom of cel in de rij (de data). <th> Table Head Bijna hetzelfde als een kolom alleen deze gebruik je binnen thead. De tags <tr> en <td> zijn de lastigste tags om te onthouden. Het is iets wat je in het begin misschien vaak zal verwarren. Probeer deze 2 tags goed te onthouden door de bovenstaande betekenissen op je in te laten werken. Als je het bovenstaande helemaal begrijpt, gaan we hier stap voor stap op doorborduren. Allereerst moet je weten dat een tabel dient te beginnen met <table> en te eindigen met</table>. Simpele tabel, met een rij Stel dat je een simpele tabel wilt maken (zonder heading, body en footer) waarin vier kolommen/cellen in een rij zitten, dan zou je deze code gebruiken voor je tabel: 01. 02. <table border="1"> <tr> 03. <td>Kolom 1, Rij 1</td> 04. <td>Kolom 2, Rij 1</td> 05. <td>Kolom 3, Rij 1</td> 06. <td>Kolom 4, Rij 1</td> 07. 08. </tr> </table> Deze code geeft het volgende weer: Simpele tabel, met meer rijen De volgende code is een tabel met 3 rijen, waarin elke rij 3 kolommen bevat: 01. 02. <table border="1" width="100%"> <tr> 03. <td>Kolom 1, Rij 1</td> 04. <td>Kolom 2, Rij 1</td> 05. <td>Kolom 3, Rij 1</td> 06. <td>Kolom 4, Rij 1</td> 07. </tr> 08. <tr> 09. <td>Kolom 1, Rij 2</td> 10. <td>Kolom 2, Rij 2</td> 11. <td>Kolom 3, Rij 2</td> 12. <td>Kolom 4, Rij 2</td> 13. </tr> 14. <tr> 15. <td>Kolom 1, Rij 3</td> 16. <td>Kolom 2, Rij 3</td> 17. <td>Kolom 3, Rij 3</td> 18. <td>Kolom 4, Rij 3</td> 19. 20. </tr> </table> Deze code geeft het volgende weer: Het bovenstaande is slechts een herhaling van de vorige tabel, alleen met meer rijen. Zo zie je dat de <tr> tag vaker langs komt, maar de inhoud vrijwel steeds hetzelfde blijft. Uitgebreide tabel De volgende tabel code is een wat realistischer voorbeeld. Hierin maken we gebruik van de tags <thead>, <tbody> en <tfoot>, om een duidelijke kop en voet weer te geven. Dit doe je met de volgende code 01. <h1>Verkoopcijfers Top 5 auto"s 2012:</h1> 02. <table width="100%" cellspacing="0" cellpadding="1" border="1" 03. 04. 05. bordercolor="blue"> <thead> <tr> 06. <th align="left">Positie</th> 07. <th align="left">Merk</th> 08. <th align="right">Marktaandeel</th> 09. <th align="right">Aantal verkopen</th> 10. </tr> 11. </thead> 12. <tbody> 13. <tr> 14. <td>1</td> 15. <td>Volkswagen</td> 16. <td align="right">12,11%</td> 17. <td align="right">62.055</td> 18. </tr> 19. <tr> 20. <td>2</td> 21. <td>Renault</td> 22. <td align="right">8,74%</td> 23. <td align="right">44.629</td> 24. </tr> 25. <tr> 26. <td>3</td> 27. <td>Peugot</td> 28. <td align="right">8,01%</td> 29. <td align="right">46.306</td> 30. </tr> 31. <tr> 32. <td>4</td> 33. <td>Ford</td> 34. <td align="right">7,14%</td> 35. <td align="right">41.372</td> 36. </tr> 37. <tr> 38. <td>5</td> 39. <td>Opel</td> 40. <td align="right">7,07%</td> 41. <td align="right">41.355</td> 42. </tr> 43. </tbody> 44. <tfoot> 45. <tr> 46. <td colspan="3" align="right"> Totaal</td> 47. <td align="right"> 235.717</td> 48. </tr> 49. </tfoot> 50. </table> De bovenstaande code geeft het volgende resultaat: Nieuwe attributen Nieuw in het bovenstaande voorbeeld zijn de volgende attributen binnen de <table> tag: width="100%" cellspacing="0" cellpadding="0" border="0" Attribuut Uitleg Width Geeft de breedte van de tabel aan. Dit kan in percentages (van de pagina), maar ook in aantal pixels. Als je de breedte in percentages wilt opgeven, dan gebruik je achter het aantal een procentteken (%). Cellspacing De ruimte (in pixels) tussen elke cel of kolom. Cellpadding De ruimte (in pixels) vanaf de kant in de cel of kolom. Border De omlijning van de tabel (in pixels). 0 is onzichtbaar. Bordercolor De naam van de kleur in het Engels of een hexadecimale code voor kleur van de omlijning in de tabel. Verder kom je vaak het attribuut "align" in de <td> tag tegen. Dit regelt hoe de cel of kolom moet worden uitgelijnd. Het attribuut "align" kan zijn: left, center, right, justify of char. Align Uitleg left Tekst links uitlijnen right Tekst rechts uitlijnen center Tekst centreren justify Tekst uitgevuld uitlijnen char Uitlijnen op basis van een teken (laten we in deze e-cursus achterwegen) Als laatste kom je een belangrijk attribuut "colspan" in de <td> tag met de tekst "Totaal" tegen. Het "colspan" attribuut zorgt ervoor dat je kolom gefuseerd wordt met het aantal kolommen. De code colspan="3" wil zeggen: Laat deze kolom de lengte hebben van 3 kolommen. Dit zie je duidelijk terug in het voorbeeld bij "Totaal". Verder heb je ook nog het attribuut "rowspan", dit is bijna hetzelfde als "colspan" behalve dat "rowspan" de cel laat fuseren met een aantal rijen in plaats van kolommen. Deze kom je verder niet tegen in dit voorbeeld. Probeer het zelf Voer de volgende opdracht uit: 1. 2. 3. 4. Maak de onderstaande tabel Hou rekening met de koptekst, de kop en de voet van de tabel. Zorg ervoor dat alle data goed wordt uitgelijnd, zoals op de afbeelding. Let op de ruimte vanaf de kant van de cel en de ruimte tussen de cellen. Les 4: Lettertypes Over lettertypen In deze les ga ik het hebben over lettertypen (ook wel fonts genoemd). Je leert hoe je een andere lettertype kunt gebruiken en hoe je de grootte en de kleur kunt aanpassen. Het lettertype wijzigen gebeurde in een oude versie van HTML met de tag. Echter is deze methode is verouderd en gebruiken we deze daarom niet meer. Vanaf HTML 4.0 worden lettertypen gewijzigd met het "style" attribuut. Het "style" attribuut kun je in bijna ieder willekeurige tag gebruiken (waaronder headings, tables enzovoorts). In deze les zullen we voor het aanpassen van fonts de tag gebruiken. Voel je vrij om met andere tags te experimenteren. Span tag De tag is een tag die eigenlijk niet veel doet, behalve zich als "inline" (in lijn met tekst) te gedragen. De eigenschappen van een "span" tag kun je eigenlijk volledig aanpassen door middel van het "style" attribuut. Het "style" attribuut zegt het eigenlijk al, namelijk stijlen. Een tag wordt dus over het algemeen alleen gebruikt om te stijlen. Zoals ik al eerder zei: tag "inline" is, dit is ideaal te gebruiken voor het aanpassen van teksten. Aanpassen van het lettertype Hieronder een voorbeeld om de tekst aan te passen naar het lettertype "Arial": Deze zin is in Arial In de bovenstaande code zie je in de stijleigenschap "font-family" staan. De naam "font-family" is niet met toeval gekozen. Het is namelijk mogelijk om een gehele familie op te geven. In het volgende voorbeeld maken we gebruik van een familie: Font familie met Georgia als eerste voorkeur In het bovenstaande voorbeeld zie je de familie "Georgia, Arial, "Times New Roman"". Dit wil zeggen: Wanneer Georgia niet aanwezig is, dat Arial de eerst volgende voorkeur heeft. Mocht die ook niet bestaan dan wordt "Time New Roman" gebruikt. Valt het je op dat "Times New Roman" is voorzien van enkele aanhalingstekens? Dit komt omdat "Times New Roman" een lettertype is dat spaties bevat. Fontnamen die spaties bevatten worden voorzien van enkele aanhalingstekens. Aangepaste fonts Bij het aanpassen van fonts moet je er rekening mee houden dat het gekozen font aanwezig is op de computer van de bezoeker. Het downloaden van een aangepaste font is dus niet echt bepaald verstandig. Omdat fonts aanwezig moet zijn op de computer van de bezoekers, wordt er meestal een uitgebreide "font-family" opgegeven. Echter zal het zelden voorkomen dat standaard fonts als Arial, Verdana of “Times New Roman” niet op de computer van de bezoeker voorkomt, deze zijn tegenwoordig op vrijwel elke computer aanwezig. Gezien de beschikbaarheid van fonts, raad ik je aan om alleen standaard fonts te gebruiken. In een andere cursus zal ik je de mogelijkheid geven om een aangepaste font in je pagina "in te sluiten" in je pagina , zodat het font niet aanwezig hoeft te zijn op de computer van je bezoeker. Tekstkleur Het aanpassen van de tekstkleur is vergelijkbaar met het aanpassen van het lettertype. We gebruiken net als bij het lettertype het attribuut "style" binnen een tag. Om de tekstkleur aan te passen in de kleur rood, gebruiken we de volgende code: Deze tekst is rood Het resultaat hier van is: Wil je de tekst blauw hebben in combinatie met een Verdana lettertype, dan gebruik je de volgende code: Deze tekst is blauw, met lettertype Verdana. Zoals je ziet, worden meerdere stijleigenschappen gescheiden door een puntkomma (;). Het resultaat hier van is: Om een tekstkleur op te geven gebruik je de Engelse naam van de kleur. Ook is het mogelijk om een Hexadecimale RGB kleuren code op te geven. Bijvoorbeeld "color: #00FF00" wat voor groen staat. Hoe de hexadecimale RGB code precies werkt, leg ik je uit in een andere cursus. Tot die tijd kun je gebruik maken van onder andere de volgende kleuren: red yellow blue darkblue lightblue purple pink orange black white grey green darkgreen Tekstgrote Ook de tekstgrootte kun je aanpassen door middel van het style attribuut. De grootte kun je wijzigen met de stijleigenschap: "font-size". Om je tekst 36 pixels groot te maken, gebruik je de volgende code: Deze tekst is 36 pixels groot. Dit geeft het volgende resultaat: Uiteraard kun je ook deze opmaak combineren met kleur en lettertype. Belangrijk is dat je elk stijleigenschap met een puntkomma (;) scheidt. Bijvoorbeeld: "color: green; font-family: Arial; font-size: 12px;". Probeer het zelf Voer de volgende opdracht uit: 1. 2. 3. 4. Experimenteer met verschillende lettertypen en lettergrootte. Bij gebrek aan inspiratie gebruik je mijn onderstaande voorbeeld. Gebruik verschillende kleuren. Probeer de opmaak door middel van het "style" attribuut ook toe te passen op tags zoals <h1> en . Les 5: Links Over links Om tussen verschillende pagina’s te kunnen switchen gebruik je hyperlinks, ook wel links genoemd. Een link kun je herkennen aan een onderstreept stukje tekst, maar ook afbeeldingen en andere elementen kunnen gelinkt worden. Hoe je verschillende pagina’s aan elkaar kunt linken, ontdek je in deze les. In deze les maken we onderscheid tussen de volgende links: Interne Links Externe Links Anchor Links Interne Links Een interne link is een link die verwijst naar een pagina binnen dezelfde website. Bijvoorbeeld van de "Over ons" pagina naar de "Contact" pagina. Hieronder een voorbeeld van een eenvoudige link: <a href="contact.html" rel="nofollow">Contact</a> In het bovenstaande voorbeeld is het "href" attribuut de linkverwijzing, in dit geval "contact.html". Tussen de <a> tag (Contact) vind je de tekst van de link. Als je de bovenstaande tekst in een simpele webpagina zou gebruiken, zou dit het resultaat zijn: In het bovenstaande voorbeeld dient contact.html in dezelfde map te staan als de pagina waarop de link zich bevindt. Het pad naar de link is in dit geval een relatief pad. De naam "relatief pad" heeft zich te danken aan het feit dat we uitgaan van de locatie van het bestand waarin de link staat. Een voorbeeld van het gebruik van relatieve paden: Het bestand waarin een link is opgenomen heet "relatievelink.html". In de map waar het bestand "relatievelink.html" staat, staat nog een map die heet "anderemap". In "anderemap" staat het bestand "contact.html". We willen linken naar dit bestand door middel van een relatief pad. Een relatief pad vanuit relatievelink.html is dan: "anderemap/contact.html" De code is als volgt: <a href="anderemap/contact.html" rel="nofollow"> Deze link verwijst naar contact.html die in anderemap staat </a> Zoals je ziet is het slash-teken een scheidingsteken om mappen en/of bestanden te scheiden. Wil je vanuit "contact.html" die in "anderemap" zit weer terug willen linken naar de "relatievelink.html" die een map terug staat? Gebruik dan je onderstaande code: <a href="../relatievelink.html" rel="nofollow"> Deze link gaat weer terug naar relatievelink.html </a> In het bovenstaande voorbeeld worden 2 punten achter elkaar gebruikt om aan te geven dat we graag een map terug willen. Stel dat we 3 mappen terug willen, dan zou de code er zo uitzien: <a href="../../../pagina.html" rel="nofollow"> Deze link gaat naar pagina.html (drie mappen terug) </a> Tot slot kun je ook nog een enkele punt gebruiken om aan te geven dat dit over de huidige map gaat. Aangezien de browser er standaard vanuit gaat dat het over de huidige map gaat, is het gebruik van de enkele punt (.) niet nodig. Een voorbeeld code: <a href="./contact.html" rel="nofollow"> Deze link verwijst naar contact.html in de huidige map </a> Deze code kun je ook op de volgende manier schrijven: <a href="contact.html" rel="nofollow"> Deze link verwijst naar contact.html in de huidige map </a> Beide codes linken naar contact.html die in de huidige map staat. Om het jezelf in het begin niet te moeilijk te maken, raad ik je aan om in het begin alle .html bestanden in dezelfde map te plaatsen. Externe Links In sommige gevallen wil je in je sites ook links opnemen naar andere websites. Bijvoorbeeld om interessante content aan je bezoekers te tonen. Links naar andere websites noemen we externe links. Om een link te plaatsen naar een bepaalde website, surf je naar de gewenste site en kopieer je het adres dat boven in de adresbalk staat. Vervolgens plak je het adres in de "href" attribuut van de link die je wilt plaatsen. Hieronder zie je een voorbeeld van een externe link die naar de contact pagina van Stichting Aap verwijst: <a href="http://www.aap.nl/contact.html" rel="nofollow"> Neem contact op met Stichting Aap </a> Zoals je ziet is een externe link relatief snel gepiept. Linkdoel Links worden standaard in hetzelfde tabblad geopend waarin de huidige pagina staat. Voor een interne link is dat prima, maar voor een externe link is dat een kwalijke zaak. Het is namelijk niet de bedoeling dat je de bezoekers van je eigen site kwijt raakt doordat je linkt naar een andere site, er is namelijk geen manier om terug te keren. Om te voorkomen dat je bezoekers kwijt raakt door te linken naar een externe website, kun je het attribuut "target" gebruiken. Het target attribuut geeft aan hoe de link geopend moet worden. De volgende code opent stichting Aap in een nieuw tabblad: <a href="http://www.aap.nl/contact.html" target="_blank" rel="nofollow"> Stichting Aap in een nieuw tabblad </a> Zoals je hierboven kunt zien hebben we de link voorzien van een "target" attribuut. De volgende opties zijn mogelijk bij het "target" attribuut: Target Uitleg _blank Opent de link in een nieuw tabblad. _self Opent de link in het huidige frame. _parent Opent de link in het frame die dit frame heeft geopend. _top Opent de link in het huidige tabblad. Framenaam De naam van het frame waarin de link geopend moet worden. Het target attribuut wordt oorspronkelijk gebruikt voor frames. Frames zijn echter achterhaald, waardoor je tegenwoordig alleen nog maar target="_blank" gebruikt. Bij het niet opgeven van het target attribuut wordt de link in hetzelfde tabblad geopend. Het is daarom niet nodig om alle target opties te onthouden. Anchors Een anchor (anker) is een verwijzing naar een bepaalde plek in de pagina. Met een link naar een anchor kun je snel inspringen naar een stuk tekst zonder dat de bezoeker hiervoor hoeft te scrollen. Stel dat je een pagina hebt die uit een grote lap tekst bestaat, gevolgd door contactgegevens. Omdat je bezoeker niet altijd interesse heeft om deze lange tekst te lezen, plaats je een anchor bij de contactgegevens. Vervolgens plaats je bovenaan de pagina een link die naar de "anchor" verwijst. Plaats je meerdere anchors? Zorg er dan voor dat je alle anchors een unieke naam geeft. Om te linken naar een anchor plaats je een link met een hekje (#) gevolgd door de naam van de "anchor". Gebruik in namen van anchors geen spaties. Wil je woorden scheiden, gebruik dan een liggend streepje (_) of een gewoon streepje (-). Om een anchor te plaatsen met de naam "info" gebruik je de volgende code: <a name="info" rel="nofollow"></a> De bovenstaande code zou je in het volgende voorbeeld kunnen gebruiken: <a name="info" rel="nofollow"></a> <h3> Contactinformatie </h3> Voor meer informatie neemt u contact op met: 06 12 345 678 email@hotmail.com Plaats vervolgens bovenaan de pagina de volgende link: <a href="#info" rel="nofollow"> Contact informatie</a> Soms kan het voorkomen dat je wilt verwijzen naar een specifieke alinea op een bepaalde pagina. Dit kun je doen door achter de link van de pagina een hekje (#) te plaatsen, gevolgd door de naam van de "anchor" die zich op de desbetreffende pagina bevindt. De volgende link verwijst naar de anchor "Geschiedenis" (artikel HTML) op Wikipedia: <a href="http://nl.wikipedia.org/wiki/Html#Geschiedenis" rel="nofollow"> Geschiedenis van HTML </a> Probeer het zelf Voer de volgende opdracht uit: 1. Maak gebruik van interne links door HTML bestanden in verschillende mappen te zetten en deze naar elkaar te linken zoals bij het onderdeel "Interne links". 2. Maak een externe link naar Google die in een nieuw tabblad opent. 3. Maak een pagina waarin anchors worden gebruikt. Het is belangrijk dat je hiervoor wat meer tekst op je pagina plaatst, zodat de pagina zichtbaar verspringt. Tekst kun je genereren met Lorem Ipsum: http://www.lipsum.com/. 4. Probeer eens te linken naar een willekeurige site (gevonden op Google) door het adres uit je adresbalk te kopiëren. Les 6: Opsommingen Verschillende soorten opsommingen en lijsten In HTML zijn verschillende soorten opsommingen en lijsten mogenlijk, namelijk: Unordered list (ongeordende lijst) Ordered list (geordende lijst) Definition list (definitie lijst) In deze les zal ik in gaan op de unordered- en de ordered list. De definition list wordt in deze cursus niet behandeld, omdat deze in de praktijk niet vaak gebruikt wordt. Unordered list De unordered list is een ongeordende lijst. De unordered list wordt opgemaakt met bijvoorbeeld bolletjes of blokjes, terwijl de ordered list wordt opgesomd met letters of cijfers. De unordered list kent 2 verschillende tags, namelijk: Tag Uitleg <ul> Deze tag geeft aan dat de unordered list begint. <li> Deze tag geeft aan dat een item (list item) begint Ik heb voor het gemak de begin letters dik gedrukt gemaakt, deze corresponderen met de tagnaam. Zo kun je makkelijk onthouden dat <ul> voor "unordered list" staat. Een simpele "unordered list" (ongeordende opsomming) typ je met de volgende code: <ul> <li>Appels</li> <li>Peren</li> <li>Bananen</li> <li>Kiwi's</li> </ul> De bovenstaande code geeft het volgende weer: Zoals je kunt zien is het vrij eenvoudig om een ongeordende lijst te maken. Wil je eventueel blokjes in plaats van bolletjes, dan maak je gebruik van het "style" attribuut. De volgende code geeft de opsomming blokjes in plaats van bolletjes: <ul style="list-style-type: square;"> <li>Appels</li> <li>Peren</li> <li>Bananen</li> <li>Kiwi's</li> </ul> Dit resulteert in het volgende: Met de stijleigenschap "list-style-type" in het "style" attribuut kun je eenvoudig de vormpjes van de opsomming veranderen. Enkele opties die je kunt gebruiken zijn: list-style-type: none; list-style-type: disc; list-style-type: circle; list-style-type: square; Let op dat je "list-style-type" maar één keer kunt gebruiken. Het is dus niet mogelijk om 2 verschillende vormpjes naast elkaar te zetten. Ordered list De "ordered list" is een geordende lijst, die niet met vormpjes begint maar met letters of cijfers. Ook de "ordered list" kent 2 verschillende tags, namelijk: Tag Uitleg <ul> Deze tag geeft aan dat de ordered list begint. <li> Deze tag wordt net als bij de unordered variant gebruikt en geeft aan dat een item (list item) begint Een voorbeeld van een geordende opsomming: <ol> <li>Stofzuigen</li> <li>Strijken</li> <li>Ramen lappen</li> <li>Kattenbak verschonen</li> </ol> Dit geeft het volgende weer: Het is je vast al opgevallen: Er zit maar weinig verschil tussen de code van een geordende- en een ongeordende lijst. Ook bij een geordende lijst kun je de tekens voor het item veranderen door "list-styletype" te plaatsen in de "style" attribuut. Zie het volgende voorbeeld: <ol style="list-style-type: upper-roman;"> <li> Stofzuigen </li> <li> Strijken </li> <li> Ramen lappen </li> <li> Kattenbak verschonen </li> </ol> De bovenstaande code geeft het volgende weer: Voor de geordende lijst geldt een ruime keuze uit verschillende soorten tekens: list-style-type: decimal; list-style-type: decimal-leading-zero; list-style-type: lower-roman; list-style-type: upper-roman; list-style-type: lower-greek; list-style-type: lower-alpha; list-style-type: lower-latin; list-style-type: upper-alpha; list-style-type: upper-latin; list-style-type: hebrew; list-style-type: armenian; list-style-type: georgian; list-style-type: cjk-ideographic; list-style-type: hiragana; list-style-type: katakana; list-style-type: hiragana-iroha; list-style-type: katakana-iroha; Subopsommingen Voor zowel de ordered- als de unordered list is het mogelijk om een subopsomming te maken. Dit doe je door een nieuwe opsomming in een listitem te zetten. Hieronder een voorbeeld: 01. 02. <ol> <li> Bier <ol style="list-style-type: lower-alpha;"> 03. <li> Pils </li> 04. <li>Bruinbier</li> 05. <li>Blondbier</li> 06. </ol> 07. </li> 08. <li> Whiskey <ol style="list-style-type: lower-alpha;"> 09. <li>Single malt</li> 10. <li>Blended</li> 11. </ol> 12. </li> 13. <li>Wijnen <ol style="list-style-type: lower-alpha;"> 14. <li>Rode wijn</li> 15. <li>Witte wijn</li> 16. <li>Rose</li> 17. 18. 19. </ol> </li> </ol> De bovenstaande code geeft de volgende opsomming: Het bovenstaand voorbeeld kan zowel met een ordered- als met een unordered list. In het voorbeeld hierboven zie je dat er een nieuwe <ol> tag wordt geopend binnen een <li> van de bovenliggende <ol>. Dit kan oneindig niveaus diep. Tot zover de uitleg over opsommingen. Probeer het gewoon eens uit en kijk wat je allemaal kan met de verschillende varianten lijsten. Mocht je vragen hebben dan hoor ik het graag. Probeer het zelf Voer de volgende opdracht uit: 1. Maak een boodschappenlijstje, door middel van een ongeordende lijst. Gebruik "disc" als list-styletype. 2. Maak een Top 5 van je vrienden en kennissen, doe dit door middel van een geordende lijst. 3. Maak een geordende lijst met een subopsomming. Zorg ervoor dat je voor de subopsomming een andere list-style-type gebruikt. Les 7: Afbeeldingen Over afbeeldingen Tot nu toe heb ik in deze e-cursus alleen saaie teksten behandeld. Elke aantrekkelijke pagina bevat achtergronden, logo's en afbeeldingen. Het is immers de bedoeling dat je uiteindelijk een mooie pagina krijgt. In deze les ga ik behandelen hoe we voorgrond- en achtergrondafbeeldingen kunnen gebruiken. Voorgrond afbeeldingen De eenvoudigste variant is de voorgrond afbeelding. De voorgrond afbeelding wordt getypt doormiddel van het <img /> tag. Opmerkelijk aan het <img /> tag is dat deze net als de (break rule) tag zelfsluitend is, aangezien je geen teksten kunt opmaken met het <img /> tag. De basis van de IMG tag is als volgt: <img /> Met alleen de bovenstaande code krijg je nog geen afbeelding. De <img> tag vereist 2 attributen namelijk "src" en "alt". Een simpel voorbeeldcode van het Google logo op "Children's Day" : <img src="http://www.google.com/logos/2013/childrens_day_2013-102 6007.3-hp.jpg" alt="Dit is het Google logo op Children's day 2013" /> Het "src" attribuut hierboven is de verwijzing naar de afbeelding. Het "alt" attribuut is een alternatieve tekst die verklaart wat de afbeelding in houdt. Daarnaast lezen zoekmachines over het algemeen de alternatieve teksten om je zo beter vindbaar te maken. Absoluut een belangrijk attribuut, dat vaak wordt onderschat. Naast deze 2 attributen is het mogelijk om de "width" (breedte) en "height" (hoogte) attributen op te geven. Persoonlijk stel ik deze nooit in, omdat de browser automatisch weet hoe groot de afbeelding is. Wil je de afbeelding verkleinen, dan raad ik je aan om de afbeelding zelf te verkleinen en niet met de "width" en "height" attributen. De kwaliteit van de afbeelding gaat hierdoor omlaag in sommige browsers. Mocht je dit toch willen, zorg er dan voor dat je de afmetingen in verhouding schaalt. De afbeelding is momenteel 507 (width) x 175 (height). Stel dat je de afbeelding 50% kleiner wil hebben, dan deel je dus beide waarden door 2. Dat is: 253,5 en 87,5. Aangezien halve getallen niet kunnen dien je deze af te ronden in dit geval. Dit wordt dan 254 en 88. Een voorbeeld code is dan: <img src="http://www.google.com/logos/2013/childrens_day_2013 -1026007.3-hp.jpg" width="254" height="88" alt="Dit is het Google logo op Children's day 2013" /> Hieronder een voorbeeld van een afbeelding die links wordt uitgelijnd: In de bovenstaande voorbeeldcodes wordt gebruik gemaakt van een absoluut pad. Dit is echter niet aan te raden, omdat we nu afhankelijk zijn van de site van Google. Mocht Google deze in de toekomst verwijderen, dan hebben we dus een probleem. Mocht je van plan zijn om deze afbeelding te gebruiken, maak dan een nieuwe map aan met de naam "images", waar je vervolgens de afbeelding in opslaat. Zorg er wel voor dat je de map aan maakt in dezelfde map als de map waar de HTML bestanden staan. Ook bij afbeeldingen kun je gebruik maken van relatieve paden: <img src="img/google_childrens_day.jpg" width="254" height="88" alt="Dit is het Google logo op Children's day 2013" /> Weet je niet meer precies hoe het zat met relatieve paden? Bekijk dan nog een keer het onderdeel "Interne links" uit les 5, waarin ik uitleg geef over interne links. Uitlijnen Het plaatsen van een afbeelding is hartstikke leuk, maar als deze niet goed wordt uitgelijnd, ziet het er nog niet uit. Voor het uitlijnen van de afbeelding maken we net als bij andere opmaak gebruik van het "style" attribuut. Om een afbeelding aan de linker kant uit te lijnen en de tekst er mooi om heen te laten lopen gebruik je de stijleigenschap "float" (wat staat voor drijven). Float kent twee opties namelijk "left" (links) en "right" (rechts). Hieronder een voorbeeld van een afbeelding die links wordt uitgelijnd: 01. <img src="http://www.telegraaf.nl/autovisie/autovisie_foto/artic le 02. 21272752.ece/binary/i/BMW+3+Serie+GT+Officieel+007.jpg" 03. style="float:left;" alt="Eerste beelden BMW 3 Serie GT" /> 04. 05. door redactie Autovisie 06. AMSTERDAM - De allereerste foto's van de BMW 3 Serie GT zijn inmiddels 07. opgedoken. De beelden tonen niet alleen de reguliere versie, maar ook 08. een variant met sportief M-bumperwerk. 09. 10. <h2>M Sports Package</h2> 11. De BMW 3 Serie GT vormt de derde carrosserievariant van de huidige 12. 3 Serie. Op het model valt een optioneel M Sports Package te 13. bestellen. Daarmee krijgt de auto naast agressiever bumperwerk ook 14. een subtiel M-logo, een aangepast onderstel en grotere wielen. Leuke 15. details van de 3 Serie GT zijn dat het model een boomerangvormige 16. uitsparing heeft in de voorste zijschermen en een subtiele 17. achterspoiler die in- en uitklapbaar is. Overeenkomstig met de 3 Serie 18. Sedan en de Touring zijn de twee nieren die in verbinding staan met de 19. voorste lichtunits. 20. 21. De 3 Serie GT, die onder de 5 Serie GT wordt gepositioneerd, 22. krijgt het motorenpalet van de huidige 3 Serie en wordt daarmee 23. onder meer leverbaar als 320i en de 335i zoals hier te zien op 24. de foto's. Meer informatie over de 3 Serie GT volgt spoedig. De bovenstaande code geeft het volgende resultaat: Zoals je ziet heb ik het volgende toegevoegd aan de <img> tag: style="float: left;" Wil je dat de afbeelding rechts wordt uitgelijnd? Verander "left" dan in right". Dit geeft het volgende resultaat: Wil je de afbeelding centreren? Dan wordt het een ander verhaal. Met de volgende code kun je de afbeelding centreren: <div style="text-align: center;"> <h1> De volgende afbeelding is gecentreerd. </h1> <img src="http://www.telegraaf.nl/autovisie/autovisie_foto/article21 272752.ece/binary/i/BMW+3+Serie+GT+Officieel+007.jpg" alt="Eerste beelden BMW 3 Serie GT" /> Hieronder is net als in het vorige voorbeeld ruimte voor tekst. </div> Dit geeft het volgende resultaat: De bovenstaande code is net een stukje anders. Er komt geen "style" attribuut voor in de <img> tag en bovendien zien we voor het eerst een <div> tag. Div staat voor division (divisie, sectie of blok). Een <div> tag is vergelijkbaar met een tag. Het grootste verschil is dat deze zich gedraagt als een blok in plaats van inline. Tags kun je naast elkaar typen in één lijn, terwijl <div> tags onder elkaar verschijnen. <div> tags kun je daarom ook voorzien van bijvoorbeeld een achtergrond. Achtergrond afbeeldingen Het grootste verschil tussen een voorgrond afbeelding en een achtergrond afbeelding, is dat je bij een achtergrond afbeelding tekst over de afbeelding kunt plaatsen. Bij een voorgrond afbeelding is dat namelijk niet zomaar mogelijk. In deze les geef ik (met uitzondering van alle andere voorbeelden) een keer de volledige broncode. Om je pagina een achtergrond te geven, dient de "body" tag te zijn voorzien van een "style" attribuut. Weet je niet meer wat de body is? Lees dan les 1b nog een keer opnieuw door. De volgende code geeft de pagina een achtergrond: 01. <html> 02. <head> 03. <title>Deze pagina heeft een achtergrond.

04.

05.

07. 08. 09.

Dit is de zichtbare inhoud van de pagina.

Zoals je in de bovenstaande code kunt zien staat er in het "style" attribuut (dat zich bevindt in de body) een stijleigenschap "background-image". De opbouw is als volgt: background-image, dubbelepunt, gevolgd door het keyword url, vervolgens haakje openen, waarna de link van de afbeelding volgt en tot slot haakje sluiten. background-image: url(http://bglabs.evade.netdna-cdn.com/45875kli90/204.jpg); In het bovenstaande voorbeeld maak ik weer gebruik van een absoluut pad. Het is ook hierin weer weer mogelijk om een relatief pad te gebruiken. Hiervoor dien je de afbeelding op te slaan in je "image" map. De body tag zou met een relatief pad (als achtergrond) er ongeveer zo uit zien:

Probeer het zelf

Voer de volgende opdracht uit: 1. Maak een nieuwe HTML pagina en stel een achtergrond in. Je kunt verschillende achtergronden downloaden op http://www.backgroundlabs.com/. Sla de achtergrond op in je image map en stel de achtergrond in door middel van een relatief pad. 2. Plaats op dezelfde pagina een foto van je favoriete artiest, lijn deze links uit en zet naast de foto een aantal kenmerken van je artiest. 3. Zorg ervoor dat het contrast van je tekst goed is en geef deze zo nodig een andere kleur. 4. Zorg ervoor dat de afbeelding van je artiest naar een pagina op Wikipedia linkt. De link moet geopend worden in een nieuw tabblad. Mijn pagina ziet er het als volgt uit:

Einde cursus! Ruben, we zijn helaas al weer aan het einde van de e-cursus gekomen. Hopelijk ben je met de basis technieken van deze cursus een stuk wijzer geworden.

Vond je deze e-cursus interessant? Dan vind je dit nog interessanter» Klik hier

Les 1a: Downloaden en instellen van software Software gebruik

Recommend Documents