Een HTML pagina schrijven

PDF download Pdf downloaden
PDF download Pdf downloaden

HTML (HyperText Markup Language) is een standaardtaal voor het ontwerpen van webpagina's. Het is ontworpen om een gemakkelijke en veelzijdige programmeertaal te zijn. Zo ongeveer elke pagina op internet is ontworpen met de een of andere vorm van deze code (ColdFusion, XML, XSLT). HTML is gemakkelijk om onder de knie te krijgen, maar kan veel tijd kosten om te leren als je werkelijk alle functies van de taal wilt verkennen. Om je webpagina's wat meer kleur te geven en spannender te maken is het verstandig om verder te gaan met het leren van CSS, zodra je de basis hebt geleerd van het maken van een eenvoudige HTML-pagina.

Deel 1
Deel 1 van 4:

De opzet van een document

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    NotePad++ is een goede optie die gratis kan worden gedownload. Je kunt met de meeste tekstverwerkers wel HTML schrijven, maar het is beter om software te gebruiken die speciaal bedoeld is voor het coderen. Daarnaast plaatsen meer complexe tekstverwerkers zoals Word redundante code in je HTML-pagina. [1]
    • TextEdit is niet aan te bevelen, omdat het je document vaak zal opslaan in een formaat dat door de browser niet als HTML wordt herkend.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Selecteer File → Save As in het hoofdmenu. Verander de extensie van het bestand in ".html" of ".htm". Bewaar het op een locatie waar je het gemakkelijk kunt terugvinden.
    • Deze opties zijn allemaal gelijk, er is geen verschil.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dubbelklik op het bestand en het opent automatisch als blanco pagina in je browser. Je kunt ook een browser openen, zoals Firefox of Internet Explorer en File → Open File gebruiken om het document te selecteren.
    • Deze webpagina staat nog niet online. Je kunt deze alleen op je computer bekijken.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Typ het volgende in het lege document: <strong>Hello</strong> . Sla het document op. Ververs de pagina in je browser, en als het goed is zie je het woord "Hello" bovenin het scherm staan, dik gedrukt. Elke keer als je een wijziging in de HTML wilt bekijken sla je het.html document op en ververs je het browservenster.
    • Zie je de woorden "<strong>" en "</strong>'' verschijnen in het browservenster, dan wordt het bestand beschouwd als HTML. Kijk of je fouten hebt gemaakt, en probeer anders een andere tekstverwerker of browser.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML-instructies worden geschreven tussen "tags" die de browser vertellen hoe de browser de pagina moet interpreteren en weergeven. Deze tags staan altijd tussen punthaken <zoals deze>, en worden niet getoond op de webpagina. Je hebt ze al in het bovenstaande voorbeeld gebruikt:
    • <strong> is een "start tag" of "openingstag". Alles wat na deze tag komt wordt nu gedefinieerd als "strong text" (meestal dikgedrukt aangegeven op het scherm).
    • </strong> is een "eind tag" of "afsluitende tag," wat je kunt herkennen aan het / symbool. Dit geeft aan waar het teksteffect stopt. De meeste tags hebben een eind tag nodig om te werken, dus vergeet deze niet te plaatsen.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verwijder alles in het HTML document. Neem de volgende tekst exact over (negeer de opsommingstekens). Deze HTML-code vertelt de browser wat voor type HTML je gaat gebruiken, en dat al je HTML binnen <html> en </html> tags zal staan. [2]
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • </html>
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML-documenten worden verdeeld in twee secties. De "head" sectie is voor speciale informatie, zoals de titel van de webpagina. De "body" bevat de daadwerkelijke inhoud van de webpagina. Voeg beide toe aan je document, en vergeet de eind tags niet. De nieuwe tekst om toe te voegen staat dikgedrukt:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • </head>
    • <body>
    • </body>
    • </html>
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    De meeste tags die in de head komen te staan zijn niet belangrijk voor de beginner om te leren. De titel tag is evenwel gemakkelijk om te gebruiken en is bepalend voor wat wordt getoond als titel van je webpagina in de browser. Plaats de titel binnen de bijbehorende tags, welke binnen de head tags worden geplaatst:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>Mijn eerste HTML-pagina.</title>
    • </head>
    • <body>
    • </body>
    • </html>
    Advertentie
Deel 2
Deel 2 van 4:

