Opsteltips

  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.

  • Toegelaten HTML-tags: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr><br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong><font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code><cite> <embed> <object> <strike> <caption>

    Op deze site kan HTML worden gebruikt. Terwijl het leren van de volledige HTML-code overweldigend kan zijn, is het leren van een beperkte aantal basis HTML-'tags' veel eenvoudiger. Deze tabel geeft een aantal voorbeelden van iedere tag die op deze site kan worden gebruikt.

    Voor meer informatie zie de HTML-specificaties van W3C of gebruik uw favoriete zoekmachine om een site te te vinden die uitleg over HTML geeft.

    Tag BeschrijvingU typtU krijgt
    Ankers worden gebruikt om links te maken naar andere pagina's.<a href="http://www.juntoscontigo.com">Welkom</a>Welkom
    Paragraaf-tags worden standaard automatisch toegevoegd. Gebruik dus deze tagom er extra toe te voegen.<p>Paragraph één.</p> <p>Paragraph twee.</p>

    Paragraph één.

    Paragraph twee.
    Er is geen hulp beschikbaar voor tag span.
    Er is geen hulp beschikbaar voor tag div.
    Kop<h1>Titel</h1>

    Titel
    Kop<h2>Ondertitel</h2>

    Ondertitel
    Kop<h3>Ondertitel drie</h3>

    Ondertitel drie
    Kop<h4>Ondertitel vier</h4>

    Ondertitel vier
    Kop<h5>Ondertitel vijf</h5>
    Ondertitel vijf
    Kop<h6>Ondertitel zes</h6>
    Ondertitel zes
    Er is geen hulp beschikbaar voor tag img.
    Er is geen hulp beschikbaar voor tag map.
    Er is geen hulp beschikbaar voor tag area.
    Er is geen hulp beschikbaar voor tag hr.
    Regeleinde-tags worden standaard al automatisch aan de tekst toegevoegd, dus gebruik deze tag alleen om extra regeleinden toe te voegen. Het gebruik van deze tag is anders dan andere XHTML-tags omdat het niet bestaat uit een open- en sluit tag-paar. Gebruik de extra "/" binnenin de tag om de XHTML 1.0 compatibiliteit te behoudenTekst met <br />regeleindeTekst met
    regeleinde
    Regeleinde-tags worden standaard al automatisch aan de tekst toegevoegd, dus gebruik deze tag alleen om extra regeleinden toe te voegen. Het gebruik van deze tag is anders dan andere XHTML-tags omdat het niet bestaat uit een open- en sluit tag-paar. Gebruik de extra "/" binnenin de tag om de XHTML 1.0 compatibiliteit te behoudenTekst met <br />regeleindeTekst met
    regeleinde
    Ongeordende lijst - gebruik <li> voor elke lijst-item<ul> <li>Eerste item</li> <li>Tweede item</li> </ul>
    • Eerste item
    • Tweede item
    Geordende lijst - gebruik <li> voor elk lijst-item<ol> <li>Eerste item</li> <li>Tweede item</li> </ol>
    1. Eerste item
    2. Tweede item
    Definitielijsten zijn zeer gelijkaardig aan andere HTML-lijsten. <dl> start de definitielijst, <dt> start de definitieterm en <dd> start de definitiebeschrijving.<dl> <dt>Eerste term</dt> <dd>Eerste definitie</dd> <dt>Tweede term</dt> <dd>Tweede definitie</dd> </dl>
    Eerste term
    Eerste definitie
    Tweede term
    Tweede definitie
    Tabel<table> <tr><th>Tabelkop</th></tr> <tr><td>Tabelcel</td></tr> </table>
    Tabelkop
    Tabelcel
    Benadrukt<em>Benadrukt</em>Benadrukt
    Vet<b>Vet</b>Vet
    Onderstreept<u>Onderstreept</u>Onderstreept
    Cursief<i>Cursief</i>Cursief
    Sterk<strong>Sterk</strong>Sterk
    Er is geen hulp beschikbaar voor tag font.
    Verwijderd<del>Verwijderd</del>Verwijderd
    Ingevoegd<ins>Ingevoegd</ins>Ingevoegd
    Subscript<sub>Sub</sub>scriptSubscript
    Superscript<sup>Super</sup>scriptSuperscript
    Er is geen hulp beschikbaar voor tag quote.
    blok aanhaling<blockquote>blok aanhaling</blockquote>
    blok aanhaling
    Voorgeformateerd<pre>Voorgeformateerd</pre>
    Voorgeformateerd
    Er is geen hulp beschikbaar voor tag address.
    Code-tekst, gebruikt om programmacode weer te geven<code>Code</code>Code
    Geciteerd<cite>Geciteerd</cite>Geciteerd
    Er is geen hulp beschikbaar voor tag embed.
    Er is geen hulp beschikbaar voor tag object.
    Er is geen hulp beschikbaar voor tag strike.
    Er is geen hulp beschikbaar voor tag caption.

    De meest gebruikelijke karakters kunnen direct ingegeven worden zonder problemen.

    Indien u wel problemen ondervindt, probeer dan eens HTML-karaters te gebruiken. Een standaard voorbeeld is &amp; voor een ampersand &-karakter. Voor een volledige lijst van karakters: zie HTML's entititeiten-pagina. Een aantal van de beschikbare karakters zijn:

    KarakterbeschrijvingU typtU krijgt
    Ampersand&amp;&
    Groter dan&gt;>
    Kleiner dan&lt;<
    Aanhalingsteken&quot;"
  • Insert Flickr images: [flickr-photo:id=230452326,size=s] or [flickr-photoset:id=72157594262419167,size=m].The size parameter can be one of the following:
    • s — (Square) 75x75 pixel square
    • t — (Thumbnail) 100 pixels on longest side
    • m — (Small) 240 pixels on longest side
    • - — (Medium) 500 pixels on longest side
    • b — (Large) 1024 pixels on longest side
    • o — (Original) Original image

  • To add a lightbox to your images, add rel="lightbox" attribute to any link tag to activate the lightbox. For example:

    <a href="image-1.jpg" rel="lightbox">image #1</a>

    <a href="image-1.jpg" rel="lightbox[][my caption]">image #1</a>

    To show a caption either use the title attribute or put in the second set of square brackets of the rel attribute.

    If you have a set of related images that you would like to group, then you will need to include a group name between square brackets in the rel attribute. For example:

    <a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
    <a href="image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>

    There are no limits to the number of image sets per page or how many images are allowed in each set.

    If you wish to turn the caption into a link, format your caption in the following way:

    <a href="image-1.jpg" rel='lightbox[][<a href="http://www.yourlink.com">View Image Details</a>]' >image #1</a>

  • Image links from G2 are formatted for use with Lightbox2

  • To add a lightbox slideshow to your images, add rel="lightshow[slideshowname][slide caption]" attribute to any link tag to activate the slideshow. For example:

    <a href="image-1.jpg" rel="lightshow[show1]">image #1</a>
    <a href="image-2.jpg" rel="lightshow[show1]">image #2</a>
    <a href="image-3.jpg" rel="lightshow[show1]">image #3</a>

    The title attribute in the link tag is optional. The addition of this attribute enables the display of a caption with the image displayed in the lightbox.

    There are no limits to the number of slideshow image sets per page or how many images are allowed in each slideshow.

    If you wish to turn the caption into a link, format your caption in the following way:

    <a href="image-1.jpg" rel='lightshow[show1][<a href="http://www.yourlink.com">View Image Details</a>]'>image #1</a>

  • It's possible to show webpage content in the lightbox, using iframes. In this case the "rel" attribute should be set to "lightframe". Again it's possible to group the content, (e.g. lightframe[search][caption]) but in addition to that, it's possible to control some of the iframe properties. It's possible to set the "width", "height" and "scrolling" properties of the iframe. The properties are separated from the group name by a |, for example lightframe[search|width:100px;][caption]. If no grouping is being used, then the | is still used and the format would be lightframe[|width:100px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no iframe properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

    Basic example:
    <a href="http://www.google.com" rel="lightframe">Search google</a>

    Grouped example:
    <a href="http://www.google.com" rel="lightframe[search][caption]">Search google</a>
    <a href="http://www.yahoo.com" rel="lightframe[search]">Search yahoo</a>

    Controlling iframe property example:
    <a href="http://www.google.com" rel="lightframe[|width:400px; height:300px; scrolling: auto;][caption]">Search google</a>

    Controlling iframe property when grouped example:
    <a href="http://www.google.com" rel="lightframe[search|width:400px; height:300px; scrolling: auto;]">Search google</a>
    <a href="http://www.yahoo.com" rel="lightframe[search|width:400px; height:300px;]">Search yahoo</a>

  • It's possible to show HTML snippets in the lightbox, that is on the same domain. In this case the "rel" attribute should be set to "lightmodal". Again it's possible to group the content, (e.g. lightmodal[group][caption]) but in addition to that, it's possible to control some of the modal properties. It's possible to set the "width", "height" and "scrolling" properties of the modal. The properties are separated from the group name by a |, for example lightmodal[group|width:100px;][caption]. If no grouping is being used, then the | is still used and the format would be lightmodal[|width:100px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no modal properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

    Basic example:
    <a href="search.php" rel="lightmodal">Search</a>

    Grouped example:
    <a href="search.php" rel="lightmodal[search][caption 1]">Search</a>
    <a href="search.php?status=1" rel="lightmodal[search]">Search published</a>

    Controlling modal property example:
    <a href="search.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;][caption]">Search</a>

    Controlling modal property when grouped example:
    <a href="search.php" rel="lightmodal[search|width:400px; height:300px; scrolling: auto;]">Search</a>
    <a href="search.php?status=1" rel="lightmodal[search|width:400px; height:300px;]">Search published</a>

Home