Lena

Luc

Knutselen

Kathy

Ieper

Mijn blogjes

borduren

Iedereen kan een site in elkaar knutselen.

Het is niet de bedoeling om hier een geleerde uitleg te geven, maar eenvoudig de basis te leggen om zelf een eenvoudige site te kunnen maken.

Sneltoetsen.

Opbouw van een HTML bestand. Tekst op uw site plaatsen. Kleur op uw site. Lettertypen. Hyperlinks maken. Tabellen. Foto's op uw site.

Op de eerste plaats moet je goed nadenken over de inhoud van uw site.

Op deze bladzijde kunt u zich de basis voor het maken van een site eigen maken

Voor de goede orde stel ik voor eerst een nieuwe map aan te maken met bv de naam "website", in die map kunt u uw aangemaakte html documenten en uw mappen met foto's in onder brengen.

Opbouw van een HTML bestand.

HTML (HyperText Markup Language) is de basistaal van iedere website

Om te beginnen moet men een nieuw tekstdocument openen.

Boven op uw nieuw document typt u <HTML>Met deze tag weet uw browser dat het hier om een HTML bestand gaat.

Onderaan uw nieuw document typt u </HTML> hiermee geef je het einde van een HTML bestand aan.

-- Een tag is het regeltje die tussen haakjes staat, men heeft een begintag en meestal een eindtag(niet altijd). Een eindtag heeft een / voor de tag.

Dat noemt men Nesting

<HTML>

</HTML>

Tussen de HTML tags moet het tekstdocument ingedeeld worden in twee delen, bovenaan komt het "HEAD" ( kop ) gedeelte met daarin de titel van uw site en de metatags en onderaan de "body", in de "body" wordt de inhoud van uw site geschreven.

-- Metatags zijn niet zichtbaar op de pagina zelf maar vertellen wel dingen over uw site. Een voorbeeld daarvan is de keywords-metatag: hierin geef je sleutelwoorden over jouw site op.

Metatags zijn speciale tags waarmee je je website kunt beschrijven. De meeste zoekmachines lezen deze metatags uit om informatie uit sites te halen.

Er zijn sites op het net die u helpen met het opmaken van uw METATAGS.

Hieronder enkele links naar bedoelde sites.

Druk hier	Onderwerp
	Metatags generator.
	Metatags, Worldnet.NL.
	Hulp bij het maken van metatags.
	Hulp bij het maken van metatags.
	Hulp bij het maken van metatags.
	Hulp bij het maken van metatags.
	Hulp bij het maken van metatags.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

Hier komen de Metatags.

</HEAD>

<body>

Hier komt de INHOUD van uw site.

</body>

</HTML>

De eertse pagina is klaar en kan weergegeven worden als eerste bladzijde, natuurlijk zonder inhoud.

De eerste bladzijde moet altijd de naam index dragen, dat is dan index.html..

Nu is het tijd om uw pagina op te slaan en het resultaat eens uit te testen.

- Ga naar Bestand

- Opslaan als

- Stel Opslaan als in op Alle Bestanden

- Vul bij Bestandsnaam index.html in

- Klik OK

Uw eerste HTML document is klaar. Als je dat document opent zie je natuurlijk nog niets om dat er nog niets in de body staat.

Tekst op uw site plaatsen.

Nu zullen we de eerste tekst op uw bladzijde plaatsen

U kunt beginnen met een hoofding

Deze plaatst u tussen de <h> tags

U hebt de keuze tussen <h1>tot <h6>

Hoe hoger het cijfer na de <h> hoe kleiner de kop;

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h1> Dat is een hoofding </h1>

<h2>Dat is een hoofding </h2>

<h3>Dat is een hoofding </h3>

<h4>Dat is een hoofding </h4>

<h5>Dat is een hoofding </h5>

<h6>Dat is een hoofding </h6>

<p>Lijn eerste site </p>

</body>

</HTML>

Verder komt de gewone tekst

Deze plaats je tussen de <p> tags

Als je nu kijkt zie je al iets op uw blad staan.

Wil je verder werken aan uw broncode , klik dan op de linker muisknop en druk op "bron weergeven" dan kom je terrecht op uw boncode en kun je er verder aan werken. Als u klaar bent gaat u naar bestand en druk op opslaan. Dan gaat u terug met het rode kruisje in de rechter bovenhoek. Nu zie je de veranderingen die u hebt aangebracht.

De mogelijkheid bestaat ook te werken met andere tags als u het uiterlijk van de tekst wilt veranderen

In de volgende tabel ziet u enkele tagsen wat zij met de tekst doen

op de voorbeeldtabellen zijn de tags zichtbaar, in werkelijkheid zijn ze natuurlijk niet te zien op uw document

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<p> Dat is een gewone zin </p>

<p> <b> Ik ben vet</b></p>

<p> <i> Ik ben kursief</i></p>

