Mike Voeg toe als vriend Stem topsite!
Bezoekers vandaag: 1 Bezoekers Totaal: 36316 Punten deze maand: 0 Punten totaal: 1507 Home - Inloggen - Aanmelden - Zoeken
- ImonlineInfo codes


Vragen over codes?
Meld het in mijn
Gastenboek!

{ Menu }
Makkelijk  l  Gemiddeld  l  Moeilijk

Makkelijk: Anti copy, Youtube, dikgedrukt / schuin / ondersteept, Plaatje, Achtergrond / Achtergrond herhalen

Gemiddeld: Tekst opmaak, Profiel + g.b smaller maken, Linkhover, Pagina spiegelen, Bewegende tekst / plaatje, Header

Moeilijk: Coderen, CSS Klikmenu, Minicursus CSS


Heb jij nog een code die hier niet staat En wil je die met andere imonliners delen? Meld het in het g.b en ik zet hem erbij.
Alvast bedankt!

Helemaal onderaan staan alle codes nogmaals, Hoe dit komt is mij een raadsel. Ik kan ze namelijk niet verwijderen vanaf mijn bewerk pagina. Omdat ze hier niet eens staan. Mijn excuses dat de codes er 2 keer staan! Ik hoop dat ik het alsnog snel kan oplossen!



Makkelijk

{ Anti kopieer code }

Met deze code hou je copycats buiten jou site!
Code:
[ i no_copy][/i]

