Tutoriel sur les balises HTML ( pour ajouter des logos de sites partenaires )

Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutoriel sur les balises HTML ( pour ajouter des logos de sites partenaires )

Message par Flottille12F le Mar 18 Oct - 14:33

RÉSERVÉ AUX MODÉRATEURS ET WEB MASTERS DE SITES PARTENAIRES



Bonjour à tous .

Voici un petit tuto que kalim m'a demandé pour faciliter la mise en place des logos sur les forums partenaires . Very Happy  Very Happy

Voyons à présent comment insérer une image dans une page web. On utilise une balise <img> : :


La balise <img> a deux attributs obligatoires, l’attribut src et l’attribut alt.

L’attribut src

src signifie « source ». On doit le renseigner avec l’URL de l’image qui indique où se trouve l’image sur le web. Il est en effet possible d’afficher dans une page web une image se trouvant sur un autre serveur que celui qui héberge cette page.

Dans ce cas, on doit renseigner l’attribut src avec une url absolue, alors qu’on peut le renseigner avec une URL relative si l’image est hébergée sur le même serveur que la page web qui fait appel à elle et que l’on est en train de coder.

L’attribut alt

alt signifie « texte alternatif ». On doit le renseigner avec un texte court décrivant l’image. Le texte alternatif est utile aux personnes malvoyantes ou non voyantes, qui utilisent des outils de lecture d’écran par synthèse vocale pour prendre connaissance du contenu des pages web. Ils donnent aussi des informations sur les images aux moteurs de recherche.

Les formats d’image sur le web

Concluons cette approche de la balise <img> par un récapitulatif des formats d’image utilisés sur le web (il s’agit des formats jpg, gif et png) et par une petite mise en garde : attention à ne pas utiliser d’images trop lourdes, car cela ralentit le temps de chargement des pages web dans le navigateur .

Comment faire un lien en HTML

Maintenant que nous savons insérer du texte et des images, que nous connaissons la différence entre une URL relative et une URL absolue, apprendre à faire des liens entre des pages web va être d’une très grande simplicité.

Pour, sur une portion de texte ou sur une image, faire un lien pointant vers une autre ressource sur le web, il suffit d’enserrer la portion de texte concernée ou la balise <img> appelant l’image concernée entre deux balises <a>, une balise ouvrante et une balise fermante, et renseigner l’attribut href de la balise <a> avec l’URL de la ressource vers laquelle on souhaite faire pointer le lien. Illustrons cela par deux exemples, celui d’un lien absolu sur un texte et celui d’un lien relatif sur une image :

   
1   (<a href="http://hobby-maquettes.forums-actifs.com/forum>
2   WARBIRDS ,le plaisir de maquetter...........
3   </a>)

lien absolu vers la page d’accueil de notre site adoré créé sur le texte « WARBIRDS ,le plaisir de maquetter........... ».
résultat :WARBIRDS ,le plaisir de maquetter...........


1   <a href="http://maquettequebec.forumperso.com/t1519-1941-chevrolet-panel-fini">
2   <img src="http://i97.servimg.com/u/f97/18/13/65/43/logo_m11.jpg" />
3   </a>

lien relatif à partir de la racine du site "maquettes du quebec" vers la page d’accueil du présent dossier. Le lien est placé sur l’image du logo de maquettes du quebec, appelée par un lien relatif à la page courante.

Quelques balises HTML en plus pour agrémenter vos pages .

Pour un défilement de droite à gauche:

Les balises pour un défilement de droite à gauche sont <marquee> </marquee>

Ce qui vous donne pour un texte: <marquee>VOTRE TEXTE</marquee>

Et pour une ou des images: <marquee>LIEN URL DE VOS IMAGES</marquee>

Exemple : <marquee><a href="http://maquettequebec.forumperso.com/t1519-1941-chevrolet-panel-fini"><img src="http://i97.servimg.com/u/f97/18/13/65/43/logo_m11.jpg" /></a> </marquee>


Pour un défilement de bas en haut:

Pour effectuer un défilement de bas en haut les balises sont les suivantes:
<marquee direction="up" scrollamount="2" height="200" width="350">  </marquee>


L'information direction="up" designe un defilement bas haut, pour faire un défilement haut bas il vous faudra mettre down à la place de up.


L'information scrollamount ="2" est la vitesse de défilement plus le chiffre sera élévé plus la vitesse sera rapide.


Les informations height et width sont la place que devra prendre le défilement dans votre page, height désigne la hauteur et width designe la largeur.


Pour un défilement texte:


<marquee direction="up" scrollamount="2" height="200" width="350">VOTRE TEXTE</marquee>


Pour un défilement d'images:


<marquee direction="up" scrollamount="2" height="200" width="350">LIENS DE VOS IMAGES</marquee>



Défilement de droite à gauche:


<marquee id="id1"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">VOTRE TEXTE ICI ou IMAGES</span></marquee>



Défilement de bas en haut:


<marquee id="id1"direction="up" scrollamount="2" height="200" width="350"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">LIENS DE VOS IMAGES</marquee>


Voilà vous avez tous les éléments pour mettre en place les logos des sites partenaires sur vos forums .

N'hésitez pas à me demander des conseils si vous avez des soucis .

@}++


Dernière édition par Flottille12F le Mer 19 Oct - 15:16, édité 2 fois
avatar
Flottille12F
Admin-Web
Admin-Web

MESSAGES : 970
DATE D'INSCRIPTION : 14/09/2015
AGE : 60
Gémeaux REGION REGION : Landivisiau - Finistère

http://www.giga-et-vous.fr/index.php

Revenir en haut Aller en bas

Re: Tutoriel sur les balises HTML ( pour ajouter des logos de sites partenaires )

Message par KALIM le Mar 18 Oct - 19:08

JE COMPRENAIS PAS AVANT.....BEN LA ....JE COMPRENDS ENCORE MOINS  Mad




EN CAS DE QUESTION VOUS POUVEZ ENVOYER UN MP DIRECTEMENT
MERCI
avatar
KALIM
Administrateur
Administrateur

MESSAGES : 5756
DATE D'INSCRIPTION : 13/09/2015
AGE : 60
Balance REGION REGION : PICARDIE-AISNE.ETREUX

http://stormomagazine.com/phpbb2/index.php

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum