HTML/CSS

1 Internet

  • Historique
  • Concepts de base

1.1 Chronologie 1/2

  • Historique
    • 1969 : Le réseau ARPANET initial constituée de 4 ordinateurs (UCLA, Stanford Research Institute, Santa Barbara, Salt Lake City ) est fonctionnel.
    • 1973 : 35 machines connectées sur ARPANET
    • 1975 : TCP + IP + UDP
    • 1984 : TCP/IP au CERN
  • Terminologie dans les années 80 : apparition du mot « Internet »

1.2 Chronologie 2/2

  • Historique
    • 1990 : Tim Berners Lee du CERN propose l'idée du World Wide Web
    • 1993 : Premier navigateur Mosaic
    • 1994 : Création de Yahoo!
    • 1994 : Tim Berners Lee fonde le World Wide Web Consortium (W3C)

1.3 Concepts de base

  • Réseaux
  • Architecture client/serveur
  • URL

1.3.1 Le réseau

  • Protocoles TCP/IP :
    • couche réseau-hôte : carte réseau (Ethernet/Wifi) + Drivers
    • couche internet : gestion du routage, e.g. le protocole ICMP (Internet Control Message Protocol)
    • couche transport : régulation des flux de données, e.g. les protocole TCP (Transmission Control Protocol) et UDP (User Datagram Protocol)
    • couche application : programmes utilisateurs tel que navigateur Web, FTP, Telnet, Ping, POP, SMTP, …

1.3.2 L'architecture client/serveur

  • La notion de client/serveur : mode de communication entre au moins deux ordinateurs
    • l’un ou les uns, qualifiés de clients, envoient des requêtes
    • l’autre ou les autres, qualifiés de serveurs, attendent ces requêtes et y répondent
  • Par extension, le client désigne également l’ordinateur sur lequel s’exécute le programme client, et le serveur l’ordinateur sur lequel s’exécute le programme serveur.

1.3.3 Le protocole

  • Le serveur et le client doivent donc utiliser le même protocole pour pouvoir communiquer:
    • HTTP (Hyper Text Transfert Protocol) pour les documents hypertextes (text, images, vidéos, sons);
    • FTP (File Transfert Protocol) pour le transfert des fichiers;
    • SMTP (Simple Mail Transfert Protocol) pour l’envoi des messages électroniques;
    • POP et IMAP pour la réception de messages électroniques.

1.3.4 Exemple d'application : le mail

  • Le client : le logiciel de messagerie électronique envoie des requêtes et attends les réponses.
  • Le serveur : un logiciel serveur installé sur une machine traite les requêtes des clients.
  • L’émission de courrier :
    • Le client utilise SMTP pour envoyer des messages au serveur qui transmettra au serveur du destinataire final.
  • La réception de courrier :
    • Le destinateur final récupère par POP/IMAP son courrier depuis son serveur qui reçoit les messages du serveur de l'expéditeur
  • Le navigateur (Webmail) peut représenter une alternative au client de messagerie. Dans ce cas, les courriers transitent par un serveur web.

1.3.5 URL : Universal/Uniform Resource Locator

  • Accéder à une ressource/serveur ⇒ décrire où elle se trouve.
  • URL : Description de la localisation d’un fichier, une source de données, …, etc.
  • Une URL peut désigner :
    • un serveur ftp,
    • un fichier sur votre disque,
    • une adresse courrier,
    • une page Web publiée par un serveur (serveur de Web).

1.3.6 URL

<protocole>://<nomserveur>[:port]/<chemin>
  • Le nom du protocole (HTTP, FTP)
  • Le nom du serveur (adresse IP, ou nom symbolique)
  • Le chemin d’accès à la ressource
  • Le nom de la ressource

1.3.7 Description d'URL

  • Adresse IP : identifiant unique des ordinateurs (ex. 127.0.0.1).
  • Nom de Domaine / Nom de machine : nom symbolique d’une machine sur Internet (ex. ent.univ-st-etienne.fr)
  • DNS (Domain Name Service / Serveur) : Service de correspondance

IP ⇔ Nom de Domaine / Machine

  • Port : Valeur numérique unique pour chaque programme (ex. FTP/21, SMTP/25, HTTP/80, POP3/110)

2 HTML

html5.png

2.1 Le langage HTML

  • HTML : HyperTexte Markup Language
  • Langage de balisage pour structurer des pages web
  • Langage de description ≠ Langage de programmation
  • HTML correspond au code source interprêté dans un navigateur pour afficher une page web.

2.1.1 Historique

  • 1991 : HTML
  • 1995 : HTML 2.0
  • 1997 : HTML 3.2
  • 1999 : HTML 4.01
  • 2000 : XHTML
  • 2014 : HTML5

2.1.2 4 types d'éléments

  • les balises
  • les attributs de balises
  • les commentaires
  • les entités

2.1.3 Les balises

  • Une balise :
    • commence par un <
    • possède un nom
    • se termine par un >

2.1.4 Les balises de zone

  • Les balises vont généralement par paires (ouvrante/fermante)

(ex : <p> </p> pour un paragraphe)

  • Le nom de la balise est écrit en minuscule
  • La balise fermante possède un / avant le nom de la balise
<balise>contenu</balise>

2.1.5 Les balises ponctuelles

  • Les balises peuvent ne pas avoir de contenu

(ex: <br/> <br> pour un saut de ligne)

  • En HTML5 le slash de fin n'est pas obligatoire
<balise/>
<balise>

2.1.6 Les attributs

  • Les attributs sont associés à une balise ouvrante

(ex: <img src="hello.jpg" alt="Hello"> pour afficher une image)

  • Ils possèdent un nom et une valeur
  • Certains attributs sont obligatoires pour certaines balises
  • On utilise généralement des  "  pour définir la valeur d'un attribut
<balise attribut="valeur">

2.1.7 Les commentaires

  • Les commentaires ne sont pas affichés dans le navigateur
  • Ils sont visibles dans le code source Ctrl+U
<!-- Ceci est un commentaire -->

2.1.8 Les entités

  • Les entités permettent d'afficher des caractères spéciaux (accents, signes, etc.)
  • Avec l'unicode, les entités sont surtout utilisés pour <, >, ", ' et & qui pourraient être confondu avec le balisage HTML
&entite;
&#numero;
   <        &lt;        &#60;   
   >        &gt;        &#62;   
   &       &amp;        &#38;   
   "       &quot;       &#34;   
   '       &apos;       &#39;   

2.1.9 Les entités : accents

  • Pour les accents, il existe différents suffixes : acute, grave, circ, uml
  • En pratique, on ne les utilise plus.
à : &agrave;
é : &eacute;
ö : &ouml;  
î : &icirc; 

Il existe d'autres entités : &nbsp; &euro; etc.

2.1.10 La grammaire HTML

  • On peut définir 5 règles :
    • définir une balise de zone
    • définir une balise ponctuelle
    • paramétrer une balise à l'aide d'attributs
    • imbriquer des balises
    • ajouter des commentaires
  • Les espaces typographiques ne sont pas prises en compte en HTML sauf pour séparer 2 mots

2.2 Structure d'une page HTML

2.2.1 Hello world

  • Créer un fichier avec l'extension .html
  • Insérer du code HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titre</title>
  </head>
  <body>
    <!-- Commentaire : Hello world ! -->
    Hello world &excl;
  </body>
</html>

2.2.2 L'entête <!DOCTYPE>

  • HTML 5
<!DOCTYPE html>
  • HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
  • HTML 4.01 Transitional
  • XHTML 1.0 Strict
  • XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.2.3 La balise <html>

  • Une page HTML commence toujours par une balise <html>
  • Une page HTML finit toujours par une balise </html>
  • Entre ces deux balises, il y a toujours 2 autres balises de zone :
    • la zone d'entête (la tête) : <head></head>
    • la zone de contenu (le corps) : <body></body>

2.2.4 La balise <head>

  • La balise d'entête contient les informations caractéristiques de la page :

    • encodage de la page (obligatoire)
    <meta charset="utf-8">
    • titre de la page (obligatoire)
    <title>Titre de la page</title>

2.2.5 La balise <head>

  • Elle peut contenir d'autres informations

    • auteur, mots clés etc.
    <meta name="description" content="Techniques Internet de base">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, SQL">
<meta name="author" content="Toto">
    • codes attachés (style, javascript)
  • Les informations ne sont pas visibles directement dans le rendu du navigateur (sauf le titre) mais sont visibles dans le code source

2.2.6 La balise <body>

  • La balise de contenu contient toutes les informations qui sont affichées par le navigateur :
    • le texte
    • les liens
    • les images
    • etc.

2.3 Les balises de structure de la page

  • HTML5 introduit des balises sémantiques
    • <section></section> définit une section/partie de la page
    • <article></article> définit un article/post/commentaire ou un autre contenu important de la page.
    • <header></header> définit l'entête de la page/section
    • <footer></footer> définit le bas de page de la page/section
    • <aside></aside> définit un texte qui se rapporte au sujet de la page/section mais qui ne correspond pas directement au contenu de la page
    • <nav></nav> définit les liens de de navigation

2.4 Les balises de titre

<h1>Titre de niveau H1</h1>
<h2>Titre de niveau H2</h2>
<h3>Titre de niveau H3</h3>
<h4>Titre de niveau H4</h4>
<h5>Titre de niveau H5</h5>
<h6>Titre de niveau H6</h6>

2.5 Les balises pour le texte

<p>Paragraphe</p>
<p>
  <em>Emphase par défaut en italique</em>
  <strong>Accentuation par défaut en gras</strong>
  <br>Saut de ligne
  <hr>ligne horizontale pour séparer du texte
</p>
  • D'autres balises peuvent être utilisées
    • <cite></cite> pour une citation
    • <code></code> pour du code
    • <pre></pre> pour du texte préformatté
    • <samp></samp> pour un exemple
    • <blocknote></blocknote> pour une note
    • <address></address> pour une adresse
    • <sub></sub> pour des indices
    • <sup></sup> pour des exposants
    • etc.

2.6 Les balises pour les images

  • La balise <img> permet d'afficher une image

  • Les attributs src et alt sont obligatoires

    • src : URL de l'image
    • alt : Texte alternatif qui remplace une image ne pouvant être affichée ou qui est dicté par certains logiciels d'accessibilité
    <img src="inc/img/html5.png" alt="logo html5" height="120" width="120">
<img src="inc/img/html.png" alt="logo html">

2.7 Les balises pour les figures

<figure>
  <img src="inc/img/html5.png" alt="logo html5">
  <figcaption>Titre de l'image</figcaption>
</figure>

2.8 Format des images (JPEG)

  • Joint Photographic Experts Group / JPEG (.jpg, .jpeg) :
    • Format idéal pour les photos et les illustrations compliquées.
    • Contient des millions de couleurs.
    • La Compression de l’image se fait avec une perte de qualité qui va de 0% à 99%.

2.9 Format des images (GIF)

  • Graphics Interchange Format / GIF (.gif) :
    • Très pratique pour les dessins et images avec peu de nuances.
    • Peut contenir 256 couleurs ou moins.
    • Gère la transparence et les animations.

2.10 Format des images (PNG)

  • Portable Network Graphics / PNG (.png) :
    • Format libre de droits.
    • Images entrelacées (affichage progressif).
    • Convient pour tout type d’image, la transparence mais pas les animations.
    • Il existe en 8 bits (type GIF, 256 couleurs) et en 24 bits.

2.11 Format des images (SVG)

  • Scalable Vector Graphics / SVG (.svg) :
    • Format pour les images vectorielles (pas de pixelisation).
    • Convient pour les images correspondant à des schémas, logos, etc.
    • Description textuelle des images
    • Peut s'utiliser nativement dans html avec la balise <svg>

2.13 Les balises pour les listes

  • Les listes ordonnées/non-ordonnées 

    <ol><!-- ordererd list -->
  <li>élément 1</li><!-- list item -->
  <li>élément 2</li>
</ol>
<ul><!-- unordererd list -->
  <li>élément 1</li>
  <li>élément 2</li>
</ul>

  • Les listes de définitions 

    <dl><!-- definition list -->
  <dt>terme 1</dt><!-- definition term -->
  <dd>définition 1</dd><!-- definition description -->
  <dt>terme 2</dt>
  <dd>définition 2</dd>
</dl>

2.14 Les listes imbriquées

<ul>
  <li>élément 1</li>
  <li>élément 2
    <ul>
      <li>élément 2.1
        <ul>
          <li>élément 2.1.1</li>
        </ul>
      </li>
      <li>élément 2.2</li>
    </ul>
  </li>
  <li>élément 3
    <ol>
      <li>élément 3.1</li>
      <li>élément 3.2</li>
    </ol>
  </li>
