HTML Hoe maak je een pagina voor een

programma Html wat en waarom? Belangrijkste Tags Schrijven de eersrte html code kruiswoordpuzzel afronding

HTML Hypertext Markup Language Basis van webontwerp iedereen website kan bouwen zonder enige kennis

Eerste regel van Google borncode: <!doctype html>

Wat nodig om met html kunnen te werken? Editor Om HTML code in te

Browser Om webpagina’s te tonen (testen) Internet Explorer van Microsoft Andere browsers: Mozilla/Firefox, Opera,

Structuur van html Tag HTML-tag herkenen < en >. begintag <html> eindtag</html> Element <begintag>

Belangrijkste tags <!DOCTYPE html> standaard als html voor alle browsers.

<html> bevat alle andere elementen </html>

<!doctype html> <head> </head> <body> </html>

<head> Informatie over deze pagina Niet zichtbaar op de pagina Lezen door browsers

Toelichting <title> naam van pagina </title> niet zichtbaar op je pagina wel herkenbaar voor

Belangrijkste tags <body> Inhoud van de pagina Zichtbaar in de browser </body>

Handige tags <P> wordt gebruikt voor een paragraaf >H 1> <H 2> <H 3>

Bijzondere elementen Tags zonder eindtag Bv. <img> en <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“plaatje. jpg” />

voorbeeld <!doctype html> <head> <title> mijnpagina</title> </head> <body> <b> Welkom op mijn Homepage </b>

HTML LINK Naar een andere document of pagina Tag <a> …. </a> <a href="url">link

voorbeeld <a href="https: //www. helenparkhurst. nl">Visit our school’s website</a> Target attribute Bestemmingsadres op een

Afbeelding als link <a href=”bestemmingurl"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=”afbeelding adres" style="width: 10 px; height: 10 px;

Menu Wat heb je nodig? division tag (div) scheiden het menu gedeelte van de

Lijst als menu unordered list (ul): <ul>……</ul> Maakt een lijst item in a list

Geen Marg of Rand Geen overloop Links Vlot (CSS-kenmerk)

opdracht Voeg een links of boven menu toe index. html

Slides: 29

Download presentation

HTML Hoe maak je een pagina voor een website?

programma Html wat en waarom? Belangrijkste Tags Schrijven de eersrte html code kruiswoordpuzzel afronding Opdracht Vragenlijst (feedback)

HTML Hypertext Markup Language Basis van webontwerp iedereen website kan bouwen zonder enige kennis van HTML. Don’t believe it.

borncode van een webpagina …

Eerste regel van Google borncode: <!doctype html>

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

Browser Om webpagina’s te tonen (testen) Internet Explorer van Microsoft Andere browsers: Mozilla/Firefox, Opera, Google Chrome

Structuur van html Tag HTML-tag herkenen < en >. begintag <html> eindtag</html> Element <begintag> inhoud </eindtag>

Belangrijkste tags <!DOCTYPE html> standaard als html voor alle browsers.

<html> bevat alle andere elementen </html>

<!doctype html> <head> </head> <body> </html>

<head> Informatie over deze pagina Niet zichtbaar op de pagina Lezen door browsers </head>

Toelichting <title> naam van pagina </title> niet zichtbaar op je pagina wel herkenbaar voor de browser.

Belangrijkste tags <body> Inhoud van de pagina Zichtbaar in de browser </body>

Handige tags <P> wordt gebruikt voor een paragraaf >H 1> <H 2> <H 3> <H 4> <H 5> en <H 6< H 1 is de grootste, H 6 de kleinste font size <b> bold(vet) stijl

Bijzondere elementen Tags zonder eindtag Bv. <img> en <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“plaatje. jpg” />

Bijzondere elementen Tags zonder eindtag Bv. <img> en <img src=“plaatje. jpg” />

voorbeeld <!doctype html> <head> <title> mijnpagina</title> </head> <body> <b> Welkom op mijn Homepage </b> </body> </html>

Kruiswoordpuzzel Welke tag?

HTML LINK Naar een andere document of pagina Tag <a> …. </a> <a href="url">link text</a> herf definieert het bestemmingsadres

voorbeeld <a href="https: //www. helenparkhurst. nl">Visit our school’s website</a> Target attribute Bestemmingsadres op een nieuw tabblad openen <a href=https: //www. elenparkhurst. nl target="_blank">Visit our school’s website</a>