Home
  Sitemap
  stap 1
  stap 2
  Stap 3
  stap 4
  stap 5
  Stap 6
  Stap 7
  Print Pagina
  Nieuw
  Gastenboek
  Contacteer ons
Welkom bij Geneapage Factory
   

Stap 4: Teksten in alle vormen en kleuren

Toen we het over het gebruik van lettertypes hadden, hebben we al enkele mogelijkheden van de <FONT>-tag besproken. Met enkele simpele attributen kun je zowel de kleur als de weergavevorm en de grootte van het lettertype bepalen. Enkele voorbeelden :
We veranderen de grootte van het lettertype.

<font face="Comic Sans MS" size="3">We </font>
<font face="Comic Sans MS" size="4">veranderen</font>
<font face="Comic Sans MS" size="5">de</font>
<font face="Comic Sans MS" size="6">grootte</font>
<font face="Comic Sans MS" size="5">van</font>
<font face="Comic Sans MS" size="4">het</font>
<font face="Comic Sans MS" size="3">lettertype.</font>

Of misschien liever de kleuren ?

<font face="Comic Sans MS" size="5"><font color="#FF9966">Of</font>
<font color="#00FF00">misschien</font>
<font color="#66CCFF">liever</font>
<font color="#FF00FF">de</font>
<font color="#FF0000">kleuren</font>
<font color="#0000FF">?</font>

Je voelt al aan waar de beperking van deze effecten moeten gesitueerd worden: in de lettertypes die de gebruiker op zijn computer heeft. Daarom maken designers vaak gebruik van teksten die bij iedere gebruiker op de juiste wijze worden weergegeven. Ze doen dat door afbeeldingen te creëren die lettertekens en tekst bevatten. Zo kent de creativiteit geen grenzen meer, maar is men wel aangewezen op speciale programma's om de tekst aan te maken. Meestal gebruik je voor teksteffecten een grafisch programma. Er zijn er een heleboel. Op iedere sharewaresite vind je er minstens tien verschillende. Uit de grote verscheidenheid vermelden er hier dan ook maar enkele : 

Paintshop pro http://www.corel.com/ Een hypervolledig pakket met onbegrensde mogelijkheden. Vereist wel enig inzicht in het grafisch aanmaken van teksten. Shareware. De oudere versies van PaintShop (3.12 en 4.1) waren vroeger helemaal gratis. Misschien vind je zo'n gratis exemplaar via http://www.shareware.com ?
Adobe Photoshop http://www.adobe.com/products/photoshop/index.html - Een topprogramma met alle denkbare opties. PhotoShop is een commercieel programma en is niet goedkoop, maar je kunt er zowat alles mee doen.
MS Paint Standaard meegeleverd met Windows. Vrij beperkt van mogelijkheden, maar voor routineklussen erg geschikt.
FontTwister http://www.neuber.com/twister/index.html - Eenvoudig te bedienen, fantastische effecten, shareware.

Je kunt ook on-line via het internet terecht : op een aantal sites kun je in beperkte mate zelf teksten met effecten aanmaken. Hieronder vermelden we een site die speciale teksteffecten aanlevert :

Cooltext http://www.cooltext.com - Biedt de mogelijkheid logo's en buttons samen te stellen, die je na het beëindigen van de werkzaamheden kunt downloaden. Ongeschikt voor lange teksten. 

Toch biedt het gebruik maken van tekst in de vorm van afbeeldingen heel wat nadelen. Telkens als de tekst moet gewijzigd worden, moet er immers een nieuwe afbeelding aangemaakt worden: een moeizame en onflexibele werkwijze. Bovendien hebben afbeeldingen meer tijd nodig om ingeladen te worden dan HTML-teksten. Het vedient dus altijd de voorkeur tekst aan te maken met HTML-codes of CSS Style sheets.

Wat zijn CSS Style sheets ?
Cascading Style Sheets (CSS) kunnen tussen de gewone HTML-codes gebruikt worden. Aan HTML-tags kan een willekeurige opmaak toegewezen worden, zodat de browser voorgeschreven krijgt hoe de tag op de computer van de gebruiker moet vertaald worden. We geven hieronder een simpel voorbeeldje van een stijlbestand, dat in de HEAD-sectie van de HTML-pagina geplaatst moet worden :

<STYLE TYPE="TEXT/CSS">
.main {
background-color: #EEE3D8;
color: #8D6235;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
padding-left: 7px;
}
</STYLE>
 
Dit bestand geeft telkens er een <P class="paragraaf">-tag gebruikt wordt als resultaat de tekstgrootte en -kleur, fonttype en uitlijning zoals we die op deze site gebruiken.

We zouden een hele website nodig hebben om uit te leggen hoe CSS precies werkt. Dit thema valt dus (voorlopig ?) buiten het bestek van deze site, maar meer gegevens kun je online krijgen bij :

ProgrammeerPlaats-CSS leren
CSS-Tutorial