Workshop HTML/CSS

Tijdens deze workshop leert u de basis van HTML en CSS. Hiermee kunt u een eenvoudige website maken. Dat doet u op uw eigen computer. Daarvoor heeft u een tekst-editor nodig. Op een Windows computer is Notepad (kladblok) daarvoor te gebruiken. Ook Wordpad is geschikt, maar dan moet u de gemaakte tekst-files opslaan als 'plane text'. Er zijn betere editors beschikbaar, bijvoorbeeld 'Notepad++', die u kunt vinden op Portableapps.com.

In de workshop worden een aantal onderwerpen behandeld, waarbij, na een korte introductie, de nadruk ligt op het zelf doen. U krijgt een verzameling webpagina's aangeboden waarvan u de broncode kunt bekijken in de browser (met Ctrl-U). Tijdens de workshop krijgt u de broncode van alle pagina's ook aangeboden op uw computer. In de broncode kunt u wijzigingen aanbrengen en/of dingen toevoegen (oefeningen!). Het resultaat bekijkt u in de browser. Op deze manier ontdekt u zelf de mogelijkheden van HTML en CSS.

HTML en CSS hebben veel opties, te veel om allemaal te kennen. Veel zult u moeten opzoeken op internet. Dat kan natuurlijk met de gebruikelijke zoekprogramma's, maar er is een aantal sites, waar we veel kunnen vinden en ook kunnen uitproberen. Dat is wel allemaal in het Engels. Deze workshop wijst u de weg bij deze zoektocht. In onderstaande tabel zijn enkele sites genoemd.

W3schools.com Een handige site voor opzoeken en uitproberen. In het menu staan onder "HTML Tag List" (vrijwel) alle HTML-tags in een lijst. Je kunt ze uitproberen en ermee experimenteren.
Tutorialspoint Een site met diverse online cursussen, waaronder HTML en CSS.
MDN-Web-Docs Een site met uitgebreide documentatie, ook voor beginners.
W3docs Op deze site kunt u veel vinden over HTML en CSS (en andere zaken).
html-online Dit is een online HTML-generator waarmee snel het effect van parameters uitgeprobeerd kan worden. Kijk vooral eens naar de 'cheat sheets'.
excel-to-html. Als u data in een Excel-file heeft staan, kunt u die omzetten in - converteren - een HTML-tabel. Dat kan direkt in Excel, maar ook op deze online site.
kleuren Kleuren - kleurnamen en codes - kunnen hier worden geselecteerd.

Een webpagina en een website

Een website bestaat meestal uit meerdere pagina's, die onderling gekoppeld zijn door links, u allen bekend. Links worden ook gebruikt om naar een andere plaats in dezelfde pagina te springen. Zo'n link wordt een bookmark genoemd. Zoals u weet, worden links ook gebruikt om externe pagina's te openen of dingen te downloaden.

Een pagina bestaat uit inhoud, dus tekst en o.a. plaatjes, en opmaakcommando's. De opmaak-taal is HTML, HyperText Markup Language. Met HTML alleen kunnen we webpagina's en zelfs een complete website maken. Om redenen die later aan de orde komen, wordt als extraatje voor de opmaak ook vaak de opmaak-taal CSS gebruikt: Cascading Style Sheets.

Als u een website op uw computer heeft gemaakt, kunt u hem in de browser uittesten. Het is echter nog geen website in de echte betekenis van het woord, want hij staat nog niet op het web (= het internet), anders gezegd, de website is niet online.

De webserver

Een website wordt geplaatst op een computer die 24/7 aan het internet gekoppeld is. Op die computer draait een programma, de zogeheten webserver. De webserver 'luistert' op bepaalde 'poorten' van de computer of er een vraag naar een webpagina binnenkomt. Als dat zo is, zoekt of maakt de webserver die pagina en stuurt hem naar de aanvrager.
Die aanvrager wordt een 'client' genoemd en dat is in de meeste gevallen een browser. Het opvragen van een pagina gebeurt doordat u op een link klikt.

De hosting provider

Het beschikbaar maken van een website op een webserver wordt hosting genoemd. Informatie hierover staat (in het Engels) beschreven op de site MDN-Web-Docs. Het bedrijf dat die webserver beheert is de hosting provider. Er zijn zeer veel hosting providers, die verschillende 'pakketten' tegen verschillende kosten aanbieden. Vergelijkingsites kunnen u helpen bij het kiezen van een hosting provider.
Belangrijke zaken waarop gelet moet worden zijn:

De meest eenvoudige webpagina

We eindigen deze introductie met een eerste kennismaking met HTML. HTML is een opmaaktaal waarmee de inhoud - tekst, foto's, documenten - op een bepaalde manier zichtbaar wordt gemaakt in de browser. Die opmaak gebeurt mat tags. Inhoud en tags worden met de tekst editor in een file getypt en de browser herkent zo'n html-file als die de extentie .html heeft.

Elke webpagina begint met de tag <html> en eindigd met </html>.
De inhoud van de pagina staat tussen de tags <body> en </body>. De meest eenvoudige webpagina ziet is dus hier. Bekijk de broncode in de browser met [Ctrl-U].

U ziet dat de tekst doorloopt, d.w.z. er wordt niet overgegaan op een nieuwe regel. Dat is normaal in HTML, maar dat kan allemaal veranderd worden door tags voor de opmaak te gebruiken.
Als we toch een iets beter leesbare pagina willen maken, kunnen we de tekst plaatsen tussen de tags <pre> en </pre>, zoals in deze pagina. De letters zijn dan wel weer erg klein. Ook dat kunnen we aanpassen en hoe dat moet zien we in het eerste onderdeel van de workshop: HTML: de basis.