Étiquette : CSS

Memento CSS

CSS Cascade Style Sheet (feuille de style en cascade)

  1. Propriétés de mise en forme du texte

    Qu’est-ce que la mise en forme de texte ? C’est tout ce qui touche à la présentation du texte proprement dit : le gras, l’italique, le souligné, la police, l’alignement, etc.

    Propriété Valeurs (exemples) Description
    font-family police1, police2, police3, serif, sans-serif, monospace Nom de police
    @font-face Nom et source de la police Police personnalisée
    font-size 1.3em, 16px, 120%… Taille du texte
    font-weight bold, normal Gras
    font-style italic, oblique, normal Italique
    text-decoration underline, overline, line-through, blink, none Soulignement, ligne au-dessus, barré ou clignotant
    font-variant small-caps, normal Petites capitales
    text-transform capitalize, lowercase, uppercase Capitales
    font – Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family.
    text-align left, center, right, justify Alignement horizontal
    vertical-align baseline, middle, sub, super, top, bottom Alignement vertical (cellules de tableau ou éléments inline-block uniquement)
    line-height 18px, 120%, normal… Hauteur de ligne
    text-indent 25px Alinéa
    white-space pre, nowrap, normal Césure
    word-wrap break-word, normal Césure forcée
    text-shadow 5px 5px 2px blue (horizontale, verticale, fondu, couleur) Ombre de texte

  2. Propriétés de couleur et de fond

    Propriété Valeurs (exemples) Description
    color nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20… Couleur du texte
    background-color Identique à color Couleur de fond
    background-image url(‘image.png’) Image de fond
    background-attachment fixed, scroll Fond fixe
    background-repeat repeat-x, repeat-y, no-repeat, repeat Répétition du fond
    background-position (x y), top, center, bottom, left, right Position du fond
    background – Super propriété du fond. Combine : background-image, background-repeat, background-attachment, background-position
    opacity 0.5 Transparence

  3. Propriétés des boîtes

    Propriété Valeurs (exemples) Description
    width 150px, 80%… Largeur
    height 150px, 80%… Hauteur
    min-width 150px, 80%… Largeur minimale
    max-width 150px, 80%… Largeur maximale
    min-height 150px, 80%… Hauteur minimale
    max-height 150px, 80%… Hauteur maximale
    margin-top 23px Marge en haut
    margin-left 23px Marge à gauche
    margin-right 23px Marge à droite
    margin-bottom 23px Marge en bas
    margin 23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de marge. Combine : margin-top, margin-right, margin-bottom, margin-left.
    padding-left 23px Marge intérieure à gauche
    padding-right 23px Marge intérieure à droite
    padding-bottom 23px Marge intérieure en bas
    padding-top 23px Marge intérieure en haut
    padding 23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de marge intérieure. Combine : padding-top, padding-right, padding-bottom, padding-left.
    border-width 3px Épaisseur de bordure
    border-color nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20… Couleur de bordure
    border-style solid, dotted, dashed, double, groove, ridge, inset, outset Type de bordure
    border 3px solid black Super-propriété de bordure. Combine border-width, border-color, border-style. Existe aussi en version border-top,
    border-right, border-bottom, border-left.
    border-radius 5px Bordure arrondie
    box-shadow 6px 6px 0px black (horizontale, verticale, fondu, couleur) Ombre de boîte

  4. Propriétés de positionnement et d’affichage

    Propriété Valeurs (exemples) Description
    display block, inline, inline-block, table, table-cell, none… Type d’élément (block, inline, inline-block, none…)
    visibility visible, hidden Visibilité
    clip rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche) Affichage d’une partie de l’élément
    overflow auto, scroll, visible, hidden Comportement en cas de dépassement
    float left, right, none Flottant
    clear left, right, both, none Arrêt d’un flottant
    position relative, absolute, static Positionnement
    top 20px Position par rapport au haut
    bottom 20px Position par rapport au bas
    left 20px Position par rapport à la gauche
    right 20px Position par rapport à la droite
    z-index 10 Ordre d’affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.

  5. Propriétés des listes

    Propriété Valeurs (exemples) Description
    list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Type de liste
    list-style-position inside, outside Position en retrait
    list-style-image url(‘puce.png’) Puce personnalisée
    list-style – Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image.

  6. Propriétés des tableaux

    Propriété Valeurs (exemples) Description
    border-collapse collapse, separate Fusion des bordures
    empty-cells hide, show Affichage des cellules vides
    caption-side bottom, top Position du titre du tableau

  7. Autres propriétés

    Propriété Valeurs (exemple) Description
    cursor crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto… Curseur de souris

 

Framework Bootstrap

Initiation à Bootstrap

(merci au site apprendre-a-coder.com)

Intégration de Bootstrap dans Visual studio

Exercice

En s’aidant de ce qui a été fait précédemment reproduire au plus près la page web suivante à l’aide du framework Bootstrap.

Pour information :

initiation WEB avec Visual Studio

