Inleiding
Deze module is gemaakt om de basis te leren van HTML en CSS. In deze module zullen zoveel mogelijk de Nederlandse termen gehanteerd worden en tevens zullen enkele populaire sneltoetsen aan bod komen. De module bestaat voornamelijk uit uitleg, tips en opmerkingen waarmee je direct aan de slag kunt.
Opzet van de module
De module begint met het uitleggen van de basisbeginselen van HTML. HTML staat voor Hyper Text Markup Language. Een mannier om gewone tekst vorm te geven en voorzien van hyperlinks. We laten je zien hoe je eenvoudig een begin kunt maken met een nieuwe website. Ook kijken we naar het vormgeven van teksten, afbeeldingen en hyperlinks met behulp van CSS.
De basisstructuur
Een project starten
Om te beginnen maak je een projectmap aan in de xampp hoofdmap. Noem deze HTML. Hierin sla je alle bestanden op van deze website (Denk hierbij bv. aan alle html-, jpg-, pdf-, en mp3-bestanden.). In de map maak je een bestand genaamd index.html hierin ga je werken. Als je jouw website wilt bekijken open je in jouw browser het adres http://localhost , en klik je op de map HTML.
Als laatste is het nog belangrijk om te weten dat de eerste pagina van een website (de homepage) altijd de naam index.html heeft. Alle andere pagina's van uw website mag je zelf een naam geven.
Beginnen met coderen
Op de onderstaande afbeelding ziet je de basisstructuur die geldt voor elke website. Je kunt deze code overnemen om met een website te beginnen. De code begint met een zogenaamde html-open-tag en uiteindelijk sluit de code met de html-sluit-tag. Een tag kunt je het beste zien als een label en alles wat als een tag staat genoteerd in de HTML code zal niet zichtbaar worden voor de bezoekers van jouw website. De html-sluit-tag wordt gekenmerkt door de slash ('/') die in de tag staat en zodoende is er door de open- en sluit-tag een zogenaamde HTML-container gevormd. Het is de bedoeling dat de website zich volledig bevindt binnen de HTML-container.
Binnen de HTML-container bevinden zich nog twee andere containers. Als eerste zien we de head-container gevolgd door de body-container. De inhoud van de head-container wordt niet getoond op de website. De head wordt onder andere gebruikt om de website te omschrijven, wat vervolgens interessant is voor zoekmachines. De body-container is wél het zichtbare gedeelte van de website. Hier zal de inhoud van de website zoals paragrafen, afbeeldingen en andere media getoond worden.
Om de basisstructuur volledig te maken is het ook nodig om de gebruikte HTML versie te definiëren. Tijdens deze cursus gaan we aan de slag met HTML5 en dat kunnen we aangeven door <!DOCTYPE html> direct boven de HTML container te zetten. Naast deze toevoeging zijn er nog enkele toevoegingen nodig om de basisstructuur te voltooien.
Als eerst is het verstandig een titel-container te plaatsen in de head van de website.
<title>Diverse fabels.</title> (let op de Engelse spelling). Het is een belangrijke container omdat hiermee aangegeven wordt waar de website over gaat. Onder andere Google hecht ook aardig wat waarde aan de inhoud van deze container: dus vergeet hem niet.
Vervolgens dient er nog aangegeven te worden welke karakters gebruikt worden op de website. Door de code <meta charset="utf-8"> te plaatsen in de head van de website geeft je aan dat je alleen karakters gebruikt die in de utf-8 verzameling zitten. Deze verzameling omvat onder andere het Latijnse alfabet.
Uiteindelijk ziet de HTML code eruit zoals op onderstaande afbeelding:
Toevoegen van tekst
Een logische volgende stap bij het maken van een website is het toevoegen van content. In dit hoofdstuk zullen we ons beperken tot het toevoegen van een paragraaf met tekst en een bijbehorende titel.
Een titel
Het plaatsen van een titel boven een paragraaf gaat als volgt. Binnen de body-container in de HTML code plaatst je de volgende code <h1>De haas en de schildpad</h1>. De h1-tag zorgt ervoor dat de tekst in de h1-container wordt gezien als een titel (de h van deze tag staat voor header). Zoals de h1-container is bedoeld voor een hoofdstuk titel zo kunt je de h2-tag gebruiken voor een subparagraaf van dat hoofdstuk. Uiteindelijk kunt je subparagrafen plaatsen tot het niveau van de h6.
Een paragraaf
Het plaatsen van de paragraaf met tekst onder onze vers gemaakte titel gaat op een soortgelijke wijze als de titel. Het verschil is alleen dat er nu niet gebruikgemaakt wordt van de h1-tag maar juist van de p-tag (de p staat hier voor paragraaf). Plaats daarom deze <p>...</p> container onder de titel. Je kunt de drie puntjes vervangen voor deze interessante tekst.
Het eindresultaat zal er ongeveer uitzien zoals op onderstaande afbeelding. De gebruikte tabs voor het inspringen van de regels kunt je ook overnemen om de code meer leesbaar te maken, maar het is niet verplicht.
Bekijk het resultaat in een browser
Aan het einde van dit hoofdstuk is het moment daar om jouw inspanning te bewonderen. Het index.html bestand die je heeft geschreven in de teksteditor kan bekeken worden in jouw browser. Open hiervoor jouw browser en ga naar http://localhost. Onderstaande afbeelding laat het resultaat zien.
Tip: als je een wijziging aanbrengt in de code dient je eerst de code op te slaan alvorens op de refresh-knop (of de F5 toets op jouw toetsenbord) te drukken in jouw browser om de wijzigingen ook daadwerkelijk te zien.
Plaatsen van afbeeldingen
Een foto zegt meer dan duizend woorden en een website zonder afbeeldingen is maar saai. Daarom is het een goed idee om weer een stukje content toe te voegen, dit keer een illustratie.
De img-tag
Om een afbeelding te plaatsen gebruiken we de img-tag (img staat voor image). Maar voor dat we deze in de code plaatsen is het een goed idee om eerst een afbeelding toe te voegen aan de website-map.
Plaats de afbeelding die je hieronder kunt downloaden in een subfolder in de website-map. Geef deze sub-folder zelf een logische naam en houdt er rekening mee dat bestands- en map-namen hoofdlettergevoelig zijn. In mijn voorbeeld noem ik de map images.
Je kunt hier een afbeelding downloaden die geschikt is voor de website. Hij is transparant en niet te groot. Afbeeldingen kun je vergroten en verkleinen met behulp van een fotobewerkings programma. Een voorbeeld hiervan is GIMP. GIMP is gratis en open source. Het is hier te downloaden: https://www.gimp.org/
Vervolgens zijn we klaar om de code voor de afbeelding te plaatsen. Wanneer je de cursor op een nieuwe regel onder de sluit-tag van de paragraaf zet kunt je deze code typen; <img src="images/haas.png" alt="Een afbeelding van een haas." >. De code ziet eruit als op onderstaande afbeelding. Bekijk het resultaat in uw browser.
Tip: plaats ook altijd het alt-attribuut (alt staat voor alternatief). Deze wordt weergegeven wanneer de foto niet gevonden kan worden en hij wordt voorgelezen door zogenaamde screen readers die worden gebruikt door gehandicapten. Wederom hecht onder andere Google er waarde aan.
Creëren van hyperlinks
De letters HT in de afkorting HTML staan voor Hypertext. En met het woord hypertext worden klikbare woorden (links) bedoelt in een stuk tekst. Deze hyperlinks zorgen ervoor dat het World Wide Web vanaf verschillende locaties aan elkaar gekoppeld is. Laten we ook een hyperlink toevoegen aan onze website.
Het anker
Het plaatsen van de code voor een hyperlink is relatief eenvoudig wanneer je de code weet. Maar voordat we de code gaan plaatsen is het verstandig eerst vast te stellen wat het klikbare gedeelte wordt (het zichtbare gedeelte van de link). Ik stel voor dat we binnen onze eerder geplaatste paragraaf container een extra stukje tekst opnemen. Achter de laatste zin van de paragraaf die eindigt met de woorden geen adem meer om te kunnen antwoorden. kunt je de tekst Meer info toevoegen. Van deze laatste twee woorden is het de bedoeling dat ze een hyperlink worden. Om dat te doen plaats je een a-container om de twee woorden heen, zie onderstaande afbeelding.
Als laatste is het nog nodig om deze hyperlink (de a-tag staat voor een anker) ook daadwerkelijk ergens naar verwijst. Dat kunt je doen door een extra zogenaamd attribuut te plaatsen binnen de open-tag van het anker. Net na de a maar nog binnen het groter dan teken > voegt je een spatie toe en typt je deze code href="https://nl.wikipedia.org/wiki/De_haas_en_de_schildpad". Je kunt het toegevoegde attribuut href aan de open-tag van het anker lezen als "het anker refereert naar". Houdt er tevens rekening mee dat het volledige webadres moet worden opgegeven incl. de tekst https://
Uiteindelijk ziet de code er als volgt uit.
Een extra target attribuut
Wanneer je de website bekijkt in de browser en je klikt op de link dan zult je de huidige website verlaten om op de website van Learnit te belanden. Soms is het niet prettig dat je op een dergelijke manier bezoekers kwijt raakt. Het is soms dus wenselijk dat de nieuwe website wordt geopend in een nieuw tabblad of venster. Om dit voor elkaar te krijgen kunt je nog een attribuut toevoegen aan de open-tag van het anker. Wanneer je achter het laatste aanhalingsteken van het href-attribuut wederom een spatie plaatst gevolgd door deze code target="_blank" dan zal, wanneer je de webpagina opnieuw laadt in jouw browser, de link openen in een nieuw tabblad. Deze code ziet er dan als volgt uit.
Test het resultaat in jouw browser:
Tekst vormgeven met CSS
Tot nu toe hebben we te maken gehad met de standaard vormgeving van de browser wanneer deze HTML code kreeg voorgeschoteld. Deze standaard vormgeving heeft er waarschijnlijk voor gezorgd dat de geplaatste content links is uitgelijnd, alles onder elkaar staat, de tekst zwart is en het lettertype een schreef heeft. Wanneer we iets meer willen dan de standaard vormgeving is het gebruik van CSS code de beste oplossing. In de onderstaande oefening gaat je met deze CSS code aan de slag.
Een externe stylesheet aanmaken
De code die we gebruiken voor de vormgeving plaatsen we in een aparte tekst bestand. Je kunt met jouw teksteditor een nieuw document aanmaken en deze vervolgens in een sub-map van jouw website-map opslaan. Een logische naam voor de sub-map zou css zijn. Je mag de naam voor het css bestand zelf kiezen. In het voorbeeld heet het css bestand layout.css. In dit nieuwe tekst bestand plaatst je de onderstaande code.
Omdat de teksteditor Atom in het voorbeeld kleur geeft aan bepaalde elementen is het eenvoudig om de verschillende onderdelen te omschrijven. De CSS code begint met het rode woord body. Alle rode tekst in de CSS file worden kiezers genoemd en ze verwijzen naar de HTML elementen die je eerder heeft getypt in het HTML bestand. Het woord body verwijst dus naar de body-container in de HTML en dat is het volledige, zichtbare vlak in jouw browser. Door aan die body-kiezer een eigenschap background-color toe te voegen is het mogelijk de achtergrondkleur van de website te veranderen van wit naar licht grijs. De gele waarde die toegekend is aan de eigenschap achtergrondkleur is een hexadecimale kleurcode. Je kunt deze kleurcode bij https://www.w3schools.com/colors/colors_picker.asp opzoeken.
Tussen de eigenschap en de toegekende waarde wordt altijd een dubbele punt geplaatst en na elke toegekende waarde wordt altijd een puntkomma geplaatst om onderscheid te maken met de volgende eigenschap. Tot slot kunt je aan de body-kiezer meerdere eigenschap-regels toevoegen en al die regels worden door middel van de accolades { } bij elkaar gehouden.
Tip: de komma tussen de h1 en de p-kiezer kunt je het beste lezen als een "en". Als je de komma in dit voorbeeld weglaat zal geen enkele tekst Arial worden en zal de paragraaf niet inspringen met 10 pixels.
Een externe stylesheet koppelen aan de HTML
Als je wilt dat het nieuwe CSS bestand ook daadwerkelijk wordt meegenomen (ingelezen) tijdens het openen van het HTML bestand dan is het nodig dat je in de head van het HTML bestand een verwijzing opneemt naar het nieuwe CSS bestand. De code hiervoor ziet er als volgt uit.
Er wordt een link-tag geplaatst in de head. Hiermee wordt er een koppeling gelegd naar een ander bestand. Vervolgens heeft je het attribuut href al eerder gezien bij het maken van een link in het vorige hoofdstuk. Belangrijk in dit geval is dat je naast de bestandsnaam van de CSS bestand ook het zogenaamde pad naar dit bestand opgeeft. In dit voorbeeld wordt de bestandsnaam voorafgegaan door de map-naam waar het bestand zich in bevindt. Uiteindelijk is er nog een tweede attribuut toegevoegd, namelijk het rel attribuut. Dit attribuut kunt je het beste lezen als "relatie". De waarde die aan het rel-attribuut is toegekend is "stylesheet". M.a.w. de link/relatie die gemaakt wordt is naar een CSS bestand. (Je kunt ook een link leggen naar een javascript bestand en dan zal de waarde van het attribuut rel geen stylesheet meer zijn.) Bekijk het resultaat in jouw browser, als het goed is komt het overeen met onderstaande afbeelding.
Navigatie toevoegen
Wanneer je een website maakt zal deze waarschijnlijk niet bestaan uit één pagina. In een later hoofdstuk gaan we daarom een aantal pagina's toevoegen. Om vervolgens op een van die andere pagina's terecht te komen hebben we behoefte aan een navigatiemenu. En dat is wat we in de volgende oefening gaan maken.
Een lijst opstellen
HTML heeft de mogelijkheid om een opsommingslijst te maken. Neem de onderstaande code over als je ook een navigatiemenu wilt maken.
Zoals je in de bovenstaande code kunt zien is er een lijst gemaakt bestaande uit vier items. Deze lijst begint met de ul-open-tag en eindigt met de ul-sluit-tag. Deze ul staat voor "unordered list" (ofwel een niet genummerde lijst). In deze ul-container zitten li-open- en li-sluit tags. Li staat in dit geval voor "list-item". Wanneer u het resultaat in de browser bekijkt ziet je een opsommingslijst bovenaan de pagina. Van deze lijst gaan we het navigatiemenu maken.
Ankers toevoegen aan het navigatiemenu
Om de menulijst ook daadwerkelijk te laten functioneren is het toevoegen van ankers noodzakelijk. Binnen de li-container plaatsen we een a-container zodat alle items in de lijst klikbaar worden. Zie de onderstaande afbeelding voor de code.
Omdat we nog geen andere pagina's hebben zal het menu nog niet werken, dat gaan we in het hoofdstuk "Pagina's toevoegen" oplossen.
Navigatie verfraaien met CSS
Momenteel staat er bovenaan onze pagina een aantal links in een lijst. Voor de lijst staan bullets en de items staan onder elkaar. Voor ons navigatiemenu is een andere opmaak gewenst. Voeg de onderstaande code toe onder de laatste regel van jouw CSS bestand en bekijk het resultaat.
- Wanneer er display:inline; wordt opgegeven voor een li in de stylesheet dan zorgt dat ervoor dat de bullet-lijst niet onder elkaar komt te staan maar naast elkaar. Tevens verdwijnen de bullets.
- De margin-left:20px; zorgt ervoor dat de items onderling niet tegen elkaar staan maar links nu 20 pixels afstand houden.
- De kleur die opgegeven is bij de a-kiezer (geldt voor alle ankers/links) maakt alle ankers/links wit.
- Bij dezelfde a-kiezer is ook nog een eigenschap text-decoration opgegeven wat ervoor zorgt dat de standaard streep onder elke link verdwijnt.
- Tot slot is er nog een a:hover-kiezer toegevoegd die ervoor zorgt dat wanneer een bezoeker met de muis over de link beweegt de link een andere (oranje in dit geval) kleur krijgt.
Elementen positioneren
Het positioneren van de verschillende elementen kan soms een hele uitdaging zijn. Wanneer je het positioneren van de verschillende elementen volledig in de vingers heeft dan bent je een behoorlijk eind op weg met het maken van websites. In de onderstaande oefening komen een aantal belangrijke technieken voorbij.
Een afbeelding in de tekst uitlijnen
Om de afbeelding onder de tekst te verplaatsen tot rechts naast de tekst moeten we twee wijzigingen doorvoeren. Verplaats in het HTML bestand de <img> -tag van onder de paragraaf nu voor (boven) de tekst nog wel binnen de <p> -tag.
En vervolgens voegen we onderop een extra regel toe in het CSS bestand, zie afbeelding.
De HTML code
De CSS code
Het geheel positioneren
Om de totale content beter te presenteren wordt er in de onderstaande code een nieuw HTML-element in de body geplaatst. Deze nieuwe HTML-container heet div (een div staat voor division (gebied)). Door een div direct na de body-open-tag te plaatsen en hem vervolgens af te sluiten vlak voor de body-sluit-tag hebben we nu alle content in een nieuwe container gezet. Deze nieuwe container kunnen we met behulp van de CSS stylesheet positioneren en vormgeven. Je kunt de onderstaande code overnemen voor een mooier resultaat.
De HTML code - Er is hier een extra div-container om de content gezet.
De CSS code - De div wordt gepositioneerd en vormgegeven.
Meer CSS code - Een toevoeging bij de paragraaf en een extra kiezer voor de ul
Het eindresultaat zal er dan zo uitzien
Door de div in de stylesheet een breedte, een hoogte en een kleur te geven wordt hij zichtbaar in de browser. Door vervolgens de linker en de rechter marge op automatisch te zetten zal de div-container gecentreerd worden op de pagina. De div wordt als laatste de eigenschap border-radius meegegeven. Deze eigenschap geeft de div "ronde hoeken".
Om ervoor te zorgen dat de tekst niet direct tegen de rand aan staat plaatst je de padding eigenschap bij de h1 en de p. De vier waarden staan achtereenvolgens voor de Noord, Oost, Zuid en de West kant van de tekst.
De ul heeft de eigenschap float zodat deze zich beter bovenin de div laat positioneren. Door een breedte van 700 pixels op te geven neemt de ul de volledige breedte van de div in beslag.
Tip: wanneer je de ul een tijdelijke achtergrondkleur geeft wordt deze zichtbaar en kunt je hem makkelijker positioneren.
Nog meer elementen
Om een HTML pagina vorm te geven zijn er nog veel meer tags beschikbaar. Een overzicht van alle tags is te vinden op https://www.w3schools.com/tags/default.asp. Hieronder een overzicht van veel gebuikte elementen. Sommige tags bestaan uit een start en een eindtag, andere bestaan uit één tag. Probeer een paar tags uit in jouw HTML document.
| Tag |
Functie |
| <a>..</a> |
Een hyperlink maken. |
| <b>..</b> |
Maak tekst vet gedrukt. |
| <br> |
Voegt een regeleinde toe. |
| <canvas>...</canvas> |
Wordt gebruikt om afbeeldingen te tekenen via scripting (meestal JavaScript). |
| <div>...</div> |
Deze tag definieert een divisie of een sectie in een HTML-document. |
|
<h1>..</h1>
...
<h6>..</h6>
|
Definieert 6 niveau's van HTML-koppen. |
| <hr> |
Maakt een horizontale lijn. |
| <i>..</i> |
Maakt tekst schuin gedrukt. |
| <img> |
Voegt een afbeelding toe. |
| <ul>..</ul> |
Start een niet geordende lijst. |
| <ol>..</ol> |
Start een geordende lijst (bijvoorbeeld 1 t/m ... of a t/m ...) |
| <li>..</li> |
Voegt items toe aan een geordende en of niet geordende lijst. |
| <p>../<p> |
De tag <p> definieert een alinea. |
|
<table>..</table>
<tr>..</tr>
<th>..</th>
<td>..</td>
|
Deze tags worden bebruikt om tabellen te maken. |
| <u></u> |
Maakt de tekst onderstreept |
Een footer maken
Om de pagina af te sluiten worden de meeste sites voorzien van een footer. In de footer staat vaak de naam van de maker, een copyright vermelding en contactgegevens.
Tabellen
In de footer gaan we gebruik maken van een tabel. Dit HTML emlement maakt gebruik van de volgende tags:
| <table> |
Deze tag wordt gebruikt voor het definiëren van een tabel. |
| <th> |
Met deze tag worden de kopjes van de kolommen aangeven. De afkorting staat voor table heading. |
| <tr> |
Hiermee worden tabellen onderverdeeld in rijen. De afkorting staat voor table row. |
| <td> |
Met deze tag worden rijen onderverdeeld in cellen. De afkorting staat voor table data |
Voeg de volgende code toe aan het HTML bestand:
Door het CSS bestand aan te passen kunnen we het uiterlijk laten aansluiten bij de rest van de pagina:
Pas nu de tekst aan met jouw eigen gegevens en bekijk het resultaat.
Pagina's toevoegen
Nu de vormgeving aardig gevorderd is komt het moment om de andere drie pagina's te maken. Dit is de laatste stap voor het voltooien van de website.
De index kopiëren
De resterende drie pagina's gaan we maken door drie kopiën te maken van de index.html. Ga hiervoor met de Windows verkenner naar jouw website-map. Door middel van rechts te klikken op het index.html bestand kunt je het kopiëren om het vervolgens direct weer, met de rechtermuisknop te plakken. Herhaal deze stap nog twee keer om zo uiteindelijk drie kopieën te hebben van de oorspronkelijk index.html. Door wederom rechts te klikken kunt je de bestandsnaam wijzigen. Geef de drie nieuwe bestanden de volgende namen:
- krekel.html
- vos.html
- leeuw.html
Als laatste is het nu zaak om de titel en paragraaf teksten te veranderen van de drie nieuwe pagina's. Open daarom de drie bestanden met jouw teksteditor en wijzig de inhoud van de h1- en de p-container. Je kunt hiervoor drie teksten gebruiken uit dit tekstdocument.
Wanneer je ook de afbeeldingen krekel.jpg, vos.jpg en leeuw.jpg in de map images plaatst, en je wijzigt in de code de bestandsnamen van de afbeeldingen, dan hebben we een logisch geheel.
De fijne afstelling
Wanneer de gehele website gebruik maakt van 1 CSS bestand is het eenvoudig om de vormgeving aan te passen. Door de volgende regels te wijzigen of toe te voegen ziet de site er totaal anders uit
- Verander van de body-kiezer de achtergrondkleur in #00B4FF;
- Verander van de h1- en p-kiezer de padding in 0px 20px 0px 20px;
- Voeg deze regel toe aan de kiezers h1 en p color:#ffffff;
- Verander van de a-kiezer de kleur in #ffffff;
- Voeg bij de a-kiezer deze code toe text-shadow: 2px 2px 2px #00B4FF;
- Verander bij de div-kiezer de hoogte in height:500px;
- Verander bij de div-kiezer de achtergrondkleur in #e35226;
- Voeg deze regel onder aan de stylesheet toe ul li {font-variant: small-caps;}
Diagnostische toets
Opdracht 1
Maak een website met vier pagina's die er uitziet als op de onderstaande afbeelding.
Let in jouw code op de volgende zaken:
- Gebruik tags op de juiste mannier.
- Staan alle tags op de juiste plek?
- Gebruik tabs of spaties om in te springen.
Gebruik hiervoor de teksten in dit bestand en de afbeeldingen uit dit bestand.
Opdracht 2
Opdracht 2:
Maak een website over een onderwerp naar keuze.
Gebruik HTML en CSS.
Voorbeeld Website
https://edu.hethooghuis.nl/informatica/html-demo/index.html
Gebruik de hulpmiddelen voor ontwikelaars om de bron te bekijken ( ctrl + shift + i )