De opmaak van tekst

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    We gaan nu alleen bezig met het deel binnen de body tags. De andere tekst blijft gewoon zoals je die hebt geschreven, maar we korten het voorbeeld wat in door niet alles elke keer te herhalen. Schrijf wat je wilt tussen de <body> en </body> tags, en dit verschijnt in je browsers als de inhoud van de pagina. Bijvoorbeeld:
    • <body>
    • Ik leer werken met HTML door het volgen van een wikiHow.
    • </body>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-10-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-10-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Deel je pagina in met kop tags, welke de browser vertellen om tekst groter op het scherm af te drukken. Deze worden ook gebruikt door search engine bots en andere tools, om vast te stellen waar je webpagina over gaat en hoe deze is ingedeeld. <h1> </h1> is de grootste kop, en je kunt minder grote maken, helemaal tot aan <h6> </h6>. Probeer ze uit op je pagina:
    • <body>
    • <h1>Welcome op Mijn Webpagina.</h1>
    • Ik leer werken met HTML door het volgen van een wikiHow.
    • <h3>Mijn doelen voor vandaag:</h3>
    • <h5>Afgeronde doelen:</h5>
    • Leer werken met koppen.
    • <h5>Nog niet afgeronde doelen:</h5>
    • Leer meer tags voor het opmaken van tekst.
    • </body>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-11-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-11-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Je hebt de "strong" tag al gehad, maar er zijn veel meer manieren om je tekst op te maken. Probeer de volgende voorbeelden maar eens uit, waarbij je ook meerdere tags rond dezelfde tekst kunt plaatsen. Vergeet niet om eind tags toe te voegen!
    • <strong> Belangrijke tekst, vetgedrukt.</strong>
    • <em> Benadrukte tekst, schuingedrukt.</em>
    • <small> Iets kleinere tekst dan normaal. Deze schaalt automatisch mee, indien gebruikt als kop. [3] </small>
    • <del>Tekst die moet worden verwijderd, getoond met een streep erdoor.</del>
    • <ins>Tekst die later is ingevoegd, onderstreept.</ins>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Het is je misschien opgevallen dat het niet volstaat om op "enter" te drukken, wil je dat de tekst verder gaat op een nieuwe regel. De volgende tags creëren alinea's en regeleindes, of delen je tekst op andere manieren in:
    • <p> Kort voor "paragraph" (alinea). Hiermee wordt alle tekst binnen een alinea geplaatst en gescheiden van de tekst eronder en erboven.</p>
    • <br> Hiermee creëer je een regeleinde. Plaats hierbij geen eind tag, omdat er niets gebeurt met de inhoud van de pagina. Gebruik dit voor gedichten en adressen, maar niet voor alinea's. [4]
    • <pre> Als je tekst zeer precies wilt plaatsen, dan zal deze tag ervoor zorgen dat elke letter exact dezelfde breedte krijgt en worden spaties en regeleindes exact overgenomen, zoals je ze hebt getypt. [5] </pre>
    • <blockquote> Hiermee geef je een citaat aan.</blockquote> Je kunt de bron naderhand omschrijven met de <cite>cite tag</cite>.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Comment tags worden in de browser niet getoond. Ze bieden je de mogelijkheid om opmerkingen te plaatsen over de werking van het HTML document, zonder dat dit van invloed is op de inhoud. <!---- Schrijf je opmerkingen binnen deze tags. ---> Voeg geen eind tag toe.
    • Tags die geen eind tags nodig hebben heten "lege of empty tags."
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-14-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-14-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    De beste manier om deze tags te onthouden is door ze te gebruiken in je webpagina. Hier volgt een voorbeeld met alle tags die hierboven zijn beschreven. Probeer te voorspellen hoe dit er uit gaat zien in de browser, en kopieer dit vervolgens in je HTML-document om te controleren of je het goed hebt.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • <head>
    • <title>Mijn eerste HTML-pagina.</title>
    • </head>
    • <body>
    • <h1>Welkom op mijn webpagina.</h1>
    • Ik hoop dat je de site leuk vindt!<p><strong>Ik heb er m'n best op gedaan.</strong>
    • <h2>Deel 1: Hoe ik HTML heb ontdekt</h2>
    • <!---Notitie vor mezelf: onthoud dat "h1" een grotere kop is dan "h2"--->
    • Ik ben nu <del>één</del> <ins>twee</ins> uur HTML aan het leren, dus kun je me wel een expert noemen.
    • </body>
    • </html>
    Advertentie
Deel 3
Deel 3 van 4:

Het toevoegen van koppelingen en afbeeldingen

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tags kunnen meer gegevens bevatten, de zogeheten "attributen" (attributes). Dit is code binnen de tags zelf, in de vorm attribuut-name="specific value ". Bijna elke HTML tag kan een title-attribuut bevatten:
    • <p title="Introduction">Hier komt een introductie.</p> geeft de alinea de titel "Introduction," welke verschijnt als je met je muis boven de alinea zweeft in de browser.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-16-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-16-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gebruik de <a> </a> tag om een koppeling of ook wel hyperlink te maken naar een andere webpagina. Voeg de URL van de webpagina in, om een link te maken met behulp van het href-attribuut. Hier volgt een voorbeeld van code waarmee je een koppeling maakt naar de webpagina die je nu aan het lezen bent:
    • <a href="http://www.wikihow.com/Een-HTML-pagina-schrijven">Bezoekers van je website kunnen op deze tekst klikken om naar die website te gaan.</a>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-17-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-17-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Een ander attribuut wat je in bijna elke HTML-tag kunt gebruiken is het " id " element. Schrijf binnen een tag id="example" of een andere naam, maar wel zonder spaties. [6] Dit heeft geen zichtbaar effect, maar gebruiken we in de volgende stap.
    • Bijvoorbeeld, voeg het volgende toe aan je document: <p id="example">Deze alinea zal worden gebruikt als voorbeeld van de werking van het id-attribuut.</p>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-18-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-18-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Nu kunnen we de hyperlink tag, <a> </a>, gebruiken om een koppeling te maken naar een ander deel van de webpagina. In plaats van een URL, gebruiken we het #-symbool, gevolgd door de waarde van de id waar we naartoe linken. Bijvoorbeeld, <a href="#example"> Deze tekst vormt een link naar de alinea met het id "example." </a>
    • Alle HTML-waarden zijn hoofdlettergevoelig. [7] "#EXAMPLE" en "#example" linken naar dezelfde locatie.
    • Als je pagina kort genoeg is om alles in een keer te laten zien, dan kan het zijn dat je niets bijzonders opmerkt als je op de link klikt in de browser. Maak het venster kleiner tot er een schuifbalk verschijnt, en probeer het dan nogmaals.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-19-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-19-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    De <img> tag is een lege tag, wat betekent dat er geen eind tag nodig is. Alle informatie die de browser nodig heeft om de afbeelding te tonen wordt toegevoegd middels attributen. [8] Hier volgt een voorbeeld waarmee je het wikiHow logo op het scherm krijgt, gevolgd door een omschrijving van elk attribuut:
    • <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="wikiHow logo">
    • Het src=" " attribuut vertelt de browser wat de locatie is van de afbeelding. (Let wel op dat het meestal als not done wordt beschouwd om afbeeldingen van de site van iemand anders te plaatsen – en de afbeelding zal verdwijnen zodra de andere site offline gaat of de afbeelding aldaar wordt verwijderd.)
    • Het style=" " attribuut kan veel dingen doen, maar meestal wordt het gebruikt voor het instellen van de breedte en hoogte van afbeelding in pixels. (Je kunt in plaats daarvan ook de attributen width=" " en height=" " gebruiken, maar dit kan leiden tot vreemde resultaten met de grootte als je ook gebruik gaat maken van CSS. [9] )
    • Het alt=" " attribuut is een korte omschrijving van de afbeelding, welke de gebruiker zal zien als de afbeelding niet wil laden. Dit wordt gezien als een goede gewoonte, ten behoeve van blinden en slechtzienden. [10]
    Advertentie
Deel 4
Deel 4 van 4:

