login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials:

Uitleg:

Voorwoord

Hieronder krijgt u een korte uitleg hoe u uw tutorial kan opmaken. Als u dit niet allemaal wilt lezen kunt u gewoon een voorbeeld downloaden.

Als u een tutorial maakt voor op sitemasters te plaatsen is het belangrijk dat u enkel de code maakt die tussen de <BODY></BODY> moet. U hoeft geen <HTML> , <HEAD> en <BODY> tags te plaatsen. Als u css gebruikt die niet op sitemasters staat plaats die dan gewoon helemaal boven in een <STYLE> tag.

Als u deze stijlen gebruikt op uw pagina is het normaal dat u het resultaat pas zal zien als deze op sitemasters staan.

Als u een tutorial hebt gemaakt, gelieve deze eerst te controleren op SPELLING d.m.v. de tekst even te kopiëren en plakken in Word, en dan een spellingcheck te doen.

Als laatste kan u van uw tutorial een preview bekijken door op deze pagina de HTML code in te typen.

1. CSS stijlen

In de tutorials kunt u gebruik maken van stijlen die wij ook gebruiken op Sitemasters. Enkele veel gebruikte classes:

class="code"

.code {
border: 1px solid #999999;
background-color: #F9F9F9;
}


Als je deze class gebruikt bijvoorbeeld op een tabel krijg je dit als resultaat:

Inhoud

HTML code:


<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="2" CLASS="code">
<TR>
<TD>Inhoud</TD>
</TR>
</TABLE>

class="kader"

.kader {
border: 1px solid #B7B7B7;
background-color: #FDFDFD;
}


Als je deze class gebruikt bijvoorbeeld op een tabel krijg je dit als resultaat:

Inhoud

HTML code:


<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="2" CLASS="kader">
<TR>
<TD>Inhoud</TD>
</TR>
</TABLE>

Enkele stijlen die automatisch gebruikt worden:

a:link, a:visited {
color: #1E468A;
text-decoration: none;
}

a:hover {
color: #1184C8;
text-decoration: underline;
}

a:active {
color: #666666;
text-decoration: none;
}

textarea, select, input {
background-color: #F7F7F7;
border-color: #666666;
border-style: solid;
border-width: 1px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
}

body, ul, td, th, p, small {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
}

li {
line-height: 25px;
}

2. Navigatie

Een duidelijk navigatie is ook erg belangrijk. Hier een voorbeeldje hoe het moet:

1. Wat is HTML ?
2. HTML document
3. Elementen
4. Attributen

HTML code:

<A NAME="top"></A>
<A HREF="#1">1.&nbsp;Wat is HTML ?</A><BR />
<A HREF="#2">2.&nbsp;HTML document</A><BR />
<A HREF="#3">3.&nbsp;Elementen</A><BR />
<A HREF="#4">4.&nbsp;Attributen</A>

In de tutorial zet je dan zulke kopjes:


1. Wat is HTML ?

HTML code:

<HR NOSHADE>
<A NAME="wat"></A><B>1.&nbsp;Wat is HTML ?</B>
<HR NOSHADE>

Op het einde van een kopje plaats je dan het volgende:

top

HTML code:

<IMG SRC="images/pijl.gif" ALT="">&nbsp;<A HREF ="#top">top</A>

3. Opmaak

Het is belangrijk dat tutorials een mooie opmaak heeft, zodat de tutorial gemakkelijk te lezen is. Als je voorbeeld een tabel gebruikt met code in kunnen we deze tabel laten inspringen zodat hij wat opvalt:

Inhoud

HTML code:

<TABLE WIDTH="90%" BORDER="0" CELLSPACING="0" CELLPADDING="2" CLASS="code" ALIGN="center">
<TR>
<TD>Inhoud</TD>
</TR>
</TABLE>

Je kunt ook gebruik maken van onzichtbare tabellen:

Inhoud


HTML code:

<TABLE WIDTH="90%" CELLSPACING="0" CELLPADDING="2" BORDER="0" ALIGN="center">
<TR>
<TD>Inhoud</TD>
</TR>
</TABLE>

In de HTML tutorials !!!

elementen krijgen een blauwe kleur: (#0000FF)
attributen krijgen een rode kleur: (#FF0000)

Voorbeeld:

<FONT FACE="arial" SIZE="3" COLOR="red">Welkom op Sitemasters</FONT>

4. PHPcode kleuren (highlighten)

Kijk hier

5. Voorbeeld downloaden

Hier kunt u een voorbeeld downloaden, en hoeft u enkel te wijzigen.

6. Eindwoord

Deze pagina zal regelmatig geupdate worden.

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.008s