HTML Handleiding voor Beginners

Als je webmaster wilt worden en wilt leren hoe je een website maakt, vind je het vooruitzicht om HTML onder de knie te krijgen misschien nogal ontmoedigend.

Dit is echter iets dat niet vermeden kan worden, aangezien de overgrote meerderheid van de landingspagina’s van websites die je bezoekt, geschreven en gestructureerd zullen zijn met behulp van HTML-elementen. In feite wordt HTML nu door meer dan 74% van alle bekende websites gebruikt, terwijl deze taal ook helpt om alles te verbeteren, van het ontwerp van uw site tot de kwaliteit van de inhoud die deze bevat.

In deze gids zullen we de basisprincipes van HTML en de mogelijke toepassingen ervan verkennen, voordat we voorbeelden bekijken van de afzonderlijke elementen die u gebruikt bij het coderen van uw website.

Wat is HTML?

In eenvoudige bewoordingen vertegenwoordigt HTML de standaard opmaaktaal voor het online maken van webpagina’s. Het staat voor Hyper Text Markup Language, en de belangrijkste functie ervan is het vaststellen van de structuur, lay-out en presentatie van afzonderlijke landingspagina’s. Hoewel webbrowsers HTML-taal niet rechtstreeks weergeven, speelt deze een centrale rol bij het creëren van een zichtbare, toegankelijke en gebruiksvriendelijke site.

HTML wordt ook ondersteund door een aantal afzonderlijke elementen, waarmee geleidelijk webpagina’s worden opgebouwd, de presentatie van inhoud wordt gestructureerd en uw website tot leven wordt gebracht. Deze elementen worden gemaakt en vervat in ’tags’, die afwisselende stukken inhoud definiëren, zoals koppen, paragrafen en soortgelijke voorbeelden.

We zullen deze elementen en hun opbouw hieronder in meer detail verkennen, terwijl we ook zullen bekijken hoe ze kunnen worden gepersonaliseerd om kleur, links en variabele typografie op uw website te introduceren.

Waar wordt HTML gebruikt?

Zoals we kunnen zien, is de meest voorkomende toepassing van HTML het ontwerp van de individuele landingspagina’s die uw website vormen. Dit is echter niet de enige toepassing van de populaire coderingstool, het begrijpen van de aanvullende toepassingen zal je helpen om het meeste uit de taal te halen als een nieuwe webmaster. Dus, hier zijn enkele van de verdere manieren waarop HTML kan worden toegepast:

• Creëer aanpasbare elementen binnen een bestaande pagina. Als u van plan bent reacties op blogberichten of de publicatie van door gebruikers gegenereerde inhoud op uw website toe te staan, kunt u HTML-codefragmenten gebruiken om dit mogelijk te maken. Deze elementen zullen gebruikers in staat stellen trefwoorden te benadrukken, links in te sluiten en opmerkingen op te maken, afhankelijk van de beperkingen die u als moderator instelt.
• Maak extra inhoud voor e-mail. E-mail maakt ook gebruik van HTML als de taal voor rich text-berichten, die links, tekst en een verscheidenheid aan andere elementen bevatten die niet kunnen worden weergegeven in platte tekst alleen. Als u dus een ebook dat betrekking heeft op uw website via e-mail wilt delen, kunt u HTML gebruiken om het effect van uw bericht te optimaliseren.
• Offline helpdocumenten begrijpen die op uw computer zijn geïnstalleerd. Interessant is dat HTML wordt gebruikt als de indeling voor computerondersteunde helpdocumenten die offline toegankelijk zijn. Basiskennis van HTML kan u dus helpen problemen met uw hardware te begrijpen en sneller op te lossen, wat er op zijn beurt voor kan zorgen dat u uw website sneller kunt herstellen in gevallen waarin deze offline is gegaan.

HTML-pagina-structuur

Voordat u een html-pagina kunt opbouwen, moet u eerst de basis hebben gelegd.

Typisch bestaat een pagina uit drie structurele elementen:

1. Header: De header bevat inhoud die relevant is voor alle pagina’s op uw site, zoals een logo of websitenaam, en een navigatiesysteem. De header is te zien op elke pagina.
2. Main body: Dit neemt het grootste gebied op een webpagina in beslag. Het bevat inhoud die specifiek is voor de pagina die wordt bekeken.
3. Footer: Footer inhoud bevat meestal contactinformatie, een verzendadres, of wettelijke mededelingen. Net als de koptekst verschijnt de voettekst op elke pagina, maar deze staat onderaan.

Zo zien deze structurele basiselementen eruit wanneer ze samenkomen:

Hier is nog een voorbeeld, waarbij we gebruikmaken van header-tags en de paragraph-tag om de inhoud esthetisch te structureren. Bovendien hebben we een voettag toegevoegd voor inhoud onder de hoofdtekst van een pagina:

HTML-tags

Het startpunt voor elke HTML-code zijn individuele tags, die kunnen worden gebruikt om alle cruciale elementen te maken en uw webpagina’s te helpen structureren.

Hieronder bekijken we de meest voorkomende tags voordat we onderzoeken hoe ze kunnen worden gebruikt om specifieke, on-page elementen te genereren:

Heading tags

Alle online documenten, inclusief webpagina’s, beginnen met een heading. Deze worden opgebouwd met HTML-tags, waarbij de taal momenteel tot zes elementen van verschillende grootte toestaat, waarmee u uw inhoud ook kunt structureren met extra titels, ondertitels en vetgedrukte regels tekst. Om uw koptekst te beginnen, voegt u eenvoudig de relevante tekst toe met de <h1> , <h2> , <h3> , <h4> , <h5> of <h6> tag, afhankelijk van de gewenste grootte.

U moet dan een afsluitende tag aan het eind van de koptekst toepassen om de tekst in te sluiten, en deze wordt als volgt in HTML-indeling weergegeven:

Eenmaal bevestigd, zal dit zich vertalen in de volgende esthetiek op de landingspagina van uw website:

Hier zijn de verschillende groottes van de variabele koppen duidelijk te zien, net als het feit dat de browser een regel voor en na de kop toevoegt. U zult ook zien dat de afsluitende tag aan het eind van de koptekst een iets andere esthetiek heeft, maar dit zal in het volgende hoofdstuk worden behandeld als we kijken naar het gebruik van tags om specifieke elementen te definiëren.

Paragraaf tags

Een soortgelijk principe wordt toegepast op beginnende paragraaf tags, die worden weergegeven door <p>. Hiermee kunt u uw inhoud structureren en onderverdelen in relevante alinea’s, wat op zijn beurt leidt tot een gemakkelijkere en meer naadloze leeservaring. Nogmaals, de <p> tag moet aan het begin van de relevante tekst worden geplaatst, voordat de alternate closing tag aan het eind wordt toegepast om het effect te voltooien. In tegenstelling tot heading-tags zijn er echter geen numerieke verschillen die de grootte van de tekst in de alinea kunnen veranderen.

buiten de HTML-indeling om zal de tekst op uw voltooide webpagina als volgt worden opgedeeld:

Lijnonderbrekingstags

De eerste voorbeelden zijn de meest elementaire HTML-tags, maar er zijn er nog meer die een andere opmaak en alternatieve afsluitingen gebruiken. Neem bijvoorbeeld regeleindes, die een onderscheid maken wanneer tekstregels worden afgebroken en op de volgende regel worden voortgezet. Er is een wezenlijk verschil tussen regeleinden en alinea’s op het gebied van HTML, omdat alinea’s standaard blokelementen zijn die tekst bevatten, terwijl alinea’s een scheiding aanbrengen binnen een bestaand <p>-element.

Om die reden vertegenwoordigen regeleinden een leeg element in HTML en worden ze daarom niet gedefinieerd door openings- of sluitings-tags. In plaats daarvan worden ze weergegeven door de tag <br />, die in bestaande <p>-elementen kan worden ingevoegd om tekst op te breken en mogelijk belangrijke stukken informatie te markeren. De enkele spatie tussen het teken <be> en de forward-slash is van cruciaal belang, omdat de tag anders niet herkenbaar is in HTML-indeling.