</ul>

2.15 Les balises pour les tableaux

  • HTML offre 4 balises pour créer des tableaux
    • <table></table> début et fin de tableau
    • <tr></tr> Ligne du tableau
    • <th></th> Cellule du tableau (entête)
    • <td></td> Cellule du tableau (contenu)
  • Balises sémantiques
    • <caption></caption> légende du tableau
    • <thead></thead>, <tbody></tbody>, <tfoot></tfoot> structure du tableau

2.16 Exemple d'un tableau

<table>
  <caption>Les chiffres</caption>
  <tr>
    <th>A</th><th>B</th><th>C</th><th>D</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
  </tr>
  <tr>
    <td>5</td><td>6</td><td>7</td><td>8</td>
  </tr>
</table>

2.17 Les attributs pour les tableaux

  • Il est possible de fusionner des cellules <td>, <th>
    • Fusionner des colonnes : attribut colspan
    • Fusionner des lignes : attribut rowspan
  • Les valeurs associées aux attributs correspondent au nombre de cellules à fusionner

2.18 Exemple d'un tableau avancé

<table>
  <caption>Les chiffres</caption>
  <tr>
    <th>A</th><th>B</th><th>C</th><th>D</th>
  </tr>
  <tr>
    <td rowspan="2">1</td><td colspan="3">2</td>
  </tr>
  <tr>
    <td>3</td><td>4</td><td>5</td>
  </tr>
</table>
<!--
<style>table, td, th { border: 1px solid black; }</style>
-->

2.19 Les balises neutres et attributs globaux

  • Balises neutres
    • <span></span> : balise de type inline (pas de retour à la ligne)
    • <div></div> : balise de type block (retour à la ligne)
  • Attributs globaux (toutes les balises)
    • id : identifiant unique dans la page associé à une balise
    • class : classe qui peut-être associée à plusieurs éléments dans la page
    • title : information affichée au survol de la souris

2.20 Exemple d'utilisation de balises neutres

texte
<div id="id" class="class">
  texte
  <span class="class" title="title">
    texte
  </span>
  texte
</div>
texte

3 CSS

css3.png

3.1 Le langage CSS

  • CSS : Cascading Style Sheets
  • Langage qui définit comment les balises HTML doivent être affichées par le navigateur
  • HTML pour le fond, CSS pour la forme

3.1.1 Historique

  • 1996 : CSS 1 (base)
  • 1998 : CSS 2 (position, z-index, type de media)
  • 2004-2011 : CSS 2.1 (correction de CSS 2)
  • 2011-2014 : CSS 3 (modules indépendants)

3.1.2 La syntaxe

/* commentaire */
selecteur { propriete: valeur; }
selecteur1, selecteur2 {
  propriete1: valeur1;
  propriete2: valeur2;
}

3.1.3 Les sélecteurs de bases

le sélecteur universel       *      tous les éléments de la page
les balises      nom    toutes les balises « nom » de la page
les identifiants     #id      l'élément d'identifiant « id »
les classes   .class    tous les éléments avec la classe « class »
la combinaison simple   nom.class    toutes les balises « nom » avec la classe « class »

3.2 Comment appliquer du CSS à une page HTML

3.2.1 Mise en place du CSS (Méthodes à éviter)

  • Directement dans le HTML
    • balise <style> dans <head>
  • Directement dans les balises
    • attribut style
<head>
  <style>p {color: red;}</style>
</head>
<body>
  <p>paragraphe</p>
  <p style="color: blue;">paragraphe</p>
</body>

3.2.2 Mise en place du CSS (Méthode conseillée)

  • En utilisant un fichier externe .css
    • balise <link> dans <head>
<head>
  <link rel="stylesheet" type="text/css" href="inc/css/link.css">
  <link rel="stylesheet" href="inc/css/link.css">
</head>
<body>
  <p>paragraphe</p>
  <p>paragraphe</p>
</body>

3.2.3 Exemple

<head>
  <style>
    /* * { color: red; } */
    p { background-color: green; }
    #unique { text-align: center; }
    .multiple { color: white; }
  </style>
</head>
<body>
  <h1>titre</h1>
  <p class="multiple">paragraphe</p>
  <p id="unique" class="multiple">paragraphe</p>
</body>

