HTML
Apprendre le langage le plus utilisé sur le web
Module de cours




                           La mise à disposition ...
Plan
1. Aperçu
2. Structure d’une page HTML
3. Balises textes
4. Balises multimédias
5. Balises hypertextes
6. Balises lis...
1. Aperçu

1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. Squelette d’une page HTML
3. HTML et les autres langag...
1. Aperçu
   1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




                        La mise à disposition gratu...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?


1. HTML : un langage qui marque le web !




      ...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?


1. HTML : un langage qui marque le web !
  • HTML ?...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?


1. HTML : un langage qui marque le web !
  • HTML ?...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?


1. HTML : un langage qui marque le web !
  • HTML ?...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?


1. HTML : un langage qui marque le web !
  • HTML ?...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?


1. HTML : un langage qui marque le web !
  • HTML ?...
1. Aperçu
   1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




                        La mise à disposition gratu...
1. Aperçu
      1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche




            ...
1. Aperçu
      1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
  • Historiqueme...
1. Aperçu
      1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
  • Historiqueme...
1. Aperçu
      1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
  • Historiqueme...
1. Aperçu
      1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
  • Historiqueme...
1. Aperçu
      1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
  • Historiqueme...
1. Aperçu
   1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




                        La mise à disposition gratu...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

3. La famille : DHTML, le cousin qu’on ne voit jamai...
1. Aperçu
   1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




                        La mise à disposition gratu...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




4. La famille : HTM, le vieil oncle malade




  ...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




4. La famille : HTM, le vieil oncle malade
  • Si...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




4. La famille : HTM, le vieil oncle malade
  • Si...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




4. La famille : HTM, le vieil oncle malade
  • Si...
1. Aperçu
   1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?




                        La mise à disposition gratu...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi




  ...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi
  • eX...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi
  • eX...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi
  • eX...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi
  • eX...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi
  • eX...
1. Aperçu
     1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?

5. La famille : XHTML, l’héritier nouveau roi
  • eX...
1. Aperçu
   2. Squelette d’une page HTML classique




                        La mise à disposition gratuite est un choi...
1. Aperçu
     2. Squelette d’une page HTML classique



<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
<title...
1. Aperçu
      2. Squelette d’une page XHTML

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http:...
1. Aperçu
      2. Squelette d’une page XHTML

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http:...
1. Aperçu
      2. Squelette d’une page XHTML

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http:...
1. Aperçu
      2. Squelette d’une page XHTML

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http:...
1. Aperçu
    3. HTML et les autres langages


1. HTML et CSS
 • Cascading Style Sheet
 • Langage de description des docum...
1. Aperçu
     3. HTML et les autres langages


1. HTML et CSS : imbrication interne


 <body style=“color:white”>
   <p s...
1. Aperçu
     3. HTML et les autres langages


1. HTML et CSS : imbrication interne


 <body style=“color:white”>
   <p s...
1. Aperçu
     3. HTML et les autres langages


1. HTML et CSS : imbrication externe (ou head)




                       ...
1. Aperçu
     3. HTML et les autres langages


1. HTML et CSS : imbrication externe (ou head)
HTML

 <body>
   <p>Texte</...
1. Aperçu
     3. HTML et les autres langages


1. HTML et CSS : imbrication externe (ou head)
HTML                       ...
1. Aperçu
    3. HTML et les autres langages


2. HTML et PHP
 • PHP : Hypertext Preprocessor
 • Langage de scripts côté s...
2. Structure d’une page HTML


1. Balises et attributs
2. Le Head
3. Le Body




                           La mise à disp...
2. Structure d’une page HTML
     1. Balises et attributs


1. Quelques balises

  <!doctype>                             ...
2. Structure d’une page HTML
       1. Balises et attributs


 2. Attributs


• Elément présent dans la balise d’ouverture...
2. Structure d’une page HTML
       1. Balises et attributs


 2. Attributs


• Elément présent dans la balise d’ouverture...
2. Structure d’une page HTML
       1. Balises et attributs


 2. Attributs


• Elément présent dans la balise d’ouverture...
2. Structure d’une page HTML
       1. Balises et attributs


 2. Attributs


• Elément présent dans la balise d’ouverture...
2. Structure d’une page HTML
       1. Balises et attributs


 2. Attributs


• Elément présent dans la balise d’ouverture...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />

  • <p align=“left...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise


  •...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs



2. Attributs

  • <img src=“smile.png” />
       balise attri...
2. Structure d’une page HTML
     1. Balises et attributs


3. Exemple de balises imbriquées dans une page

  <body>
    <...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doi...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
2. ... même pour les bali...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
2. ... même pour les bali...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
2. ... même pour les bali...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
2. ... même pour les bali...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
2. ... même pour les bali...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbricati...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises ...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises ...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises ...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises ...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    1. Balises et attributs

4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage s...
2. Structure d’une page HTML
    2. Le Head


1. Localisation dans une page HTML




                         La mise à di...
2. Structure d’une page HTML
     2. Le Head


1. Localisation dans une page HTML


 <html>
   <head>
   </head>
   <body>...
2. Structure d’une page HTML
     2. Le Head


1. Localisation dans une page HTML


 <html>
   <head>
   </head>
   <body>...
2. Structure d’une page HTML
     2. Le Head


1. Localisation dans une page HTML

                                       ...
2. Structure d’une page HTML
     2. Le Head


1. Localisation dans une page HTML

                                       ...
2. Structure d’une page HTML
     2. Le Head


1. Localisation dans une page HTML

                                       ...
2. Structure d’une page HTML
         2. Le Head


   2. Contenu du head (aperçu)


<head>
  <title></title>
  <meta name=...
2. Structure d’une page HTML
     2. Le Head
3. Balise title
Syntaxe
<title>Titre de la page</title>




                 ...
2. Structure d’une page HTML
       2. Le Head
  3. Balise title
 Syntaxe
  <title>Titre de la page</title>

• Confère un ...
2. Structure d’une page HTML
       2. Le Head
  3. Balise title
 Syntaxe
  <title>Titre de la page</title>

• Confère un ...
2. Structure d’une page HTML
       2. Le Head
  3. Balise title
 Syntaxe
  <title>Titre de la page</title>

• Confère un ...
2. Structure d’une page HTML
       2. Le Head
  3. Balise title
 Syntaxe
  <title>Titre de la page</title>

• Confère un ...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta description
Syntaxe
<meta name=“description” content=“descrip...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta description
Syntaxe
<meta name=“description” content=“descrip...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta description
Syntaxe
<meta name=“description” content=“descrip...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta description
Syntaxe
<meta name=“description” content=“descrip...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, cle...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, cle...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, cle...
2. Structure d’une page HTML
     2. Le Head

4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, cle...
2. Structure d’une page HTML
     2. Le Head

5. Balise charset
Syntaxe
<meta http-equiv=“Content-Type” content=“text/html...
2. Structure d’une page HTML
      2. Le Head

5. Balise charset
Syntaxe
 <meta http-equiv=“Content-Type” content=“text/ht...
2. Structure d’une page HTML
      2. Le Head

5. Balise charset
Syntaxe
 <meta http-equiv=“Content-Type” content=“text/ht...
2. Structure d’une page HTML
      2. Le Head

5. Balise charset
Syntaxe
 <meta http-equiv=“Content-Type” content=“text/ht...
2. Structure d’une page HTML
     2. Le Head

6. Balise CSS interne
Syntaxe
<style type=“text/css”>
  <!-- styles CSS -->
...
2. Structure d’une page HTML
      2. Le Head

 6. Balise CSS interne
Syntaxe
  <style type=“text/css”>
    <!-- styles CS...
2. Structure d’une page HTML
      2. Le Head

 6. Balise CSS interne
Syntaxe
  <style type=“text/css”>
    <!-- styles CS...
2. Structure d’une page HTML
      2. Le Head

 6. Balise CSS interne
Syntaxe
  <style type=“text/css”>
    <!-- styles CS...
2. Structure d’une page HTML
      2. Le Head

 6. Balise CSS interne
Syntaxe
  <style type=“text/css”>
    <!-- styles CS...
2. Structure d’une page HTML
     2. Le Head

7. Balise CSS externe
Syntaxe
  <link rel=“stylesheet” href=”style.css” type...
2. Structure d’une page HTML
       2. Le Head

 7. Balise CSS externe
Syntaxe
    <link rel=“stylesheet” href=”style.css”...
2. Structure d’une page HTML
       2. Le Head

 7. Balise CSS externe
Syntaxe
    <link rel=“stylesheet” href=”style.css”...
2. Structure d’une page HTML
       2. Le Head

 7. Balise CSS externe