Eenmaal toegepast, zal dit de tekst als volgt onderverdelen:

Zoals u kunt zien, kunt u regeleinden zo vaak als u wilt toepassen binnen een bestaand alinea-element, zolang ze maar waarde toevoegen en de informatie gemakkelijker verteerbaar maken. U ziet ook dat de tags voor het openen en sluiten van de alinea’s ongewijzigd blijven, terwijl de regeleindes worden gebruikt om de opmaak van de tekst te wijzigen.

Dit is een van de voorbeelden van hoe HTML-tags kunnen worden gebruikt om bestaande elementen te wijzigen, wat een belangrijke rol speelt bij het bepalen van de visuele opmaak van uw webpagina’s en inhoud.

Horizontale lijnen

Zo zijn er ook andere tags die kunnen worden gebruikt binnen het <p>-element of om stukken tekst op uw webpagina verder van elkaar te scheiden. Een van de meest gebruikte is de <hr> tag, die helpt om een leeg element te maken dat een visuele, horizontale lijn trekt tussen alternatieve secties van een online document. Je kunt bijvoorbeeld een lijn willen plaatsen tussen twee stukken tekst, om de lezer te heroriënteren of gewoon om een nieuw visueel element te introduceren. Zo maakt u een dergelijke onderbreking in HTML:

Hier onderstreept de onderbreking tussen de hr-tekens en de voorwaartse schuine streep de constructie van een leeg element, terwijl er wederom geen afsluitende tag nodig is om het effect te voltooien. Dit geeft het volgende beeld:

Afbeeldingstags

Afbeeldingstags vertegenwoordigen ook lege elementen in HTML, wat opnieuw betekent dat ze niet zijn voorzien van een afsluitende tag. Omdat ze alleen attributen bevatten die betrekking hebben op de URL van de afbeelding die u op de site insluit, worden ze eenvoudig gedefinieerd door de tag <img > aan het begin van het element. Deze kunnen overal op je website worden geplaatst, hoewel het ongebruikelijk is ze op te nemen in bestaande elementen zoals paragrafen of koppen. Hier ziet u hoe een typische HTML-afbeeldings-tag eruitziet:

U moet ook alternatieve tekst voor uw afbeelding opgeven, zodat mensen de afbeelding beter kunnen zien bij trage laadtijden of het gebruik van een schermlezer. Op deze manier, als de browser de afbeelding niet kan vinden, zal het de waarde van het alternate attribuut aan de kijkers tonen. Ook hier wordt de image-tag gebruikt, maar met een andere set attributen:

HTML-elementen

Vorige hebben we bekeken hoe eenvoudige HTML-tags worden gebruikt om on-page-elementen te definiëren, terwijl we ook hebben onderzocht hoe ze verder kunnen worden aangepast door lege elementen te gebruiken die tags voor afbeeldingen en regeleindes bevatten. Dit helpt ons de relatie te begrijpen die bestaat tussen tags en elementen, en hoe ze kunnen worden gebruikt om verschillende soorten inhoud op uw website te definiëren.

Terwijl alle aspecten van de HTML-taal worden weergegeven door een tag, bijvoorbeeld, moet een gedefinieerd element dat inhoud bevat zowel een begin- als een eindtag hebben. Kopteksten en paragrafen zijn dus HTML-elementen omdat zij begin- en eindtags gebruiken om de relevante tekst in te sluiten en te vergroten. Lege elementen daarentegen bevatten attributen of helemaal geen inhoud, waardoor ze binnen bestaande elementen kunnen worden gebruikt zonder dat een afsluitende tag nodig is.

Het definiëren van HTML-elementen

