Tips bij het vullen van de website:

• Zorg dat er geen lappen tekst op komen te staan, hou het kort en bondig
• Plaatjes kleden de pagina aan of kunnen belangrijke informatie bevatten. Zorg er wel voor dat er niet te veel plaatjes op staan. Dan duurt het laden van de pagina langer
• Bedenk weer wie je doelgroep is en welk taalgebruik daarbij past
• Kijk alles goedna of of er geeen spellfouten in zitte, dat staat zo slordig[

Op deze website kun je nog meer goede tips vinden.

Opdracht

Schrijf de content voor je website (homepage). Bedenk eerst de koppen en ga daarna de stukjes uitschrijven. Houd steeds je doel van de website, je doelgroep en wat je uit wilt stralen voor ogen. De content moet daarbij aansluiten.

Schrijf de content voor je website. Bedenk eerst de koppen en ga daarna de stukjes uitschrijven. Houd steeds je doel van de website, je doelgroep en wat je uit wilt stralen voor ogen. De content moet daarbij aansluiten.

Afbeeldingen

Je kunt alvast afbeeldingen gaan verzamelen voor je website. Je hebt afbeeldingen nodig voor de layout en voor de content.

Tips over afbeeldingen voor op je website vind je hier.

Zelf geen mooie foto’s? Hier kun je gratis afbeeldingen vinden die je mag gebruiken.

Afgestemd op je website koop je serverruimte in. Wat je precies nodig hebt is afhankelijk van het soort website en de functies die erin zitten. Er zijn veel verschillende aanbieder waar je een domeinnaam en serverruimte kunt kopen. Je kunt zelf de prijzen vergelijken.

Je site online zetten

Goed, je hebt je website af. Tot nu toe heb je je website alleen nog bekeken op je eigen computer. Dat houdt ook in dat niemand anders jouw website kan bekijken. Om je website voor iedereen toegankelijk te maken, zul je je site eerst op het internet moeten zetten. Uploaden noemen we dat.
Om je website voor iedereen zichtbaar te maken, moet je hem op een server zetten. Een server is een computer die, als het goed is, continu verbinding met het internet heeft. Op het moment dat jij een internetadres in je browser intypt, doe je eigenlijk een verzoek aan een server om die pagina naar je toe te sturen.

Hostingproviders

Waarschijnlijk is het voor jou niet haalbaar en ook niet nodig om je eigen server op te zetten. Gelukkig zijn er de zogenaamde hostingproviders. Zij bezitten en onderhouden een aantal servers waarop jij je website kwijt kunt. Ze zorgen ervoor dat iedereen die jouw site wilt bezoeken hem ook te zien krijgt. Op die server staan vaak ook andere websites, vandaar dat we deze vorm ook wel shared webhosting noemen.
Betaalde webhosts doen dat niet. Bovendien zijn ze vaak een stuk sneller, beantwoorden ze je vragen sneller en beter en heb je meer opties. Maar daar staat natuurlijk ook een bedrag tegenover: gemiddeld betaal je zo’n 60 euro per jaar voor een basispakket, zo’n 5 euro per maand dus.
Als je een internetabonnement bij een goede provider hebt, is de kans groot dat je van je provider ook webhosting krijgt. Hier betaal je niets extra’s voor, maar je krijgt dan ook vaak een wat kleiner pakketje. Voor je eerste website is dat vaak echter genoeg. Neem contact op met je provider om te kijken of zij je webhosting kunnen bieden.

Uploaden

Als je je webhosting hebt geregeld moet je alle bestanden naar je webserver verplaatsen. Dat doe je met een FTP-programma.
Let op: alle bestanden die je gebruikt binnen je site moeten ook op je webserver komen. Dus ook je plaatjes en CSS-bestanden. Houd er rekening mee dat de bestanden in de goede map staan en dat de hoofdletters overeenkomen met de namen die je in je links gebruikt. Als je bijvoorbeeld een plaatje images/ditbenik.gif op je site gebruikt, moet dat bestandje ook in die map staan, en op dezelfde manier geschreven zijn. ditbenik.gif of images/ditbenik.GIF werken dus niet!
Zo, al je bestanden staan online. Je kunt nu dus naar je eigen website toe surfen. Wat het adres is hangt van van je provider, dit zou wel op hun website moeten staan.
Het is een goed idee om, voordat je iedereen over je site gaat vertellen, je eigen site even grondig te testen: kijk of al je links werken en of al je plaatjes het doen.
Domeinnaam
Als je wilt kun je ook je eigen domeinnaam aanvragen, bijvoorbeeld eindigend op .nl, .be of .com. Dit kost je bij zo’n 10 euro per jaar. Als je je domein geregistreerd hebt kan niemand anders meer van die naam gebruik maken, hij is dus echt van jou.
Het voordeel van een eigen domeinnaam is dat het een stuk netter staat dan het adres dat je van je provider krijgt en ook veel makkelijker te onthouden is.

Let’s go online!

Je moet je website dus op je serverruimte zetten dat doe je met een ftp-programma. Een gratis programma is FileZilla (pc) of Cyberduck (mac). Dit programma moet je downloaden en op je eigen computer installeren.

FileZilla is een gratis FTP-programma dat met het File Transfer Protocol (FTP) werkt. Met FileZilla is het mogelijk bestanden naar een FTP-server te sturen en op te halen, waardoor men bestanden kan uploaden en/of downloaden.

Inloggegevens

Je krijgt in de opleverbrief een aantal gegevens waarmee je verbinding kunt maken met de server. Hier vind je je ftp-inloggegevens en eventuele extra’s zoals statistieken of emailadres(sen).
Je hebt dan een ftp-programma nodig om de volgende gegevens in te vullen:
Bij het Host address (of IP/servername) dien je de naam van je domein in te vullen, voorafgegaan door “ ftp.” (bijvoorbeeld ftp.jedomeinnaamhier.nl). Je hoeft er dus geen www voor te zetten!
Bij username (gebruikersnaam) en password (wachtwoord) vul je letterlijk de gegevens in zoals ze in de opleverbrief vermeld staan. Houd rekening met hoofdletters.
Wanneer je op connect (of verbinden) drukt maakt het programma verbinding met de server. Je ziet een aantal mappen staan. Let erop dat de bestanden van je website in de map HTML dienen te staan en dat je je hoofdbestand (homepage) index.htm (of .php) noemt anders zal de website niet juist vertoond worden!

Handleiding

Bekijk hier een handleiding hoe je Filezilla in kunt stellen:
mediadesign.nl/helpdesk/handleidingen/uploaden-met-filezilla

Als je dit adres intypt, kom je bij ‘de voorkant’van je website. Om in te loggen typ je achter de domeinnaam nog: /wp-admin. Dus dan ziet het er zo uit: www.gebruikersnaam.wordpress.com/wp-admin. Je krijgt dan het inlogvenster te zien waar je met je gebruikersnaam en wachtwoord inkunt loggen.

Okee, nu ben je dus aan ‘de achterkant’. Hier kun je je website beheren. Je kunt een bericht toevoegen en verschillende thema’s uitproberen.

Zoals gezegd, er is geen duidelijk nederlandtalige handleiding van de laatste WordPress versie beschikbaar. Dus hieronder vind je linkjes naar de uitleg over verschillende functies in WordPress (in het engels dus…):

Titel en subtitel aanpassen, Berichten plaatsen, Pagina’s aanmaken, Thema (uiterlijk) aanpassen

En hier vind je het hele overzicht van help-onderwerpen.

Veel plezier met bloggen!

WordPress is een gratis blogsysteem waarmee ik ook deze website heb gebouwd (aanvulling Suzette: ook deze cursuswebsite is ermee gemaakt). Ik gebruik het al jaren en in de loop van die jaren is het uitgegroeid tot een fantastisch pakket. Wat veel mensen niet weten is dat dit pakket met een paar extra plugins goed te gebruiken is als Content Management Systeem.

Zeven voordelen van WordPress

1) Een volwassen interface WordPress ziet er goed uit. Het beheer is heel gestructureerd en intuitief.
2) Stabiel WordPress is een stabiel pakket. Snel en ,heel belangrijk, echt eenvoudig te upgraden. Hierdoor heb je vrijwel nooit problemen om van de ene naar de andere versie over te gaan. Er zijn wel wat dingen waar je op moet letten, maar daar zal ik de komende tijd wat meer over schrijven.
3) Een grote ontwikkelgemeenschap Er wordt heel veel aan ontwikkeld en de nieuwe releases bieden altijd interessante, nieuwe mogelijkheden waar je echt wat aan hebt. Ook met vragen kom je op de fora van WordPress altijd snel op een antwoord.
4) Templates Het aantal templates voor WordPress is enorm. Ook het installeren daarvan is heel eenvoudig. Zelf een template maken is te doen, maar vanwege het aanbod bijna niet nodig. Hierover later meer.
5) Goed in bloggen, maar ook prima als CMS WordPress is van oorsprong een blogsysteem en is dat ook nog steeds in de kern, maar met de juiste instellingen en plugins is het heel erg handig als CMS te gebruiken.
6) Goed geoptimaliseerd Standaard heeft WordPress een prima ondersteuning voor zoekmachines. Met een paar extra plugins wordt dat nog beter.
7) Gemakkelijk te installeren In 5 minuten staat je weblog er! Hoe? Dat zal ik nu bespreken.

Waar te beginnen?

Op de nederlandse homepage van Wordpress vind je veel informatie over het systeem. Hier kun je ook meteen een eigen blog registreren. Gratis en gemakkelijk!

Hier wat handige linkjes:

• wat is een domeinnaam?
• wat is hosting?

Er zijn veel bedrijven die domeinnamen en/of hosting aanbieden. Een voorbeeld is greenhost.nl, veganhosting.net en ecomediar.nl. Daar betaal je voor een domeinnaam met hosting tussen de 50 en 100 euro per jaar.

Wat betekent CMS?
CMS is de afkorting voor het engelse woord: Content Management Systeem. De afkorting CMS wordt ook wel naar het Nederlands vertaald als Content Beheer Systeem.

Wat zijn de mogelijkheden die een CMS | Content Management Systeem bieden?
Een Content Management Systeem (CMS) maakt het mogelijk gegevens en documenten te publiceren op het Internet zonder het uitvoeren van technische handelingen.

Functionaliteit van een CMS.
De functionaliteit van een CMS is onder te verdelen in de functionaliteit voor de beheerder en voor de bezoeker. De basis functionaliteit van een CMS bestaat voor een beheerder uit de volgende onderdelen:
•    Een webbased administratie module, waar gegevens en afbeeldingen ingevoerd, aangepast en verwijderd kunnen worden.
•    Een presentatie module in de vorm van een Theme, Template of Sjabloon, waarin de lay-out van de gegevens is vastgelegd.
•    Een database waarin de dynamische gegevens worden opgeslagen en gearchiveerd.

