Ronald Kerssies | Jan 10, 2023

HTML tekst en links

Voorkennis

Doelen

  • Je leert verschillende manieren van tekst op te maken
  • Je leert hoe je een snelkoppeling (link / url) kan maken
HTML5 Logo CSS3 Logo

Opdracht

  • Maak van onderstaand ontwerp een website
  • Maak de webpagina zo goed mogelijk na
  • Voor de tekst mag je fake-tekst gebruiken zoals Lorem Ipsum
  • Maak van de eerste vijf woorden verschillende koppen door de Hx-tag te gebruiken
  • Maak van enkele blokken met LorumIpsum-woorden verschillende paragrafen door de p-tag te gebruiken
  • Geef enkele woorden in de paragrafen een vet, scheve of onderstreepte weergave door de b-tag te gebruiken
  • Geef enkele woorden in de paragrafen een cursieve/scheve weergave i-tag te gebruiken
  • Geef enkele woorden in de paragrafen een onderstreping u-tag te gebruiken
  • Laat zinnen halverwege een tekst-blok/paragraaf op een nieuwe regel starten door de br-tag te gebruiken
  • Laat zinnen halverwege een tekst-blok/paragraaf op een nieuwe regel starten na een witregel door de br-tag te gebruiken
  • Voeg de naam van jouw (voormalige) school toe aan de tekst en maak dit woord klikbaar, zodat bij het klikken de browser naar de internet pagina gaat van deze school. Gebruik daarbij de a-tag.
  • Maak in de zelfe map als waarin het HTML-document staat een map met de naam "docs". Plaats daarin een pdf-bestand (bijv: readme.pdf) Maak een klikbaar woord, zodat bij het klikken de browser het pdf-bestand opent (bijv: docs/readme.pdf). Gebruik daarbij de a-tag.
  • Voeg meerdere speciale karakters toe aan de tekst
  • Onderzoek hoe de opmaak van tekst ook met CSS kan worden uitgevoerd.

Op te leveren

  • een webpage met tekst en meerdere koppen
  • een webpage met tekst en meerdere paragrafen
  • een webpage met vette, scheve en onderstreepte teksten
  • een webpage met linkjes naar een url van een andere website
  • een webpage met linkje naar een url van een bestand dat in een submapje staat
  • een webpage met waarin speciale tekens staan en op de correcte wijze zijn toegevoegd

Evaluatie

Vraag om een code-review om feedback op jouw aanpak en tips voor best-practices te krijgen.
Dit is een rubrics of checklist waaraan je kunt zien of de opdracht juist is uitgevoerd