Webpagina's maken: programmeren in HTML
Introductie
Structuur van een webpagina
Betekenis van tags
HEAD
Deze tag omsluit layout informatie e.d.
TITLE
Deze tag is onderdeel van de header-sectie.
Hij omsluit de titel van de pagina. Die zie je niet in de pagina zelf, maar wel in de tab van het tabblad.
BODY
Deze tag omsluit de body (tekst) van de pagina.
H1
De header tag geeft de bijbehorende tekst groot weer, zoals in de titel van een pagina.
Er bestaan ook H2 t/m H6 tags.
Als je slimme tekst plaatst tussen header tags scoor je beter in Google rankings.
P
De paragraph tag omsluit normale tekst.
br
Naast de p-tag is dit een manier om op een nieuwe regel te beginnen.
In HTML 5 kan je gewoon <br> gebruiken, maar in XHTML moet je <br \> gebruiken.
i of em
'i' staat voor italicize, oftewel schuin afdrukken.
De i-tag is correct, maar 'em' doet hetzelfde en is aan te bevelen. Het staat voor emphasis.
u of ins
'u' staat voor underline, oftewel onderstrepen.
De u-tag is correct, maar 'ins' doet hetzelfde en is aan te bevelen. Het staat voor insert.
b of strong
'b' staat voor bold, oftewel vetgedrukt.
De b-tag is correct, maar 'strong' doet hetzelfde en is aan te bevelen.
sub en sup
Met de sub-tag druk je de ingesloten tekst iets onder de regel af, met de sup-tag iets erboven.
del
De del-tag heeft strike-through tot gevolg, oftewel een streep
midden door de tekst.
Lijsten
ul en li
Met de ul-tag omsluit je een unordered (ongeordende) lijst. De inviduele items worden met bullet points weergegeven.
De inhoud van een item omsluit je met de li-tag.
ol
Bij een ordered list (ol-tag) zijn de bullet points vervangen door cijfers,
Romeinse cijfers (klein of groot) of letters (klein of groot).
Voor cijfers hoef je niet speciaal iets op te geven, voor de andere opties
gebruik je <ol type="teken">, waarbij
teken gelijk is aan 'i', 'I', 'a' of 'A'.
Je kan nog andere opties meegeven, bv. als je met een andere waarde wilt
starten (start="20") of als je de lijst in
omgekeerde volgorde wilt (reversed)
Plaatjes
Align left betekent dat het plaatje links komt van daaropvolgende tekst.
Formulieren (form)
Met de form-tag omsluit je de inhoud van het formulier.
Met de input-tag (zonder closing tag) maak je een invoerveld aan.
De standaard invoer is tekst, wat je ook expliciet kan aangeven
met <input type="text">
Als je wilt dat er al een waarde ingevuld wordt kan je een
attribuut value="waarde" toevoegen.
Het nadeel daarvan is dat de gebruiker die iets anders wil invoeren eerst
de standaardwaarde moet weghalen.
Vriendelijker is daarom om het attribuut placeholder
te gebruiken.
Dan kan de gebruiker er gewoon overheen tikken.
Andere mogelijkheden zijn aankruisvakjes (checkboxes, type="checkbox"), keuzevakjes (radiobuttons, type="radio") en een bevestigingsknop (submit, type="submit").
Als je wilt dat een checkbox standaard aangevinkt is geef je het
attribuut checked mee.
Van een set radiobuttons kan je er altijd maar 1 kiezen. Maar dan moet je wel aangeven dat ze bij elkaar horen, door ze dezelfde naam te geven (name="naam").
Een uitklaplijst (drop down list) geef je niet aan met input
, maar met select (wel een closing tag).
De opties van de lijst geef je aan met een aantal option-tags (met closing tag).
Als je wilt dat een andere dan de bovenste optie wordt gelecteerd
voeg je aan de option-tag het attribuut selected toe.
De submit-knop heeft standaard de tekst submit, maar die kan je veranderen
met het attribuut value="andere_tekst".
Tabellen
Een tabel bestaat uit rijen, en elke rij is onderverdeeld in kolommen. Elk vakje heet een cell. De tabel kan optioneel ook een header-rij hebben.
Bij tabellen horen de volgende tags:
table: aan het begin en eind van de tabel;tr(table row): aan het begin en eind van een rij van de tabel;td(table data): aan het begin en eind van de inhoud van een cell;th(table header): aan het begin en eind van de inhoud van elke cell in de header-rij (die gewoon mettrbegint en eindigt).thead: voor en na de header-rij. Deze tag is niet echt nodig, maar maakt het wel overzichtelijker, i.c.m. de volgende.tbody: voor en na de andere rijen.
Links
Linken naar een algemene webpagina doe je met de a-tag, bv.: <a href="http://www.google.com">Dit is de onderstreepte linktekst</a> Dit heet een absolute link.
I.p.v. tekst tussen de a-tags kan je bv. ook een plaatje als link laten fungeren.
Als je linkt naar een pagina van jezelf, die in dezelfde map staat, dan kan je <a href="mijnpagina.htm">Dit is de onderstreepte linktekst</a> gebruiken. Dit heet een relatieve link.
Tenslotte heb je ook nog links binnen de pagina. Dat doe je door een element van een pagina, bv. een paragraaf (p-tag) een 'id' te geven. Je kan dan naar dat element linken.
Als voorbeeld zou je de 1e paragraaf van je pagina als volgt kunnen beginnen: <p id="bovenaan">, en dan onderaan de pagina een link kunnen opnemen: <a href="#bovenaan">Naar boven.
HTML entities
Dit zijn speciale tekens, die je niet op de normale manier kan intikken. Je kan denken aan het copyright-symbool, het Euro-teken, etc.
Al deze tekens beginnen met '&', en eindigen met ';'.
€ geeft het Euro-teken weer: €
© geeft het copyright-symbool weer: ©
< geeft het kleiner-dan-teken weer: <
iframes
Met deze tag kan je een website in een subvenstertje van je eigen pagina
weergeven.
Je doet het op dezelfde manier als met een image, door de source op te
geven (src="URL").
In het subvenster kan je dezelfde acties doen als op de normale website, dus bv. klikken op links.
Als je op YouTube op het pijltje onder een video klikt, krijg je een paar
opties waaronder embed.
Als je daar op klikt krijg je code die begint met een iframe, en die je
in je eigen pagina kan plakken.
Links
Reageer via E-mail (dalmolen@xs4all.nl)
Deze pagina is voor het laatst gewijzigd op: 30-01-23 22:16:17