Eenvoudige basis (X)HTML begrijpen en gebruiken
in de bron (brontekst) van een blogbericht
of HTML document

Heb je het ook al voorgehad, dat het je maar niet lukt om met behulp van de editor, een afbeelding, een hyperlink, een tabel of de kleur van een tekst en nog zoveel meer, op internet correct weer te geven, zoals je dat zou willen!
Wat op het scherm te zien is wordt bepaald door wat er in de bron (ook brontekst of broncode genoemd) van de blog, het blogbericht of het HTML document staat.

De bron van een blogbericht bestaat doorgaans uit gewone tekst (datgene wat we willen mededelen via internet) en uit HTML tags.

HTML tags zijn codes, die de browser vertellen hoe de inhoud van een webpagina dient weergegeven te worden op het scherm. Ze worden bij voorbeeld aangewend om tekst te structureren of vorm te geven. Ook afbeeldingen worden weergegeven door middel van codes.
Tags staan altijd tussen de punthaken < en > (dit zijn de tekens kleiner dan < en groter dan >)
Op die wijze worden codes van normale tekst onderscheiden en herkent de browser deze als codes

Wanneer we een klein beetje (X)HTML begrijpen, dan kunnen we in de bron de oorzaak van een probleem opsporen, foutieve codes herstellen of de nodige codes aanbrengen, zodat op het scherm verschijnt wat we wensen
Dit blog gaat dan ook voornamelijk over wegwijs geraken in eenvoudige basis (X)HTML taal

Om in de Brontekst of de Bron(code) te komen van een blog aangemaakt bij blog.seniorennet.be of www.bloggen.be

- Bij gebruik van de normaal standaard editor van seniorennet en bloggen.be
Klik in de editor boven het tekstvak, een vinkje in het vak achter het woord Brontekst

Terugkeren naar het gewone tekstvenster (ook ontwerp-venster genoemd) kan je doen door het vinkje terug uit te klikken, m.a.w. Brontekst uitvinken

- Bij gebruik van de Nieuwe editor
Klik in de editor boven het gewone tekstvenster op Bron en daarna op HTML Bron

Terugkeren naar het gewone tekstvenster (ook ontwerp-venster genoemd) kan je doen door onderaan het venster te klikken op de knop "Bijwerken"

Nog even ter herinnering:
Tags (codes) onderscheidt men van gewone tekst, door gebruik te maken van de punthaken < en > (dit zijn de tekens kleiner dan < en groter dan >)
Wanneer een punthaakje vergeten wordt of verkeerd staat, weet de browser dus niet dat het een code is en verschijnt op het scherm niet wat verwacht wordt
Codes moeten ook juist zijn, een punthaak <dit>, spatie, aanhalingsteken "dit", accolade {dit}, dubbel punt of punt komma teveel of te weinig of op de verkeerde plaats kan er voor zorgen dat de code niet werkt

Op al mijn blogs staat de normaal (standaard) editor ingesteld, omdat de Nieuwe editor van de blogs bij blog.seniorennet.be en www.bloggen.be nog steeds mankementen bevat

Afbeeldingen invoegen met de tag <img />

Hierna zie je de html code, welke in de Brontekst van dit blogbericht aangebracht werd, voor het weergeven van dit vlindertje    

<img src="http://i26.tinypic.com/b7nifs.jpg" alt="vlinder" />

img is de afkorting van image en betekent in het nederlands afbeelding

Wanneer in de bron van een webpagina of blogbericht de tag <img /> voorkomt, dan weet de browser dat op deze plaats een afbeelding dient te worden weergegeven en gaat op zoek naar de afbeelding binnen deze tag

src is de afkorting van source en betekent in het nederlands bron

Door in de tag <img /> het attribuut src="..." op te nemen en tussen de aanhalingstekens op de plaats waar de puntjes staan het pad naar de afbeelding (enkel voor websites) of de URL van de afbeelding (bij blogs) aan te brengen, weet de browser precies waar de afbeelding te vinden is en wordt deze op de blog of webpagina weergegeven

Het 2de attribuut dat in de tag <img /> dient opgenomen te worden, is het attribuut alt="..."

alt is de afkorting van alternatieve tekst

Op de plaats waar tussen de aanhalingstekens de puntjes staan bij alt="..." wordt een beschrijving van de afbeelding ingevuld, als alternatief voor het geval de afbeelding tijdelijk niet beschikbaar mocht zijn. Deze alternatieve tekst vervangt tegelijk ook het beeld in speciale browsers voor slechtzienden.
De tekst is ook zichtbaar wanneer de muisaanwijzer boven de afbeelding wordt gehouden.

Om bij voorbeeld het plaatje van kitty in en blogbericht weer te geven, wordt de hiernavolgende code in de bron (brontekst) van het blogbericht aangebracht

<img src="url_of_pad_naar_afbeelding" alt="beschrijving"/>

In de code wordt tussen de aanhalingstekens bij src=" " de tekst url_of_pad_naar_afbeelding vervangen door de URL van het plaatje
Het woord beschrijving bij alt=" "  wordt vervangen door de tekst button van kitty
Hierna een voorbeeld

Dit gifplaatje werd in een blogbericht geüpload naar seniorennet, via "Bladeren" bij "Overige bijlagen van harde schijf" om zo een URL voor het plaatje te bekomen. De HTML code voor het weergeven ziet er zo uit: <img src="http://blogimages.seniorennet.be/broncode/attach/11698.gif" alt="button van kitty" />
Dit gifplaatje werd geüpload naar www.tinypic.com om zo een URL voor het gif-bestandje te bekomen. De HTML code voor het weergeven ziet er zo uit. <img src="http://i46.tinypic.com/2rentw9.gif" alt="clown" />

De URL van een afbeelding (ook internetadres genoemd) bekomt men door het plaatjesbestand te uploaden naar een free file hosting provider of naar zelf gehuurde of gratisch ter beschikking gestelde webruimte.
Meer uitleg over het aanmaken van een URL (=internetadres) is te vinden op de blog http://blog.seniorennet.be/blogtips in het blogbericht met titel:
Mogelijkheden voor het uploaden en aanmaken van een URL voor een plaatjesbestand
http://blog.seniorennet.be/blogtips/archief.php?ID=258421

Mogelijk gemaakte fouten bij het niet weergeven van een afbeelding zijn:
Wanneer de afbeelding niet zichtbaar is of een leeg kader met kruisje te zien is, waar de afbeelding zou moeten staan, dan is dit meestal te wijten aan:
- een typfout in de code
- een foutieve URL van het plaatje
- een haakje of aanhalingsteken of spatie teveel of te weinig of op de verkeerde plaats in de code

In het gewone ontwerpvenster, kan een nieuwe regel of alinea gemaakt worden door eenvoudig op de enter toets te drukken, al naar gelang de soort of de instelling van de editor
In de brontekst (ook broncode of bron genoemd) gebeurt dit anders, zie hierna:

Een nieuwe alinea aangeven met de tag <p>

Met de tag <p> wordt in de broncode (bron of brontekst) van een webpagina of blogbericht aangegeven dat u op die plaats een nieuwe alinea begint.
De alinea beëndigen doen we met de eindtag  </p>

Een alinea begint en eindigt steeds met een witregel (ook blanco regel of lege regel genoemd), deze witruimte met regel wordt bij gebruik van het p element automatisch toegevoegd

De letter p is de afkorting van paragraph

Zie voorbeeld:

<p>Hier komt de tekst</p>

Een alinea tekst uitlijnen door in de tag <p> 
één van de attributen toe te voegen:
 align="right",  align="left" of  align="center"

Voorbeeld:

<p align="left">Deze alinea is links uitgelijnd
door in de tag <p> het attribuut align="left" toe te voegen
De tekst staat tegen de linkermarge.</p>

<p align="center">Deze alinea is gecentreerd door
 in de tag <p> het attribuut align="center" toe te voegen
De tekst staat gecentreerd</p>

<p align="right">Deze alinea is links uitgelijnd door
 in de tag <p> het attribuut align="right" toe te voegen
De tekst staat tegen de rechtermarge</p>

Een afbeelding, tekst of ander element
centreren met de tag <center>

Met de tag <center>  kan een tekst, afbeelding of andere element gecentreerd worden, zonder dat een nieuwe alinea moet worden begonnen en hierbij een blanco regel wordt toegevoegd
Om een tekst of ander element te centreren, wordt bij het begin <center> getypd
en aan het eind  </center>

Maar het gebruik van de tag <center> is niet meer aangewezen, daar het gebruik van <center> in de toekomst mogelijks niet meer ondersteund wordt in de nieuwe browsers

In plaats v/d verouderde code <center> en </center>
kunnen we beter
 <div align="center"> en </div> gebruiken

Net zoals bij de code <center>...</center> wordt bij gebruik van <div align="center"> geen lege (blanco) regel toegevoegd, zoals dit wel gebeurd bij <p align="center">
en bovendien wordt al wat geplaatst wordt binnen <div align="center">...</div> gecentreerd.

