Wat is HTML en hoe zet je dit in?

Wat is HTML en hoe zet je dit in?

HTML staat voor HyperText Markup Language. Alle websites op het internet gebruiken HTML. Het is daarmee ook de basis van iedere webtekst op elke website. In het Nederlands kun je deze code vertalen in opmaaktaal. Het is de opmaaktaal voor tekst in een tekstdocument. Als voorbeeld nemen we de HTML-code van een vetgedrukte tekst. Een vetgedrukte tekst creëer je via de volgende code: De tekst die vetgedrukt moet zijn Alle HTML-codes hebben de en / als toetsenbord combinaties. heeft als benaming het meerdanteken. / heeft als benaming de schuine streep. Als je eenmaal weet hoe het werkt, dan is het erg eenvoudig om een HTML-code toe te voegen of aan te passen. De meest gebruikte HTML-codes zien er als volgt uit en schrijf je op deze manier:

Stap 1

Je begint met het minderdanteken naar links ().

Stap 2

Vervolgens typ je het woord of de zin die je opgemaakt wilt hebben. Het woord of de zin die je opgemaakt wilt hebben

Stap 3

Tot slot moet je de HTML-code sluiten. Dit doe je door wederom het minderdanteken naar links in te typen (). Zo ziet de HTML code er dan uit: Het woord of de zin die je opgemaakt wilt hebben Het is binnen WordPress erg eenvoudig om je HTML-code aan te passen. Rechtsboven in de pagina waarin jij je artikel schrijft kun je kiezen uit Visual en Tekst (zie onderstaande afbeelding). Onder Tekst staan de codes van je artikel. Onder Visual zie je het visuele beeld dat is gecreëerd door de codes. Dit is dan ook het beeld dat de bezoeker van de website krijgt te zien en hoogstwaarschijnlijk ook de pagina waarin jij je artikelen schrijft. HTML codes in Wordpress Wanneer je op Tekst drukt zie je dat het artikel wat je aan het bewerken bent verandert in een soort codetaal. Je moet het namelijk zo zien: Een website bestaat volledig uit code. Dit geldt ook voor je blogs en artikelen. In elke website waar jij vetgedrukte teksten, linkjes, kopteksten, schuingedrukte teksten en alle andere bewerkingen ziet schuilt op de achtergrond een code om deze bewerkingen waar te maken. HTML Wordpress Er zijn ontelbaar veel HTML-codes. De belangrijkste heb ik hieronder voor je beschreven. Een vetgedrukte test ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst Een cursieve tekst, oftewel een schuin gedrukte tekst, ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst Een link naar een andere pagina of website ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: >Het stukje tekst die de link krijgt

Voorbeeldje:

Ik wil jou via een link naar mijn cursus 'vindbare webtekst opbouwen' krijgen. Die link plaats ik dus in een woord of tekst zodat jij er op kan klikken. In codetaal ziet dat er als volgt uit: Ga nu naar mijn cursus 'vindbare webtekst opbouwen' Op de website krijgen de bezoekers het op deze manier te zien: Ga nu naar mijn cursus 'vindbare webtekst opbouwen' Een tekst in de blockquote ziet er voor de bezoeker zo uit:
De tekst
In de HTML-code is het vertaald naar:
De tekst
Een doorgestreepte tekst ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst Een tekst met een streep eronder ziet er voor de bezoeker zo uit: De tekst In de HTML-code is het vertaald naar: De tekst Een opsomming met puntjes ziet er voor de bezoeker zo uit:
  • De tekst in regel 1
  • De tekst in regel 2
  • De tekst in regel 3
In de HTML-code is het vertaald naar:
  • De tekst in regel 1
  • De tekst in regel 2
  • De tekst in regel 3
Een opsomming in de tekst heeft twee codes. Een code waarmee je aangeeft dat je wilt opsommen in de tekst (codetaal ul) en de code voor elke extra regel in de opsomming (codetaal li). De opmaak van de opsomming met puntjes begint dus met
    en bij de allerlaatste zin van de opsomming sluit je de opmaak door de code
