Websiteopmaak
Navigatie
1. Opmaak
1.1 Lettergroote
1.1.1 Koppen of hoofddingen
1.2 Lettertypes
1.3 Tekstkleur
1.4 Positie
1.4.1 Alineas
1.5 Speciale tekens
1.6 Afbeeldingen
1.7 Hyperlinks
1.8 Achtergrond
1.9 Achtergrondmuziek
1. Opmaak
De opmaak kun je met verschillende dingen bepalen.Niet alleen de
Lettergrootte,Lettertypes,tekstkleur maar ook de posities.Het is noodzakelijk om
je site ordelijk en overzichtelijk te houden.Na deze tutorial zal dit al veel
beter lukken.
top
1.1 Lettergrootte
Lettergrootte kan je instellen met de volgende twee tags:
<h>...</h>
tag voor hoofddingen (ga naar 1.1.1 voor meer info) en <font size="grootte">...</font>
voor gewone tekst.Grootte druk je uit in punten.
Voorbeeld:
<font size="3pt">Tekst</font>
top
1.1.1 Koppen of hoofddingen
In een normale website begint een stuk tekst met een kop die
de naam of het onderwerp bevat.Daarna komt de tekst in een normale
lettergrootte.
De tag voor zo'n kop is <H..> tekst van de kop </H..>.
Op de puntjes staat een getal tussen 1 en 7 (zonder spatie, dus "H1" en
"/H1"). In de praktijk zult u waarschijnlijk alleen 1, 2 en 3
gebruiken; 4 t/m 7 zijn namelijk kleiner dan de gewone letter. (Die "H"
staat voor "header", ofwel een tussenkop in een document. In documenten
kunt u daarmee proberen enige ordening in uw gedachtengang aan te
brengen. En tekstverwerkers gebruiken die koppen als ze inhoudsopgaven
gaan genereren.
top
1.2 Lettertypes
Lettertypes kan je instellen met de volgende tag:
<font face="lettertype">
Ook kun je de volgende code gebruiken om de tekst anders te weergeven
schuin <i></i>
Vet <b></b>
onderstreept <u> </u>
top
1.3 Tekstkleur
Opmaak
bevat ook nog tekstkleur.Je kan de tekstkleur instellen met <font color=#hexwaarde></font> of kleurnaam (bv <font color="blue"></font> ) Kleuren kun je hexadecimaal aangeven of met hun
engelse naam.Bij de hexwaarde wordt voorgesteld door 3 hexadecimale getallen van
00 tot FF, waarin het linker de hoeveelheid rode kleur voorstelt, het middelste
de groene kleur, en het rechter de blauwe kleur.Hieronder vind je de binaire
code's.
Standaartkleuren Windows:
| CC0000 |
FF0000 |
CC00CC |
FF00FF |
0000CC |
0000FF |
00CCCC |
00FFFF |
00CC00 |
00FF00 |
CCCC00 |
FFFFCC |
000000 |
999999 |
CCCCCC |
FFFFFF |
Netscape (216 kleuren):
| 330000 |
333300 |
336600 |
339900 |
33CC00 |
33FF00 |
66FF00 |
66CC00 |
669900 |
666600 |
663300 |
660000 |
FF0000 |
FF3300 |
FF6600 |
FF9900 |
FFCC00 |
FFFF00 |
| 330033 |
333333 |
336633 |
339933 |
33CC33 |
33FF33 |
66FF33 |
66CC33 |
669933 |
666633 |
663333 |
660033 |
FF0033 |
FF3333 |
FF6633 |
FF9933 |
FFCC33 |
FFFF33 |
| 330066 |
333366 |
336666 |
339966 |
33CC66 |
33FF66 |
66FF66 |
66CC66 |
669966 |
666666 |
663366 |
660066 |
FF0066 |
FF3366 |
FF6666 |
FF9966 |
FFCC66 |
FFFF66 |
| 330099 |
333399 |
336699 |
339999 |
33CC99 |
33FF99 |
66FF99 |
66CC99 |
669999 |
666699 |
663399 |
660099 |
FF0099 |
FF3399 |
FF6699 |
FF9999 |
FFCC99 |
FFFF99 |
| 3300CC |
3333CC |
3366CC |
3399CC |
33CCCC |
33FFCC |
66FFCC |
66CCCC |
6699CC |
6666CC |
6633CC |
6600CC |
FF00CC |
FF33CC |
FF66CC |
FF99CC |
FFCCCC |
FFFFCC |
| 3300FF |
3333FF |
3366FF |
3399FF |
33CCFF |
33FFFF |
66FFFF |
66CCFF |
6699FF |
6666FF |
6633FF |
6600FF |
FF00FF |
FF33FF |
FF66FF |
FF99FF |
FFCCFF |
FFFFFF |
| 0000FF |
0033FF |
0066FF |
0099FF |
00CCFF |
00FFFF |
99FFFF |
99CCFF |
9999FF |
9966FF |
9933FF |
9900FF |
CC00FF |
CC33FF |
CC66FF |
CC99FF |
CCCCFF |
CCFFFF |
| 0000CC |
0033CC |
0066CC |
0099CC |
00CCCC |
00FFCC |
99FFCC |
99CCCC |
9999CC |
9966CC |
9933CC |
9900CC |
CC00CC |
CC33CC |
CC66CC |
CC99CC |
CCCCCC |
CCFFCC |
| 000099 |
003399 |
006699 |
009999 |
00CC99 |
00FF99 |
99FF99 |
99CC99 |
999999 |
996699 |
993399 |
990099 |
CC0099 |
CC3399 |
CC6699 |
CC9999 |
CCCC99 |
CCFF99 |
| 000066 |
003366 |
006666 |
009966 |
00CC66 |
00FF66 |
99FF66 |
99CC66 |
999966 |
996666 |
993366 |
990066 |
CC0066 |
CC3366 |
CC6666 |
CC9966 |
CCCC66 |
CCFF66 |
| 000033 |
003333 |
006633 |
009933 |
00CC33 |
00FF33 |
99FF33 |
99CC33 |
999933 |
996633 |
993333 |
990033 |
CC0033 |
CC3333 |
CC6633 |
CC9933 |
CCCC33 |
CCFF33 |
| 000000 |
003300 |
006600 |
009900 |
00CC00 |
00FF00 |
99FF00 |
99CC00 |
999900 |
996600 |
993300 |
990000 |
CC0000 |
CC3300 |
CC6600 |
CC9900 |
CCCC00 |
CCFF00 |
Grijswaarden:
| 000000 |
333333 |
666666 |
999999 |
CCCCCC |
FFFFFF |
top
(Dank aan
RickyB voor de kleurenpaletten.)
1.4 Positie
Je
zal gemerkt hebben dat je geen controle hebt over de plaatsing van de tekst. Met
de pargraaftag <p align="positie>...</p> kun je hieraan al verhelpen. Elke
paragraaf zet je tussen deze tags. Er zijn 4 posities:
Rechts: right
Links: left
midden: Center
Gelijk: Justify
top
1.4.1 Alineas
Een alinea is een witregel tussen bepaalde stukken tekst terug om er orde en
structuur in te steken.Een alinea kun je invoegen met <p>...</p>.De p staat voor
paragraph.Je kunt natuurlijk ook <br> gebruiken.Dit is dan gewoon een nieuwe
regel beginnen.
top
1.5 Speciale tekens
Meestal in een site heb je ook speciale tekens nodig zoals voor op
de copyright,eurotekens,...De meeste hiervan staan niet op je toetsenbord.Je
kunt dit heel gemakkelijk toevoegen door naar START=>ALLE PROGRAMMA'S=>BUREAU-ACCESSOIRES=>SYSTEEMWERKSET=>SPECIALE
TEKENS te gaan.
Je kan ook onmiddelijk een code invoegen.Hieronder enkele veelvoorkomende tekens
met hun code:
| Naam |
Teken |
Code |
| Copyright |
© |
© |
| Registered |
® |
® |
| Trademark |
™ |
™ |
| Pound |
£ |
£ |
| Yen |
¥ |
¥ |
| Euro |
€ |
€ |
| Paragraaf |
§ |
§ |
| Een-vierde |
¼ |
¼ |
| Een-half |
½ |
½ |
| Drie-vierde |
¾ |
¼ |
top
1.6 Afbeeldingen
Je
kunt ook afbeeldingen invoegen op je site.Dit doe je heel eenvoudig met het
volgende scriptje:
| <img src="afbeelding.jpg">
|
De Img staat voor Image en src staat voor source: Image Source,
de bron van de afbeelding.
Je kunt de afbeelding ook groter of kleiner maken.Dit doe je door de script aan
te vullen met height" en "width".
Voorbeeld:
| <img src="afbeelding.jpg"
width="150"
height="150">
|
Verder kun je nog een "alternatieve tekst" onvoegen.Deze word dan weergeven als
je met je cursor over de afbeelding gaat.Dit doe je met "alt".Dat word dan
| <img src="afbeelding.jpg"
width="150"
height="150"
alt="Hier je tekst
over de afbeelding">
|
Je kunt ook een hyperlink aan je afbeelding koppelen.Wanneer men er dan op
klikt gaat men naar die site.Dit doe je zo:
| <a href="http://www.sitemasters.be"><img src="afbeelding.jpg"
width="150"
height="150">
</a> |
Hier is het wel irritant dat je soms een rand hebt.Dit kun je uitschakelen door
border="0" er aan toe te voegen.Dit word dan
| <a href="http://www.sitemasters.be"><img src="afbeelding.jpg"
width="150"
height="150" border="0"> </a> |
Wat je verder ook nog kan doen is de afstand tot de rand bepalen van de
linkerkant (hspace) en de bovenkant (vspace).
Tip:H staat voor Horizontaal; V staat voor Verticaal
| <img src="afbeelding.jpg"
width="150"
height="150"
vspace="30"
hspace="40">
|
Resultaat:
Tip: Voeg niet teveel afbeeldingen in.Hierdoor laat je site trager en dit kan
dan weer een negatief effect hebben
Voor een uitgebreidere tutorial over afbeeldingen gebruik deze:
Afbeeldingen
top
1.7 Hyperlinks
Ook handig als je een site wil maken en er een beetje orde wil in steken zijn hyperlinks.Je
kunt hiermee je site spreiden over meerdere pagina's.Bv een pagina met
foto's,een pagina met een welkomtekstje en ga zo maar door.Een hyperlink kan je
een invoegen met
| <ahref="http://www.sitemasters.be">Sitemasters</a>
|
Hierdoor krijg je dit sitemasters als
resultaat.
Ook is het soms handig dat je wat uitleg krijgt als je over je link gaat met je muis.Dit gebeurt met title="Info".
Meer info over hyperlinks vind je hier:
Hyperlinks
top
1.8 Achtergrond
Wat zou een site nu zijn zonder een achtergrond?Juist,niets.Een achtergrond
kun je heel eenvoudig invoegen met
|
<body
background="afbeelding.jpg"> |
Je kunt het ook natuurlijk
soberder houden met een kleur alleen.Er is niet veel verschil hierin.Dit is gewoon
met het volgende scriptje
top
1.9 Achtergrondmuziekje
Ook altijd leuk is een achtergrondmuziekje.Dit kun je doen met behulp van het
volgend scriptje:
Hier word het muziekje maar een keer afgespeelt.Wanneer je wilt dat dit meerdere
keren gebeurt moet je het zo doen:
| <bgsound
src="file.wav"
loop="-1"> |
(Meer over achtergrondmuziek invoegen vind je hier:
Achtergrondmuziek
top
Dit was het dan.Ik hoop dat jullie iets bijgeleerd hebben en voor vragen moet
jullie me maar pm'en
|
