HTML
Opdr 1. Je eerste HTML pagina

Opdr 1. Je eerste HTML pagina

Opdracht:

Maak een html-pagina waarin alle belangrijkste HTML-tags zijn gebruikt.

Tips: 

  • HTML-documenten worden opgeslagen met de extensie .html
  • Om een html-document te maken heb je een tekst-editor nodig. Je kunt onderstaande stappen volgen en Brackets ↗ installeren, of je kunt alternatieve tekst-editors gebruiken.
  • door onderstaande stappen te doorlopen voltooi je vanzelf deze opdracht.
  • de belangrijkste HTML-tags vind je hieronder in afb. 1, of op de pagina Veelvoorkomende html-tags
  • Inleveren: 
    • Upload index.html liefst voor de volgende les
    • of uiterlijk bij het sluiten van de sprint op Canvas ↗
Afb. 1: Verplichte tags voor deze opdracht & meest voorkomende tags zowiezo. Zoek ze op in W3schools en voeg ze toe aan je document.

1. Download & verken Brackets

Brackets is een open source teksteditor die speciaal is ontwikkeld voor en door web-ontwikkelaars. We gaan in deze cursus verschillende editors gebruiken, maar we beginnen met deze omdat je met deze heel makkelijk kan zien wat het effect is van veranderingen die je in de code aanbrengt. Code moet namelijk altijd geinterpreteerd worden. In simpele text editors betekent dit dat je naast de editor altijd een web-browser open moet houden en die steeds moet verversen (F5) om te zien welke wijzigingen je hebt aangebracht. In brackets gaat dit (bijna) automatisch.

Live Preview knop
  1. Download en installeer Brackets van http://brackets.io ↗
  2. Open Brackets en druk op Windows links
    Als het goed is neemt het programma Brackets nu het linker deel van je scherm in beslag.

  3. Open Live Preview
    Zoek rechts van het scherm voor de knop Live Preview. Klik erop. (een liggende bliksemflits).
    Als het goed is opent er nu een scherm rechts. Mocht het scherm niet netjes rechts openen, selecteer dan het scherm door op de titelbalk te klikken en druk op de toetscombinatie: WINDOWS + rechts.

  4. Bekijk het linker menu van Brackets
    Als het goed is ziet dat eruit als de afbeelding rechts. (temp.html zul je niet hebben).
    In het midden zit een knop “Getting Started”. Dit is de naam van een map waar weer een submap in zit, met de bestanden index.html en main.css ernaast. 

    Als je in windows verkenner kijkt, dan ziet dat er zo uit:

  5. Klik op de map ‘screenshots’ (in Brackets).
    De map vouwt open en je ziet dat daar nog een foto in zit (png)

  6. Klik op de foto. (hij verschijnt nu in het middelste scherm in beeld, waar je de code anders zou zien).
    Merk op dat je foto’s dus in Brackets kunt bekijken, en dat je het exact formaat kunt bekijken, en op welk adres (in pixels) iets op de foto te zien is. Dit is nuttig als je een zogenaamde Image-map wil maken, of alleen een deel van de foto wil laten zien. Maar dat is voor een andere les.

  7. Klik op index.html

  8. Scroll even op en neer en bekijk de code. Vergelijk dit met wat je in de Live Preview ziet. Kun je in de code een aantal elementen terugvinden die je rechts ziet? Bijvoorbeeld bepaalde koppen en paragrafen?

2. Je eigen werk-locatie inrichten

We gaan nu index.html naar ons werkgeheugen kopieren om het later als template te gebruiken voor ons eerste HTML-document. Je zou natuurlijk met een schone lei kunnen beginnen en een leeg HTML-bestand van W3schools halen, maar in de praktijk is het meestal handiger om een ander document als template te gebruiken. Je kiest dan natuurlijk een document dat al voor een groot deel de codes bevat die je wil gaan gebruiken. Zo hoef je minder te typen en weet je zeker dat de codes die je gebruikt werken. Een template bevat dan bijvoorbeeld de codes al voor je header, navigatie-menu en footer, de elementen die op elke pagina van je website terugkomen.

In dit geval zul je zien dat index.html een hoop troep bevat die we zullen moeten deleten, maar het bevat ook een aantal tags die dan al correct in het document staan en die dus niet meer zullen hoeven toevoegen.

  1. Klik ergens in de code in index.html en selecteer alles (Ctrl + A) en Kopieer het (Ctrl + C).
  2. Klik nu op Getting Started –> Open Folder
  3. Browse naar een locatie op je PC waar je wil gaan werken –> select Folder.

