Scribd Logo
Importer

Bienvenue sur Scribd !

  • L.S Manzel Ennour Communication Et Technologie Internet Création de Site Web - TP1 Prof: Fredj Imed

    Transféré par

    Fredj Imed
    47 vues4 pages

    Titre original

    TP1

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    47 vues4 pages

    L.S Manzel Ennour Communication Et Technologie Internet Création de Site Web - TP1 Prof: Fredj Imed

    Transféré par

    Fredj Imed

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    L.

    S MANZEL COMMUNICATION ET TECHNOLOGIE INTERNET PROF :


    ENNOUR Création de site web -TP1 FREDJ IMED
    Objectifs :
    Margin – border – padding et box-sizing

    Activité N°1 . Question : Compléter le vide en bas ! .


    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <style> Vue de la page
            body{
                border: solid 3px black;
        }
          .c1 {
            box-sizing: content-box;
            background-color: rgb(206, 206, 197);
            width: 300px;
            border: solid 10px blue;
            margin: 0px;
            padding-top: 30px;
            padding-bottom: 30px;
       }
          #p1 {
            box-sizing: border-box;
            border: solid 20px rgb(125, 81, 81);
            background-color: rgb(255, 255, 255);
            width: 300px;
            padding: 20px;
            margin-top: 0px;
            margin-bottom: 0px;
       }
          #p2 {
            box-sizing: content-box;
            border: solid 20px red;
            background-color: rgb(255, 255, 255);
            width: 300px;
            padding: 20px;
            margin-bottom: 0px;
            margin-top: 0px;
       }
        </style>
      </head>
      <body>
        <div class="c1">
          <p id="p1">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore vero
            obcaecati autem minus impedit, blanditiis doloremque perferendis
            cupiditate et est tenetur unde deleniti aperiam accusantium ipsa cumque
            quae, similique aliquid.
          </p>
          <p id="p2">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore vero
            obcaecati autem minus impedit, blanditiis doloremque perferendis
            cupiditate et est tenetur unde deleniti aperiam accusantium ipsa cumque
            quae, similique aliquid.
          </p>
        </div>
        <div style="width: …………….px; height: 100px; background-color: rgb(211, 155, 155)"
        ></div>
      </body>
    </html>
    Activité n°2

    1. Saisir le code de la page si dessus .

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8'> Vue de la page
        <style>
            div {
                border:  solid;
                font-size: 16px;
         
        }
            p{
                border: solid;
                margin-top: 1em;
          
        }
        </style>
    </head>
    <body>

        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, ut reiciendis similique tenetur, necessitatibus
    natus saepe impedit dolore laboriosam atque quisquam a voluptate! Nisi dolorem natus praesentium mollitia. Modi,
    numquam.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut natus ipsa quisquam sed voluptatem numquam
    suscipit, explicabo ab. Dolores, beatae provident impedit deleniti consequatur pariatur! Quaerat hic quia quibusdam
    voluptatum?</p>
        </div>
      
    </body>
    </html>
    2. Modifier le code précèdent pour obtenir la vue si dessous .
    Solution

    <!DOCTYPE html> Border width


    <html>
    <head>
        <meta charset='utf-8'>
        <style>
            div {
                border:  solid 1px;
                font-size: 16px;
             
            }
            p{
                border: solid;
                margin: 1em;
                padding: 1em;
               
            }
            td{
                width: 50%;
                border:solid red 1px; Content width
                padding:10px;
               
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, ut
    reiciendis similique tenetur, necessitatibus natus saepe impedit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut natus
    ipsa quisquam sed voluptatem numquam suscipit, explicabo ab. </p>
    </div>
                </td>
                <td>
                    <div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, ut
    reiciendis similique tenetur, necessitatibus natus saepe impedit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut natus
    ipsa quisquam sed voluptatem numquam suscipit, explicabo ab. </p>
    </div>
                </td>
            </tr>
        </table>
    </body>
    </html>
    <!DOCTYPE html>
    Activité N°3: <html>
    <head>
    1. Editer la page suivante :     <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <style>
            #d1,#d2,#d3,#d4{
                border:solid 1px black;
                padding:50px;
             
        }
            #d1{
                width: 400px;
                height: 400px;
                border:solid black 2px;
    100 px     }
            #d2{
                width:300px;
                height: 300px;
          
        }
    200 px         #d3{
                width:200px;
                height: 200px;
        }
            #d4{
                width:100px;
    300 px             height: 100px;
        }
            img {
                width:100%;
                height: 100%;
        }
    400 px
        </style>
    </head>
    2. Editer la page suivante : <body>
        <div id="d1">
            <div id="d2">
                <div id="d3">
                    <div id="d4">
                        <img src="https://i.stack.imgur.com/MREJv.png"/>
                    </div>
                </div>

            </div>
        </div>
    </body>
    </html>

    Vous aimerez peut-être aussi