HTML & CSS DEEL 1. webdesign. Programmeren met CodeAcademy

Maat: px

Weergave met pagina beginnen:

Download "HTML & CSS DEEL 1. webdesign. Programmeren met CodeAcademy"

Johannes Vedder
5 jaren geleden
Aantal bezoeken:

1 Programmeren met CodeAcademy

2 HTML is de taal die gebruikt wordt om webpagina s te maken die jij elke dag bezoekt. Het is een logische manier om een website te structureren. Laten we kijken wat de term "HTML" betekent omdat het veel informatie geeft over deze code. HTML staat voor Hyper Text Markup Language. Een markup language is een computer taal die de structuur en presentatie van rauwe tekst uitlegt. Markup languages werken door omliggende rauwe tekst te omringen met informatie die de computer kan interpreteren, "markeren" voor verwerking. HyperText is tekst die wordt weergegeven op een computer of apparaat die toegang geeft tot andere tekst via links, ook wel hyperlinks genoemd. Waarschijnlijk heb je ook op veel hyperlinks geklikt om bij deze Codecademy cursus terecht te komen! In deze cursus leer je hoe je de fundamenten van HTML gebruikt om inhoud te structureren, presenteren en koppelen. Je leert ook hoe je CSS of Cascading Style Sheets kunt gebruiken om de HTML-inhoud die je aan webpagina's toevoegt, aan te passen. Laten we beginnen! Instructies 1. Typ in de code editor rechts je naam tussen <h1> en </ h1> en druk vervolgens op Run. pagina 1 van 9

3 Een webbrowser moet weten welke taal er bij een document is ingevoerd voordat de inhoud van het document verwerkt kan worden. Je kan web browsers laten weten dat je de HTML-taal gebruikt door je HTML-document te starten met een documenttype-verklaring. De verklaring is het volgende: Deze verklaring is een instructie. Het vertelt de browser welk type document te verwachten is, samen met welke versie van HTML wordt gebruikt in het document. <! DOCTYPE html> moet de eerste regel van de code zijn in al uw HTML-documenten. Opmerking: als je de doctype-declaratie niet gebruikt werkt je HTML-code waarschijnlijk nog steeds, maar het is riskant. Op dit moment zal de browser ervan uitgaan dat u HTML5 gebruikt, omdat HTML5 de huidige standaard is. In de toekomst zal er een nieuwe standaard HTML5 dit document overschrijven. Toekomstige browsers kunnen denken dat je een andere, nieuwere standaard gebruikt, waardoor je document onjuist gelezen wordt. Om ervoor te zorgen dat je document altijd correct wordt gelezen, moet je altijd <! DOCTYPE html> aan het begin van je HTML-documenten zetten. Instructie: 1. Op lijn 1, voeg de <! DOCTYPE html> verklaring toe. pagina 2 van 9

4 Super! Browsers die jouw code lezen zullen weten dat ze HTML kunnen verwachten wanneer ze proberen om uw bestand te lezen. De <! DOCTYPE html> verklaring is echter alleen het begin. Het laat alleen de browser weten dat je van plan bent om HTML in het document te gebruiken, maar voegt eigenlijk geen HTML-structuur of inhoud toe. Om te beginnen met het toevoegen van HTML-structuur en -inhoud, moeten we eerst de opening en het sluiten van <html> tags toevoegen zoals: Alles tussen <html> en </ html> wordt beschouwd als HTML-code. Zonder deze tags is het mogelijk dat browsers jouw HTML-code verkeerd lezen en HTML-inhoud op onverwachte manieren laten zien. Instructie: 1. Na je <! DOCTYPE html> verklaring voeg je de opening (<html>) en het sluiten (</ html>) tag toe. pagina 3 van 9

5 Voordat we vooruitgaan, laten we een aantal woorden uitleggen die je gebruikt als je HTML leert. Hier zijn enkele termen die je in deze cursus zal leren gebruiken: 1. Hoekbeugels - In HTML staan de karakters <en> bekend als hoekbeugels. 2. HTML-element (of gewoon element) - HTML-code die zich tussen de hoekbeugels bevindt. 3. Opening tag - de eerste of openings HTML-tag die gebruikt wordt om een HTML-element te starten. 4. Sluitingscode - de tweede of sluitings HTML-tag die is gebruikt om een HTML-element te beëindigen. Sluitingstags zien eruit als een schuine streep die naar voren leunt (/). Met uitzondering van enkele HTML-elementen bestaan de meeste elementen uit een openings- en sluitingscode. In het volgende voorbeeld zie je een onderdeel, bestaande uit één openingscode (<p>) en één sluitingscode (</ p>): pagina 4 van 9

Tot nu toe heb je het type document dat je kan verwachten (een HTML-document) aan de browser getoond en het HTML-element (<html>) toegevoegd wat de rest van je code bevat.

6 Tot nu toe heb je het type document dat je kan verwachten (een HTML-document) aan de browser getoond en het HTML-element (<html>) toegevoegd wat de rest van je code bevat. Laten we de browser ook wat informatie over de pagina geven. We kunnen dit doen door een <head> element toe te voegen. Het element <head> bevat informatie over de pagina die niet direct op de werkelijke webpagina wordt weergegeven (u ziet een voorbeeld in de volgende oefening). Instructie: 1. Voeg een <head> -element toe aan index.html. pagina 5 van 9

7 Wat voor soort informatie over de webpagina kan het <head> element bevatten? Als je naar de bovenkant van je browser kijkt (of op een van de tabbladen die je in dit browservenster hebt geopend), zie je de woorden Learn HTML & CSS: Part I Codecademy staan, die de titel van deze webpagina is. De browser toont de titel van de pagina omdat de titel direct in het <head> element kan worden opgegeven, door een <title> -element te gebruiken. Als we een bestand met de HTML-code in het bovenstaande voorbeeld zouden openen, zou de browser de woorden My Coding Journal in de titelbalk weergeven (of in de titel van de tab). Instructie: 1. Voeg een titel toe aan jouw webpagina met het element <title>. De titel kan elk ding zijn dat u wilt. pagina 6 van 9

8 De webpagina die je momenteel bekijkt, heeft de titel Learn HTML & CSS: Deel I Codecademy. Omdat de browser die je in deze cursus gebruikt, geen titelbalk heeft, kan je de titel van een webpagina niet zien als je er een aan toevoegt. Het diagram aan de rechterkant laat je duidelijk zien waar een webpagina's titel op een browser zou moeten verschijnen. pagina 7 van 9

9 We hebben wat HTML toegevoegd, maar we hebben nog geen resultaten in de webbrowser aan de rechterkant gezien. Waarom is dat? Voordat we inhoud kunnen toevoegen die een browser laat zien, moeten we een lichaam toevoegen aan het HTML-bestand. Zodra het bestand een lichaam heeft, kunnen veel verschillende soorten inhoud in het lichaam worden toegevoegd, zoals tekst, afbeeldingen, knoppen en nog veel meer. Alle bovenstaande codes laten zien wat soms wordt benoemd als "boilerplate code". De term "boilerplate code" wordt gebruikt om de basis HTML code te beschrijven die nodig is om een webpagina te maken. Zonder al deze elementen in de boilerplatecode riskeer je te beginnen zonder de minimale eisen die nodig zijn om het beste resultaat te geven. Opmerking: De rest van de cursus gebruikt codevoorbeelden zoals bovenstaande. Om ruimte te besparen, laten we in de codevoorbeelden geen gemeenschappelijke elementen zoals de verklaring, hoofd, enzovoorts meer zien. Tenzij anders vermeld, kan je ervan uitgaan dat de code in de voorbeeldcodeblokken zich al meteen in het lichaam van het HTML-bestand bevinden. Instructie: 1. Voeg een lichaam toe op uw webpagina met het element <body>. pagina 8 van 9

10 Gefeliciteerd met het voltooien van de eerste eenheid van HTML & CSS! Je bent goed op weg om een ervaren webontwikkelaar te worden. Laten we eens kijken wat je tot nu toe geleerd hebt: 1. De <! DOCTYPE html> verklaring moet altijd de eerste regel van de code zijn in jouw HTML-bestanden. 2. Het element <html> bevat al jouw HTML-code. 3. Informatie over de webpagina, zoals de titel, behoort tot de <head> van de pagina. 4. Je kan een titel op jouw webpagina toevoegen door het element <title> binnenin het hoofd te gebruiken. 5. Code voor zichtbare HTML-inhoud wordt binnenin het element <body> geplaatst. Wat je in deze les geleerd hebt, vormt de vereiste basis voor alle HTML-bestanden. De rest van de cursus leer je meer over hoe je inhoud kan toevoegen met behulp van HTML en hoe je deze inhoud kan gebruiken met behulp van CSS! Instructies: 1. Voeg de vereiste aangifte op lijn 1 van index.html toe. 2. Start een HTML-document. 3. Voeg een titel toe op de webpagina. De titel kan alles zijn wat jij wil. 4. Voeg een lichaam toe aan de webpagina. 5. Kopieer in index.html, de volgende regelcode en plak het binnenin het lichaam: Wat is er met jouw webpagina gebeurd? Je leert meer details in de volgende eenheid. pagina 9 van 9

Vergelijkbare documenten

Informatica 4H/V. Les 4 HTML. Periode 1 HTML en Netwerken bzmr - Da Vinci College Purmerend 1

Informatica 4H/V. Les 4 HTML. Periode 1 HTML en Netwerken bzmr - Da Vinci College Purmerend 1 Informatica 4H/V Periode 1 HTML en Netwerken Les 4 HTML 18-9-2017 bzmr - Da Vinci College Purmerend 1 De lessen deze week We onderzoeken hoe een tekst wordt opgeslagen We maken een nieuw tekstbestand We