HTML leren

Japabako

HTML leren

De afkorting HTML staat voor 'HyperText Markup Language'. HyperText is digitale tekst waarin hyperlinks voorkomen. Met Markup worden de HTML tags bedoeld die de bronbestanddelen voor een webpagina of HTML document aanduiden of markeren. Deze gemarkeerde bronbestanddelen kunnen in de vorm van een HTML bestand, als primair bronbestand voor het weergeven van een webpagina of HTML document, aan een browser beschikbaar worden gesteld. In een HTML bestand kunnen software programma's zoals browsers de nodige informatie betreffende een weer te geven webpagina of HTML document vinden. Een HTML bestand kan je maken met een HTML editor. Wil je HTML gaan leren, dan adviseren wij om een eenvoudige HTML editor met syntaxis accentuering zoals bijvoorbeeld Notepad++, TextEdit, Gedit, Kate of Mousepad te gebruiken.

HTML is vooral bedoeld om HTML documenten en webpagina's te voorzien van hyperlinks, document structuur met de daarbij passende opmaak, document meta data, voorgrond afbeeldingen en koppelingen naar aanvullende bronbestanden. Voor meer mogelijkheden aangaande de opmaak en pagina indeling van webpagina's en HTML documenten wordt tegenwoordig meestal CSS code gebruikt. Het leren toepassen van CSS code is pas zinvol wanneer je over de nodige kennis van HTML beschikt.

HTML 4.01, XHTML 1.0 en HTML5 leren

HTML5 bestaat uit het beste van HTML 4.01 en XHTML 1.0, ook worden met HTML5 nieuwe zaken geïntroduceerd zoals onder andere de header, main, section, article, footer, nav, audio, figure, canvas en video elementen. XHTML 1.0 is in grote lijnen de HTML 4.01 versie die ook aan syntaxis van XML moet voldoen. De web standaard voor HTML volgens ISO/IEC 15445:2000 refereert aan de W3C aanbevelingen voor HTML 4.01 strict.

Leer volgens W3C HTML aanbevelingen

De meest bekende grondlegger van het World Wide Web, Tim Berners-Lee bedacht en ontwikkelde begin jaren 90 op basis van SGML de hypertext ondersteunende tekst markeertaal HTML, ook is hij de oprichter van het W3C . De in het verleden door het World Wide Web Consortium aanbevolen HTML versies voor een web standaard waren, HTML 3.2, HTML 4, HTML 4.01, XHTML 1.0, XHTML 1.1, HTML5 en de huidige meest recente aanbevolen versie is HTML5.1. De HTML versie waarmee je een webpagina wilt maken kan je boven het HTML root element in de pagina bron declareren. Als voorbeeld volgt hier de document type aanduiding van HTML5, <!doctype html>

HTML en CSS

Bij het maken van HTML documenten of webpagina's gebruik je HyperText Markup Language voor het structureren van de HTML document of webpagina inhoud, deze inhoud zal dan door een browser normaliter worden weergeven met een sobere maar passende overzichtelijke opmaak en pagina indeling. Wil je een van de wat sobere standaard HTML weergave afwijkende presentatie van een HTML document of webpagina, leer dan over het toepassen van CSS de opmaaktaal voor het presenteren van webpagina's. Het leren van Cascading Style Sheets, is pas zinvol wanneer je daarvoor over voldoende kennis van HTML beschikt.

HTML basis kennis

HTML bestand

Hypertext markup language is een code waarmee je de inhoud die is bestemd voor webpagina's afbakend, deze met HTML code afgebakende inhoud sla je op in een HTML bestand dat je onder andere kan maken met een eenvoudige platte tekst editor welke geschikt is voor het opslaan van HTML bestanden. Een HTML bestand moet worden opgeslagen met de .html of .htm extensie als laatste deel van de bestandsnaam. De HTML code zelf, zal door een browser niet worden weergegeven wanneer een HTML bestand wordt geopend als een webpagina of HTML document. Bekijk dit video bestand over het opslaan van tekst in een HTML bestand

HTML tags

<p> Element inhoud is hier alinea tekst tussen paragraph tags </p>

HTML code bestaat uit een gegeven verzameling HTML tags, deze tags zijn opgebouwd met als eerste het kleiner dan teken, vervolgens de tag naam en daarna het groter dan teken. Een HTML begin-tag plaatsen we voor de inhoud die we willen afbakenen en na deze inhoud plaatsen we eenzelfde tag als de begin-tag en maken van deze tag een eind-tag door direct voor de tag naam een forward slash te plaatsen.

HTML elementen

<p> Deze alinea tekst regel wordt hier <br> afgebroken. </p>

