• 451-insertion d'une image avec l'éditeur

     

     

    452-modifier les dimensions de l image en "px"

     

     

    deux poupées

    453-modifier les dimensions de l image en " % "

     

    deux poupees

    454-positionner des images

     

    deux poupees deux poupees deux poupees deux poupeesdeux poupees

     

    455-explication de l image et legende

     

    deux poupées les deux poupées de Micky


    votre commentaire
  •  

     

    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

    ---------------------------- 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



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires