De oefeningen - Lettertype, Grootte en Kleuren
Wil een computer een tekst in een opgegeven lettertype weergeven, dan moet dat lettertype op die computer aanwezig zijn. Er zijn honderden lettertypen, maar er zijn er een paar die op zowat elke pc zitten, gewoon omdat ze met het besturingssysteem meegeleverd werden.
Een daarvan zal in de browser zijn ingesteld als het standaard-lettertype.
Als u wel een bepaald lettertype opgeeft, wordt dat gebruikt, als dat tenminste aanwezig is. Zo niet, dan valt de browser terug op het standaard-lettertype. Dat betekent, bijvoorbeeld, dat als u uw bezoeker eens lekker wilt laten griezelen met het lettertype Frankenstein, dat vermoedelijk niet zal werken.
Bekende lettertypen zijn:
<FONT FACE="naamvandeletter"> [tekst in dat lettertype] </FONT>.
(Hier hebben we nou een voorbeeld van een "attribuut": je geef de tag een bijzonderheid mee, namelijk welk lettertype hij moet hebben.
Alleen maar te zeggen dat hij "een lettertype" moet hanteren zonder te zeggen welk lettertype, daar kan geen browser mee uit de voeten.
Voor de duidelijkheid:
Hier moet je het "dubbele aanhalingsteken" gebruiken, niet twee enkele aanhalingstekens achter elkaar. Dat geldt voor alle attributen.
Enkele aanhalingstekens worden niet herkend, met als gevolg dat de betreffende opdracht genegeerd wordt.
De code <FONT FACE="arial">dit is arial</FONT> leidt tot: dit is arial.
Welk lettertype jij gebruikt op je website hangt van jou af. Wat vind je mooi, wat wil je vertellen en uitstralen met je website, etc.
Een daarvan zal in de browser zijn ingesteld als het standaard-lettertype.
Als u wel een bepaald lettertype opgeeft, wordt dat gebruikt, als dat tenminste aanwezig is. Zo niet, dan valt de browser terug op het standaard-lettertype. Dat betekent, bijvoorbeeld, dat als u uw bezoeker eens lekker wilt laten griezelen met het lettertype Frankenstein, dat vermoedelijk niet zal werken.
Bekende lettertypen zijn:
- In de Windows-wereld Times New Roman, Ariel en Courier
in de Mac-wereld Times, Helvetica en Courier
<FONT FACE="naamvandeletter"> [tekst in dat lettertype] </FONT>.
(Hier hebben we nou een voorbeeld van een "attribuut": je geef de tag een bijzonderheid mee, namelijk welk lettertype hij moet hebben.
Alleen maar te zeggen dat hij "een lettertype" moet hanteren zonder te zeggen welk lettertype, daar kan geen browser mee uit de voeten.
Voor de duidelijkheid:
Hier moet je het "dubbele aanhalingsteken" gebruiken, niet twee enkele aanhalingstekens achter elkaar. Dat geldt voor alle attributen.
Enkele aanhalingstekens worden niet herkend, met als gevolg dat de betreffende opdracht genegeerd wordt.
De code <FONT FACE="arial">dit is arial</FONT> leidt tot: dit is arial.
Welk lettertype jij gebruikt op je website hangt van jou af. Wat vind je mooi, wat wil je vertellen en uitstralen met je website, etc.
Andere lettertypen
Hierboven zijn 3 standaardlettertypen genoemd. Maar er zijn honderden lettertypen in omloop.
Dat betekent dat er een grote kans is dat een populair lettertype als Verdana aanwezig is op de pc van jouw website bezoeker. Als dit niet het geval is, omdat je een speciaal soort lettertype hebt gepakt. Dan pakt de browser gewoon wat anders. Je bezoeker ziet dus wel jouw tekst, maar niet in het lettertype dat jij hebt gekozen.
Hierboven zijn 3 standaardlettertypen genoemd. Maar er zijn honderden lettertypen in omloop.
Dat betekent dat er een grote kans is dat een populair lettertype als Verdana aanwezig is op de pc van jouw website bezoeker. Als dit niet het geval is, omdat je een speciaal soort lettertype hebt gepakt. Dan pakt de browser gewoon wat anders. Je bezoeker ziet dus wel jouw tekst, maar niet in het lettertype dat jij hebt gekozen.
Lettergrootten
Je hebt gezien dat je koppen (Headers) in de maten 1 tot en met 7 kunt opgeven.
Met lettergrootten kan dan ook, maar daar loopt de nummering net andersom. (Waarom? Geen idee.) De standaard-grootte is 3. Een paar voorbeelden:
De lettergrootte kun je bepalen met de tag
<FONT SIZE="4">hier komt je tekst.</FONT>.
<FONT SIZE="4">Dit is grootte 4.</FONT>.
Dit is grootte 4.
Je kunt de lettergrootten, lettertypen, vet en cursief met elkaar combineren, zolang je maar de volgorde van de sluittags in de gaten houdt.
Opdracht7:
Voeg een alinea toe met verschillend lettertype en verschillende lettergrootte aan jou presentatie over jezelf (Opdracht2).
“Nabouw in de 20eeuw van de Difference Engine
Het Science Museum in Londen heeft in de periode 1985-1991 ter ere van de 200e geboortedag van Charles Babbage de Difference Engine No. 2 gebouwd en deze werkte inderdaad.
Bij het bouwen heeft men zo veel mogelijk volgens de technieken uit de tijd van Babbage gewerkt, om aan te tonen dat een 19e-eeuwse Engine had kunnen werken. In 2001 voltooide men een eveneens door Babbage ontworpen printer, die wordt aangestuurd door Difference Engine No. 2.”
Dit paragraaf komt in Arial te staan.
En dit zou het resultaat moeten zijn:
Je hebt gezien dat je koppen (Headers) in de maten 1 tot en met 7 kunt opgeven.
Met lettergrootten kan dan ook, maar daar loopt de nummering net andersom. (Waarom? Geen idee.) De standaard-grootte is 3. Een paar voorbeelden:
De lettergrootte kun je bepalen met de tag
<FONT SIZE="4">hier komt je tekst.</FONT>.
<FONT SIZE="4">Dit is grootte 4.</FONT>.
Dit is grootte 4.
Je kunt de lettergrootten, lettertypen, vet en cursief met elkaar combineren, zolang je maar de volgorde van de sluittags in de gaten houdt.
Opdracht7:
Voeg een alinea toe met verschillend lettertype en verschillende lettergrootte aan jou presentatie over jezelf (Opdracht2).
“Nabouw in de 20eeuw van de Difference Engine
Het Science Museum in Londen heeft in de periode 1985-1991 ter ere van de 200e geboortedag van Charles Babbage de Difference Engine No. 2 gebouwd en deze werkte inderdaad.
Bij het bouwen heeft men zo veel mogelijk volgens de technieken uit de tijd van Babbage gewerkt, om aan te tonen dat een 19e-eeuwse Engine had kunnen werken. In 2001 voltooide men een eveneens door Babbage ontworpen printer, die wordt aangestuurd door Difference Engine No. 2.”
Dit paragraaf komt in Arial te staan.
En dit zou het resultaat moeten zijn:
Kleuren
Het leuke van HTML is dat jij makkelijk wat kleurtjes aan jouw werk kunt toevoegen.
Die kleuren kunnen betrekking hebben op de achtergrond van de pagina (de kleur van het papier, als het ware) en de kleur van de tekst.
Officieel moeten kleuren worden opgegeven in hexadecimale code, maar dat is tamelijk lastig. In de praktijk zou je ermee uit de voeten kunnen dat browsers een flink aantal kleuren kennen, die gewoon bij hun (engelse) naam aangeduid kunnen worden. Meestal wordt, behalve de hoofdkleur ("blue"), ook "lightblue" en "darkblue" herkend. Gewoon proberen, als het niet herkend wordt merkt jij dat vanzelf.
Je kan zowel gekleurde achtergronden (de kleur van het papier, om het zo maar eens te zeggen) als gekleurde tekst gebruiken.
Een achtergrondkleur (background)geef je op door dat aan de tag BODY toe te voegen.
Voor een rode achtergrond gebruik je de tag:
<BODY BGCOLOR="red">
Probeer gewoon een paar kleuren uit.
Als die kleur niet bekend is, gebruikt de browser de standaardkleur die de gebruiker heeft ingesteld.
Een tekst voorzie je van een kleur door de volgende tag te gebruiken:
<FONT COLOR="naamvandekleur"> ... </FONT>.
Voorbeeld: ik vind dit wel een nette kleur, dat donkerrood.
Bij het gebruik van kleuren is het nuttig het totale effect in de gaten te houden.
Een donkerblauwe achtergrond met zwarte letters wordt een zoekplaatje.
Verder: links zijn meestal blauw, rood en paars.
Als je die kleuren ook voor andere doelen gebruikt, kan onduidelijkheid ontstaan over wat nu een link is.
(Stel: je hebt een rode achtergrond met blauwe tekst:
o je ziet nauwelijks wat nu een link is
o als "zwevende kleuren gebruiken" is ingesteld in de browser, valt de tekst van een link weg zodra je eroverheen gaat.)
Het leuke van HTML is dat jij makkelijk wat kleurtjes aan jouw werk kunt toevoegen.
Die kleuren kunnen betrekking hebben op de achtergrond van de pagina (de kleur van het papier, als het ware) en de kleur van de tekst.
Officieel moeten kleuren worden opgegeven in hexadecimale code, maar dat is tamelijk lastig. In de praktijk zou je ermee uit de voeten kunnen dat browsers een flink aantal kleuren kennen, die gewoon bij hun (engelse) naam aangeduid kunnen worden. Meestal wordt, behalve de hoofdkleur ("blue"), ook "lightblue" en "darkblue" herkend. Gewoon proberen, als het niet herkend wordt merkt jij dat vanzelf.
Je kan zowel gekleurde achtergronden (de kleur van het papier, om het zo maar eens te zeggen) als gekleurde tekst gebruiken.
Een achtergrondkleur (background)geef je op door dat aan de tag BODY toe te voegen.
Voor een rode achtergrond gebruik je de tag:
<BODY BGCOLOR="red">
Probeer gewoon een paar kleuren uit.
Als die kleur niet bekend is, gebruikt de browser de standaardkleur die de gebruiker heeft ingesteld.
Een tekst voorzie je van een kleur door de volgende tag te gebruiken:
<FONT COLOR="naamvandekleur"> ... </FONT>.
Voorbeeld: ik vind dit wel een nette kleur, dat donkerrood.
Bij het gebruik van kleuren is het nuttig het totale effect in de gaten te houden.
Een donkerblauwe achtergrond met zwarte letters wordt een zoekplaatje.
Verder: links zijn meestal blauw, rood en paars.
Als je die kleuren ook voor andere doelen gebruikt, kan onduidelijkheid ontstaan over wat nu een link is.
(Stel: je hebt een rode achtergrond met blauwe tekst:
o je ziet nauwelijks wat nu een link is
o als "zwevende kleuren gebruiken" is ingesteld in de browser, valt de tekst van een link weg zodra je eroverheen gaat.)