Wat zijn de voordelen van een CMS?

Voor het onderhouden van een website doormiddel van CMS is geen tot weinig technische kennis nodig. Door de dynamische structuur van een CMS is het mogelijk eenvoudig de structuur van een complexe website te veranderen en te beheren
Een overzicht van de voordelen van een website met CMS functionaliteit in vergelijking tot een statische website:
•    Doordat er geen technische kennis nodig is, kunnen er meerdere personen binnen een organisatie gegevens publiceren en actualiseren.
•    Bestaande content (gegevens, documenten en afbeeldingen) zijn eenvoudig te beheren en te structureren door de dynamische structuur van een CMS
•    De navigatie structuur is eenvoudig aan te passen en te veranderen

Wie kunnen er gebruik maken van een CMS
Door met name de drempel verlagende werking van een CMS en de tijdwinst, is het voor zowel grote organisaties als zelfstandige ondernemers aantrekkelijk om te werken met een Content Management Systeem.
Verschillende soorten CMS
Er zijn veel verschillende Content Management Systemen verkrijgbaar. Globaal is er een onderscheid te maken in commerciele Content Management Systemen en Opensource (CMS met vrije toegang tot de bronbestanden).
De Presentatie van een CMS
De visuele presentatie van een CMS (front-end) ligt vastgelegd in zogenaamde Themes, Templates of Sjablonen. Deze zorgen ervoor dat de dynamische data binnen een, van te voren bepaalde, lay-out aan de bezoeker worden gepresenteerd.

Gebruikers binnen een CMS.

Voor het onderhouden van een internetsite, doormiddel van CMS (Content Management Systeem) zijn er verschillende mogelijkheden en rechten die je kan toekennen aan de gebruiker.

