Offtopic topic #12

<html>
  <head>
    <title>Mijn eerste HTML document</title>
  </head>
 
  <body>
    <a name="top">Top</a>
    <p>Dit is een normale paragraaf.</p>
    <p style="text-align: right">Dit is een paragraaf die rechts wordt uitgelijnd.</p>
    <p style="text-align: center">Dit is een paragraaf die gecentreerd word.</p>
    <p style="text-align: left">Dit is een paragraaf die links wordt uitgelijnd.</p>
    <h1> Dit is een titel met grootte h1</h1>
    <h2> Dit is een titel met grootte h2</h2>
    <h3> Dit is een titel met grootte h3</h3>
    <h4> Dit is een titel met grootte h4</h4>
    <h5> Dit is een titel met grootte h5</h5>
    <h6> Dit is een titel met grootte h6</h6>
    <p>Dit is een paragraaf.&nbsp;&nbsp;&nbsp;Tussen deze twee zinnen gebruikten we <b>drie</b> non-breaking spaces</p>
    FORUMCODE0
    <p>Wil je je volgende zin op een andere lijn? <br>Gebruik dan de br functie.</p>
    <p>Doormiddel van de hr functie kan je makkelijk een horizontale lijn plaatsen</p>
    <hr>
    <p>Je kan de breedte van de hr functie ook veranderen.<br> Deze is 50%</p>
    <hr style="width: 50%" />
    <p>Hier is de width 20%</p>
    <hr style="width: 20%" />
    <p>Door middel van de float functie kan je de lijn rechts, links of in het midden plaatsen. 
    <br> Echter merk je daar niks van als je hr niet verkleint, dus moeten we voor het eerst twee functies tegelijk toepassen.</p>
    <hr style="width: 50%; float: left" />
    <p><br>Door middel van de height functie kan je de dikte van hr aanpassen.</p>
    <hr style="height: 15px" />
    <p> Door middel van de background-color functie kunnen we de kleur veranderen van hr. <br>
    In dit geval bijvoorbeeld naar rood.</p>
    <hr style="background-color: red;height: 30px" />
    <p><b>Deze tekst komt in bold te staan.</b></p>
    <p><strong>Deze tekst komt in strong te staan.</strong></p>
    <p><i>Deze tekst komt in italic te staan.</i></p>
    <p><em>Deze tekst komt in emphasis te staan.</em></p>
    <p><small>Deze tekst is small.</small></p>
    <p><big>Deze tekst is groot.</big></p>
    <p>Dit is gewone tekst<sub> en deze tekst wordt onder de regel weergeven</sub></p>
    <p>Dit is gewone tekst<sup> en deze tekst wordt boven de regel weergeven</sup></p>
    <p>Dit is gewone tekst<del> en deze tekst is doorgehaald</del></p>
    <p>Dit is gewone tekst<ins> en deze tekst is onderlijnd.</ins></p>
    <q>Dit is een quote, IE ondersteund dit element <b>niet.</b></q>
    <blockquote>De functie blockquote.</blockquote>
    FORUMCODE1
    <br><abbr title="Deze functie geeft meer informatie bij een mouse-hover.">Laat je muis rusten op deze zin voor meer informatie.</abbr>
    <p style="font-family: arial">Door middel van de style font-family kan je gemakkelijk de tekst veranderen naar een default font.<br>
    In dit geval dus Arial.</p>
    <p style="font-size: 20px"> Deze tekst heeft een lettertype dat 20px groot is, dat komt door gebruik van de style font-size.</p>
    <p style="color: red"> Deze tekst heeft een rode kleur, door gebruik van de style color.</p>
    <p> Door middel van het element a kunnen we een hyperlink plaatsen in een HTML document</p>
    <p> Met het bijhorende attribuut href duiden we aan naar waar de bezoeker verwezen word.</p>
    <a href="http://google.be">Hyperlink naar google</a>
    <p> Als echter het document staat in dezelfde map als het huidig document kunnen we gewoon de naam van het bestand noteren.</p>
    <a href="welkom.html">Mijn eerste HTML document</a>
    <p> Als het bestand een map lager staat, noteer je de map gevolgd door een / en de bestandsnaam</p>
    <a href="test/welkom2.html"> Niet werkende voorbeeldlink</a>
    <p> Als het bestand een map hoger staat, noteer je ../ gevolgd door de bestandsnaam</p>
    <a href="../welkom3.html"> Niet werkende voorbeeldlink2 </a>
    <p> Als je de pagina in een nieuw venster wilt openen, maken we gebruik van het attribuut target.</p>
    <a href="http://google.be" target="_blank">Hyperlink naar google die opent in een nieuwe tab</a>
    <p> Stel, we hebben een pagina ingedeeld in hoofdstukken en deze benoemd in onze inhoud, dan kan je doormiddel van een paar functies snel naar deze plek springen.</p>
    <a href="#top"> Naar boven</a>
    <p> Deze link brengt ons dus naar top, die bovenaan staat, en daarom wordt de bezoeker naar boven gebracht.</p>
    <p> Als afsluiter voor hyperlinks kan je ook nog met de title functie een tekst laten verschijnen als mensen hun cursor op de link plaatsen.</p>
    <a href="http://google.be" title="Google.be"> Hyperlink naar google.be met tekst bij een mouse-hover </a>
    <p> Gebruik van mailto functie. </p>
    <a href="mailto:gebruiker@provider123.be">Stuur een e-mail naar 1 persoon</a>
    <p> De meeste browsers ondersteunen ook de mogelijk om aan meerdere emails tegelijk te sturen. </p>
    <a href="mailto:gebruiker1@provider123.be, gebruiker2@provider123.be">Stuur een e-mail naar meerdere personen</a>
    <p> Je kan ook direct een vast onderwerp instellen zodat de gebruiker dit niet meer hoeft te doen </p>
    <a href="mailto:gebruiker@provider123.be?subject=Test%20voor%20handleiding">Stuur een e-mail met een vast onderwerp</a>
    <p> Hetzelfde kan toegepast worden door gebruik van de parameter body in plaats van de parameter subject. </p>
    <p> Voor het gebruiken van een plaatje gebruiken we img gevolgd door src. Ook worden width en height beschreven. </p>
    <img src="http://www.cursushtml.be/afbeeldingen/appel.jpg" width="177" height="182" />
    <p> Het element img wordt zoals het element br afgesloten in de start tag. </p>
    <p> De image map wordt momenteel niet besproken. </p>
    <p> Een ongeordende lijst maak je doormiddel van het element ul. Een ongeordende lijst krijgt een symbool en geen cijfer. </p>
    <ul>
        <li>Eerste item v/d ongeordende lijst</li>
        <li>Tweede item v/d ongeordende lijst</li>
        <li>Derde en laatste item v/d ongeordende lijst</li>
    </ul>
    <p> Een geordende lijst is hetzelfde als een ongeordende lijst maar dan met nummer-ordering. </p>
    <ol>
        <li>Eerste item v/d geordende lijst</li>
        <li>Tweede item v/d geordende lijst</li>
        <li>Derde en laatste item v/d geordende lijst</li>
    </ol>
    <p> Definitie lijsten kunnen gemaakt worden door gebruik van het dl element. </p>
    <dl>
        <dt>Hoofdtitel1</dt>
        <dd>Bijhorende tekst</dd>
    
        <dt>Hoofdtitel2</dt>
        <dd>Bijhorende tekst</dd>
    </dl>
</body>
 
</html>