Hoe maak je een pagina voor een website? 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 Don’t believe it. Hypertext Markup Language Basis van webontwerp iedereen een 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 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> <html> <head> </head> <body> </body> </html>
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.
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 <H1> <H2> <H3> <H4> <H5> en <H6> H1 is de grootste, H6 de kleinste font size <b> bold(vet) stijl
Bijzondere elementen Tags zonder eindtag Bv. <img> en <br> <img src=“plaatje.jpg” />
voorbeeld <!doctype html> <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>
Afbeelding als link <a href=”bestemmingurl"> <img src=”afbeelding adres" style="width:10px;height:10px;border:10;"> </a>
Menu Wat heb je nodig? division tag )div) scheiden het menu gedeelte van de pagina
Breedte van menu Stijl van menu
Lijst als menu unordered list (ul): <ul>……</ul> Maakt een lijst item in a list (il) <il>……….</il>
maak een lijst Menuartikel toevoegen
Geen Marg of Rand Geen overloop Links Vlot (CSS-kenmerk)
opdracht Voeg een links of boven menu toe index.html