Eenvoudige basis HTML begrijpen en gebruiken
in de broncode, brontekst of de bron van een blogbericht

Soms wilt het maar niet lukken, om een afbeelding, de letterkleur of het lettertype of een tabel correct weer te geven.
Wanneer we dan een heel klein beetje HTML kennen, dan kunnen we al vlug zien waaraan de fout ligt en ingrijpen.
Dit blog gaat dan ook voornamelijk over codes begrijpen en gebruiken in de Brontekst, Bron of Broncode van een blogbericht

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

- Bij gebruik van de gewone 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 HTML 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"

Goed om weten:
De Broncode van een blogbericht of een HTML document bestaat uit tekst en uit HTML tags
Tags zijn codes, die aangebracht worden om tekst vorm te geven of te structureren
Om tekst, bijvoorbeeld als een koptekst of als een hyperlink weer te geven, dan dient dit in de bron met tags aangegeven te worden.
Tags worden tussen de punthaken < en > geplaatst, op die wijze onderscheidt de browser de gewone tekst van de codes
Wanneer een punthaakje vergeten wordt, weet de browser niet dat het een code is en bekomt u niet wat u wenst

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

Soms willen we tekst op een volgende regel beginnen, i.p.v. met een nieuwe alinea te beginnen met bijbehorende witregel, waarbij een lege ruimte tussen de regels komt te staan. In dat geval gaan we dan dus zeker niet de tag <p> gebruiken.

Een nieuwe regel in de bron aangeven met de tag <br />

Soms willen we tekst op een volgende regel beginnen, i.p.v. met een nieuwe alinea te beginnen met bijbehorende witregel, waarbij een lege ruimte tussen de regels komt te staan.
In dat geval gaan we dus niet de tag <p> gaan gebruiken maar wel de tag <br />.

br is de afkorting van BReak...

Typ de tag <br /> aan het eind van een tekst, waarvan het vervolg op een nieuwe regel moet komen

Zie voorbeeld in de broncode:

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.

Wilt u de tekst op een nieuwe regel gecentreerd zien, dan kan dit zo:
<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>

<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>

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 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:

In de bron, 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>

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> vet                        <i> cursief

Je hebt een .mp3 bestand op de harde schijf van uw pc staan en wil het omzetten naar een klein .wav formaat om toe te voegen als achtergrondmuziek in een powerpoint
of uw .wav bestanden zijn te groot om te gebruiken op uw blog of in een powerpoint presentatie en dus dient de muziek gecomprimeerd te worden.

* Muziek comprimeren *

Met het freeware programma
Switch Sound File Converter - DOWNLOAD HIER
kan je heel gemakkelijk uw muziek comprimeren naar een klein .wav bestand
Zie bijlagen - onderaan dit blogbericht 

Om een beeld te hebben van het programma en gemakkelijk te kunnen volgen:
Klik eerst even op het miniatuur plaatje in de linkerbovenhoek van dit bericht, zodat de afbeelding in ware grootte wordt weergegeven

Werkwijze:

- Gebruik een kopie van het muziekbestand, dat je wilt comprimeren, zodat je bij het eind geen kans loopt dat het originele bestand indien opgeslaan in dezelfde map overschreven is.
- Open het programma Switch Sound File Converter
- Klik bovenaan op "FILE" en kies  "Add File" of
  klik op de button (met groen kruisje) ADD FILE(S) 
- Zoek het geluidsbestand, dat je wilt comprimeren en klik op "OPENEN", zodat het muziekbestand (met extensie .wav of .mp3) in het venster "List of files to convert" verschijnt.
- Selecteer het bestand
Klik in de linkerbenedenhoek op het pijltje naast "OUTPUT FORMAT" en selecteer .wav
Klik daarna op "ENCODER OPTIONS" zodat het venstertje "WAVE ENCODER OPTIONS" opent.
- Klik op het pijltje bij "FORMAT" en selecteer MPEG LAYER-3
- Klik daarna op het pijltje bij "ATTRIBUTES" en kies voor: 
   56 kBit/s, 24,000 Hz Stereo (= beste kwaliteit onder mpeg layer-3)
- Klik op OK, zodat het venster sluit.

- Klik vervolgens op de knop "BROWSE" en duidt in het venster "Map Selecteren" de map aan waar het bestand dient te worden opgeslagen, zodat de gekozen map in het vak bij "OUTLOOK FOLDER" verschijnt
- Klik vervolgens bovenaan of onderaan in de rechterzijde op de pictogram  "CONVERT" en de muziek wordt gecomprimeerd naar de gekozen map.

Indien je in plaats van te klikken op BROWSE een vinkje klikt bij:
 OUTPUT TO SAME FOLDER AS SOURCE FILES
en vervolgens klikt op de pictogram CONVERT, dan wordt het gecomprimeerde bestand in dezelfde map opgeslaan als de map waarin het geopend bestand zich bevindt
Indien het gecomprimeerde bestand van hetzelfde formaat is als het geopend bestand wordt het geopend bestand hierbij overschreven

- Ben je klaar, klik op de pictogram REMOVE om het geopend bestand te verwijderen uit het programma en
Sluit het venster door in de rechterbovenhoek te klikken op het kruisje

--------------------------------
Even ter info:
Om te weten in welke map het bestand op de pc wordt opgeslaan, klik op de knop: OPEN OUTPUT FOLDER

Een .wav bestand MPEG LAYER-3, kan je niet opnieuw nog eens kleiner maken door het voor de tweede maal te gaan comprimeren naar een kleiner formaat

Vind je het .wav bestand bij 56 kBit/s, 24,000 Hz Stereo nog te groot, dan kan je er voor kiezen opnieuw een kopie van het origineel te openen en een lager aantal kBit/s en Hz aan te duiden, maar de muziekkwaliteit is hiermee ook veel lager

Bijlagen:
http://www.nch.com.au/switch/index.html   
http://www.nch.com.au/switch/screenshots.html   

Klik hiernaast op het miniatuurplaatje
om de foto "Feest van 1000 jaar Ename" te bekijken
ga met de muisaanwijzer boven het hoofd van een personnage
of voorwerp (plank met brood en spek) en je krijgt al enige info
Nog meer informatie volgt wanneer je er op klikt

Een afbeelding met aanklikbare delen
en erboven een korte beschrijving

Bekijk het plaatje hierna,
achter ieder figuur gaat een tekst schuil
en een andere link naar meer informatie
 

Hou uw muisaanwijzer boven elk van de afbeeldingen
je krijgt meteen wat info te lezen
Dubbelklik op een voorwerp & nog meer informatie volgt

KLIK en VERGELIJK
Voorbeelden voor het uploaden van een flash movie
en het afspelen op de blog,
hetzij rechtstreeks of gelinkt aan een plaatje

 BERICHT IN OPBOUW

	Flash movie geüpload als bijlage naar de blog Zelfde werkwijze als: Een Powerpoint van de harde schijf als bijlage toevoegen en linken aan een plaatje van de harde schijf
	Flash movie geüpload naar sites.google.com Zie blogbericht, klik op de link: Een flash movie uploaden naar eigen site bij SITES.GOOGLE en aanklikken op de blog
	Flash movie geüpload naar Mediafire
	Flash movie geüpload naar Windows Live Skydrive