Créer un site web avec Visual Studio

  • Création d’un site web et utilisation du serveur local iisExpress
  • Incorporation d’images
  • Utilisation de l’interface graphique WYSIWYG (what you see is what you get)

Mise en page à l’aide des <div>

  • présentation des div
  • mise en forme automatique Visual Studio
  • affectation d’id aux div, modification d’un style pour une div.
  • utilisation de classe pour assurer un centrage de texte

Positionnement des éléments d’une page.

  • Réalisation d’une petite galerie photo
  • Utilisation des styles float et  margin pour gérer le flottement des éléments.

Structuration d’une page grâce aux balises sectionnantes HTML5

  • Réalisation d’une page dont la structuration est la suivante :

Pour l’utilisation de Framework CSS voir la page Framework Bootstrap

Tutoriel

Créer une page web qui ressemble à ceci :

Le plan de structuration de la page est le suivant :

Aide pour le bouton bleu « See more… »
Ce bouton est créé à l’aide d’une div qui contient un texte inclus dans une balise h2. Cette div se situe dans une section ayant pour id : finArticle

Le code de la section est alors :

[html]
<section id="finArticle">
<p>Etiam rhoncus nunc quis nulla dapibus pellentesque vitae vitae risus. </p>
<div>
<h2> See more…</h2>
</div>
</section>
[/html]

On peut constater que dans la section tous les textes sont centrés , nous pouvons donc déclarer le style suivant :

[css]
#finArticle{
text-align:center;
}
[/css]

Ce style ne s’applique qu’à la balise ayant pour id : finArticle.
Pour appliquer des modifications à une balise div incluse dans finArticle, il faut faire comme ceci :

[css]
#finArticle div {
width: 200px; /*largeur*/
height: 75px; /*hauteur*/
margin: auto; /*centrage de la div dans la page*/
background-color: #0094ff;/*couleur de fond (bleu)*/
border: 1px solid #ccc;/*bordure grise du "bouton"*/
border-radius:8px;/*angles arrondis*/
text-shadow: -1px -1px rgba(0, 0, 0, 0.31);/*effet d’ombrage du texte "See more" */
color: #FFFFFF;/*couleur du premier plan : le texte écrit "See more…"*/
}
[/css]

Technologie Web

Html, css, javascript…

Introduction

Le web est un système client/ serveur qui permet au client d’afficher des pages web sur un terminal. L’envoi de requêtes et leurs décryptages est assuré par un logiciel nommé navigateur. Les terminaux qui peuvent se connecter à internet sont de type et de technologie différente (ordinateur, tablette, téléphone portable, objet connecté…).

Le format web doit pouvoir s’adapter à tous ces types de connexions. Le web s’appuie sur 3 langages :

  • HTML pour véhiculer le contenu (texte, images, son, vidéo…),
  • CSS pour la mise en forme et l’adaptation aux différents terminaux
  • JS pour rendre la page interactive avec l’utilisateur ou le serveur.

Requête http

Le diagramme de séquence d’une requête web est la suivante :

  • Le client appelle la page web grâce à son URI. On parle de requête de type GET.
  • Le serveur renvoie la page demandée au format html.
  • La page contenant des liens hypertextes dans son entête reformule elle-même des requêtes GET afin de rapatrier les autres éléments de la page web : JS et CSS.
  • Une fois l’ensemble des éléments reçus, la page s’affiche avec sa mise en forme et sa capacité à interagir avec l’utilisateur.
  • La page html peut aussi appeler des images, des vidéos, du son…

En fait tous les éléments constituant la page sont rapatriés et c’est le navigateur qui s’occupe de tout mettre en place en fonction du flux html et du fichier CSS

HTML[1]

L’HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom HTML.

Les balises sont invisibles à l’écran du navigateur, mais elles permettent à ce dernier de comprendre ce qu’il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci :

[html]<balise>[/html]

Elles indiquent la nature du texte qu’elles encadrent. Elles veulent dire par exemple : «Ceci est le titre de la page», «Ceci est une image», «Ceci est un paragraphe de texte», etc.

[html]
<titre>Ceci est un titre</titre>
[/html]

On distingue une balise ouvrante <titre> et une balise fermante </titre> qui indique que le titre se termine.

Il existe des balises dites orphelines c’est-à-dire qu’on n’a pas de texte à insérer entre l’ouverture de la balise et sa fermeture. Par exemple <br/> (back return = saut de ligne) ou <image/> qui permet l’insertion d’image…

Les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments. Par exemple <html> contient <head> et <body>. Cet « arbre du document » est utilisé pour repérer les éléments de la page et permettre leur formatage ou l’interaction avec l’utilisateur par le biais de scripts.

liste des balises HTML voir le memento HTML

Tutoriel

On veut réaliser la page suivante :
(pour savoir comment créer un site et des pages avec Visual Studio cliquer ici):

Le code html est le suivant:

[html]

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>
<style>
span.elem {
display: none;
}
</style>
</head>

