tuto - [Tuto codage] Rapide explication du code des signas codées

Sujet: [Tuto codage] Rapide explication du code des signas codées

tuto - [Tuto codage] Rapide explication du code des signas codées Empty

Mar 22 Déc - 20:24

Salut à tous,

voilà une rapide explication du code de la structure des signatures codées. Je peaufinerai un peu plus quand j'aurai le temps. Cela ne vous apprendra pas à coder, simplement à savoir un peu comment est organisée votre signa codée.

Pour savoir comment héberger votre signa, allez ICI.
Pour savoir comment modifier le contenu de votre signa, allez ICI.

Le document se divise en 2 parties : le « head », qui détermine les données du document, son apparence et sa structure, entre les balises

Code:: <head> </head>

et le « body », qui correspond au contenu de la signa, entre les balises

Code:: <body> </body>

I. LE HEAD

1. Les données du document

Tout en haut, il y a les données du document (obligatoire dans tout code HTML). Elles vont permettre aux navigateurs de reconnaître la page de code.

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799607-08

2. Le code Javascript

Dans le « head », on trouve le code javascript qui va gérer les animations de la ban (changement d'onglets quand on sélectionne un onglet différent en haut). Cette partie-là est situé entre les balises

Code:: <script type="text/javascript">

Code:: </script>

Il ne faut pas y toucher du tout.

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799608-09

Code:: <script type="text/javascript">
//
  </script>

3. Le code CSS

On trouve également dans le « head » le CSS. Il s'agit de l'apparence et de la structure de la signa. Sans le CSS, la signa ne serait qu'une suite d'images et de textes et n'aurait pas la forme d'onglets que nous avons. Le CSS est situé entre les balises

Code:: <style type="text/css">

Code:: </script>

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799609-10

Code:: <style type="text/css">

   /*onglets*/
.onglet,

.onglet_0
   {
   z-index: 1;
   width: 125px;
   display:inline-block;
   position: relative;
   background: #edfaff;
   margin:auto;
   margin-bottom: -2px;
   padding: 5px;
   border: 2px dotted #ffffff;
   border-radius:8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   -webkit-border-radius: 8px 8px 0 0;
   letter-spacing: 3px;
   text-align: center;
   font-variant: small-caps;
   font-style: bold;
   color: #006AA3;
   -webkit-transition: 300ms;
   -moz-transition: 300ms;
   transition: 300ms;
   }
.onglet_1
   {
   z-index: 2;
   width: 125px;
   display:inline-block;
   position: relative;
   background: #edfaff;
   margin:auto;
   margin-bottom: -2px;
   padding: 5px;
   border: 2px dotted #ffffff;
   border-radius:8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   -webkit-border-radius: 8px 8px 0 0;
   letter-spacing: 5px;
   text-align: center;
   font-variant: small-caps;
   font-style: bold;
   color: #006AA3;
   -webkit-transition: 300ms;
   -moz-transition: 300ms;
   transition: 300ms;
   }
.onglet:hover
   {
   background: #ccf5ff
   }

   /*contenu des onglets*/
.contenu_onglet
   {
   z-index: 3;
   height : 200px;
   width : 545px;
   font-family : "Times New Roman";
   background: #edfaff;
   border: 2px dotted #ffffff;
   padding: 10px;
   display:none;
   overflow : auto;
   color: #006AA3;
   }
#contenu_onglet_1er
   {
   font-size : 12px ;
   font-variant: small-caps;
   }
#contenu_onglet_2eme
   {
   font-size : 14px ;
   font-variant: small-caps;
   font-style: bold;
   text-decoration:underline;
   }

   /*lien de bas de signa*/
.links
   {
   width : 565px;
   height : 32px;
   border: 2px dotted #ffffff;
   margin-top: -2px;
   border-radius:0 0 8px 8px;
   -moz-border-radius: 0 0 8px 8px;
   -webkit-border-radius: 0 0 8px 8px;
   background: #edfaff;
   text-align: center;
   color: #008AD4;
   font-variant: small-caps;
   text-decoration: none !important;
   }
.button img
   {
   width: 75px;
   height:auto;
   padding-left:30px;
   padding-right:30px;
   top:0px;
   }
.button2 img
   {
   width: 75px;
   height:auto;
   padding-left:30px;
   padding-right:30px;
   padding-top: 5px;
   margin-bottom:-5px
   }

   /*intérieur onglet présentation de la IOT*/
.avatar
   {
   max-width: 100px;
   max-height: 100px;
   padding:10px;
   }
div.infobulle
   {
   position: relative;
   cursor:pointer;
   }
div.infobulle > div
   {
   display: none;
   }
div.infobulle:hover
   {
   background: none;
   z-index: 500;
   }

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div
   {
   display: block;
   width:90px;
   position: absolute;
   top: 110px;
   left:10px;
   background: #ccf5ff;
   padding: 3px;
   border: 2px dotted #ffffff;
   text-align:center;
   color: #008AD4;
   font-variant: small-caps;
   text-decoration: none !important;
   font-size : 12px ;
   font-style: bold;
}
.texte_infobulle
   {
   color: #008AD4 !important;
   }

   :*onglet présentation perso*/
.presentation
   {
   position: relative;
   width: 85%;
   }
.prez-titre
   {
   margin-bottom: 10px;
   text-align: center;
   font-size: 1.6em;
   font-style: bold;
   font-variant: small-caps;
   }
.prez-image
   {
   position: absolute;
   z-index: 4;
   top: 80px;
   left:40px;
   width: 150px;
   height: 150px;
   border-radius: 8px;
   background-size: cover;
   background-position: top;
   }
.prez-contenu
   {
   left: 190px;
   width: 300px;
   max-height:136px;
   padding: 10px 15px;
   border-radius: 8px;
   font-size: 14px;
   line-height: 1.5;
   position: relative;
   background: #ccf5ff;
   border: 2px dotted #ffffff;
   border-radius: 8px;
   }
.prez-overflow
   {
   max-height: 137px;
   overflow: auto;
   }
.prezname
   {
   font-style: bold;
   font-variant: small-caps;
   text-decoration: underline;
   }
.prez-image2
   {
   top: 80px;
   left:40px;
   max-width: 0px;
   max-height: 0px;
   }
.prez-image2 img
   {
   padding-top: 5px;
   max-width: 175px;
   max-height: 175px;
   }
   /*scrollbar sur chrome */
.contenu_onglet::-webkit-scrollbar,
.prez-overflow::-webkit-scrollbar
   {
   width: 5px;
   }
.contenu_onglet::-webkit-scrollbar-track,
.prez-overflow::-webkit-scrollbar-track
   {
   background: rgba(121, 119, 115, 0.3);
   border-radius: 5px;
   }
.contenu_onglet::-webkit-scrollbar-thumb,
.prez-overflow::-webkit-scrollbar-thumb
   {
   background: rgba(121, 119, 115, 0.8);
   border-radius: 5px;
   }
a:link
   {
   text-decoration: none;
   color: #008AD4;
   }
a:hover
   {
   text-decoration: none;
   color: #0FABFF;
   }
  </style>

La longueur du CSS varie selon la complexité du document. Le CSS va se rattacher à des indicateurs (« class » ou « id ») placés dans le code HTML, et va définir leur apparence.

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799607-11ter

Remarque : Les indications entre /* et */ ne sont pas du code mais des commentaires pour mieux comprendre le code. Leur seul utilité est de faciliter la lecture du code.

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799608-12

II. LE BODY

Le « body » contient le code HTML qui correspond au contenu du document.

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799611-13

Code:: 
  <div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Signature</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Userbars</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">IOT</span>
<span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">Prez'</span>
   </div>


   <div class="signa">
   <div class="contenu_onglet" id="contenu_onglet_1er" align="center">
   <img src="http://image.noelshack.com/fichiers/2015/48/1448817539-ban-alex-by-death.jpg" alt=""></br>
   Thanks Deathfire</br>
   <br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986833-banniere-blood-lad-2.jpg" alt=""></br>
   <br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986835-banniere-lol-petite.jpg" alt=""></br>
   <br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986833-banniere-not-a-sound-in-my-world.jpg" alt=""></br>
   </div>


   <div class="contenu_onglet" id="contenu_onglet_2eme" align="center">
   Films</br>
   <img src="http://nsa33.casimages.com/img/2014/10/19/141019055939354998.gif" alt="Star Wars Fan"></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986456-harry-potter-fan.gif" alt=""></br>
   <img src="http://nsa33.casimages.com/img/2014/10/19/141019121613237320.gif" alt="Slytherin House"></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986453-lord-of-the-rings-fan.gif" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986455-the-hobbit-fan.gif" alt=""></br>
   Séries</br>
   <img src="http://image.noelshack.com/fichiers/2015/38/1442273443-dominion-fan.jpg" alt="Dominion Fan"></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986445-avatar-the-last-airbender-fan.jpg" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986446-legend-of-korra-fan.jpg" alt=""></br>
   Jeux vidéos</br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986466-suikoden-ii-fan.jpg" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986466-suikoden-iii-fan.jpg" alt=""></br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986466-suikoden-v-fan.jpg" alt=""></br>
   Divers</br>
   <img src="http://image.noelshack.com/fichiers/2015/49/1448986437-iot-fan.gif" alt="IOT Fan"></br>
   <img src="http://nsa34.casimages.com/img/2014/10/19/141019060815674490.jpg" alt="Sora's Twin"></br>
   </div>


   <div class="contenu_onglet" id="contenu_onglet_3eme">
   <div class="presentation">
   <div class="prez-image2"><img src="http://image.noelshack.com/fichiers/2015/49/1449015234-logo-2.png" alt=""></div>
   <div class="prez-titre">La IOT</div>
   <div class="prez-contenu">
   <div class="prez-overflow">
   La Imagination Overflow Team est une team d'AMVs et de graphisme créé le 5 mai 2013 par KazeShin, Umi et Keintseru. Elle comprend actuellement 11 membres, 8 AMV-makers et 3 graphistes dont 2 codeurs.</br>
   <span class="button2"><a href="https://www.youtube.com/user/ImaginationTeamAmvs" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png';" /></a></span>
   <span class="button2"><a href="https://www.facebook.com/imaginationoverflowteam/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017825-facebook-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png';" /></a></span>
   </div>
   </div>
   </div>
   <table align="center">
   <tr>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448913337-avatarkeint.jpg" alt="avatar Keintseru" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u4" target="_blank">Profil</a> | <a href="https://www.youtube.com/channel/UCGXZ5HefgMwTYIFpfMMgilw" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448887502-avatarlachevrolait.jpg" alt="avatar Lachèvre" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u100" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Lachevrolait" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448886953-avatarama.jpg" alt="avatar Amariyo" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u98" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Amaryio" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448899809-avatarluubioo.jpg" alt="avatar LuubiOo" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u32" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/LuubiOo" target="_blank">Youtube</a></div>
   </div>
   </td>
   </tr>
   <tr>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448887405-avataretov2jpg.jpg" alt="avatar ETO" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u119" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/tehCruumby" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449055543-avatar-azazel.jpg" alt="avatar Azazel" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u58" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/ahmedjarid" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449055542-avata-soulness.jpg" alt="avatar SoulNess" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u31" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Soul2Ness" target="_blank">Youtube</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449054916-avatar-xeno.jpg" alt="avatar Xeno" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u30" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/02Lyric" target="_blank">Youtube</a></div>
   </div>
   </td>
   </tr>
   <tr>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/48/1448739391-avatarteam.jpg" alt="avatar Deathfire" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u117" target="_blank">Profil</a> | <a href="http://deathfireiot.deviantart.com/" target="_blank">Deviant</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448992301-avatar-alex-by-death.jpg" alt="avatar Alexielios" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u45" target="_blank">Profil</a> | <a href="http://alexielios.deviantart.com/" target="_blank">Deviant</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449054914-avatar-yu-kun.jpg" alt="avatar Yu-Kun" />
   <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u3" target="_blank">Profil</a> | <a href="http://yuu-graphique.deviantart.com/" target="_blank">Deviant</a></div>
   </div>
   </td>
   <td>
   <div class="infobulle">
   <img class="avatar" src="" alt="" />
   <div class="texte_infobulle"><a href="" target="_blank">Profil</a> | <a href="" target="_blank">Youtube</a></div>
   </div>
   </td>
   </tr>
   </table>
   </div>


   <div class="contenu_onglet" id="contenu_onglet_4eme">
   <div class="presentation">
   <div class="prez-image" style="background-image: url('http://image.noelshack.com/fichiers/2015/49/1448992301-avatar-alex-by-death.jpg')"></div>
   <div class="prez-titre">Présentation</div>
   <div class="prez-contenu">
   <div class="prez-overflow">
   <span class="prezname">Pseudo</span> : Alexielios (ou Alex')</br>
   <span class="prezname">Age</span> : 24 ans</br>
   <span class="prezname">Fonction</span> : Graphiste, codeuse, administratrice du forum et prof de français</br>
   <span class="prezname">Hobbies</span> : grapher, coder (un peu), traduire des fanfictions, jouer et composer de la musique, dessiner, coloriser et collectionner un paquet de trucs (souvent inutiles)</br>
   <span class="prezname">Autre</span> : N'hésitez pas à me contacter si vous avez un problème sur le forum ou simplement si vous avez besoin d'un coup de main dans mes domaines de compétence <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></br>
   </div>
   </div>
   </div>
   </div>
   </div>


<div class="links">
<table align="center" class="button_table">
   <tr>
   <td><span class="button"><a href="https://www.facebook.com/alexielios" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png" alt="facebook" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017825-facebook-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png';" /></a></span></td>
   <td><span class="button"><a href="http://alexielios.deviantart.com/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png" alt="deviantart" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010090-deviantart-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png';" /></a></span></td>
   <td><span class="button"><a href="http://alexielios.blogspot.fr/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449010092-blogger.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010090-blogger-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010092-blogger.png';" /></a></span></td>
   <td><span class="button"><a href="https://www.youtube.com/user/Alexielios" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png';" /></a></span></td>
   </tr>
   </table>
   </div>

Remarque : Comme pour le CSS, les indications entre

Code::

sont des commentaires pour aider à la lisibilité du code.

tuto - [Tuto codage] Rapide explication du code des signas codées 1450799608-13bis

Messages : 3377
Date d'inscription : 27/09/2013
Age : 32

Alexielios3377
27/09/2013
32