Summary
samenvatting informatica html
- Course
- Level
dit is een samenvatting van informatica over HTML
[Show more]
Seller
Follow
annaSpijkerman
Content preview
1 HTMLHtml is de basis voor het maken van websites
1.1 Wat heb je nodig?
Hoewel je op heel veel manieren een website kunt bouwen is kennis van HTML altijd nodig. Vandaar
dat we beginnen met HTML. Om met HTML te kunnen werken hebben we een editor nodig waarmee
we de HTML pagina’s kunnen maken. Er zijn veel (vaak gratis) editors via internet te downloaden. De
meest gebruikte voor Windows is wel Notepad++. Te downloaden via
http://sourceforge.net/projects/notepad-plus/files/
Eenmaal gedownload is het een kwestie van installeren door er op te dubbelklikken. Wil je de editor
liever gebruiken vanaf je usb-stick, maak dan gebruik van deze link:
http://portableapps.com/apps/development/notepadpp_portable
1.2 De basis
HTML is de afkorting van HyperText Markup Language. Met HyperText wordt tekst bedoeld met
directe verwijzingen in de vorm van aanklikbare links. Je hoeft dus niet meer via een index te zoeken
maar kunt rechtstreeks van de ene pagina naar de andere springen. Markup betekent dat de taal uit
markingstekens bestaat waarmee je aangeeft hoe de tekst opgemaakt moet worden. Wanneer we
een HTML-pagina (zeg maar een internet pagina) willen maken doen we dat door in een editor met
gewone tekst en een aantal opdrachten aan te geven hoe de pagina eruit moet gaan zien. Willen we
gewone tekst laten zien dan kunnen we dat ook min of meer normaal typen. Maar we hebben wel
codes nodig die vertellen hoe de tekst eruit komt te zien en waar de tekst komt te staan.
Bijvoorbeeld:
<title>Mijn eerste pagina</title>
Wat je hier ziet noemen we een element. In dit geval het element waarmee de titel van een pagina
wordt gemaakt. Een element bestaat uit tags met daartussen tekst of iets anders dat je op jouw
HTML-pagina wilt hebben. <title> en </title> zijn de tags. Tags staan altijd tussen < en >. Je hebt vaak
een begintag en een eindtag die aan elkaar gelijk zijn behalve dat de eindtag tussen de haken begint
met een /. We kunnen echter niet volstaan met alleen maar elementen op de pagina te plaatsen. We
zullen eerst moeten aangeven wat voor soort pagina het is. En daarnaast moeten we met de pagina
ook de indeling en plaatsing van de elementen vastleggen. Om een webpagina te maken moet je je
houden aan een aantal regels. Hoewel de meeste browsers erg soepel zijn als je je er niet aan houdt
is het uiteraard alleen maar verstandig die regels zo goed mogelijk toe te passen.
Let op: in deze cursus houden we ons aan de regels die gelden voor HTML5.
Niet iedere browser ondersteunt HTML5. Met name Internet Explorer (IE) blijft
op dit gebied nog erg achter. Pas vanaf versie 9 ondersteunt IE HTML5. Het is
dus verstandig tijdens deze cursus te werken met browsers die HTML5 wel
goed ondersteunen. Dit zijn bijvoorbeeld Mozilla Firefox, Google Chrome,
Opera en Safari.
,Wanneer we beginnen met een HTML 5 pagina wordt op de eerste regel altijd het type document
aangegeven. Dat doe je met:
<!DOCTYPE html>
Hiermee geef je aan dat de pagina van het documenttype HTML is. Je kunt hier ook een ander type
gebruiken en afhankelijk van het type zal de browser strenger of minder streng zijn in het toepassen
van de regels.
Overigens is <!DOCTYPE> de enige tag die gewoonlijk met hoofdletters geschreven wordt hoewel dit
niet verplicht is in HTML 5. Alle andere tags schrijven we in kleine letters alhoewel ook hiervoor weer
geldt dat tags in hoofdletters net zo goed werken. Ook is <!DOCTYPE> van het void-type. Dat
betekent dat deze tag geen eindtag heeft. (dus geen </!DOCTYPE> ofzo) Na de <!DOCTYPE> tag volgt
de eigenlijke webpagina. Iedere webpagina begint en eindigt met de HTML-tags. En binnen die HTML
tags bevinden zich het head gedeelte en de body. In het head gedeelte komen vooral die zaken te
staan die niet zichtbaar zijn op de pagina maar wel van belang zijn voor hoe de pagina op het scherm
verschijnt. In de body komen de delen die straks wel zichtbaar zullen zijn. Samengevat ziet een
webpagina er dus tenminste zo uit:
In het vervolg van deze cursus zul je nog veel zaken tegenkomen die in de head sectie of in de
body komen. Maar altijd zal de opbouw van een pagina gelijk zijn aan dit voorbeeld.
De pagina begint met:
<html lang="nl">
De HTML tag dus maar er wordt meteen mee aangegeven dat het om een pagina in het Nederlands
gaat. Aangezien je kunt zoeken op pagina's die in een bepaalde taal geschreven zijn en bovendien
moderne browsers ook pagina's kunnen vertalen is het handig om aan te geven in welke taal de
pagina geschreven is.
lang noemen we hier het attribuut en "nl" is dan de attribuutwaarde.
Daarna komt de head sectie:
, Zoals je ziet wordt binnen de head sectie alles ingesprongen. Overigens had je het <title>
deel ook op de volgende manier kunnen invoeren:
Maar wanneer begin- en eindtag op één regel passen doen we dat meestal niet. Met <meta
charset="utf-8"> geven we informatie over de website. De meta-tag wordt voor allerlei
informatie gebruikt. Zoekmachines gaan vaak op zoek naar de meta informatie van de website
om die zo te indexeren. In dit voorbeeld wordt met de meta tag aangeven in welke karakterset
de pagina geschreven is en dus moet worden afgebeeld. In de utf-8 karakterset zijn de unicode
karakters vastgelegd. Daarmee kunnen we er redelijk vanuit gaan dat alle karakters wereldwijd in
de browsers goed worden afgebeeld. Welke tekens precies onder utf-8 vallen en welke niet, is
nog best ingewikkeld. Onthoud: dat zo’n beetje alle letters en cijfers en tekens die op je
toetsenbord voorkomen zoals < > ? / ! @ # $ ; : “ en ‘ allemaal wel mogen. De letters die je
samenstelt mogen niet dus: ë é â mogen bijvoorbeeld niet en speciale tekens al dan niet uit een
ander alfabet ook niet. Α β π © . Je kunt deze tekens wel samenstellen uit UTF-8 tekens. Meestal
Google ik op “HTML Special Characters” en ik vind genoeg sites met de juiste codes, Zo is de code
voor ë ë en voor het euro teken: € (die punt komma moet er echt achter)
Met <title>Mijn pagina</title> wordt de paginatitel vastgelegd. In de huidige browsers met al die
tabs is de pagina titel vaak niet eens zo goed zichtbaar. Toch is het wel prettig als een pagina een titel
heeft. Zoals je verder gezien hebt volgt na de head sectie de body sectie. Daar staat in dit voorbeeld
geen bijzondere code in.
1.3 Tekst structureren
Wanneer we tekst op een website weergeven, willen we die uiteraard niet gewoon achter elkaar
zetten. Bovendien willen we de site ook wat aantrekkelijker maken, bijvoorbeeld met verschillende
lettertypen of lettergrootten. In HTML hebben we daar een beperkt aantal mogelijkheden voor.
Bekijk het volgende voorbeeld:
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller annaSpijkerman. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $5.89. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
67474 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now