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

Geïnteresseerd?
Klik bij Categorieën op: Broncodes - (X)HTML
Regelmatig komen er nieuwe berichten onderaan dit blog bij

of wil je de nieuwste berichten reeds lezen
klik ze aan in de linkerkolom van dit blog onder:
Hoofdpunten blog: Broncode

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 html codes begrijpen, corrigeren en toevoegen in de Brontekst of HTML bron van een blogbericht

Om in de Brontekst of HTML Bron van een blogbericht te komen, 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 HTML waarna het venster HTML Bron opent

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 Brontekst (Bron) van een blogbericht of een HTML document bestaat uit uw 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, 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

De kleur van alle linken
in het uitzicht van de blog wijzigen
- item wijzigen lettertype, tekstgrootte, etc. -

afbeelding 1

In de afbeelding hierboven zijn alle linken die voorkomen op de blog geel gekleurd en niet onderlijnd
Wordt de muisaanwijzer boven een link gehouden, dan kleurt deze blauw en wordt tegelijk onderlijnd weergeven

Hierna de werkwijze voor het aangeven van de gewenste kleur of het wijzigen ervan

Log in in uw blog en klik op "UITZICHT (DESIGN) WIJZIGEN BLOG"
Scroll met de schuiflat naar beneden tot je onder
GEAVANCEERD - UITZICHT AANPASSEN bij de opmaak van de blog terecht komt

Tussen <style> en </style> vind je het hiernavolgende:
 

a {  font-family: Verdana, Arial, Helvetica;  font-size : 12px;  font-weight: normal;  text-decoration: none;  color: #555555; } a:hover {  font-family: Verdana, Arial, Helvetica;  font-size: 12px;  font-weight: normal;  text-decoration: underline;  color: #555555; }

Vervang onder a
bij color: #...; de kleurcode 555555 door de kleurcode van de kleur welke je wenst aan uw linken te geven

Vervang onder a: hover
bij color: #...; de kleurcode 555555 door de kleurcode van de kleur welke je wenst aan uw linken te geven, wanneer de bezoeker de muisaanwijzer boven de link houdt (zie afbeelding 1)

Info over kleurcodes vind je hier:
http://blog.seniorennet.be/blogtips/archief.php?ID=93
http://www.sunbeams.be/kleurkiezer.htm
Kleurcodes vind je eveneens in de editor (T teken of emmertje) bovenaan het gewone ontwerpvenster in een blogbericht

Bijkomende info:
Wens je de linken al dan niet onderlijnd weer te geven,
dan kan je uw voorkeur aangeven bij text-decoration:
text-decoration: underline;   betekent dat de link onderlijnd wordt weergegeven
text-decoration: none;          betekent dat de link NIET onderlijnd wordt weergegeven

Het lettyertype van de linken kan je eveneens wijzigen bij font-family

De tekstgrootte wordt bepaald bij font size door een groter of kleiner getal op te geven

Een video met extensie .flv laten afspelen op de blog
of via een aanklikbaar plaatje of tekst

met of zonder automatische start

of bekijken via een aanklikbaar plaatje

of aanklikbare tekst ►  VOORBEELD_HEELGEWOON

Bijlagen:
heelgewoon.flv (886.8 KB)   

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 

Alhoewel er op de website van Switch staat dat dit programma ook te gebruiken is in WINDOWS VISTA, is het formaat MPEG Layer-3 niet terug te vinden in het programma, zodat de muziek niet naar dit formaat kan worden omgezet.
Het programma Switch Sound File Converter is dus enkel een aanrader voor wie werkt met Windows XP

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

Schrijf je zich ook in in mijn mailingslijst op dit blog
voor het ontvangen van mijn nieuwsbrief?

MAILINGSLIJST

Geef je e-mail adres op en klik op onderstaande knop om je in te schrijven voor het ontvangen van een nieuwsbrief. Graag verneem ik ook via email, welke uw blog of website is

Lieve blogvrienden

Ben je geïnteresseerd in mijn blogs en wil je ook graag af en toe eens een nieuwsmail ontvangen!!!!

Kijk even in de rechterkolom van dit blog en
vul in het vak onder NIEUWSBRIEF uw emailadres in
klik daarna op INSCHRIJVEN of doe het hier

Je krijgt daarna meteen een bevestiging dat je zich correct ingeschreven hebt in de mailingslist.

Het is altijd leuk te weten, bij wie mijn nieuwsbrief terecht komt

Mag ik daarom vragen, om ook even een mailtje te sturen via de email-mij button op dit blog, met de mededeling welke uw blog of website is, zo kan ik ook uw blog of website bezoeken.

► Wens je graag nog de vorige nieuwsbrieven ter plaatse op mijn groep te kunnen lezen of liever mijn nieuwsbrief via mijn website  http://www.sunbeams.be te ontvangen, dan kan je zich aanmelden op http://groups.google.com/group/sunbeamsmail ◄

---

deel 2

---

Heb je een paar nieuwe berichten op uw blog geplaatst
en wil je uw bezoekers dit graag laten weten,

Laat uw bezoekers zelf bepalen of ze
een nieuwsbrief wensen te ontvangen van uw blog

Plaats een mailingslijst op uw blog om zich in te schrijven
voor het ontvangen van uw NIEUWSBRIEVEN

Hierna de werkwijze voor het plaatsen van een mailingslijst op uw blog

►Ga naar PERSONALISEER en
►Klik in de middenkolom op het pijltje rechts of links naast MAILINGSLIST, al naar gelang je uw mailingslijst in de rechter- of linkerkolom van uw blog wilt plaatsen.
►Je bekomt dan eerst enkel dit scherm:

► Indien gewenst, kan je de tekst in het vak bij Titel, Beschrijving, Tekst op de knop vervangen door een andere tekst naar uw keuze
► Klik best ook een vinkje bij STUUR MIJ EEN EMAIL TELKENS IEMAND INSCHRIJFT/ UITSCHRIJFT
► Klik vervolgens op TOEVOEGEN

Opgelet: Plak GEEN html code voor een afbeelding in het vak bij TEKST OP DE KNOP. Dit vak is daar niet voor bestemd.

► In de zijkolom van uw blog is nu een mailingsformulier te zien, waarbij de bezoeker zijn emailadres kan invullen en op de knop Inschrijven klikken

► Van zodra de 1ste persoon zich ingeschreven heeft in uw mailingslijst, verschijnt in het item MAILINGSLIJST bij PERSONALISEER, een tekstvak waarin je uw nieuwsbrief kan opstellen
In het vak erboven, bij ONDERWERP kan het onderwerp van de mail worden getypd

►Onder het tekstvak vind je de emailadressen van alle personen die zich inschreven in uw mailingslijst
Wens je iemand uit uw mailingslijst te verwijderen, klik dan naast het emailadres van de persoon, op de knop VERWIJDEREN
Andersom heeft iemand die zich inschreef, bij het ontvangen van een nieuwsmail, telkens ook de mogelijkheid om zich uit te schrijven

► Wanneer de nieuwsbrief klaar is om te versturen, klik onderaan op de knop VERZENDEN

---

deel3

---

Wens je uw blog meer kenbaar te maken
uw nieuwe creaties mede te delen,
dan kan je dit doen op mijn FORUM
in de zijkolom van dit blog

Om naar het forum op dit blog te gaan: KLIK HIER

Ook zo'n item FORUM kan je plaatsen op uw blog.
Ga hiervoor naar PERSONALISEER en klik op het pijltje naast FORUM
Verdere uitleg volgt hierover later.

Bijlagen:
mailingslijst520801T5.jpg (87.9 KB)   

IN OPBOUW
Een forum toevoegen aan de blog

Klik naar PERSONALISEER
Vervolgens op een pijltje links of rechts van FORUM en daarna op TOEVOEGEN
Het item FORUM verschijnt nu in de zijkolom van de blog

Klik opnieuw op PERSONALISEER en open het item FORUM in de zijkolom van de blog
Onder BEHEER FORUMCATEGORIEËN kan je nu een lijst aanmaken met allerlei categorieën onderwerpen
Vul bij NAAM de titel van een categorie in en klik op TOEVOEGEN
Herhaal dit zoveel maal als je categorieën wilt toevoegen aan uw forum

Iedere categorie heeft een uniek internetadres, welke je kan linken aan een button

Score bij elke schermbreedte -niet naast-
maar onderaan een plaatje laten verschijnen

Op de blogs van seniorennet en www.bloggen.be, bestaat de mogelijkheid om de bezoekers een score te laten toekennen aan elk van de berichten, maar bij sommige bloguitzichten verschijnt die score niet onder het bericht, maar wel onderaan in het bericht zelf.
Wanneer in dit laatste geval een afbeelding toegevoegd wordt, waarvan de tekst ernaast niet volledig de hoogte van het plaatje gaat innemen, verschijnt de volgende alinea, -wat bij voorbeeld de score kan zijn-, eveneens naast het plaatje, i.p.v. onderaan in het bericht, hetgeen meestal de bedoeling niet is en zelfs in bepaalde situaties ongewenst de blog in de breedte kan doen toenemen, al naar gelang de breedte van het plaatje

Zie voorbeeld hierna waarbij de score afwisselend naast en onder het plaatje te zien is

Even ter verduidelijking:
Wanneer we in een blogbericht in de middenkolom onder Extra's, één plaatje van de harde schijf toevoegen bij "Foto van harde schijf" of de URL van een plaatje bij "Foto van Internetadres" inbrengen, dan verschijnt na opslaan van het bericht het plaatje horizontaal uitgelijnd in de linkerbovenhoek van het bericht.
Eventueel toegevoegde regels tekst komen dan rechts van het plaatje te staan tot de volledige hoogte van het plaatje ingenomen is.
Pas van als de hoeveelheid tekst meer bedraagt dan de hoogte van het plaatje toelaat, lopen de volgende regels onder de afbeelding door.

Dit is ook het geval, wanneer we met behulp van een html code een plaatje gaan toevoegen, waarbij in de code align="left" of align="right" is opgenomen en de tekst dus rechts of links van het plaatje staat

Wanneer bijgevolg het aantal toegevoegde regels tekst naast het plaatje minder bedraagt, dan de hoeveelheid tekst welke naast de afbeelding past, dan verschijnt de volgende alinea naast het plaatje.
Op die wijze gebeurt het, dat bij voorbeeld het "Toekennen van een score", alsook de vermelding van de "Datum, uur en naam van de auteur" ongewild naast de afbeelding, in plaats van onderaan in het bericht komt te staan

Om dit te voorkomen kunnen we gebruik maken van het BR element met het attribuut CLEAR

Hierna de werkwijze:

►Kopieer eerst het hiernavolgende   <BR CLEAR="all">  
►log in in uw blog en open het bericht waarin je de score onderaan een afbeelding, i.p.v. van ernaast wilt zien verschijnen
► Vink vervolgens BRONTEKST aan
► Plak <BR CLEAR="all"> achter de code voor het weergeven van het plaatje en de eventuele tekst, die je ernaast wilt laten verschijnen
Indien je een plaatje toevoegt via Extra's, welke onzichtbaar is in het werkblad, plak <BR CLEAR="all">  in het Brontekstvak, achter de eventuele tekst, die naast de afbeelding dient te verschijnen.
► Vink daarna BRONTEKST terug uit
► Klik op TOEVOEGEN of WIJZIGEN
Opgelet: Opdat het bericht zou opgeslaan geraken, dient er minstens een punt of ander teken in het gewone tekstvak te staan

Zie een voorbeeld van de brontekst van een bericht, waarin de url van mijn plaatje met een toegevoegde spreuk is aangebracht.
Om de score onder mijn plaatje te laten verschijnen, onderaan het bericht, werd achter de spreuk <br clear="all"> toegevoegd

<a href="http://www.sunbeams.be" target=_self> <img src="http://i40.tinypic.com/2z6awed.jpg" border=0 align=left></a> <br><br><br> <p align=center><font size=4 face="comic sans ms"> Geruisloze attenties<br>sterken het hart</font></p> <br clear=all>

Ter info:
<br> betekent een andere regel toevoegen
<p>  betekent een andere alinea nemen, deze wordt afgesloten met </p>
clear="all"  betekent dat de volgende inhoud dient geplaatst op de eerstvolgende regel die volledig vrij is

De mogelijkheid tot het toekennen van een score,
verwijderen of opnieuw instellen

Extra opties

De vermelding van Categorie in een bericht 
- niet naast -
maar onder het plaatje laten verschijnen

Op dezelfde wijze als hierboven onder punt 1, kan je er voor zorgen, dat wanneer de vermelding van Categorieën naast uw plaatje verschijnt in plaats van er onder, deze toch mooi gecentreerd onder het plaatje komt te staan, door gewoon in de brontekst van uw blog <br clear="all"> te typen op de plaats zoals hierboven beschreven.