1 / 20

paragraaf 6 XHTML en CSS

Informatica Blok 1 Hoofdstuk 2. paragraaf 6 XHTML en CSS. §6 XHTML en CSS. HTML HyperText Markup Language Taal om documenten op te maken HyperText = tekst met hyperlinks tekst met verwijzingen naar andere documenten. §6 XHTML en CSS. Een document heeft: Inhoud (waar gaat het over)

xerxes-hodges
Download Presentation

paragraaf 6 XHTML en CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Informatica Blok 1Hoofdstuk 2 paragraaf 6XHTML en CSS

  2. §6 XHTML en CSS • HTMLHyperText Markup Language • Taal om documenten op te maken • HyperText = tekst met hyperlinks tekst met verwijzingen naar andere documenten

  3. §6 XHTML en CSS Een document heeft: • Inhoud (waar gaat het over) • Structuur (Hoofdstukken, paragrafen, tabellen etc.) • Opmaak (Hoe ziet de tekst er uit, vet, schuin, groot, klein)

  4. §6 XHTML en CSS • De inhoud bepaal jij • De structuur bepaalt HTML • Opmaakbepaalt CSS • Vaak is dat niet zo. • Vaak worden zowel structuur als opmaak in HTML gedaan.

  5. §6 XHTML en CSS • W3-consortium werkt aan XHTML-standaard • eXtensible HTML • Strikt genomen mag daar alleen de structuur in worden bepaald. • De opmaak regel je in Stylesheets

  6. §6 XHTML en CSS • De structuur wordt geregeld met ‘tags’ of elementen • Een tag staat tussen < en > • Een tag wordt geopend en gesloten • Voorbeeld • <table> begin tabel • </table> einde tabel

  7. §6 XHTML en CSS • <html> begin html • </html> einde html • <p> begin alinea • </p> einde alinea • <H1> begin kop • </H1> einde kop • <br /> lege tag, nwe regel

  8. §6 XHTML en CSS • Sommige elementen hebben een waarde. • <ol type=“a”>genummerde lijst: a,b,c,etc

  9. §6 XHTML en CSS Regels • alle tags sluiten • elementen ‘nesten’ • lege tags achteraan sluiten • waarden tussen “ en “ • alles met kleine letters

  10. Informatica Blok 1Hoofdstuk 2 paragraaf 6Documentstructuur

  11. §6 Documentstructuur • !DOCTYPE – type document • <html> • <head> • <title>Leuke site!</title> • <meta . . . . /> • <link . . . /> • </head> • <body>Jouw inhoud • </body> • </html>

  12. §6 Documentstructuur • In de body staan alleen tekst en tags. • Geen plaatjes • Je verwijst naar een plaatje • Je verwijst naar een andere website

  13. §6 Documentstructuur • Volg de cursus van Informatica-Actief • Zoek op internet naar de juiste elementen en attributen • Type in Google “HTML-cursus” • Pagina’s in het Nederlands • 21.000 hits

  14. Informatica Blok 1Hoofdstuk 2 paragraaf 6Stijlen en stylesheets

  15. §6 Stijlen en stylesheets • De stijl moet je regelen in de header van je document. • Bij meer pagina’s voor één website neem je stylesheet • Een stylesheet is een apart document • Verwijzing in het hoofddocument • Handig en eenvoudig.

  16. §6 Stijlen en stylesheets Bij één pagina • <head> • <style=“text/css”> • h1 {font-family:verdana; color:#34AF00; } • </style> • </head> • <body> . . </body>

  17. §6 Stijlen en stylesheets Bij meerdere pagina’s • <head> • <link rel=“stylesheet” href=“mijnstijl.css” style=“text/css” /> • </head> • <body> . . </body> • </html>

  18. §6 Stijlen en stylesheets Stylesteet • Opgeslagen als .css • Alleen de stijlen. • h1 {font-family:verdana; color:#34AF00; } • p {font-size:12pt; color:#AA00F5; }

  19. §6 Stijlen en stylesheets • Opdracht 1 • Opdracht 2

  20. Informatica Blok 1Hoofdstuk 2 paragraaf 6XHTML en CSS Einde

More Related