Html css
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
968
On Slideshare
964
From Embeds
4
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 4

http://fabrik-nature.jimdo.com 4

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