3.3 La couleur

  • Propriétés basiques:
    • color : couleur du texte
    • background-color : couleur du fond

3.3.1 La gestion de la couleur en CSS

  • En CSS2 17 couleurs supportés officiellement
    • noir et blanc : black, gray, silver, white
    • couleurs primaires : red, lime, blue
    • couleurs secondaries : yellow, aqua, fuchsia
    • autres couleurs : maroon, orange, olive, purple, green, navy, teal
  • Il en existe beaucoup, beaucoup d'autres inspirées du SVG
    • Pas forcément supportées par tous les navigateurs…

3.3.2 Les couleurs simples

  • Possibilité de définir des couleurs en hexadécimal #RVB;
    • #000 : noir : black
    • #f00 : rouge : red
    • #0f0 : vert : lime (pas green)
    • #00f : bleu : blue
    • #fff : blanc : white
  • 16 valeurs possibles pour chaque couleur : 0-9a-f
  • 4096 couleurs différentes

3.3.3 Les couleurs complètes

  • Possibilité de définir des couleurs en hexadécimal #RRVVBB;
    • #000000 : noir
    • #ff0000 : rouge
    • #00ff00 : vert
    • #0000ff : bleu
    • #ffffff : blanc
  • 256 valeurs possibles pour chaque couleur : 00-ff
  • 16 millions de couleurs

3.3.4 Exemple couleurs

