Mémo HTML CSS

Un document HTML5 minimal:

section <section> générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web

section <article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension

section <nav> Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)

section <aside> Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.

section <header> (en-tête de page).

section <footer> (pied de page).

les codes spéciaux

Codes spéciaux Résultat dans le navigateur
&nbsp;  [Espace]
&quot; "
&rsquo; ’
&lt; <
&gt; >
&laquo; «
&raquo; »
&amp; &
&euro; €

les liens et ancres:

Utilisez l’élément HTML target="_blank" pour ouvrir un lien dans un nouvel onglet.

les images

peace and loveflotte a gauche du texte.

peace why
peace and love

Utilisez l’élément HTML <img> pour définir une image.

Utilisez l’attribut HTML src pour définir l’URL de l’image.

Utilisez l’attribut HTML alt pour définir un texte alternatif pour une image, si elle ne peut pas être affichée .

Utilisez la largeur et la hauteur des propriétés CSS pour définir la taille de l’image .

Utilisez la propriété CSS float pour laisser l’image float.

Utilisez le code HTML <map> pour définir une image-carte.

Utilisez le code HTML <zone> pour définir les zones cliquables dans l’image-carte.

Utilisez l’élément HTML <img> usemap pointe vers une image-carte.

En gros , pour une image :

  • Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image dans un paragraphe.
  • Si elle apporte une information : placez l'image dans une figure (Une figure peut très bien comporter plusieurs images.), la balise figcaption sert d'info ou titre.

Les listes

  • chien
  • chat
  • serpent
  1. chien
  2. chat
  3. serpent
  1. chien
  2. chat
  3. serpent
  1. chien
  2. chat
  3. serpent
  • chien
  • chat
    • mâle
    • femelle
  • serpent

les tableaux

Les tables sont définies avec la balise <table>.

Les tableaux sont divisés en lignes avec la balise <tr>.

les cellule de la ligne d’en-tête se crée avec la balise <th>.

Les lignes de tableau sont divisées en cellules avec la balise <td>.

Le titre du tableau se crée avec la balise <caption>.

exemple avec le cichier css:

Skieur du groupe
Nom Âge Niveau
Yohan 8 ans moyen
Clara 5 ans débutante

Pour les gros tableaux, il est possible de les diviser en trois parties :

  • En-tête : <thead></thead>.
  • Corps du tableau : <tfoot></tfoot>.
  • Pied de tableau: <tbody></tbody>.

exemple avec le cichier css:

Skieur du groupe
Nom Âge Niveau
Yohan 8 ans moyen
Clara 5 ans débutante
pierre 7 ans débutant
josé 8 ans débutante
bob 6 ans fort
céline 5 ans débutante
Nom Âge Niveau

La fusion de colonnes : attribut colb

La fusion de lignes : attribut rowb

exemple :

Skieur du groupe
Nom Âge Niveau
Yohan 8 ans moyen
Clara 5 ans débutante
pierre 7 ans débutant
josé 8 ans moyen
bob 6 ans
céline 5 ans débutante
Nom Âge Niveau

Les formulaire

method="get" : c'est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de la page (http://…).

method="post" : c'est la méthode la plus utilisée pour les formulaires car elle permet d'envoyer un grand nombre d'informations. Les données saisies dans le formulaire ne transitent pas par la barre d'adresse.

action="test.php" : c'est l'adresse de la page ou du programme qui va traiter les informations.

Quelques attributs

  • On peut agrandir le champ avec size.
  • On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
  • On peut pré-remplir le champ avec une valeur par défaut à l'aide de value.
  • On peut donner une indication sur le contenu du champ avec placeholder.Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.

Zone de mot de passe :


On à différent type que text dans type="text":

Si vous êtes sur smartphone le clavier s'adaptera en fonction du type , et vous proposera des chiffres ou les .com, @, etc...

  • email:
  • url:
  • tel:
  • number:
  • search:
  • range:
  • Etc ....

Zone de texte multiligne:


Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser <textarea> </textarea>.

Les cases à cocher:

Cochez les animaux que vous aimez:



vous pouvez cocher par défaut avec l'attribut checked :

<input type="checkbox" name="choix" checked ></code>

Les zones d'options:

Veuillez indiquer votre animal préféré :



Les listes déroulantes:

Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :


Avec des groupes:


Regrouper les champs:

Vos coordonnées

Sélectionner automatiquement un champ: attribut: autofocus

Rendre un champ obligatoire, attribut: required

Le bouton d'envoi:

type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire.

type="reset" : remise à zéro du formulaire.

type="image" : équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.

type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.

exemple:

Identifiez-vous

Template flexbox page type

le fichier pagetype.html

le fichier style.css

Ce qui donne :

pagetype.png

overflow: auto; ou overflow: scroll; sur la div <main> par exemple permet le scrolling sur la div.

@media all and (max-width: 600px) sert a définir un style différent si l'écran a une largeur max de 600px , pour les tablettes et smartphones par exemple :

pagetype2.png

Background

le fond jaune avec l'image "peace and love" de la div ci dessous par exemple :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background : linear-gradient et radial-gradient.

La propriété opacity, très simple, permet d'indiquer le niveau d'opacité .

  • Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
  • Avec une valeur de 0, l'élément sera totalement transparent.

Style du texte

La taille

Pour modifier la taille du texte, on utilise la propriété CSS font-size, on peut soit:

  • Indiquer une taille absolue : en pixels, en centimètres ou millimètres.
  • Indiquer une taille relative : en pourcentage, « em » ou « ex » .

la taille relative a l'avantage d'être plus souple, elle s'adapte plus facilement aux préférences de taille des visiteurs.

Si vous écrivez 1em, le texte a une taille normale, 1.3em il sera plus gros et 0.7em plus petit.

La police :

La propriété CSS qui permet d'indiquer la police à utiliser est font-family.

On précise en général plusieurs noms de police, séparés par des virgules ,au cas ou le visiteur n'a pas la police choisi par défaut :

balise   {
      font-family: police1, police2, police3, police4;
   }

Les principales polices:

  • arial
  • arial black
  • comic sans ms
  • courier new
  • georgia
  • impact
  • times new roman
  • trebuchet ms
  • verdana

Italique, gras, souligné

  • Pour mettre en italique, on utilise font-style:

    balise   {
          font-style: italic, oblique ou bien normal ;
       }

  • Pour mettre en gras on utilise font-weight:

    balise   {
          font-weight: bold ou bien normal ;
       }

  • Pour souligner , on utilise text-decoration:

    balise   {
          text-decoration: underline, line-through, overline, blink ou bien normal ;
       }

L'alignement

C'est tout simple, on utilise la propriété text-align et on indique l'alignement désiré :

  • left : le texte sera aligné à gauche (c'est le réglage par défaut).
  • center : le texte sera centré.
  • right : le texte sera aligné à droite.
  • justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes.

Les flottants

Image flottante Ceci est un texte normal de paragraphe, écrit à la suite de l'image et qui l'habillera car l'image est flottante, voici le CSS :


imgflot   {
   float: left;
   margin-right: 1em;
   margin-top: 1em;
}

on decolle l'image du text avec margin-right:

Image flottantece texte est à coté de l'image.

Je dis à ce texte stop le float pour moi avec :
stopflot   {
   clear: both;
}

peux importe qu'elle flotte à droite ou à gauche le texte reprend en dessous de l'image.

Les bordures et les ombres

Les bordures standard

  • border-width, la largeur.
  • border-color, la couleur.
  • border-style, le type de bordure :
    • none : pas de bordure (par défaut) ;
    • solid : un trait simple ;
    • dotted : pointillés ;
    • dashed : tirets ;
    • double : bordure double ;
    • groove : en relief ;
    • ridge : autre effet relief ;
    • inset : effet 3D global enfoncé ;
    • outset : effet 3D global surélevé.

#exbor   {
    border: 2px green dotted;
}

voici le résultat :

une bordure verte en pointillé de 2px

En haut, à droite, à gauche, en bas:

  • border-top : bordure du haut ;
  • border-bottom : bordure du bas ;
  • border-left : bordure de gauche ;
  • border-right : bordure de droite.

#exbor2   {
    border: 2px green dotted;
   border-right: 2px red outset;
   border-top: 2px blue groove;
   border-bottom: 2px black dashed;
}

voici le résultat :

une bordure custom de 2px

Les bordures arrondies

La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément.

#borar {
   width:150px;
   height:100px;
   background-color: #60F560;
   border:solid black 2px;
   border-radius: 5px;
}

#borar2 {
   width:150px;
   height:100px;
   background-color: #F5F360;
   border:solid black 2px;
   border-radius: 10px 20px 30px 40px;
}

#borar3 {
   width:150px;
   height:100px;
   background-color: #F59760;
   border:solid black 2px;
   border-radius: 10px / 30px;
}

Les ombres

box-shadow : les ombres des boîtes

La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :

  1. le décalage horizontal de l'ombre ;
  2. le décalage vertical de l'ombre ;
  3. l'adoucissement du dégradé ;
  4. la couleur de l'ombre.
  5. on peut rajouter inset
    pour une ombre à l'intérieur.

.ombre {
   border: solid black 1px;
   background-color: #81F7D8;
   box-shadow: 6px 6px 2px gray inset;
}

Les apparences dynamiques

on peut changer l'apparence d'un élément:

  • au survol ;
  • lors du clic ;
  • lors du focus (élément sélectionné);
  • lorsqu'un lien a été consulté.

ceci est un test des différents effets sur un lien.

Les transissions et animations:

On peut créer une animation pour les liens :

test décoration lien animé

Passez la souris au dessus des rectangles pour voir le code correspondant:

La méga propriété de transition:

p {
   transition: property duration timing-function delay;
}

Il est possible de spécifier des valeurs différentes pour chaque propriété, il suffit de les ajouter à la suite, chacune séparée par une virgule. Pour notre exemple, voici ce que ça donne :

