Space Editor HTML Codes

Voor de vernieuwde "Spaceeditor" klik op onderstaand LOGO....

Hallo allemaal....

Bij deze een zo goed mogelijke omschrijving van HTML met "Space Editor" op je Space weblog !!! Begin nu niet gelijk te roepen,"dat lukt mij toch niet!!!". Als je het eenmaal door hebt... zul je zien dat het eigenlijk een kippetje is. En oefening baart kunst.... Nou daar gaan we dan....

Succes !!!

* Space-Center *

Tevens is het een goede optie om je lid te maken van "Space Center"! Door je lid te maken heb je toegang tot goede tips, discussies...

* Klik hier*!

* URL adres *

Wat is een URL? Dit staat voor: Uniform Resource Locator. Website' s worden aangeduid met een internetadres. Bijvoorbeeld http://groups.msn.com/spacesmsn. Maar ook plaatjes en muziek hebben een URL adres...Deze URL' s heb je nodig om een link te kunnen maken! Een URL van een plaatje is te vinden, door met je cursor op een plaatje te gaan staan, dan op "rechts" te klikken, dan naar "eigenschappen", en daar is het URL adres. Dit adres kun je dan in je code plakken. Maar pas op het plaatje kan ook beschermd zijn... en dus zichtbaar in je log met een kruisje

* Knippen, Plakken en Copieëren *

Om te linken en codes te plakken...moet je "Copiëren en Plakken"! Selecteer het URL adres of code...door "links" ingedrukt te houden en over het URL adres heen te slepen, zodat deze helemaal zichtbaar veranderd van kleur! Klik op "rechts", en je krijgt meerdere opties. Klik Copiëren aan...Klik dan de plaats aan waar je dat URL adres geplakt wil hebben. Klik dan op "Rechts", en je krijgt meerdere opties. Klik Plakken aan...en je zult zien dat het URL adres op die plaats verschenen is...Dit kun je ook doen met toetsen op je toetsenbord "ctrl+x",voor te knippen, "ctrl+c",voor te copiëren, en "ctrl+v", voor te plakken! Ook kun je het URL of codes aanklikken, dan op "rechts", en dan "alles selecteren". Zoals je ziet zijn er meerdere opties...zelf de keus wat je het makkelijkste vind.

* Achtergrond met een randje en tekst*

Nu gaan we het hebben over een achtergrond met een randje !!!

1) Maak een weblogitem aan en geef deze een naam
2) Klik op html in je bewerkbalk
3) Haal de <DIV></DIV> weg door backspace
4) Plak onderstaande code vooraan in je log

<DIV align=center>
<DIV style="BORDER-RIGHT: #ff1344 2px ridge; BORDER-TOP: #ff1344 2px ridge; BORDER-LEFT: #ff1344 2px ridge; WIDTH: 350px; BORDER-BOTTOM: #ff1344 2px ridge; BACKGROUND-COLOR: #000000" align=center>
<P align=center><FONT face=arial><FONT color=#ff1344><FONT size=3>Tekst</FONT></P></DIV></DIV>

5)Dit is een zwarte achtergrond met rode rand
6)Pas de kleuren aan met de kleurenkiezer
7)BORDER-RIGHT (wil zeggen "de rechtse rand"), daarachter de kleurcode, de 2px wil zeggen de dikte van je rand maak het getal 2 hoger en je rand word dikker. Zet je hem op 0 dan is je randje weg. Dit doe je bij de BORDER-TOP ( wil zeggen "de top rand") , BORDER-BOTTOM (wil zeggen "de onderste rand") en de BORDER-LEFT (wil zeggen de linkse rand)
8) Pas je <FONT face=arial> aan. Dit wil zeggen het lettertype. bv Comic Sans ms... er zijn er velen. En vul je kleurcode in <FONT color=#??????>.<FONT size=3> dit wil zeggen de tekstgroote... maak het getal groter en je letters worden ook groter.
9) align=center wil zeggen het uitlijnen. Center is midden, right is rechts, left is links
10) Haal de letters tekst weg en typ je eigen tekst
11) Klik op html gebruiken, en bekijk het resultaat
12) Tevens kun je je logje ook een andere rand geven, verander bv ridge; in.... dotted; double; dashed; outset; ....... speel met de mogelijkheden
13) Publiceer

* Achtergrond met plaatjes en tekst *

De code voor een plaatje is...

<P align=center><IMG height=200 src="PLAK HIER HET URL ADRES VAN JE PLAATJE" width=200 align=center></P>

Deze code voor het plaatje plak je precies tussen BACKGROUND-COLOR: #000000">HIER DUS<P align=center>

In het geheel komt het er dus zo uit te zien,

<DIV style="WIDTH: 350px; BACKGROUND-COLOR: #000000"><P align=center><IMG height=200 src="PLAK HIER HET URL ADRES VAN JE PLAATJE" width=200 align=center></P>
<P align=center><FONT face=arial><FONT color=#ffffff><FONT size=3>Tekst</FONT></P></DIV>

1) Pas alles aan zoals omschreven bij uitleg "achtergrond met randje en tekst"
2) Haal in deze code voorzichtig de letters PLAK HIER HET URL ADRES VAN JE PLAATJE weg en plak er het URL adres van jou plaatje neer bv http://home.hetnet.nl/~miss-harley-muissie/bf100.gif tussen de aanhalingstekens
3) In het geheel komt het er nu zo uit te zien

<DIV style="WIDTH: 350px; BACKGROUND-COLOR: #000000">
<P align=center><IMG height=200 src="plak hier het url van het plaatje" width=200 align=center></P>
<P align=center><FONT face=arial><FONT color=#ffffff><FONT size=3>Tekst</FONT></P></DIV>

4) Ondertussen kun je natuurlijk switchen door op html te klikken en je kunt kijken hoe het eruit komt te zien
5) Pas nu de height(hoogte)en de WIDTH (breedte) in je code aan van je plaatje. Des te groter het getal des te groter het plaatje
6)<P align=center> Hier kun je mee uitlijnen.. *center-is plaatje of tekst in het midden*, *left-is plaatje of tekst aan de linkse kant*, *right-is plaatje of tekst aan de rechter kant*.
7)Publiceer...

* Linkbaar achtergrondje *

Hier is een code om achtergrondjes te linken ...in je weblog !

<DIV style="WIDTH: 350px"><IMG height=640 alt="" src="hier het url van een achtergrond" width=350 align=right border=2> </FONT>
<DIV style="WIDTH: 350px; HEIGHT: 640px"><BR><BR><BR>
<P align=center><FONT face="Comic Sans ms" size=5><FONT color=#ffffff>TYP HIER JE TEKST</FONT></P></DIV></DIV>

Hieronder de code met een plaatje boven en een plaatje onder.....

<DIV style="WIDTH: 350px"><IMG height=800 alt="" src="http://members.chello.nl/eene2/achtergrondjes/achtergr013.gif" width=350 align=right border=2>
<P align=center><IMG height=180 src="http://users.skynet.be/pspcow/tekst049.gif" width=350 align=right></P><BR>
<DIV style="WIDTH: 350px; HEIGHT: 200px"><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<P align=center><FONT face=Isabelle size=5><FONT color=#ffffff>TYP HIER JE TEKST<BR>"<BR>"<BR>"<BR>"<BR>"<BR>"<BR>"<BR>"<BR>
<P align=center><IMG height=65 src="http://users.skynet.be/pspcow/tekst017.gif" width=300 align=center><BR></P></FONT></DIV></DIV>

Als je dus met de achtergrondjes en de plaatjes geoefend hebt... moet dit dus niet meer moeilijk zijn. Ik zou wel even de uitlijning zo laten staan anders kom je in de problemen. Maar let wel op.. deze code kun je het beste gebruiken om je weblog te verfraaien... Wat je als achtergrond gebruikt is ook afhankelijk van de pixels.... anders word het uit elkaar getrokken zoals gif en jpeg.

Pas de hoogte van je achtergrond aan, aan de lengte van je complete tekst.

* Scroller *

1) Maak een nieuw weblogitem
2) Geef deze een naam
3) Klik op html in je bewerkbalk
4) Haal de <DIV></DIV> tags weg met backspace
5) Plak onderstaande code vooraan in je log

<DIV align=center>
<DIV style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: #000000 3px solid; WIDTH: 250px; SCROLLBAR-SHADOW-COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #000000 3px solid; SCROLLBAR-DARKSHADOW-COLOR: #ff9999; SCROLLBAR-BASE-COLOR: #ff9999; HEIGHT: 250px; BACKGROUND-COLOR: #ffcc99" align=center>
<P align=center><FONT face=Arial color=#ffffff size=4>Typ hier je tekst</FONT></P></DIV></DIV>

6)Verander de kleuren van je randen...(Border-top, border- left, border-right, border-bottom)Zie kleurenkiezer!!!
7) De 3 px die je achter ieder kleurcode ziet staan is de dikte van je rand des te hoger het getal des te dikker je rand. Zet je hem op 0 en je hebt geen randen.
8) Pas de scrollbar kleuren aan met de kleurenkiezer
9) Pas de background-color aan, als kleur van je achtergrond met de kleurenkiezer
10) Pas de Width: 250 px en de HEIGHT: 250 px (de hoogte en de breedte)Des te kleiner het getal des te kleiner je scroller... Maximale breedte is 350 px anders ga je buiten je weblog.
11)De <FONT></FONT> wil zeggen je lettertype (face),kleur (color), lettergroote (size)... en je tekst.
12) Haal de tekst *Typ hier je tekst* weg door backspace en typ je eigen tekst... en gebruik <BR> voor de regel af te breken.
13) De scoller zal vanzelf verschijnen als hij nodig is!!!
14) <p align=center> wil zeggen de uitlijning... center=midden Left=links Right=rechts
15) Als je klaar bent item publiceren

* Sroller op een linkbare achtergrond *

<DIV style="WIDTH: 350px"><IMG height=400 alt="" src="http://members.chello.nl/eene2/achtergrondjes/achtergr013.gif" width=350 align=right border=2></FONT>
<DIV style="WIDTH: 350px; HEIGHT: 400px">
<DIV align=center><BR><BR><BR><BR>
<DIV style="BORDER-RIGHT: #000000 3px solid; BORDER-TOP: #000000 3px solid; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: #000000 3px solid; WIDTH: 250px; SCROLLBAR-SHADOW-COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #000000 3px solid; SCROLLBAR-DARKSHADOW-COLOR: #ff9999; SCROLLBAR-BASE-COLOR: #ff9999; HEIGHT: 250px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=center><FONT face=Arial color=#000000 size=4>Typ hier je tekst</FONT></P></DIV></DIV></DIV></DIV>

Pas de code aan zoals omschreven bij * Scroller * Bij deze code is het wel belangrijk dat als je de hoogte gaat veranderen dit te doen bij allebei de hoogtes. Er staan twee hoogtes in deze code zet deze allebei hetzelfde !!!!

* Werken met de "OPACITY" filter*

* Orginele afbeelding *

Code voor de afbeelding hierboven

*Verander de intensiviteit van de filter door style=1 te veranderen in 2 of 3*

*Werken met de "GRAY" filter*

Code voor de afbeelding hierboven

De code voor gray op tekst heeft geen effect deze blijft zwart of grijs

* Werken met de "x-ray" filter*

Code voor de afbeelding hierboven

De code voor x-ray op tekst heeft te weinig effect

*Werken met de "Invert" filter*

Code voor de afbeelding hierboven

De code voor Invert op tekst heeft te weinig effect

* Werken met de "Flip H" filter*

Code voor de afbeelding hierboven

De code voor FlipH op tekst

<DIV style="FILTER: FlipH; WIDTH: 350px; HEIGHT: 270px">
<P align=center><FONT face=Arial><FONT color=#4f2d3b><FONT size=4>Tekst</FONT></P></DIV>

* Werken met de "Flip-V" filter *

Code voor de afbeelding hierboven

De code voor FlipV op tekst

<DIV style="FILTER: FlipV; WIDTH: 350px; HEIGHT: 270px">
<P align=center><FONT face=Arial><FONT color=#000000><FONT size=3>Tekst</FONT></P></DIV>

* Werken met de "Glow" filter *

De code voor de afbeelding hierboven

De code voor Glow op tekst

<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 350px; HEIGHT: 304px" align=center><BR>
<P align=center><FONT face=Arial><FONT color=#000000><FONT size=4>Tekst</FONT></P></DIV>

* Werken met de "Shadow" filter *

De code voor de afbeelding hierboven

De code voor Shadow op tekst

<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 350px; HEIGHT: 304px" align=center><BR>
<P align=center><FONT face=Arial><FONT color=#4f2d3b><FONT size=4>Tekst</FONT></P></DIV>

* Werken met de "Dropshadow" filter *

De code voor de afbeelding hierboven

Code voor dropshadow op tekst

<DIV style="FILTER: Dropshadow(color=#4a7ca9,offX=5,offY=5); WIDTH: 350px; HEIGHT: 295px" align=center><BR>
<P align=center><FONT face=Arial><FONT color=#4f2d3b><FONT size=4>Tekst</FONT></P></DIV>

* Werken met de "Blur" filter *

Code voor de afbeelding hierboven

Code voor Blur op tekst

<DIV style="FILTER: Blur(direction=135); WIDTH: 350px; HEIGHT: 295px" align=center><BR><P align=center><FONT face=Arial><FONT color=#4f2d3b><FONT size=4>Code voor Blur op tekst</FONT></DIV>

* Werken met de "Wave" filter *

Code voor de afbeelding hierboven

Code voor Wave op tekst

*hier niet goed zichtbaar, maar in je weblog wel*

<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 350px; HEIGHT: 304px" align=center><BR>
<P align=center><FONT face=Arial><FONT color=#4f2d3b><FONT size=4>Tekst</FONT></P></DIV>

Door met de waardes van de codes te spelen geeft ook verassende effecten..

*Special Thanks to Indian-Danny*

Klik hier voor de omschrijving van Idian-Danny

*Aanklikbare thumbnail maken*

klik op het plaatje

<P align=center><A onclick="docWindow=window.open('Plak hier het url adres waar je naartoe linkt','myWindow1','toolbar=no,width=580,height=450, left=10,top=10 directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false" href="plak hier het adres waar je naartoe linkt"><IMG style="BORDER-RIGHT: navy 1px solid; BORDER-TOP: navy 1px solid; BORDER-LEFT: navy 1px solid; BORDER-BOTTOM: navy 1px solid" height=139 alt="Klik op de thumbnail om de grotere foto te zien." hspace=10 src="plak hier het url adres van het plaatje dat zichtbaar is in je log" width=122 align=center border=0></A></P>
<P align=center><B>Klik op het plaatje </B></P>
<DIV></DIV>

* <table> code voor randjes rondom je logje *

*klik hier voor een voorbeeld*

Dit is de opbouw van de voor de randjes rondom je logje deze code kun je zelf verder afmaken door extra codes voor plaatjes en tekst eraan toe te voegen.. dus gewoon achter de laatst tag <TD> ga je gewoon verder... De border kun je verhogen voor een extra randje, wil je dit niet zet je de border op 0, de kleur van de bordercolor(extra randje) kun je dus ook zelf bepalen. net zoals de cellspacing...

Have fun.. en speel met de waardes.. voeg extra randjes toe maak ze breder of smaller, laat je fantasie gaan...

* Kleurenkiezer *

Hier zijn er meerdere van.... Maar deze is die ik dus gebruik!!!

* Klik hier *

* Aanvullende codes *

Maak van tekst een link....

<A href="Plak hier het URL adres" target=_blank><FONT color=#0066ff size=2>Typ hier de tekst
</FONT></A>

Maak van een plaatje een link

Een plaatje in je weblog

Tekst

<P align=center><FONT face=Joan><FONT color=#4f2d3b><FONT size=4>tekst</FONT>

Direct mail vanuit je weblog

Regelafbreken

<br>

Spatie

Maak een plaatje wazig

* Credits *

Nou ik hoop dat het nuttige informatie is en dat het veel oefening en creativiteit op zal leveren... een eventuele vermelding waar julllie het vandaan hebben is natuurlijk heel fijn, zo dat ook meerdere spacers... dit bereikt.. en dit ook kunnen gebruiken!

Mocht ik onverhoopt iets over het hoofd gezien hebben of een aanvulling laat het me per mail weten en ik zal het bijwerken (LET OP NIET VOOR VRAGEN!!!!)

Succes.....!!!

Groetjes Jessica Alias Foreverfriendsdito

Als je één bezoekje hebt gebracht zou je even op mij willen stemmen?

Dank je wel..!!!