• Basis HTML

    22 May 2010 23:23 door
    Iedereen komt er wel achter na een tijdje gebruik te hebben gemaakt van een website editor, zoals frontpage of dreamweaver in design modus, dat er toch wel meer moet zijn dan dit. Sommige dingen werken via de interfaces ook niet zoals je zou willen. Daarom ook dat de meeste webdevelopers zelf hun code schrijven. Het is ook niet zo moeilijk, vooral de HTML basis die ik jullie hier zal proberen bij te brengen, is vrij simpel.

    Waarvoor staat en wat is HTML?

    HTML staat voor HyperText Markup Language en is voor alle duidelijkheid geen programmeertaal. Het is een opmaaktaal die door software makkelijk verwerkt kan worden tot een webpagina. Ik ga hier net iets verder gaan dan de meeste tutorials die je op het internet kan vinden. Dit omdat we gebruik gaan maken van XHTML 1.0 (Extensible HyperText Markup Language). Het is praktische hetzelfde als de gewone HTML enkel dat er striktere regels zijn. Deze regels zorgen ervoor dat we een nettere code krijgen.

    Een van de dingen die je altijd in je hoofd moet houden is dat tags die we openen ook altijd gesloten dienen te worden. Hiervoor zullen we 2 manieren zien, de éne is soms makkelijker dan de andere. Ook schrijven we de code altijd in kleine letters.

    Basis Tags
    Om verder in deze cursus alles beter te begrijpen, wil ik eerst vertellen welke basis tags het meest gangbaar zijn. Je kan ook steeds terug scrollen om deze terug te vinden moest je eentje niet meer weten.

    B-tag
    Hieronder zie je hoe je makkelijk tekst vet gedrukt kan maken. Het principe zoals je misschien al gezien hebt is het zelfde als gebruik maken van UBB tags die je vaker tegen komt op een forum of dergelijke.

    HTML-code:
    <b>Hier vet gedrukte tekst</b>
    U-tag

    Deze zorgt ervoor dat de tekst onderlijnd zal worden. Deze tag zal ook niet zo vaak gebruikt worden.

    HTML-code:
    <u>Deze lijn zou onderlijnd moeten zijn</u>
    P-tag

    Vertelt waar een alinea start en stopt

    HTML-code:
    <p>Dit zou dus de eerste alinea zijn. Deze kan bestaan uit meerdere zinnen natuurlijk.
    
    </p>
    H1 t.e.m H6 -tags

    Deze tags zijn titelkoppen waarin de H1 de eerste titel is en h2 dus onder H1 staat.

    HTML-code:
    <h1>Eerste Titel (hoofdtitel)</h1>
    <h2>Onder titel onder de hoofd titel</h2>
    <h3>Een titel onder H2</h3>
    <h4>Nu een titel onder h3</h4>
    <h5>En vervolgens een titel onder H4</h5>
    <h6>Nog een titel onder h5</h6>
    BR-tag

    Deze tag zorgt voor slechts één spatie. Deze tag heeft eveneens iets speciaals omdat deze bestaat uit slechts één deel en XHTML ons zegt dat we elke tag moeten sluiten bestaan er 2 manieren om dit te bekomen.

    Zoals vele onder jullie wel zullen denken: simpel. Maar is dit wel de handigste manier?

    HTML-code:
    Hier een regel tekst<br></br>Hier de tweede regel tekst
    Zoals je al ziet is dit totaal niet handig vooral omdat de 2 tags samen horen te blijven. Daarom bestaat er voor deze soort tags een kortere vorm. Ziet er hieronder toch een stuk overzichtelijker uit niet?

    HTML-code:
    Hier een regel tekst<br />Hier de tweede regel  tekst
    LI -tag

    De li-tag zal niet op zichzelf gebruikt worden en dient in combinatie gebruikt te worden met een andere tag.

    ongeordende lijst

    Zoals je waarschijnlijk al duidelijk is, bepaalt de eerste tag het soort lijst.

    HTML-code:
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
    geordende lijst

    Natuurlijk als er een ongeordende lijst bestaat, bestaat er ook een geordende lijst. Hier later meer over.

    HTML-code:
    <ol>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ol>
    TABLE-tag

    Hiermee kunnen we gegevens weergeven in een tabel zodanig dat ze op een duidelijke manier kunnen worden weergegeven. Vroeger werden deze ook gebruikt om een layout op te bouwen; dit is tegenwoordig totaal uit den boze. Je layout opbouwen met tabellen zorgt voor een hoop extra code en dat willen we niet. In het volgende deel zal je CSS aanleren en zal je div's en spans kunnen gebruiken om een layout te maken.

    Hieronder een voorstelling van een simpele tabel code. De tr tag in de table zorgt ervoor dat er een nieuwe rij aangemaakt zal worden. Terwijl de td tag ervoor zorgt dat er een nieuwe cel zal worden toegevoegd.

    HTML-code:
    <table>
        <tr>
            <td>Cel 1 in rij 1</td>
            <td>Cel 2 in rij 1</td>
        </tr>
        
        <tr>
            <td>Cel 1 in rij 2</td>
            <td>Cel 2 in rij 2</td>
        </tr>
    </table>
    Een ietwat nuttiger voorbeeld waarin we een aantal producten in een tabel zetten.

    HTML-code:
    <table>
        <tr>
            <td><b>Product</b></td>
            <td><b>Omschrijving</b></td>
        </tr>
        
        <tr>
            <td>Kabel 50m</td>
            <td>3G VOB 2,5mm&sup2;</td>
        </tr>
        
        <tr>
            <td>Kabel 100m</td>
            <td>3G VOB 1,5mm&sup2;</td>
        </tr>
    </table>
    Nu zien we hierboven nog iets nieuws namelijk &sup2;. Dit is een speciaal karakter namelijk ². We maken gebruik van deze code om ervoor te zorgen dat dit juist zal worden opgevat door de browser. Speciale html karakters.

    IMG-tag
    Een vrij belangrijke tag, hiermee kunnen we namelijk afbeeldingen op het scherm toveren. Ook vallen er nog wat dingen bij deze tag op. We vertellen aan de browser d.m.v. de img tag dat het om een afbeelding gaat, maar vervolgens moeten we ook zeggen waar deze zich bevindt. Dat doen we door gebruik te maken van de src="" . Tussen de aanhalingstekens duiden we de locatie van de afbeelding aan.

    In dit geval bevindt de afbeelding zich in dezelfde folder als het html document zelf.

    Nu is er nog één zeer belangrijke attribute, namelijk de alt="".
    Hiermee geven we onze afbeelding een beschrijving. Zoekmachines kunnen namelijk geen afbeeldingen lezen. Zorg er dus voor dat deze zo relevant mogelijk is. Deze alt-attribute zal ook worden weergegeven indien de afbeelding niet gevonden kon worden.

    Lange vorm

    HTML-code:
    <img src="afbeelding.jpg" alt="Een afbeelding beschrijving"></img>
    Korte vorm

    HTML-code:
    <img src="afbeelding.jpg" alt="Een afbeelding beschrijving" />

    Zoals jullie waarschijnlijk alweer opvalt is het veel gemakkelijker om hier gebruik te maken van de korte vorm. Deze maakt het ook overzichtelijker

    A-tag

    Hiermee kunnen we linken leggen naar andere webpagina's of net naar je eigen site maar een andere pagina. Dit voorbeeld hieronder zal verwijzen naar minatica.be

    HTML-code:
    <a href="https://www.minatica.be/">Minatica.be</a>
    Maar zoals ik al vertelde kan je ook naar andere html bestanden linken. Dit kan op de volgende manier. Eveneens kan je een link gerust in je tekst zetten.

    HTML-code:
    <a href="pagina2.html">Pagina 2</a>
    DIV-tag

    Deze tag omvat een selectie van meerdere tags en kan gebruikt worden om je website op te maken of je layout te vormen. Hier zullen we dieper op in gaan in het volgende deel waarin we ook CSS zullen bespreken.

    HTML-code:
    <div>
        <p>Hier hebben we de eerste alinea. Je kan natuurlijk bij de rest ook gewoon tags combineren maar hier zal je makkelijker een stijl aan kunnen toewijzen.</p>
        
        <p>Zoals je ziet heb ik hier een 2de alinea om alles toch een beetje duidelijk te maken.</p>
        
        <p>Hier misschien nog een 3de alinea?</p>
    </div>
    SPAN-tag

    Een stukje tekst een stijl geven kan makkelijk met deze tag. Eveneens als de vorige tag zullen we deze gaan gebruiken bij het volgende deel waarin we deze 2 tags ook nog eens aanhalen. Nu zouden we de span een stijl kunnen mee geven zodanig dat gele geel zou worden. Maar dit is voor de volgende tutorial. Zo heb je al een idee van deze tag.

    HTML-code:
    De zon heeft een <span>gele</span> kleur
    Basis Webpagina

    Een basis webpagina bevat een aantal standaard elementen die toch wel vrij belangrijk zijn. Hieronder zien we een voorbeeld van een basis html pagina.

    HTML-code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Webpagina titel</title>
    </head>
    
    <body>
    
    Inhoud van je website
    
    </body>
    
    </html>
    Even de elementen van deze webpagina van dichterbij bekijken, beginnend bovenaan. Deze tag word vaker vergeten door beginnende webdevelopers. Deze regel vertelt de internet browser met wat voor soort HTML/XHTML hij te maken krijgt.

    Vervolgens openen we de HTML tag nu zien we in deze html tag toch wel iets vreemds. Namelijk de xmlns="" attribute. Deze vertelt aan de browser, die de code natuurlijk ook controleert of het document correct is. We geven hier dus een waarde op waarmee de browser dit kan controleren. Deze waarde kan je gewoon van mij aannemen. Zolang het over XHTML 1.0 gaat is deze gewoon correct.

    Note: De xmlns="" vinden we niet terug bij HTML dit is eigen aan XHTML.

    Nu openen we de head tag: deze is gemaakt om allerlei scripts, stylesheets (waarop we terug komen in een andere tutorial) en data te omvatten.
    De eerste volgende lijn vertelt aan de browser wat voor inhoud dit document zal bevatten en welke karakterset er gebruikt moet worden. Deze regel is in de meeste gevallen zo gewoon goed.

    De title tag die we vervolgens tegen komen zal ervoor zorgen dat je browser venster een titel mee krijgt. Deze zal zichtbaar zijn in je venster bovenaan. Deze is immers ook verplicht evenals de html tag.

    Enkele voorbeelden hiervan:

    Firefox: "Webpagina titel - Mozilla Firefox"
    Internet Explorer: "Webpagina titel - Windows Internet Explorer"

    Vervolgens kunnen we de head sluiten en kunnen we aan het volgende zeer belangrijke stukje beginnen, namelijk de body, hierin gaat je uiteindelijke website komen. In de body bouwen we de pagina op d.m.v. de tags die hierboven al werden aangehaald.

    Nu maken we nog een laatste voorbeeld pagina om nog een paar zaken duidelijk te maken. Hierin zullen we gebruik maken van zoveel mogelijk dingen die we geleerd hebben.

    HTML-code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Mijn Eerste webpagina</title>
    </head>
    
    <body>
        <h1>Mijn Eerste Webpagina</h1>
        
        <p>Hier kan ik een tekst neer zetten, ook kan ik zomaar wat dingen <b>vet gedrukt</b> maken. Het is allemaal best simpel te combineren.</p>
        
        <h2>Ongeordende lijst</h2>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        
        <h2>Geordende lijst</h2>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        
        <p>We kunnen onze tekst ook nog <u>onderstreept</u> maken weet je nog?<br />
        Of beginnen met onze tekst op de volgende regel ;)</p>
        
        <img src="jouw-afbeelding.jpg" alt="Jouw Afbeelding" />
        
        <table>
            <tr>
                <td><b>Product</b></td>
                <td><b>Omschrijving</b></td>
            </tr>
            
            <tr>
                <td>Kabel 50m</td>
                <td>3G VOB 2,5mm²</td>
            </tr>
            
            <tr>
                <td>Kabel 100m</td>
                <td>3G VOB 1,5mm²</td>
            </tr>
        </table>
    
        <a href="https://www.minatica.be/">Minatica.be</a>
    
    </body>
    
    </html>
    Nu valt er ons bij dit stukje HTML iets duidelijks op: we volgen namelijk een structuur. Een tag die we eerst openden moeten we ook gelijkaardig sluiten. Om dit duidelijk te maken:

    Correct:
    HTML-code:
    <p><b><u>Een vette tekst die eveneens onderstreept is.</u></b></p>
    Fout:
    HTML-code:
    <p><b><u>Een vette tekst die eveneens  onderstreept is.</p></u></b>
    Tags die dus als laatste geopend werden zullen dus ook als eerste gesloten worden. Hopelijk is het voor u nu duidelijk.

    Opdracht

    Zo, hiermee hoop ik dat je een basis HTML te pakken hebt. Maar om dit even in te oefenen maken we er even een oefening voor.
    De bedoeling is dat je het volgende probeert te maken in HTML met de tags die we geleerd hebben zou dit moeten lukken.

    De opdracht.

    (De oplossing, eerst zelf proberen he!)

    © 2010 Kurt0015 voor minatica.be