Initiatie (X)HTML en PHP
HTML of ook wel HyperText Markup Language is de taal waarin een webpagina gemaakt wordt. Elke website is in HTML gemaakt. Aangezien niet iedereen even goed is in code, heeft men programma’s als Dreamweaver, Frontpage, enz. ontwikkelt die deze code voor jou genereren.
Aangezien HTML een taal is die nogal veel toelaat (je mag met kleine letters en hoofdletters door elkaar werken, …), gaan browsers er verschillend op reageren. Om dit tegen te gaan, heeft men verschillende regels uitgevonden, waaraan men zich moet houden. Dit is XHTML: Extended HTML. We gaan enkele tags (html-codes) leren gebruiken.
HTML
. HTML staat voor HyperText Markup Language. HTML is een taal die erg logisch in elkaar steekt en die met tags werkt. Er is meestal een begin- en eindtag. De begintag opent iets, de eindtag sluit iets af.
Elke website bevat onderstaande structuur:
<html>
<head>
</head>
<body>
</body>
</html>
Je herkent in deze structuur de begintag <html> en de eindtag </html>. Beide tags zijn identiek, maar bij de eindtag staat er steeds een slash (/). Met de <html>-tag open en sluit je een webpagina.
Met de <head>-tag vorm je het hoofd van een website en met de <body>-tag vorm je het lichaam. Tussen de <body>-tags komt eigenlijk de hele inhoud staan: tekst, figuren, hyperlinks, tabellen en andere zaken staan altijd tussen de <body>-tags. De title en wat javascriptjes zijn de enige dingen die tussen de <head>-tags staan.
Tekstopmaak
Wanneer je graag een woord vet zet, moet je dat doen met de <b>-tag. B staat voor Bold. HTML is namelijk een Engelse taal.
Voorbeeld:
<html>
<head>
</head>
<body>
Dit woord staat in het <b>vet</b>
</body>
</html>
Resultaat:
Opmaaktags:
<b></b> |
Vet |
<i></i> |
Cursief |
<u></u> |
Onderlijnen |
<strike></strike> |
Doorstrepen |
<font></font> |
Tekstkleur, lettertype en tekstgrootte |
… |
Sommige tags moeten nog meer info bevatten. De <font>-tag wijzigt op zich eigenlijk helemaal niets aan tekst. Je moet er nog de attributen size, color en face in gebruiken.
Voorbeeld:
<html>
<head>
</head>
<body>
Deze woorden staan in <font face=”arial”>Arial</font> en in het <font color=”#FF0000” size=”4”>rood</font>.
</body>
</html>
Resultaat:
Naast tekenopmaak bestaat er ook nog alineaopmaak in de tekstopmaak. Deze opmaak heeft enkel effect op alinea’s en niet op aparte tekens.
Je maakt een alinea met de <p>-tag. Hierdoor ontstaat er tussen verschillende alinea’s ook alinea-afstand. Je kan er ook tekst door uitlijnen. Met de <br>-tag kan je een nieuwe regel in een bestaande alinea starten. Dit is de eerste tag die je niet dient af te sluiten.
Voorbeeld:
<html>
<head>
</head>
<body>
<p align=”center”>Dit is mijn allereerste alinea</p>
<p>Dit is de tweede alinea<br>
Dit is de tweede regel van de tweede alinea</p>
</body>
</html>
Resultaat:
Een lijn
Je kan ook een lijn invoegen via de <HR>-tag. Om de lijn te opmaken, moet je de attributen size, color, width en align gebruiken. Hiermee kan je de lijn respectievelijk dikker maken, verkleuren, de breedte en uitlijning wijzigen.
Ook de <hr>-tag is een tag die niet afgesloten wordt.
Voorbeeld:
<html>
<head>
</head>
<body>
Dit is een lijn
<hr size=”3” color=”FF0000” width=”400” align=”right”>
</body>
</html>
Resultaat:
Figuren
Je kan een figuur invoegen door er een koppeling naar te leggen.
Wanneer een figuur “zon.jpg” in een webpagina getoond wordt, is het belangrijk te weten waar deze figuur zich bevindt. Als de figuur in D:\website\figuren staat en de pagina in D:\website, dan is dit de benodigde tag om de figuur in te voegen:
<img src=”figuren/zon.jpg”>
Met de <img>-tag (staat voor image = figuur), kan je een figuur invoegen. Via het attribuut src (staat voor source=bron), kan je het pad van de figuur aangeven.
Andere attributen:
· Alt: een beschrijving geven aan de figuur
· Width en height: een breedte of hoogte geven aan de figuur
· Border: een rand geven aan de figuur
· …
Hoe je hyperlinks, tabellen, frames, layers, en andere objecten invoegt, zullen we niet meer behandelen in deze html-cursus. Hiervoor verwijs ik u graag naar de aparte HTML-cursus op zelfstudie.be.