1.1 html css introductie

Please download to get full document.

View again

of 30
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Similar Documents
Information Report
Category:

Education

Published:

Views: 0 | Pages: 30

Extension: PDF | Download: 0

Share
Description
1. 1.1 Introductie HTML/CSS HTML module11.1 Introductie HTML/CSS 2. Lesdoel! Begrijpenwat de techniek achter eenwebpaginais! HTML module11.1 Introductie HTML/CSS 3. HTML…
Transcript
  • 1. 1.1 Introductie HTML/CSS HTML module11.1 Introductie HTML/CSS
  • 2. Lesdoel! Begrijpenwat de techniek achter eenwebpaginais! HTML module11.1 Introductie HTML/CSS
  • 3. HTML module1 Hoe werkt het internet? 1.1 Introductie HTML/CSS Klik voor de geschiedenis van het internet!
  • 4. Welke talen moet een webdeveloper minimaalbeheersen? HTML module11.1 Introductie HTML/CSS
  • 5. HTML module1 Structuur van de webpagina Vormgeving van de webpagina Interactie van een webpagina 1.1 Introductie HTML/CSS
  • 6. HTML is de afkorting van HypertextMarkupLanguage HTML module11.1 Introductie HTML/CSS HTML is destandaard opmaaktaal voor webpagina’s!
  • 7. HTML module1 Zonder HTML geen WEBPAGINA Leesbaar voor de gebruiker en bepaalt de structuur van een webpagina 1.1 Introductie HTML/CSS
  • 8. HTML module1 Is een Markuplanguage HTML maaktgebruik van elementen met daarineen start en een eind tag. element tag 1.1 Introductie HTML/CSS
  • 9. HTML module1 Nested elements HTML heeftstandaardeen aantalelementen diemeerdere tag’sen elementen kunnenbevatten. 1.1 Introductie HTML/CSS Debody, header, section en footer tag zijnin dit voorbeeld nested elements.
  • 10. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Unicode charset t.b.v. alle tekens inde wereld Taal vanhet land waarvoor dewebsite is bedoeld
  • 11. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Noodzakelijkvoor scaling meerderedevices!
  • 12. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Wat is het onderwerp van de webpagina! Wieheeft dewebpagina gemaakt. Steekwoorden die voorkomen op dewebpagina! Metagegevenszijnbelangrijkvoorzoekmachines!
  • 13. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Detitle is verplicht enverschijnt op het tabblad van de browser. Daarnaast ook belangrijk voor de zoekmachines.
  • 14. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Hier plaats je de link naar css bestand voor devormgeving van de website.
  • 15. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Alles wat in het <head> element staat verschijnt niet op depagina!
  • 16. HTML module1 Basispaginahtml 1.1 Introductie HTML/CSS Alle content wat op het schermmoet verschijnen moet in debody staan.
  • 17. HTML module1 Editors voor webpagina’s 1.1 Introductie HTML/CSS Voor hetmakenvan webpagina’s heb je zgn. editor software nodig!. Deeenvoudigste om tegebruikenis notepad ++. Daarnaast zijn er meerdereeditors zoals hieronderweergegeven. Jemag gebruikenwelkeje zelf het handigst vind.
  • 18. HTML module1 Kies de juiste browser om je code te testen! 1.1 Introductie HTML/CSS Mijn advies is gebruiktemakenvan firefox developer editie. Hierin zijn zijn tools toegevoegd om deuitkomst vanje webapplicatie tetesten en aan te passen. Klik op het logo
  • 19. Doe opdracht! HTML module1 Om goed testarten, ga je een structuuraanbrengen zoals dezeop webservers gebruikelijk is. De1e pagina van een webapplicatie is altijd index.html of index.php. Daarnaast is er een mappenstructuurop een webserver. Open bestandsbeheer op je laptop of macbook, maak een map aan metde naam HTMLmodule 1. Maak een map aan metde naam les 1.1. Deel deze map in metde volgende 2 mappen: • css • images. 1.1 Introductie HTML/CSS
  • 20. Doe opdracht! HTML module1 Maak een keuzevoor een editor enopen deze editor. Open nu de editor of notepad ++. Maak een nieuwbestand aan. Sla hetbestand op metals naam index.html in de map les 1.1. Typeeen willekeurigetekst ensla het bestand nogmaals op. Ga naarde map enklikop derechtermuisknop enkies voor openen metkies voor openen met firefox. Jeziet inde browser hetresultaat. 1.1 Introductie HTML/CSS
  • 21. Doe opdracht! HTML module1 Maak een nieuwbestand aan ennoem deze basispagina.html. Tikonderstaande tekst over ensla het bestand nogmaal op. 1.1 Introductie HTML/CSS Jehebtnu een bestand dat je iedere keerkunt hergebruiken.
  • 22. CSS is de afkorting van CascadingStyleSheets HTML module11.1 Introductie HTML/CSS CSS is deopmaaktaal voor de vormgevingvan webpagina’s!
  • 23. Eencss bestand. HTML module1 Het stijlen van een webpagina werkt d.m.v. css code. CSS-codekangeplaatst worden inde <head> sectie van een webpagina, toegevoegd worden aan een element/tag of als extern bestand. Devoorkeurgaat uit naareen extern bestand. Deextensie van een css bestand is .css bijvoorbeeld style.css. Hierondereen voorbeeld. 1.1 Introductie HTML/CSS Het begint metde tag of element endaarna { }. Tussen deaccolades komt decode voor dat element testaan.
  • 24. Doe opdracht! HTML module1 Open de editor of notepad ++. Maak een nieuwbestand aan. Sla hetbestand op metals naam style.css in de map les 1.1/css 1.1 Introductie HTML/CSS
  • 25. HTML module11.1 Introductie HTML Zoalseerder in de lesgemeld werkthtml metelementen en tags.1 van de tagsis <P> .. </P> Een webpagina ziet dit als een paragraaf zoals een stuk tekst inbijvoorbeeld MSWord. 1.1 Introductie HTML/CSS
  • 26. HTML module11.1 Introductie HTML Erzijnookeen tagsvoorkoptekstennl. <h1>..</h1> t/m <h6>…</h6> Een webpagina ziet dit als koptekst geeft er standaard een stijl aan zoals in ms word. 1.1 Introductie HTML/CSS
  • 27. HTML module11.1 Introductie HTML Stijlen vandepen h-tag. Zoals eerder in de les gemeld kanje tag’s stijlen d.m.v. css. 1.1 Introductie HTML/CSS
  • 28. HTML module1 Samenvattend Tijdens deze les zijnde volgende zakenbehandeld: •Hoe werkteen website? •HTML– HyperText MarkupLanguage •HTML onmisbaar voor webdeveloper •Welketalen moet een webdeveloper minimaal beheersen •HTML– Structuur/CSS – Design / JS– interactie •HTML is de belangrijkste taal voor developer •HTML maakt gebruikvan tag’s. •Nesting van Elements •Keuzevan code-editors 1.1 Introductie HTML/CSS
  • 29. HTML module1 Quiz! Tijdens de lessen wordt er ook gebruikgemaakt van Quizenom te kijkenof destof begrepen is. Dequiz vindt je op kahoot.it. Dit kan op dewebsite maarook op de telefoon. Eris een app. Installeer deze. 1.1 Introductie HTML/CSS
  • 30. HTML module1 Huiswerk ! Maak een webpagina over jezelf metnaam telefoon email hobbies en je kennistot nu toe m.b.t. webdesign. Maak gebruikvan de p enh1-tag en let op title etc. in demetagegevens. Style het geheel d.m.v. een stylesheet. Maak een zipfile van debestanden en upload dezenaar edmodo opdracht 1.1. 1.1 Introductie HTML/CSS
  • Recommended
    View more...
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x