Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Tekst en Interactiviteit Verbeteren in HTML | HTML-Grondbeginselen
HTML-Essentials

bookTekst en Interactiviteit Verbeteren in HTML

Tekstopmaak-tags

HTML biedt verschillende tekstopmaak-tags waarmee nadruk, onderstreping of doorhaling aan tekst kan worden toegevoegd.

De <strong>- en <em>-tags worden gebruikt om tekst te benadrukken. De <strong>-tag geeft tekst vet weer, wat sterke belangrijkheid aanduidt, terwijl de <em>-tag tekst cursief weergeeft, wat nadruk aangeeft.

De <u>-tag onderstreept tekst om visuele duidelijkheid te bieden en belangrijke informatie te markeren. Gebruik onderstreping echter spaarzaam om overbodige opmaak te voorkomen.

De <s>-tag haalt tekst door, wat verwijdering of irrelevantie aanduidt. Deze tag wordt vaak gebruikt om aan te geven dat bepaalde tekst is verwijderd of niet langer geldig is.
Voorbeeld:

index.html

index.html

copy

In het bovenstaande voorbeeld:

  • <strong> en <em> tags geven nadruk aan tekst, waarbij <strong> tekst vet weergeeft en <em> tekst cursief weergeeft;
  • De <u> tag onderstreept tekst, waardoor deze visueel wordt benadrukt;
  • De <s> tag streept tekst door, wat verwijdering of irrelevantie aangeeft.

Links

Links, ook wel hyperlinks genoemd, stellen gebruikers in staat te navigeren tussen webpagina's, bronnen en verschillende vormen van communicatie. In HTML worden links gemaakt met de <a> (anchor) tag.

<a href="href-value">some text</a>

Het href attribuut binnen de <a> tag specificeert de bestemming van de link. Het kan verschillende typen URL's accepteren, waaronder:

  • Absolute URLs: Specificeer het volledige adres van de gekoppelde bron, inclusief het protocol (bijv. "https://www.example.com");
  • Telephone URLs: Hiermee kunnen gebruikers direct telefoongesprekken starten vanuit de browser wanneer erop wordt geklikt. Geformatteerd als "tel:phone-number". Het is essentieel om de landcode op te nemen en eventuele speciale tekens of spaties uit het telefoonnummer te verwijderen (bijv. "tel:+123456789");
  • Email URLs: Hiermee kunnen gebruikers e-mails opstellen wanneer erop wordt geklikt. Geformatteerd als "mailto:email-address". Het is belangrijk om het volledige e-mailadres na mailto: op te nemen (bijv. "mailto:example@example.com").

Voorbeeld:

index.html

index.html

copy

In het bovenstaande voorbeeld:

  • De <a>-tag maakt hyperlinks met verschillende bestemmingen;
  • Het href-attribuut specificeert diverse URL's, waaronder absolute URL's, telefoonnummers en e-mailadressen.

Andere nuttige attributen

De <a>-tag heeft verschillende attributen die gebruikt kunnen worden om eigenschappen van hyperlinks te specificeren. Enkele veelvoorkomende attributen zijn:

  • target="_blank": Specificeert waar het gekoppelde document wordt geopend. "_blank" opent de link in een nieuw venster of tabblad;
  • download: Geeft aan dat het doelbestand wordt gedownload wanneer de gebruiker op de hyperlink klikt. Dit attribuut kan een waarde hebben om de bestandsnaam voor het opslaan van de bron te bepalen.

Voorbeeld:

index.html

index.html

copy

In dit voorbeeld:

  • De href-attribuut specificeert de URL van de gekoppelde bron;
  • De target-attribuut opent de link in een nieuw venster of tabblad.

Knoppen

De <button>-tag maakt klikbare knoppen op webpagina's. Hiermee kunnen gebruikers interageren met de webpagina door acties uit te voeren, zoals het verzenden van een formulier of het uitvoeren van JavaScript-code. Hoewel we in deze cursus niet op JavaScript zullen ingaan, is het belangrijk te weten dat deze mogelijkheid bestaat.

Typen knoppen

  • Standaardknop (<button type="button">): Een algemene knop die wordt gebruikt voor verschillende acties op de webpagina, zoals het aanroepen van JavaScript-functies of het navigeren naar een andere pagina;
  • Verzendknop (<button type="submit">): Wordt binnen een formulier gebruikt om de formuliergegevens naar een server te verzenden;
  • Resetknop (<button type="reset">): Wordt binnen een formulier gebruikt om de velden van het formulier terug te zetten naar hun standaardwaarden.

Voorbeeld:

index.html

index.html

copy

In het bovenstaande voorbeeld:

  • De eerste knop is een standaardknop met een onclick-attribuut dat een waarschuwing activeert wanneer erop wordt geklikt;
  • De tweede knop is een verzendknop die de formuliergegevens naar de server verzendt;
  • De derde knop is een resetknop die de formuliervelden terugzet naar hun standaardwaarden.

Videotutorial

1. Selecteer de juiste bewering uit de gegeven opties.

2. Hoe worden links aangemaakt?

3. Wat specificeert het href-attribuut in een <a>-tag?

4. Wat doet de <button type="submit"> tag?

question mark

Selecteer de juiste bewering uit de gegeven opties.

Select the correct answer

question mark

Hoe worden links aangemaakt?

Select the correct answer

question mark

Wat specificeert het href-attribuut in een <a>-tag?

Select the correct answer

question mark