<p> <u> Ik ben onderstreept</u></p>

~~<p> <s> Ik ben doorstreept</u></p>~~

</body>

</HTML>

Je kunt de p tag nog meer info meegeven bv om uw zin in het midden van het blad te plaatsen, deze info noemen we een atribuut.

dan krijg je bv <p align="center">

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<p align="center"> ik sta in het midden </p>

<p align="left"> ik sta in het links </p>

<p align="right"> ik sta in het rechts </p>

</body>

</HTML>

Kleur op uw site.

Het is ook mogelijk een kleurtje te geven aan uw tekst of aan uw achtergrond. Dat doe je met zogenaamde hexadecimale codes. De kleuren kun je vindt je hier.

Let op: de </p>sluitingstag hoeft er dus niet te staan! Het mag wel.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<h3>Dat is een hoofding </h3>

</body>

</HTML>

Het is ook mogelijk de body samen met de tekst een kleur te geven

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<h3>Dat is een hoofding </h3>

<p>Deze regel is blauw </p> ( door de kleur aanwijzing in de body)

</body>

</HTML>

Lettertypen.

De grootte van de tekst bepaal je met het attribuut "size". Dit gebruik je in het element <font>. De grootte kan een waarde van 1 t/m 7 aannemen.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<p><font size="2">Dit is lettergrootte twee </font></p>

<p><font size="4">Dit is lettergrootte vier </font></p>

</body>

</HTML>

Wil je uw website aantrekkelijker maken dan kun je gebruik maken van letterrypes

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<p><font face="Arial">Deze tekst staat in Arial </font></p>

</body>

</HTML>

Natuurlijk kun je alle tags ook combineren, dus bijvoorbeeld een rode tekst, lettertype arial, gecentreerd en in lettergroote 3 .

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<p align="center"><font face="arial" color="#ff0000" size="3"> Dit is de tekst</font></p>

</body>

</HTML>

Hyperlinks maken.

Hyperlinks zorgen ervoor dat je met één muisklik naar een andere locatie kunt 'surfen'. Je kunt zowel linken naar html-bestanden als mp3-bestanden, software, afbeeldingen enzovoorts.

Hoe maak ik zo'n hyperlink? We gebruiken hiervoor de tag <a>, van anchor. Deze tag op zich zegt niet veel. Een belangrijk attribuut in deze tag is "href". Deze tag vertelt de browser welk document er geopend moet worden.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<a href="index.html"> Een link naar mijn index pagina < /a>

Met deze link ga je naar mijn index (eerste pagina) pagina, maar wordt geopent in het zelfde venster. De bezoeker van uw site kan u dus verliezen.

<a href="index.html" TARGET="_blank"> Een link naar mijn index pagina < /a>

Door target_blank erbij te plaatsen wordt de pagina altijd geopend in een nieuw venster van de browser. Zo blijft uw site open.

</body>

</HTML>

Tabellen.

Tabellen bestaan uit horizontale en vertikale lijnen

De tags die gebruikt worden zijn <table > <tr > <td ></td ></tr ></table >

Een rij wordt gedefinieerd met het TR element en elke cel in een rij met het TH of het TD element

hier een voorbeeld

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<h3>Dat is een hoofding </h3>

<tr>

<td width="25%">inhoud van cel 1 kolom 1 </td>

<td width="25%">inhoud van cel 1 kolom 2 </td>

<td width="25%">inhoud van cel 1 kolom 3 </td>

</tr>

<tr>

<td width="25%">inhoud van cel 2 kolom 1 </td>

<td width="25%">inhoud van cel 2 kolom 2 </td>

<td width="25%">inhoud van cel 2 kolom 3 </td>

</tr>

</table>

</body>

</HTML>

Hier onder het resultaat van bovenstaande broncode.

<body>

<h3>Dat is een hoofding </h3>

inhoud cel 1 kolom 1	inhoud cel 1 kolom 2	inhoud cel 1 kolom 3
inhoud cel 2 kolom 1	inhoud cel 2 kolom 2	inhoud cel 2 kolom 3

In het voorbeeld hierboven zie je dat de breedte (<td width="25%">)van de cel aangegeven wordt.

Je kunt ook de breedte van de tabel aangeven, dat doe je best met procenten, bv <table width="90%"> dan is de breedte van de tabel 90% van uw bladzijde.

Het is ook mogelijk om foto's in de cellen te plaatsen, zo kun je de foto's mooi uitlijnen op uw bladzijde.

, maar dat u uw afbeelding eerst verkleint in een grafisch programma (Paint Shop pro, Graphic Converter, Photoshop ...), de verkleinde afbeelding opnieuw opslaat, en die aan uw webpagina toevoegt.

Verkleint eerst uw afbeeldingen met een grafisch programma (Paint Shop pro, Graphic Converter, Photoshop ...), de verkleinde afbeelding opnieuw opslaan in een map, en die aan uw webpagina toevoegen.

