HTML les 2

HTML

Les 2

Maak je eerste webpagina

bgcolor
De eerste pagina was leuk om te zien, maar een beetje bleekjes. De achtergrond was wit en de letter zwart. Leuk wordt het als men kleuren gaat gebruiken. We onderscheiden achtergrond keuren en tekstkleuren. Als men geen kleuren kiest zoals in het eerste voorbeeld blijft het zwart wit.
Er zijn twee manieren om met kleuren om te gaan. De makkelijkste is om de kleuren bij naam te noemen. Wenst men bvb een zwarte achtergrond dan luid de instructie aan het begin van de pagina in het body gedeelte
<body bgcolor="black" >
bgcolor is een samenvoeging van back ground en color

text
De tekst kleur wordt in de zelfde body instructie ingevoerd met bvb text="red"
De volledige instructie luid dan als volgt:
<body bgcolor="black" text="red" >

De kleuren zijn trouwens zelf aan te passen. De basis voor alle kleuren is R G B rood groen en blauw.

#rrggbb
De instructie om de kleuren zelf samen te stellen moet aan het formaat #rrggbb voldoen. De kleuren combinaties worden in dubbel hexadecimale notaties weergegeven. Het # voor de notatie geeft aan dat het hexadecimale talstelsel wordt gebruikt. #ff0000 geeft de kleur rood weer met de meeste helderheid. De andere twee kleuren doen op dit momnet niet mee, vandaar de nullen.
ff is de hoogste notering en dus de hoogste helderheid.
cc is 80% van de helderheid.
99 is 60% van de helderheid.
66 is 40% van de helderheid.
33 is nog maar slechts 20% van de helderheid.
00 is geen notatie van de basiskleur.

Om de tekst groen te laten verschijnen is de instructie <body text="#00ff00" >

Voor een grijze achtergrond is de instructie <body bgcolor="#999999" >

Als alle kleuren vol aan staan bvb ff ff ff dan hebben wij een witte achtergrond en als alles uit staat 00 00 00 is de achtergrond zwart.

font color
Als een tekstkleur eenmaal is aangegeven dan blijft de kleur in het hele document gehandhaafd. Er zijn echter redenen genoeg om een woord een andere kleur te geven.
Daarvoor gebruikt m,en de instructie font color. Als in een tekst het woord VERASSING een andere kleur moet hebben dan de rest van de tekst, maken wij gebruik van de volgende instructie:
 VERRASSING .
Het resultaat is dan ook dat alleen VERASSING rood is en de rest zijn normale kleur heeft. Er moet wel aandacht aan het feit worden geschonken dat de kleur weer wordt uitgeschakeld door .

background
Als een achtergrondkleur niet voldoende aandacht trekt dan is er nog een mogelijkheid om de achtergrond met de body instructie background een plaatje of patroon op de achtergrond te laten zien. Dit kan de pagina mooi verfraaien. Er moet wel op worden gelet dat de tekst nog leesbaar blijft en de achtergrond niet te dominant (overheersend) is. Als het achtergrondplaatje kleiner is dan het scherm, zal de brouwser het plaatje herhalen totdat het scherm gevuld is. Een voorbeeld van een achtergrondpatroon dat wordt herhaald ziet met op de DOE DE TEST pagina’s. Hiervoor zijn enkele nullen op een zwarte achtergrond gebruikt. De brouwser herhaald het patroon totdat de pagina vol is. De achterkant wordt als het ware behangen met nullen. Het grafische bestandje is een GIF bestand en heet nullen.gif. De instructie om te behangen luid:
<body background="nullen.gif">
Let er op dat het inladen van een groot achtergrond foto veel tijd kost. Gebruik geen bmp bestanden. Deze zijn stukken groter dan gif of jpg.

<big>
Over groot gesproken, de instructie <big> laat alles enkele punten groter verschijnen. Zo las te zien is, is de instructie ook te stapelen. Ook hier geld dat met </big> de instructie uitgeschakeld word.


Het tegenovergestelde van big is small, de instructie laat alles enkele punte kleiner verschijnen. Ook hier geld dat met de instructie uitgeschakeld word.


Bold is de Tag voor Vet weergeven
En met  wordt Bold uitgeschakled.


Italic is de Tag voor  schuin en met  terug naar normale tekst.


Underline is de Tag voor  onderstreept  terug naar normale tekst.




De instructie ^{ betekend superscript(bovenop).} en moet ook in de 2^e les worden uitgezet. 2e
Waar zouden wij zijn zonder H₂O (water)?
H2O Subsript (onderaan).

<center>
Uiteraard kan in HTML ook gecentreerd worden. Daarvoor is de instructie
<center>.
Mocht vergeten worden
de instructie uit te zetten
ziet de tekst er uit
als een menukaart.
</center> loste het probleem op.

<HR>
Om stukken tekst van elkaar te scheiden is het handig om gebruik te maken van een horizontale lijn. De instructie <HR> wordt hier veelvuldig toegepast. <HR> staat overigens voor Horizontal Rule en kend nog enkele opties. Zo is de kleur van de streep en de dikte, maar ook de lengte in te stellen.
<HR color="red" size="4" width="50%> geeft de volgende streep.

GO
Met een zwarte achtergrond en verschillende kleuren ziet de pagina opeens anders uit.

Maak nu je volgende webpagina.

Samenvattend:

De achtergrondkleur wordt bepaald met de instructie
<body bgcolor="black" >

De tekstkleur wordt bepaald met de instructie
<body text="red" >

De RGB tekstkleurinstelling is <body text="#00ff00">.

Tussentijdse kleurinstellingen van de tekst wordt bereikt met:
 TEKST 

Een achtergrond patroon of afbeelding luistert naar de instructie:
<body background="bestandsnaam">.

Groter dan de rest bereikt men met <big> en uit met </big>.

Kleiner dan de rest bereikt men met en uit met .

Subscript en Superscrip bereik je met en en uit met en .

Onderstrepen wordt gedaan met en .

Vet afdrukken wordt gedaan met en .

Schuine tekst wordt gedaan met en .

Centreren wordt gedaan met <center> en </center>.

De horizontale streep is <hr/>.

Bij nul fouten doorgaan

HTML

Les 2

Maak je eerste webpagina

bgcolor

text

#rrggbb

font color

background

<big>

<small>

<B>

<I>

<U>

<sup>

<sub>

<center>

<HR>

GO

Samenvattend:

HTML Les 2	Maak je eerste webpagina