Meer leren en je pagina's online zetten

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-20-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-20-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    HTML validatie controleert je pagina op fouten in de code. Als je webpagina niet op de juiste manier wordt weergegeven, kan validatie helpen bij het opsporen van fouten. Het kan je ook meer leren over HTML, door code te herkennen die wel er goed uitziet in de browser, maar niet voldoet aan de HTML standaard. Het gebruiken van niet standaard HTML zorgt er niet voor dat je site onbruikbaar wordt, maar kan wel zorgen voor problemen met andere browsers.
    • Probeer een gratis online validatie-service zoals W3C of zoek een andere HTML 5 validator.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-21-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-21-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Er zijn nog veel meer HTML tags en attributen, en veel plaatsen waar je die kennis kunt opdoen:
    • Kijk eens bij w3schools en HTML Dog voor meer tutorials en een uitgebreide lijst met tags.
    • Zoek een webpagina die je er mooi uit vindt zien en gebruik de functie voor het bekijken van de broncode ("View Page Source") om de HTML zelf te kunnen bekijken. Kopieer deze naar je eigen document en probeer te ontdekken hoe het werkt.
    • Lees andere artikelen over het maken van tabellen in HTML, en gebruik meta tags om beter gevonden te kunnen worden door zoekmachines, of gebruik div en span tags samen met css opmaak.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-22-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-22-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Kies een hostingdienst, en upload zoveel HTML pagina's als je wilt naar je webdomein. Hiervoor gebruik je een FTP-programma, of gebruik hiervoor de service van de webhost.
    • Wanneer je koppelingen maakt naar pagina's of afbeeldingen op je eigen site, dan is het niet nodig om het volledige adres te gebruiken. Bijvoorbeeld, je hebt een domeinnaam www.superskilledhtmlcoder.com, dan <a href="/journal/monday.html"> zal de tekst binnen deze tags</a> een koppeling vormen naar het adres "www.superskilledhtmlcoder.com/journal/monday.html"
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-23-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-23-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Als je HTML-pagina er wat kaal uitziet, probeer dan de basis van CSS te leren zodat je kleuren en lettertypen kunt toevoegen en meer controle krijgt over de plaatsing van de elementen binnen een pagina. Het linken van een CSS "stylesheet" naar de HTML-pagina zorgt er bovendien voor dat je snel wijzigingen aan kunt brengen, waardoor automatisch de opmaak van alle tekst binnen een bepaalde tag wordt aangepast. Speel wat met het eenvoudige stylesheet zoals je hier kunt doornemen, of duik dieper in de materie door deze HTML Dog's CSS guide te lezen.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-24-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-24-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    JavaScript is een programmeertaal waarmee je meer functionaliteit kunt toevoegen aan je HTML pagina. JavaScript wordt ingevoegd tussen de start en eind tags <script> </script>, en kan gebruikt worden voor het invoegen van interactieve knoppen, het berekenen van wiskundige problemen en nog veel meer. Leer meer van de w3c voorbeelden .
    Advertentie

Tips

  • Het doctype zoals dat in deze tutorial is gebruikt, "loose HTML 4.0.1 transitional", is een gemakkelijke indeling voor beginners. [11] Gebruik (<!DOCTYPE html>) in plaats daarvan, zodat de browser de pagina interpreteert als strict HTML 5, wat wordt aanbevolen als standaard (hoewel minder vaak gebruikt).
Advertentie

Waarschuwingen

  • HTML is ervoor ontworpen om content binnen een universeel formaat te plaatsen. Het is niet bedoeld voor de opmaak van je webpagina, zoals de achtergrondkleur en de exacte plaatsing van elementen. Hoewel er wel tags zijn die je kunt gebruiken om dit aan te geven, is het veel beter om daar CSS voor te gebruiken, zodat de opmaak makkelijker is om consistent te maken en te controleren.
Advertentie

Benodigdheden

  • Een eenvoudige tekstverwerker zoals NotePad (Kladblok) of TextEdit
  • Een webbrowser, zoals Internet Explorer of Mozilla Firefox
  • (Eventueel) Een HTML-editor zoals Adobe Dreamweaver, Aptana Studio of Microsoft Expression Web

Gerelateerde artikelen

XML bestanden openen
De kleur van tekst in HTML veranderen
Spaties in HTML toevoegen
De broncode van een webpagina bekijken
Commentaar toevoegen aan HTML
De lengte en breedte van een afbeelding instellen met HTML
Notepad gebruiken
Een computerprogramma maken
Een onschuldig virus creëren
De hex code van een kleur achterhalen op je computer
Gegevens toevoegen aan een draaitabel in Excel
Een php‐bestand openen
Programmeren in Python
Een SQL Server database maken
Advertentie

Bronnen

  1. ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
  2. ↑ http://www.w3.org/QA/Tips/Doctype
  3. ↑ HTML Tutorials
  4. ↑ http://www.w3schools.com/tags/tag_br.asp
  5. ↑ http://www.w3schools.com/tags/tag_pre.asp
  6. ↑ http://www.w3schools.com/tags/att_global_id.asp
  7. ↑ http://www.w3schools.com/tags/att_global_id.asp
  8. ↑ http://htmldog.com/guides/html/beginner/images/
  9. ↑ http://www.w3schools.com/html/html_images.asp
  1. ↑ http://www.w3schools.com/html/html_images.asp
  2. ↑ http://www.htmlbasictutor.ca/doctype-declaration.htm

Over dit artikel

In andere talen
Deze pagina is 8.407 keer bekeken.

Was dit artikel nuttig?

Advertentie