Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
Hoe maak je een pagina voor een website?
HTML Hoe maak je een pagina voor een website?
2
programma Html wat en waarom? Belangrijkste Tags
Schrijven de eersrte html code kruiswoordpuzzel afronding Opdracht Vragenlijst (feedback)
4
HTML Don’t believe it. Hypertext Markup Language Basis van webontwerp
iedereen een website kan bouwen zonder enige kennis van HTML. Don’t believe it.
5
borncode van een webpagina …
6
Eerste regel van Google borncode: <!doctype html>
7
Wat nodig om met html kunnen te werken
Wat nodig om met html kunnen te werken? Editor Om HTML code in te voeren Notepad ++ Laat code in kleuren zien Hierdoor minder fouten Andere editors Notepad. Sublime tekst Atom en etc
8
Browser Om webpagina’s te tonen (testen)
Internet Explorer van Microsoft Andere browsers: Mozilla/Firefox, Opera, Google Chrome
9
Structuur van html Tag HTML-tag herkenen < en > .
begintag <html> eindtag</html> Element <begintag> inhoud </eindtag>
10
Belangrijkste tags <!DOCTYPE html>
standaard als html voor alle browsers.
11
<html> bevat alle andere elementen </html>
12
<!doctype html> <html> <head> </head> <body> </body> </html>
13
Informatie over deze pagina Niet zichtbaar op de pagina
<head> Informatie over deze pagina Niet zichtbaar op de pagina Lezen door browsers </head> Tussen <head> en </head> kun je eventueleinformatie over het document kwijt. Deze informatie is alleen te lezen door de browser en is dus niet zichtbaar op je homepage.
14
Toelichting <title> naam van pagina </title>
niet zichtbaar op je pagina wel herkenbaar voor de browser.
15
Belangrijkste tags <body> Inhoud van de pagina
Zichtbaar in de browser </body>
16
Handige tags <P> wordt gebruikt voor een paragraaf <H1> <H2> <H3> <H4> <H5> en <H6> H1 is de grootste, H6 de kleinste font size <b> bold(vet) stijl
17
Bijzondere elementen Tags zonder eindtag Bv. <img> en <br>
<img src=“plaatje.jpg” />
18
voorbeeld <!doctype html> <html> <head>
<title> mijnpagina</title> </head> <body> <b> Welkom op mijn Homepage </b> </body> </html>
19
Kruiswoordpuzzel Welke tag?
20
HTML LINK Naar een andere document of pagina
Tag <a> ….</a> <a href="url">link text</a> herf definieert het bestemmingsadres
21
voorbeeld <a href=" our school’s website</a> Target attribute Bestemmingsadres op een nieuw tabblad openen <a href= target="_blank">Visit our school’s website</a>
22
Afbeelding als link <a href=”bestemmingurl"> <img src=”afbeelding adres" style="width:10px;height:10px;border:10;"> </a>
23
Menu Wat heb je nodig? division tag )div)
scheiden het menu gedeelte van de pagina
25
Breedte van menu Stijl van menu
26
Lijst als menu unordered list (ul): <ul>……</ul>
Maakt een lijst item in a list (il) <il>……….</il>
27
maak een lijst Menuartikel toevoegen
28
Geen Marg of Rand Geen overloop Links Vlot (CSS-kenmerk)
29
opdracht Voeg een links of boven menu toe index.html
Verwante presentaties
