Bouwstenen
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
geeft als je het opent met een browser dit resultaat:
Het voorbeeld uitgelegd
- 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
XML voorbeeld
JS