#transex2 {
   transition: background-color 3s ease 1500ms, width 1s ease-in 0s, height 2s ease-out 0.2s;
}

Une animation CSS correspond à plusieurs transitions qui s’enchaînent.

Création d’une animation de changement de taille :

@keyframes nomAnim {
   0% { width: 50px;}
   50% { width: 200px;}
   100% { width: 100px;}
}
ou alors :
@keyframes nomAnim {
   from, to { width: 100px;}
   25%, 75% { width: 200px;}
   50% { width: 50px;}
}

Cette animation peut ensuite être appliquée par le biais de huit propriétés :

  • animation-name : le nom de l’animation à utiliser ;
  • animation-duration : la durée complète de l’animation ;
  • animation-delay : le délai avant que l’animation ne se lance ;
  • animation-timing-function : la méthode d’interpolation (départ rapide, lent…) entre chaque étape (voir plus bas) ;
  • animation-iteration-count : le nombre de fois où l’animation est répétée. Le mot-clé infinite permet d’effectuer l’animation en boucle ;
  • animation-direction : permet de jouer l’animation en sens inverse (voir plus bas);
  • animation-fill-mode : état des éléments avant et après l’exécution de l’animation (voir plus bas) ;
  • animation-play-state : permet de mettre l’animation en pause ;

Ou la super propriété : animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Par défaut, la durée est de 0 seconde, le nombre de répétitions est 1 et la méthode d’interpolation est ease

Modifier la méthode d’interpolation animation-timing-function :

  • linear : méthode linéaire ;
  • ease : le départ est rapide, l’accélération lente. L’accélération semble naturelle ;
  • ease-in : le départ est lent. L’arrivée semble donc plus rapide ;
  • ease-out : l’arrivée est lente. Le départ semble donc plus rapide ;
  • ease-in-out : le départ et l’arrivée sont lents ;
  • cubic-bezier(p2x,p2y,p3x,p3y) : courbe d’accélération personnalisée (p1 : 0 en x et y et p4 : 1 en x et y);
  • steps(nb, sart|end) : animation par palier (image par image). Les transitions/animations ne sont plus fluides.

La propriété animation-direction accepte 4 valeurs :

  • normal : l’animation est jouée normalement, de l’étape 0 % (from) à l’étape 100 % (to) ;
  • reverse : l’animation est jouée en sens inverse, de l’étape 100 % à l’étape 0 % ;
  • alternate : l’animation est jouée normalement les cycles impairs (1,3…) et en sens inverse les cycles pairs (2,4,…) ;
  • alternate-reverse : l’animation est jouée en sens inverse les cycles impairs (1,3…) et normalement les cycles pairs (2,4..).

Gérer l’état des éléments animés avant et après l’animation avec animation-fill-mode:

  • backwards : les éléments sont tels que définis à l’étape 0 % de l’animation avant le début de celle-ci ;
  • forwards : les éléments sont tels que définis à l’étape 100 % de l’animation après la fin de celle-ci ;
  • both : combinaison de backwards et forwards ;
  • none : par défaut.

Exemples:

transform :

  • none aucune transformation
  • matrix(n,n,n,n,n,n) définit une transformation 2D, en utilisant une matrice de six valeurs
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) définit une transformation en 3D, en utilisant une matrice 4x4 de 16 valeurs
  • translate(x,y) définit une translation 2D
  • translate3d(x,y,z) définit une translation 3D
  • translateX(x) définit une translation, en utilisant uniquement la valeur de l'abscisse
  • translateY(y) définit une translation, en utilisant uniquement la valeur de l'axe des Y.
  • translateZ(z) définit une translation en 3D, en utilisant seulement la valeur de l'axe Z
  • scale(x,y) définit une transformation d'échelle 2D
  • Scale3D(x,y,z) définit une transformation d'échelle 3D
  • scaleX(x) définit une transformation d'échelle en donnant une valeur pour l'axe X
  • scaleY(y) définit une transformation d'échelle en donnant une valeur pour l'axe Y.
  • scaleZ(z) définit une transformation d'échelle 3D en donnant une valeur pour l'axe Z
  • rotation(angle) définit une rotation 2D, l'angle est spécifié dans le paramètre
  • rotate3D(x,y,z,angle) définit une rotation 3D
  • rotateX(angle) définit une rotation 3D le long de l'axe X.
  • rotateY(angle) définit une rotation 3D le long de l'axe Y
  • rotateZ(angle) définit une rotation 3D le long de l'axe Z
  • skew(x-angle, y-angle) définit une transformation par inclinaison 2D le long de la X- et l'axe des Y
  • skewX(angle) définit une transformation par inclinaison 2D le long de l'axe X
  • skewY(angle) définit une transformation par inclinaison 2D le long de l'axe Y
  • perspective(n) définit une vue en perspective d'un élément 3D transformé
  • initial définit cette propriété à sa valeur par défaut.
  • inherit Inherits cette propriété de son élément parent.

Le chat, une animation a partir d'une planche:

y a un bug