• 11 - LES FORMULAIRES

     

    59 - CREATION D'UN FORMULAIRE SIMPLE

     

    591-creation des champs de formulaire

     

     

      texte              mot de passe           mel

     

    592-avec les etiquettes des champs de formulaire

     

    593-ajouter le bouton "valider"

     

     

    594-identification des données

     

     

    pas de modification dans la présentation
    l'attribut "name" sert  traiter les données envoyées 

     

    60 - CREATION D'UN FORMULAIRE COMPLEXE

     

    601-création du formulaire complet

     

    Description de la plante :

     

    Couleur - Description
    validation

     

    l'attribut     placeholder     ne fonctionne pas   (dans l'élement : textarea )

     

    61 - CREATION D'UN FORMULAIRE COMPLEXE SECURISE

     

    611-attributs de securite du formulaire

     

    Description de la plante :

     

    Couleur - Description
    validation

     

    LES ATTRIBUTS : max, min, required  NE FONCTIONNENT PAS

     


    votre commentaire
  •  

    10-SÉLECTEURS CSS COMPLEXES

     

    54 - LES SÉLECTEURS D'ATTRIBUTS

     

    541-selectionner un element selon son attribut-

     

    l information se trouve ICI

     

    le bon résultat se trouve ci-dessous

     

    image du résultat : impact sur tout le site

     

    leçons 54/58 sélecteurs complexes

     

     

     

    image du résultat: impact sur la page

     

    lien vers la première page: CLIQUER ICI

    lien vers la première page: CLIQUER ICI

    image du résultat: impact sur la ligne

     

    542-selectionner un element selon la sous valeur d'un attribut -

     

    Tc au sourire brillant

    emoticone

    Tc aux cheveux blonds

    le CSS n'accepte pas le signe ~

     

    543-selectionner un element qui possede un attribut qui COMMENCE par une certaine sous-valeur -

     

    Tc au sourire brillant

    emoticone

    Tc2 aux cheveux blonds

    le CSS n'accepte pas le signe  " ^ "

     

    546-rendre les selecteurs d attributs insensibles a la casse -

     

    le CSS n'accepte pas les caracteres spéciaux

     

    AVEC NOTEPAD

     

    leçons 54/58 sélecteurs complexes

      le résultat est correct

     

    55 - LES PSEUDO-CLASSES CSS

     

    TRAITÉ AVEC NOTEPAD

     

    56 - LES PSEUDO-ELEMENTS CSS

     

    561-Inserer du contenu ::before ::after

     

    -(deuxieme partie du texte)

     

    562-selectionner la premiere lettre d un element

     

    Les sanglots longs des violons ...

     

    563-selectionner la premiere ligne d un element

     

    Les sanglots longs des violons de l'automne
    Blessent mon coeur d'une langueur monotone
    Tout suffocant et blême quand sonne l'heure
    Je me souviens des jours anciens et je pleure.



    564-cibler une partie selectionnee par l utilisateur



    Les sanglots longs Des violons De l’automne Blessent mon coeur D’une langueur Monotone. Tout suffocant Et blême, quand Sonne l’heure, Je me souviens Des jours anciens Et je pleure Et je m’en vais Au vent mauvais Qui m’emporte Deçà, delà, Pareil à la Feuille morte.

     

    57 - CREATION D UN MENU HORIZONTAL -

     

     

    la commande :" position:sticky " ne fonctionne pas

     

    58 - CREATION D UN MENU DEROULANT -

     





    votre commentaire
  • 9-COULEURS, DÉGRADÉS ET OMBRES

     

    - 49 - GÉRER LA COULEUR DE FOND

     

    491-gestion de la couleur de fond

     

    couleur orange par le nom

    couleur bleu hexadecimal

    couleur verte par RGB

     

    492-gestion de l'opacité de la couleur de fond

     

    couleur rouge naturelle

    couleur rouge opacité 0,50

    493-surligner avec un " span "

     

    la compréhension de ce texte est très importante

     

    - 50 - AJOUTER DES IMAGES DE FOND

     

    501 - image de fond a un element avec "background-image"

     

     

    Exercice avec "NOTEPAD"

     

    502 - couleur de fond & 1 image de fond

     

     

     

    503 - repetition ou non d une image de fond

     

     
     
    background-repeat                                        background:no-repeat

     

     
     
    background-repeat:round no-repeat                  background-repeat:space no-repeat

     

     
    background-repeat:repeat-x, repeat-y

     

    504 - gerer la taille des images de fond

     

     
     
    background-size:contain                           background-size:cover 
     
     
     background-size:25%50%                    background-repeat:repeat-x, repeat

     

    505 - gerer le defilement d une image de fond

     

    le fond
    ne defile pas
    ni
    dans le conteneur
    ni
    dans l element

    defile
    a la fois
    avec l element
    et aussi
    avec le contenu

     background-attachment:fixed                                         background-attachment:local

     

    506 - determiner la position du fond

     

     
     
     
     
    sans background-origin        background-origin:padding-box    background-origin:border-box      background-origin:content-box

     

    507 - positionner une image de fond

     

     
     
    background-position:top 50px left:30px                    background-position:top right

    - 51 - CREER DES DEGRADES LINEAIRES

     

    511 - Creation de degrades lineaires

     

     
     

     

    512 - Creation de degrades avec direction et color stops

     

     
     
    sans color stop                                         bleu 40%    jaune 70%

     

    513 - Creation de degrades semi-transparents

     

     
     
     
    COULEURS :  pleines                                  semi-transparentes (S.T.)                       S.T. / pleine / S.T. 

     

    514 - Creation de degrades semi-transparents avec image

     

     
                   les couleurs dégradées sont AU-DESSUS de l'image
     
                    Les couleurs dégradées sont EN-DESSOUS de l'image

     

    515 - la repetition des degrades

     

     
    degrade sans repetition
     
    degrade avec repetition, sans transition
     
    degrade avec repetition et transition

     

    - 52 - CREER DES DEGRADES RADIAUX

     

    521 - Degrades radiaux simples

     

     
    degrades radiaux par defaut

     

     
    degrades radiaux : cercle par défaut

     

     
     
    degrades radiaux : ellipse par défaut

     

     
    degrades radiaux avec des "color stops" (%)

     

     
    degrades radiaux avec le point central au milieu du bord haut

     

     
    degrades radiaux avec le point central à gauche (30%) haut (70%)

     

     
    degrades radiaux avec "closest-side"

     

     
    degrades radiaux avec "farthest-side"

     

     
    degrades radiaux avec "closest-corner"

     

    522 - Degrades radiaux complexes

     

     
    closest-side / circle
     
    taille du rayon, cercle, point central sur le bord
     
    dimensions du dégradé,placement du point central

     

    523 - Degrades radiaux multiples et semi transparents

     

     
     degrade radial sans opacite
     
     degrade radial avec opacite
     
     deux degrades radiaux

     

    523/2 - EXERCICE - Degrades radiaux a 6 couleurs

     

     
    jaune, rose, violet,vert pale, vert moyen, olive

     

    524 La repetition des degrades radiaux

     

     
    degrade radial sans repetition
     
    degrade radial avec repetition
     
    degrade radial avec repetition et transitions

     

    53 - AJOUTER DES OMBRES AUTOUR DES ELEMENTS

     

    531 creation d ombres simples

     

    ombre en bas à droite

     
    ombre extérieure (verte par defaut)

     

    532 creation d ombres internes

     

     
     
     
       valeur positive : marge en haut a gauche
       valeur negative:marge en bas a droite

     

    533 ombres en couleur et semi-transparentes

     

     
     
     
     
           par defaut                  ombre externe bleu-clair            ombre interne rouge              ombre interne rouge op 50%

     

    534 ombres floues

     

     
     
     
     

     

    535 ombres floues projetees

     

    ombre - par défaut - externe

    ombre - par défaut - externe - étalée

    ombre - par défaut - interne - étalée

    ombre - par défaut - interne - floue - étalée

    ombre - centrée - externe - floue - étalée

    ombre - centrée - interne - floue - étalée

     

    536 ombres multiples autour d'un element

     

     

    conteneur aux bords arrondis avec 2 ombres exterieures floues
    conteneur aux bords arrondis avec 4 ombres exterieures non floutees
    conteneur aux bords arrondis avec 4 ombres exterieures floues
    conteneur aux bords arrondis avec 4 ombres interieures floues
    conteneur aux bords arrondis avec 2 ombres interieures floues et 2 ombres exterieures floues

    votre commentaire
  •  

    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

     

    46 - INSERER DE LA MUSIQUE

     AVEC L'ÉDIEUR

    461-inserer un fichier audio

     

    EKLABLOG n'accepte que les fichiers MP3

    la leçon 46 se fera avec NOTEPAD++

     

     

    47 - INSERER DE LA VIDÉO

     

    EKLABLOG n'accepte que les liens VIDEO de YouTube

    la leçon 47 se fera avec NOTEPAD++

     

    48 - L'ÉLÉMENT "iframe"

     


    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



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