Scribd Logo
Importer

Bienvenue sur Scribd !

  • 72 vues

    Leçon 8

    Transféré par

    Ayman Lamzouri
    Le document décrit les balises HTML de structure comme <header>, <nav>, <section>, <article>, <aside> et <footer>. Il explique ensuite les propriétés des boîtes en HTML et CSS comme width, height, margin, padding, border, position et display.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    Leçon 8

    Transféré par

    Ayman Lamzouri
    72 vues7 pages
    Le document décrit les balises HTML de structure comme <header>, <nav>, <section>, <article>, <aside> et <footer>. Il explique ensuite les propriétés des boîtes en HTML et CSS comme width, height, margin, padding, border, position et display.

    Titre original

    leçon8

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Le document décrit les balises HTML de structure comme <header>, <nav>, <section>, <article>, <aside> et <footer>. Il explique ensuite les propriétés des boîtes en HTML et CSS comme width, height, margin, padding, border, position et display.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    72 vues7 pages

    Leçon 8

    Transféré par

    Ayman Lamzouri
    Le document décrit les balises HTML de structure comme <header>, <nav>, <section>, <article>, <aside> et <footer>. Il explique ensuite les propriétés des boîtes en HTML et CSS comme width, height, margin, padding, border, position et display.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 7

    HTML

    • Les balises de structure


    • Les balises de structure sont utilisées pour mettre en forme des blocs de contenu et de les
    positionner. Il existe plusieurs types de balises
    • div, span, et les balises sémantiques : header, nav, section, article, aside, footer
    <header> pour introduire l’entête de la page
    <nav> pour introduire une barre de navigation
    <footer> pour introduire un pied de page
    <aside> pour introduire une partie latérale d’une page
    <article> pour introduire un article dans une page

    header
    nav

    articles aside

    footer
    HTML
    Tout élément (tout tag) occupe un (ou plusieurs) espace(s)
    rectangulaire(s) à l'écran. Cette zone est visualisée avec la couleur de
    fond de l'élément considéré
    PROPRIÉTÉS DES BOÎTES

    width : px % auto;
    height : px % auto
    margin-top : px % em
    margin-left margin-bottom margin-right
    margin : une à quatre valeurs
    padding-top : px % em
    padding-left padding-right padding-bottom
    padding :
    PROPRIÉTÉS DES BOÎTES

    Les bordures
    border-width : px
    border-color: black;
    border-style : none hidden, solid double dashed
    dotted
    border-left border-top, border-right, border-bottom
    border
    border-radius : px
    box-shadow: 2px 2px 4px black;
    PROPRIÉTÉS DES BOÎTES

    Propriétés d'affichage et de positionnement


    display : none block inline inline-block
    visibility : visible
    float : left right
    position : absolute relative
    Cet attribut peut prendre deux états : soit relative, soit absolute. Cela permet d'indiquer si l'on reste en
    positionnement relatif (valeur par défaut) ou si l'on passe en positionnement absolu (dans ce
    cas top et left valent, par défaut, 0).

    top - left : px % em...


    top: distance entre l'élément et le haut de la page web.
    Left: distance entre l'élément et la bordure gauche de la fenêtre
    HTML
    <!doctype html>
    <html lang=‘’fr’’>
    <head>
    <title> tags sémantiques</title>
    <meta charset=‘’utf_8’’>
    <link rel=‘’stylesheet’’ type=‘’css/text’’ href=‘’style.css’’>
    </head>
    <body>
    <header>
    <img id=‘’logo’’ scr=‘’logo.png’’>
    <h1> un entete</h1>
    </header>
    <nav>
    <a href=‘’accueil.html’’>page d’accueil</a>
    </nav>
    <h2>nom de la page</h2>
    <p> contenu de la page</p>
    <footer>
    <hr> <p>CopyRight 2021</p>
    </footer>
    </body>
    </html>
    CSS
    * {font-family:verdana,arial;}
    #logo {float:left, width:100px;}
    header {text-align:center;}
    nav {text-align:center;}
    nav a {
    width:20%;
    text-decoration:none; font-weight:bold;
    color:gray; background:#E0E0E0;
    border:2px solid #808080;
    padding-top:10px; padding-bottom:10px;
    padding-left:30px;padding-right:30px;
    border-radius:10px;
    margin-left:5px;margin-right:5px;
    }
    nav a:hover { text-decoration:underline;}
    footer {text-align:center;}

    Vous aimerez peut-être aussi