[TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum.

Aller en bas

HTML [TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum.

Message par Azénor. le Ven 14 Déc 2018 - 0:52

Tuto pour faire un bloc pour faire un lien vers votre site, blog ou forum en saisissant le code du bouton de votre site.

Exemple :


tutoriel - [TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum. Faire-10


Dans un bloc "Faire un lien" :
tutoriel - [TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum. Faireu11


__________________________________________


A) Créer le code HTML pour votre bouton :

Code:
<a href="LIEN DE VOTRE SITE" target="_blank" title="TEXTE DE L'INFO BULLE"><img src="URL DE L'IMAGE" style="border:0px" alt="TITRE DE VOTRE SITE"></a>

Sans supprimez les guillemets, remplacez tout les textes en majuscules :

Remplacez LIEN DE VOTRE SITE par le lien de votre site.
Remplacez TEXTE DE L'INFO BULLE par le texte qui servira d'info bulle.
Remplacez URL DE L'IMAGE par l'URL de votre logo/bouton.
Remplacez TITRE DE VOTRE SITE par le titre d votre site.


Détails du code :
target="_blank" sert à ouvrir un lien dans un nouvel onglet.
title= sert à faire une info-bulle.
img src= sert à insérer une image.
style="border:0px" sert à faire une bordure autour de l'image, lorsqu'il y a marqué 0, c'et qu'il n'y a pas de bordure.
alt= sert aux moteurs de recherche, à afficher le texte au cas où il n'est pas possible d'afficher l'image et sert aussi aux personne malvoyantes qui naviguent sur internet.



B) Code HTML pour faire un lien vers votre forum, blog ou site :


Code:


<!-- DÉBUT DE FAIRE UN LIEN -->
<div style="left: 4px 20px 20px;"><div class="quotetitle">

<center>

    
       
CODE-BOUTON-1
&nbsp;  


</center>

<br/>

<FORM name="code"
      <div align="center">
<HTML>
    <style>
    .monLien {
        position: relative;
        float: left;
        left: 20px;
    }
    #imgLien {
        width: 80px;
     margin:10px;
    }
    textarea{
        padding:7px 5px;
        height: 70px;
    }
    </style>

<body>
<FORM name="code">
       <TEXTAREA name="code" rows=5 cols=10 onclick=javascript:this.select();>
CODE-BOUTON-2

        </TEXTAREA>
</FORM>
</body>
</html>
      </FORM><p>
</DIV>
<!-- FIN DE FAIRE UN LIEN -->

Explications :

- Remplacez CODE-BOUTON-1 et CODE-BOUTON-2 par le code HTML de votre bouton.
- CODE-BOUTON-1 est l'affichage de votre bouton visible faisant un lien vers votre site.
- CODE-BOUTON-2 est l'affichage du code que les internautes pourront cliquez dessus, ça sélectionnera automatiquement le code. TEXTAREA est une balise servant à mettre le code HTML dans un bloc pour sélectionner, copier et faire un lien.


Ces codes sont des sortes de marqueurs, ils sont invisibles et permettent d se repérer plus facilement dans ces templates et codages :
Code:
<!-- DÉBUT DE FAIRE UN LIEN -->
<!-- FIN DE FAIRE UN LIEN -->

<!-- DÉBUT DU BLOC -->
<!-- FIN DU BLOC -->



Élargir la zone de saisie du code HTML :
Pour élargir la zone de saisie du code HTML, augmentez le chiffre de cols= dans la première ligne où il y a le début du 
code TEXTAREA, en remplaçant par exemple 10 par 120 :

Exemple :
Code:
<TEXTAREA name="code" rows=5 cols=120 onclick=javascript:this.select();>



tutoriel - [TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum. Faireu10


C) Mettre dans un bloc "Faire un lien" :

tutoriel - [TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum. Faireu11

Au dessus de votre code HTML, mettez ce code HTML :
Code:

<!-- DÉBUT DU BLOC -->
<table width="100%" cellspacing="0" border="0" align="center" cellpadding="1">
  <tr>
    <td align="left">
      <span class="gensmall"><a href="{}" class="gensmall">{}</a></span>
    </td>
    <td align="right">
      <span class="gensmall">{}</span>
    </td>
  </tr>
</table>
<table width="100%" cellpadding="1" cellspacing="1" border="0" class="forumline">
  <tr>
    <td class="catHead" colspan="2" height="10">
      <span class="cattitle"><center><font color = "#000000">Faire un lien :</font></center></span>
    </td>
  </tr>
  <tr>
    <td class="row1" align="left" width="100%">
      <span class="gensmall">

<center> <br/>


Si vous voulez, vous pouvez remplacez le code couleur 000000 et le titre du bloc :
Code:
<font color = "#000000">Faire un lien :</font>


Mettez ce code HTML en dessous de votre code :
Code:

<br/></center>

      </span>
    </td>
  </tr>
</table>
<table width="60%" cellpadding="1" cellspacing="1" border="0">
  <tr>
  <td align="left" valign="top">
    <span class="gensmall">{}</span>
  </td>
</tr>
</table>
<!-- FIN DU BLOC -->




...#html #tutoriel #bloc


Dernière édition par Azénor. le Dim 17 Fév 2019 - 13:31, édité 3 fois


Clic Animaux
Recherche d'échanges de partenariat pour ces 2 annuaires :
Partenariat avec Féline Pub      Demander partenariat avec l'annuaire An'Coeur
Azénor.
Azénor.
Admin

Sexe : Féminin
Titre site Titre site : Féline Pub et annuaire internet : annuaireducoeur.com
Inscription Inscription : 12/09/2018
Messages Messages : 316
Nombre de points Nombre de points : 6965
Age Age : 35

Voir le profil de l'utilisateur http://www.annuaireducoeur.com/

Revenir en haut Aller en bas

HTML Re: [TUTO] Tutoriel pour faire un bloc HTML pour Faire un lien sur votre site ou forum.

Message par Azénor. le Ven 14 Déc 2018 - 1:41

Exemple de code de bloc "Nous lier" pour Féline Pub :
Code:

<!-- DÉBUT DE MENU NOUS LIER -->
<table width="100%" cellspacing="0" border="0" align="center" cellpadding="1">
  <tr>
    <td align="left">
      <span class="gensmall"><a href="{}" class="gensmall">{}</a></span>
    </td>
    <td align="right">
      <span class="gensmall">{}</span>
    </td>
  </tr>
</table>
<table width="100%" cellpadding="1" cellspacing="1" border="0" class="forumline">
  <tr>
    <td class="catHead" colspan="2" height="10">
      <span class="cattitle"><center><font color = "#000000">Faire un lien :</font></center></span>
    </td>
  </tr>
  <tr>
    <td class="row1" align="left" width="100%">
      <span class="gensmall">

<center> <br/>

<!-- DEBUT DE MENU SPOILER POUR AFFICHER LE CODE DU BOUTON -->
<div style="left: 4px 20px 20px;"><div class="quotetitle">

<center>

   
      
<a href="https://www.felinepub.com/" target="_blank" title="FÉLINE PUB : Forum de pub - Annuaire de sites, youtube... E-mails de masse - Tutos graphisme codage - Kits graphiques"><img src="http://img.xooimage.com/files110/3/e/e/bouton-feline-pub-nouveau-551bb9a.png" style="border:0px" alt="Féline Pub, forum de pub"></a>
&nbsp; 


</center>

<br/>

<FORM name="code"
      <div align="center">
<HTML>
    <style>
    .monLien {
        position: relative;
        float: left;
        left: 20px;
    }
    #imgLien {
        width: 80px;
    margin:10px;
    }
    textarea{
        padding:7px 5px;
        height: 70px;
    }
    </style>

<body>
<FORM name="code">
      <TEXTAREA name="code" rows=5 cols=120 onclick=javascript:this.select();>
<a href="https://www.felinepub.com/" target="_blank" title="FÉLINE PUB : Forum de pub - Annuaire de sites, youtube... E-mails de masse - Tutos graphisme codage - Kits graphiques"><img src="http://img.xooimage.com/files110/3/e/e/bouton-feline-pub-nouveau-551bb9a.png" style="border:0px" alt="Féline Pub, forum de pub"></a>
        </TEXTAREA>
</FORM>
</body>
</html>
      </FORM><p>
</DIV>
<!-- FIN DE MENU SPOILER POUR AFFICHER LE CODE DU BOUTON -->

<br/></center>

      </span>
    </td>
  </tr>
</table>
<table width="60%" cellpadding="1" cellspacing="1" border="0">
  <tr>
  <td align="left" valign="top">
    <span class="gensmall">{}</span>
  </td>
</tr>
</table>
<!-- FIN DE MENU NOUS LIER -->



Clic Animaux
Recherche d'échanges de partenariat pour ces 2 annuaires :
Partenariat avec Féline Pub      Demander partenariat avec l'annuaire An'Coeur
Azénor.
Azénor.
Admin

Sexe : Féminin
Titre site Titre site : Féline Pub et annuaire internet : annuaireducoeur.com
Inscription Inscription : 12/09/2018
Messages Messages : 316
Nombre de points Nombre de points : 6965
Age Age : 35

Voir le profil de l'utilisateur http://www.annuaireducoeur.com/

Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

Clic Animaux

Partenariat Footer

Affichez votre logo ici 88X31  Forum - Graphisme Tutoriels Photofiltre Studio Cours Suivis Corrigés
 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum