HTML – Premier site en local sur wordpress

Bootstrap le retour

yannick — Wed, 28 Aug 2019 11:31:11 +0000

Pour démarrer une page bootstrap, il nous faut un squelette de base qui comprend les liens et les scriptes.

Le lien vers le site Bootstrap ici

Nous pouvons également placer un lien pour les icônes.

Un lien pour les icônes ici

Puis un lien vers notre page de styles CSS.

Page de départ, avec la base des blocs :

Hello, world!

One of three columns

Le code :



  
    
    
    

    
    
    
    
    

    Hello, world!
  
  
    Hello, world!


    
        
          
            One of three columns
          
          
            One of three columns
          
          
            One of three columns
          
          
            One of three columns
          
        

        
            
              One of three columns
            
            
              One of three columns
            
            
              One of three columns
            
            
                One of three columns

Barre de navigation :

Noter que pour qu’elle soit fixe en haut de page, ajouter la class= »fixed-top » à


    
      Start Bootstrap
      
      
        
          
            About
          
          
            Services
          
          
            Contact
          
          
            
              Portfolio
            
            
              1 Column Portfolio
              2 Column Portfolio
              3 Column Portfolio
              4 Column Portfolio
              Single Portfolio Item
            
          
          
            
              Blog
            
            
              Blog Home 1
              Blog Home 2
              Blog Post
            
          
          
            
              Other Pages
            
            
              Full Width Page
              Sidebar Page
              FAQ
              404
              Pricing Table

Breadcrumb (fil d’Ariane) :


      
        Home
      
      Contact

Card (bloc avec entête, body et footer) :

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.

Learn More

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.

Learn More

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.

Learn More

 
      
        
          Card Title
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
          
          
            Learn More
          
        
      
      
        
          Card Title
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.
          
          
            Learn More
          
        
      
      
        
          Card Title
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.
          
          
            Learn More

Map et adresse (iframe) :

Contact Details

3481 Melrose Place
Beverly Hills, CA 90210

P: (123) 456-7890

E: name@example.com

H: Monday – Friday: 9:00 AM to 5:00 PM

 
      
      
        
        
      
      
      
        Contact Details
        
          3481 Melrose Place
          
Beverly Hills, CA 90210
          

        
        
          P: (123) 456-7890
        
        
          E:
          name@example.com
          
        
        
          H: Monday - Friday: 9:00 AM to 5:00 PM

Un formulaire :


        
          
              
                
              
              
                
              
            
            
                Adresse mail
                
                Nous ne partagerons jamais votre email avec qui que ce soit.
              
          
            Formulez votre demande
            
          
          
              
              
                Cocher si vous êtes d'accord.

Raccourcis pour le HTML

yannick — Fri, 23 Aug 2019 15:19:15 +0000

Quelques raccourcis pour gagner du temps/

Page de base : ! et tabulation

Commentaire : ctrl / Pour mac : (cmd shift /)

Entourer d’une balise : ctrl shift P wrap with abbreviation rentrer le nom de la balise et valider. pour plusieurs paragraphe p*

Réorganiser la page : ctrl shift P et choisir beautify

Remplir de texte : Il faut écrire : lorem et tabulation pour un nombre de 50 mots, placer un chiffre collé a lorem : lorem50 et tabulation

Affichage de l’éditeur de texte sur plusieurs ligne : alt Z

Curseur multiple : alt clic clic…

Rechercher : ctrl F

Sélectionner et remplacer : Sélectionner un mot, un groupe de mots, ctrl H et indiquer dans le premier champs la selection et dans le deuxième ce par quoi nous voulons le remplacer. Cliquer sur remplace cela ce ferra un par un.

Déplacer une ligne, une balise : Placer le curseur sur la ligne, (on peut sélectionner plusieurs ligne) alt et flèche haute ou basse.

Créer une carte personnalisée

yannick — Thu, 28 Mar 2019 12:13:27 +0000

Aujourd’hui nous avons la possibilité de créer des cartes personnalisées, il existe plusieurs sites pour le faire. Nous avons utilisé uMap.openstree

Cliquer sur créer une carte pour commencer. Ensuite vous verrez le site est assez simple d’utilisation, il suffit de lire et de survoler les icônes.

Une fois notre carte effectuée il suffit juste de prendre le code d’importation pour l’intégrer.

Et voila !

Voir en plein écran

Intégrer du SVG

yannick — Thu, 07 Feb 2019 13:08:59 +0000

Pour intégrer du SVG dans une page HTML nous nous servons d’illustrator.

Dans notre carte (oui nous faisons une carte cliquable) il faut nommer les groupes pour chaque objets (ici département) si nous voulons styler ces objets, après dans le code.

Dans fenêtre – Option d’objet, donner une url aux objets et définir la zone active( ex:polygone).
Enregistrer sous au format SVG, le profils SVG: Basic 1.1 et Propriétés CSS: Élément de style.
Copier / coller le code généré dans la page HTML (que la partie avec les balises svg).

(A noter une fenêtre propriétés CSS.)

Une fois le fichier HTML en place nous pouvons styler notre carte en CSS.

Image-picture

yannick — Fri, 25 Jan 2019 10:12:35 +0000

Pour chargé des images en multiple format . Le navigateur choisira dans l’ordre celui qu’il peut ouvrir.

Exemple du code:

Et en responsive? Une technique permet à la même image, que l’on insert plusieurs fois et de différente taille, d’être choisie en fonction de la taille de l’écran.

Animation, suite!

yannick — Thu, 24 Jan 2019 10:04:17 +0000

Mettre en application les animations les transitions sur une galerie

La partie code html et css qui nous intéresse:

Travail perso:

Le code

Animation 3D

yannick — Mon, 21 Jan 2019 13:13:05 +0000

La base d’un cube 3D:

Mettre ce cube sur un plan.

Un article pour faire un cube vraiment intéressant https://la-cascade.io/creer-un-cube-en-css/

N’hésitez pas à cliqué sur voir la démo

Par la suite:

Pour donner un effet de perspective il faut englober les cubes dans une autre div et utiliser la propriété » perspective: 2000px; »

Avec quelque transitons supplémentaires:

Ensuite nous faisons un exercice consistant à écrire DW02 en forme de cube et avec déplacement au survole.

Tous les blocs ne sont pas dans le code si dessous. Ecrire 750 lignes aurait été trop long.

Noté aussi que nous aurions pu étirer les cubes en ajoutant scale3d(4,.5,2) par exemple:

  
*#cube0 {
   transform:translate(500px,500px)rotateZ(45deg)scale3d(4,.5,2); 
        }

Quand il neige et que le prof s’occupe!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, voluptatibus repudiandae voluptatibus.

Explication simplifier:

Quand on clique sur un bouton celui-ci affiche la vue correspondante

Animation avec les »sprite »

yannick — Mon, 14 Jan 2019 08:20:04 +0000

La technique consiste à charger toute les images d’une animation et de n’en afficher qu’une seul. Ensuite, de déplacer le fond de manière à faire apparaitre la seconde image, puis la troisième, etc … pour donner ainsi l’illusion de mouvement. Ceci peut-être répéter à l’infinie.

Ici un exemple de code, donnant l’illusion d’un personnage qui marche:

L’image de départ pour cette animation:

Il est aisé de deviner que suivant la position du fond, avec cette planche de dessin, nous pourrons donner l’illusion de quatre déplacements différents pour ce personnage.

Par la suite…..

Deux animation, le texte, et le personnage plus la suite du texte, déclenchés par un clique sur le bouton.

Testez vous même!

N’hésitez pas à réactualiser la page pour voir le début de l’animation.

Le fichier js:

Animation et Javascript

yannick — Thu, 10 Jan 2019 14:22:10 +0000

Une première animation avec intégration de javascript. En commentaire les différente méthode d’intégration du onclick. Dans le html ou dans un script.

Il faut bien faire attention à ce que chaque bouton et élément devant être actionné en même temps face partie d’un parent commun.

Le script du fichier classlist.js

Animation

yannick — Wed, 09 Jan 2019 15:34:48 +0000

La règle @keyframes

Lorsque vous spécifiez des styles CSS dans la @keyframes règle, l’animation passera progressivement du style actuel au nouveau style à certains moments.

Pour qu’une animation fonctionne, vous devez la lier à un élément.

L’exemple suivant lie l’animation « exemple » à l’élément

. L’animation durera 4 secondes et changera progressivement la couleur de fond de l’élément

de « rouge » à « jaune »:

/* The animation code */ 
@keyframes example { 
from {
background-color: red;
} 
to {
background-color: yellow;
} 
} 
/* The element to apply the animation to */ 
div { 
width: 100px; 
height: 100px; 
background-color: red; 
animation-name: example; 
animation-duration: 4s; 
}
}

La animation-iteration-count propriété spécifie le nombre de fois qu'une animation doit être exécutée.
L'exemple suivant exécute l'animation 3 fois avant son arrêt:
 
