SlideShare une entreprise Scribd logo
XHTML 1.0

    Page XHTML 1.0 transitional

<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
     <title>Ma page</title>

     <!­­ type de document et de caractères ­­>
     <meta http­equiv="content­type" content="text/html; charset=UTF­8" />

     <!­­ meta donnees pour les moteurs de recherche ­­>
     <meta name="description" content="Titre" />
     <meta name="author" content="P. VINCENT" />
     <meta name="keywords" lang="fr" content="mot1, mot2" />
     <meta name="robots" content="all" />

     <!­­ feuilles de style ­­>
     <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" />
     <style type= "text/css">
          /*Mes styles*/
     </style>

     <!­­ javascript ­­>
     <script type="text/javascript" src="script.js" />
     <script type="text/javascript">
          /*Mon script*/
     </script>

     <!­­ flux rss ­­>
     <link rel="alternate" type="application/rss+xml" 
     href="spip.php?page=backend" title="mon site" />

     <!­­ favicon ­­>
     <link rel="shortcut icon" type="image/png" href="/dist/favicon.png" />
</head>

<body>
     <div id="conteneur">
          <div id="entete"></div>
          <div id="col_gauche"> </div>
          <div id="col_droite"> </div>
          <div id="bas_page"></div>
     </div>
</body>

</html>
Les balises de type bloc
          Les balises de type bloc
        Balise                     Signification                            Exemple 
                          Balise bloc mère du corps de la 
        <body>               page, c'est le conteneur      <body>...</body>
                                      principal

        <div>                   Conteneur de blocs          <div>...</div>

         <p>                        Paragraphe              <p>to be<br />or not to be ?</p>

    <h1> ... <h6>              Titre de niveau 1 à 6        <h1>titre</h1>

                                                            <blockquote lang="fr" cite="De l'âme, 
                                                            Aristote">
     <blockquote>              Marque une citation 
                                                            Texte texte texte
                                                            </blockquote>
                                                            <pre>
                           Affiche exactement ce qu'on y       to be
        <pre>
                             mets (tabulations,sauts)          or not to be
                                                            </pre>

                                                           <ul> ou <ol>
                                                                <li>Le XHTML est accessible</li>
                          Liste énumérative <ul> et liste 
    <ul>,<ol>,<li>                                              <li>Le XHTML est bien 
                                   numérotée <ol>
                                                           structuré</li>
                                                           </ul> ou </ol>

                                                            <dl>
                                                                 <dt>Développeur</dt>
                                                                 <dd>Un développeur développe</dd>
    <dl>,<dd>,<dt>             Liste de définition 
                                                                 <dt>Web</dt>
                                                                 <dd>Réseau maillé de serveurs</dd>
                                                            </dl>

                                                            <table border="1" width="90%" 
                                                            height="300px">
                                                                 <tr>
                                                                      <th>Poisson</th>
                                                                      <td>20 euros</td>
                                                                      <td>500 grammes</td>
<table>,<th>,<tr>,<td>               Tableaux                    </tr>
                                                                 <tr>
                                                                      <th>Viande</th>
                                                                      <td>15 euros</td>
                                                                      <td>900 grammes</td>
                                                                 </tr>
                                                            </table>
                                                            <form action="form_action.asp" 
                                                            method="get">
                                                              First name: <input type="text" 
  <fieldset>, <form>          Formulaire interactif         name="fname" /><br />
                                                              <input type="submit" value="Submit" /
                                                            >
                                                            </form>
                                                           <img src ="planets.gif" width="145" 
                                                           height="126" alt="Planets" 
                                                           usemap="#planetmap" />
                                                           <map id ="planetmap" name="planetmap">
                                                             <area shape="rect" 
        <map>            image réactive (nécessite <area>)
                                                           coords="0,0,82,126" href="sun.htm" 
                                                           alt="Sun" />
                                                             <area shape="circle" coords="90,58,3" 
                                                           href="mercur.htm" alt="Mercury" />
                                                           </map>
Liste des balises de type en-ligne
    Liste des balises de type en-ligne
     Balise            Signification                            Exemple

     <span>          Conteneur en­ligne                    <span>texte</span>

       <a>                 Liens            <a href="url_destination" title="info">texte</a>

                                             <img src="url_source" alt="texte alternatif" 
     <img />               Images
                                                            title="info"/>

     <br />            Saut de ligne                             <br />

                   Mise en intonation du       <em>texte important</em> , <strong>texte 
 <em>, <strong>
                           texte                         important2</strong>

<abbr>, <acronym>,  Info­bulle, citation 
                                                 <acronym title="info">texte</acronym>
<cite>, <q>, <dfn>     et définition

                    Suppression / ajout 
  <del>, <ins>                                              <del>texte</del>
                         de texte


 <kbd>, <code>, 
                    Instruction et code                    <code>texte</code>
 <samp>, <var>


  <sub>, <sup>      Indices et exposants                    <sup>texte</sup>

                                             <object type="application/x­shockwave­flash" 
                                                    data="s.swf" width="" height="">
                    Animation multimédia 
    <object>                                       <param name="movie" value="s.swf" />
                         embarquée
                                                  <param name="quality" value="high" />"
                                                               </object>
CSS 2

    Les sélecteurs
      ● Identification : bal avec id="nom_id"

           bal#nom_id { }
           bal#nom_id
      ● Collectif : bal1,bal2 et bal3

           bal1, bal2, bal3 { }
      ● Hiérarchie : bal3 dans bal2 dans bal1

           bal1 bal2 bal3 { }
      ● Adjacent : bal2 directement derrière bal1

           bal1 + bal2 { }
      ● Enfants : bal2 directement dans bal1

           bal1 > bal2 { }

    Typographie

      Action            Propriété                   Valeur                           Description
                                           "Trebuchet MS", arial,  applique les polices par ordre 
 Choix de la police    font­family :                              décroissant ; mettre les noms avec 
                                                sans­serif;                 espace entre ""
                                                                            préférer em et % pour hériter des 
Taille de la police     font­size :          10px; 1.2em; 90%;                 valeurs des éléments parents
                                              silver; #0033FF; 
      Couleur             color :
                                                transparent;
 Orientation de la 
                        font­style :      normal; italic; oblique;
      police

     Epaisseur         font­weight :       bold; bolder; normal;

                                              none; underline; 
    Soulignement      text­decoration :
                                          overline; line­through;
                                             none; capitalize;                 capitalize: première lettre 
 Mise en majuscule    text­transform :                                                 uniquement.
                                           uppercase; lowercase;
                                            left; right; center; 
Alignement du texte     text­align :
                                                  justify;
                                            normal; 1.2em; 90%; 
  Hauteur de ligne     line­height :
                                                   10px;
Espacement entre les 
                      letter­spacing :          normal; ­2px;
      lettres
Espacement entre les 
                      word­spacing :             normal; 3px;
        mots
                                          font­style, font­variant, font­
     Raccourci             font :          weight, fontsize/line­height,    p { font: bold 12px/24px verdana }
                                                    font­family
Arrières plans
         Action                 Propriété                    Valeur                    Notes


 Couleur d'arrière­plan    background­color :              "#RRGGBB";


 Image d'arrière­plan      background­image :           url(http://url);


Répétition de l'arrière­                              repeat; repeat­x; 
                           background­repeat :
          plan                                      repeat­y; no­repeat;

  Spécifie si l'image 
  reste fixe avec les  background­attachment :           scroll; fixed;
déplacements de l'écran

Position de l'image par                                                           possibilité 
                                                    top; middle; bottom; 
     rapport au coin     background­position :                                  d'indiquer des 
                                                    left; center; right;
    supérieur gauche                                                                 pixels

                                                   #000000 url(test.jpg) 
 Raccourci global vers 
                              background :        no­repeat scroll center 
 les propriétés des AP
                                                            top;




Marges
           Description                      Propriété                        Exemple

        Marge supérieure               margin­top :                           5px;

         Marge de droite              margin­right :                         0.5em;

        Marge inférieure              margin­bottom :                         2pt;

         Marge de gauche               margin­left :                           0;

                                                                   ­5px 0.5em 2pt 0; auto; 
   Raccourci pour les marges                margin :               (alignement centré du 
                                                                            bloc)
    Espace intérieur entre 
    l'élément et la bordure            padding­top :                          3px;
          supérieure
    Espace intérieur entre 
    l'élément et la bordure           padding­right :                        0.25em;
            droite
    Espace intérieur entre 
    l'élément et la bordure          padding­bottom :                          0;
          inférieure
    Espace intérieur entre 
    l'élément et la bordure           padding­left :                          2pt;
            gauche
   Raccourci vers l'ensemble 
    des propriétés d'espace                 padding :                   3px 0.25em 0 2pt;
           intérieur
