Pages

Affichage des articles dont le libellé est HTML5. Afficher tous les articles
Affichage des articles dont le libellé est HTML5. Afficher tous les articles

Taille des H1

Découvrons pourquoi la taille des H1 dépend du degré d’imbrication. Commençons par trouver les feuilles de styles par défaut
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

Pour Chrome :
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

On peut lire que :

/* children of the <head> element all have display:none */
head {
display: none
}
meta {
display: none
}
title {
display: none
}

De plus on lit que le style de H1 est différent suivant les imbrications :

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67__qem;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold
}
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83__qem; // quirky margins
-webkit-margin-after: 0.83em;
}



En action

Semantic

HTML

HTML

TD HTML

TD : find the trick !

CSS transitions
  • Info: vision d'Affrique
  • Info: Noir d'eau !
  • Info: Chaumont sur Loire
  • Info: The pape palais
  • Info: Pause café !
  • Info: Le top du fruit !
  • Info: Allo la terre !
  • Info: Au menu aujourd'hui !
  • Info: Histoire d'arbre.

Création d'une page HTML

L’objectif de ce TD est d’écrire une page de base. 

Nous allons écrire

  1. le code HTML puis 
  2. le code CSS.
Nous allons apprendre les balises de base et le style de base d'une page HTML.

HTML

HTML

HTML


Apprendre le langage HTML, c’est d’abord apprendre les balises  Notre objectif est d’apprendre par l’exemple les balises de base.
La structure et les données
du document





































































































































++

Editeur

Nous allons utiliser l’éditeur  jsbin.


Structure de base

La structure de base est donné par défaut à la création d’un nouveau bean

Vous écrirez le code à partir de la ligne 8.

Ecriture de code


Après chaque ajout de code, créér une nouvelle version.

Exemple de création d’un entête

Ecrire le code html suivant, puis créer une version.


Création d’un menu de navigation


Création d’un article


Ajouter dans cet article deux sessions.




Ajouter un pied de page


Ajouter un formulaire


Créer une section et ajouter un formulaire







Découvrez les nouveaux types d'input

Input Types
value:
value:
value:
value:
value:
value:
value:
value:
remarque : Autre code pour modifier les valeurs
Vérification par les patterns
    Le pattern .*[\d] vérifie les motifs
  • 2ab : (* = 0 ; d = 2)
  • a2b : (* = 1)
  • ab2 : (* = 2)
  • abc : (erreur)
    Le pattern .*[a-z] vérifie les motifs
  • 2ab : (* = 1)
  • a2b : (* = 0)
  • ab2 : (* = 0)
  • 222 : (erreur)
Nous pourrons écrire pattern="^(?=.*[a-z])(?=.*[\d]).*$" pour vérifier les conditions au moins un caractère et un nombre.
    Autres pattern
  • (?=.{8,}) : au - 8 Entrées
  • (?=.*[A-Z]) : au - 1 Majuscule
  • (?=.*[\W]) : au - 1 Caractère Spécial/li>
Découvrez une liste de patterns : https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation