login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > HTML

Gegevens:
Geschreven door:
 gamesty
Moeilijkheidsgraad:
 Gemakkelijk
Hits:
 14379
Punten:
Aantal punten:
  (2.25)
Aantal stemmen:
 12
Stem:
 Niet ingelogd
Nota's:
 Post een nota
 Lees de nota's (12)
 


Tutorial:

Websiteopmaak


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 © &copy;
Registered ® &reg;
Trademark ™ &#153;
Pound £ &pound;
Yen ¥ &yen;
Euro € &euro;
Paragraaf § &sect;
Een-vierde ¼ &frac14;
Een-half ½ &frac12;
Drie-vierde ¾ &frac14;
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  
<body bgcolor="#FFFFFF">
top
1.9 Achtergrondmuziekje
Ook altijd leuk is een achtergrondmuziekje.Dit kun je doen met behulp van het volgend scriptje:
<bgsound src="file.wav">
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




« Vorige tutorial : Achtergrondmuziek Volgende tutorial : W3C Validatie »

© 2002-2010 Sitemasters.be - Regels - Gehost door: Netfeed - Laadtijd: 0.011s