| |
Hieronder is te vinden hoe je om kunt gaan met je profiel site.
Tevens zijn er de toegestande HTML codes te vinden. Elke andere
HTML tag, zal automatisch verwijderd worden bij het wijzigen van
je profiel. Let daar dus op. Onderstaande HTML tags zijn dus wel
allemaal gewoon bruikbaar in je profiel!
Om je profiel site aan te kleden, heb je HTML codes nodig. Informatie over deze codes en hoe je ze moet gebruiken, is op deze pagina te vinden:
Html is een computertaal waar websites mee gemaakt worden. Voordat je op je profiel in het wilde weg html codes gaat typen, is het wel belangrijk om te weten waar je mee bezig bent. Hoe html in elkaar zit en waar je op moet letten. Als je fouten maakt, kan het gebeuren dat er een gedeelte van je profiel gewist wordt! Hier staan een aantal punten waar je goed op moet letten, lees dit dus gewoon eens door op je gemakje om latere problemen te voorkomen.
1. De codes (tags) die je hier tegenkomt typ je gewoon op de plek waar je ook je tekst typt. Dus bij profiel bewerken in het grote tekstvak.
2. Let op dat je geen kleine dingen vergeet in je code, deze zijn juist belangrijk!
- Alle codes staan tussen de < en de >.
- Kijk goed naar de voorbeeld codes op deze pagina, verander alleen de niet vet gedrukte stukken. Let goed op de = en al helemaal op de ".
3. Je geeft altijd aan waar de code moet beginnen én waar hij moet stoppen. Wil je bijvoorbeeld een kleur in je tekst dan doe je dat zo:
| <font color="blue"> |
De tekst die je blauw wilt hebben |
</font> |
| Begin van de kleur |
De tekst |
Hier stopt de kleur |
Het is héél belangrijk dat je de codes afsluit. Als je dit vergeet kunnen er fouten optreden!
4. Als je meerdere codes gebruikt moet je er voor zorgen dat je ze ook weer in de goede volgorde afsluit!
Stel je wil een stukje tekst blauw en ook schuin gedrukt. Doe dit op deze manier om problemen te voorkomen.
| <font color="blue"> |
<i> |
Blauwe én schuine tekst |
</i> |
</font> |
| Code1 |
Code2 |
De tekst |
Code2 |
Code1 |
|
Het is altijd verstandig om je profiel ook op je
eigen computer op te slaan. Mocht je door een foutje, of
door iemand die achter je wachtwoord is gekomen, ineens
je profiel kwijt zijn, kun je hem er snel weer opzetten.
Zo hoef je dus nooit je profiel opnieuw te maken. Hier
kan je lezen hoe je je profiel op kunt slaan op je eigen
computer. Deze uitleg is gebaseerd op iemand met een
Windows computer:
- Maak ergens op je pc een nieuw tekstbestandje, dit
kan een 'word' (.doc) bestand zijn maar ook een
'Notepad' (.txt) bestandje.
- Open deze en ga naar log in op je account.
Klik met je muis ergens in je eigen tekst en druk
"ctrl+a".
- Nu de tekst geselecteerd is, druk je
"ctrl+c" (je ziet niets gebeuren maar je
pc onthoudt nu de tekst).
- Nu ga je naar het tekst bestand en druk je
"ctrl+v". De tekst wordt nu in je document
'geplakt'. Sla je bestandje op en bewaar hem goed.
|
Iedereen kent het wel. Schuine, dikke en onderstreepte woorden, maar hoe doe je dat nou in je profiel?
<b>tekst </b>
Zo maak je een woord of stukje tekst vet gedrukt.
<i>tekst </i>
Op deze manier wordt het woord of stukje tekst schuin gedrukt.
<u>tekst </u>
Met de 'u' van 'underline' krijg je een onderstreept woord of een onderstreept stukje tekst.
<i><b>tekst </b></i>
Zo krijg je een schuine dikke tekst. De code die je als eerst typt moet als laatst afgesloten worden.
<i><b>tekst </i></b>
Deze volgorde zou dus fout zijn!
|
Je kunt verschillende dingen doen met tekst om het er mooier
uit te laten zien. Je kunt de tekst een ander lettertype
geven, groter maken of een andere kleur geven:
<font face="arial"> tekst </font>
Hiermee geef je een stuk tekst een ander lettertype. Je
kunt "arial" veranderen. Let er wel op dat
niet iedereen dezelfde lettertypes op zijn computer
heeft staan! Heeft diegene jouw opgegeven lettertype
niet, dan wordt het standaard lettertype weergegeven.
<font size="3"> tekst </font>
Dit is de html code voor de grootte van je letters. De
standaard waarde "3" kun je veranderen in 1 t/m 7
waarbij de 1 een kleine tekst geeft en 7 een hele grote.
<font color="blue"> tekst </font>
Zo kan je een stuk tekst een kleur geven, "blue" kun je
weer veranderen in elke kleur die je maar kunt bedenken.
Let erop dat je de kleuren altijd in het Engels noteert!
|
Stel je
wilt een stukje tekst een ander lettertype geven maar ook
een andere kleur én nog een andere grootte. Dan is het
natuurlijk heel veel werk om al die codes achter elkaar
te typen en het is erg onoverzichtelijk. Daarom kan je
de codes samen samenvoegen:
<font face="arial" size="4" color="yellow"> tekst </font>
Op deze manier maak je van de drie codes één code. Nu
hoef je ook maar één keer </font> te typen. Kijk
er maar eens goed naar en probeer het een keer.
|
Het is ook mogelijk om zelf met html een link te maken. Zo kan
je zelf bepalen wat voor tekst er op je profiel
zichtbaar is:
<a
href="hier het adres"> Tekst </a>
Voorbeeld: <a href="http://www.internetadres.nl"> Klik
hier voor internetadres.nl! </a>
Bij het gebruik van bovenstaande code wordt sterk aangeraden om het
volgende erbij te zetten:
<a
href="hier het adres" target="_blank"> Tekst </a>
target="_blank" zorgt er namelijk voor dat de link in een
nieuw venster wordt geopend!
|
Je kan ook een link maken zodat mensen je kunnen mailen. Na een klik wordt hun e-mail programma geopend met jouw e-mail adres erin:
<a href="mailto:e-mail@adres.nl">Mail me</a>
|
Je kan bovenaan je pagina een index maken zodat mensen meteen op het stukje van jouw profiel zijn waar ze willen zijn. Dit is natuurlijk erg handig als je veel verschillende dingen op je profiel hebt
staan:
<a
name="sport"></a>
Zo geef je een plek in je profiel een naam.
Typ, waar nu "sport" staat, één woord in waar het stukje tekst over gaat. En zet de code voor de eerste regel of het kopje van het stukje tekst. Nu moet je een link maken naar dit stukje tekst.
Dat doe je op de volgende manier:
<a href="#sport">Sport</a>
Zo maak je een link naar dat stukje tekst.
|
Stel je ziet een leuk plaatje op een website en je wilt het plaatje ook op jouw profiel site hebben. Dit kan een bewegend plaatje (.gif plaatje) zijn of gewoon een stilstaand plaatje.
Hiervoor moet je eerst het adres van het plaatje hebben. Deze zoek je zo op:
1. Rechterklik op het plaatje.
2. Kiezen voor "eigenschappen".
3. Daar zie je het adres staan (de url). Dit is een gewoon internet adres die
altijd begint met 'http://'. Let ook op het verschil in hoofdletters.
Heb je het adres dan zet je deze in de volgende code:
<img src="hier het adres">
voorbeeld: <img src="http://www.url.nl/hetplaatje.jpg">
|
Als je een plaatje op je profiel hebt gezet, kun je
er een randje omheen maken. Dit kun je op 2 manieren
doen:
Wil je een simpel randje om je foto of plaatje doe dat dan zo:
<img src="vul hier het adres in" border="2">
De 2 kan je veranderen. Een groter getal staat voor een bredere rand.
Als je een 'mooi' randje wilt hebben, kun je dat zo doen:
<img style="border: 3 ridge white" src="vul hier het adres in">
- De 3 staat voor de dikte. Je kunt de rand dus zelf breder of smaller maken.
- Naast ridge heb je ook nog outset, inset, solid, dotted, dashed, double of groove.
- White kan je veranderen in elke kleur.
|
Ook van
plaatjes kun je een link maken. Dit is eigenlijk niets
meer dan de codes in de goede volgorde achter elkaar
zetten.
| Eerst de code voor een link: |
<a href="http://www.voorbeeld.nl"> |
| Nu die van een plaatje: |
<img src="vul hier het adres in"> |
| Dan het einde van de link aangeven: |
</a> |
Dus:
<a href="http://www.voorbeeld.nl"><img
src="vul hier het adres in"></a>
|
Er zijn nog een
paar extra html codes om je profiel mooier de maken. Dit
zijn dingen als de achtergrondkleur van je profiel, een randje
om je profiel en je plaatjes vergroten en verkleinen. Hieronder
vind je een paar tips:
|
Je kunt met html de
achtergrondkleur van je profiel aanpassen. Het is ook mogelijk
een deel de ene kleur te doen en een deel de andere kleur:
<div style="background-color: orange; width:640px"> tekst etc.. </div>
Zet deze op de plek waar je wilt dat de achtergrondkleur begint!
Je kunt orange natuurlijk veranderen in de kleur die jij wilt. Je
kunt met </div> aangeven waar de achtergrond kleur moet
stoppen.
|
Het is
niet alleen mogelijk een rand om een plaatje te doen,
het is ook mogelijk om een randje om heel je profiel te
maken:
<div style="background-color: orange; width:640px; border: 3 ridge white">
Zet deze code helemaal aan het begin van je profiel. De 3
staat voor de dikte van de rand. Je kunt de rand dus
zelf breder of smaller maken. Je kunt een andere rand
krijgen door ridge te vervangen door outset, inset,
solid, dotted, dashed, double of groove. White kan je
veranderen in elke kleur.
|
|
Heb je html al
een beetje onder de knie dan is dit de volgende stap. Begin
hier dus nog maar niet aan als je de rest nog niet
helemaal door hebt ;).
Het is mogelijk om hokjes in je profiel te zetten.
Daar kun je dan weer tekst of plaatjes inzetten. Ook is
het mogelijk die hokjes een achtergrond
kleur te geven en er een randje omheen te doen.
<div
style="background-color: orange; width:500px;
height:300px; border: 1 solid black">
Hier alles wat je in het hokje wilt hebben
</div>
Zoals je misschien wel ziet, is
de code bijna hetzelfde als die voor de achtergrond kleur van
je profiel + rand. Nu maak je hem alleen een stuk
smaller en je geeft de hoogte aan. Voor de verschillende randjes kun je
het stukje hierboven lezen "een rand om je profiel
maken".
Het is ook mogelijk 2 of meer vakjes naast elkaar te
zetten. Hiervoor moet je wel een beetje weten waar je
mee bezig bent. En zijn een aantal codes die je in
bovenstaande code kunt verwerken om je hokje de goede
positie te geven.
Voorbeelden daarvan zijn: "margin-top: 100px", "float:right;margin-right: 100px",
"float:left;margin-left: 100px", en "margin-bottom: 100px"
Je zou nu zo'n code kunnen maken:
<div style="background-color: #008b8b; width:200px;
height:100px;border: 1 solid black;float:left;margin-left:40px">Hier
de inhoud van hokje 1</div><div style="background-color:
#008b8b; width:200px; height:100px;border:
1 solid black; float:right;margin-right:40px">Hier
de inhoud van hokje 2</div>
Dit gaat er ongeveer zo uitzien:
Hier de inhoud van hokje 1 Hier de inhoud van hokje 2
Zorg ervoor dat je de 2e div meteen achter het afsluiten
van de 1e div zet anders komen ze niet op de zelfde
hoogte. Als je onder de hokjes verder gaat met een tekst
zul je merken dat het tussen de hokjes begint. Dat is
natuurlijk niet de bedoeling. Een trucje om dit te
verkomen, is door een lijn onder de hokjes te plaatsen in
de kleur van je achtergrond. Zo heb je een onzichtbare
scheiding gemaakt. Bij een zwarte achtergrond:
<hr
width="638" size="1"
color="black">
Lees onderaan deze pagina meer
informatie over lijnen op je profiel.
|
Als je tekst en/of plaatjes in een tekstvak wilt met een
scrollbalk, doe je dit op zelfde manier als hierboven.
Alleen is er nu nog een extra code die je moet
toevoegen:
<div style="background-color: orange; width:500px; height:300px; border: 1 solid black;overflow:auto">
Hier alles wat je in het hokje wilt hebben
</div>
Opmerking:
- Let op! Dit zal alleen werken in Internet Explorer
- Let op! De scrollbalk is natuurlijk alleen te zien als hij nodig is. Als er dus niet veel in je hokje staat zie je ook geen scrollbalk
|
Je kunt je tekst ook gewoon tegen de linker kant aan 'plakken'.
Hiervoor moet je de tekst uitlijnen:
<p align="left"> tekst </p>
'left' kan je ook vervangen door 'right'.
|
Stel je
wilt naast je plaatje typen:
 |
