Deze serie handleidingen leidt u door het maken en verder aanpassen van deze website met behulp van HTML, de standaard opmaaktaal die wordt gebruikt om documenten in een webbrowser weer te geven. Ervaring met coderen is niet nodig, maar we raden u aan bij het begin van de serie te beginnen als u de demonstratiewebsite wilt nabouwen.
Aan het eind van deze serie zou u een website moeten hebben die klaar is om in de cloud te worden ingezet en een basiskennis van HTML. Als u weet hoe u HTML moet schrijven, legt u een sterke basis voor het leren van aanvullende front-end webontwikkelingsvaardigheden, zoals CSS en JavaScript.
In deze tutorial maakt u kennis met een elementair HTML-document en leert u hoe u de broncode van een HTML-document in een browser kunt bekijken.
HTML wordt gebruikt om een document te markeren met instructies die een browser vertellen hoe de inhoud van het document moet worden weergegeven en geïnterpreteerd. HTML kan de browser bijvoorbeeld vertellen welke tekstinhoud moet worden geïnterpreteerd als een kop en welke tekstinhoud moet worden geïnterpreteerd als paragrafen. HTML wordt ook gebruikt om afbeeldingen toe te voegen en links toe te wijzen aan tekst en afbeeldingen. Deze instructies worden doorgegeven via HTML-tags, die als volgt worden geschreven: <tagname>. Veel, maar niet alle tags, gebruiken een openings- en een sluitings-tag om de inhoud te omhullen die ze wijzigen.
Om een idee te krijgen van hoe deze tags worden gebruikt, laten we eens een stukje HTML-code bekijken. De onderstaande HTML-code laat zien hoe HTML-tags worden gebruikt om tekst te structureren en links en afbeeldingen toe te voegen. Maak je geen zorgen als je de tags niet meteen begrijpt-we zullen die in de volgende tutorial bestuderen.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Deze HTML-code wordt in de browser als volgt weergegeven:
Je zou nu moeten begrijpen hoe de HTML-voorbeeldcode in een browser wordt weergegeven. Nu gaan we leren hoe we de broncode van een webpagina kunnen bekijken met behulp van een browsertool.
De broncode van een webpagina bekijken
Bijna elke webpagina die je tegenkomt gebruikt HTML om HTML-pagina’s te structureren en weer te geven. U kunt de broncode van elke webpagina bekijken met behulp van een webbrowser als Firefox of Chrome. In Firefox gaat u naar het menu-item “Extra” in het bovenste menu en klikt u op de volgende manier op “Webontwikkelaar/Pagina bron”:
Op Firefox kunt u ook de sneltoets Command-U gebruiken om de broncode van een webpagina te bekijken.
Op Chrome is het proces zeer vergelijkbaar. Navigeer naar het bovenste menu-item “Weergeven” en klik op “Ontwikkelaar/Bron weergeven”. U kunt ook de sneltoets Option-Command-U gebruiken.
Probeer de broncode te bekijken van de demo website die we in deze tutorial serie zullen bouwen. Je zou een pagina moeten krijgen met veel meer HTML-tags dan ons voorbeeld hierboven. Schrik niet als het overweldigend lijkt. Aan het eind van deze zelfstudieserie moet u beter begrijpen hoe u HTML-broncode moet interpreteren en hoe u HTML kunt gebruiken om uw eigen websites te bouwen en aan te passen.
Note: zoals hierboven vermeld, kunt u de broncode van elke webpagina inspecteren met tools van de webbrowser Firefox of Chrome. Probeer de code van een paar van uw favoriete websites te inspecteren om een idee te krijgen van de onderliggende code die webdocumenten structureert. Hoewel de broncode van deze sites waarschijnlijk meer talen zal bevatten dan HTML, zal het leren van HTML je voorbereiden op het leren van andere talen en raamwerken voor het maken van websites als je dat later wilt.