Cursus HTML - deel 1: het prille begin en opbouw van het HTML-document

Trefwoorden: HTML, website bouwen, webtaal, website

1. Voorwoord


Als je graag websites wil beginnen maken of je meer wil verdiepen in HTML, dan kan het handig zijn om deze cursus eens door te nemen.
Ik zal proberen in een paar delen de basis van HTML uit te leggen. Met HTML alleen maak je niet de perfecte website, daar is meer voor nodig, maar het is een essentieel begin.
En je moet ergens beginnen hé ;).

Vergeet ook niet om veel te oefenen. En zelf dingen uit te proberen. Oefening baart kunst.

2. Wat heb ik nodig?


Om een website in HTML te maken hebt u niet veel nodig.
  • Een HTML-editor. Zelfs kladblok volstaat, dit staat in Windows onder Bureau-accesoires
  • Webspace om de website op te plaatsen. Deze is gratis beschikbaar bij je provider of bij gratis hosts.
  • Een beetje verstand van computers

Als je een website gemaakt hebt. Onthoudt dan dat je hem moet opslaan als een .html document.
Let op:
Kladblok heeft de gewoonte om de bestanden op te slaan met de extensie .txt. Als je je document opslaat, selecteer dan "alle bestanden" en typ in het venster naamvanhetdocument.html in. Dan is de pagina opgeslaan als HTML-document.

Als je jouw website wil bekijken hoef je die niet telkens te uploaden. HTML-documenten kunnen via een dubbele klik op het bestand bekeken worden in de browser.

3. Opbouw van de HTML-pagina


Eerst moet een HTML-pagina een duidelijke opbouw hebben. Volg even mee.
Ik begin met een stuk code, geef uitleg en bouw zo verder. Op het einde zullen we een mooi gestructureerde HTML-pagina hebben.

CODE - opbouw
  1.  
  2. <html>
  3. </html>


Hierboven zie je 2 regels code. We noemen deze "tags". De meeste tags worden ook weer afgesloten (niet allemaal). De tag waar de slash instaat sluit dus af.
Deze tags dienen om de browser te tonen dat het hier om een HTML-document gaat. Alle code die dient om de website samen te stellen moet dus binnen deze tags komen.
Natuurlijk kan de browser hier geen website uit maken. Daarom voegen we eerst de volgende tags toe.

CODE - de headtags
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title></title>
  6. </head>
  7.  
  8. </html>

Hier zijn 2 nieuwe tags toegevoegd: head en title(deze bevindt zich in de head).
De head bevat informatie over de website. Zoals zoekwoorden voor browsers, eventuele dingen die ingeladen moeten worden, ...
Hier staan de title-tags binnen de head. Vul hier de titel van je website in.
Als je jouw bestand nu opent in de browser, dan staat in de titelbalk van de browser wat jij net hebt ingetypt.

Nu moeten we nog tags hebben waarin alles moet staan die de bezoeker te zien krijgt.

CODE - de bodytags
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title>Welkom op mijn website!!!</title>
  6. </head>
  7.  
  8. <body>
  9. </body>
  10.  
  11. </html>

Weer nieuwe tags: de body-tags. Alles wat hier ingetypt staat ziet de bezoeker. Je zal dus meestal dingen invoeren tussen de body-tags. In de volgende delen wordt uitgelegd, hoe je dit allemaal kan doen.
Tekst invoeren, Hyperlinks, Afbeeldingen, Tabellen, ...
De laatste code is de structuur van de webpagina die je voor alle pagina's zal gebruiken.

4. Aandachtspunten


Je kan in een HTML-document ook commentaar toevoegen. Dit wordt niet geïnterpreteerd door de browser en zorgt dus niet voor uitvoer. Dit is vooral handig bij lange codes. Zo kan je vlug dingen terugvinden.
De commentaar wordt als volgt neergezet.
CODE - commentaar
  1.  
  2. <!--Dit is commentaar in een HTML-document-->


Let erop dat je nu en in de toekomst de tags zeker niet verkeerd afsluit.
Even een simpel voorbeeld (komt pas in volgende delen aan bod)
CODE - tags juist afsluiten
  1.  
  2. <em><strong>Dit is vette en cursieve tekst</em></strong>
  3. <em><strong>Dit is vette en cursieve tekst</strong></em>

De bovenstaande regels zijn verschillend. één van de twee is fout, met name de eerste.
Tags moeten namelijk omarmd afgesloten worden. Stel het je zo voor. In de eerste regel sluit de u-tag af, terwijl de b-tag nog open staat. De tags haken als het ware in elkaar.
In de tweede regel worden ze juist afgesloten. Hier komen de tags elkaar niet tegen en omarmen elkaar.


Zo, nu kan je een html-document opbouwen. In het volgende deel gaan we leren tekst in te voeren en in alle soorten, maten en kleuren.

Klik hier om deel 2 tekst en zijn opmaak te lezen.Dit artikel werd geschreven door Simon op dinsdag 21 november 2006 om 20:47 en werd sindsdien 14978 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.