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:
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:
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. Wat is HTML ?</A><BR />
<A HREF="#2">2. HTML document</A><BR />
<A HREF="#3">3. Elementen</A><BR />
<A HREF="#4">4. Attributen</A>
In de tutorial zet je dan zulke kopjes:
1. Wat is HTML ?
HTML code:
<HR NOSHADE>
<A NAME="wat"></A><B>1. 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=""> <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:
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:
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.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
