Opdracht: Proeven van HTML

Om alles rond HTML mooi samen te vatten en op te oefenen gaan we zelfstandig aan de slag met een paar opdrachten. Hierbij gelden een paar afspraken:

• Ga naar W3Schools – HTML Tutorial en hou het gedurende deze opdrachten open zodanig dat je een referentie hebt en bij onduidelijkheden het op jouw gemak kan overlopen.
• Raadpleeg ook jouw eigen projecten die je tot nog toe gemaakt hebt.
• Google-Fu eerst, vraag daarna aan collega, en als niemand in jouw groep het weet vraag aan docent.
• Geen CSS (ook geen inline styling, behalve afmetingen voor afbeeldingen)

👩‍💻 Opdracht: My Blog

Je gaat een website opbouwen die een blog voorstelt, met daarin een reeks blog-posts over jouw interesses.

1. Ga naar W3Schools – HTML Tutorial en hou het gedurende deze oefening open zodanig dat je een referentie hebt en bij onduidelijkheden het op jouw gemak kan overlopen
2. Maak een nieuw projectmap ‘my-blog’
3. Maak een HTML bestand die jouw homepagina gaat voorstellen
4. Bouw een HTML document correct op (hint: doctype, html (engelstalig), head en body)
5. Geef jouw HTML document een relevante titel in de head
6. Voeg in de inhoud een header
7. Voeg in de header een koptekst (heading) “My Blog” en een afbeelding (logo die jou het beste vertegenwoordigt)
8. Voeg in de header een korte paragraaf tekst die jouw website beschrijft
9. Voeg onder de header een footer met een (fictieve) copyrightmelding
10. Voeg tussen jouw header en footer een section met id “blog-posts”
11. Per blog-post ga je in jouw section een article toevoegen met class “blog-post”, met daarin een blog-post koptekst (h2) en inhoud
12. Maak een blog-post ‘Inspirational Quote’ met daarin een blockquote met jouw lievelingscitaat en een afbeelding van de persoon die het gezegd heeft
13. Maak een blog-post ‘And the Oscar Goes To…’ met daarin een koptekst (h3) met de naam van jouw lievelingsacteur/actrice
    • Zoek jouw lievelingsacteur/actrice op online (Wikipedia of IMDb)
    • Voeg een ongeordende lijst toe met de volgende lijst-items:
      • Biography – een hyperlink naar de ‘Early life’ gedeelte van hun Wikipedia artikel
      • Top films – een geneste geordende lijst met daarin jouw drie lievelingsfilms waar hij/zij in speelt, steeds met een hyperlink naar de IMDb pagina van die film
      • Quote – een blockquote met een citaat van hun die jij leuk vindt
    • Maak van de afbeelding een hyperlink naar een Google Image search van zijn/haar naam
    • Zorg dat alle links steeds op een nieuwe tab openen
14. Maak een blog-post ‘Yummy in My Tummy’ met daarin een tabel die een maaltijdplan voor een week voorstelt
    • Een kolom per dag van de week
    • Twee rijen – eentje voor de kopteksten, nog eentje voor de gegevens
    • Voeg in elke cel de naam van een maaltijd die jij heerlijk vindt
    • Maak een nieuw HTML bestand ‘under-construction.html’ met de correcte opbouw
      • Voeg als inhoud een koptekst “Under construction”, een afbeelding die “Under construction” het beste vertegenwoordigt (bv. een kegel), en een hyperlink om terug naar de homepagina te gaan
    • Maak in jouw ‘Yummy in My Tummy’ blog-post van jouw maaltijdnamen steeds een hyperlink naar de ‘under-construction’ pagina
    • Kies jouw lievelingsmaaltijd uit en maak daarvoor wel een aparte webpagina aan
      • Pas al jouw kennis toe om hier een structuur/inhoud te voorzien
      • Bv. Titel, afbeelding, korte uitleg, een ongeordende lijst met daarin alle ingrediënten, een geordende lijst met daarin telkens een lijst item voor elke stap in het recept
      • Kopieer en plak de header van jouw homepagina in deze pagina en maak van jouw logo een hyperlink naar jouw homepagina
15. Maak een blog-post ‘Objectively the Best Music Video Ever’, met daarin een embedded videoclip (via YouTube)
    • Gebruik hiervoor iframe en YouTube’s embed knop, niet video
16. Maak een blog-post ‘LMAO’, met daarin jouw lievelings- grappige video (via YouTube)
    • Gebruik hiervoor video
17. Maak een nieuwe pagina ‘about’ met daarin een afbeelding en korte beschrijving over wie je bent en jouw interesses
18. Maak een nieuwe pagina ‘contact’ met daarin een formulier waar gebruikers hun voornaam, achternaam, emailadres en een boodschap kunnen invoeren (geen daadwerkelijke functionaliteit zoals php nodig)
19. Maak een nieuwe pagina ‘register’ met daarin een formulier waar gebruikers hun gebruikersnaam, emailadres, wachtwoord (en bevestig wachtwoord) kunnen invoeren
20. Voeg in jouw homepagina’s header een navigatie balk
    • Gebruik nav, met daarin een ongeordende lijst van hyperlinks naar jouw eigen gemaakte webpagina’s (‘Home’ (index.html), ‘About’, ‘Contact’ en ‘Register’)
21. Kopieer deze “navbar” en voeg die in al jouw andere webpagina’s hun headers
22. Publiceer jouw blog online via Netlify