<head>
  <style>
    .vert-green { color: green; }
    .vert-lime { color: #0f0; }
    .vert-clair { color: #aaffaa; }
  </style>
</head>
<body>
  <p class="vert-green">vert</p>
  <p class="vert-lime">vert</p>
  <p class="vert-clair">vert</p>
</body>

3.3.5 Les fonctions rgb, hsl

  • Il est possible d'éclaircir la couleur grâce à la propriété opacity
    • les valeurs sont comprises entre 0.0 et 1.0
  • Il est possible d'utiliser des fonctions rgb, hsl
    • rgb(red, green, blue) : 0-255 pour chaque couleur
    • hsl(hue, saturation, lightness) : hue de 0-360 (0, 360 : rouge, 120 : vert, 240 : bleu), saturation et lightness pourcentage de 0% à 100%
    • Possibilité d'ajouter la transparence avec rgba et hsla, le dernier paramètre alpha est compris entre 0.0 et 1.0

3.3.6 Exemple fonctions couleurs

<head>
  <style>
    .vert-rgb { color: rgb(0, 255, 0); }
    .vert-hsl { color: hsl(120, 100%, 50%); }
    .vert-rgb-clair { color: rgba(0, 255, 0, 0.24); }
    .vert-hsl-clair { color: hsla(120, 100%, 50%, 0.24); }
    .vert-opacity { color: #0f0; opacity: 0.24; }
  </style>
</head>
<body>
  <p class="vert-rgb">rgb</p>
  <p class="vert-hsl">hsl</p>
  <p class="vert-rgb-clair">rgba</p>
  <p class="vert-hsl-clair">hsla</p>
  <p class="vert-opacity">opacity</p>
</body>

3.4 Les propriétés CSS

3.4.1 Le fond

<head>
  <style>
    .background-detail {
      background-color: lime;
      background-image: url("inc/img/css3.png");
      background-repeat: repeat; /* no-repeat, repeat-x, repeat-y */
      background-attachment: scroll; /* fixed, local */
      background-position: center center; /* left, right / top bottom */
    }
    .background-shorthand {
      background: lime url("inc/img/css3.png") repeat scroll center center;
    }
  </style>
</head>
<body>
  <p class="background-detail">les<br> propriétés<br> background<br> en<br> détails</p>
  <p class="background-shorthand">Une<br> seule<br> propriété<br> background</p>
</body>

3.4.2 L'affichage en boîte

box-model.png

https://en.wikipedia.org/wiki/CSS_box_model

3.4.3 La propriété margin

<head>
  <style>
    .margin-detail {
      margin-top: 6px; /* auto, % */
      margin-right: 24px;
      margin-bottom: 42px;
      margin-left: 84px;
    }
    .margin-shorthand {
      margin: 6px 24px 42px 84px;
      /* 3 valeurs : margin: (top) (right/left) (bottom); */
      /* 2 valeurs : margin: (top/bottom) (right/left); */
      /* 1 valeur : margin: (top/right/bottom/left); */
    }
  </style>
</head>
<body>
  <p class="margin-detail">les<br> propriétés<br> margin<br> en<br> détails</p>
  <p class="margin-shorthand">Une<br> seule<br> propriété<br> margin<br> pour tout</p>
</body>

3.4.4 La propriété padding

<head>
  <style>
    .padding-detail {
      padding-top: 6px; /* auto, % */
      padding-right: 24px;
      padding-bottom: 42px;
      padding-left: 84px;
    }
    .padding-shorthand {
      padding: 6px 24px 42px 84px;
      /* 3 valeurs : padding: (top) (right/left) (bottom); */
      /* 2 valeurs : padding: (top/bottom) (right/left); */
      /* 1 valeur : padding: (top/right/bottom/left); */
    }
  </style>
</head>
<body>
  <p class="padding-detail">les<br> propriétés<br> padding<br> en<br> détails</p>
  <p class="padding-shorthand">Une<br> seule<br> propriété<br> padding<br> pour tout</p>
</body>

3.4.5 La propriété border-style

<head>
  <style>
    .border-style-detail {
      border-top-style: solid;
      border-right-style: dotted;
      border-bottom-style: double;
      border-left-style: dashed;
    }
    .border-style-shorthand {
      border-style: solid dotted double dashed;
      /* 3, 2 et 1 valeurs cf margin */
    }
  </style>
</head>
<body>
  <p class="border-style-detail">les<br> propriétés<br> border-style en<br> détails</p>
  <p class="border-style-shorthand">Une<br> seule<br> propriété<br> border-style</p>
</body>

3.4.6 La propriété border-width

<head>
  <style>
    .border-width-detail {
      border-style: solid;
      border-top-width: 1px;
      border-right-width: 2px;
      border-bottom-width: 3px;
      border-left-width: 4px;
    }
    .border-width-shorthand {
      border-style: solid;
      border-width: 1px 2px 3px 4px;
      /* 3, 2 et 1 valeurs cf margin */
    }
  </style>
</head>
<body>
  <p class="border-width-detail">les<br> propriétés<br> border-width<br> en détails</p>
  <p class="border-width-shorthand">Une<br> seule<br> propriété<br> border-width</p>
</body>

3.4.7 La propriété border-color

<head>
  <style>
    .border-color-detail {
      border-style: solid; border-width: 3px;
      border-top-color: black;
      border-right-color: red;
      border-bottom-color: blue;
      border-left-color: green;
    }
    .border-color-shorthand {
      border-style: solid; border-width: 3px;
      border-color: black red blue green;
      /* 3, 2 et 1 valeurs cf margin */
    }
  </style>
</head>
<body>
  <p class="border-color-detail">les<br> propriétés<br> border-color<br> en< détails</p>
  <p class="border-color-shorthand">Une<br> seule<br> propriété<br> border-color</p>
</body>

3.4.8 La propriété border

<head>
  <style>
    .border-detail {
      border-width: 1px;
      border-style: solid;
      border-color: black;
    }
    .border-shorthand {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <p class="border-detail">les<br> propriétés<br> border<br> en<br> détails</p>
  <p class="border-shorthand">Une<br> seule<br> propriété<br> border<br> pour tout</p>
</body>

3.4.9 Les dimensions en CSS

<head>
  <style>
    .dimension {
      width: auto; /* px, % */
      height: auto; /* px, % */
      min-width: auto; /* px, % */
      max-width: none; /* px, % */
      min-height: auto; /* px, % */
      max-height: none; /* px, % */
      overflow: visible; /* hidden, scroll, auto */
    }
  </style>
</head>
<body>
  <p class="dimension">les<br> propriétés<br> des<br> dimensions</p>
</body>

3.4.10 La propriété display

  • display: block;
    • Éléments de la page qui commence sur une nouvelle ligne et qui prend toute la largeur disponible (<div>, <h1> - <h6>, <p>, <header>, <footer>, <section>, etc.)
  • display: inline;
    • Éléments de la page qui ne commence pas sur une nouvelle ligne et qui prend juste la largeur nécessaire (<span>, <a>, <img>, etc.)
    • La dimension d'un élément inline ne peut pas être modifié
  • display: inline-block; élément qui s'affiche comme un élément inline mais sur lequel ont peut modifier les dimensions
  • display: none; masque l'élément sur la page

3.4.11 La propriété position

<head>
  <style>
    .position {
      position: static; /* relative, fixed, absolute */
      top: auto; /* px, % */
      left: auto;
      bottom: auto;
      right: auto;
    }
  </style>
</head>
<body>
  <p class="position">les<br> propriétés<br> des<br> positions</p>
</body>

3.4.12 La propriété float

<head>
  <style>
    .left {
      float: left;
    }
    .right {
      float: right;
      /* clear: both; /* left, right */
    }
  </style>
</head>
<body>
  <p class="left">float left</p>
  <p class="right">float right</p>
</body>

3.4.13 Les propriétés du texte

<head>
  <style>
    .text {
      text-align: center; /* left, right, justify */
      text-decoration: underline; /* overline, line-through */
      text-transform: uppercase; /* lowercase, capitalize */
      text-indent: 24px;
      letter-spacing: 5px;
      word-spacing: 10px;
      line-height: 140%;
    }
  </style>
</head>
<body>
  <p class="text">les<br> propriétés du<br> texte</p>
</body>

3.4.14 Les propriétés de polices

<head>
  <style>
    .font-detail {
      font-style: normal; /* italic, oblique */
      font-variant: normal; /* small-caps */
      font-weight: normal; /* bold, bolder, lighter */
      font-size: medium; /* small, large, px, % */
      font-family: "Times New Roman", Georgia, serif;
      /* serif, sans-serif, cursive, fantasy, monospace */
    }
    .font-shorthand {
      font: normal normal normal medium "Times New Roman", Georgia, serif;
      /* font: medium "Times New Roman", Georgia, serif; */
    }
  </style>
</head>
<body>
  <p class="font-detail">les<br> propriétés<br> d'une<br> police<br> en détails</p>
  <p class="font-shorthand">Une<br> seule<br> propriété<br> font<br> pour tout</p>
</body>

3.4.15 Les propriétés de tableaux

<head>
  <style>
    table, td { border: 1px solid black; }
    .table {
      border-collapse: separate; /* collapse */
      border-spacing: 2px; /* px */
      /* 2 valeurs : horizontal, vertical spacing */
      /* 1 valeur : horizontal/vertical spacing */
    }
  </style>
</head>
<body>
  <table class="table">
    <tr><td>cellule</td><td>cellule</td></tr>
    <tr><td>cellule</td><td>cellule</td></tr>
  </table>
</body>

3.4.16 Les propriétés des listes

<head>
  <style>
    .list-style-detail {
      list-style-type: circle; /* square, upper-roman, lower-alpha */
      list-style-position: inside; /* outside */
      list-style-image: url('inc/img/css3.png');
    }
    .list-style-shorthand {
      list-style: circle inside url('inc/img/css3.png');
    }
  </style>
</head>
<body>
  <ul class="list-style-detail">
    <li>élément 1</li><li>élément 2</li><li>élément 3</li>
  </ul>
  <ul class="list-style-shorthand">
    <li>élément 1</li><li>élément 2</li><li>élément 3</li>
  </ul>
</body>

3.4.17 D'autre propriétés CSS

  • vertical-align: top; /* middle, bottom, etc. */
  • box-sizing: content-box; /* border-box */
  • z-index: auto;
  • animation
  • transition
  • counter-reset
  • pointer
  • etc.

3.5 HTML/CSS

3.5.1 La combinaison de sélecteur

  • La descendance : A B
    • div p : toutes les balises <p> qui sont contenues dans une balise <div>
  • La descendance directe : A > B
    • div > p : toutes les balises <p> dont leur parent est une balise <div>
  • Les voisins : A ~ B
    • div ~ p : toutes les balises <p> qui suivent une balise <div>
  • Les voisins directs: A + B
    • div + p : toutes les balises <p> qui sont directement après une balise <div>

3.5.2 Sélecteurs principaux pseudo-classe

  • Spécifiques à la balise <a>
    • :link : liens pas encore visités
    • :visited : liens visités
  • Pas spécifique
    • :hover : la souris survole l'élément (après :link et :visited)
    • :active : la souris agit sur l'élément (après :hover )

3.5.3 Autres sélecteurs pseudo-classe

  • :first-child : premier enfant d'une balise
  • :last-child : dernier enfant d'une balise
  • :nth-child(n) : n-ième enfant d'une balise
    • :nth-child(2) : deuxième enfant d'une balise
    • :nth-child(2n) : enfants pairs d'une balise
    • :nth-child(2n+1) : enfants impairs d'une balise

3.5.4 Sélecteur pseudo-éléments

  • ::first-line : applique le style sur la première ligne du texte
  • ::first-letter : applique le style sur la première lettre du texte
  • ::before : permet d'ajouter du contenu avant la balise avec la propriété content
  • ::after : permet d'ajouter du contenu après la balise avec la propriété content

3.5.5 Sélecteur sur attribut

  • [attribut] : toutes les balises ayant cet attribut
  • [attribute=value] : toutes les balises ayant cet attribut dont la valeur est value
  • [attribute*="value"] : toutes les balises ayant cet attribut dont la valeur contient la valeur value
  • [attribute^="value"] : toutes les balises ayant cet attribut dont la valeur commence par la valeur value
  • [attribute$="value"] : toutes les balises ayant cet attribut dont la valeur finit par la valeur value

4 Les formulaires

  • Interaction avec l'utilisateur
    • Inscription/Connexion
    • Recherche, etc.
  • La balise <form></form>
    • attribut action pour indiquer quelle page va traîter les données
    • attribut method pour dire comment transférer les données (get/post)

4.1 La balise <input>

<form>
  <label>default: <input name="default" placeholder="placeholder"></label><br>
  <label>text: <input name="text" type="text" value="value"></label><br>
  <label>password: <input name="password" type="password"></label><br>
  <label>submit: <input name="submit" type="submit" value="submit"></label><br>
  <label>button: <input name="button" type="button" value="button"></label><br>
  <label>checkbox: <input name="checkbox[]" type="checkbox" value="checkbox1"></label><br>
  <label>checkbox: <input name="checkbox[]" type="checkbox" value="checkbox2"></label><br>
  <label>radio: <input name="radio" type="radio" value="radio1"></label><br>
  <label>radio: <input name="radio" type="radio" value="radio2"></label><br>
</form>

4.2 Les attributes de la balise <input>

  • les attributs de base:
    • name permet d'identifier les données
    • value associe une valeur à une donnée identifiée
    • placeholder texte affiché quand value est vide
  • les attibuts avancés:
    • required : ne peut valider le formulaire si la valeur est vide
    • disabled : désactive et ignore les données associées
    • readonly : empêche la modification de la valeur
    • maxlength : longueur max autorisée pour value
    • pattern : permet de définir le format accepté

4.3 La balise <input> avancé

<form>
  <label for="idpassword">mot de passe: </label><br>
  <label>password:  <input type="password" id="idpassword" name="password"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Doit contenir un chiffre, une minuscule, une majuscule et au moins 8 caractères"></label><br>
  <label>text: <input name="text" type="text" value="value" required="required"></label><br>
  <label>disabled: <input name="disabled" type="text" value="value" disabled="disabled"></label><br>
  <label>readonly: <input name="readonly" type="text" value="value" readonly="readonly"></label><br>
  <label>maxlength: <input name="maxlength" type="text" value="value" maxlength="8"></label><br>
  <button type="submit">valider</button>
</form>

4.4 La balise <input> version html5

  • color
  • date
  • datetime
  • email
  • number
  • tel
  • url
  • etc.

4.5 La balise <select></select>

<form>
  <select name="select">
    <optgroup label="Group 1">
      <option value="value1">Valeur 1</option>
      <option value="value2">Valeur 2</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="value3">Valeur 3</option>
      <option value="value4">Valeur 4</option>
    </optgroup>
  </select>
  <select name="selectm" multiple="multiple">
    <optgroup label="Group 1">
      <option value="value1">Valeur 1</option>
      <option value="value2">Valeur 2</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="value3">Valeur 3</option>
      <option value="value4">Valeur 4</option>
    </optgroup>
  </select>
</form>

4.6 Les balises <textarea></textarea> et <button></button>

<form>
  <textarea name="textarea" rows="2" cols="20">value</textarea>
  <button type="button">button</button>
  <button type="reset">reset</button>
  <button type="submit">submit</button>
</form>

4.7 La balise <fieldset></fieldset>

<form>
  <fieldset>
    <legend>Legend :</legend>
    <label>Label : <input type="text"><br>
  </fieldset>
</form>