Bordures
                 Description                        Propriété                         Valeur


                                           border[­top ­left ­bottom 
           Epaisseur de la bordure                                                  10px; 2em;
                                                ­right]­width :


           Epaisseur de la bordure                border­width :            10px 15px 15px 10px; (HDBG)



                                           border[­top ­left ­bottom 
            Couleur de la bordure                                                    #RRGGBB;
                                                ­right]­color :


                                                                            solid; (pleine) dashed; (en 
                                           border[­top ­left ­bottom      tirets) dotted; (en pointillés) 
             Style de la bordure
                                                ­right]­style :           double; (double) ridge; inset; 
                                                                                  outset; (en 3D)


                                                                                     10px; 2em;           
          Effet arrondi (Mozzilla)       ­moz­border­radius :
                                                                             10px 10px 10px 10px; (HDBG)


       Raccourci global les propriétés                                      border: 1px 0 0 2px dotted 
                                                    border :
                  de bordure                                                          green;




  Position
     Description                    Propriété                                     Valeur

                                                          none; (n'affiche pas le bloc)           block; 
                                                        (force la propriété bloc)      inline; (force la 
      Propriétés                    display :             propriété en­ligne)     list­item; (force la 
                                                         propriété en­ligne) table; (force la propriété 
                                                                            tableau)

                                                       visible; hidden; (cache l'élément mais réserve un 
       Affichage                   visibility :
                                                                  espace pour son affichage)



                                                           static; (default ­ dans le flux) relative; 
       Position                     position :          (décalage ­ dans le flux) absolute; (fixe ­ hors 
                                                       du flux)   fixed; (fixe ­ hors du flux – noscroll)



                               top : / right : / 
  Distance au parent                                                ­10px; 30%; 2em; (pas pour static)
                               bottom : / left :


Profondeur d'affichage 
                                    z­index :                                  auto; 1000;
       (calque)


Positionnement flottant              float :                          left; right; none; (default)


 Efface le flottement                clear :                       left; right; both; none; (default)
Listes

            Action                  Propriété                 Valeur


                                                       decimal, upper­roman, 
     Type de puces et de 
                                list­style­type :        lower­latin, disc, 
        numérotation
                                                      circle, square ou none


   Permet de personnaliser 
                               list­style­image :        url(image.png);
   les puces avec une image


   Spécifie le retrait des 
                              list­style­position :      inside; outside;
            puces

    Raccourci global vers 
     les propriétés des           list­style :         type position url();
            listes




Curseurs
         Action                    Propriété                     Valeur

                                                           default, pointer, 
 Apparence du curseur               cursor :            crosshair, help, wait, 
                                                               text, move
Blocs ­ Flux de document ­ Marges
                                                  BORDER

                               MARGIN                                    margin top
       texte texte texte texte texte texte texte texte texte 
                               PADDING                          margin 
       texte texte texte texte texte texte texte texte texte    left
       texte texte texte texte texte texte texte texte texte 
                                                                     left        bloc A (marges) 
                                                                               top
               HEIGHT




       texte texte texte texte texte texte texte texte texte 
       texte texte texte texte texte texte texte texte texte 
       texte texte texte texte texte texte texte texte texte 
       texte texte texte texte texte texte texte texte texte                     bloc A (marges + relatif)
       texte texte texte texte texte texte texte texte texte 
                                 WIDTH
       texte texte texte texte texte texte texte texte texte 
       texte texte texte texte texte texte texte texte texte                                               parent 
       texte texte texte texte texte texte texte texte texte                     bloc B
       texte texte texte texte texte texte texte texte texte 
                               PADDING
                               MARGIN




     bloc A                                      bloc C                     bloc A                     bloc C
    { width :                                   { width :              { width : 60% ;                { width : 
    200px ;                                     200px ;                  float: left; }                40% ; 
  float: left; }                             float: right; }                                            float: 
                                                                                                       right; }

                             bloc B
                        { width : 100% ; }
                                                                                     bloc B
                                                                                { width : 100% ;
                                                                                  clear: both; }
                                                     parent 



            top                                      bloc B                                                 bloc B
                                                                         top
                                          { width : 100% ;}                                      { width : 100% ;}
                   bloc A                                                       bloc A
         { position : absolute;                                          { position : fixed; 
left       left : 20px; top : 20                     bloc C     left    left : 20px; top : 20               bloc C
                    px; }                 { width : 100% ;}                      px; }           { width : 100% ;}

Contenu connexe

Tendances

Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
ENSET, Université Hassan II Casablanca
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Cours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 compositeCours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 composite
ENSET, Université Hassan II Casablanca
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
ENSET, Université Hassan II Casablanca
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
ENSET, Université Hassan II Casablanca
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
Squash Apps Pvt Ltd
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
ENSET, Université Hassan II Casablanca
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet
ValeriaCastillo71
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
Yaya Im
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
ENSET, Université Hassan II Casablanca
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Renato Bongiorno Bonfanti
 
ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9
Allison Kunz
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
Heithem Abbes
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
Conférence: Catalyseurs de l'Intelligence Artificielle et Écosystème des Fram...
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
 
Cours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 compositeCours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 composite
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
 
Nuxtjs cheat-sheet
Nuxtjs cheat-sheetNuxtjs cheat-sheet
Nuxtjs cheat-sheet
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9ReactDC Intro to NextJS 9
ReactDC Intro to NextJS 9
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 

Similaire à Memento HTML CSS

HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
Eroan Boyer
 
HTML
HTMLHTML
HTML
Neovov
 
OpenCode beta : Haml & Sass
OpenCode beta : Haml & SassOpenCode beta : Haml & Sass
OpenCode beta : Haml & Sass
Rémi Prévost
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
François-Guillaume Ribreau
 
HTML5 vu par Ekino
HTML5 vu par EkinoHTML5 vu par Ekino
HTML5 vu par Ekino
ekino
 
CSS 3
CSS 3CSS 3
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
David Raichman
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
TheBest Icanbe
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
Html css
Html cssHtml css
Html css
sloumaallagui1
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Cours code n°1 • MSIE
Cours code n°1 • MSIECours code n°1 • MSIE
Cours code n°1 • MSIE
Dorian Dawance
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
Rémi Prévost
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
 

Similaire à Memento HTML CSS (20)

HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
HTML
HTMLHTML
HTML
 
OpenCode beta : Haml & Sass
OpenCode beta : Haml & SassOpenCode beta : Haml & Sass
OpenCode beta : Haml & Sass
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
HTML5 vu par Ekino
HTML5 vu par EkinoHTML5 vu par Ekino
HTML5 vu par Ekino
 
CSS 3
CSS 3CSS 3
CSS 3
 
Html
HtmlHtml
Html
 
Mmi Web Design P2
Mmi Web Design P2Mmi Web Design P2
Mmi Web Design P2
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Html css
Html cssHtml css
Html css
 
HTML5
HTML5HTML5
HTML5
 
Cours code n°1 • MSIE
Cours code n°1 • MSIECours code n°1 • MSIE
Cours code n°1 • MSIE
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
Tapestry
TapestryTapestry
Tapestry
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 

Plus de Patrick Vincent

Séminaire éco-citoyen Bio-inspiration
Séminaire éco-citoyen Bio-inspirationSéminaire éco-citoyen Bio-inspiration
Séminaire éco-citoyen Bio-inspiration
Patrick Vincent
 
SCEWC 2018 Erasme P VINCENT
SCEWC 2018 Erasme P VINCENTSCEWC 2018 Erasme P VINCENT
SCEWC 2018 Erasme P VINCENT
Patrick Vincent
 
Workshop IA publiques
Workshop IA publiquesWorkshop IA publiques
Workshop IA publiques
Patrick Vincent
 
Challenge Transport - Restitution
Challenge Transport - RestitutionChallenge Transport - Restitution
Challenge Transport - Restitution
Patrick Vincent
 
Innovation ouverte - Sprint créatif
Innovation ouverte - Sprint créatifInnovation ouverte - Sprint créatif
Innovation ouverte - Sprint créatif
Patrick Vincent
 
Ludomuse
LudomuseLudomuse
Ludomuse
Patrick Vincent
 
Présentation HOST-Communication / Webnapperon 2
Présentation HOST-Communication / Webnapperon 2Présentation HOST-Communication / Webnapperon 2
Présentation HOST-Communication / Webnapperon 2
Patrick Vincent
 
Ateliers de co-design seniors - HOST
Ateliers de co-design seniors - HOSTAteliers de co-design seniors - HOST
Ateliers de co-design seniors - HOST
Patrick Vincent
 
Lift12 workshop conductor
Lift12 workshop conductorLift12 workshop conductor
Lift12 workshop conductor
Patrick Vincent
 
Webnapperon
WebnapperonWebnapperon
Webnapperon
Patrick Vincent
 
RFID au Muséolab - retours d'expérience
RFID au Muséolab - retours d'expérienceRFID au Muséolab - retours d'expérience
RFID au Muséolab - retours d'expérience
Patrick Vincent
 
Formation - P3 - SPIP Squelettes
Formation - P3 - SPIP SquelettesFormation - P3 - SPIP Squelettes
Formation - P3 - SPIP Squelettes
Patrick Vincent
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
Patrick Vincent
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
Patrick Vincent
 
Formation - WiFi
Formation - WiFiFormation - WiFi
Formation - WiFi
Patrick Vincent
 

Plus de Patrick Vincent (16)

Séminaire éco-citoyen Bio-inspiration
Séminaire éco-citoyen Bio-inspirationSéminaire éco-citoyen Bio-inspiration
Séminaire éco-citoyen Bio-inspiration
 
SCEWC 2018 Erasme P VINCENT
SCEWC 2018 Erasme P VINCENTSCEWC 2018 Erasme P VINCENT
SCEWC 2018 Erasme P VINCENT
 
Workshop IA publiques
Workshop IA publiquesWorkshop IA publiques
Workshop IA publiques
 
Challenge Transport - Restitution
Challenge Transport - RestitutionChallenge Transport - Restitution
Challenge Transport - Restitution
 
Innovation ouverte - Sprint créatif
Innovation ouverte - Sprint créatifInnovation ouverte - Sprint créatif
Innovation ouverte - Sprint créatif
 
Ludomuse
LudomuseLudomuse
Ludomuse
 
Présentation HOST-Communication / Webnapperon 2
Présentation HOST-Communication / Webnapperon 2Présentation HOST-Communication / Webnapperon 2
Présentation HOST-Communication / Webnapperon 2
 
Ateliers de co-design seniors - HOST
Ateliers de co-design seniors - HOSTAteliers de co-design seniors - HOST
Ateliers de co-design seniors - HOST
 
Lift12 workshop conductor
Lift12 workshop conductorLift12 workshop conductor
Lift12 workshop conductor
 
Webnapperon
WebnapperonWebnapperon
Webnapperon
 
RFID au Muséolab - retours d'expérience
RFID au Muséolab - retours d'expérienceRFID au Muséolab - retours d'expérience
RFID au Muséolab - retours d'expérience
 
Formation - P3 - SPIP Squelettes
Formation - P3 - SPIP SquelettesFormation - P3 - SPIP Squelettes
Formation - P3 - SPIP Squelettes
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
 
Memento Boucles SPIP
Memento Boucles SPIPMemento Boucles SPIP
Memento Boucles SPIP
 
Formation - WiFi
Formation - WiFiFormation - WiFi
Formation - WiFi
 

Memento HTML CSS

  • 1. XHTML 1.0 Page XHTML 1.0 transitional <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Ma page</title> <!­­ type de document et de caractères ­­> <meta http­equiv="content­type" content="text/html; charset=UTF­8" /> <!­­ meta donnees pour les moteurs de recherche ­­> <meta name="description" content="Titre" /> <meta name="author" content="P. VINCENT" /> <meta name="keywords" lang="fr" content="mot1, mot2" /> <meta name="robots" content="all" /> <!­­ feuilles de style ­­> <link rel="stylesheet" type="text/css" media="screen" href="feuille.css" /> <style type= "text/css"> /*Mes styles*/ </style> <!­­ javascript ­­> <script type="text/javascript" src="script.js" /> <script type="text/javascript"> /*Mon script*/ </script> <!­­ flux rss ­­> <link rel="alternate" type="application/rss+xml"  href="spip.php?page=backend" title="mon site" /> <!­­ favicon ­­> <link rel="shortcut icon" type="image/png" href="/dist/favicon.png" /> </head> <body> <div id="conteneur"> <div id="entete"></div> <div id="col_gauche"> </div> <div id="col_droite"> </div> <div id="bas_page"></div> </div> </body> </html>
  • 2. Les balises de type bloc Les balises de type bloc Balise Signification  Exemple  Balise bloc mère du corps de la  <body> page, c'est le conteneur  <body>...</body> principal <div> Conteneur de blocs  <div>...</div> <p> Paragraphe  <p>to be<br />or not to be ?</p> <h1> ... <h6> Titre de niveau 1 à 6 <h1>titre</h1> <blockquote lang="fr" cite="De l'âme,  Aristote"> <blockquote> Marque une citation  Texte texte texte </blockquote> <pre> Affiche exactement ce qu'on y  to be <pre> mets (tabulations,sauts) or not to be </pre> <ul> ou <ol>      <li>Le XHTML est accessible</li> Liste énumérative <ul> et liste  <ul>,<ol>,<li>      <li>Le XHTML est bien  numérotée <ol> structuré</li> </ul> ou </ol> <dl>      <dt>Développeur</dt>      <dd>Un développeur développe</dd> <dl>,<dd>,<dt> Liste de définition       <dt>Web</dt>      <dd>Réseau maillé de serveurs</dd> </dl> <table border="1" width="90%"  height="300px">      <tr>           <th>Poisson</th>           <td>20 euros</td>           <td>500 grammes</td> <table>,<th>,<tr>,<td> Tableaux      </tr>      <tr>           <th>Viande</th>           <td>15 euros</td>           <td>900 grammes</td>      </tr> </table> <form action="form_action.asp"  method="get">   First name: <input type="text"  <fieldset>, <form> Formulaire interactif  name="fname" /><br />   <input type="submit" value="Submit" / > </form> <img src ="planets.gif" width="145"  height="126" alt="Planets"  usemap="#planetmap" /> <map id ="planetmap" name="planetmap">   <area shape="rect"  <map> image réactive (nécessite <area>) coords="0,0,82,126" href="sun.htm"  alt="Sun" />   <area shape="circle" coords="90,58,3"  href="mercur.htm" alt="Mercury" /> </map>
  • 3. Liste des balises de type en-ligne Liste des balises de type en-ligne Balise Signification  Exemple <span> Conteneur en­ligne <span>texte</span> <a> Liens <a href="url_destination" title="info">texte</a> <img src="url_source" alt="texte alternatif"  <img /> Images title="info"/> <br /> Saut de ligne <br /> Mise en intonation du  <em>texte important</em> , <strong>texte  <em>, <strong> texte important2</strong> <abbr>, <acronym>,  Info­bulle, citation  <acronym title="info">texte</acronym> <cite>, <q>, <dfn> et définition Suppression / ajout  <del>, <ins> <del>texte</del> de texte <kbd>, <code>,  Instruction et code <code>texte</code> <samp>, <var> <sub>, <sup> Indices et exposants <sup>texte</sup> <object type="application/x­shockwave­flash"  data="s.swf" width="" height=""> Animation multimédia  <object> <param name="movie" value="s.swf" /> embarquée <param name="quality" value="high" />" </object>
  • 4. CSS 2 Les sélecteurs ● Identification : bal avec id="nom_id" bal#nom_id { } bal#nom_id ● Collectif : bal1,bal2 et bal3 bal1, bal2, bal3 { } ● Hiérarchie : bal3 dans bal2 dans bal1 bal1 bal2 bal3 { } ● Adjacent : bal2 directement derrière bal1 bal1 + bal2 { } ● Enfants : bal2 directement dans bal1 bal1 > bal2 { } Typographie Action Propriété Valeur Description  "Trebuchet MS", arial,  applique les polices par ordre  Choix de la police font­family : décroissant ; mettre les noms avec  sans­serif; espace entre "" préférer em et % pour hériter des  Taille de la police font­size : 10px; 1.2em; 90%; valeurs des éléments parents silver; #0033FF;  Couleur color : transparent; Orientation de la  font­style : normal; italic; oblique; police Epaisseur font­weight : bold; bolder; normal; none; underline;  Soulignement text­decoration : overline; line­through; none; capitalize;  capitalize: première lettre  Mise en majuscule text­transform : uniquement. uppercase; lowercase; left; right; center;  Alignement du texte text­align : justify; normal; 1.2em; 90%;  Hauteur de ligne line­height : 10px; Espacement entre les  letter­spacing : normal; ­2px; lettres Espacement entre les  word­spacing : normal; 3px; mots font­style, font­variant, font­ Raccourci font : weight, fontsize/line­height,  p { font: bold 12px/24px verdana } font­family
  • 5. Arrières plans Action Propriété Valeur Notes Couleur d'arrière­plan background­color : "#RRGGBB"; Image d'arrière­plan background­image : url(http://url); Répétition de l'arrière­ repeat; repeat­x;  background­repeat : plan repeat­y; no­repeat; Spécifie si l'image  reste fixe avec les  background­attachment : scroll; fixed; déplacements de l'écran Position de l'image par  possibilité  top; middle; bottom;  rapport au coin  background­position : d'indiquer des  left; center; right; supérieur gauche pixels #000000 url(test.jpg)  Raccourci global vers  background : no­repeat scroll center  les propriétés des AP top; Marges Description Propriété Exemple Marge supérieure margin­top : 5px; Marge de droite margin­right : 0.5em; Marge inférieure margin­bottom : 2pt; Marge de gauche margin­left : 0;  ­5px 0.5em 2pt 0; auto;  Raccourci pour les marges margin : (alignement centré du  bloc) Espace intérieur entre  l'élément et la bordure  padding­top : 3px; supérieure Espace intérieur entre  l'élément et la bordure  padding­right : 0.25em; droite Espace intérieur entre  l'élément et la bordure  padding­bottom : 0; inférieure Espace intérieur entre  l'élément et la bordure  padding­left : 2pt; gauche Raccourci vers l'ensemble  des propriétés d'espace  padding : 3px 0.25em 0 2pt; intérieur
  • 6. Bordures Description Propriété Valeur border[­top ­left ­bottom  Epaisseur de la bordure 10px; 2em; ­right]­width : Epaisseur de la bordure border­width : 10px 15px 15px 10px; (HDBG) border[­top ­left ­bottom  Couleur de la bordure #RRGGBB; ­right]­color : solid; (pleine) dashed; (en  border[­top ­left ­bottom  tirets) dotted; (en pointillés)  Style de la bordure ­right]­style : double; (double) ridge; inset;  outset; (en 3D)            10px; 2em;            Effet arrondi (Mozzilla)  ­moz­border­radius :    10px 10px 10px 10px; (HDBG) Raccourci global les propriétés  border: 1px 0 0 2px dotted  border : de bordure green; Position Description Propriété Valeur   none; (n'affiche pas le bloc)           block;  (force la propriété bloc)      inline; (force la  Propriétés display : propriété en­ligne)     list­item; (force la  propriété en­ligne) table; (force la propriété  tableau) visible; hidden; (cache l'élément mais réserve un  Affichage visibility : espace pour son affichage) static; (default ­ dans le flux) relative;  Position position : (décalage ­ dans le flux) absolute; (fixe ­ hors  du flux)   fixed; (fixe ­ hors du flux – noscroll) top : / right : /  Distance au parent  ­10px; 30%; 2em; (pas pour static) bottom : / left : Profondeur d'affichage  z­index : auto; 1000; (calque) Positionnement flottant float : left; right; none; (default) Efface le flottement clear : left; right; both; none; (default)
  • 7. Listes Action Propriété Valeur decimal, upper­roman,  Type de puces et de  list­style­type : lower­latin, disc,  numérotation circle, square ou none Permet de personnaliser  list­style­image : url(image.png); les puces avec une image Spécifie le retrait des  list­style­position : inside; outside; puces Raccourci global vers  les propriétés des  list­style : type position url(); listes Curseurs Action Propriété Valeur default, pointer,  Apparence du curseur cursor : crosshair, help, wait,  text, move
  • 8. Blocs ­ Flux de document ­ Marges BORDER MARGIN margin top texte texte texte texte texte texte texte texte texte  PADDING margin  texte texte texte texte texte texte texte texte texte  left texte texte texte texte texte texte texte texte texte  left bloc A (marges)  top HEIGHT texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  bloc A (marges + relatif) texte texte texte texte texte texte texte texte texte  WIDTH texte texte texte texte texte texte texte texte texte  texte texte texte texte texte texte texte texte texte  parent  texte texte texte texte texte texte texte texte texte  bloc B texte texte texte texte texte texte texte texte texte  PADDING MARGIN bloc A bloc C bloc A bloc C { width :  { width :  { width : 60% ;  { width :  200px ;  200px ;  float: left; } 40% ;  float: left; } float: right; } float:  right; } bloc B { width : 100% ; } bloc B { width : 100% ; clear: both; } parent  top bloc B bloc B top { width : 100% ;} { width : 100% ;} bloc A bloc A { position : absolute;  { position : fixed;  left left : 20px; top : 20  bloc C left left : 20px; top : 20  bloc C px; } { width : 100% ;} px; } { width : 100% ;}