Wdreader1
- 1. W2 Les 1 Opdracht 1 Creëer een webpagina van de bijgevoegde schets. Gebruik een foto van jezelf en zet wat tekst over jezelf neer en gebruik een dummy generator.. Er zijn een aantal spelregels nl. Je moet je houden aan de onderstaande indeling: Je mag zelf kiezen of je de stylesheet in de html pagina plaatst of dat je een extern bestandje aanmaakt. Ook mag je alleen de gebruik maken van de bijgevoegde code. Zodra je gereed bent upload dan het geheel naar je webserver en stuur de link per email naar m.v.ginkel@rocleiden.nl . Ook is het verplicht de code te documenteren binnen de html pagina en binnen de css. ICT academie Leiden / Webdesign / 2009-2010 / W2 / M. van Ginkel
- 2. W2 Les 1 ICT academie Leiden / Webdesign / 2009-2010 / W2 / M. van Ginkel
- 3. W2 Les 1 Te gebruiken code TEXT PADDING font: padding-top: font-family: font-size: color: h1, h2, h3 POSITIONERING BORDER position: border: center top left DIMENSIES BACKGROUND width: background-color: height: HOE <span> <style type=”text/css”> <link href=”…” rel=”stylesheet” type=”text/css”> Class Id ICT academie Leiden / Webdesign / 2009-2010 / W2 / M. van Ginkel
- 4. Les 1 CSS & HTML
- 5. Welke standaarden moeten jullie kennen ? Structuur • HTML • XHTML • XML Presentatie • CSS1 • CSS2 Gedrag • ECMA script (Javascript/Actionscript) • DOM (Platform & language-neutral interface)
- 6. !DOCTYPE meta http <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
- 7. Notatie wijze Tagnamen Alle tagnamen worden met kleine letters geschreven Goed Fout <p>Welkom op …</p> <P>Welkom op …</P> Attributen Attributen zijn niet hoofdlettergevoelig Goed <a href=“HOME.HTML>Home</a> <a href=“home.html>Home</a>
- 8. Regels ! Tags Alle tags moeten afgesloten worden. <p>Welkom op de pagina </p> Attributen Alle waarden van attributen moeten tussen Aanhalingstekens geplaatst worden. <img src=“afbeelding.png”width:”100px”alt=“logo”/> Alle attributen moeten een waarde hebben !
- 9. Regels ! Afbeeldingen Afbeeldingen moeten een alt-attribuut hebben. Elementen nesten Elementen moeten op de juiste manier/volgorde afgesloten worden. <em>><strong>Dit is goed</strong></em>
- 10. CSS Boxmodel!
- 11. CSS Implementeren van CSS Hierachie! Er zijn 4 manieren om css te implementeren in je structuur nl.: 1. Direct intern toepassen op html elementen via style <p style="color: blue; font-family: Arial; "> 2. Alle opmaak per pagina in de <head> <style type="text/css"> p {font-weight: normal; color: gray; } </style> 3. 1 CSS bestand voor alle paginas via <link> <link rel="stylesheet" type="text/css" href="style.css"> 4. CSS bestand voor alle paginas via @import <style type="text/css" media="all"> @import "style.css“;</style>
- 12. CSS Selectors! Element selectors Eigenschappen • Het instellen van een element selector beinvloed ook alle children van de selector. • Element selectors kunnen worden gecombineerd als je meerdere dezelfde eigenschappen wil geven. CSS h1 {color: #fff} (alleen h1 wit) h1, h2, h3, h4, h5, h6 {color: #fff;} (alle headers wit) In HTML <h1>Deze tekst wordt wit</h1>
- 13. CSS Selectors! Classes (class selector) Dit is een speciaal type selector. Hiermee kun je zelf opmaak samenstellen en toekennen. Een class selector wordt in css aangegeven met een punt ervoor. CSS .kleur {color: #fff;} In HTML code <p class=“kleur”>Deze tekst is wit</p> CSS (class aan een element koppelen) p.kleur {color: #fff;} In HTML code <p>Deze tekst is wit</p>
- 14. CSS Selectors! Id (id selector) Deze selector lijkt sterk op de class selector. Deze wordt alleen vooraf gegaan door # en niet door een punt. CSS #container {color: #fff; background-color:#999:} In HTML code <p id=“container”>Deze tekst is wit en de achtergrond is grijs</p>
- 15. CSS Pseudoclasses! Ingebouwde classes :link (elk element dat een hyperlink is en nog niet bezocht.) :visited (elk element dat een hyperlink en is bezocht.) :focus (elk element dat een hyperlink is en geselecteerd is.) :hover (elk element dat een hyperlink is en waar je met de muis overheen gaat.) :active (elk element dat een hyperlink is wordt geactiveerd krijgt deze status.) CSS a:link {color: #F00;} In HTML <a href="home.html">Home</a> Op beeldscherm Home
- 16. HTML en CSS Standaard instelling voor html pagina’s! <body> /* CSS Document */ <!-- Start indeling van de pagina --> html {} <div id="container"> <!-- gehele content --> /* styling voor gehele pagina */ <div id="header"> <!-- de header van de pagina --> body {} /* styling voor de body */ </div> div#containter {} <div id="navigatie"> <!-- navigatie voor pagina --> /* styling voor de container */ </div> div#navigatie {} /* styling voor de navigatie */ <div id="content"> <!-- De div voor de inhoud --> div#content {} </div> /* styling voor de content */ <div id="sidebar"> <!-- div voor sidebar --> div#siderbar {} /* styling voor de sidebar */ </div> div#footer {} <div id="footer"> <!-- Onderkant van de pagina --> /* styling voor de onderkant */ </div> </div> <!-- eind van de content --> </body> Voor het documenteren van de code (wel zo netjes); Gebruik je in HTML <!-- --> en in CSS /* */. Zo kan je ook code (tijdelijk) uitschakelen.
- 17. Opdracht ! Hiernaast is een tekening afgebeeld van een ontwerp voor een webpagina. Maak een webpagina naar dit ontwerp. Je mag alleen gebruik maken van de de html en CSS codes die door de docent zijn uitgereikt. Je mag de styling intern in de pagina of als extern bestand creeren. Upload deze pagina naar je webserver/webomgeving en laat de docent het eindresultaat beoordelen.
- 18. CSS & HTML