HTML in een notendop
1.De structuur van een html-document
<html>
<head>
.......
</head>
<body>
....
</body>
</html>
2.Een titel in de titelbalk
<head>
<title>Dit is een titel</title>
</head>
3. Een nieuwe regel in een tekst
- paragraaf met <p>
- line break met <br>
- horizontale streep met <hr>
4. Tekstopmaak
- vet met <b> en </b>
- cursief met <i> en </i>
- onderstreept met <u> en </u>
- centreren met <center> en </center>
- paragrafen aligneren kan met <p align="uitlijning">
waarbij uitlijning gelijk is aan left, right of center
- met <blockquote></blockquote> wordt de ingesloten
tekst links ingesprongen weergegeven
- Een spatie wordt met de escape sequence gegenereerd.
Een tab staat voor 3 dergelijke sequences.
5. Koppen en fonts
- van <h1> </h1> tot <h6> </h6> waarbij h1
het grootste lettertype is
- andere groottes bekomt men met <font size="grootte">
</font> waarbij grootte een cijfer is
- De code <font face="soort font"> </font> genereert
een bepaald lettertype. Bemerk dat niet alle browsers alle soorten lettertypen kunnen
weergeven.
6. Lijsten
- genummerde lijst
<ol>
<li>...
<li>...
</ol>
- ongenummerde lijst
- <ul>
<li>...
<li>...
</ul>
7. Afbeeldingen
- enkel GIF- , JPG- en PNG-plaatjes zijn toegelaten
- in het document op te nemen met het commando <img src="naam
van de afbeelding">
- de breedte en hoogte kan men meegeven met <img
src="afbeelding" height="300" width="200"> waarbij
de getalwaarden als pixels geïnterpreteerd moeten worden
- het ALT-attribuut maakt het mogelijk een tekst te plaatsen indien de
browser geen afbeeldingen aankan of indien het automatisch laden staat uitgeschakeld, dus <img
src="afbeelding" alt="tekst"> plaats de tekst indien het
grafisch plaatje niet kan afgebeeld worden
- Tekst en afbeelding aligneren kan met ALIGN="top, middle of
bottom" zo zal
- <img src="afbeelding" align="top">: de
bovenzijde van de afbeelding wordt uitgelijnd met de bovenkant van de regel
- <img src="afbeelding" align="middle">: het
midden van de afbeelding wordt uitgelijnd met de onderkant van de regel
- <img src="afbeelding" align="bottom">: de
onderkant van de afbeelding wordt uitgelijnd met de onderkant van de regel; dit is de
default instelling
- Met ALIGN="left" kan met de afbeelding links en de tekst recht
plaatsen, terwijl ALIGN="right" het omgekeerde doet.
- Verder bestaat de mogelijkheid een BORDER rond de afbeelding te maken
b.v. <img src="afbeelding" border="2">
- VSPACE ="waarde" laat toe de afstand tussen de tekst boven en
onder de afbeelding te bepalen, terwijl HSPACE="waarde" hetzelfde doet voor de
tekst links en rechts van de afbeelding
- een plaatje van het internet kan downloaden door de optie save image
as uit het snelmenu te selecteren
8. Links
- een link naar een document op een andere server: <a
href="URL"> tekst </a>
- een link naar een document op de locale server: <a href="path
naar het document op de eigen server> tekst </a>
- een link naar een onderdeel van een html-document : <a
href="document#naam"> tekst </a> waarbij in het document een
markeerpunt wordt geplaatst met <a name="naam"> tekst </a>. Men
spreekt hier van een bookmark.
- een mailto-link kan met <a href="mailto:e-mailadres">
tekst </a>
9. Tabellen
10. Frames
- In een document met frames is het BODY-element vervangen door een
FRAMESET-element
- <html>
- <head>
- </head>
- <frameset>
-
- </frameset>
- </html>
- FRAMESET kent volgend attributen:
- rows="waardenlijst" : bestaat uit een aantal waarden gescheiden door
een komma. Het aantal bepaalt het aantal kolommen terwijl de waarde zelf de hoogte van de
rij definieert. De waarde kan in pixels, in procenten t.o.v. het volledig frame, of met
wildcards; een paar voorbeelden:
<frameset rows="200,300,100">
<frameset rows="40%,*">
<frameset rows="*,2*,*"> (opgelet: verdeling 25%,50%,25%)
- cols="waardenlijst" idem als voor rijen
- Het FRAME SRC-element bepaalt wat er in het frame moet komen
- Het volgende voorbeeld maakt 4 frames van gelijke hoogte en breedte
- <frameset rows="*,*">
- <frameset cols="*,*">
- <frame src="document1.htm">
- <frame src="document2.htm">
- </frameset>
- <frameset cols="*,*">
- <frame src="document3.htm">
- <frame src="document4.htm">
- </frameset>
- </frameset>
-
- Het FRAME-element laat volgende attributen toe:
- marginwidth="waarde": de afstand in pixels tussen de inhoud en de
linker -en rechterkant van het frame
- marginheight="waarde": de afstand in pixels tussen de inhoud en de
boven -en onderkant van het frame
- scrolling="yes, no of auto": of de scrolbars al of niet moeten
weergegeven worden
- noresize: of het frame al of niet kan vergroot of vekleind worden
- Frameborder="no" of "yes" indien de rand van een frame al
of niet zichtbaar moet zijn.
- name="schermnaam" geeft aan het frame een naam
bij het plaatsen van een link kan men met het TARGET-attribuut meegeven in welk scherm de
inhoud moet afgedrukt worden b.v. <a href="document.html"
target="schermnaam">
Indien target="_top" wordt het frame verlaten en het volledig
scherm gebruikt.
11. Formulieren
- In form of formulier wordt gebruikt om informatie door te sturen naar de
internetserver. De manier waarop dit kan gebeuren is afhankelijk van de software die
draait op de internetserver. We onderscheiden 2 manieren:
- CGI (Common Gateway Interface): het formulier start een programma
op de server; dit kan een perl, visual basic of C-programma zijn. Doch ook gewone
batchfiles zijn mogelijk
- ISAPI (Internet Server Application Interface) : op de server
bevindt zich een dynamic link library permanent in het geheugen. Via specifieke scripts
kunnen de functies uit deze library aangesproken worden. Deze laatste manier is duidelijk
de snelste.
- Een formulier bestaat uit verschillende formelementen tussen <form>
en </form>
- tekstinvoervak van één regel
<input type="text" value="waarde"
name="variabelenaam" size="aantal" maxlength="waarde"
align="uitlijning">
- waarbij
waarde: een default tekstwaarde
name: de naam van een variabele
size: lengte van invoervak
maxlength: maximum aantal in te voeren karakters
align=left,right of center
- voorbeeld
<form>
voer uw naam in: <input type="text" name="familienaam"
size="30">
</form>
- resultaat
- opmerking
type password plaats de tekstkarakters met *
- tekstinvoervak van verschillende regels
<textarea rows="aantal"
cols="aantal" name="variabele naam"
wrap="afbreekwijze">tekst</textarea>
- waarbij
rows: het aantal regels voor het tekstvak bepaalt
cols: aantal karakters in de breedte voor het tekstvak
wrap met waarden off (de tekst wordt niet afgebroken) virtual (afbreken
in het tekstvak niet bij het doorsturen naar de server) of physical (afbreken in
tekstvak en bij doorsturen naar de server)
- voorbeeld
<form>
tik het verslag: <br><textarea rows="4" cols="30"
name="verslag">een voorbeeld</textarea>
</form>
- resultaat
tik het verslag:
- keuzerondjes
<input type="radio" name="variable" value="waarde"
checked>
- waarbij
value de waarde is die in de variabele name gestockeerd wordt
checked vult het keuzerondje op en wordt dus de default waarde
- voorbeeld
<form>
<input type="radio" name="keuze" value="1"
checked>eerste keuze<br>
<input type="radio" name="keuze" value="2">tweede
keuze<br>
</form>
- resultaat
- aankruisvakjes
<input type="checkbox" name="variable" value="waarde"
checked>
- waarbij
value de waarde is die in de variabele name gestockeerd wordt
checked vult het keuzerondje op en wordt dus de default waarde
- voorbeeld
<form>
<input type="checkbox" name="keuze" value="1"
checked>eerste keuze<br>
<input type="checkbox" name="keuze" value="2">tweede
keuze<br>
</form>
- resultaat
- uitschuifkeuzelijst
<select name="variabele" size="aantal">
<option selected value="waarde">keuzes
</select>
- waarbij
name de naam van de variable is
size: hoeveel items moeten getoond worden
value de waarde die in de variabele gestockeerd wordt
selected: de defaultwaarde
- voorbeeld
<form>
<select name="keuze" size="1">
<option value="1">eerste keuze
<option value="2">tweede keuze
<option selected value="3">derde keuze
</select>
</form>
- resultaat
- submit- en reset-knoppen
<input type="submit" value="versturen">
<input type="reset"value="resetten">
- waarbij
type="submit" om de ingevoerde waarden van de vorige velden door te
sturen naar de server
type="reset" om de waarden van de vorig ingevoerde velden op nul te
plaatsen
value biedt de mogelijkheid een tekst op de knop te voorzien
- voorbeeld
- Naast de verschillende formulierelementen zijn bij het formscommando nog 2 attributen
erg belangrijk.
- method: hiermee
wordt aangegeven hoe het formulier moet doorgestuurd worden
- GET: alle ingevoerde informatie wordt aan de URL toegevoegd en in één keer naar de
server doorgestuurd.
- POST: de URL wordt eerst opgeroepen en pas dan wordt de informatie doorgestuurd.
De methode is afhankelijk van de software die op de server draait en wordt bij het
formcommando als volgt meegegeven:
<form method="POST"> of <form method="GET">
- action: wordt gevolgd door de aanduiding
van het programma of het script dat op de server moet opgestart worden en dat zal instaan
voor de verwerking van de doorgestuurde gegevens.
De waarde van het action attribuut is dus sterk afhankelijk van welke software op de
server draait en kan er als volgt uitzien:
- <form method="POST" action ="http://www.sip.be/verwerk.idc> waarbij
verwerk.idc een script is geschreven voor een server waar microsoft internet
information server opdraait
- <forms method="POST" action="http://www.sip.be/ees.exe">
waarbij lees.exe een visual basic programma is dat draait op een machine waar als software
website van O'Reilly geïnstalleerd werd.
Wel kan men in het actionattribuut meegeven dat de waarde van de ingevoerde velden moet
doorgestuurd worden naar een e-mailadres. Dit kan als volgt:
<form method="POST" action="mailto:jblondeel@sip.be">
.....
</form>