. Elke nieuwe regel in de opsomming begint met
  • waarbij je aan het einde van deze regel de code sluit met
  • Een opsomming met cijfertjes ziet er voor de bezoeker zo uit:
    1. De tekst in regel 1
    2. De tekst in regel 2
    3. De tekst in regel 3
    In de HTML-code is het vertaald naar:
    1. De tekst in regel 1
    2. De tekst in regel 2
    3. De tekst in regel 3
    Een opsomming met cijfertjes werkt precies hetzelfde als een opsomming met puntjes. Je vervangt nu alleen de codetaal ul voor ol. De opmaak van de opsomming met cijfertjes begint dus met
      en bij de allerlaatste zin van de opsomming sluit je de opmaak door de code
    . Elke nieuwe regel in de opsomming begint met
  • waarbij aan het einde van deze regel je de code sluit met
  • . Zoals je in dit artikel ziet licht ik de codes uit door markeringen. Deze markeringen worden vaak ook specifiek gebruikt voor codes. Voor de bezoeker ziet dat er zo uit: De tekst In de HTML-code is het vertaald naar: De tekst In WordPress en andere websitesystemen kun je gebruik maken van zes soorten kopteksten die allen hun eigen grootte en waarde hebben. We noemen deze kopteksten ook wel H1, H2, H3, H4, H5 en H6. Ze hebben allemaal een soortgelijke code waarvan logischerwijs alleen de cijfers verschillen. De codes zien er als volgt uit: Een koptekst 1 ziet er voor de bezoeker zo uit:

    De tekst

    In de HTML-code is het vertaald naar:

    De tekst

    Een koptekst 2 ziet er voor de bezoeker zo uit: In de HTML-code is het vertaald naar: Een koptekst 3 ziet er voor de bezoeker zo uit:

    De tekst

    In de HTML-code is het vertaald naar:

    De tekst

    Een koptekst 4 ziet er voor de bezoeker zo uit:

    De tekst

    In de HTML-code is het vertaald naar:

    De tekst

    Een koptekst 5 ziet er voor de bezoeker zo uit:
    De tekst
    In de HTML-code is het vertaald naar:
    De tekst
    Een koptekst 6 ziet er voor de bezoeker zo uit:
    De tekst
    In de HTML-code is het vertaald naar:
    De tekst
    Ik hoor je al bijna denken: 'Moet ik al deze codes dan echt toepassen als ik mijn website wil bewerken?' Geen paniek! Want er is een veel overzichtelijkere manier. Gebruik maken van HTML-codes is niet voor iedereen interessant. Er zijn echter ook mensen die een artikel schrijven waarbij ze zelf de HTML-codes typen. Sommige mensen vinden dit een prettige manier van werken. Daarnaast kan het gebeuren dat de codes in het artikel niet helemaal kloppen, waardoor je het op deze manier makkelijk aan kan passen. Voor het toevoegen van bepaalde widgets, die WordPress niet in het besturingssysteem heeft zitten, ben je genoodzaakt om deze widget via de HTML-code toe te voegen (maar laten we het nu niet te ingewikkeld maken). Er is namelijk een veel overzichtelijkere manier om deze HTML-codes te gebruiken. Kijk maar eens naar de taakbalk boven in de pagina op het moment dat je een artikel aan het schrijven bent. Elke handeling die je vanuit deze taakbalk uitvoert vertaald zich op de achtergrond in een HTML-code. Taakbalk in Wordpress Ik wil het allereerste woord van dit artikel vetgedrukt hebben. Ik selecteer het woord HTML (door met de muis over het woord te gaan terwijl ik tegelijkertijd de linkermuisknop ingedrukt houd) en druk in de taakbalk op B. Vetgedrukte tekst Zoals je in onderstaande afbeelding ziet is het woord nu vetgedrukt. Op de achtergrond is deze handeling vertaald naar een HTML code. HTML vetgedrukte tekst in Wordpress We gaan even kijken hoe deze bewerking is vertaald naar een HTML-code. Wanneer ik rechts bovenin op Tekst druk kom ik in de HTML-pagina terecht. Tekst HTML pagina Vanaf daar kun je alle HTML codes van de tekst zien en zie je dat er ook een HTML code staat voor de tekst die ik vetgedrukt heb gemaakt. HTML code strong Je hoeft deze HTML-codes echt niet te begrijpen om een succesvolle website te creëren. Ik kan mij goed voorstellen dat je niks van al deze codes snapt. Het kan echter wel erg leuk zijn om met deze codes te experimenteren. Je zult zien dat artikelen schrijven nóg makkelijker wordt wanneer je op de hoogte bent van deze codes. Veel plezier! ;)   Wil je hulp bij SEO of je website dan ben je bij Geryaal aan het juiste adres. Hier helpt Geryaal je mee:
    Reactie plaatsen