Bij het gebruik van voorbeelden zoals koppen en alinea’s is de juiste toepassing van begin- en eindtags van cruciaal belang. Het is de start-tag (zoals <h1> of <p>) die het element in kwestie definieert, terwijl de afsluitende tag ervoor zorgt dat dit element niet wordt voortgezet op de rest van de webpagina. Als u de afsluitende </ p>-tag niet gebruikt aan het eind van een gewenste alinea, bijvoorbeeld, verschijnt de tekst in een enkel blok dat lelijk is en uiterst moeilijk te lezen.

Alle afsluitende tags zijn identiek aan de beginnende tags, afgezien van het feit dat de eerste een voorwaartse schuine streep hebben vóór de relevante tekens. Dus in het geval van een <h1>-titel, zal de afsluitende tag </ h1> zijn, terwijl voor paragrafen u altijd </ p> zult gebruiken om de breuk in de tekst aan te geven. Dit vereist aandacht voor detail tijdens het coderen, en het is belangrijk op te merken bij het programmeren van koppen dat het nummer dat je gebruikt (zoals h1 of h2) wordt toegepast in zowel de begin- als de eind-tag.

Gebruik van geneste HTML-elementen

In dit stadium is het duidelijk te zien dat HTML-documenten en webpagina’s worden gevormd door een boom van verschillende elementen, die dienen als de bouwstenen voor een scala aan middelen. We hebben ook bekeken hoe deze elementen kunnen worden gevormd en gebruikt om online inhoud te structureren, en we zullen dit nu voortzetten door te kijken naar geneste HTML-elementen.

