Alvorens we het gaan hebben over wat nu HTML en CSS precies is, eerst even wat geschiedenis over documenten.
Veel mensen staan niet stil bij de basis principes van een document en nemen alles aan als normaal. Voor de mens is na verloop van tijd e.a. logisch, maar dit geld niet voor Computers. Een computer programma moet elke keer weer opnieuw, precies weten wat hij moet doen en hoe een document er uit moet zien. In tekst verwerkers wordt deze informatie opgeslagen in z.g. templates, zo slaat Microsoft Word uw standaard document instellingen en opmaak, op in het bestand normal.dot.
Als we naar een pagina kijken, dan hebben we te maken met een bepaalde indeling c.q. layout.
De meeste pagina's hebben een kop, een linker en rechter marge en mogelijk een voetnoot. Ook hebben we natuurlijk te maken met regel afstand, letter type, letter grote, vet, cursief of onderstreepte tekst. Als u een brief schijft of tikt dan heeft u ooit geleerd hoe u deze indeelt.
Voor een computer is e.a. een stuk moeilijker en moet u hem elke keer precies aangeven, hoe u wilt dat de uiteindelijke tekst er uit moet zien.
De tekstverwerker die u gebruikt om uw tekst te laten zien, heeft intern allerlei opmaak commando's die u, normaal gesproken niet ziet en die in een tekstverwerker ook meestal niet interessant zijn, behalve als de tekst er niet uitziet zoals u verwacht. Bewaar een document maar eens als .HTML. Schrik niet als u ziet wat voor een puinhoop, qua dubbele definities, die u dan ziet. Het wordt u dan direct duidelijk hoe slechts de meeste, zo niet alle tekstverwerkers met uw tekst en opmaak om gaan, wat dan meestal wel een gevolg is van uw eigen gedrag, zoals knippen en plakken. Het is voor een programma vaak te moeilijk om te begrijpen wat u zo al doet in het document.
Met de komst van het Internet werd het noodzakelijk dat men een wereldwijde afspraak maakte over hoe men documenten gestandaardiseerd zou moeten opmaken en vormgeven. Die afspraak heeft geresulteerd in de HTML "HyperText Markup Language" standaard. (klik met de muis op HTML om de Wikipedia pagina op te roepen)
Zoals u in de HTML uitleg pagina op wikipedia.nl heeft kunnen lezen is er een organisatie die de afspraken betreffende HTML vastlegt.
Op http://www.W3C.org kunt u meer lezen over deze organisatie, maar belangrijker is, dat deze organisatie u ook via het internet, een HTML en CSS zelf studie aanbiedt op http://www.w3schools.com/html/default.asp. (Vergeet niet uw eigen taal te kiezen, als dat mogelijk is.)
Er zijn afspraken, maar niet al deze afspraken worden opgevolgt, misschien omdat een aantal organisaties, eigenwijs of nog niet in staat zijn alle nieuwe afspraken direct in hun programma's te verwerken. Helaas is de urgentie ook laag, omdat er altijd weer wiz kids zijn die via Javascript een oplossing bieden. Wat men dan echter wel vergeet is dat een javascript een heel stuk langzamer is, dan standaard browser ondersteuning! Niet voor ons, maar voor een Computer is het een verschil van een uur i.p.v. een seconde. Wij mensen merken het pas als onze Computer hardware wat ouder is.
Microsoft Internet Explorer en Microsoft Edge zijn nu, maart 2017, qua HTML 5 ondersteuning nog niet helemaal gelijk aan die van alle andere browsers. Bijvoorbeeld de HTML 5 <details> tag wordt door deze twee nog steeds niet ondersteund.
HTML is eigenlijk de taal die we gebruiken om de indeling van ons document aan te geven. HTML biedt je ook de mogelijkheid om de opmaak qua vormgeving, kleur, letter type en grote aan te geven, maar probeer dat zoveel mogelijk niet te doen!
Als u alles in HTML doet en u wilt bepaalde opmaak vormgeving wijzigen, dan moet u al uw documenten handmatig aanpassen! Gebruik dus in HTML zo min mogelijk vormgeving/stijl definities. De vormgeving c.q. stijl van uw HTML documenten regelt u d.m.v. CSS (Cascading Style Sheets)
HTML bevat de inhoud en indeling van uw document en de opmaak van die inhoud wordt in CSS geregeld.
De opmaak broncode van elk HTML document bestaat uit elementen, in het Engels noemen we dit tags.
Er zijn twee soorten elementen, blok en lijn elementen. De opmaak van een pagina bestaat uit blokken en in die blokken hebben we lijnen of weer blokken met tekst of andere inhoud zoals plaatjes, of verwijzingen naar muziek of filmpjes. Qua vormgeving kunnen we voor bepaalde blokken of lijnen, specifiek aangeven hoe ze opgemaakt moeten worden. Dus duidelijke afspraken over de indeling van bepaalde of verzameling van pagina's, moeten van te voren gemaakt worden. Heeft men goede afspraken gemaakt en zich er aan gehouden!!! Dan is het via een simpele aanpassing in het CSS bestand mogelijk om alle pagina's qua opmaak, aan te passen.
Qua tekst hebben we geen issue wat betreft grote, het blijft platte tekst wat we versturen en de styling bepaald de eventuele grote en lettertype.
Wat plaatjes betreft geld dit niet! Vaak regelt men de opmaak van plaatjes via css of direct bij de html definitie van het plaatje, maar soms zijn de plaatjes qua omvang veel groter of ietsje kleiner en worden die plaatjes door de browser software verkleint of vergroot. De valkuil in deze is een te groot plaatje! Een plaatje dat te groot is, moet wel eerst in zijn geheel via het internet geladen worden. Als we een smartphone gebruiken en er wordt een plaatje van 3MB geladen, terwijl de browser uiteindelijk maar 200KB laat zien, dan heeft u, als pagina aanbieder, bandbreedte verspilt van uw bezoeker. De telecom aanbieders zullen het niet erg vinden, maar uw bezoeker wel!
Stijl uw plaatsjes dus zo min mogelijk via HTML of CSS, maar maak een duidelijke afspraak van te voren, hoe groot u plaatjes wil laten zijn en gebruik uw foto-software om al uw plaatjes op dezelfde grote te maken! Veel software is in staat, om in een keer, alle plaatjes aan te passen. Ook is het mogelijk om verschillende grote van plaatjes in aparte folders op te slaan. javaScript of misschien in de toekomst ook CSS, kan dan bepalen waar de plaatjes vandaan gehaald moeten worden. Uw browser weet hoe groot het scherm is waarop de pagina getoond moet gaan worden en via het uitvragen van uw media kunnen we dan verwijzen naar een andere folder waar de juiste plaatjes voor uw scherm grootte zich bevinden.
Zodra u een adres regel intikt in uw browser of u selecteerd iets in getoonde tekst, dan zoekt uw browser contact met de server van de website die u zoekt of bezoekt en het betreffende bestand wordt dan opgepikt of aangemaakt en naar uw browser gestuurd.
Er is een duidelijk verschil wat dit betreft. We hebben het nameijk over statische of dynamische website inhoud. Veel websites zijn dynamisch, vanwege het feit dat hun inhoud snel verouderd. Informatie, zoals misschien uw familie stamboom, zal qua inhoud niet maandelijks wijzigen. Voor het maken van statische web pagina's kunt u een simpele tekstverwerker gebruiken zoals notepad++.
Voor dynamische pagina's gebruiken we vaak een Content management Systeem oftewel een CMS zoals Joomla, WordPress of Drupal.
In het geval van statische pagina's, bent u verantwoordelijk voor de gehele layout van uw pagina. Een CMS heeft meestal reeds een algemene indeling c.q. layout en kunt u slechts inhoud toevoegen die dan t.z.t. als pagina door het CMS opgemaakt wordt, alvorens de informatie te versturen.
U kunt waarschijnlijk wel na gaan wat sneller is, statisch of dynamisch. Maar voor een Computer maakt dat toch niet veel uit, die zijn razend snel, vergeleken met ons.
Elke website pagina is uiteindelijk gewoon een bestand dat naar u toegestuurd wordt en die uw Browse moet vertalen naar teksten en beelden die wij mensen kunnen begrijpen. Hoe ziet een webpagina er in de basis uit en welke informatie heeft uw browser altijd nodig?
Hieronder staat de basis code die een browser nodig heeft om een pagina op het scherm te laten zien. Klik op de onderstreepte elementen om de w3school uitleg op te roepen.
Als u goed opgelet heeft, dan moet het u opgevallen zijn dat er van elk element een start en een eind element is. <> en </>.. Er is voor elk element een begin en bijna alle elementen of tags hebben een eind tag, behalve bijvoorbeeld <br>.