Wil je wat te weten komen over HTML en
DHTML
(javascript) dan ben je hier op de juiste plaats bij Monnik
Uitleg over gebruikte afkorting en internetwoorden vind je in mijn internetwoordenboek (link !!!!)
Stuur je een mailtje met je webadres waar we je kunsten kunnen bekijken?
Je hebt uiteraard een computer nodig, met een eenvoudig tekstverwerkingsprogramma zoals kladblok of wordpad. Ook een browser (zoals Internet Explorer of Netscape) om je gemaakte webpagina te bekijken is noodzakelijk.
Als je het programma Frontpage gebruikt heb je minder nood aan een html-cursus. Toch is het handig om te weten hoe een pagina opgebouwd is om eventuele problemen in de paginacode op te kunnen lossen.
De onderdelen zetten we tussen tags: <>. Je opent met <> en sluit af met </>.
In de "head" zet je allerlei algemene dingen die belangrijk zijn voor je browser.
In de "body" plaats je tekst en afbeeldingen.
De tekst plaats je tussen <p> en </p>.
Open het programma kladblok of wordpad. Typ exact (!) hetvolgende over:
<head>
</head>
<body>
<p>Dit is mijn eerste pagina!</p>
</body>
</html>
Bestandsnaam: pwp1.htm en bestandstype: tekstdocument of html-document
Later kan je je pagina nog hernoemen.
Zoek in je computer waar je "pwp1.htm" hebt opgeslagen.
Klik "pwp1.htm" aan zodat deze pagina geopend wordt. Proficiat met je eerste pagina!
Opgepast met speciale lettertypen, wanneer je bezoeker (degene die op het web je pagina bekijkt) niet over die bepaalde "font" beschikt op zijn computer, dan zet zijn browser die tekst om naar het standaardlettertype.
<head>
</head>
<body>
<p>test lettertype</p>
<p>Dit geeft tekst in het standaardlettertype.</p>
<p><font face="Arial">Dit is lettertype Arial.</font></p>
<p><font face="Times New Roman">Dit is lettertype Times New Roman.</font></p>
<p><font face="Verdana">Dit is lettertype Verdana.</font></p>
</body>
</html>
"i" komt van italic en zorgt voor een schuine tekst
"u" komt van underline en zorgt voor een onderlijnde tekst
<head>
</head>
<body>
<p>test opmaak tekst</p>
<p><b>Deze tekst is vetgedrukt</b></p>
<p><i>Deze tekst is schuingedrukt</i></p>
<p><u>Deze tekst is onderlijnd</u></p>
<p>Deze tekst is soms <b>vet</b>, <i>schuin</i> of <u>onderlijnd</u></p>
</body>
</html>
<head>
</head>
<body>
<p>test schikking</p>
<p align ="left">Deze tekst staat links.</p>
<p align="center">Deze tekst staat in het midden.</p>
<p align ="right">Deze tekst staat rechts.</p>
</body>
</html>
Wil je de tabel dikker, stel hem dan in op lijndikte 2 of 3 of ...
<head>
</head>
<body>
<p>test zichtbare tabel</p>
<table border="1" width="100%">
<tr>
<td with="100%">dit is een tabel</td>
</tr>
</table>
</body>
</html>
Voornamelijk door cellen in te voegen in je tabel. Hierover straks meer.
<head>
</head>
<body>
<p>test onzichtbare tabel</p>
<table border="0" width="100%">
<tr>
<td with="100%">dit is een tabel</td>
</tr>
</table>
</body>
</html>
Natuurlijk kan je het lettertype, dikte en de plaats van de tekst binnen elke cel bepalen!
Tip: Om de plaatsing van je tekst echt naar je hand te zetten kan je werken met onzichtbare tabel en cellen!
<head>
</head>
<body>
<p>test cellen in tabel</p>
<table border="1" width="100%">
<tr>
<td with="34%">dit is een cel 1</td>
<td with="33%">dit is een cel 2</td>
<td with="33%">dit is een cel 3</td>
</tr>
</table>
</body>
</html>
Enkel afbeeldingen met de extentie (de bestandsindeling) gif, jpeg, jpg, en png zijn bruikbaar.
Via een beeld- of tekenprogramma kan je bestaande afbeeldingen met een andere indeling meestal opslaan naar deze bruikbare extenties.
.../ staat voor de plaats waar je afbeelding opgeslagen is.
<head>
</head>
<body>
<p>test afbeelding</p>
<p><img border="0" src=".../naamafbeelding.gif"></p>
</body>
</html>
<head>
</head>
<body>
<p><a href="http://www.pulhofburcht.yucom.be">Dit is een link naar de Pulhofburcht!</a></p>
</body>
</html>
Deze informatie wordt gelezen door je browser en zal bovenaan de pagina getoond worden.
<head>
<title>titel van je pagina</title>
</head>
<body>
</body>
</html>
Gratis webruimte kan je o.a. bekomen bij Yucom.
Via een ftp-programma kan je uploaden naar de voorbehouden plaats op de server van een provider. (Het gratis programma WS_ftp vind je op http://www.ipswitch.com)
Vraag aan je ouders om je te helpen bij het downloaden van zo'n programma van het internet, zodat jij daarna hiermee kan uploaden! Je zal gevraagd worden om het hostadres van je webruimte, je gebruikersnaam en paswoord op te geven. Bij twijfel kan je je provider om raad vragen.
Deze computertaal zorgt ervoor dat je HTML-pagina's dynamisch (D) worden.
Javascript is een objectgeoriënteerde scriptingtaal die gebruik maakt van objecten, eigenschappen, functies en gebeurtenissen.
voorbeelden:
- een pagina
- een knop
- een afbeelding
- een link
- de achtergrondkleur van een pagina
- de grootte van een knop
- de grootte van een afbeelding
- het openen of sluiten van een pagina
- het klikken op een knop, een afbeelding of een link
- onClick: bij het klikken met de muis
- onMouseOver: bij het bewegen van de cursor over iets
- onMouseOut: bij het weggaan van de cursor van iets
- onLoad: bij het inladen van een pagina
- onUnLoad: bij het sluiten van een pagina
Bijvoorbeeld: Bij het klikken op een afbeelding wordt er een waarschuwingsvak geopend.
</script>
<head>
</head>
<body>
<script language="javascript">
document.writeln("Hallo, kan je mijn eerste javascript lezen?");
</script>
</body>
</html>
<head>
</head>
<body>
<script language="javascript">
document.writeln("<img src='naamafbeelding.gif'>");
</script>
</body>
</html>
<head>
</head>
<body>
<form>
<input type="button" value="klik hier"
onClick='alert("Dit is een waarschuwingsvak.")'>
</form>
</body>
</html>