Hier komt de tekst
Hier komt de tekst
Hier komt de tekst
|
Dit doe je op de volgende manier:
Je zet in de code van je plaatje align="left" (of right). Dus:
<img src="http://www.voorbeeld.nl/plaatje.gif"
align="left">
Dan type je direct daarachter <p align="left">
met daarachter weer de tekst. Achter de tekst komt </p>:
<img
src="http://www.voorbeeld.nl/plaatje.gif"
align="left"><p align="left">Hier
de tekst</p>
|
Stel je hebt een stuk van je profiel links op rechts
uitgelijnd maar je wilt tussendoor tekst of een plaatje
in het midden weergeven. Dit kun je op de volgende
manier doen.
Alles tussen de tags <center> en </center> komt in het midden van je profiel.
|
Stel je wilt 2 plaatjes naast elkaar. Dit kan erg
gemakkelijk door de codes gewoon achter elkaar te typen.
Je kunt ze dan doormiddel van spaties verder uit elkaar
zetten.
De totale breedte van je profiel is 640
pixels. Zorg er dus voor dat de foto's die je naast
elkaar wilt hebben samen niet breder zijn dan ongeveer
550 pixels.
Ook voor de spatie is een code nodig
namelijk  . Het gaat er dus zo uitzien:
<img
src="http://www.voorbeeldje.nl/plaatje.jpg">    <img
src="http://www.voorbeeldje.nl/plaatje.jpg">
Hoe meer spaties je tussen de codes zet des te meer
ruimte komt er tussen. Natuurlijk kan dit ook met meer
dan 2 plaatjes
|
Mocht je plaatje te breed zijn voor je profiel dan kun je met html
het plaatje kleiner laten weergeven.
<img src="http://voorbeeld.nl/plaatje.jpg"
width="640" height="400">
width staat voor de breedte van het plaatje. 640 kan je
dus veranderen in een ander aantal. Je profiel is 640
pixels breed dus dan kan je een beetje inschatten wat je
in moet vullen. Het zelfde geldt voor height alleen is
dat natuurlijk de hoogte.
Wel moet je er op letten dat de verhoudingen blijven
kloppen! Stel je hebt een plaatje van 250 bij 300 (dit
zie je door: rechterklik op het plaatje en te kiezen
voor "eigenschappen") en je wilt het plaatje 2
keer zo groot maken. Het wordt dan 500 bij 600.
|
Als je een blauwe achtergrond
hebt of heel je profiel in dezelfde kleuren hebt, is het
handig om zelf de kleur van je links te bepalen. Dit doe
je op de volgende manier:
<a
href="http://www.url.nl"><font color="orange">Klik
Klik hier!</font></a>
Type dus eerst de code van de
link en dan de code van je tekstkleur. Sluit daarna
eerst de kleur af en dan pas de link.
|
Het kan wel eens mooi zijn je tekst te scheiden door een lijn.
Dit kan je heel makkelijk doen met html:
<hr
width="300" size="3"
color="red">
De basis is gewoon <hr>. Hieraan kan je nog een
paar eigenschappen geven zoals de breedte, lengte en de
kleur. Deze waarden kan je dus zelf veranderen.
Opmerking:
- Je hoeft deze code niet af te sluiten.
|
| <a href="url"> |
Link |
| <a name="naam"> |
Tekst markering |
| <img> |
Plaatje |
| <center> |
Centreren |
| <hr> |
Horizontale Lijn |
| <br> |
Regeleinde |
| |
| <font> |
Lettertype, kleur en grootte van een tekst |
| <b> |
Vet gedrukt |
| <i> |
Tekst schuin weergeven |
| <u> |
Onderstrepen |
| <s> |
Doorgestreepte tekst |
| <sup> |
Tekst in superscript (iets boven de regel) |
| <sub> |
Tekst in subscript (iets onder de regel) |
| h2, h3, h4, h5, h6, h7 |
Kopje een andere grootte geven |
| <small> |
Kleine tekst |
| <strong> |
Tekst nadruk geven |
| <strike> |
Doorgestreepte tekst |
| <big> |
Grote letters |
| <blockquote> |
Geciteerde stuk tekst |
| <cite> |
Kort citaat |
| <em> |
Tekst met nadruk weergeven |
| <var> |
Weergeven van een variabele of argument |
| <code> |
Om computercodes weer te geven |
| <samp> |
Om een voorbeeld script weer te geven |
| |
| <p> |
Paragraaf |
| <div> |
Maakt een block aan voor style |
| <pre> |
Vaste opmaak |
| <span> |
Maakt een block aan voor style |
| <ul> |
Ongeordende lijst |
| <li> |
Om te gebruiken in <ul> |
| <ol> |
Variant <ul> |
|
|
|
|
|
