NIEUW: Blog reclamevrij maken?
Inhoud blog
  • (X)HTML codes begrijpen en gebruiken in de brontekst (bron of broncode) van een blogbericht bij seniorennet of bloggen.be
    .
  • Afbeeldingen invoegen met de tag img
  • Een alinea (met lege regel) toevoegen / uitlijnen naar links, rechts of centreren (met het element p align)
    .
  • Centreren (zonder lege regel) met de tag center (doch verouderd)
    .
  • Een nieuwe regeleinde toevoegen met de tag br
    .
  • Kopteksten toevoegen, kleur geven, uitlijnen
    .
  • Tekst opmaken: vette en/of cursieve tekst
    .
  • Een webpagina maken 
    Zoeken in blog

    Categorieën
  • Afbeeldingen invoegen (1)
  • Alinea- en regeleinden toevoegen (3)
  • Andere (3)
  • Koppelingen maken - Hyperlinks (0)
  • Kopteksten (1)
  • Lijsten maken (0)
  • Tabellen maken (0)
  • Tekst opmaken: vet, cursief... (1)
  • Hoofdpunten blog blogtips
  • Fijne valentijnsdag
  • Inhoud - Hoofdpunten van blog
  • Een VTM video afspelen op de blog
  • Een video van Youtube zonder of met automatische start op de blog laten afspelen
    .
  • Rekentool voor het omrekenen van kB, Mb en GB naar bytes en omgekeerd
    .
  • Compatibliteitsweergave uitschakelen voor de website blog.seniorennet.be, om de editor correct weer te geven in Internet Explorer 11 - Win7 en Win8.1
    .
  • Valentin effect waarbij hartjes over de blogpagina neervallen
  • Afbeelding van de harde schijf in zijn ware grootte weergeven en hieraan met behulp van de editor een link toevoegen naar een blogadres, webpagina of URL van een ander bestand
    .
  • Een nieuwe regel of een nieuwe alinea toevoegen
    .
  • Een tekst aanklikbaar maken met link naar een andere bestemming op internet
    .
  • Van een afbeelding een aanklikbaar hyperlink afbeelding maken
  • Met de nieuwe editor, een afbeelding in een blogbericht plaatsen, welke geüpload werd naar internet en dus over een URL beschikt
    .
  • Waar vind je de Broncode in de nieuwe editor van seniorennet
  • Inloggen in uw blog
  • Sneeuwtapijt met neervallende sneeuwvlokjes over blogpagina
    .
  • Sneeuweffect met *** waarbij de sneeuw over de pagina neerdwarrelt
    .
  • Sneeuweffect met gifplaatjes, die als sneeuwvlokjes neerdwarrelen
    .
  • Sneeuweffect waarbij figuurtjes als sneeuwkristallen neerdwarrelen
  • Vind ons op facebook en vind onze pagina Sunbeams leuk. Plaats je ook onze button op uw blog
    .
  • Wacht uw blog ook lang voor de inhoud ingelezen geraakt?
    .
  • Vriendelijk verzoek aan alle bezoekers
    .
  • Zonder script, toch voorkomen dat bij gebruik van de rechtermuisknop de afbeelding wordt gedownload
    .
  • Een CounterGeo op uw blog
  • Een hyperlink tekst of button naar uw facebook op uw blog plaatsen
  • Tekst in Word opmaken en in een blogbericht overbrengen
    .
  • Lettertype, kleur en tekstgrootte aangeven of wijzigen
  • Sneeuwstorm effect weergeven op de blogs
  • Eenvoudig en snel een foto van de harde schijf toevoegen in een blogbericht
    .
  • Een plaatje van harde schijf in zijn ware grootte weergeven en hieraan met behulp van de editor een link toevoegen naar een blogadres, webpagina of URL van een ander bestand
    .
  • PPSx bestanden uploaden naar ImageNetz.de. Wat houdt dit in
    .
  • Afbeeldingen, muziek en andere bestanden uploaden naar seniorennet
    Een blogbericht als uploader gebruiken
  • HTML codes voor het weergeven van een (aanklikbaar) plaatje of button
  • Categorieen toevoegen aan een blog en er de berichten in onderbrengen
    .
  • Een webpagina, pps, foto, video of ander bestand, dat reeds over een URL beschikt, als Bijlage toevoegen onderaan een blogbericht
    .
  • Foto verkleinen, draaien of spiegelen met Fotoverkleinen.nl
  • Een of meerdere berichten tegelijk uit gastenboek verwijderen
    .
  • De zoekfunctie uit een site van sites.google verwijderen
    .
  • Een afbeelding (aanklikbaar) met of zonder tekst in de ZIJKOLOM VAN BLOG aanbrengen
    .
  • Met Photoscape een foto in stukken splitsen
    .
  • Foto's bewerken en leuke animaties toevoegen met Photoscape
    .
  • Met Micr Office Powerpoint een fotoalbum maken
    .
  • Mededeling: Verdwenen teller Wieonline.nl vertraagt deels het openen van blogs
    .
  • Powerpoints uploaden naar docs.google en via een link openen op het net
    .
  • Mijn favorietenlijst
    .
  • In een blogbericht een afbeelding van de harde schijf toevoegen en als aanklikbare miniatuur weergeven
    .
  • De URL van een powerpoint koppelen aan een plaatje van de harde schijf, dat als miniatuur in de linkerbovenhoek van een blogbericht in de middenkolom wordt weergegeven 
  • In de middenkolom een foto of animatieplaatje van de harde schijf toevoegen en centreren
  • Een plaatje v/d harde schijf toevoegen en in ware grootte, gecentreerd in een blogbericht in de middenkolom v/d blog weergeven, met link naar uw eigen of een ander blog, ppsx, word-, pdf-, of excel doc. of naar een andere foto of ander bestand
    .
  • Een excel document weergeven in een blogbericht
    .
  • Plaatjes van harde schijf toevoegen en als aanklikbare miniaturen met link naar ware grootte weergeven
    .
  • Accenten en/of aanhalingstekens in de titeltekst van een blogbericht, kan problemen veroorzaken
    .
  • Foto's ONLINE verkleinen , knippen, draaien en bijwerken
  • In pp2007 - De kleur van een hyperlinktekst wijzigen
    .
  • In het progr Micr.Off.Powerpoint 2003, 2007 en 2010 een hyperlink toevoegen aan een tekst of plaatje in een dia
    .
  • MPEG layer-3 in de Switch Audio File Converter voor Windows Vista en Windows 7
  • Een muziekspeler op de blog plaatsen
    .
  • Een *.mp3 of *.wav bestand comprimeren naar een kleiner *.wav bestand - met het progr. Switch Sound File Converter
  • Ontbrekende animaties, aanwezig in het progr Off Powerpoint 2007, toevoegen in de versie PowerPoint 2010
  • De URL van een powerpoint koppelen aan een plaatje van de harde schijf, dat als miniatuur in de linkerbovenhoek van een blogbericht in de middenkolom wordt weergegeven
    .
  • Voorkomen dat er een blauw paarse standaardrand rond een aanklikbaar plaatje wordt weergegeven
  • De rand rond een aanklikbaar plaatje / foto verwijderen
     
  • Kleur en dikte v/d rand om een afbeelding wijzigen
  • wmv video gemaakt met Photostory en geüpload naar docs.google.com
  • Probleemoplossing: wanneer de rechterkolom v/d website van seniorennet het tekstvak van elk blogbericht deels bedekt
    .
  • Probleemoplossing - Wanneer in het item -Gastenboek- bij Personaliseer, de knop -Verwijderen- bedekt wordt door reclame, zodat het verwijderen van een bericht onmogelijk is
  • Een dia presentatie maken met Google Docs en op de blog laten afspelen
  • Een plaatje aanklikbaar maken, door de URL van uw blog of een ander document of bestand dat op internet staat te koppelen aan het plaatje 
  • Tekst op een afbeelding plaatsen met de online editor van Lunapic 
  • In een blogbericht van de middenkolom, twee of meerdere plaatjes van de harde schijf toevoegen en in ware grootte aanklikbaar weergeven 
  • Het uitzicht van de muisaanwijzer vervangen door een plezant figuurtje
     

    aantal page views
    sinds 07 jan 2010

    (X)HTML in de broncode
    Eenvoudige HTML codes in de brontekst of bron van een blogbericht of webpagina begrijpen en gebruiken
    Onderdeel van blog http://blog.seniorennet.be/blogtips
    28-10-2011
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.(X)HTML codes begrijpen en gebruiken in de brontekst (bron of broncode) van een blogbericht bij seniorennet of bloggen.be
    .

    Eenvoudige (X)HTML codes 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

    Werkwijze 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 <...>, spatie, aanhalingsteken "..", accolade {...}, 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


    Categorie:Andere
    » Reageer (0)
    12-06-2011
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Afbeeldingen invoegen met de tag img

    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    vlinder

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


    Categorie:Afbeeldingen invoegen
    » Reageer (0)
    09-04-2011
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Een alinea (met lege regel) toevoegen / uitlijnen naar links, rechts of centreren (met het element p align)
    .

    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>

    Wanneer in de tag <p> geen attribuut bijgevoegd wordt, die aangeeft dat de tekst tegen de linkermarge, gecentreerd of tegen de rechtermarge dient te staan, dan staat de tekst standaard steeds in de linkerkant. (zie voorbeeld hierboven)


    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>

     


    Categorie:Alinea- en regeleinden toevoegen
    » Reageer (0)
    08-04-2011
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Centreren (zonder lege regel) met de tag center (doch verouderd)
    .
    <center>...</center> is verouderd en wordt best niet meer gebruikt

    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>

    Zie voorbeeld:
    <center>Tekst gecentreerd op een verouderde manier</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.

    Zie voorbeeld
    <div align="center">Tekst gecentreerd op een goede manier</div>
     

    Categorie:Alinea- en regeleinden toevoegen
    » Reageer (1)
    07-02-2011
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Een nieuwe regeleinde toevoegen met de tag br
    .

    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



    In de gewone standaard editor van seniorennet en bloggen.be wordt nog de gewone oude HTML taal gehanteerd en dus gebruik gemaakt van <br> in plaats van <br /> om een nieuwe regel aan te geven
    Momenteel wordt meer en meer de nieuwere XHTML taal gebruikt, zoals reeds gebeurt in de nieuwe editor van de blogs van seniorennet.
    In XHTML wordt een nieuwe regel aangegeven met <br />
    Best is zich dus een gewoonte te maken van in de broncode <br /> te typen i.p.v. <br> , deze wordt zowel door de gewone standaard editor als door de nieuwe editor van de blogs van seniorennet en bloggen.be begrepen



    Bij sommige editors zoals de normaal standaard editor van seniorennet en bloggen.be kan in het gewone ontwerp tekstvenster een nieuwe regel worden aangegeven door op de plaats waar deze dient te beginnen op de Enter toets te drukken
    Maar bij gebruik van de Nieuwe editor van seniorennet bekomen we echter bij voornoemde werkwijze een nieuwe alinea in plaats van een nieuwe regel
    Dit probleem kan bij gebruik van de Nieuwe editor en ook bij sommige andere editors, opgelost worden door in het gewone ontwerp venster op de Enter toets te drukken, terwijl de Shift toets ingedrukt gehouden wordt. (Shift+Enter = een nieuwe regel)
     

    Categorie:Alinea- en regeleinden toevoegen
    » Reageer (0)
    10-11-2010
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Kopteksten toevoegen, kleur geven, uitlijnen
    .

    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

    Weergave van de kopteksten van groot naar klein, al naar gelang het niveau dat in de code aangebracht wordt. In de bron ziet de code er zo uit:
    Bij de tag <h1>...</h1> wordt de grootste koptekst weergegeven. 
    Bij de tag <h6>...</h6> de kleinste koptekst

    Koptekst 1

    <h1>Koptekst 1</h1>

    Koptekst 2

    <h2>Koptekst 2</h2>

    Koptekst niveau 3

    <h3>Koptekst niveau 3</h3>

    Koptekst niveau 4

    <h4>Koptekst niveau 4</h4>
    Koptekst niveau 5
    <h5>Koptekst niveau 5</h5>
    Koptekst niveau 6 is de kleinste
    <h6>Koptekst niveau 6 is de kleinste</h6>


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


    Door in de openingstag <h1> of in de begintag van één van de andere niveaus, het attribuut align="center" toe te voegen, wordt een koptekst gecentreerd weergegeven. De sluittag laten we hierbij ongewijzigd

    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>

    -------------------------------
    Wanneer in de openingstag het attribuut align="left" toegevoegd wordt, wordt de koptekst tegen de linkermarge geplaatst

    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>


    Een andere en betere werkwijze om kopteksten uit te lijnen is gebruik maken van een inline stijl. Dit wordt meestal in blogberichten gedaan.
    Inline stijlen nemen steeds voorrang op ingesloten stijlen.
    Een voorbeeld van ingesloten stijlen is bij de blogs van seniorennet en bloggen.be, via Instellingen > "Uitzicht (design) wijzigen blog" te vinden in de bron van de blog

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


    Bij gebruik van een inline stijl, wordt in de begintag <h1> of in één van de begintags van een ander niveau het attribuut style opgenomen
    In de style tag style="..." wordt dan tussen de aanhalingstekens, op de plaats waar de puntjes staan, het element text-align: center aangebracht.
    Voorbeeld:

    Deze koptekst niveau 4 staat gecentreerd

    <h4 style="text-align: center;">Deze koptekst niveau 4 staat gecentreerd</h4>

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


    Categorie:Kopteksten
    » Reageer (0)
    13-09-2010
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Tekst opmaken: vette en/of cursieve tekst
    .

    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


    Categorie:Tekst opmaken: vet, cursief...
    » Reageer (0)
    04-03-2010
    Klik hier om een link te hebben waarmee u dit artikel later terug kunt lezen.Een webpagina maken 

    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)   


    Categorie:Andere
    » Reageer (0)



    Kom niet dichterbij!

    Categorieën
  • Afbeeldingen invoegen (1)
  • Alinea- en regeleinden toevoegen (3)
  • Andere (3)
  • Koppelingen maken - Hyperlinks (0)
  • Kopteksten (1)
  • Lijsten maken (0)
  • Tabellen maken (0)
  • Tekst opmaken: vet, cursief... (1)

  • Archief per week
  • 24/10-30/10 2011
  • 06/06-12/06 2011
  • 04/04-10/04 2011
  • 07/02-13/02 2011
  • 08/11-14/11 2010
  • 13/09-19/09 2010
  • 01/03-07/03 2010

    Blog als favoriet !

    Hoofdpunten blog broncode
  • (X)HTML codes begrijpen en gebruiken in de brontekst (bron of broncode) van een blogbericht bij seniorennet of bloggen.be
    .
  • Afbeeldingen invoegen met de tag img
  • Een alinea (met lege regel) toevoegen / uitlijnen naar links, rechts of centreren (met het element p align)
    .
  • Centreren (zonder lege regel) met de tag center (doch verouderd)
    .
  • Een nieuwe regeleinde toevoegen met de tag br
    .

    Hoofdpunten blog uitzicht_design
  • Welkom op blog uitzicht_design
    .
  • Zonder script, toch voorkomen dat bij gebruik van de rechtermuisknop een plaatje wordt opgeslaan
    .
  • Een nieuwe look
  • Achtergrondkleur en/of achtergrondafbeelding wijzigen bij de blogs van seniorennet en bloggen.be
     
  • Onderaan ieder blogbericht, het » teken bij REAGEER vervangen door een ander teken of icoontje
    .

    Hoofdpunten blog blogdesk
  • Eventjes een woordje
    .
  • Wil bij ieder contact steeds uw blog of website mededelen
    .
  • De rangorde van de items in de zijkolommen wijzigen - items naar de andere zijkolom verplaatsen
    .
  • Ingegeven berichten pas na goedkeuring laten verschijnen
  • Soorten editors

    Hoofdpunten blog powerpointtips
  • Inhoud - powerpointtips
    .
  • Test om te zien of de codes van de video behouden blijven, met de nieuwe editor
  • In pp 2013 - Een powerpoint beveiligen met een wachtwoord tegen wijzigen
    .
  • Een site bij sites.google.com aanmaken voor het uploaden van video, pps, doc, xls
    .
  • PowerPoint met enkele nieuwe overgangseffecten uit Off.Micr.Powerpoint 2013 omgezet naar wmv video en geupload naar Drive.google
    .

    Gastenboek
  • Fijne start van de nieuwe week ...
  • Prettige nieuwe week
  • Fijne avond
  • Droomwereld
  • Ik kom je een fijne avond wensen

    Druk op onderstaande knop om een berichtje achter te laten in mijn gastenboek


    E-mail mij

    Druk op onderstaande knop om mij te e-mailen.



    Hoofdpunten blog powerpointcrea
  • Leve Moeder
  • Fijne Feestdagen - Gelukkig Nieuwjaar
  • The living Years
  • Vind ons op facebook en klik op de knop -Vind ik leuk-
  • Mijn nieuw blog op wordpress.com
    .

    Hoofdpunten blog zomersproeten
  • Tijden van nood
  • Gewaardeerd
  • Voor altijd in het hart
  • Echte vriendschap
  • Corrigeren en prijzen

    Hoofdpunten blog zonnegroeten
  • Voorkomen dat uw naam en foto in de advertenties van Google opduikt
    .
  • Voor meer computertips: zie pctipstrucs.wordpress.com
  • Geen mails meer ongewild bij de Spam
    .
  • Een foto in stukken splitsen
  • Zoek je iets? Welkom op mijn blog!
    .

    Hoofdpunten blog fotovreugde
  • Welkom op mijn blog: Fotovreugd.wordpress.com
    .
  • Herfst in het Lozerbos
  • Abdijcomplex Maagdendale
  • Leve moeder
  • Fijne Paasdagen

    Hoofdpunten blog reissprokkels
  • Bezienswaardigheden in Chartres
  • Leuk spelletje - zoek de fouten
  • Foto's over de gehele wereld
  • Online de klok inoefenen
  • Panoramisch zicht op de Markt in Oudenaarde

    Hoofdpunten blog sunflowers
  • Wenspagina - Young Love
  • Paaskaartje gemaakt door Suzieke
     
  • Paaskaartje gemaakt door Ulla
  • Paaskaartje gemaakt door Roosje
     
  • PSP werkje met wenspagina - Stuur ook eens een ecard-page naar uw vrienden en familie

    Mailinglijst

    Geef je e-mail adres op en klik op onderstaande knop om je in te schrijven voor de mailinglist.




    Blog tegen de regels? Meld het ons!
    Gratis blog op http://blog.seniorennet.be - SeniorenNet Blogs, eenvoudig, gratis en snel jouw eigen blog!