Wat zijn de minimale eisen voor het gebruiken van een CMS ?
Voor het werken met een CMS zijn er een aantal basis benodigd heden:
•    Webserver (schijfruimte op het internet, ook wel Hosting genoemd)
•    Domeinnaam (bijv. www.domeinnaam.nl)
•    Database (opslagruimte op het internet voor het archiveren van digitale gegevens)
•    Ondersteuning van een programmeertaal (afhankelijk van het CMS, PHP of ASP)

Bekijk hier de website

Je kunt met deze website oefenen met HTML en CSS.

Je kunt de tekst en afbeeldingen die erin staan vervangen door je eigen inhoud en zo je eigen website maken!

Download de website-bestanden

DOWNLOAD ZIP

HTMLnotepad

Is een handig, simpel en gratis programma om je website in te schrijven. Je kunt er HTML en CSS (en veel meer) -bestanden in openen. Je kunt HTMLnotepad via deze website downloaden en dan op je computer installeren.

Lessen online

Zelf verder met HTML/CSS?

• W3schools HTML
• W3schools CSS

Vroeger zouden we nu overgestapt zijn naar manieren om teksten wat meer uiterlijk te kunnen veranderen met behulp van html codes. Zo zou een website vier of vijf jaar geleden allerlei codes hebben gekregen zoals <font color=”red”>, hiermee kon je een stuk tekst rood maken. Maar nu gebeurt dat op een andere manier, namelijk met CSS. Dit zijn Cascading Style Sheets.

Een CSS document is een apart document naast het html document, die aan het html document gaat vertellen hoe bepaalde stukken er uit moeten zien. Het gaat bij CSS over de opmaak van het HTML document. Je mag een CSS document ook gewoon maken met kladblok, alleen moet je het dan niet opslaan als .html , maar als .css .

Hoe ziet CSS er uit?

CSS ziet er iets anders uit dan HTML. Bij CSS wordt er wel verwezen naar HTML codes. Stel dat je het tweede tussenkopje niet zwart moet zijn, maar rood. Eerst schrijf je dan de verwijzing op naar de HTML code, h2. Daarna ga je vertellen wat er met deze code moet gaan gebeuren. Dit wordt niet gedaan met < en >, maar met { en }. Een voorbeeld:

h2 {

color: red;

font-size: 13px;

}

Met h2 schrijf je op dat je iets gaat veranderen aan de html code h2. Dan open je het deel waar je dat daadwerkelijk gaat vertellen met {.

Vervolgens schrijven we dat de kleur van de tekst (color) rood moet worden. Eerst wat je gaat veranderen, namelijk de kleur. Dan een dubbele punt (:) dan de kleur zelf, en afsluiten met een punt-komma (;).

Je mag dan op dezelfde regel verder gaan, maar het is duidelijker om op een volgende regel verder te gaan, we willen namelijk ook de lettergrootte aanpassen. Dat doe je met font-size, weer een dubbele punt, het formaat, en dan weer een punt-komma.

Als dat alles is wat we veranderen willen, dan kun je alles sluiten met }.

CSS koppelen aan je HTML document

Je mag CSS in een html document gebruiken, maar wij maken er een apart document voor. Maar het html document moet wel op een of andere manier weten waar dat CSS document te vinden is. In de <head> zet je:

<head>

<title>Mijn eerste webpagina</title>

<link rel=”stylesheet” type=”text/css” href=”jouw_stijl_blad.css”>

</head>

Wanneer je nu een CSS document hebt gemaakt met de naam jouw_stijl_blad.css, dan zoekt het HTML document hierin de aanpassingen voor html codes op.

Wanneer we daar ons voorbeeld in plaatsen zoals we deden met h2, dan zou je uiteindelijk een pagina krijgen met de volgende html code:

<html>

<head>

<title>Mijn eerste webpagina</title>

<link rel=”stylesheet” type=”text/css” href=”mijn_stijlblad.css”>

</head>

<body>

<h1>De titel van het artikel</h1>

<h2>Eerste tussenkopje</h2>

<p>Het artikel zelf, dat kun je doen met dummytekst,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Integer non nisl et metus ultrices lobortis.</p>

<h2>Tweede tussenkopje</h2>

<p>Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam.

Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales.

Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus

bibendum. Nullam sem. </p>

</body>

</html>

Het CSS bestand heet ‘mijn_stijblad.css’ en bevat de volgende code:

h2 {

color: red;

font-size: 13px;

}

Hierbij is het dus zaak dat het CSS document en het HTML document in dezelfde map staan.

Class in CSS en HTML

We gaan nu het CSS bestand eens wat uitbreiden. Zo kunnen we de kop met h1 aanpassen en we doen wat aanpassingen aan de paragrafen, die worden met <p> aangegeven. Alleen we willen de tweede paragraaf niet hetzelfde hebben als de eerste paragraaf. In de tweede paragraaf komt de tekst namelijk schuin (italic) te staan. Dit kan ook weer eenvoudig worden toegepast in CSS. Je moet daarvoor het volgende doen.

In de html code zoek je de <p> van de tweede paragraaf op. Deze <p> geef je een klasse mee, met de naam ’schuin’. De code wordt dan <p class=”schuin”>. Nu kun je het CSS bestand weer openen en die klasse gaan vormgeven. Dat doe je als volgt:

.schuin {

font-style: italic;

}

Je ziet dat er in plaats van een element de klasse wordt genoemd, met daarvoor een punt (.). Op deze manier krijgt de paragraaf met de klasse ’schuin’ een ander uiterlijk dan de paragraaf zonder een klasse. Je kunt deze klasse overigens aan elk element toevoegen, dus als je de eerste kop (h1) ook schuin wilt maken geef je deze ook de klasse ’schuin’ mee.

Je website logisch indelen met behulp van id

Er is ook nog een ander type dat je in een CSS bestand kunt gebruiken, namelijk het ‘id’. Een identificator (id) gebruik je om een stijl te koppelen aan een onderdeel dat maar één keer voorkomt in een HTML bestand. Meestal wordt een ‘id’ gebruikt om een gedeelte van het document van stijlen te voorzien.

Een voorbeeld, we willen de webpagina verdelen in drie gedeeltes, de kop, het midden en de onderkant. Dit is een onderverdeling die vaak gebruikt wordt. De kop noemen we ‘header’, het midden noemen we ‘inhoud’ en de onderkant noemen we ‘footer’. De HTML code wordt nu als volgt:

<html>

<head>

<title>Mijn eerste webpagina</title>

<link rel=”stylesheet” href=”mijn_stijlblad.css”>

</head>

<body>

<div id=”kop”>Titel van de website</div>

<div id=”inhoud”>

<h1>De titel van het artikel</h1>

<h2>Eerste tussenkopje</h2>

<p>Het artikel zelf, dat kun je doen met dummytekst,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Integer non nisl et metus ultrices lobortis.</p>

<h2>Tweede tussenkopje</h2>

<p class=”schuin”>Phasellus placerat feugiat dui. Donec a leo. Vestibulum non diam.

Curabitur ipsum. Cras sed mauris. Integer faucibus. Maecenas sodales.

Maecenas hendrerit. Aenean dapibus odio placerat justo. Aliquam ac urna at mi cursus

bibendum. Nullam sem. </p>

</div>

<div id=”footer”>&copy; 2010 bladiebla</div>

</body>

</html>

Om de stijl voor een ‘id’ te bepalen, gebruik je in de css code een hekje (#). Daarna kun je dezelfde dingen doen die al eerder stonden beschreven.

Dan is nu ons CSS bestand tot nu toe:

h1 {

font-size: 18px;

color: blue; }

h2 {

color: red;

font-size: 13px; }

p {

color: #999;

font-size: 11px; }

#kop {

font-size: 21px;

border: 1px solid black;

padding: 5px; }

#inhoud {

text-align: justify; }

#footer {

clear: both; }

.schuin {

font-style: italic; }

Nog wat handige tips

Het voert in dit artikel te ver om alle aspecten toe te lichten, maar bovenstaande geeft je een idee van hoe je html en css kunt gebruiken. Uiteindelijk is het belangrijk dat je er zoveel mogelijk mee experimenteert.

Wat wel belangrijk is, is dat je logische namen bedenkt voor klasses en ‘id’. En, zoals je hierboven in de code ziet, een logische volgorde aanhoudt. We starten met h1 (belangrijkste kop) komen dan bij algemene stijlen, daarna de id stijlen en als laatste de classes stijlen. Op deze manier hou je het overzicht voor jezelf.

Alle CSS eigenschappen en waardes kun je hier vinden

De basiskleuren kun je met de engelse woorden beschrijven, je kunt echter ook een kleurcode gebruiken. Die kun je bijvoorbeeld opzoeken in Adobe Photoshop of hier.

