Html css

1,064 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,064
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html css

  1. 1. XHTML / CSS<br />Xavier VANDEWIELE<br />Net-Fabrikwww.net-fabrik.fr<br />
  2. 2. Xhtml / Css complémentaires<br />Body{<br />Background-color:#000000;<br />Font-family:arial;<br />color:#ffffff;<br />}<br />H1{<br />Font-size:15px;<br />Font-decoration:underline;<br />}<br />P{<br />Font-size:10px;<br />Padding-left:20px;<br />}<br /><html><br /> <header><br /> </header><br /> <body><br /> <h1>mon premier html</h1><br /> <p>mon premier paragraphe</p><br /> </body><br /></html><br />
  3. 3. Création de notre première page<br /><html><br /> <header><br /> </header><br /> <body><br /> <h1>mon premier html</h1><br /> <p>mon premier paragraphe</p><br /> </body><br /></html><br />
  4. 4. Premier style Css<br /><header><br /> <link rel="stylesheet" href="URL" type="text/css" media="all" /><br /></header><br />Body{<br />Background-color:#000000;<br />Font-family:arial;<br />}<br />H1{<br />Font-size:15px;<br />Font-decoration:underline;<br />}<br />P{<br />Font-size:10px;<br />}<br />
  5. 5. Les balises Xhtml<br /> <h1> … <h4><br /> <p><br /> <div><br /> <ul><li></li><ul><br /><imgsrc="url" alt=""/><br />
  6. 6. Nommer les éléments<br /><p class="entete"><br /> <divid="contenu"><br /><html><br /> <header><br /> </header><br /> <body><br /> <h1>mon premier html</h1><br /> <p>mon premier paragraphe</p><br /> <div id="albphoto"><br /> <imgsrc='url' class='photo'/><br /> <imgsrc='url' class='photo'/><br /> </div><br /> </body><br /></html><br />
  7. 7. Positionnement d’éléments<br />
  8. 8. Positionnement d’éléments<br />#albphoto{<br />Width:150px;<br />Heiht:320px;<br />Background-color:#0099FF;<br />Border:1px solid #003399;<br />}<br />.photo{<br />Width:130px;<br />Margin-bottom:20px;<br />margin-top:20px;<br />margin-left:10px;<br />}<br />
  9. 9. Float<br />#actu{<br />width:600px;<br />background-color:#E19F66;<br />}<br />.contenu{<br />float:left;<br />width:450px;<br />}<br />.photo{<br />Width:130px;<br />Margin-bottom:20px;<br />margin-top:20px;<br />margin-left:10px;<br />float:left;<br />}<br />.clear{<br />clear:both;<br />}<br /><div id="actu"><br /> <p class="contenu">mon premier paragraphe mon premier paragraphe</p><br /> <imgsrc='img/Image1.png' class='photo'/><br /> <div class="clear"></div><br /></div><br />
  10. 10. Des styles en cascade<br />#actu{<br />width:600px;<br />background-color:#E19F66;<br />}<br />#actu p{<br />float:left;<br />width:450px;<br />}<br />#actu img{<br />Width:130px;<br />Margin-bottom:20px;<br />margin-top:20px;<br />margin-left:10px;<br />float:left;<br />}<br />.clear{<br />clear:both;<br />}<br />
  11. 11. Du HTML Pour jimdo<br /> Les différents éléments à intégrer<br />Le code html<br />Le code css<br />Les images<br />Insertion des zones Jimdo<br />

×