Tip: Als je je bestanden in een dropbox (oid) opslaat, dan heb je altijd een backup en kun je nooit iets kwijtraken. Bovendien kun je er dan vanaf alle apparaten altijd bij.

Tip2: De mappenstructuur die hieronder wordt getoond is ook aan te raden:

Aeres > Module > vak > Les (of Sprint)

Tip3: Gebruik geen spaties in map- en bestandsnamen als dat niet hoeft. Liever streepjes of underscores ( – of _ )

(goed gezien, ik heb me hier ook niet aan tip 3 gehouden. We zullen zien wat de gevolgen zijn.)

3. Je eerste HTML-document

In de vorige stap heb je een nieuwe werkmap geselecteerd. Daar staan nog geen bestanden in en daarom is als het goed is, je scherm nu behoorlijk leeg.

Als je de code van index.html nog in je geheugen hebt, dan kun je het als volgt in een nieuw document plakken:

  1. Druk op (Ctrl N) om een nieuw bestand aan te maken.
  2. Druk op (Ctrl V) om de inhoud van je clipboard te plakken
  3. Druk op (Ctrl S) om je bestand op te slaan. Geef het als bestandsnaam: mycheatsheet.html

Gefeliciteerd, dit is je eerste eigen HTML-document in je eigen werkomgeving.

Tip: Mocht het bovenstaande niet gelukt zijn, dan had je waarschijnlijk de code van index.html niet (meer) in je werkgeheugen. Ga dan terug naar de map ‘Getting started’, selecteer index.html en kopieer de code.

4. Je HTML-document ‘eigen’ maken

  1. DELETE nu alles wat in de Body tag staat, behalve elementen die je misschien wil hergebruiken. Laat bijvoorbeeld de h1, h2 en de eerst paragraaf (p) staan, en de bullet-lijst onderaan de pagina.
  1. BEKIJK nu wat er allemaal in de HEAD staat en wijzig de TITLE.
  2. Wijzig ook de META-tag met naam description. (m.a.w. wijzig hier het content-attribuut)
  3. De link naar de stylesheet mag je laten staan, die zullen we in de volgende les wel gebruiken.

5. Time to play

  1. Wijzig nu ook de inhoud van de BODY-tag: de titel, de text in de paragrafen etc. Bekijk steeds het resultaat met Live Preview.
  2. Voeg nu alle tags toe die jullie bij oplevering moeten gaan gebruiken ( zie afbeelding 1. hierboven, of op de pagina veelvoorkomende tags). Zoek op hoe je ze moet gebruiken op Cheatsheets en in W3schools ↗. Speel met attribuut-waardes. Probeer het een en ander uit, wat je leuk vindt.

    Tip: In de volgende opdracht ga je een echte website met inhoud bouwen. Besteed daarom nu niet te veel tijd aan het verkennen van alle tags. Plaats ze in het document en zorg dat ze werken. Upload dan je html-document en begin aan de volgende opdracht.

6. Inleveren: cheatsheet.html

Upload je cheatsheet.html als je alle Meestgebruikte Tags en speciale karakters erin hebt staan (zie afbeelding 1. hierboven).

Tips: 

  • base kan interfereren met de werking van je links. Zet deze daarom in een commentaar-blok.
  • Style kan zowel een attribuut als een tag zijn. Zorg dat je beide versies hebt.
  • P komt per ongeluk twee keer voor in mijn lijst met verplichte tags. Het is dezelfde.
  • Als je code van W3schools kopieert, let dan op dat je echt alleen de tags kopieert die je moet hebben. Je kunt per ongeluk HTML, HEAD en BODY tags mee kopiëren, en die gaan je document helemaal in de war schoppen. Deze tags mogen namelijk maar 1x voorkomen.
  • Het beste is om tags niet te kopiëren, maar om ze zelf in te typen. Net als met de hand schrijven dwingt typen je om na te denken over waar je mee bezig bent en wat het nou betekent, die code die je daar neerzet. Code schrijven (en debuggen) vergt heel precies kijken: lezen wat er staat en speuren naar fouten in de code. Daarvoor MOET je de code lezen en het niet zonder omkijken kopiëren. ALS je al kopieert, dan moet je dus GOED KIJKEN wat je plakt.