Een kleurcode ziet er als volgt uit: #xxxxxx, waarbij de x-en variabelen zijn. Dit kunnen cijfers of letters zijn.

Let op:  ‘HTML deel 2: Tekst opmaken’ en ‘HTML deel 3: Links maken’ hoef je niet door te werken!

Hyperlinks

Voor hyperlinks gebruiken we de tag <a>. Omdat je met <a> alleen niets kunt, moet je gebruik maken van eigenschappen.
Links worden gemaakt door de eigenschap href=”?“ toe te voegen in de <a> tag.

Voorbeeld:

<a href=”http://www.hi-fibre.com“>

<a> Deze tag maakt een hyperlink van een stukje tekst.
<a href=””> href is de eigenschap die verwijst naar de website waar je naartoe wilt linken. Zonder href heb je geen link.
</a> Met deze tag sluit je de link-tekst af.

Tip: HTML ziet geen verschil tussen hoofd- en kleine letters. Bij het opslaan of verwijzen naar een pagina of een bestand kunnen ze wel belangrijk zijn. Schrijf daarom de namen van bestanden in kleine letter. Op deze manier zal de webserver ze altijd vinden.

Voorbeeld:

<html>
<head>
<title>
Voorbeeld link invoegen
</title>
</head>

<body>
<a href=”http://www.hi-fibre.com“>Een link naar de website van Suzette</a>
</body>
</html>

Openen in een ander venster

Om een website te laten openen in een ander venster, hoef je alleen target=”_blank“ in te vullen:
Voorbeeld: <a href=”http://www.hi-fibre.com” target=”_blank“>

Deze optie is zeer aan te raden als je gaat linken naar andere websites. Bezoekers raken anders jouw website kwijt zodra ze op een externe link klikken.

E-mail adres

Om een link te maken waarmee iemand een e-mail  naar je kan versturen voeg je ‘mailto:’ na de href toe.
Dus: <a href=”mailto:suzette@hi-fibre.com“>
Wil je de mail die via de link is verstuurd kunnen herkennen aan een bepaald onderwerp, kan kun je dit meegeven in de link.
<a href=”mailto:suzette@hi-fibre.com?subject=Over de html cursus“>

Wanneer je op zo’n mailto link klikt, zal automatisch je e-mailprogramma worden opgestart (zoals Outlook, Thunderbird of Gmail).

Plaatjes invoegen in je pagina

Als je het maken van een hyperlink onder de knie hebt, kun je zonder moeite plaatjes in de tekst zetten. In feite maken plaatjes ook gebruik van een soort hyperlink, maar in plaats van je te verwijzen naar een andere pagina, zullen er plaatjes op de pagina verschijnen.

Afbeeldingen worden op de pagina met behulp van <img> opgeroepen. Ook bij <img> moet je eigenschappen toevoegen wil je überhaupt iets kunnen afbeelden.
Om een plaatje te laten verschijnen voegen we toe waar de source (src, de bron) zich bevindt: dus <img src=”plaatje.jpg“ />

De <img> tag sluit zichzelf (door het sluithaakje aan het eind).

<html>
<head>
<title>
Voorbeeld plaatje invoegen
</title>
</head>

<body>
<img src=”http://www.hi-fibre.com/images/hoofd_suzy.jpg“ />
</body>

</html>

<img> Het element voor een afbeelding
scr=”…“ De eigenschap om de afbeelding mee te laden

Plaatjes linken

Je kunt ook middels een plaatje ergens naar linken. Dit doe je door beide tags te combineren:

<a href=”http://www.hi-fibre.com“>

<img src=”http://www.hi-fibre.com/images/hoofd_suzy.jpg” />

</a>

Grootte van de afbeelding bepalen

Doe je door de breedte en de hoogte van het plaatje op te geven (het formaat in pixels).

<img src=”http://www.hi-fibre.com/images/hoofd_suzy.jpg ” width=”” height=”” />

Als je de dimensies van je afbeelding opgeeft, dan kan de pagina van te voren een ruimte vrijhouden in de pagina. Zo hoeft je foto nog niet geladen te zijn om de tekst op de pagina er op de juiste manier uit te laten zien.

