Bouwstenen

 
Bedoeling van dit hoofdstuk is in staat te zijn verschillende technologieën die vaak als "kreet" vernoemd worden in relatie tot website technologie te plaatsen, een idee te vormen over wat die doen. We hebben het hier over HTML5, CSS3, JavaScript, XML,...

HTML5

Wat is HTML?


HTML is de “taal” die gebruikt wordt om webpagina’s te beschrijven. Je browser leest HTML instructies en weet daardoor hoe en wat te tonen
HTML staat voor Hyper Text Markup Language

 

Hypertext en hyperlinks

 

De wezenlijke eigenschap van HTML is dat deze hypertekst ondersteunt: documenten en bestanden die verbonden zijn door direct volgbare verwijzingen, de zogenaamde hyperlinks (in het Nederlands ook wel koppelingen genoemd).


Opmaaktaal


Daarnaast is HTML een opmaaktaal zoals vele andere, met notaties voor het aangeven van nadruk in tekst, van kopjes, van indeling in paragrafen, van tabellen en van afbeeldingen en multimedia.
HTML bestaat uit platte tekst waarin met markeringstekens is aangegeven hoe de tekst moet worden geïnterpreteerd, bijvoorbeeld als lijst of als opschrift. Zo'n markering wordt (naar het Engels) een tag genoemd.

 

Tegenwoordig, volgens de HTML5 standaard, is het de bedoeling dat de tags in het document alleen structuur en algemene eigenschappen van de tekst aangeven, terwijl de details van de presentatie apart van het document worden gespecificeerd, het CSS document. Dit heeft als voordelen dat de opmaak ineens kan worden gewijzigd voor alle documenten tegelijk en dat er verschillende manieren van opmaken kunnen worden gebruikt die bijvoorbeeld toegesneden kunnen zijn op de eigenschappen van de gebruiker (misschien kleurenblind of blind) of het weergevende apparaat (misschien een klein beeldscherm of zwart-wit-papier).

 

HTML zelf voorziet alleen in zeer eenvoudige gebruiksinteractie:
  • het aanklikken van verwijzingen
  • het invullen van tekstvelden
  • het klikken in afbeeldingen

Een min of meer gestandaardiseerde vorm om andere soorten interactie te ondersteunen is het inbedden van scripts geschreven in de taal JavaScript. Daarbij blijft gelden dat HTML niet ontworpen of geschikt is voor het ondersteunen van willekeurige grafische gebruikersomgevingen.

bron: Wikepedia

 

HTML Voorbeeld

Dit fragment HTML:
 

geeft als je het opent met een browser dit resultaat:

 


 

Het voorbeeld uitgelegd

 
Tags komen altijd voor in paren. Wat tussen de paren staat zijn de gegevens waarop de tag dient toegepast. De laatste van het tagpaar begint met een "/"
De tag "h1" betekent dat iets een hoofdtitel (header1) is. Als je dus tussen een koppel h1 en /h1 tekst plaatst, dan zal die een hooftitel worden.
 
  • De DOCTYPE declaratie geeft aan dat wat volgt volgens de HTML standaard is
  • De tekst tussen html en /html beschrijft de web pagina
  • De tekst tussen body en /body bevat de zichtbare pagina inhoud
  • De tekst tussen h1 en /h1 is een hoofdtitel, tussen h2 en /h2 en ondertitel en tussen h3 en /h3 nog een lager niveau titel
  • De tekst tussen p en /p is een paragraaf met tekst
  • Een bullet lijst start en eindigt met ul en /ul (unordered list) en ieder lijntje start en eindigt met li en /li
 
 

CSS3

CSS – Cascading Style Sheets

Wat is CSS?

  • CSS staat voor Cascading Style Sheets
  • Styles definiëren hoe HTML elementen moeten weergegeven worden
  • Styles werden aan HTML 4.0 toegevoegd omdat stijlen opnemen in de HTML tekst niet flexibel was
  • Externe Style Sheets sparen heel wat tijd uit: een CSS definitie wisselen wisselt nu heel de “looks” van je website
  • External Style Sheets worden opgeslagen in CSS bestanden

 

Styles lossen een groot probleem op


HTML was nooit bedoeld om een document te formatteren.
HTML was bedoeld om de inhoud van een document vast te leggen en daarbij wel aan te geven welk soort inhoud iets was (zoals een bulletlijst), maar niet hoe de bullet van de bulletlijst er moest uitzien

 

Toen tags zoals font en kleurattributen toegevoegd werden aan de HTML 3.2 specificatie, ontstond het probleem dat op alle pagina’s die instructies begonnen te verschijnen, en het veel tijd begon te kosten om een homogene stijl te garanderen op je website. Door vanaf HTML 4 het concept van CSS te introduceren is nu het formateringsdetail losgekoppeld, en kun je vlot de looks van een hele website wijzigen zonder iets aan de HTML te moeten wijzigen.

 

CSS definieert hoe de HTML elementen worden weergegeven. 

Stijlen worden bewaard als externe .css bestanden. Wijzig die, en heel je website wijzigt qua looks!
 

Voorbeeld van een CSS sheet:


body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
 

 

XML

 

XML – eXtensible Markup Language
 
Dit lijkt op HTML. Deze taal wordt gebruikt als uitwisselingstaal om gegevens uit te wisselen tussen toepassingen. Het is het “esperanto” tussen verschillende toepassingen.
 
XML is ontworpen om data te transporteren en op te slaan.
 

XML voorbeeld



 
 
Source: https://www.w3schools.com/xml/
 

 JS

JS staat voor JavaScript. Talen zoals HTML en CSS zijn beschrijvend. Je kunt daar niet echt programma's mee schrijven die complexe interacties besturen. Dan heb je een echte programmeertaal nodig. 
Met de introductie van JavaScript ontstonden de eerste mogelijkheden om webpagina's interactief te maken. Dit werd later Dynamic HTML genoemd.
 
Het trio HTML5, CSS3 en JS zijn de aanbevolen combinatie van tools om een moderne website mee op te bouwen die op de meeste platformen kunnen werken. Blijf zeker weg van tools zoals "Flash" (Adobe) en "Silverlight" (Microsoft), omdat deze de mogelijkheid van gebruik op tablet pc's, smartphones hypothekeren