Wat doet de <button type="submit"> tag?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 5

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 3.13

bookTekst en Interactiviteit Verbeteren in HTML

Veeg om het menu te tonen

Tekstopmaak-tags

HTML biedt verschillende tekstopmaak-tags waarmee nadruk, onderstreping of doorhaling aan tekst kan worden toegevoegd.

De <strong>- en <em>-tags worden gebruikt om tekst te benadrukken. De <strong>-tag geeft tekst vet weer, wat sterke belangrijkheid aanduidt, terwijl de <em>-tag tekst cursief weergeeft, wat nadruk aangeeft.

De <u>-tag onderstreept tekst om visuele duidelijkheid te bieden en belangrijke informatie te markeren. Gebruik onderstreping echter spaarzaam om overbodige opmaak te voorkomen.

De <s>-tag haalt tekst door, wat verwijdering of irrelevantie aanduidt. Deze tag wordt vaak gebruikt om aan te geven dat bepaalde tekst is verwijderd of niet langer geldig is.
Voorbeeld:

index.html

index.html

copy

In het bovenstaande voorbeeld:

  • <strong> en <em> tags geven nadruk aan tekst, waarbij <strong> tekst vet weergeeft en <em> tekst cursief weergeeft;
  • De <u> tag onderstreept tekst, waardoor deze visueel wordt benadrukt;
  • De <s> tag streept tekst door, wat verwijdering of irrelevantie aangeeft.

Links

Links, ook wel hyperlinks genoemd, stellen gebruikers in staat te navigeren tussen webpagina's, bronnen en verschillende vormen van communicatie. In HTML worden links gemaakt met de <a> (anchor) tag.

<a href="href-value">some text</a>

Het href attribuut binnen de <a> tag specificeert de bestemming van de link. Het kan verschillende typen URL's accepteren, waaronder:

  • Absolute URLs: Specificeer het volledige adres van de gekoppelde bron, inclusief het protocol (bijv. "https://www.example.com");
  • Telephone URLs: Hiermee kunnen gebruikers direct telefoongesprekken starten vanuit de browser wanneer erop wordt geklikt. Geformatteerd als "tel:phone-number". Het is essentieel om de landcode op te nemen en eventuele speciale tekens of spaties uit het telefoonnummer te verwijderen (bijv. "tel:+123456789");
  • Email URLs: Hiermee kunnen gebruikers e-mails opstellen wanneer erop wordt geklikt. Geformatteerd als "mailto:email-address". Het is belangrijk om het volledige e-mailadres na mailto: op te nemen (bijv. "mailto:example@example.com").

Voorbeeld:

index.html

index.html

copy

In het bovenstaande voorbeeld:

  • De <a>-tag maakt hyperlinks met verschillende bestemmingen;
  • Het href-attribuut specificeert diverse URL's, waaronder absolute URL's, telefoonnummers en e-mailadressen.

Andere nuttige attributen

De <a>-tag heeft verschillende attributen die gebruikt kunnen worden om eigenschappen van hyperlinks te specificeren. Enkele veelvoorkomende attributen zijn:

  • target="_blank": Specificeert waar het gekoppelde document wordt geopend. "_blank" opent de link in een nieuw venster of tabblad;
  • download: Geeft aan dat het doelbestand wordt gedownload wanneer de gebruiker op de hyperlink klikt. Dit attribuut kan een waarde hebben om de bestandsnaam voor het opslaan van de bron te bepalen.

Voorbeeld:

index.html

index.html

copy

In dit voorbeeld:

  • De href-attribuut specificeert de URL van de gekoppelde bron;
  • De target-attribuut opent de link in een nieuw venster of tabblad.

Knoppen

De <button>-tag maakt klikbare knoppen op webpagina's. Hiermee kunnen gebruikers interageren met de webpagina door acties uit te voeren, zoals het verzenden van een formulier of het uitvoeren van JavaScript-code. Hoewel we in deze cursus niet op JavaScript zullen ingaan, is het belangrijk te weten dat deze mogelijkheid bestaat.

Typen knoppen

  • Standaardknop (<button type="button">): Een algemene knop die wordt gebruikt voor verschillende acties op de webpagina, zoals het aanroepen van JavaScript-functies of het navigeren naar een andere pagina;
  • Verzendknop (<button type="submit">): Wordt binnen een formulier gebruikt om de formuliergegevens naar een server te verzenden;
  • Resetknop (<button type="reset">): Wordt binnen een formulier gebruikt om de velden van het formulier terug te zetten naar hun standaardwaarden.

Voorbeeld:

index.html

index.html

copy

In het bovenstaande voorbeeld:

  • De eerste knop is een standaardknop met een onclick-attribuut dat een waarschuwing activeert wanneer erop wordt geklikt;
  • De tweede knop is een verzendknop die de formuliergegevens naar de server verzendt;
  • De derde knop is een resetknop die de formuliervelden terugzet naar hun standaardwaarden.

Videotutorial

1. Selecteer de juiste bewering uit de gegeven opties.

2. Hoe worden links aangemaakt?

3. Wat specificeert het href-attribuut in een <a>-tag?

4. Wat doet de <button type="submit"> tag?

question mark

Selecteer de juiste bewering uit de gegeven opties.

Select the correct answer

question mark

Hoe worden links aangemaakt?

Select the correct answer

question mark

Wat specificeert het href-attribuut in een <a>-tag?

Select the correct answer

question mark

Wat doet de <button type="submit"> tag?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 5
some-alt