Je kunt met deze tag ook een originele afbeelding vergroten en verkleinen, maar dit is niet aan te raden omdat je dan het origineel òf uitrekt of laat krimpen.

<img src=”http://www.hi-fibre.com/images/hoofd_suzy.jpg” width=”150” height=”175” />

Width=”?“ Definieert de breedte van het plaatje.

Height=”?“ Definieert de  hoogte van het plaatje.

Let op: als je op deze manier de grootte van een afbeelding aanpast wordt deze van veel mindere kwaliteit dan wanneer je het plaatje zou aanpassen in een beeldbewerkingprogramma. Hoewel het meer werk is, is het beter om een afbeelding aan te passen in een beeldbewerkingprogramma.

Oefening: maak een webpagina met de volgende elementen erin: koppen, teksten, links, een e-mail-link, afbeeldingen, een afbeelding als link en maak gebruik van vette en cursieve woorden.

Wil je verder met HTML?

Er zijn natuurlijk nog veel meer tags dan dat we tot nu toe behandeld hebben. Hieronder volgen nog meer HTML-tags die je kunt gebruiken bij het bouwen van je webpagina.

Alle HTML-tags bekijken kan hier.

Lijsten maken

In deze les kun lees je hoe je lijsten maakt. Lijsten maken met HTML is erg eenvoudig.
Er zijn drie verschillende soorten lijsten die achtereenvolgens aan bod komen:

• Unnumbered Lists (ongenummerde lijsten)
• Ordered Lists (geordende lijsten)
• Nested lists (geneste lijsten)

Unnumbered Lists (ongenummerde lijsten)

In een ongenummerde lijst wordt iedere lijstobject voorafgegaan door een bullet (een dikke punt).

Je begint de ongenummerde lijst met de <ul> tag – de openingstag voor de lijst.
Vervolgens gebruik je de tag <li> voor ieder lijstobject (List Item) dat je in de lijst wilt plaatsen. Je sluit elk item met de eindtag </li>.
Als je alle List Items hebt ingevoerd, sluit je de lijst met de eindtag </ul>.

Een voorbeeld van een Unnumbered List:

<ulL>
<li>appels</li>
<i>peren</li>
<li>bananen</li>
<li>druiven</li>
</ul>

Het resultaat van de bovenstaande code is:

• appels
• peren
• bananen
• druiven

Ordered Lists (geordende lijsten)

In een geordende lijst wordt elk lijstobject voorafgegaan door een nummer. Verder lijkt alles op de Unnumbered List.

De begintag is <ol>.
Dan gebruik je weer de tag <li> voor ieder lijstobject dat je in wilt voeren.
Tenslotte sluit je de geordende lijst weer af met de eindtag: </ol>

Een voorbeeld van een Ordered List:

<ol>
<li>sinaasappels</li>
<i>mandarijnen</li>
<li>mangos</li>
<i>perziken</li>
</ol>

Het resultaat van deze code:

1. sinaasappels
2. mandarijnen
3. mangos
4. perziken

Nested Lists (geneste lijsten)

Een geneste lijst is niets anders dan een lijst in een andere lijst. Hierbij zijn alle combinaties van de hierboven besproken lijsten mogelijk.
Je begint met de tag van de hoofdlijst, dus <ul> of <ol>.
Dan voeg je het List Item (lijstobject) in, met daarna de tag van de sublijst die je wilt maken.

Dit voorbeeld maakt het duidelijk:

<ol>
<li>Honden
<ul>
<li>Jack Russell Terriër</li>
<li>Spaniël</li>
<li>Golden Retriever</li>
</ul>
</li>
<li>Vogels
<ul>
<li>Merel</li>
<li>Spreeuw</li>
<li>Mus</li>
</ul>
</li>
</ol>

Dit is het resultaat:

1. Honden
   • Jack Russell Terriër
   • Spaniël
   • Golden Retriever
2. Vogels
   • Merel
   • Spreeuw
   • Mus

Je kunt het moodboard deze op papier maken, knip dan kleuren, afbeeldingen en lettertypes uit magazines en plak deze op je moodbord. Ook kun je printjes maken van dingen die je op andere websites tegenkomt en die erin verwerken.

Je mag je moodbord en wireframe ook digitaal maken, bijvoorbeeld in Adobe Photoshop. Neem dan zowel het digitale bestand op usb-stick als een printje mee naar de volgende les.

Veel succes!