In plaats van tekst met een nieuwe alinea (met bijbehorende witregel) te beginnen, kunnen we er voor kiezen de tekst met een nieuwe regel te beginnen en hiervoor gebruik te maken van de tag <br />.
Op die wijze komt er geen lege witruimte tussen de regels te staan zoals bij het aangeven van een nieuwe alinea.

Een nieuwe regel toevoegen met de tag <br />

br is de afkorting van BReak...

Door in de bron (brontekst) van een blogbericht of webpagina, de tag <br /> toe te voegen wordt op die plaats het einde van de regel aangegeven en begint het vervolg op een nieuwe regel.

Hierna een voorbeeld:

Give a man a fish<br />
and you feed him for a day.<br />
Teach a man to fish<br />
and you feed him for a lifetime.

of zo

Give a man a fish<br />and you feed him for a day.<br />Teach a man to fish<br />and you feed him for a lifetime.

In beide hierbovenstaande voorbeelden, ziet het resultaat er in het gewone ontwerpvenster en de browser zo uit:

Give a man a fish
and you feed him for a day.
Teach a man to fish
and you feed him for a lifetime.

---------------

Wenst u de tekst daarenboven ook nog te centreren, dan kan dit zo:
Hierbij wordt in de broncode gebruik gemaakt van de code <div align="center"> en </div>
Alle elementen die hierbij binnen <div align="center"> en </div> geplaatst worden, worden hierdoor gecentreerd

<div align="center">
Give a man a fish<br />and you feed him for a day.<br />Teach a man to fish<br />and you feed him for a lifetime
</div>

In plaats van de hierboven genoemde tag <div>, kan ook gebruik worden gemaakt van de code <p align="center"> .... </p>
Hierbij wordt enkel al wat in dezelfde alinea voorkomt gecentreerd.

<p align="center">
Give a man a fish<br />and you feed him for a day.<br />Teach a man to fish<br />and you feed him for a lifetime
</p>

In het gewone ontwerp venster en de browser zien beide voorbeelden er zo uit:

Give a man a fish
and you feed him for a day.
Teach a man to fish
and you feed him for a lifetime

Kopteksten toevoegen

Kopteksten worden veelal gebruikt om bepaalde teksten beter te benadrukken, bij voorbeeld als kop van een artikel in een blogbericht of als inleiding van een pagina of de titel van een hoofdstuk bij het opmaken van een inhoudsopgave

Door in de brontekst (ook broncode of bron genoemd) gebruik te maken van de openingscode <h1> en de sluitcode </h1> waartussen we tekst plaatsen, wordt deze tekst in de browser als een koptekst weergegeven

In HTML bestaan er 6 niveaus voor kopteksten
Al naar gelang het niveau dat in de begintag (ook openingstag genoemd) na h wordt toegevoegd, variërend tussen 1 en 6, wordt de koptekst groot, kleiner of klein weergegeven
De eindtag (ook sluitcode genoemd) heeft steeds dezelfde naam en het niveau als de begintag, maar wordt voorafgegaan van een slash.

Na een koptekst volgt altijd een witregel en begint de volgende tekst met een nieuwe regel

Kopteksten centreren, rechts of links uitlijnen
met behulp van de attribuut:
align="center" align="left" of   align="right"

Dit is een gecentreerde kop van niveau 4

In de broncode ziet dit er zo uit.

<h4 align="center">Dit is een gecentreerde kop van niveau 4</h4>

Deze koptekst van niveau 4 is links uitgelijnd

<h4 align="left">Deze koptekst van niveau 4 is links uitgelijnd</h4>

Standaard staat, zonder toevoeging van het attribuut align="..." de tekst steeds tegen de linkermarge, zodat het attribuut align="left" eigenlijk gewoon kan worden weggelaten.

-------------------------------
Wordt in de begintag het attribuut align="right" opgenomen,
dan komt de tekst tegen de rechtermarge te staan.

Hier is de koptekst niveau 4 rechts uitgelijnd

<h4 align="right">Hier is de koptekst niveau 4 rechts uitgelijnd</h4>

Kopteksten centreren, rechts of links uitlijnen
door toepassing van een inline stijl

Deze koptekst niveau 4 staat gecentreerd

---------------------------------
Een koptekst rechts uitlijnen kan door in de begintag <h4> de stijltag style="..." toe te voegen,
 waarin het element text-align: right; is opgenomen

Deze koptekst wordt rechts uitgelijnd

<h4 style="text-align: right;">Deze koptekst wordt rechts uitgelijnd</h4>

--------------------------------
Standaard, zonder opgave van enige uitlijning, staat een koptekst steeds tegen de linkermarge, maar het kan ook zo.

Deze koptekst wordt links uitgelijnd

<h4 style="text-align: left;">Deze koptekst wordt links uitgelijnd</h4>

Kopteksten een ander kleur geven
door toepassing van een inline stijl

Met behulp van de inline stijl style="..." welke we opnemen in de begintag <h1> kan ook een andere kleur aan de koptekst worden gegeven.
Op de plaats waar de puntjes tussen de aanhalingstekens in de stijl tag style="..." staan, wordt het style element color aangebracht, gevolgd door een dubbel punt(:) en een spatie. Na de spatie wordt dan de waarde opgegeven, hier is dat het nummer teken # gevolgd door de kleurcode (hexadecimale waarden: cijfers en letters) van de gewenste kleur en een punt komma om het style element af te sluiten.

Deze koptekst wordt blauw weergegeven

De code in de bron ziet er zo uit:
Zoals te zien is, wordt het style element color: van de waarde #0000FF gescheiden door een spatie.

<h4 style="color: #0000FF;">Deze koptekt wordt blauw weergegeven</h4>

----------------------------

In plaats van in de style tag (stijltag), tussen de aanhalingstekens het style element color: #hier_de_kleurcode; aan te brengen, kan na color: gevolgd door een spatie ook de engelse benaming van de kleur worden opgegeven en afgesloten door een punt komma.
Zie voorbeeld van een stijltag:
         style="color: hier_engelse_benaming_kleur;"

Deze koptekst is rood

<h4 style="color: red;">Deze koptekst is rood</h4>

Kopteksten een ander kleur geven en
tegelijk centreren of links of rechts uitlijnen
door toepassing van een inline stijl

Een inline style kan verschillende stijlelementen bevatten
Stel dat we een koptekst een bepaalde kleur willen geven en deze tegelijk willen centreren of  links of rechts uitlijnen

Wanneer we in de begincode, bij voorbeeld <h4> van een koptekst van niveau 4, het attribuut style="..." opnemen, dan kunnen we in de stijltag, tussen de aanhalingstekens, op de plaats waar de puntjes staan, meerdere stijlelementen aanbrengen, zoals o.a. het stijlelement color: #kleurcode; voor het bepalen van de gewenste kleur en het stijlelement text-align: center; om de kop te centreren of het stijlelement  text-align: right; om de kop rechts uit te lijnen

Ieder stijlelement wordt van elkaar gescheiden door een punt komma (;) en een spatie

Dit is een gecentreerde groene tekst

In de bron ziet de code voor het weergeven van een groene gecentreerde koptekst van niveau 4 er zo uit

<h4 style="color: #008000; text-align: center;">Dit is een gecentreerde groene tekst</h4>

Deze koptekst wordt rechts uitgelijnd,
kleur chocolate

<h4 style="color: fuchsia; text-align: right;">Deze koptekst wordt rechts uitgelijnd,
<br />kleur chocolate</h4>

Deze koptekst wordt links uitgelijnd, kleur purple

<h4 style="color: purple; text-align: left;">Deze koptekst wordt links uitgelijnd, kleur fuchsia</h4>

Tekst opmaken: vette en/of cursieve tekst

Door in de broncode de tag <strong> bij het begin van een tekst te typen en deze tekst te beëindigen met de sluittag </strong> wordt de tekst tussen <strong> .... </strong> in de browser in het vet weergegeven

Voorbeeld:    <strong>Deze tekst staat in het vet</strong>

Door in de broncode een tekst te beginnen met de openingstag <em> en de tekst te beëindigen met de sluittag </em> wordt de tekst tussen <em> .... </em> cursief weergegeven in de browser

Voorbeeld:    <em>Deze tekst staat in het vet</em>

Tags (codes) kan men combineren

Een tekst tegelijk vet en cursief opmaken
door de ene tag binnen de andere te plaatsen

<em> <strong>Deze tekst staat in vet en in cursief</strong></em>

Bij het combineren van tags (codes), zodoende te bekomen dat de tekst in de browser tegelijk vet en cursief wordt weergegeven, wordt de ene tag steeds binnen de andere geplaatst.

Hierboven ziet u een voorbeeld, waarbij de openings-tag <strong>en sluit-tag </strong> ingesloten worden in de openings-tag <em>en sluit-tag </em>