Syntaxe
    <link rel=“stylesheet” href=”style.css”...
2. Structure d’une page HTML
     2. Le Head
7. Balise CSS externe




                          La mise à disposition gra...
2. Structure d’une page HTML
       2. Le Head
  7. Balise CSS externe
• Types de médias :




                           ...
2. Structure d’une page HTML
        2. Le Head
  7. Balise CSS externe
• Types de médias :
  • all : tous les appareils ;...
2. Structure d’une page HTML
        2. Le Head
  7. Balise CSS externe
• Types de médias :
  • all : tous les appareils ;...
2. Structure d’une page HTML
        2. Le Head
  7. Balise CSS externe
• Types de médias :
  • all : tous les appareils ;...
2. Structure d’une page HTML
        2. Le Head
  7. Balise CSS externe
• Types de médias :
  • all : tous les appareils ;...
2. Structure d’une page HTML
        2. Le Head
  7. Balise CSS externe
• Types de médias :
  • all : tous les appareils ;...
2. Structure d’une page HTML
       2. Le Head
  7. Balise CSS externe
• Types de médias :
  • all : tous les appareils ;
...
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Html et xhtml
Prochain SlideShare
Chargement dans…5
×

Html et xhtml

1 894 vues

Publié le

Module de formation d'apprentissage du XHTML

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 894
Sur SlideShare
0
Issues des intégrations
0
Intégrations
258
Actions
Partages
0
Téléchargements
218
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive





































































































































































































































































































































































































































































  • Html et xhtml

    1. 1. HTML Apprendre le langage le plus utilisé sur le web Module de cours La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    2. 2. Plan 1. Aperçu 2. Structure d’une page HTML 3. Balises textes 4. Balises multimédias 5. Balises hypertextes 6. Balises listes 7. Balises formulaires 8. HTML et référencement 9. HTML et Web 2.0 La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    3. 3. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. Squelette d’une page HTML 3. HTML et les autres langages 1. Imbrication HTML et CSS 2. Imbrication HTML et PHP La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    4. 4. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    5. 5. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 1. HTML : un langage qui marque le web ! La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    6. 6. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 1. HTML : un langage qui marque le web ! • HTML ? HyperText Markup Language La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    7. 7. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 1. HTML : un langage qui marque le web ! • HTML ? HyperText Markup Language • Quoi ? Un format de données La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    8. 8. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 1. HTML : un langage qui marque le web ! • HTML ? HyperText Markup Language • Quoi ? Un format de données • Pour ? Modéliser des pages web La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    9. 9. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 1. HTML : un langage qui marque le web ! • HTML ? HyperText Markup Language • Quoi ? Un format de données • Pour ? Modéliser des pages web • But ? Traitement, manipulation et rendu d’information La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    10. 10. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 1. HTML : un langage qui marque le web ! • HTML ? HyperText Markup Language • Quoi ? Un format de données • Pour ? Modéliser des pages web • But ? Traitement, manipulation et rendu d’information • Comment ? Grâce au <balisage> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    11. 11. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    12. 12. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. La famille : HTML, le patriarche La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    13. 13. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. La famille : HTML, le patriarche • Historiquement le plus ancien (1992) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    14. 14. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. La famille : HTML, le patriarche • Historiquement le plus ancien (1992) • Socle du langage de présentation de pages web La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    15. 15. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. La famille : HTML, le patriarche • Historiquement le plus ancien (1992) • Socle du langage de présentation de pages web • Encadré par le W3C (World Wide Web Consortium) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    16. 16. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. La famille : HTML, le patriarche • Historiquement le plus ancien (1992) • Socle du langage de présentation de pages web • Encadré par le W3C (World Wide Web Consortium) • Père de tous les dérivés : htm, dhtml, xhtml... La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    17. 17. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 2. La famille : HTML, le patriarche • Historiquement le plus ancien (1992) • Socle du langage de présentation de pages web • Encadré par le W3C (World Wide Web Consortium) • Père de tous les dérivés : htm, dhtml, xhtml... • Marié à SGML (Standard Generalized Markup Language) langage normalisé de balisage généralisé = langage de description utilisant des balises La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    18. 18. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    19. 19. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    20. 20. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais • DHTML n’existe pas (normes, langages) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    21. 21. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais • DHTML n’existe pas (normes, langages) • Dynamisation du contenu par des interactions une fois la page chargée La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    22. 22. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais • DHTML n’existe pas (normes, langages) • Dynamisation du contenu par des interactions une fois la page chargée • Ensemble de technologies web La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    23. 23. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais • DHTML n’existe pas (normes, langages) • Dynamisation du contenu par des interactions une fois la page chargée • Ensemble de technologies web • HTML La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    24. 24. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais • DHTML n’existe pas (normes, langages) • Dynamisation du contenu par des interactions une fois la page chargée • Ensemble de technologies web • HTML • CSS La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    25. 25. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 3. La famille : DHTML, le cousin qu’on ne voit jamais • DHTML n’existe pas (normes, langages) • Dynamisation du contenu par des interactions une fois la page chargée • Ensemble de technologies web • HTML • CSS • JavaScript La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    26. 26. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    27. 27. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 4. La famille : HTM, le vieil oncle malade La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    28. 28. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 4. La famille : HTM, le vieil oncle malade • Simple réduction de HTML La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    29. 29. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 4. La famille : HTM, le vieil oncle malade • Simple réduction de HTML • Format utilisé par Microsoft à une époque La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    30. 30. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 4. La famille : HTM, le vieil oncle malade • Simple réduction de HTML • Format utilisé par Microsoft à une époque • En fin de vie La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    31. 31. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    32. 32. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    33. 33. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi • eXtensible HyperText Markup Language La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    34. 34. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi • eXtensible HyperText Markup Language • Marié à XML (eXtensible Markup Language) : plus actuel et plus simple que SGML La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    35. 35. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi • eXtensible HyperText Markup Language • Marié à XML (eXtensible Markup Language) : plus actuel et plus simple que SGML • XHTML 1.0 : simple reformulation du HTML 4.01 La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    36. 36. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi • eXtensible HyperText Markup Language • Marié à XML (eXtensible Markup Language) : plus actuel et plus simple que SGML • XHTML 1.0 : simple reformulation du HTML 4.01 • XHTML 1.1 : ajout de nouveaux éléments syntaxiques La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    37. 37. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi • eXtensible HyperText Markup Language • Marié à XML (eXtensible Markup Language) : plus actuel et plus simple que SGML • XHTML 1.0 : simple reformulation du HTML 4.01 • XHTML 1.1 : ajout de nouveaux éléments syntaxiques • XHTML BASIC : version simplifiée pour clients légers La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    38. 38. 1. Aperçu 1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ? 5. La famille : XHTML, l’héritier nouveau roi • eXtensible HyperText Markup Language • Marié à XML (eXtensible Markup Language) : plus actuel et plus simple que SGML • XHTML 1.0 : simple reformulation du HTML 4.01 • XHTML 1.1 : ajout de nouveaux éléments syntaxiques • XHTML BASIC : version simplifiée pour clients légers • En préparation : XHTML 2.0 La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    39. 39. 1. Aperçu 2. Squelette d’une page HTML classique La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    40. 40. 1. Aperçu 2. Squelette d’une page HTML classique <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;> <title>Titre de la page</title> <body> <p>Un paragraphe</p> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    41. 41. 1. Aperçu 2. Squelette d’une page XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <title>Titre de la page</title> partie invisible </head> à l’écran <body> <p>Un paragraphe</p> partie visible </body> à l’écran </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    42. 42. 1. Aperçu 2. Squelette d’une page XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <title>Titre de la page</title> partie invisible </head> à l’écran <body> <p>Un paragraphe</p> partie visible </body> à l’écran </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    43. 43. 1. Aperçu 2. Squelette d’une page XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <title>Titre de la page</title> partie invisible </head> à l’écran <body> <p>Un paragraphe</p> partie visible </body> à l’écran </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    44. 44. 1. Aperçu 2. Squelette d’une page XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <title>Titre de la page</title> partie invisible </head> à l’écran <body> <p>Un paragraphe</p> partie visible </body> à l’écran </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    45. 45. 1. Aperçu 3. HTML et les autres langages 1. HTML et CSS • Cascading Style Sheet • Langage de description des documents HTML et XML • Gère la présentation (mise en page, rendu) • Encadré par le W3C (World Wide Web Consortium) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    46. 46. 1. Aperçu 3. HTML et les autres langages 1. HTML et CSS : imbrication interne <body style=“color:white”> <p style=“font-size:12px;”>Texte</p> <ul style= “list-style=square”> <li style=“margin-left:10px;”>élément 1</li> <li>élément 2</li> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    47. 47. 1. Aperçu 3. HTML et les autres langages 1. HTML et CSS : imbrication interne <body style=“color:white”> <p style=“font-size:12px;”>Texte</p> <ul style= “list-style=square”> <li style=“margin-left:10px;”>élément 1</li> <li>élément 2</li> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    48. 48. 1. Aperçu 3. HTML et les autres langages 1. HTML et CSS : imbrication externe (ou head) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    49. 49. 1. Aperçu 3. HTML et les autres langages 1. HTML et CSS : imbrication externe (ou head) HTML <body> <p>Texte</p> <ul> <li>élément 1</li> <li>élément 2</li> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    50. 50. 1. Aperçu 3. HTML et les autres langages 1. HTML et CSS : imbrication externe (ou head) HTML CSS <body> body {color: white;} <p>Texte</p> <ul> p {font-size: 12px;} <li>élément 1</li> <li>élément 2</li> ul {list-style: square;} </ul> </body> li {margin-left: 10px;} La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    51. 51. 1. Aperçu 3. HTML et les autres langages 2. HTML et PHP • PHP : Hypertext Preprocessor • Langage de scripts côté serveur • Mouvance libre • Utilisé pour créer des pages web dynamiques La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    52. 52. 2. Structure d’une page HTML 1. Balises et attributs 2. Le Head 3. Le Body La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    53. 53. 2. Structure d’une page HTML 1. Balises et attributs 1. Quelques balises <!doctype> <img> <h1> <p> <html> <form> <h2> <br> <head> <input> <h3> <hr> <body> <textarea> <h4> <ul> <meta> <embed> <h5> <ol> <title> <object> <h6> <li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    54. 54. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • Elément présent dans la balise d’ouverture • Définit des propriétés supplémentaires • Forme : clé=valeur • Exemples : • <a href=“http://www.c-group.be”> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    55. 55. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • Elément présent dans la balise d’ouverture • Définit des propriétés supplémentaires • Forme : clé=valeur • Exemples : • <a href=“http://www.c-group.be”> balise La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    56. 56. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • Elément présent dans la balise d’ouverture • Définit des propriétés supplémentaires • Forme : clé=valeur • Exemples : • <a href=“http://www.c-group.be”> balise attribut La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    57. 57. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • Elément présent dans la balise d’ouverture • Définit des propriétés supplémentaires • Forme : clé=valeur • Exemples : • <a href=“http://www.c-group.be”> balise attribut clé La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    58. 58. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • Elément présent dans la balise d’ouverture • Définit des propriétés supplémentaires • Forme : clé=valeur • Exemples : • <a href=“http://www.c-group.be”> balise attribut clé valeur La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    59. 59. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> • <p align=“left”>Déconseillé (*)</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    60. 60. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise • <p align=“left”>Déconseillé (*)</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    61. 61. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut • <p align=“left”>Déconseillé (*)</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    62. 62. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé • <p align=“left”>Déconseillé (*)</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    63. 63. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé valeur • <p align=“left”>Déconseillé (*)</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    64. 64. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé valeur • <p align=“left”>Déconseillé (*)</p> balise La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    65. 65. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé valeur • <p align=“left”>Déconseillé (*)</p> balise attribut La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    66. 66. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé valeur • <p align=“left”>Déconseillé (*)</p> balise attribut clé La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    67. 67. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé valeur • <p align=“left”>Déconseillé (*)</p> balise attribut clé valeur La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    68. 68. 2. Structure d’une page HTML 1. Balises et attributs 2. Attributs • <img src=“smile.png” /> balise attribut clé valeur • <p align=“left”>Déconseillé (*)</p> balise attribut clé valeur (*) Les propriétés de mise en page peuvent être assignées simplement par CSS ! La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    69. 69. 2. Structure d’une page HTML 1. Balises et attributs 3. Exemple de balises imbriquées dans une page <body> <p>Texte</p> <ul> <li>élément 1</li> <li>élément 2</li> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    70. 70. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    71. 71. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée <body> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    72. 72. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée <body> <p> Texte </p> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    73. 73. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée <body> <p> Texte </p> <ul> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    74. 74. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée <body> <p> Texte </p> <ul> <li> Elément 1 </li> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    75. 75. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée Balise d’ouverture : <balise> <body> <p> Texte </p> <ul> <li> Elément 1 </li> </ul> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    76. 76. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 1. Une balise ouverte doit être fermée Balise d’ouverture : <balise> <body> <p> Texte </p> <ul> <li> Elément 1 </li> </ul> Balise de fermeture : </balise> </body> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    77. 77. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 2. ... même pour les balises uniques La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    78. 78. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 2. ... même pour les balises uniques <br> devient <br /> <hr> devient <hr /> <img> devient <img /> Exemple concret : La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    79. 79. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 2. ... même pour les balises uniques <br> devient <br /> <hr> devient <hr /> <img> devient <img /> Exemple concret : <img src=“smile.jpg” /> affichera : La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    80. 80. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 2. ... même pour les balises uniques <br> devient <br /> <hr> devient <hr /> <img> devient <img /> Exemple concret : <img src=“smile.jpg” /> affichera : La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    81. 81. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 2. ... même pour les balises uniques <br> devient <br /> <hr> devient <hr /> <img> devient <img /> Exemple concret : <img src=“smile.jpg” /> affichera : Note : fermer les balises est une bonne pratique XHTML La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    82. 82. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    83. 83. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication <p> Texte </p> <ul> <li> Elément 1 </li> </ul> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    84. 84. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication <p> Texte </p> <ul> <li> Elément 1 </li> </ul> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    85. 85. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    86. 86. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    87. 87. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    88. 88. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    89. 89. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    90. 90. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    91. 91. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    92. 92. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 3. Bien gérer l’imbrication des balises Bonne imbrication Mauvaise imbrication <p> <p> Texte Texte </p> <ul> <ul> </p> <li> <li> Elément 1 Elément 1 </li> </ul> </ul> </li> Moralité : Il faut toujours fermer pour pouvoir rouvrir... La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    93. 93. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 4. Proscrire les balises de mise en forme La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    94. 94. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 4. Proscrire les balises de mise en forme Balises HTML <b> : mise en gras <i> : mise en italique <u> : soulignement La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    95. 95. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 4. Proscrire les balises de mise en forme Balises HTML <b> : mise en gras <i> : mise en italique <u> : soulignement Ces propriétés peuvent être assignées simplement par CSS ! La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    96. 96. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 4. Proscrire les balises de mise en forme Balises HTML Propriétés CSS <b> : mise en gras = {font-weight: bold;} <i> : mise en italique = {font-style: italic;} <u> : soulignement = {text-decoration: underline;} Ces propriétés peuvent être assignées simplement par CSS ! La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    97. 97. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    98. 98. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    99. 99. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information principal</h1> <h1>Titre La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    100. 100. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information <h1>Titre principal</h1> <p>Voici 2 sous-titres :</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    101. 101. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information <h1>Titre principal</h1> <p>Voici 2 sous-titres :</p> <h2>Sous-titre 1</h2> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    102. 102. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information <h1>Titre principal</h1> <p>Voici 2 sous-titres :</p> <h2>Sous-titre 1</h2> <p>Son contenu</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    103. 103. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information <h1>Titre principal</h1> <p>Voici 2 sous-titres :</p> <h2>Sous-titre 1</h2> <p>Son contenu</p> <h2>Sous-titre 2</h2> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    104. 104. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information <h1>Titre principal</h1> <p>Voici 2 sous-titres :</p> <h2>Sous-titre 1</h2> <p>Son contenu</p> <h2>Sous-titre 2</h2> <p>Son contenu</p> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    105. 105. 2. Structure d’une page HTML 1. Balises et attributs 4. Règles pour un bon balisage (x)HTML 5. Utiliser le balisage sémantique Bien hiérarchiser l’information <h1>Titre principal</h1> <p>Voici 2 sous-titres :</p> <h2>Sous-titre 1</h2> <p>Son contenu</p> <h2>Sous-titre 2</h2> <p>Son contenu</p> Hiérarchiser l’information clarifie les choses La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    106. 106. 2. Structure d’une page HTML 2. Le Head 1. Localisation dans une page HTML La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    107. 107. 2. Structure d’une page HTML 2. Le Head 1. Localisation dans une page HTML <html> <head> </head> <body> </body> </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    108. 108. 2. Structure d’une page HTML 2. Le Head 1. Localisation dans une page HTML <html> <head> </head> <body> </body> </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    109. 109. 2. Structure d’une page HTML 2. Le Head 1. Localisation dans une page HTML 1.Le header apparaît toujours avant <html> le body (en entête) <head> </head> <body> </body> </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    110. 110. 2. Structure d’une page HTML 2. Le Head 1. Localisation dans une page HTML 1.Le header apparaît toujours avant <html> le body (en entête) <head> 2.Il renferme des informations qui </head> influencent le rendu de la page... <body> </body> </html> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    111. 111. 2. Structure d’une page HTML 2. Le Head 1. Localisation dans une page HTML 1.Le header apparaît toujours avant <html> le body (en entête) <head> 2.Il renferme des informations qui </head> influencent le rendu de la page... <body> </body> 3.... mais sans que les données </html> mêmes qu’il renferme apparaissent à l’écran La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    112. 112. 2. Structure d’une page HTML 2. Le Head 2. Contenu du head (aperçu) <head> <title></title> <meta name=“description” content=“”/> <meta name=“keywords” content=“”/> <link rel=“stylesheet” href=”style.css” type=text/css media=“all” /> <script type=“text/javascript” src=”javs.js”></script> </head> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    113. 113. 2. Structure d’une page HTML 2. Le Head 3. Balise title Syntaxe <title>Titre de la page</title> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    114. 114. 2. Structure d’une page HTML 2. Le Head 3. Balise title Syntaxe <title>Titre de la page</title> • Confère un titre à la page HTML La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    115. 115. 2. Structure d’une page HTML 2. Le Head 3. Balise title Syntaxe <title>Titre de la page</title> • Confère un titre à la page HTML • Le titre apparaît en haut du navigateur La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    116. 116. 2. Structure d’une page HTML 2. Le Head 3. Balise title Syntaxe <title>Titre de la page</title> • Confère un titre à la page HTML • Le titre apparaît en haut du navigateur La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    117. 117. 2. Structure d’une page HTML 2. Le Head 3. Balise title Syntaxe <title>Titre de la page</title> • Confère un titre à la page HTML • Le titre apparaît en haut du navigateur • Balise essentielle pour un bon référencement • +/- 10 mots recommandés La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    118. 118. 2. Structure d’une page HTML 2. Le Head 4. Balise meta description Syntaxe <meta name=“description” content=“description du contenu de la page” /> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    119. 119. 2. Structure d’une page HTML 2. Le Head 4. Balise meta description Syntaxe <meta name=“description” content=“description du contenu de la page” /> • Balise de description sommaire du contenu de la page La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    120. 120. 2. Structure d’une page HTML 2. Le Head 4. Balise meta description Syntaxe <meta name=“description” content=“description du contenu de la page” /> • Balise de description sommaire du contenu de la page • +/- 140-160 caractères recommandés (200 max) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    121. 121. 2. Structure d’une page HTML 2. Le Head 4. Balise meta description Syntaxe <meta name=“description” content=“description du contenu de la page” /> • Balise de description sommaire du contenu de la page • +/- 140-160 caractères recommandés (200 max) • Conserve une utilité informative + de référencement La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    122. 122. 2. Structure d’une page HTML 2. Le Head 4. Balise meta keywords Syntaxe <meta name=“keywords” content=“mot, clé, clef, mots, clés, clefs, mot clé, mot clef, mots clés, mots clefs” /> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    123. 123. 2. Structure d’une page HTML 2. Le Head 4. Balise meta keywords Syntaxe <meta name=“keywords” content=“mot, clé, clef, mots, clés, clefs, mot clé, mot clef, mots clés, mots clefs” /> • Balise de mots clés par rapport au contenu de la page La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    124. 124. 2. Structure d’une page HTML 2. Le Head 4. Balise meta keywords Syntaxe <meta name=“keywords” content=“mot, clé, clef, mots, clés, clefs, mot clé, mot clef, mots clés, mots clefs” /> • Balise de mots clés par rapport au contenu de la page • +/- 10 items (éléments séparés par espace) recommandés La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    125. 125. 2. Structure d’une page HTML 2. Le Head 4. Balise meta keywords Syntaxe <meta name=“keywords” content=“mot, clé, clef, mots, clés, clefs, mot clé, mot clef, mots clés, mots clefs” /> • Balise de mots clés par rapport au contenu de la page • +/- 10 items (éléments séparés par espace) recommandés • Conserve une utilité informative + de référencement La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    126. 126. 2. Structure d’une page HTML 2. Le Head 5. Balise charset Syntaxe <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    127. 127. 2. Structure d’une page HTML 2. Le Head 5. Balise charset Syntaxe <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> • Balise indiquant au navigateur l’encodage des caractères La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    128. 128. 2. Structure d’une page HTML 2. Le Head 5. Balise charset Syntaxe <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> • Balise indiquant au navigateur l’encodage des caractères • Les plus répandus : iso-8859-1 ou utf-8 La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    129. 129. 2. Structure d’une page HTML 2. Le Head 5. Balise charset Syntaxe <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> • Balise indiquant au navigateur l’encodage des caractères • Les plus répandus : iso-8859-1 ou utf-8 • Permet de gérer l’affichage correct des accents + éviter d’encoder leur équivalent html (ex : é = &eacute;) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    130. 130. 2. Structure d’une page HTML 2. Le Head 6. Balise CSS interne Syntaxe <style type=“text/css”> <!-- styles CSS --> </style> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    131. 131. 2. Structure d’une page HTML 2. Le Head 6. Balise CSS interne Syntaxe <style type=“text/css”> <!-- styles CSS --> </style> • Balise intégrant, dans le head, les propriétés CSS La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    132. 132. 2. Structure d’une page HTML 2. Le Head 6. Balise CSS interne Syntaxe <style type=“text/css”> <!-- styles CSS --> </style> • Balise intégrant, dans le head, les propriétés CSS • Commenter les CSS (<!-- -->) prévient les erreurs d’affichage (anciens navigateurs) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    133. 133. 2. Structure d’une page HTML 2. Le Head 6. Balise CSS interne Syntaxe <style type=“text/css”> <!-- styles CSS --> </style> • Balise intégrant, dans le head, les propriétés CSS • Commenter les CSS (<!-- -->) prévient les erreurs d’affichage (anciens navigateurs) • Déconseillé pour du multi-pages (CSS perd de son intérêt) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    134. 134. 2. Structure d’une page HTML 2. Le Head 6. Balise CSS interne Syntaxe <style type=“text/css”> <!-- styles CSS --> </style> • Balise intégrant, dans le head, les propriétés CSS • Commenter les CSS (<!-- -->) prévient les erreurs d’affichage (anciens navigateurs) • Déconseillé pour du multi-pages (CSS perd de son intérêt) • Plusieurs feuilles de styles peuvent être appelées La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    135. 135. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe Syntaxe <link rel=“stylesheet” href=”style.css” type=text/ css media=“all” /> La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    136. 136. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe Syntaxe <link rel=“stylesheet” href=”style.css” type=text/ css media=“all” /> • Balise appelant une feuille de style CSS (rel = stylesheet) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    137. 137. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe Syntaxe <link rel=“stylesheet” href=”style.css” type=text/ css media=“all” /> • Balise appelant une feuille de style CSS (rel = stylesheet) • La CSS est un fichier externe (ici ‘style.css’) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    138. 138. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe Syntaxe <link rel=“stylesheet” href=”style.css” type=text/ css media=“all” /> • Balise appelant une feuille de style CSS (rel = stylesheet) • La CSS est un fichier externe (ici ‘style.css’) • Le média de destination est général (all) La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    139. 139. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    140. 140. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    141. 141. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : • all : tous les appareils ; La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    142. 142. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : • all : tous les appareils ; • aural : synthétiseurs de parole ; La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    143. 143. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : • all : tous les appareils ; • aural : synthétiseurs de parole ; • braille : appareils braille à retour tactile ; La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    144. 144. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : • all : tous les appareils ; • aural : synthétiseurs de parole ; • braille : appareils braille à retour tactile ; • embossed : appareils à impression braille ; La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    145. 145. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : • all : tous les appareils ; • aural : synthétiseurs de parole ; • braille : appareils braille à retour tactile ; • embossed : appareils à impression braille ; • handled : appareils portatifs ; La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
    146. 146. 2. Structure d’une page HTML 2. Le Head 7. Balise CSS externe • Types de médias : • all : tous les appareils ; • aural : synthétiseurs de parole ; • braille : appareils braille à retour tactile ; • embossed : appareils à impression braille ; • handled : appareils portatifs ; • print : support paginé et mode aperçu avant impression ; La mise à disposition gratuite est un choix, la propriété intellectuelle un droit. En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante : © 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be

    ×