Difference between revisions of "Courses/Interactief Visueel Vertellen"
Arjensuijker (talk | contribs) |
Arjensuijker (talk | contribs) |
||
| Line 1: | Line 1: | ||
1: | '''1: Een web pagina''' | ||
Open in een texteditor naar keuze (Sublime Text, notepad++) een nieuw bestand. Type hier bijvoorbeeld 'hallo wereld' in en sla het op als .html bestand. Als je dit bestand opent vanuit finder/verkenner zou het moeten openen in je browser. Zo niet, rechterklik dan op het bestand en kies 'openen met'. Gefeliciteerd, dit is al een web pagina! | |||
'''2: Basis Structuur''' | |||
Ik noem dit wel een web pagina, maar eigenlijk is het dat nog niet helemaal. Om een echte web pagina te zijn, hoort alles namelijk binnen een bepaalde structuur te passen. Open het html bestand weer in een texteditor (rechterklik -> openen met), plak hier de onderstaande structuur in en sla het op. Open het bestand weer in je browser en ververs de pagina om te zien wat het resultaat is. | |||
<nowiki> | <nowiki> | ||
<html> | <html> | ||
<head></head> | <head></head> | ||
<body></body | <body> | ||
'hallo wereld' | |||
</body | |||
</html> | </html> | ||
</nowiki> | </nowiki> | ||
3: | Deze indeling heet HTML. Voor meer informatie hierover kun je onze andere open aanbod lessen volgen. | ||
'''3: Basis Opmaak''' | |||
Er is bij de vorige stap weinig verandert in je browser. Maar zoals je ziet kun je tussen <body> en </body> je eigen tekst plaatsen. Deze tekst kun je vervolgens een bepaalde opmaak geven: | |||
<nowiki> | <nowiki> | ||
<h1> | <h1>Dit is een titel.</h1> | ||
<p> | <p>Dit is een paragraaf.</p> | ||
<p> | <p><b>Dit is een dikke paragraaf</b></p> | ||
</nowiki> | </nowiki> | ||
4: Plaats een afbeelding | |||
'''4: Plaats een afbeelding''' | |||
In html body kun je ook afbeeldingen plaatsen. Hieronder zie je hoe dit eruit ziet. We geven deze afbeelding gelijk een hoogte, breedte en een koppeling met een 'image map'. We leggen later uit wat dit doet. | |||
<nowiki> | <nowiki> | ||
<img src="afbeelding.jpg" width="145" height="126"> | <img src="afbeelding.jpg" width="145" height="126" usemap="#map"> | ||
</nowiki> | </nowiki> | ||
5: | |||
'''5: Voeg de image map toe''' | |||
In het attribuut 'usemap' hebben we net de waarde '#map' aangegeven. Dit betekent dat we een image map aangaan maken met de naam 'map'. Nu gaan we deze image map nog even leeg laten, straks stoppen we hier de coordinaten en de links in die we willen koppelen aan de afbeelding. | |||
<nowiki> | <nowiki> | ||
< | <map name="map"></map> | ||
</nowiki> | </nowiki> | ||
6: Voeg | |||
'''6: Voeg coördinaten toe''' | |||
Binnen deze map voeg je de coördinaten toe waarvan je wilt dat ze linken naar een andere pagina. Hieronder zie je hoe dit eruit ziet. | |||
<nowiki> | <nowiki> | ||
<map name="map"> | |||
<area shape="rect" coords="0,0,82,126"> | <area shape="rect" coords="0,0,82,126"> | ||
<area shape="circle" coords="90,58,3"> | <area shape="circle" coords="90,58,3"> | ||
</map> | |||
</nowiki> | </nowiki> | ||
7: Geef aan waar deze gebieden heen moeten linken: | |||
Je wilt deze gebieden laten linken naar een ander deel van je verhaal. Dit doe je door ze te laten linken naar een ander zelfgemaakt html bestand, die ongeveer dezelfde indeling heeft als je huidige bestand maar dan met een andere afbeeldingen. | |||
<nowiki> | <nowiki> | ||
<area shape="rect" coords="0,0,82,126" href=" | <area shape="rect" coords="0,0,82,126" href="pagina2.html"> | ||
</nowiki> | </nowiki> | ||
'''8: Maak de gelinkte pagina''' | |||
Je hoeft deze pagina niet helemaal overnieuw in html te typen, het grootste deel ervan is namelijk hetzelfde als het bestand waar je nu in werkt. Je kunt dus het html bestand kopiëren en het vervolgens openen in een texteditor en de nodige aanpassingen maken. Op deze manier ga je door tot je je hele verhaal verteld hebt. | |||
Revision as of 10:21, 12 February 2015
1: Een web pagina
Open in een texteditor naar keuze (Sublime Text, notepad++) een nieuw bestand. Type hier bijvoorbeeld 'hallo wereld' in en sla het op als .html bestand. Als je dit bestand opent vanuit finder/verkenner zou het moeten openen in je browser. Zo niet, rechterklik dan op het bestand en kies 'openen met'. Gefeliciteerd, dit is al een web pagina!
2: Basis Structuur
Ik noem dit wel een web pagina, maar eigenlijk is het dat nog niet helemaal. Om een echte web pagina te zijn, hoort alles namelijk binnen een bepaalde structuur te passen. Open het html bestand weer in een texteditor (rechterklik -> openen met), plak hier de onderstaande structuur in en sla het op. Open het bestand weer in je browser en ververs de pagina om te zien wat het resultaat is.
<html> <head></head> <body> 'hallo wereld' </body </html>
Deze indeling heet HTML. Voor meer informatie hierover kun je onze andere open aanbod lessen volgen.
3: Basis Opmaak
Er is bij de vorige stap weinig verandert in je browser. Maar zoals je ziet kun je tussen <body> en </body> je eigen tekst plaatsen. Deze tekst kun je vervolgens een bepaalde opmaak geven:
<h1>Dit is een titel.</h1> <p>Dit is een paragraaf.</p> <p><b>Dit is een dikke paragraaf</b></p>
4: Plaats een afbeelding
In html body kun je ook afbeeldingen plaatsen. Hieronder zie je hoe dit eruit ziet. We geven deze afbeelding gelijk een hoogte, breedte en een koppeling met een 'image map'. We leggen later uit wat dit doet.
<img src="afbeelding.jpg" width="145" height="126" usemap="#map">
5: Voeg de image map toe
In het attribuut 'usemap' hebben we net de waarde '#map' aangegeven. Dit betekent dat we een image map aangaan maken met de naam 'map'. Nu gaan we deze image map nog even leeg laten, straks stoppen we hier de coordinaten en de links in die we willen koppelen aan de afbeelding.
<map name="map"></map>
6: Voeg coördinaten toe
Binnen deze map voeg je de coördinaten toe waarvan je wilt dat ze linken naar een andere pagina. Hieronder zie je hoe dit eruit ziet.
<map name="map"> <area shape="rect" coords="0,0,82,126"> <area shape="circle" coords="90,58,3"> </map>
7: Geef aan waar deze gebieden heen moeten linken:
Je wilt deze gebieden laten linken naar een ander deel van je verhaal. Dit doe je door ze te laten linken naar een ander zelfgemaakt html bestand, die ongeveer dezelfde indeling heeft als je huidige bestand maar dan met een andere afbeeldingen.
<area shape="rect" coords="0,0,82,126" href="pagina2.html">
8: Maak de gelinkte pagina
Je hoeft deze pagina niet helemaal overnieuw in html te typen, het grootste deel ervan is namelijk hetzelfde als het bestand waar je nu in werkt. Je kunt dus het html bestand kopiëren en het vervolgens openen in een texteditor en de nodige aanpassingen maken. Op deze manier ga je door tot je je hele verhaal verteld hebt.