div {  
 width: 100px;   
height: 100px;   
position: relative;   
background-color: red;   
animation-name: example;   
animation-duration: 4s;   
animation-iteration-count: 3; 
}
L'exemple suivant utilise la valeur "infinite" pour que l'animation continue à jamais:

div {   
width: 100px;   
height: 100px;   
position: relative;   
background-color: red;   
animation-name: example;   
animation-duration: 4s;   
animation-iteration-count: 
infinite; 
}
La animation-direction propriété spécifie si une animation doit être lue en avant, en arrière ou en alternance.
La propriété animation-direction peut avoir les valeurs suivantes:

normal– L’animation est lue normalement (en avant). C’est par défaut
reverse – L’animation est lue en sens inverse (en arrière)
alternate – L’animation est jouée en avant puis en arrière
alternate-reverse – L’animation est lue en premier, puis en avant

La animation-timing-function propriété spécifie la courbe de vitesse de l’animation.

La propriété animation-timing-function peut avoir les valeurs suivantes:

ease – Spécifie une animation avec un début lent, puis rapide, puis se termine lentement (par défaut)
linear – Spécifie une animation avec la même vitesse du début à la fin
ease-in – Spécifie une animation avec un démarrage lent
ease-out – Spécifie une animation avec une fin lente
ease-in-out – Spécifie une animation avec un début et une fin lents
cubic-bezier(n,n,n,n) – Vous permet de définir vos propres valeurs dans une fonction cubic-bezier

L’exemple suivant montre les différentes courbes de vitesse pouvant être utilisées:

#div1 {animation-timing-function: linear;} 
#div2 {animation-timing-function: ease;} 
#div3 {animation-timing-function: ease-in;} 
#div4 {animation-timing-function: ease-out;} 
#div5 {animation-timing-function: ease-in-out;}

Les animations CSS n’affectent pas un élément avant la lecture de la première image clé ou après la lecture de la dernière image clé. La propriété animation-fill-mode peut remplacer ce comportement.

La animation-fill-mode propriété spécifie un style pour l’élément cible lorsque l’animation n’est pas en lecture (avant le début, après la fin ou les deux).

La propriété animation-fill-mode peut avoir les valeurs suivantes:

none– Valeur par défaut. L’animation n’appliquera aucun style à l’élément avant ou après son exécution.
forwards – L’élément conservera les valeurs de style définies par la dernière image clé (dépend de l’animation-direction et de l’animation-itération-nombre).
backwards – L’élément obtiendra les valeurs de style définies par la première image clé (dépend de la direction de l’animation) et les conservera pendant la période de délai d’animation.
both – L’animation suivra les règles pour les deux sens, en étendant les propriétés de l’animation dans les deux sens

L’exemple suivant permet à l’élément

de conserver les valeurs de style de la dernière image clé à la fin de l’animation:

div {   
width: 100px;   
height: 100px;   
background: red;   
position: relative;   
animation-name: example;   
animation-duration: 3s;   
animation-fill-mode: forwards; }

Animation Sténographie

L’exemple ci-dessous utilise six propriétés d’animation:

div {   
animation-name: example;   
animation-duration: 5s;   
animation-timing-function: linear;   
animation-delay: 2s;   
animation-iteration-count: infinite;   
animation-direction: alternate; 
}

Le même effet d’animation que ci-dessus peut être obtenu en utilisant la animation propriété abrégée :

div {   
animation: example 5s linear 2s infinite alternate; 
}

La animation-play-state propriété spécifie si l’animation est en cours d’exécution ou en pause.Les valeurs:

paused (Spécifie que l’animation est en pause)
running (Spécifie que l’animation est en cours d’exécution)
initial (Définit cette propriété à sa valeur par défaut)
inherit (Hérite cette propriété de son élément parent)

Mettre en pause une animation:

div {   
animation-play-state: paused;
}

Exemple:

div:hover {   
animation-play-state: paused; 
}

Illustration de ce cour:

Animations css 01

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear;

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-iteration-count:infinite;

animation-name: animation01; animation-duration:3s; animation-delay:1s; animation-timing-function: linear; animation-iteration-count:infinite; animation-direction: alternate-reverse;

animation-name: animation01; animation-duration: 3s; animation-delay: 1s; animation-timing-function: linear; animation-fill-mode:both;

#exemple05 .sprite { animation-name: animation01; animation-duration: 1s; animation-iteration-count: infinite; animation-play-state: paused; } #exemple05:hover .sprite { animation-play-state: running; }