Het geheel van de HTML begin tag, eind tag en de daarmee afgebakende inhoud noemen we een HTML element. Een HTML element heeft de zelfde naam als de tag benaming van dat element. In HTML komen ook de lege elementen voor, deze elementen worden niet gesloten met een tweede tag. Een voorbeeld van een HTML element zonder inhoud is het HTML element voor een line break dat met een <br> tag de plaats tussen twee woorden aangeeft waar een tekst regel moet worden afgebroken om op een nieuwe regel verder te gaan in de webpagina weergave.

HTML elementen nesten

Geneste HTML elementen zijn elementen binnen begin en eind tags van andere HTML elementen. Het head en het body element worden in het HTML root element genest. Document meta data elementen zoals bijvoorbeeld het title element worden genest in het head element. De elementen bestemd voor het rechtstreeks weergeven van de eigenlijke webpagina inhoud worden genest in het body element.

<!DOCTYPE html> <html> <head> <title> Titel tekst </title> </head> <body> <h1> Kop tekst </h1> <h2> Alinea kop </h2> <p> Alinea tekst </p> </body> </html>

HTML kop en alinea tekst

Het afbakenen van kop tekst doe je in een HTML bestand met heading tags. Alinea's afbakenen doe je met de paragraph tags. De gemaakte heading en alinea elementen zijn bedoeld voor het rechtstreeks weergeven van hun inhoud op de webpagina en worden dus genest in het body element.

HTML lijsten maken

Voor het opsommen van informatie in een lijst maak je in HTML gebruik van de unordered list, de ordered list en of de definition list elementen, de daarin geneste list item elementen of de definition term en definition data elementen worden zo als specifieke lijst inhoud herkend en volgens de standaard instellingen van de webbrowser als lijst weer gegeven op de webpagina.

<ul> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

HTML attributen

HTML attributen kan je bij diverse HTML elementen in de begin tag na de tag-naam toevoegen. Met HTML attributen heeft men de mogelijkheid om aanvullende informatie aan het betreffende HTML element mee te geven.

Attribuut in de begin-tag:
<tag-naam attribuut> HTML element inhoud </tag-naam>

Attribuut in het lege element:
<tag-naam attribuut >

Attribuut syntaxis:
attribuut-naam = "waarde"

src = "internet adres en naam van het bedoelde bron bestand"
width ="300"
alt = "Alternatieve tekst"
href = "internet adres en naam van het bedoelde bestand"
title = "Tekst voor weergave in tekstvlaggen"
border = "1"

HTML afbeeldingen

Een afbeelding kan je een plaats op een webpagina toewijzen door middel van het markeren met de HTML image tag, het noodzakelijke source attribuut wordt dan toegevoegd voor de verwijzing naar de locatie en naam van het bedoelde afbeeldings-bestand. Voor wanneer de afbeelding niet weergegeven wordt is het gewenst alternatieve tekst weer te geven, daarvoor maak je gebruik van het alternate attribuut. De breedte en hoogte van een afbeelding worden standaard opgegeven met het aantal pixels in de width en height attributen in de image tag.

<img src="adres en naam van afbeeldingsbestand" width="100" height="200" alt="Alternatieve tekst voor de ontbrekende afbeelding" >

HTML hyperlink

Hypertext is tekst waarin hyperlinks voorkomen. Een hyperlink kan je maken door tekst of HTML elementen zoals bijvoorbeeld image elementen te markeren met anchor tags, in de begin anchor tag moet dan worden opgenomen het hyperlink reference attribuut met als waarde de verwijzing naar de locatie en naam van het bedoelde bestand waarna vervolgens meestal middels klikken naar gelinkt kan worden.

<a href="adres en naam van het bedoelde bestand" >Klik hier</a>

<a href="url" ><img src="adres en naam van afbeeldingsbestand" width="100" height="200" alt="Alternatieve tekst" ></a>

HTML tabellen

Het HTML table element is bedoeld voor het markeren ordenen en structureren van tabel inhoud. De HTML table tags markeren het begin en einde van een tabel. Met de table row tags markeer je de rijen van een tabel. De table data tags markeren de tabel cellen die vervolgens de tabel kolommen vorm geven. De table head tags gebruik je om de rijen en of kolommen van de tabel van een koptekst te voorzien.

<table> <tr> <th>kop</th> <th>kop</th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table>

HTML table borders worden door de meeste browsers, standaard niet weergegeven. De instucties voor het weergeven van de table borders werden in het verleden gegeven met het HTML border attribuut maar CSS code gebruiken voor het weergeven van de borders heeft tegenwoordig meestal de voorkeur. Lees meer over HTML tabel borders.

Update uw browser

Robohost web-hosting