Your SlideShare is downloading. ×
0
Html css
Html css
Html css
Html css
Html css
Html css
Html css
Html css
Html css
Html css
Html css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html css

772

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
772
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. XHTML / CSS<br />Xavier VANDEWIELE<br />Net-Fabrikwww.net-fabrik.fr<br />
  • 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. 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. 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. Les balises Xhtml<br /> <h1> … <h4><br /> <p><br /> <div><br /> <ul><li></li><ul><br /><imgsrc="url" alt=""/><br />
  • 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. Positionnement d’éléments<br />
  • 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. 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. 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. 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 />

×