Je kunt de border een kleur geven, met de tag bordercolor="#3366cc", bijvoorbeeld. Een cel kan ook een achtergrondkleur krijgen, dat doen we met het attribuut bgcolor="#000080". Je kunt zowel per cel(dat doe je in de <td> tag) of per tabel(in de <table> tag) de achtergrondkleur opgeven

De cellen kunnen elkaar ook overlappen, daarvoor gebruiken we de tags colspan en rowspan.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<tr;>

</tr>

</tr>

</table>

</body>

</HTML>

Hier onder het resultaat van bovenstaande broncode.

Cel 1	Cel 2
	Cel 3

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<body>

<tr>

</tr>

<tr>

</table>

</body>

</HTML>

Hier onder het resultaat van bovenstaande broncode.

Cel 1
Cel 2	Cel 3

Behalve de breedte kun je ook de hoogte van de tabel en de cellen opgeven. Dat doe je met het attribuut height="hoogte". Dit kan ook weer in pixels of procenten.

Een ander belangrijk attribuut is " border". Dit geef je in de tag <table> aan. Zoals je waarschijnlijk al verwacht geeft het de dikte van de rand van je tabel aan. Wil je een onzichtbare rand, dan zet je deze op 0.

Verder kennen we nog de attributen cellpadding en cellspacing. Cellspacing vertelt de browser de ruimte tussen de twee cellen. Kijk hieronder maar.

Eerst zie je een tabel met dikte 1 en cellspacing 1.

en deze tabel heeft dikte 1 en cellspacing 5

Ook is er nog het attribuut cellpadding. Dat maakt ruimte vrij tussen de tekst in de cel en de rand. Kijk maar naar de verschillen:

Deze cellpadding is 1

en deze cellpadding is 15

Foto's op uw site.

Natuurlijk wil je ook wel een foto op uw site plaatsen

Een gemiddeld computerscherm is 800 pixels breed en 600 pixels hoog. Zorg er dus voor dat uw afbeeldingen zeker niet groter zijn dan dat, omdat ze anders niet op één scherm passen en de gebruiker moet “scrollen” om de volledige afbeelding te kunnen zien. Meestal zal u afbeeldingen niet veel groter dan 250 tot 300 pixels willen maken. Let er bij het vergroten of verkleinen van afbeeldingen steeds op dat u de verhouding hoogte op breedte niet wijzigt, anders vervormt de afbeelding.

Verklein eerst uw afbeeldingen met een grafisch programma (Paint Shop pro, Graphic Converter, Photoshop ...), de verkleinde afbeelding opnieuw opslaan, en die aan uw webpagina toevoegen.

Een afbeelding definieer je met het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je een omschrijving op, welke in plaats van de afbeelding wordt weergegeven in tekst-georiënteerde browsers. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden. In het volgende voorbeeld zijn de genoemde attributen gebruikt.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<BODY>

</BODY>

</HTML>

Hier onder zie je het resultaat van de bovenstaande broncode.

Het is ook mogelijk uw foto's te plaatsen in tabellen, dan bestaat de mogelijkheid om een een kadertje rond te plaatsenn verder kunt u met tabellen de foto's mooi uitlijnen.

<HTML>

<HEAD>

<TITLE> Hier vult u uw TITEL in</TITLE>

< Metatags>

</HEAD>

<BODY>

<tr>

<td>

<td>

</td>

</tr>

</table>

</BODY>

</HTML>

Hier onder zie je het resultaat van de bovenstaande broncode.

Verder wil ik niet gaan, want is is de bedoeling om u de eerste stappen voor het maken van een site bij te brengen

Er zijn nog meer mogelijkheden om in uw site te verwerken, namelijk FRAMES, FORMLIEREN MAKEN,LIJSTEN MAKEN,i FRAMES, JAVA SCRIPT, CSS

Nu hebt u een site gemaakt op uw eigen PC dan moet u uw site nog kunnen laten zien aan gans de wereld

Voor wie nog meer wilt weten over het maken van een site volgen hieronder enkele links naar naar andere sites. Daarvoor gebruikt men een FTP programma.

File Transfer Protocol (kortweg: FTP) is een protocol dat uitwisseling van bestanden tussen computers vergemakkelijkt. Het standaardiseert een aantal dingen die tussen besturingssystemen vaak verschillen.

Met een FTP progamma stuurt u uw gegevens naar de computer van uw provider zodat ze in de hele wereld zichtbaar worden. Er zijn verschillende gratis FTP progeamma's te vinden op het net. Bij vele providers is er een gratis ruimte voorzien om uw site te plaatsen.

Terug naar TOP

Als u nog meer wilt weten over maken van een website heb ik hier onder enkele links geplaatst;

Druk hier	Onderwerp
	Gratis FTP programma's.
	Website maken.be
	Handleiding HTML.
	HTML cursus.
	HTML op het net.