Net zoals lege elementen en op zichzelf staande tags (zoals <br / >kunnen worden opgenomen in gedefinieerde HTML-elementen, kunnen zogenaamde geneste elementen ook worden ondergebracht in inhoud zoals koppen en alinea’s. Voorbeelden hiervan zijn vetgedrukte en cursieve letters en onderstreepte tekst, terwijl ze kunnen worden toegepast om persoonlijkheid aan uw inhoud toe te voegen en de aandacht van de lezer op specifieke aandachtspunten te vestigen.

Vette, cursieve en doorgestreepte tekst in HTML

Laten we zeggen dat u een woord binnen een bestaand alinea-element wilt markeren. Je kunt dit bereiken door het vet te maken, met behulp van eenvoudige tags binnen het standaard <p>-element. Met HTML programmeer je dit als volgt:

Hier heeft het geneste element zowel een begin- als een eindtag, die elk een vergelijkbare opmaak hebben als die van koppen en paragrafen. Ze kunnen naadloos worden gebruikt binnen bestaande elementen, en in dit geval zal het de volgende resultaten opleveren:

Nu, laten we zeggen dat u ook de typografie van dit woord zou willen veranderen, zodat het ook cursief is. Dit kan eenvoudig worden bereikt door een ander genest element toe te voegen, dat als volgt moet worden gecodeerd:

Zoals u ziet, zijn de beginnende en sluitende cursieve tags eenvoudigweg in het <p>element opgenomen. Dit zal nu de inhoud binnen het element transformeren, zodat het er als volgt uitziet:

U kunt natuurlijk besluiten dat u dit woord liever op een andere manier wilt markeren. Daarom kunt u een alternatief genest element gebruiken, zoals doorhalen (dat wordt weergegeven door de tags <s> en </s>. Deze tags kunnen op dezelfde manier worden toegepast binnen het <p> element, en verschijnen als volgt in HTML:

In dit geval ziet de tekst er op uw document of landingspagina als volgt uit:

Dit biedt inzicht in de elementen die kunnen worden gevormd door tags, die op hun beurt de structuur van uw webpagina’s bepalen en de inhoud die ze bevatten. Niet alleen dit, maar ook lege en geneste elementen kunnen worden gebruikt om uw inhoud verder te definiëren.

HTML-attributen

Als tags de bouwstenen zijn die elementen construeren en definiëren, dan kunnen HTML-attributen worden gebruikt om hun kenmerken aan te passen (zoals stijl, kleur en taal. Alle HTML-elementen hebben kernattributen, die kerninformatie verschaffen en altijd binnen de stat tag worden gespecificeerd. Ze komen meestal in paren, dus zullen ze vaak het volgende formaat hebben: name=”value.”

In eenvoudige bewoordingen, de naam vertegenwoordigt de eigenschap die u wilt instellen, terwijl de waarde betrekking heeft op de specifieke criteria die u wilt opnemen.

Er zijn een groot aantal attributen die op uw HTML-elementen kunnen worden toegepast, maar de meest relevante voor beginnende webmasters zijn:

Het ‘lang’-attribuut

Het meest elementaire attribuut definieert de taal van het document en de elementen. Het wordt aangegeven met het ‘lang’-attribuut, en hoewel het gemakkelijk over het hoofd wordt gezien, heeft het het voordeel dat het de inhoud toegankelijker maakt voor schermlezers en zoekmachines. Het wordt gewoonlijk aan het begin van het document in de volgende opmaak weergegeven:

Na het lang-attribuut geven de eerste twee letters de taal aan (in dit geval is dat Engels). Na het koppelteken, bepalen de volgende twee letters het dialect, hoewel dit niet voor elke taal aanwezig zal zijn. Het is belangrijk dat je dit attribuut goed hebt, als je je publiek met succes wilt bereiken.

Het ‘align’ attribuut

We hebben het al gehad over de opmaak van HTML-attributen (name=”value”), en de beste belichaming hiervan komt voor wanneer je probeert de inhoud binnen je elementen uit te lijnen. U kunt bijvoorbeeld besluiten om alle paragrafen op een bepaalde pagina te centreren, waarbij de uitlijning de eigenschap is die u wenst in te stellen. Vervolgens is “centreren” de waarde van de eigenschap, hoewel je de keuze hebt om je tekst links of rechts uit te lijnen.

Dit lijnt uw <p> elementen in het midden van de pagina uit, en creëert een uniforme lay-out die past bij de specifieke aard van uw website (zie hieronder):

Het ‘href’ attribuut

Als u een zichtbare website gaat bouwen, is het belangrijk dat u zowel inkomende als uitgaande links opneemt. Het bouwen van een link portfolio die backlinks naar interne landing pages omvat is ook een levensvatbare strategie, dus je moet leren hoe deze te coderen in HTML.

HTML links worden gedefinieerd met de <a>tag, die de bestemming link bevat, samen met de gelieerde ankertekst die de URL zal huisvesten. Het is het ‘href’-attribuut dat het adres van de site specificeert, maar dit is opgenomen als onderdeel van de start-tag. Het wordt in HTML als volgt gecodeerd:

Dit maakt het onderscheid tussen de begin- en de eindtag duidelijk, en zal op uw landingspagina als volgt worden vertaald:

Het kenmerk ‘kleur’

Dit is een ander belangrijk kenmerk, omdat het gebruik van kleur leven in uw website kan blazen, terwijl het helpt om belangrijke contrasten en een sterke ontwerpesthetiek te creëren. In HTML kan een kleur worden gespecificeerd door de naam te gebruiken, hoewel het ook mogelijk is een RGB- of een HEX-waarde te gebruiken om dit doel te bereiken. De eerste optie is echter het gemakkelijkst te volgen, terwijl deze ook kan worden toegepast op koppen, paragrafen en andere elementen op uw pagina.

Dit is een stijlattribuut, waarbij uw kleurkeuze de waarde vertegenwoordigt die u zou willen instellen. Wanneer u bijvoorbeeld de kleur rood toepast op de hoofdtitel, ziet dat er als volgt uit:

Als dit element eenmaal is toegepast, ziet het er op uw website als volgt uit:

Wederom is er een duidelijk onderscheid tussen de begin- en eindtags die het element definiëren, terwijl dit een van de gemakkelijkste attributen is om toe te passen in HTML. Ook wordt de name=”value-indeling van HTML-attributen verder benadrukt, waardoor het proces van het leren en toepassen ervan op uw website veel eenvoudiger wordt.

Probeer het zelf

Met een basiskennis van HTML en de afzonderlijke elementen, is de volgende stap het uitvoeren van enkele eenvoudige projecten en het toepassen van uw theoretische kennis om praktische uitdagingen op te lossen.

In de onderstaande oefening hebben we een tekst uitgezonderd en gevraagd om verschillende aspecten met HTML op te maken. Gebruik de gids en alles wat u tot nu toe hebt geleerd om de uitdaging te voltooien terwijl u zich voorbereidt op het coderen van uw eigen website.

Vragen:

1. Volledig het element header met de juiste closing tag.
2. Maak de header vet.
3. Voeg een horizontale lijn in onder de header.
4. Gebruik het color attribuut en voorzie ‘Bedankt voor uw bezoek’ van een groene kleur
5. Voeg deze hyperlink (https://www.w3schools.com/html/) in de ankertekst “Meer informatie.”
6. Gebruik in de kop van de pagina de name=”value”-indeling om de alinea’s links uit te lijnen

HTML-taalstatistieken en feiten

1. De HTML-, head- en body-elementen maken sinds het midden van de jaren negentig deel uit van de HTML-specificatie, en tot een paar jaar geleden waren zij de primaire elementen die werden gebruikt om structuur te geven aan HTML-documenten. De situatie is de laatste jaren echter drastisch veranderd doordat HTML5 een heleboel nieuwe tags heeft toegevoegd die kunnen worden gebruikt om rijke semantische betekenis toe te voegen aan de structuur van een HTML-document.
2. HTML-documenten moeten beginnen met een Document Type Declaration (informeel een “doctype”). In browsers helpt het doctype om de rendermodus te definiëren. HTML5 definieert geen DTD; daarom is de doctype-declaratie in HTML5 eenvoudiger en korter.
3. Mobiele browsers hebben HTML5 volledig overgenomen, zodat het maken van mobiel-ready projecten net zo eenvoudig is als het ontwerpen en construeren voor hun kleinere touchscreen-schermen – vandaar de populariteit van Responsive Design. Er zijn een aantal geweldige meta-tags waarmee u ook kunt optimaliseren voor mobiel.
4. 78% van de contentontwikkelaars is het ermee eens dat de structuur geschikt is voor het maken van mobiele apps, en 68% zegt dat het geschikt is voor het ontwerpen van alle soorten apps.
5. HTML5 wordt ook geleverd met een keur aan geweldige API’s waarmee je een betere gebruikerservaring en een krachtigere, dynamischere webapplicatie kunt bouwen – hier is een snelle lijst met native API’s:
   • Drag and Drop (DnD)
   • Offline storage database
   • Browser history management
   • Document editing
   • Timed media playback
6. HTML5 wordt niet door één bedrijf gecontroleerd. Een van de beste eigenschappen ervan ligt in het feit dat het een open standaard is. Ontwikkelaars hebben de vrijheid om hun creativiteit de vrije loop te laten en zoveel mogelijk functies en mogelijkheden toe te voegen.
7. In vergelijking met andere browsers zorgt elke update van Google Chrome ervoor dat er ondersteuning voor HTML5 komt. Bovendien is de standaardplayer van YouTube nu HTML5 en worden de Flash-advertenties van Google nu geconverteerd naar HTML5.
8. Gebruik van HTML5 door ontwikkelaars (per regio):
   • Noord- en Latijns-Amerika – 70%
   • Zuid-Amerika – 61%
   • ASPAC – 60%
   • Australië – 60%
   • Europa – 59%
   • Afrika – 50%

Conclusie

Hoewel HTML pas in 1991 werd gecreëerd (met de eerste versie van de codeertaal die vervolgens in 1995 werd gelanceerd), is het al snel een onmisbaar hulpmiddel geworden bij het ontwerpen van functionele en visueel aantrekkelijke websites. De invloed van HTML blijft zich ook ontwikkelen, met de nieuwste iteratie (HTML5) die door een groeiend aantal websites over de hele wereld wordt gebruikt.

In dit opzicht is het leren van de basiselementen van HTML en hoe deze toe te passen de belangrijkste stap die u zult nemen om een succesvolle, zichtbare en uiteindelijk concurrerende website op te zetten.