bgcolor	De eerste pagina was leuk om te zien, maar een beetje bleekjes. De achtergrond was wit en de letter zwart. Leuk wordt het als men kleuren gaat gebruiken. We onderscheiden achtergrond keuren en tekstkleuren. Als men geen kleuren kiest zoals in het eerste voorbeeld blijft het zwart wit. Er zijn twee manieren om met kleuren om te gaan. De makkelijkste is om de kleuren bij naam te noemen. Wenst men bvb een zwarte achtergrond dan luid de instructie aan het begin van de pagina in het body gedeelte <body bgcolor="black" > bgcolor is een samenvoeging van back ground en color
text	De tekst kleur wordt in de zelfde body instructie ingevoerd met bvb text="red" De volledige instructie luid dan als volgt: <body bgcolor="black" text="red" > De kleuren zijn trouwens zelf aan te passen. De basis voor alle kleuren is R G B rood groen en blauw.
#rrggbb	De instructie om de kleuren zelf samen te stellen moet aan het formaat #rrggbb voldoen. De kleuren combinaties worden in dubbel hexadecimale notaties weergegeven. Het # voor de notatie geeft aan dat het hexadecimale talstelsel wordt gebruikt. #ff0000 geeft de kleur rood weer met de meeste helderheid. De andere twee kleuren doen op dit momnet niet mee, vandaar de nullen. ff is de hoogste notering en dus de hoogste helderheid. cc is 80% van de helderheid. 99 is 60% van de helderheid. 66 is 40% van de helderheid. 33 is nog maar slechts 20% van de helderheid. 00 is geen notatie van de basiskleur. Om de tekst groen te laten verschijnen is de instructie <body text="#00ff00" > Voor een grijze achtergrond is de instructie <body bgcolor="#999999" > Als alle kleuren vol aan staan bvb ff ff ff dan hebben wij een witte achtergrond en als alles uit staat 00 00 00 is de achtergrond zwart.
font color	Als een tekstkleur eenmaal is aangegeven dan blijft de kleur in het hele document gehandhaafd. Er zijn echter redenen genoeg om een woord een andere kleur te geven. Daarvoor gebruikt m,en de instructie font color. Als in een tekst het woord VERASSING een andere kleur moet hebben dan de rest van de tekst, maken wij gebruik van de volgende instructie: <font color="red"> VERRASSING </font>. Het resultaat is dan ook dat alleen VERASSING rood is en de rest zijn normale kleur heeft. Er moet wel aandacht aan het feit worden geschonken dat de kleur weer wordt uitgeschakeld door </font>.
background	Als een achtergrondkleur niet voldoende aandacht trekt dan is er nog een mogelijkheid om de achtergrond met de body instructie background een plaatje of patroon op de achtergrond te laten zien. Dit kan de pagina mooi verfraaien. Er moet wel op worden gelet dat de tekst nog leesbaar blijft en de achtergrond niet te dominant (overheersend) is. Als het achtergrondplaatje kleiner is dan het scherm, zal de brouwser het plaatje herhalen totdat het scherm gevuld is. Een voorbeeld van een achtergrondpatroon dat wordt herhaald ziet met op de DOE DE TEST pagina’s. Hiervoor zijn enkele nullen op een zwarte achtergrond gebruikt. De brouwser herhaald het patroon totdat de pagina vol is. De achterkant wordt als het ware behangen met nullen. Het grafische bestandje is een GIF bestand en heet nullen.gif. De instructie om te behangen luid: <body background="nullen.gif"> Let er op dat het inladen van een groot achtergrond foto veel tijd kost. Gebruik geen bmp bestanden. Deze zijn stukken groter dan gif of jpg.
<big>	Over groot gesproken, de instructie <big> laat alles enkele punten groter verschijnen. Zo las te zien is, is de instructie ook te stapelen. Ook hier geld dat met </big> de instructie uitgeschakeld word.
<small>	Het tegenovergestelde van big is small, de instructie <small> laat alles enkele punte kleiner verschijnen. Ook hier geld dat met </small> de instructie uitgeschakeld word.
<B>	Bold is de Tag voor <B> Vet weergeven En met </B> wordt Bold uitgeschakled.
<I>	Italic is de Tag voor *<I> schuin en met* </I>** terug naar normale tekst.
<U>	Underline is de Tag voor <U> onderstreept </U> terug naar normale tekst.
<sup> <sub>	De instructie ^{<sup> betekend superscript(bovenop).} en moet </sup> ook in de 2^e les worden uitgezet. 2<sup>e</sup> Waar zouden wij zijn zonder H₂O (water)? H<sub>2</sub>O Subsript (onderaan).
<center>	Uiteraard kan in HTML ook gecentreerd worden. Daarvoor is de instructie <center>. Mocht vergeten worden de instructie uit te zetten ziet de tekst er uit als een menukaart. </center> loste het probleem op.
<HR>	Om stukken tekst van elkaar te scheiden is het handig om gebruik te maken van een horizontale lijn. De instructie <HR> wordt hier veelvuldig toegepast. <HR> staat overigens voor Horizontal Rule en kend nog enkele opties. Zo is de kleur van de streep en de dikte, maar ook de lengte in te stellen. <HR color="red" size="4" width="50%> geeft de volgende streep.
GO	Met een zwarte achtergrond en verschillende kleuren ziet de pagina opeens anders uit.


	Maak nu je volgende webpagina.
	Samenvattend: De achtergrondkleur wordt bepaald met de instructie <body bgcolor="black" > De tekstkleur wordt bepaald met de instructie <body text="red" > De RGB tekstkleurinstelling is <body text="#00ff00">. Tussentijdse kleurinstellingen van de tekst wordt bereikt met: <font color="red"> TEKST </font> Een achtergrond patroon of afbeelding luistert naar de instructie: <body background="bestandsnaam">. Groter dan de rest bereikt men met <big> en uit met </big>. Kleiner dan de rest bereikt men met <small> en uit met </small>. Subscript en Superscrip bereik je met <sub> en <sup> en uit met </sub> en </sup>. Onderstrepen wordt gedaan met <U> en </U>. Vet afdrukken wordt gedaan met <B> en </B>. Schuine tekst wordt gedaan met <I> en </I>. Centreren wordt gedaan met <center> en </center>. De horizontale streep is <hr/>.
	Bij nul fouten doorgaan