Onmiddellijk vóór en na de tekst vind u de openingstag en sluittag van code 1
langs de buitenzijde van code 1 komen dan de openingstag en sluittag van code 2

Hieronder vind u een voorbeeld van een FOUTIEVE code:

<strong> <em>Hier zijn de codes foutief geplaatst</strong> </em>

Dit wil nog niet zeggen dat het verkeerd aanbrengen van de tags, op het scherm zichtbaar is.
In bepaalde gevallen corrigeert de browser zelf de gemaakte fout, zodat op het scherm niets van het foutief plaatsen van de tags te zien is, maar dit betekent nog niet dat de code niet foutief aangebracht is

De hieronder te vinden verouderde tags, die vroeger ook werden gebruikt om tekst vet of cursief te maken, worden bij voorkeur best niet meer gebruikt, daar deze werkwijze nu afgekeurd wordt.
<b> staat voor vet                        <i> staat voor cursief

Een echte webpagina maken

Om een eenvoudige webpagina te maken heb je eigenlijk geen duur programma nodig.
Elk tekstbewerkingsprogramma waarmee tekst als kale ASCII-tekst kan worden opgeslagen is hiervoor geschikt.
Zo kan je al een webpagina maken met behulp van Kladblok, dat in Windows zit
Maar natuurlijk verloopt alles sneller en eenvoudiger wanneer je daarvoor een gespecialiseerd programma gebruikt. Sommige zijn gratis op internet te downloaden

Hierna eventjes hoe je dat kan doen met Kladblok
 
Vooreerst geven we best als eerste het documenttype op, zodat de browser hiermee rekening kan houden. Dit wordt aangeven met de tag </DOCTYPE> waarin we het XHTML type vermelden die op het document van toepassing is   

Elk webdocument bestaat minimaal uit 3 tags: <html>, <head> en <body>
Deze codes zijn nodig om structuur aan een webpagina te geven.

De eerste tag <html> geeft aan dat, al wat volgt als een HTML document beschouwd moet worden.
Al wat in het document geplaatst wordt, moet dus binnen de begintag <html> en de eindtag </html> vallen

Na de begintag <html> volgt steeds de <head> .... </head>, dit is het hoofd van het document
Tussen de begintag <head> en de eindtag </head> wordt de titel van het document opgegeven, bij middel van de tag <title>....</title> waartussen enkel de titel van het document wordt getypd.
Tussen de <head> en de >/head> dienen ook sommige scripts geplaatst, alsook ingesloten styles en stijlbestanden

Vervolgens komt de tag <body> dit is het lichaam van de webpagina.
Tussen de begintag <body> en de eindtag </body> kunnen we nu alle overige tekst, afbeeldingen en codes kwijt.

Hierna een voorbeeld:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Naamloos 1</title> ... Hier komen sommige scripts, alsook stijlbestanden .. </head> <body> ... Hier wordt de inhoud van het webdocument geplaatst, zoals tekst, afbeeldingen en codes ... </body> </html>

Wanneer je met Kladblok werkt, dan kan je eigenlijk tussen de <body> en de </body> ook de inhoud plakken van wat je in de brontekst van één van uw blogberichten hebt staan

Wanneer je klaar bent, sla het document op als een .html bestand, dit kan je in Kladblok zo:
Klik op BESTAND en kies voor OPSLAAN ALS...
Klik op het pijltje bij "OPSLAAN ALS TYPE" en selecteer "ALLE BESTANDEN"
Vul bij bestandsnaam, de naam van uw document in gevolgd door een punt en de extensie html, bij voorbeeld:  naam.html
Klik vervolgens op OPSLAAN

Uw webpagina dien je nu nog te uploaden naar uw gehuurde webruimte, alsook de afbeeldingen, die er in voorkomen, indien je in uw webpagina een verwijzing maakt naar uw afbeeldingen die samen met het document in een map op uw harde schijf voorkomen
- Of -
Indien het de bedoeling is de webpagina als bijlage toe te voegen aan een blogbericht en dus te uploaden naar seniorennet, in een blogbericht via OVERIGE BIJLAGE VAN DE HARDE SCHIJF, dan dien je ervoor te zorgen dat de afbeeldingen die op uw webpagina voorkomen over een URL beschikken.

Hierna in bijlage een voorbeeld -webpagina, waarbij de inhoud van een blogbericht uit mijn blog http://blog.seniorennet.be/sunflowers gebruikt werd om deze webpagina te maken.

Bijlagen:
voorbeeld_webpagina_metteller.html (2.3 KB)