De HTML-codes zijn hier nu "donkergroen" i.p.v. "rood". De oplossingen van de oefeningen zijn met "rood" aangegeven.

HTML

Dit is een voorbeeld van een eenvoudige html-pagina waarin alleen de meest basale 'tags' voor tekst-opmaak voorkomen. De 'code' van deze pagina kan worden bekeken en veranderd door deze pagina in een editor te openen. In de tekst wordt html-code in rood weergegeven.
Een nieuwe regel beginnen we met de tag <br>.

Een nieuwe paragraaf beginnen we met de tag <p>. Zoals te zien is ontstaat er een lege regel tussen deze paragrafen. Het is verstandig om een paragraaf af te sluiten met </p>. Als deze 'eind-tag' wordt weggelaten, gaat het meestal goed. Later zullen we zien wanneer het niet goed gaat.

We kunnen 'kopjes' maken in verschillende grootte. Bovenaan deze pagina stond de titel, groot en dik gedrukt. Dat doen we zo: <h1>HTML</h1>.
Hieronder een aantal andere voorbeelden.

Kopjes

Dit is een kleinere koptekst dan de titel. Hij is gemaakt met <h2></h2>.

Nog kleiner kopje

Het kan dus nog kleiner en wel met <h3></h3>, enzovoort:

Size h4

Size h5

Size h6

Font stijl

Als we iets dik gedrukt willen typen dan kan dat heel eenvoudig met <strong></strong> of met <b></b> zoals hier.
Ook kunnen we de tekst schuin schrijven met <em></em> of met <i></i> zoals hier.
Een eenvoudige fixed-font letter maken we met <tt></tt>.

Font kleur

We hebben al rode tekst kleur toegepast. Dat is gedaan met <font color="red"></font>.

Font grootte

De lettergrootte kan veranderd worden met <font size=".."></font>.

<font size="5"></font> : xxxxxxxxxx
<font size="6"></font> : xxxxxxxxxx
<font size="+1"></font> : xxxxxxxxxx
<font size="-3"></font> : xxxxxxxxxx

De fixed-font letter die we eerder hebben getoond is erg klein. We kunnen die nu eenvoudig groter maken.

Horizontale lijnen

Zoals al te zien was, kunnen we in de pagina horizontale lijnen opnemen. voor het markeren van stukken in de tekst.

Ze zijn gemaakt met <hr> en <hr size="5">

Tekst uitlijnen

Een stuk tekst kan worden gecentreerd met <center></center>.

De kleur van de tekst in de volgende paragraaf is blauw gemaakt.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Dit is de normale situatie als we een nieuwe paragraaf starten. De tekst wordt links uitgelijnd.

Een paragraaf kan aan de rechterkant uitgelijnd worden met <p align="right">.

De tekst kan ook links en rechts worden uitgelijnd met <p align="justify">.

Behalve met <center></center>. kunnen we ook een paragraaf centreren met <p align="center">.

Een plaatje

Een plaatje (png,gif,jpg) kan op de webpagina worden geplaatst met <img src="naam-van-het plaatje">. Voorbeeld:

De foto van de boom nu 1.5 keer groter.

De naam van de foto moet volledig zijn, d.w.z. met toevoeging van het pad naar de map waar de afbeelding staat, bijvoorbeeld:

Hierbij is een zgn. absolute pad-naam gebruikt, maar dat is niet verstandig. Als we de website verplaatsen naar een andere computer of naar een andere gebruiker (beheerder) moeten we overal alle namen gaan veranderen. Daarom gebruiken we relatieve pad-namen. Het pad naar de afbeelding wordt aangegeven, relatief t.o.v. de plaats waar de webpagina staat. In ons geval is dat

Met ../ gaan we een plaats in de mappenboom omhoog. En dan vanaf die plek naar de map figs waar de foto linde5.jpg zich bevindt.

Het organiseren van pagina's en documenten - foto's, pdf's, teksten - in een duidelijke mappen-structuur is belangrijk bij het maken en onderhouden van een website.

Links naar andere pagina's

We kunnen een link naar een webpagina opnemen met <a href="adres">link-tekst</a>. De link-tekst is (meestal) blauw gekleurd en onderstreept. Klik maar eens hier en keer daarna terug naar deze pagina.

We kunnen ook een plaatje gebruiken in plaats van de link-tekst. Klik maar op onderstaande foto en keer daarna hier terug.

De foto is naar rechts verplaatst.

De link naar nos.nl is hieronder toegevoegd.

NOS

Het openen van de webpagina gebeurde nu in een nieuw tabblad van de browser. Daartoe hebben we in de link-tag <a> iets toegevoegd, namelijk: target="_blank". Dat is dus nu <a href="adres" target="_blank">link-tekst</a>. geworden.

Slot

Dit waren de eerste beginselen van HTML voor het maken van een webpagina.

Klik hier om met een 'bookmark' naar het begin van de pagina te gaan.

De link naar de nieuwe pagina staat hieronder. In die pagina staat een link naar de deze pagina.
In de nieuwe pagina is ervoor gezorgd dat de link altijd blauw blijft. Dat doen we in de body-tag met "vlink="blue".

nieuwe pagina