•  

     

    bonjour marcel

     

    bonjour marcel

    Ah  Marcel ! Il en a des histoires à raconter. Il est intarissable. D’ailleurs, vous voudriez l’arrêter que vous ne pourriez pas. Il a une mémoire éléphantesque et se souvient de tous les détails de sa vie, qu’il se plait à raconter et qu’il me plait d’entendre

    Faites sa connaissance


    votre commentaire
  •  

    RETOUR A LA RUBRIQUE

     

    --------------------------------G-CREATION DE TABLEAUX EN HTML------------------------------

     

    420-creer un tableau regulier

     

    nom prenom age profession
    Pouchard Raymond 38 rouleur
    Muchamiel Francisco 91 dérouleur

     

    421-creer un tableau irregulier

     

    LEGUME VARIETE SEMIS RECOLTE
    tomate cornue des Andes fevrier juillet
    poireau bleu de solaise
    potiron anou    

     

    431-ajouter une ligne d en-tete

     

    legumevarietedate semisdate recolte
    blette a cotes blanches    
    patate douce reunionnaise mai aout

     

    432-creer un tableau structure

     

    lundimardimercredijeudi
    05 12 04 13
    07 25 11 07
    12 37 15 20

     

    433-fusionner les cellules

     

    MARQUAGE AU SOL
    LIEUSALLE 1SALLE 2SALLE 3SALLE 4
    agence 1 bleu vert rouge
    agence 2 marron indigo jaune blanc
    agence 3 jaune noir

     

    434-legende & action sur les colonnes

     

    RELEVÉ DES VENTES
    Région du NORD
    SITENOMNOMBRE DE
    VENTES
    MONTANT
    Béthune Lucien 730 3 112,27
    Loos Robert 820 4 277,35
    Avesnes Simone 780 3 841,74
    TOTAL 2 330 11 231,36

     

    441-bordures du tableau et des colonnes

     

    ANMOISJOUR
    2020 janvier 14
    ANMOISJOUR
    2020 janvier 14

    442-espacement et couleur des cellules

     

    BORDER-SPACING
    MARI FEMME ENFANT
    Robert Simone Jules

    443-affichage/ou non des cellules

     

    COMPTES
    jour Robert Simone
    lundi   78
    mardi 21 63
    mercredi 27  

    444-largeur des colonnes

     

    NOMPRENOMADRESSE
    Robert Lefort 51 rue Victor Hugo LILLE
    NOMPRENOMADRESSE
    Robert Lefort 51 rue Victor Hugo LILLE

    votre commentaire
  •  

    ---------------------------- LECON 38 -------- la propriéré CSS " display " --------------------

     

    -ligne d'ecriture-

     

    382 - propriete : display -

     

    une ligne d ecriture sans 'display'

    une ligne d ecriture avec DISPLAY INLINE--

    une autre ligne d ecriture avec 'display inline'

    une derniere ligne d ecriture sans 'display'

    une premiere ligne d'ecriture avec "display block

    une deuxieme ligne avecavec un lien vers DISPLAY

    une premiere ligne d ecriture"display:list-item"

    une deuxieme ligne d ecriture"display:list-item"

    une troisieme ligne d ecriture"display:list-item"

    une troisieme ligne d ecriture"display:list-item"

    une ligne d ecriture ordinaire avant une ligne "display_none"

    une ligne d ecriture "display:none"

    une ligne d ecriture ordinaire après une ligne "display_none"

    une ligne d'écriture "invisibility"

    une ligne decriture ordinaire aprsè une ligne "invisibility"

    une premièreligne d ecriture en couleuravec "span"

    une deuxieme ligne en "span avec "display:block" d ecriture

    une troisieme ligne en "span" avec "inline-block" d ecriture

    ----------------- LECON 39 -------- Gerer le positionnement avec la propriete"position" --------------

     

    391 - propriete : position:static

    une premiere ligne d ecriture

    une deuxieme ligne avec position:static

    une troisieme ligne décalée, avec position:static

    une 4ème ligne avec element "left"

    392 - propriete : position:relative - texte

    une premiere ligne d ecriture

    une 2ème ligne décalée vers le bas

    une 3eme ligne avec un texte décalé vers la droite

    393 - propriete : position:relative - boites

     
     
     

    394 - propriete : position:absolute - textes

    une 1ere ligne d ecriture normale

    une 2eme ligne "position:absolute" "top"

    une 3eme ligne normale

    395 - propriete : position:absolute - boites

     
     
     
     

    396 - propriete : position:fixed - boites



     

    le carré rouge reste fixe dans la page

    397 - propriete :z-index - boites

    -positionnement sans "z-index"-

     

     

    je suis au-dessus



    -positionnement avec "z-index"-

     

    il est en-dessous

     




    398 - écrire dans une boite



    coucou

    ----------------------------- LECON 40 -------- --LA PROPRIETE " float"-- --------------

     

    401 - la propriete " float "

    je suis la boite beige

    le texte doit etre assez long pour arriver au bout de la ligne vers le bord droit de la page pour ensuite revenir vers le bord gauche de la page ou pour dire plus exactement sur le bord de la boite beigequi se trouve sur le bord gauche de la page. Et ainsi de suite a chaque ligne.

    4011 - SANS la propriete " float "

    emoticone clin d'oeil

    une premiere ligne d ecriture

    une 2eme ligne d ecriture

    emoticone clin d'oeil

    4012 - AVEC la propriete " float "

    emoticone clin oeil

    une 1ere ligne d ecriture avec float gauche

    emoticone clin oeil

    une 2ème ligne d ecriture avec float droite

    TEST insertion gif anime

    une tortue qui marche

    4013 - AVEC et SANS la propriete " float "

    une tortue qui marche

    une 1ere ligne d ecriture avec "float" dans le "div"

    une 2eme ligne d ecriture simple

    une tortue qui marche

    4014 - Probleme de presentation avec la propriete " float "

     
     

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

     

    LE RECTANGLE VERT DEBORDE DU "div"

     

     

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

     

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

    LES RECTANGLES VERTS SE CHEVAUCHENT

    402 - La propriete " clear "

     

     

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

     

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

    LES BOITES SONT ALIGNEES avec la propriete "clear"

     

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture avec la propriete "clear"

    403 - La propriete " clear " avec la valeur "both"

     

     

    une 1ere ligne d ecriture

     

    une 2eme ligne d ecriture

    une 1ere ligne d ecriture

    une 2ème ligne d ecriture

    la valeur 'both' est appliquee au 2eme conteneur

    404 - le pseudo element "clairfix" (voir lecon 56)

     

     

    une 1ere ligne d ecriture

     

    une 2eme ligne d ecriture

    une 1ere ligne d ecriture

    une 2eme ligne d ecriture

    le pseudo element"clairfix" evite que la boite de droite deborde du conteneur

     

    405 - EXERCICE: Incrustations de boites

     

     
     
     
     

    Le 1er conteneur est en "position:relative" et "display:inline-block"
    Les autres conteneurs sont en "position:absolute" et "display:inline-block

    la "position:relative" se place dans le flux normal de la page
    la "position:absolute" se place par rapport à son parent le plus proche

    Les elements "inline-block" n occupent que la place necessaire
    Ils se placent sur la meme ligne et leur contenu est de type "block"


    votre commentaire
  •  

    ---------------------------- LECON 32 ------------------------------

     

    les éléments "p" et "span"

    une ligne block d'écriture dans un cadre bleu clair

    une ligne block surlignée en vert

    une ligne block surlignée en orange sur la même ligne,surlignée en jaune

     

    l'élément "overflow"

    une ligne d'écriture assez longue pour dépasser largement le conteneur sans utiliser l'élément "overflow

    un teste court

     

    une ligne d'écriture assez longue pour dépasser largement le conteneur avec l'élément "overflow hidden"

    un teste court

     

    une ligne d'écriture assez longue pour dépasser largement le conteneur avec l'élément "overflow scroll"

    ---------------------------- LECON 33 -------- les marges internes ------------------------------

     

    écriture de trois lignes sur fond vert avec une bordure noire

    une première ligne d ecriture sans marge

    une deuxième ligne d'écriture avec des marges identiques

    une troisième ligne avec des marges différentes

     

    ---------------------------- LECON 34 -------- gestion des bordures ---------------------------

     

    la gestion des bordures

    bordure SOLID

    bordure DOUBLE

    bordure RIDGE

    bordure OUTSET

     

    ------l'opacité des bordures-------

    un texte noir et une bordure noire

    un texte et une bordure noirs opaques

    un texte noir et une bordure noire opaque

    -----EXERCICE-----

    mon tonton et ma tata

    A MOI

    c'est mon tonton et ma tata

    MarcelSimone

     

    -----EXERCICE-2-----

     

     
     

    A REVOIR LIGNE 57

     

    ---------------------------- LECON 35 -------- gestion des marges externes --------------------

     

    une première ligne d'écriture

    une deuxième ligne d'écriture

    ---------------------------- LECON 36 -------- la propriété : " box-sizing" --------------------

    la première ligne sans (box-sizing" déborde de la boite

    la deuxième ligne (avec content-box) déborde de la boite

    la troisième ligne (avec border-box) s'ajuste à la boite

    test d'annulation de la mise en forme de "p"

    A REVOIR

    essai de boite à 500 px avec "div">

    la première ligne à 600px, sans "box-sizing" déborde de la boite

    la deuxieme ligne à à 600px (avec border-box) s'ajuste à la boite

    A REVOIR

    ---------------------------- LECON 37 -------- les bords arrondis --------------------

    une boite sans bord arrondi

    une boite avec les 4 coins arrondis identiques

    une boite avec des coins en ellipse : 20px/40px

    une boite avec des coins en ellipse : 15%/30%


    votre commentaire
  •  

    ---------- LEÇONS CSS ---------

    --------------------------LECON 17 -----------------

    fond du texte jaune

    SELECTEURS ET PROPRIÉTÉS

    le même en gras dans l'éditeur

    LIGNE CRÉE EN CODE HTML 

     

    ---------------------LEÇON 20 -------------------

    SELECTEURS CSS SIMPLES

    METTRE UN TEXTE EN GRAS

    TEXTE EN BLEU

    TEXTE EN ROUGE

    Ceci est un lien fictif

    Cliquer sur ce LIEN FICTIF

    ---------------------LEÇON 21 -------------------

    police de caractère normale

    police de caractère 24

    h3-ecriture en italic-

    texte souligné

    texte en h2, italique et souligné

    -->

    écriture après remise par défaut de l'élément h1

    un titre orange en h1

    ---------------------LEÇON 22 -------------------

    texte sans précision de police

    Texte avec une police   "castellar"

    • la première ligne de la liste
    • la deuxième ligne avec un retrait de 50 px

    ---------------------LEÇON 23-les éléments div & span-- -------------------

    ce texte n'est pas centré

    ce texte est centré

    ce texte est en bleu fonce sur fond bleu clair

     

    • ce texte est de couleur blanche,
    •  sur fond blanc, au centre; et a 80% de la largeur de la page

    la marge est réduite à droite

    dernier essai

    Ce texte prend la moitié de la page avec un fond pourpre et une marge a gauche de cent pixels et une marge a droite de trois cents pixels, de plus le texte est centre

     

    une ligne de texte "hors div

    une ligne de texte "sous div" avec texte en rouge

    une derniere ligne "hors div"

                                              l'élément "div" ne fonctionne pas

     

    ---------------------LEÇON 24-les elements block & inline -------------------

     

    appication des blocks

    l'element h3 est un element de type block

    verification de la mise en forme

    INFORMATION : Ce texte est dans un cadre jaune avec les coins arrondis, un bord bleu de 10 px, à 100 pixels des bords droit et gauche

     

    INFORMATION utiliser un div avec un h2

     

    pour verifier la place prise avec span

     

    pour verifier la place prise avec div

     

    avec h2, element "block" et l'élément span

    ---------------------LEÇON 25-Notations "long hand" et "short hand" -------------------

    mise en forme d'une ligne d'écriture
     
     
     
                                 D4 - MISES EN FORME DE TEXTES EN CSS
     
     

    ---------------------LEÇON 26-la propriété "font family" et les polices de google" -------------------

    une ecriture en indie flower

     

    https://goo.gl/maps/LP3Lipvjpw5ix7st5                    NON

     

     

    style="font-size:16px;width:50%:background- color:lightblue">INFORMATION

    Ecriture de deux lignes avec div 

     

    INFORMATION

     

    deuxieme ligne d ecriture

     

     

    --------------------------LECON 27-les autres proprietes liees a la police" -------------------

     

    ceci est le titre

    ligne 1

    ligne 2

     

    voici

    une ligne d

    ecriture

     

    voiciune ligne d ecriture

     

    ----------------------- LECON 28-les proprietes liees au texte-------------------

     

    alignement du texte

    Alignement à gauche

    Alignement centré

     

    indentation du texte

    la premiere ligne indentee a 20 pixel

    la deuxieme ligne qui sera assez longue pour avoir un retour a la ligne automatique et qui sera indentee a 20% de la page. Dans le cours les 20% concernet le body mais dans mon exemple il n y a pas de body

     

    ombrage du texte

    un texte avec ombrage H à gauche V en bas et Flou bleu de 1 pixel

    un texte avec un flou rouge de 5 pixels

     

    ----------------------- LECON 29-les interlignes et les espaces-------------------

    une ligne d'écriture ordinaire

    une autre ligne d'écriture ordinaire

    une ligne d'écriture
    avec un interligne de 12 pixels

    une ligne d'écriture
    avec un interligne de 24 pixels

    une ligne d'écriture
    avec un interligne de 32 pixels

     

    un -div- pour colorer le texte en rouge

    une ligne d'écriture avec des espaces normaux
    entre les lettres et les mots

    une ligne d'écriture avec des plus grands espaces entre les lettres

    une ligne d'écriture avec des espaces entre les mots

     

    ----------------------- LECON 30-LES TEXTES EN COULEUR-------------------

    un texte coloré en bleu avec le code - blueviolet -

    un autre texte en couleur orange avec les codes -RGB-

    encore un texte en couleur rouge avec le code-#-

     

    un premier cadre avec un bordure violette

     

     

    une deuxième ligne avec
    une bordure violette d'intensite 50%


    votre commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique