In deze lessen informatica gaan we een websites bouwen.
Hiervoor gebruiken we niet èèn of ander duur programma, maar een soort kladblok editor (Notepad ++)waarmee we de webpagina`s in codes maken. Dit lijkt heel erg saai maar je zal zien dat je snel iets moois maakt en begint te begrijpen hoe je met die codes moet werken. We zullen zien hoe je de opmaak en de indeling van de pagina`s van elkaar moet scheiden en wat daarvan het voordeel is.
Je krijgt inzicht in de constructie die achter webpagina`s zit en je gaat begrijpen op welke manier deze zijn opgebouwd uit objecten. Dit inzicht heb je nodig om in het vervolg lessen je webpagina te laten reageren op muisklikken. In de vervolg lessen laten we zien wat de mogelijkheden zijn van de scripttaal, Javascript.
Als we de technieken goed onder de knie hebben gaan we een website maken. Deze opdracht komt als laatst en vind je onderaan deze website. In deze laatste opdracht staat ook aan welke eisen deze website moet voldoen.
Als bronmateriaal voor de technieken gebruiken we;
Een website bestaat uit woorden en zinnen met daar tussen een aantal code woorden<tags>. Deze code woorden vormen zelf een taal die HTML wordt genoemd. HTML is een afkorting van HyperText Markup Language. Deze code en de tekst daartussen worden door een webbrowser zoals, Chrome, Firefox en Internet explorer getoond als een mooie opgemaakte webpagina.
Voor de opmaak en interactie met de gebruikers van een webpagina, kunnen de HTML codes ondersteund worden met andere codes zoals CSS voor de opmaak en Javascript voor extra interactie.
In de volgende onderdelen van de les leggen we uit hoe deze HTML taal werkt en op welke manier je CSS kan gebruiken voor de opmaak van je webpagina. Javascript behandelen we in de vervolg lessen.
HTML
De bouwstenen voor van een HTML-pagina heten elementen. De elementen worden tussen de haakjes kleiner-dan-teken <en> het groter-dan-teken geplaatst. In de meeste gevallen bestaat een element uit een begin en eindtag met de inhoud daartussen. Zie voorbeeld hieronder:
Element
begintag
eindtag
functie
html
<html>
</html>
Omvattend element
head
<head>
</head>
kopgedeelte
meta
<meta>
</meta>
Informatie over inhoud webpagina
title
<title>
</title>
Titel van het webbrowser
body
<body>
</body>
Basisgedeelte deze tekst is zichtbaar op je site
H1
<h1>
</h1>
Belangrijkste koptekst (groot lettertype)
H2
<h2>
</h2>
Kop van het tweede niveau tekstgrootte iets kleiner. Dit gaat door tot H6.
p
<p>
</p>
Alinea. Gebruik voor een nieuwe alinea
strong
<strong>
</strong>
Tekst vetgedrukt maken
i
<i>
</i>
Tekst cursief maken
td
<td>
</td>
Tabel plaatsen
ol
<ol>
</ol>
Wordt gebruikt voor genummerde lijsten altijd gebruiken in combinatie met <li> element
li
<li>
</li>
Tekst voor opsommingen altijd tussen deze tag
Er zijn ook elementen die geen begin en eindtag hebben. Bijvoorbeeld het img element en het br element. Hier komen we later in deze les nog op terug.
Basis HTML
De basis van een nieuwe webpagina is altijd opgebouwd uit dezelfde codes.
De eerste webpagina van je website noem je altijd index.html, sla het bestand altijd op zonder gebruik te maken van hoofdletters. Het is aan te raden je eerste tekst op te slaan als basis.html. Deze tekst kan je dan iedere keer gebruiken als je een nieuwe pagina wilt maken. Zie voorbeeld tekst hieronder, voor iedere nieuwe webpagina.
H1 kopregel
H1 Kopregel
Om aan te geven dat een stukje tekst een kopregel moet worden, zetten we voor deze tekst de tag <h1> dit is een kopregel</h1>.
De h1 is de grootste kopregel (grootste lettergrootte) die er is. Voor de kleinere kopregels kan je de tags h2, h3, h4, h5 of de h6 gebruiken.
Hieronder een afbeelding van de te gebruiken tags voor kopregels. En daaronder een afbeelding zoals deze in je webbrowser worden getoond.
Alineas
Alineas
Om aan te geven dat een stuk tekst een alinea is, moeten we de tekst tussen de tags <p> en </p> zetten. Als je dan het volgende stuk tekst op een nieuwe regel wint beginnen moet je de volgende tekst ook weer tussen <p> en </p> zetten.
In het voorbeeld hieronder is ook gebruik gemaakt van de tag <br>. De <br> code staat voor Break (hetzelfde als de entertoets), en bestaat niet uit een begintag en eindtag. Maar alleen de code <br> zorgt ervoor dat de tekst start op een nieuwe regel.
De HTML codes
Voorbeeld in webbrowser
HyperLinks
Hyperlinks
Tot nu toe hebben we alleen elementen gebruikt die iets in de webpagina zetten zonder dat je daar iets mee kan doen. Als dit alles was bestond het "world Wide Web" (WWW) niet. Eèn van de belangrijkste elementen die voor de werking van het internet als World Wide Web hebben gezorgd is het gebruik van hyperlinks vanuit een webpagina naar andere webpagina`s en andere websites.
Een hyperlink maak je door het A element te gebruiken. De A is afkomstig van van het woord anchor (anker).
Tip: zorg er altijd voor dat de bestandsnaam geen spaties bevat, je krijgt dan foutmeldingen.
Een hyperlinktekst krijgt meestal een andere kleur en een streep onder de tekst, hierdoor weet de bezoeker van je website dat het gaat om een hyperlink en als je met de muis op de hyperlink staat veranderd de cursor in een handje.
Hieronder zie je een voorbeeld van de tag A, een hyperlink naar Twitter, en een voorbeeld van een interne link naar je volgende webpagina op je eigen website.
De HTML hyperlink code
Voorbeeld hyperlink in webbrowser
Lijsten maken
Lijsten Maken
Om aan te geven dat een tekst een genummerde lijst is moeten we eerst de gehele lijst tussen <ol> en </ol> zetten. De verschillende items van de lijst moeten vervolgens tussen de <li> en </li> worden gezet.
zie voorbeeld hieronder:
<ol>
<li>het eerste item</li>
<li> het tweede item </li>
</ol>
Er zijn twee verschillende manieren om een lijst op te zetten.
Zoals hierboven de <ol> deze staat voor een genummerde lijst.
Maar ook kan je de <ul> gebruiken, je krijgt dan een lijst met bolletjes ervoor.
Hieronder een voorbeeld van de HTML tags en daaronder het voorbeeld, zoals dat zichtbaar is op je website.
HTML code lijst
Voorbeeld lijst in webbrowser
Afbeeldingen invoegen
Afbeeldingen invoegen
Om een plaatje toe te voegen aan een website heb je de tag <img> nodig. Een afbeelding/foto tag is anders opgebouwd als andere tags, want een afbeelding/foto heeft geen begintag en eindtag. Bij het element <img> leren we een nieuw onderdeel van HTML kennen: attributen.
Attributen
Een attribuut is een nadere specificatie van een element. Bij de meeste elementen kunnen we attributen toevoegen als we dat willen. Het is echter niet verplicht. Er zijn heel veel attributen, teveel om hier te laten zien. Maar op de volgende website staat een overzicht:https://www.heinpragt.com/techniek/internet/html5.php
Bijzonder aan het element img is dat het twee attributen heeft die wel verplicht zijn: src en alt
een attribuut heeft altijd dezelfde opbouw namelijk
de naam van het attribuut (hier src en alt)
het is gelijkteken (=)
de inhoud van het attribuut (naam afbeelding en beschrijving daarvan)
<p>
<img src="naam.jpg" alt="beschrijving"/>
</p>
Om een afbeelding/foto in jouw website te krijgen, moet je eerst een afbeelding/foto van internet downloaden, of deze via andere media opslaan in jouw eigen map waar ook de website staat. Anders werkt het niet. Daarna type je de tag over zoals hierboven staat omschreven. Door de <p> te gebruiken krijg je iets meer witruimte om je foto heen.
Op de plaats van naam.jpg zet je de naam van de afbeelding/foto neer. Bij alt zet je de beschrijving van jouw afbeelding/foto neer. De alt tekst zorgt ervoor dat, wanneer iemand de afbeelding of foto niet kan zien , de webbrowser de beschrijving van je afbeelding/foto laat zien. Dit gebeurt bijvoorbeeld bij een slechte verbinding of bij software voor mensen met dyslexie en blinde mensen, waarbij websites worden voorgelezen.
Hieronder een voorbeeld van de HTML tag img. en daaronder het voorbeeld zoals deze in een webbrowser wordt getoond.
voorbeeld tag afbeelding
Voorbeeld afbeelding in webbrowser
Verschil tussen JPG,PNG en Gif afbeeldingen
Video`s
Video`s op je website
Je kan in jouw website ook filmpjes over nemen van videosites zoals You Tube.
Je kan al een link maken naar de verschillende video`s.
Nu is het lastig voor bezoekers van jouw website om video`s te bekijken door naar een andere website te gaan. Sterker nog, die bezoekers komen misschien wel niet meer terug en blijven op die andere website.
We gaan daarom een video op onze eigen website zetten met behulp van een embedded code die je vindt in You Tube.
Je vindt deze code door bij een You Tube video onder de video op share of delen te klikken. Er komt dan een link te staan, die willen we niet. Klik vervolgens op Embed of insluiten de code begint met iframe deze kopieer je naar je notepad++.
zie voorbeeld van YouTube code hieronder.
code You Tube
You Tube HTML code
Kleuren
Kleuren op je website
Kleuren worden in HTML gemaakt met speciale codes. Die codes worden hexadecimalen (kleur) codes genoemd.
De kleurcodes bestaan uit de hoeveelheid rood,groen en blauw om zo samen alle kleuren te kunnen maken en lopen van 00 tot ff.
zo is rood: #ff0000
groen: #00ff00
en blauw: #0000ff
Je kunt online speciale kleurkiezer gebruiken om deze codes te maken.
We gaan nu de opmaak van de pagina verbeteren. Hiervoor moeten we een nieuwe bestand maken met de naam eerste.css. Deze moet gekoppeld worden aan de webpagina die we al hebben gemaakt de eerste.html
Deze koppeling maak je door de volgende code te plaatsen tussen de <head>..</head>
<link rel="stylesheet" href="eerste.css" />
In dit nieuwe bestand: eerst.css zet je de codes waardoor je de tekst in:
h1 blauw: code
h2 groen: code
p rood: code
de achtergrond van je website moet grijs worden; code;#999999
Opmaak verder aanpassen
Opmaak aanpassen
De stylesheet (css) geeft je de mogelijkheden om de stijl van jouw website helemaal aan te passen.
Denk daarbij aan de kleuren, randen, vormen,muisovers, ga maar door. Veel te veel om op te noemen, gebruik daarom de volgende website om alle mogelijke css codes te bekijken.
Het arrangement HTML 5 en CSS 3 is gemaakt met
Wikiwijs van
Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt,
maakt en deelt.
Auteur
Truus de Bont
Je moet eerst inloggen om feedback aan de auteur te kunnen geven.
Laatst gewijzigd
2015-09-14 20:43:01
Licentie
Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 3.0 Nederlands licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om:
het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
voor alle doeleinden, inclusief commerciële doeleinden.
Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten
terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI
koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI
koppeling aan te gaan.
Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.
Arrangement
IMSCC package
Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.
Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en
het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op
onze Developers Wiki.
