Debogueur code Html /css

إنشاء موقع انترنت منتدى تقنية شبكة ويندووز لينوكس إيوص ؤندروويد
Create a web site technology forum wiondows ios Android Linux
Создать форум технологий веб-сайта
יצירת אתר אינטרנט בפורום הטכנולוגיה
amghare
Messages : 38
Inscription : dim. déc. 10, 2017 1:53 am

Debogueur code Html /css

Messagepar amghare » jeu. janv. 25, 2018 12:29 am

Deboguer votre code html / css


Voici les codes HTML et CSS de ce premier exemple :

Code : Tout sélectionner

<!DOCTYPE html>  
<html>
<head>
    <title>Debugger HTML / CSS</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="exemple-1.css" />
</head>
<body>

<div id="header">
    <h1>Ô mon beau site</h1>
</div>

<div id="main">
    <ul id="menu">
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
    
    <div id="contenu">
        <div class="article">
            <h1>Titre article</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum quam vel urna laoreet dignissim.
                Suspendisse posuere, turpis nec dapibus egestas, nisi erat ornare enim, ac ornare sem libero sit amet lorem.
                Maecenas elementum, justo sed ornare adipiscing, lacus odio rhoncus massa, ut auctor lacus lectus non dui.
                In scelerisque viverra enim in malesuada. Nam rutrum ultricies lacus nec suscipit. Duis leo velit, laoreet ac dignissim eget,
                mattis vulputate nibh. Proin dapibus justo eu lectus ullamcorper ultrices. Nunc aliquet odio vel augue laoreet dictum.
                Mauris felis dolor, commodo at convallis vitae, fermentum non felis. Vivamus in turpis lorem, a consequat ipsum.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sed nulla nisl.
                Cras vitae eros sed elit ultricies ultrices. Cras imperdiet augue at ante rutrum lacinia. Nam turpis ligula,
                commodo fringilla commodo quis, viverra vel elit. Maecenas ut nisl sed sem ornare tincidunt vitae in elit.
                Aenean at gravida diam. Mauris fringilla lorem nec diam vulputate id fermentum lectus pharetra. Aenean augue eros,
                sodales vitae pulvinar id, porta a urna.
            </p>
        </div>
    </div>
</div>

<div id="footer">
    <p>Copyright</p>
</div>

</body>
</html>
            
Code CSS

Code : Tout sélectionner

#header, #footer, #main {
    width : 900px;
    margin : auto;
    border : 1px solid #666;
    overflow : hidden;
}
#header {
    background : #dedede;
}
h1 {
    text-align : center;
    padding : 20px;
}
#menu {
    float : left;
    width : 200px;
    background : #abc;
    margin : 0;
    padding : 0;
}
#contenu {
    float : left;
    width : 700px;
    padding : 5px;
}
.article h1 {
    text-decoration : underline;
    padding : 10px;
    margin : 0;
}
.article p {
    text-align : justify;
}
#footer {
    background : #c7c7c7;
    clear : both;
}
#footer p {
    text-align : center;
    color : #666;
    padding : 10px;
le resultat sur navigateur est ici:
http://j-willette.developpez.com/tutori ... ple-1.html

source du cours:
willette.developpez.com/tutoriels/html/debugger-son-code-html-css/

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité