Site Map Opdrachten Theorie Modulen Trajecten

HTML: 02- Webpagina Onderdelen

We hebben tags besproken maar hoe zien ze er uit, hoe werken ze en hoe worden ze gebruikt?

tags
Figuur 1: tags

Tags

Tags zijn herkenbaar aan de "<" en ">" (kleiner dan en groter dan) tekens. Daarbij worden ze weergegeven in het blauw.
Laten we kijken naar de eerste regel in figuur 1, waar "<html>" staat. Hier zie je de tekst html staan tussen de "<" en ">" tekens. Omdat html tussen deze tekens staat noemen we deze combinatie de "html tag". De tekst tussen deze tekens heet een sleutelwoord en geeft een opdracht aan de browser. Hierdoor moet je goed rekening wanneer je bepaalde tags gebruikt, omdat sommige tags elkaar kunnen tegenwerken of overbodig maken. Tags komen bijna altijd voor in tweetallen, genaamd de begintag en de eindtag. Het verschil tussen deze twee is dat de eindtag nog een slash ("/") gebruikt, die direct voor het sleutelwoord staat. We nemen als voorbeeld weer "<html>". Aan de opmaak te zien, geen slash, kunnen we zeggen deze tag de begintag is. Zoals eerder vermeldt hoort bij een begintag ook een eindtag. Kijken we naar de laatste regel dan zien we daar "</html>" staan. Omdat de slash voor het sleutelwoord staat, weten we dat dit de eindtag is. Het is verstandig om de sleutelwoorden in kleine letters te schrijven. Omdat er meerdere varianten van HTML en andere talen zijn, weet je nooit hoe de code later gebruikt wordt. Dit zorgt dat je zeker weet dat je geen problemen zal krijgen in te toekomst.

Terug naar boven

Attributen

Omdat je bepaalde tags vaker gaat gebruiken bij de opbouw van je webpagina's, is het handig om bij deze tags informatie te plaatsen. Hierdoor kan je elke tag een persoonlijk tintje geven. Dit kan in de vorm van attributen die altijd geplaatst worden in de openingstag.
Per tag zijn er een aantal selecte attributen beschikbaar en elk attribuut is herkenbaar aan zijn naam. Deze naam, die maar één keer per tag gebruikt mag worden, krijgt een waarde die je zelf mag bedenken. Het is verstandig om een logische naam te geven, zodat je direct ziet waarvoor het gebruikt wordt.
Een attribuut heeft bestaat uit een naam dat een waarde krijgt. In figuur 2 zie je op regel 9 'id="header"' staan. De naam van het attribuut is "id" en de waarde van het attribuut is "header". De opmaak van een attribuut met zijn waarde is 'naam="waarde"'. attributen
Figuur 2: attributen

Op regel 10 van figuur 2 zie je de "a tag", met daarin de attributen (in het rood) href en title. De waarden van deze attributen zijn (in het paars) "../index.html" en "Naam van het product", waarbij beide waarden omsingeld door dubbele quotes ("). Bij het gebruik van attributen is het verstandig om de waarden tussen dubbele quotes te zetten zodat deze door de browser als één geheel gezien wordt. Gebruik je geen dubbele quotes dan wordt alleen de eerste waarde gekoppeld aan het attribuut, de overige waarden zal de browser proberen te verwerken. Het is dan de vraag of dit uiteindelijk het gewenste resultaat oplevert.

De meest voorkomende attributen zijn:
  • id: geeft een uniek code aan de tag
  • title: voor het tonen van tekst als extra informatie wanneer de muis er over zweeft

Terug naar boven

Element

Tags komen bijna altijd voor in tweetallen, de begintag en de eindtag. Tussen deze twee tags wordt tekst geplaatst of weer een andere tag.

elementen
Figuur 3: elementen

In de regel 3 zien we de begintag van title, in regel 5 de sluitingstag van title en daartussen de tekst staan "Visual Code | Pagina onderdelen". Deze verzameling samen heet een element: de begintag, de eindtag en alles wat daartussen zit. Hebben we het over het "title element", dan gaat het om regels 3 t/m 5. Praten we over de "head element", dan gaat het om regels 2 t/m 6.

Terug naar boven

Geneste element

Het "title element" is onderdeel van het "head element". Wanneer een element onderdeel is van een ander element, praten we over een geneste element.

Terug naar boven



Ga verder naar HTML: 03- Webpagina Opbouw
Over Visual Code

Visual Code is een methode, opgezet voor iedereen die een website wil leren maken. Er zijn verschillende soorten websites. Deze soorten websites zijn opgedeeld in trajecten. Deze trajecten zijn opgedeeld in modulen. Zo begin je met het opzetten van een statische website om deze steeds verder uit te breiden.
Contact

Twitter | Vimeo