Inleiding
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
1. Wat is HTML ?
2. HTML document
3. Elementen
4. Attributen
1. Wat is HTML ?
HTML staat voor "Hyper
Text Markup Language" en is een taal om layout te produceren. Elke website bevat HTML codes omdat dit de basis taal is van een website. Met HTML maak je de structuur van een website zoals de tabellen, de tekst, de afbeeldingen, etc. Een HTML bestand heeft als extentie .htm of .html. Een HTML bestand kan worden aangemaakt met een WYSIWYG editor (What You See Is What You Get) zoals Frontpage en Dreamweaver, maar kan ook worden aangemaakt met eenvoudige editors zoals kladblok dat elke gebruiker wel heeft. Ik zou zeggen, start kladblok en volg met ons mee!
 top
2. HTML document
Een HTML document is als volgt opgebouwd:
|
<HTML>
<HEAD>
<TITLE>Mijn eerste html pagina</TITLE>
</HEAD>
<BODY>
Hier komt de tekst, tabellen, etc
</BODY>
</HTML>
|
 Typ deze code in kladblok en sla het bestand op als een .htm of .html bestand (pagina.htm) en plaats het ergens op je harde schijf. Je ziet dan in de map waar je het bestand hebt opgeslaan een HTML icoon. Als je hier op dubbel klikt wordt de pagina geopend in je webbrowser. Je eerste HTML pagina is een feit.
top
3. Elementen
Een element, ook wel genoemd tag, ziet er meestal uit:
"Elementen hoeven niet in hoofdletters worden te schrijven. Ik doe dit enkel omdat het dan duidelijker te lezen is."
Elementen worden dus tussen twee punthaakjes geplaatst (< en >). Er zijn ook elementen die geen eindtag (</TAGNAAM>) hebben, daar gaan we het later in deze tutorial nog over hebben. In ons bovenstaande HTML document worden er dus elementen gebruikt. Elk element heeft zijn eigen betekenis:
| <HTML> |
Dit vertelt de browser dat er ook daadwerkelijk HTML wordt gebruikt. |
| <HEAD> |
Dit staat voor "header" oftewel "kop". Hierin staan verplichte zaken zoals de gebruikte tekenset en de titel <title> van de pagina. Je moet je nog geen zorgen maken over de gebruikte tekenset, dit zien we later in een andere tutorial terug. |
| <BODY> |
Het visuele gedeelte van de pagina. Alles wat in <body> staat is daadwerkelijk te zien. |
Bovenstaande
elementen zijn dus elementen die een eindtag hebben. Het is belangrijk dat deze tags in een juiste volgorde worden geplaatst. Met onderstaande voorbeeld ga ik het proberen duidelijk te maken:
<B><U>Deze tekst is in vet gedrukt "Bold" en onderlijnd "Underline".</B></U> |
Deze volgorde is FOUT. Als een element als eerstes begint moet die ook als laatstes eindigen. Dit is wel juist:
<B><U>Deze tekst is in vet gedrukt "Bold" en onderlijnd "Underline".</U></B> |
Als je deze regel niet goed kan onthouden kan je het met cijfers onthouden: 1 2 2 1.
Er zijn dus ook elementen die GEEN eindtag hebben. De meest gebruikte zijn:
| <BR> |
Nieuwe lijn. (Break) |
| <HR> |
Horizontale lijn. (Horizontal rule) |
| <IMG> |
Afbeelding. (Image) |
| <INPUT> |
Voor soorten invoer d.m.v. formulier. (Tekstveld, Tekstarea, keuzelijst,...) |
| <FRAME> |
Frame. |
Er zijn er nog andere die je later zal terug vinden in de tutorials.
top
4. Attributen
De meeste elementen hebben verschillede attributen. Een attribuut is een bepaalde eigenschap van een element bijvoorbeeld de hoogte, breedte, kleur, ...
Zo kunnen we voorbeeld bij een afbeelding de breedte en hoogte meegeven. Met enkele voorbeelden wordt het duidelijker:
<IMG ALT="..." HEIGHT="..." SRC="....jpg" WIDTH="..."> |
| ALT |
De alternatieve tekst die verschijnt wanneer je uw muis stil houdt op een afbeelding. |
| HEIGHT |
Hiermee wordt de hoogte van een afbeelding ingesteld (in pixels). |
| SRC |
De "source" oftewel de bron (locatie,adres) van een afbeelding. |
| WIDTH |
Hiermee wordt de breedte van een afbeelding ingesteld (in pixels). |
<IMG ALT="Mijn afbeelding" HEIGHT="400" SRC="afbeelding.jpg" WIDTH="300"> |
<FONT FACE="..." SIZE="..." COLOR="..."> |
| FACE |
Het soort lettertype van een tekst (vb: arial). |
| SIZE |
De grootte van het lettertype. |
| COLOR |
De kleur van het lettertype. |
<FONT FACE="arial" SIZE="3" COLOR="red">Welkom op Sitemasters</FONT> |
Meer elementen en de mogelijke attributen ervan vind u op deze pagina. In de volgende tutorial gaan we verder in (uitgebreider) op elementen en attributen.
top
Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