Let op! [ i moet [i zijn dus haal de spatie even weg anders werkt de code niet!

 

{ Youtube }
Met deze code is het mogelijk een Youtube filmpje met andere te delen.

Code:
[ i youtube]http://URL VAN HET FILMPJE[/i]

Let op! [ i moet

Let op! [ i moet [i zijn dus haal de spatie even weg anders werkt de code niet!

Voorbeeld:

[ i youtube]http://www.youtube.com/watch?v=No8dbPXUhvs[/i]

  

 { Tekst dik / schuin / onderstreept / doorsteept}
hier zijn de codes om de tekst dikgedrukt, schuin, ondertreept te krijgen met codes.

                                                                                                                               Dikgedrukt:
<b>Hier de tekst</b>

Schuine tekst:
<i>Hier de tekst</i>


Ondertsteepte tekst:
<u>Hier de tekst</u>

Doorsteept:
<s>Hier de tekst</s>

 

{ Plaatje }
Voordat je een plaatje online wilt gaan zetten moet je deze eerst uploaden bijvoorbeeld bij www.Imageshack.us Kopieer de url van je plaatje. en plaats deze in de code:

<img src=http://HIER DE URL.jpg''>

{ Doorzichtig plaatje }
Als je een doorzichtig plaatje mooier vind gebruik je de volgende code:   

<img style="FILTER: alpha(opacity=300,style= 2)" src="HIER DE URL">

Bij hier de URL zet je de url van het plaatje. die je hebt geupload.

 

{ Achtergrond }
Achtergrond veranderen? dat kan met een plaatje of met een kleurcode

Plaatje achtergrond:

<style>body,#page_holder { background-image: url(HIER DE URL); background-position:center top repeat-y;}</style>

Kleur achtergrond:

<style>body,#page_holder { background: #000000; }</style>
{ Background: #000000 kun je veranderen in je eigen kleur bijvoorbeeld wit is #FFFFFF als je dus wit wil verander je het in #FFFFFF
kleurcodes vind je Hier } Je kan ook de naam van de kleur invoeren zoals red ( moet wel engels )

{ Background Repeat }
Je kunt de css zo aanpassen dat de afbeelding zich alleen horizontaal of verticaal herhaald. Dit kun je voor elkaar krijgen door een kleine aanpassing in je stylesheet.

Voor horizontale herhaling voeg je achteraan een repeat-x toe.

background: url(http://url van jouw afbeelding) repeat-x;

Voor verticale herhaling voeg je achteraan een repeat-y toe

background: url(http://url van jouw afbeelding) repeat-y;


Door nog een kleine aanpassing kun jij zowel een achtergrondafbeelding weergeven en een achtergrondkleur. Achter de repeat-x (of repeat-y) plaats je de kleurcode.

background: url(http://url van jouw afbeelding) repeat-x #000000;

  

 

 

 

Gemiddeld

{ Tekst opmaak }
Met deze code kun je de kleur en het lettertype veranderen. dat alles zit in 1 code:

<span style="color:#0000FF; font-family:Comic Sans MS;"> Hier de tekst </span> 

Uitleg:

Color:#0000FF
Je kunt hiermee de kleur van je tekst veranderen. als je dus zwart wil verander je het in #000000 kleurcodes vind je Hier

 Front-Family: Comic Sans  MS
Met dit gedeelte kun je het lettertype wijzigen. zoals je ziet staat die nu op commic sans MS maar je kunt deze ook veranderen in verdana, Arial Enz..

 het komt er bijvoorbeeld dan zo uit te zien:

<span style="color:#FFFFFF; font-family:verdana;"> Hier de tekst </span> 

 

 

 

{ Profiel + G.B smaller maken }
Deze code maakt met mogelijk je gastenboek of profiel smaller te maken.

 <style type="text/css"> table {margin-center:0%} table {margin-center:0%; width:412px} </style><div style="width:412px;float:middle"> </div>

Uitleg:

{margin-center:0%; width:412px} 
Met width:412 px kun je de groote bepalen. als je dus width 500 doet wordt het vak groter en width 200 wordt het kleinder.

 LET OP!  JE HOEFT BIJ <div style="width:412px;float:middle"> NIETS TE VERANDEREN!


{ Tekstvak }
Een tekstvak om een mededeling te plaatsen of gewoon andere leuke teksten in te zetten.

<div style="background-color:#FFFFFF; width:500px; height:300px; border:2; border-style:solid; border-color:#00CCFF;overflow:auto">HIER DE TEKST</div>

Uitleg:

Met width kun je de breedte van je tekstvak veranderen.
Met Height kun je de hoogte van je tekstvak veranderen.
Background: color kun je de achtergrond van je tekstvak veranderen.
Border color: kun je je randkleur veranderen
Border style: hiermee kan je de soort rand mee veranderen. zie Hier de mogelijkheden.
( voorbeeld je wilt inset, dan zet je bij border style: Inset neer )

Kleurcodes kun je hier vinden. of via google zoeken.


{ Linkhover }
Wil je graag de de kleur veranderd als je over een link gaat?
Deze code veranderd al de links van kleur.. bij een linkover, en de gewone standaard kleur.
code:

<STYLE type=text/css>{ }
A:link { text-decoration: none;  font: 8pt arial; color: Red }
A:visited { text-decoration: none;  font: 8pt arial; color: blue }
A:hover { text-decoration: none; font: 8pt arial; color: black;
</STYLE>

Uitleg:

8pt is de 'Grote'  van je lettertype , een hoger getal maakt de letters groter,
een kleiner getal; kleiner.  Red kan je veranderen in alle (engelse) kleuren. ( kan ook met kleurcodes )
arial is de lettertype, ook die kun je veranderen. in andere lettertype

 

{ Pagina spiegelen }
Met deze code kun je je pagina spiegelen. Klik hier! voor een voorbeeld hoe het eruit ziet.
Code:

<style type="text/css"> body { direction: rtl; } </style>
met deze code veranderd het volgende:
- menu bovenin icon aan andere kant.
- Gastenboek eerst datum dan naam.
- Voorbeeld pagina. buttons andersom


LET OP!: Je stem topsite, voeg toe als vriend, stuur prive bericht kan heel raar staan. hou daar rekening mee. anders kan je de code altijd nog verwijderen.

 

{ Bewegende tekst / plaatje. }
Met deze code kun je je tekst verschuiven. Ook kun je er een sildeshow van foto's inzetten

Tekst/plaatjes van rechts naar links laten bewegen:

<marquee scrollamount="5">Hier je tekst</marquee>

Tekst/plaatjes van links naar rechts laten bewegen:

<marquee direction=right scrollamount=5 >Hier je tekst</marquee>

Tekst/plaatjes van beneden naar boven laten bewegen:

<marquee direction=up scrollamount=5 >Hier je tekst</marquee>

Tekst/plaatjes van boven naar onder laten bewegen:

<marquee direction=down scrollamount=5 >Hier je tekst</marquee>

Uitleg:
Marquee direction: Hiermee kun je de richting bepalen. dus naar recht typ je right, Naar beneden typ je Down
Let er wel op dat je het in het engels zet.
Right scrollamount: Hiermee kun je de snelheid van je tekst/plaatje bepalen. Als je het dus sneller wil moet je een hoger cijfer intypen, Langzamer een lager cijfer.
Als je er een plaatje in wilt plaatsen moet je het zo doen:
<marquee scrollamount="5"><img src="http://adres_van_het_plaatje."></marquee>


{ Header }
Een header is een stukje tekst bovenaan je site. of titel. met een achtergrondje erachter. Hier zie je een voorbeeld
je moet de volgende codes gebruiken:

<style type="text/css">

h1 {
background: #6DB29F;
border-bottom:2px dashed #E7DC9E;
font-family: arial;
font-size:14px;
color: #FFFFFF;
text-align:center;
text-transform:uppercase;
line-height: 15px;
margin-bottom: 1px;
padding:3px;
}

</style>

&

<h1>Hier de tekst voor in de Header!</h1>

Uitleg:
De bovenste code, Moet gebruiken om je header in aan te passen. Je kunt deze code zetten waar je wilt, Maar je moet hem wel kunnen vinden in je codes. Met de code kun je het volgende veranderen:
background: >> Achtergrondkleur veranderen
border-bottom: >> Dikte rand, Rand style ( Hier de stylen ), Rand kleur
font-family: >> Bijvoorbeeld verdana, Arial
font-size: >> Grootte van de tekt
color: >> Kleur van de tekst veranderen
text-align: >> Waar je je tekst wilt, dus in het midden Center, Links Left
De andere punten zijn niet heel belangrijk. wil je het toch even weten, Je kunt het vragen in het g.b

LET OP! Als je 2 headers wilt moet je dus H1 verander in h2 in de 2 codes. als je dan ook een andere kleur wilt kun je die dan ook weer veranderen

Voor een header met plaatje, Klik je hier! Om de uitleg te downloaden. 

 

{ bezoekersbalk ( Bij stem nu ) }
Vind je je bezoekersbalk bovenaan je site zo saai? Met deze code kun je een aantal dingen veranderen. Lees de uitleg eronder voor uitleg van de code.
Code

<div><style>#left,#left1{top:-9999px;}#right,#right1{top:-9999px;}</style>
<style>.top_menu{
color:#FFFFFF;
background-image: url(URL VAN DE AFBEELDING);
background-position:left;
font-family:arial;
font-size:10px;
text-align:center;
}</style>

Uitleg
color: De kleur van je tekst;
background-image: url(Hier plaats je de url van het plaatje wat je bovenaan wilt hebben.);
background-position: Wil je je achtergrond Links ( Left ) In het midden ( Center ) Of rechts ( Right )
font-family: Bijvoobeeld arial of verdana;
font-size: Groote van je tekst;

 

 



Moeilijk

 

{ Coderen }
Coderen is best lastig, Zeker als je het nog nooit hebt gedaan. daarom is het eerst makkelijk om het via een andere site te doen. Ik laat hieronder de makkelijke manier zien maar ook de gevorderde manier.

Makkelijk:

(1) Ga naar: http://www.neotacular.com/?go=x-blog
(2) Ga een stukje naar beneden. Vul de url van je layout in. ( uploaden op imageshack of andere upload site )
(3) Klik op Go
(4) Je kunt nu de vakken erin tekenen met je muis. zie hier de afbeelding
(5) Als je de vakken erin hebt getekent. klik je op "Give me the Code"
(6)je ziet nu de code.. Het is handig om de vakken alvast een naam te geven. dan kun je ze beter herkennen.
(7) Plaats de code op je site en je kunt je site gaan bouwen.

Moeilijk

Om dit te doen moet je best verstand hebben van codes. je moet namelijk precies weten hoe de code in elkaar zit. ik zal proberen uit te leggen hoe het werkt.

(1) Kopieer de volgende code:

<DIV style="LEFT: 0px; WIDTH: 816px; POSITION: absolute; TOP: 0px; HEIGHT: 600px" align=left><IMG src="URL LAYOUT" border=0></DIV>

Plaats de url van je layout in de code. En verander de breedte ( width ) en hoogte ( Height ) naar de maten van je layout in.
TIP! Plaats deze code onderaan je pagina.
 

(2) Gebruik de volgende code om te coderen:

<DIV align=left><DIV style="BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; LEFT: 276px; OVERFLOW: AUTO; BORDER-LEFT: #000000 0px solid; WIDTH: 162px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 10px; HEIGHT: 35px; BACKGROUND-COLOR: transparent">HIER JE TEKST IN JE TEKST VAK! </DIV>

In deze code moet je de Hoogte ( Height ), Breedte ( width ), Top, Left aanpassen in px. Ook kun je zeggen of je je scrollbalk wilt zien of niet dit moet met: OVERFLOW: AUTO; Auto moet je dan veranderen in Hidden.

^ Als je dit nog niet snapt kun je altijd in mijn gastenboek terecht voor al je vragen! ^

 

{ CSS Klikmenu }
Je ziet het op veel site's een klikmenu. Het ziet er mooier uit en is overzichtelijker.
Ik laat je ziet hoe het precies werkt.

(1) Bedenk eerst waar allemaal je een link naartoe wilt hebben. Bijvoorbeeld: de intro, de vragenlijst, de links en het gastenboek. Dan maak je deze link-codes:
<a href="#01">Intro</a>
<a href="#02">Vragenlijst</a>
<a href="#03">Links</a>
<a href="#04">Gastenboek</a>

Als je er meer hebt moet je zo verder gaan. dus <a href="#05">tekst</a>
& als je ze onder elkaar wilt doe je er <BR> achter

Je kunt de benamingen 01, 02, 03 en 04 veranderen in wat je wilt, bijvoorbeeld van #01 #INTRO maken, als je dat handiger vindt. Let er wel op dat je de # niet vergeet!

(2) Om te zorgen dat als je op "intro" klikt, je naar het juiste deel van de pagina word gestuurd moet je op de plaats van de intro in je pagina (dat stuk code dus) dit plaatsen:

<a name="01">

het komt er dan dus zo in je content uit te zien.

<a name="1"> <br>Intro<br>
Typ hier je intro<br>

<a name="2"> <br>vragenlijst<br>
Hier komt je vragenlijst.<br>

enzovoort.


Als je het nog niet helemaal begrijpt aarzel dan niet en neem contact op via het g.b. en ik neem zo snel mogelijk contact op om je te helpen

 

{ Minicursus CSS  }
Bron: www.imonline.nl/sitehulp
Wat is CSS precies?

CSS is de afkorting van Cascading Style Sheets. Je kunt met CSS de hele opmaak van een pagina maken. Ook de opmaak van Sitehulp is bijna helemaal geregeld met CSS. Bijvoorbeeld de kleuren, grootten en lettertypes van de teksten, links en meer. Voor ImOnliners die Met Codes werken is dit erg leuk om je pagina op te fleuren! Als je CSS gebruikt, hoef je de HTML opmaak tags (<FONT> en dergelijke) niet meer te gebruiken. CSS is handig om mee te werken, want zo kun je bijvoorbeeld heel makkelijk het lettertype van je complete pagina wijzigen.

Hoe zit CSS in elkaar?

De CSS code van je pagina begint met <style type="text/css"> en eindigt op </style>. Daartussenin zet je de verschillende onderdelen van je pagina. Je kunt met CSS bijvoorbeeld regelen dat alle tekst die in een paragraaf (<p>) staat het lettertype arial heeft, kleur rood en grootte 12 punten. In CSS code wordt dat dan:

<style type="text/css">
p {font-family: Arial; font-size: 12 pt; color: red;}
</style>

Dit is maar een klein voorbeeldje, maar echt alle opmaak kun je verwerken in je CSS. Zo kun je ook regelen dat alle linkjes zwart zijn met een lijn, maar dat als je eroverheen gaat met de muis ze groen worden, met een rode achtergrond en zonder streep. De CSS code wordt dan (de paragraafinstellingen van net zitten er ook bij!):

<style type="text/css">
p {font-family: arial; font-size: 12 pt; color: red;}
a {color: black; text-decoration: underline; }
a:hover {color: green; background: red; text-decoration: none; }
</style>

Je ziet nu:
- a is de letter voor een link, en omdat hover een onderdeel van a is staat er een dubbele punt tussen a en hover.
- de eigenschappen van een bepaald gedeelte (bijvoorbeeld van a) staan tussen { }.
- de de aparte stukjes binnen een gedeelte worden gescheiden door ;

CSS is net als HTML iets wat je niet in een dag leert, je moet het langzaam leren! Het is een hele taal op zich. Hieronder staan een paar "standaard" stukjes CSS die je gewoon over kunt typen, of wijzigen naar wat jij precies wilt.

Enkele voogemaakte CSS-Codes

Een smal gastenboek
Verwerk dit in je CSS Code:

table {width:400px}

Dit is maar een standaardcode, je kunt het naar jou wensen aanpassen!


Letterstijl van je profiel en gastenboek
Verwerk dit in je CSS Code:

.profiel {font-family: arial; font-size: 10px; color: black; }
.gastenboek {font-family: arial; font-size: 10px; color: black; }

Wat kan ik o.a. veranderen of toevoegen aan deze code?
font-family : wijzig hiermee het lettertype
font-size: wijzig hiermee de grootte van de letters
color: wijzig hiermee de kleur van de letters
text-decoration: wijzig hiermee de opmaak: underline (onderstreept), overline (een streep erboven), blink (de tekst glimt, werkt alleen in Firefox), of none (niks).
background : wijzig hiermee de achtergrondkleur (of achtergrondplaatje) van de tekst


Kolomlijnen van je profiel, layout en gastenboek
Verwerk dit in je CSS Code:

.border {border-color: black; border-style: dashed; border-width: 4px; }

Wat kan ik o.a. veranderen of toevoegen aan deze code?
border-color : wijzig hiermee de kleur van de lijn
border-style : wijzig hiermee de stijl van de lijn: dashed (blokjes) of dotted (stippen)
border-width : wijzig hiermee de dikte van de lijn (in aantal pixels)


Een rand om je site
Verwerk dit in je CSS Code: (let op! Als je al een body gedeelte hebt in je CSS code, plak je dit er natuurlijk gewoon bij, zorg dat je geen twee body's hebt!)

body {border: 6px; border-color: gold;}

Wat kan ik o.a. veranderen of toevoegen aan deze code?
border : wijzig hiermee de dikte van de rand, in aantal pixels
border-color : wijzig hiermee de kleur van de rand


Een rand om plaatjes
Verwerk dit in je CSS Code:

img {border:8px}


Gastenboek-invoervak achtergrond en lettertype

input {background: black; color: white; font-size:10pt; font-family: Arial; border:1px;}

Natuurlijk kun je het veranderen waar je wilt.


LET OP:! Vergeet niet om bij de voorgemaakte codes wel steeds <style type="text/css"> te zetten, en af te sluiten met </style>!!!

 

  

 { Tekst dik / schuin / onderstreept / doorsteept}
hier zijn de codes om de tekst dikgedrukt, schuin, ondertreept te krijgen met codes.

                                                                                                                               Dikgedrukt:
<b>Hier de tekst</b>

Schuine tekst:
<i>Hier de tekst</i>


Ondertsteepte tekst:
<u>Hier de tekst</u>

Doorsteept:
<s>Hier de tekst</s>

 

{ Plaatje }
Voordat je een plaatje online wilt gaan zetten moet je deze eerst uploaden bijvoorbeeld bij www.Imageshack.us Kopieer de url van je plaatje. en plaats deze in de code:

<img src=http://HIER DE URL.jpg''>

{ Doorzichtig plaatje }
Als je een doorzichtig plaatje mooier vind gebruik je de volgende code:   

<img style="FILTER: alpha(opacity=300,style= 2)" src="HIER DE URL">

Bij hier de URL zet je de url van het plaatje. die je hebt geupload.

 

{ Achtergrond }
Achtergrond veranderen? dat kan met een plaatje of met een kleurcode

Plaatje achtergrond:

<style>body,#page_holder { background-image: url(HIER DE URL); background-position:center top repeat-y;}</style>

Kleur achtergrond:

<style>body,#page_holder { background: #000000; }</style>
{ Background: #000000 kun je veranderen in je eigen kleur bijvoorbeeld wit is #FFFFFF als je dus wit wil verander je het in #FFFFFF
kleurcodes vind je Hier } Je kan ook de naam van de kleur invoeren zoals red ( moet wel engels )

{ Background Repeat }
Je kunt de css zo aanpassen dat de afbeelding zich alleen horizontaal of verticaal herhaald. Dit kun je voor elkaar krijgen door een kleine aanpassing in je stylesheet.

Voor horizontale herhaling voeg je achteraan een repeat-x toe.

background: url(http://url van jouw afbeelding) repeat-x;

Voor verticale herhaling voeg je achteraan een repeat-y toe

background: url(http://url van jouw afbeelding) repeat-y;


Door nog een kleine aanpassing kun jij zowel een achtergrondafbeelding weergeven en een achtergrondkleur. Achter de repeat-x (of repeat-y) plaats je de kleurcode.

background: url(http://url van jouw afbeelding) repeat-x #000000;

  

 

 

 

Gemiddeld

{ Tekst opmaak }
Met deze code kun je de kleur en het lettertype veranderen. dat alles zit in 1 code:

<span style="color:#0000FF; font-family:Comic Sans MS;"> Hier de tekst </span> 

Uitleg:

Color:#0000FF
Je kunt hiermee de kleur van je tekst veranderen. als je dus zwart wil verander je het in #000000 kleurcodes vind je Hier

 Front-Family: Comic Sans  MS
Met dit gedeelte kun je het lettertype wijzigen. zoals je ziet staat die nu op commic sans MS maar je kunt deze ook veranderen in verdana, Arial Enz..

 het komt er bijvoorbeeld dan zo uit te zien:

<span style="color:#FFFFFF; font-family:verdana;"> Hier de tekst </span> 

 

 

 

{ Profiel + G.B smaller maken }
Deze code maakt met mogelijk je gastenboek of profiel smaller te maken.

 <style type="text/css"> table {margin-center:0%} table {margin-center:0%; width:412px} </style><div style="width:412px;float:middle"> </div>

Uitleg:

{margin-center:0%; width:412px} 
Met width:412 px kun je de groote bepalen. als je dus width 500 doet wordt het vak groter en width 200 wordt het kleinder.

 LET OP!  JE HOEFT BIJ <div style="width:412px;float:middle"> NIETS TE VERANDEREN!


{ Tekstvak }
Een tekstvak om een mededeling te plaatsen of gewoon andere leuke teksten in te zetten.

<div style="background-color:#FFFFFF; width:500px; height:300px; border:2; border-style:solid; border-color:#00CCFF;overflow:auto">HIER DE TEKST</div>

Uitleg:

Met width kun je de breedte van je tekstvak veranderen.
Met Height kun je de hoogte van je tekstvak veranderen.
Background: color kun je de achtergrond van je tekstvak veranderen.
Border color: kun je je randkleur veranderen
Border style: hiermee kan je de soort rand mee veranderen. zie Hier de mogelijkheden.
( voorbeeld je wilt inset, dan zet je bij border style: Inset neer )

Kleurcodes kun je hier vinden. of via google zoeken.


{ Linkhover }
Wil je graag de de kleur veranderd als je over een link gaat?
Deze code veranderd al de links van kleur.. bij een linkover, en de gewone standaard kleur.
code:

<STYLE type=text/css>{ }
A:link { text-decoration: none;  font: 8pt arial; color: Red }
A:visited { text-decoration: none;  font: 8pt arial; color: blue }
A:hover { text-decoration: none; font: 8pt arial; color: black;
</STYLE>

Uitleg:

8pt is de 'Grote'  van je lettertype , een hoger getal maakt de letters groter,
een kleiner getal; kleiner.  Red kan je veranderen in alle (engelse) kleuren. ( kan ook met kleurcodes )
arial is de lettertype, ook die kun je veranderen. in andere lettertype

 

{ Pagina spiegelen }
Met deze code kun je je pagina spiegelen. Klik hier! voor een voorbeeld hoe het eruit ziet.
Code:

<style type="text/css"> body { direction: rtl; } </style>
met deze code veranderd het volgende:
- menu bovenin icon aan andere kant.
- Gastenboek eerst datum dan naam.
- Voorbeeld pagina. buttons andersom


LET OP!: Je stem topsite, voeg toe als vriend, stuur prive bericht kan heel raar staan. hou daar rekening mee. anders kan je de code altijd nog verwijderen.

 

{ Bewegende tekst / plaatje. }
Met deze code kun je je tekst verschuiven. Ook kun je er een sildeshow van foto's inzetten

Tekst/plaatjes van rechts naar links laten bewegen:

<marquee scrollamount="5">Hier je tekst</marquee>

Tekst/plaatjes van links naar rechts laten bewegen:

<marquee direction=right scrollamount=5 >Hier je tekst</marquee>

Tekst/plaatjes van beneden naar boven laten bewegen:

<marquee direction=up scrollamount=5 >Hier je tekst</marquee>

Tekst/plaatjes van boven naar onder laten bewegen:

<marquee direction=down scrollamount=5 >Hier je tekst</marquee>

Uitleg:
Marquee direction: Hiermee kun je de richting bepalen. dus naar recht typ je right, Naar beneden typ je Down
Let er wel op dat je het in het engels zet.
Right scrollamount: Hiermee kun je de snelheid van je tekst/plaatje bepalen. Als je het dus sneller wil moet je een hoger cijfer intypen, Langzamer een lager cijfer.
Als je er een plaatje in wilt plaatsen moet je het zo doen:
<marquee scrollamount="5"><img src="http://adres_van_het_plaatje."></marquee>


{ Header }
Een header is een stukje tekst bovenaan je site. of titel. met een achtergrondje erachter. Hier zie je een voorbeeld
je moet de volgende codes gebruiken:

<style type="text/css">

h1 {
background: #6DB29F;
border-bottom:2px dashed #E7DC9E;
font-family: arial;
font-size:14px;
color: #FFFFFF;
text-align:center;
text-transform:uppercase;
line-height: 15px;
margin-bottom: 1px;
padding:3px;
}

</style>

&

<h1>Hier de tekst voor in de Header!</h1>

Uitleg:
De bovenste code, Moet gebruiken om je header in aan te passen. Je kunt deze code zetten waar je wilt, Maar je moet hem wel kunnen vinden in je codes. Met de code kun je het volgende veranderen:
background: >> Achtergrondkleur veranderen
border-bottom: >> Dikte rand, Rand style ( Hier de stylen ), Rand kleur
font-family: >> Bijvoorbeeld verdana, Arial
font-size: >> Grootte van de tekt
color: >> Kleur van de tekst veranderen
text-align: >> Waar je je tekst wilt, dus in het midden Center, Links Left
De andere punten zijn niet heel belangrijk. wil je het toch even weten, Je kunt het vragen in het g.b

LET OP! Als je 2 headers wilt moet je dus H1 verander in h2 in de 2 codes. als je dan ook een andere kleur wilt kun je die dan ook weer veranderen

Voor een header met plaatje, Klik je hier! Om de uitleg te downloaden. 

 

{ bezoekersbalk ( Bij stem nu ) }
Vind je je bezoekersbalk bovenaan je site zo saai? Met deze code kun je een aantal dingen veranderen. Lees de uitleg eronder voor uitleg van de code.
Code

<div><style>#left,#left1{top:-9999px;}#right,#right1{top:-9999px;}</style>
<style>.top_menu{
color:#FFFFFF;
background-image: url(URL VAN DE AFBEELDING);
background-position:left;
font-family:arial;
font-size:10px;
text-align:center;
}</style>

Uitleg
color: De kleur van je tekst;
background-image: url(Hier plaats je de url van het plaatje wat je bovenaan wilt hebben.);
background-position: Wil je je achtergrond Links ( Left ) In het midden ( Center ) Of rechts ( Right )
font-family: Bijvoobeeld arial of verdana;
font-size: Groote van je tekst;

 

 



Moeilijk

 

{ Coderen }
Coderen is best lastig, Zeker als je het nog nooit hebt gedaan. daarom is het eerst makkelijk om het via een andere site te doen. Ik laat hieronder de makkelijke manier zien maar ook de gevorderde manier.

Makkelijk:

(1) Ga naar: http://www.neotacular.com/?go=x-blog
(2) Ga een stukje naar beneden. Vul de url van je layout in. ( uploaden op imageshack of andere upload site )
(3) Klik op Go
(4) Je kunt nu de vakken erin tekenen met je muis. zie hier de afbeelding
(5) Als je de vakken erin hebt getekent. klik je op "Give me the Code"
(6)je ziet nu de code.. Het is handig om de vakken alvast een naam te geven. dan kun je ze beter herkennen.
(7) Plaats de code op je site en je kunt je site gaan bouwen.

Moeilijk

Om dit te doen moet je best verstand hebben van codes. je moet namelijk precies weten hoe de code in elkaar zit. ik zal proberen uit te leggen hoe het werkt.

(1) Kopieer de volgende code:

<DIV style="LEFT: 0px; WIDTH: 816px; POSITION: absolute; TOP: 0px; HEIGHT: 600px" align=left><IMG src="URL LAYOUT" border=0></DIV>

Plaats de url van je layout in de code. En verander de breedte ( width ) en hoogte ( Height ) naar de maten van je layout in.
TIP! Plaats deze code onderaan je pagina.
 

(2) Gebruik de volgende code om te coderen:

<DIV align=left><DIV style="BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; LEFT: 276px; OVERFLOW: AUTO; BORDER-LEFT: #000000 0px solid; WIDTH: 162px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 10px; HEIGHT: 35px; BACKGROUND-COLOR: transparent">HIER JE TEKST IN JE TEKST VAK! </DIV>

In deze code moet je de Hoogte ( Height ), Breedte ( width ), Top, Left aanpassen in px. Ook kun je zeggen of je je scrollbalk wilt zien of niet dit moet met: OVERFLOW: AUTO; Auto moet je dan veranderen in Hidden.

^ Als je dit nog niet snapt kun je altijd in mijn gastenboek terecht voor al je vragen! ^

 

{ CSS Klikmenu }
Je ziet het op veel site's een klikmenu. Het ziet er mooier uit en is overzichtelijker.
Ik laat je ziet hoe het precies werkt.

(1) Bedenk eerst waar allemaal je een link naartoe wilt hebben. Bijvoorbeeld: de intro, de vragenlijst, de links en het gastenboek. Dan maak je deze link-codes:
<a href="#01">Intro</a>
<a href="#02">Vragenlijst</a>
<a href="#03">Links</a>
<a href="#04">Gastenboek</a>

Als je er meer hebt moet je zo verder gaan. dus <a href="#05">tekst</a>
& als je ze onder elkaar wilt doe je er <BR> achter

Je kunt de benamingen 01, 02, 03 en 04 veranderen in wat je wilt, bijvoorbeeld van #01 #INTRO maken, als je dat handiger vindt. Let er wel op dat je de # niet vergeet!

(2) Om te zorgen dat als je op "intro" klikt, je naar het juiste deel van de pagina word gestuurd moet je op de plaats van de intro in je pagina (dat stuk code dus) dit plaatsen:

<a name="01">

het komt er dan dus zo in je content uit te zien.

<a name="1"> <br>Intro<br>
Typ hier je intro<br>

<a name="2"> <br>vragenlijst<br>
Hier komt je vragenlijst.<br>

enzovoort.


Als je het nog niet helemaal begrijpt aarzel dan niet en neem contact op via het g.b. en ik neem zo snel mogelijk contact op om je te helpen

 

{ Minicursus CSS  }
Bron: www.imonline.nl/sitehulp
Wat is CSS precies?

CSS is de afkorting van Cascading Style Sheets. Je kunt met CSS de hele opmaak van een pagina maken. Ook de opmaak van Sitehulp is bijna helemaal geregeld met CSS. Bijvoorbeeld de kleuren, grootten en lettertypes van de teksten, links en meer. Voor ImOnliners die Met Codes werken is dit erg leuk om je pagina op te fleuren! Als je CSS gebruikt, hoef je de HTML opmaak tags (<FONT> en dergelijke) niet meer te gebruiken. CSS is handig om mee te werken, want zo kun je bijvoorbeeld heel makkelijk het lettertype van je complete pagina wijzigen.

Hoe zit CSS in elkaar?

De CSS code van je pagina begint met <style type="text/css"> en eindigt op </style>. Daartussenin zet je de verschillende onderdelen van je pagina. Je kunt met CSS bijvoorbeeld regelen dat alle tekst die in een paragraaf (<p>) staat het lettertype arial heeft, kleur rood en grootte 12 punten. In CSS code wordt dat dan:

<style type="text/css">
p {font-family: Arial; font-size: 12 pt; color: red;}
</style>

Dit is maar een klein voorbeeldje, maar echt alle opmaak kun je verwerken in je CSS. Zo kun je ook regelen dat alle linkjes zwart zijn met een lijn, maar dat als je eroverheen gaat met de muis ze groen worden, met een rode achtergrond en zonder streep. De CSS code wordt dan (de paragraafinstellingen van net zitten er ook bij!):

<style type="text/css">
p {font-family: arial; font-size: 12 pt; color: red;}
a {color: black; text-decoration: underline; }
a:hover {color: green; background: red; text-decoration: none; }
</style>

Je ziet nu:
- a is de letter voor een link, en omdat hover een onderdeel van a is staat er een dubbele punt tussen a en hover.
- de eigenschappen van een bepaald gedeelte (bijvoorbeeld van a) staan tussen { }.
- de de aparte stukjes binnen een gedeelte worden gescheiden door ;

CSS is net als HTML iets wat je niet in een dag leert, je moet het langzaam leren! Het is een hele taal op zich. Hieronder staan een paar "standaard" stukjes CSS die je gewoon over kunt typen, of wijzigen naar wat jij precies wilt.

Enkele voogemaakte CSS-Codes

Een smal gastenboek
Verwerk dit in je CSS Code:

table {width:400px}

Dit is maar een standaardcode, je kunt het naar jou wensen aanpassen!


Letterstijl van je profiel en gastenboek
Verwerk dit in je CSS Code:

.profiel {font-family: arial; font-size: 10px; color: black; }
.gastenboek {font-family: arial; font-size: 10px; color: black; }

Wat kan ik o.a. veranderen of toevoegen aan deze code?
font-family : wijzig hiermee het lettertype
font-size: wijzig hiermee de grootte van de letters
color: wijzig hiermee de kleur van de letters
text-decoration: wijzig hiermee de opmaak: underline (onderstreept), overline (een streep erboven), blink (de tekst glimt, werkt alleen in Firefox), of none (niks).
background : wijzig hiermee de achtergrondkleur (of achtergrondplaatje) van de tekst


Kolomlijnen van je profiel, layout en gastenboek
Verwerk dit in je CSS Code:

.border {border-color: black; border-style: dashed; border-width: 4px; }

Wat kan ik o.a. veranderen of toevoegen aan deze code?
border-color : wijzig hiermee de kleur van de lijn
border-style : wijzig hiermee de stijl van de lijn: dashed (blokjes) of dotted (stippen)
border-width : wijzig hiermee de dikte van de lijn (in aantal pixels)


Een rand om je site
Verwerk dit in je CSS Code: (let op! Als je al een body gedeelte hebt in je CSS code, plak je dit er natuurlijk gewoon bij, zorg dat je geen twee body's hebt!)

body {border: 6px; border-color: gold;}

Wat kan ik o.a. veranderen of toevoegen aan deze code?
border : wijzig hiermee de dikte van de rand, in aantal pixels
border-color : wijzig hiermee de kleur van de rand


Een rand om plaatjes
Verwerk dit in je CSS Code:

img {border:8px}


Gastenboek-invoervak achtergrond en lettertype

input {background: black; color: white; font-size:10pt; font-family: Arial; border:1px;}

Natuurlijk kun je het veranderen waar je wilt.


LET OP:! Vergeet niet om bij de voorgemaakte codes wel steeds <style type="text/css"> te zetten, en af te sluiten met </style>!!!

 

Gastenboek

Schrijf in gastenboek

Totaal: 31 berichten.


Naam: CharlesMoN (46.161.9.51) Datum: 2017-06-23 10:25:20
wh0cd915832 erythromycin VIAGRA SOFT

Naam: vnhpsm (46.161.9.8) Datum: 2017-03-16 01:14:10
CwUgqZ twbarynbettq, [url=http://zebfupeetviu.com/]zebfupeetviu[/url], [link=http://oxjondaecenm.com/]oxjondaecenm[/link], http://qawqnknrnlmx.com/

Naam: JimmiXzS (188.143.232.43) Datum: 2016-10-14 20:52:34
gGtWjD http://www.FyLitCl7Pf7kjQdDUOLQOuaxTXbj5iNG.com

Naam: Pharmd799 (93.187.36.22) Datum: 2016-08-29 14:17:15
Very nice site!

Naam: Pharmg90 (163.24.89.126) Datum: 2016-08-29 14:17:00
Very nice site! cheap goods http://oixapey2.com/aqtoar/4.html

Naam: Pharmc690 (177.200.203.239) Datum: 2016-08-29 14:16:47
Very nice site! [url=http://oixapey2.com/aqtoar/2.html]cheap goods[/url]

Naam: Pharmd807 (64.71.130.34) Datum: 2016-08-29 14:16:37
Very nice site! cheap goods

Naam: Pharme12 (185.2.168.31) Datum: 2016-08-28 08:08:24
Very nice site!

Naam: Pharmg902 (41.71.112.18) Datum: 2016-08-28 08:06:15
Very nice site! cheap goods http://opeyixa2.com/qosyxo/4.html

Naam: Pharmd777 (91.221.66.143) Datum: 2016-08-28 08:05:59
Very nice site! [url=http://opeyixa2.com/qosyxo/2.html]cheap goods[/url]

Naam: Pharmc385 (176.31.76.32) Datum: 2016-08-28 08:05:56
Very nice site! cheap goods

Naam: Pharmf287 (216.14.79.106) Datum: 2016-08-27 01:54:42
Very nice site! cheap goods http://apeoixy2.com/xqqtox/4.html

Naam: Pharme39 (62.89.216.4) Datum: 2016-08-27 01:49:51
Very nice site! [url=http://apeoixy2.com/xqqtox/2.html]cheap goods[/url]

Naam: Pharmk56 (181.211.242.67) Datum: 2016-08-27 01:49:38
Very nice site! cheap goods

Naam: Pharma399 (138.186.19.22) Datum: 2016-08-25 19:49:48
Very nice site!

Naam: Pharmd638 (91.221.66.143) Datum: 2016-08-25 19:49:17
Very nice site! cheap goods

Naam: Pharmd274 (195.135.228.26) Datum: 2016-08-24 12:35:25
Very nice site!

Naam: Pharmc882 (5.100.249.110) Datum: 2016-08-24 12:35:21
Very nice site! cheap goods http://ypxoiea2.com/ovyvkqv/4.html

Naam: Pharma120 (178.32.130.21) Datum: 2016-08-24 12:35:19
Very nice site! [url=http://ypxoiea2.com/ovyvkqv/2.html]cheap goods[/url]

Naam: Pharma429 (131.161.47.33) Datum: 2016-08-24 12:35:10
Very nice site! cheap goods

Naam: Pharme536 (41.33.221.115) Datum: 2016-08-23 06:39:25
Very nice site!

Naam: Pharmb601 (41.160.224.106) Datum: 2016-08-23 06:39:15
Very nice site! cheap goods http://oixapey2.com/rqtoxs/4.html

Naam: Pharmg635 (15.48.248.5) Datum: 2016-08-23 06:39:06
Very nice site! [url=http://oixapey2.com/rqtoxs/2.html]cheap goods[/url]

Naam: Pharmb78 (5.22.234.20) Datum: 2016-08-23 06:39:04
Very nice site! cheap goods

Naam: Pharmd426 (111.11.122.7) Datum: 2016-08-22 00:23:15
Very nice site! cheap goods http://oieypxa2.com/oryvkqr/4.html

Naam: Pharmc943 (196.43.65.31) Datum: 2016-08-22 00:23:04
Very nice site! [url=http://oieypxa2.com/oryvkqr/2.html]cheap goods[/url]

Naam: Pharmd405 (91.215.176.27) Datum: 2016-08-22 00:22:55
Very nice site! cheap goods

Naam: Pharmd654 (195.168.122.138) Datum: 2016-08-20 18:16:26
Very nice site!

Naam: Pharmf237 (216.14.79.106) Datum: 2016-08-20 18:15:03
Very nice site! cheap goods

Naam: Johnd419 (187.60.173.6) Datum: 2016-08-20 05:45:04
I do believe all of the ideas you've offered for your post. They are really convincing and will definitely work. Still, the posts are very quick for newbies. May just you please extend them a little from next time? Thank you for the post. dcdbebkdaeke