<body>
<!– Header –>
<header>
<h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1>
<!– nav principale –>
<nav>
<ul>
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
</ul>
</nav>
</header>
<!– Main –>
<section id="main">
<span class="elem">section</span>
<article>
<span class="elem">article</span>
<header>
<span class="elem">header</span>
<h2>En tête de l’article</h2>
<p>Date de publication, auteur</p>
</header>
<p>Contenu de l’article, contenu de l’article, contenu de l’article, contenu de l’article, contenu de l’article,
contenu de l’article, contenu de l’article…</p>
</article>
<article>
<span class="elem">article</span>
<header>
<span class="elem">header</span>
<h2>Harry Gruyaert</h2>
<p>Par François, le
<time datetime="2016-11-05">5 novembre 2016</time>
</p>
</header>
<p>Harry Gruyaert (né le 25 août 1941 à Anvers) est un photographe belge. Il est membre de l’agence Magnum Photos
depuis 1981</p>
<aside>
<span class="elem">aside</span>
<p><b>Magnum Photos</b> est une coopérative photographique. Créée en 1947 par Robert Capa, Henri Cartier-Bresson,
George Rodger, William Vandivert et David Seymour, elle fut la première de ce genre à voir le jour1.</p>
</aside>
<footer>
<span class="elem">footer</span>
<p>Source : <a href="http://fr.wikipedia.org/wiki/Magnum_Photos">Wikipedia</a></p>
</footer>
</article>
</section>
<!– sidebar –>
<aside id="sidebar">
<span class="elem">aside</span>
<h2>Sidebar</h2>
<h3>Navigation</h3>
<nav>
<span class="elem">nav</span>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</nav>
<h3>Autre titre</h3>
<p>Autres informations…</p>
</aside>
<!– footer –>
<footer>
<span class="elem">footer</span>
<p class="mentions">Page de démonstration de l’article <a href="/article/lire/1376-html5-section-article-nav-header-footer-aside.html">Nouveaux éléments de section, article, header, footer, aside, nav</a></p>
</footer>
</body>

</html>
[/html]

L’appel de cette page dans un navigateur montre le contenu mais la mise en page est linéaire est suit le flux, c’est-à-dire l’ordre d’apparition des éléments dans l’ordre d’écriture de la page

En reprenant la page et en faisant apparaitre les éléments de section HTML5, on peut voir que les sections s’imbriquent ou s’empilent les unes sur les autres.

Ajout de style afin de modifier l’aspect de la page

C’est grâce aux feuilles de style  CSS (Cascade Style Sheet) que le positionnement des sections va avoir lieu. Si on ajoute les instructions suivantes dans la balise <style> de l’entête du fichier html :

[css]
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>
<style>
span.elem {
display: none;
}

body {
width: 980px;
margin: 0 auto 0 auto;
}

#main {
float: left;
width: 75%;
margin: 0 0 50px 0;
}

#sidebar {
float: left;
width: 22%;
margin-left: 1%;
margin-top: 1em;
}

footer {
clear: both;
}

nav ul li {
display: inline-block;
}
</style>
</head>
<body>
<!– Header –>
…
[/css]

La page prend l’aspect attendu. En faisant apparaitre les sections, on peut constater que la section “aside” est passée à droite (en rose).

Conclusion : Le code html contient le texte, les balises permettent de structurer la page c’est-à-dire définir les zones de contenu. Les feuilles de styles quant à elles, permettent de dimensionner et positionner les balises sectionnantes. Les feuilles de styles jouent aussi sur les éléments décoratifs de la page (couleurs, polices, encadrement…). Le code html contient le fond (la structure et le texte), le code css contient la forme (mise en page). Cette séparation permet à la page de s’adapter à n’importe quel terminal (écran d’ordinateur, tablette, téléphone…) En ajoutant à CSS quelques scripts, on peut créer une  mise en page « responsive » ou page réactive qui s’auto-adapte à l’écran.

Pour en savoir plus, voir le Memento CSS

  1. https://fr.wikipedia.org/wiki/Hypertext_Markup_Language#Description_de_HTML ↑

Interface de gestion de base de données

jsGrid est une bibliothèque jQuery qui permet de gérer un tableau de données et offre les options de CRUD (Create Read Update Delete) au travers de requêtes AJAX. L’objet de l’article consiste à mettre en œuvre ce composant en liaison avec une collection mongoDB, à travers l’interface de développement Node-Red.

Exemple de grille obtenue avec jsGrid

vidéos

La playlist suivante contient 5 vidéos :

  • Installation en local des fichiers scripts et CSS
  • Mise en œuvre de jsGrid à partir de l’exemple fournit sur le site de jsGrid dans une page structurée avec le framework BootStrap
  • Utilisation de la base de données afin de remplir la grille jsGrid avec les documents d’une collection.
  • Insertion et effacement d’un nouveau document dans la collection
  • Mise à jour d’un  document.