Terug

HTML 2 – Tags en Attributen

HTML Tags

  1. Verwijder alle inhoud uit de body van je pagina. Dus alles wat tussen <body> en </body> staat.
  2. Ga naar http://www.blindtextgenerator.com/lorem-ipsum, kies 50 words en 3 paragraphs en kopieer de tekst die je rechts ziet. Plak het in je body.
  3. Zonder verder iets te veranderen sla je nu je bestand op, en bekijk je het in Chrome. Als het goed is zie je nu de tekst die je geplakt hebt, maar zonder enters ertussen.

Paragraphs and line breaks

Zoals je ziet negeert HTML enters. Het maakt voor de browser niet uit of je alle code op één regel zet, of dat je alles netjes onder elkaar zet. Natuurlijk is het voor de leesbaarheid van de code wel handig om enters te gebruiken.
Als je een paragraaf (een stuk tekst met een witregel erna) wilt maken, zet je de tekst tussen <p> en </p> tags.

<p>Dit is een paragraaf.</p>
<p>En dit is de volgende paragraaf.</p>
Dit is een regel paragraaf.
En dit is de volgende paragraaf.

Als je nieuwe regel wilt beginnen zonder witruimte (een line break), gebruik je de <br> tag aan het eind van de zin. De <br> tag heeft geen sluittag.

<p>Dit is een paragraaf <br> met een enter er in.</p>
Dit is een paragraaf
met een enter er in.
  1. Verander je code zodat je Lorem Ipsum verdeeld wordt over drie paragrafen. Gebruik op een willekeurige plek in de tekst ook een line break.
  2. Zoek op http://www.w3schools.com/tags/ op wat de <strong> en <em> tags doen en hoe je ze gebruikt. Maak één woord in je tekst dikgedrukt en een aantal woorden cursief. Doe hetzelfde met <sub> en <sup>.
  3. <h1> t/m <h6> zijn elementen die niet in een paragraaf, maar daarbuiten worden gebruikt. Zoek uit hóe en maak een koptekst boven je pagina.

Attributen

Eigenschappen van elementen
Soms heeft een element meer informatie nodig. Bijvoorbeeld een hyperlink, die link moet niet alleen weten welke tekst hij moet tonen, maar ook naar welke pagina of site hij je moet brengen nadat je er op klikt. Die extra informatie geven we met een attribuut.
• Attributen staan altijd in de begintag.
• Attributen zijn altijd een combinatie van een naam en een waarde: naam="waarde"

De tag voor een hyperlink is <a>. De naam van het attribuut die aangeeft waar de link je heen stuurt is href. Een hyperlink maak je dus als volgt:

<a href="http://www.google.com">Klik hier!</a>
 ┃ ┗━━━━━━━━━━━━┳━━━━━━━━━━━━━┛
a-tag     href-attribuut
  1. Voeg aan je pagina twee hyperlinks toe, naar websites van je eigen keuze. Let op: vergeet niet http:// voor je link te zetten, anders denkt de browser dat het een link naar een pagina op je eigen site is.
  2. Maak ook een email link naar je eigen email-adres. Zoek op internet op hoe dat moet.

Afbeeldingen

Ook een afbeelding is een voorbeeld van een HTML-tag met attributen.

  1. Klik in VSCode op New Folder. Noem je nieuwe map img
  2. Zoek op internet een niet al te groot (maximaal 500 x 400 pixels) plaatje en bewaar het op je computer in de img map die je zojuist gemaakt hebt. Als het goed is verschijnt het bestand nu vanzelf in je img map in VSCode.
  3. Open index.html en voeg in je body een tag toe:
    <img src="img/jouwafbeelding.jpg" alt="een beschrijving">
  4. Sla op en controleer of je webpagina inclusief afbeelding werkt. Als het niet werkt heb je waarschijnlijk de naam van het bestand niet goed getypt (let ook vooral op de bestandsextensie).
  5. Je kunt ook van een afbeelding een hyperlink maken. Experimenteer of zoek op hoe dit werkt.