Tutoriel sur les balises HTML ( pour ajouter des logos de sites partenaires )
WARBIRDS, le plaisir de la maquette :: BIENVENUE sur HOBBY-MAQUETTES :: MODE D'EMPLOI "PASSAGE OBLIGATOIRE"
Page 1 sur 1 • Partagez
Tutoriel sur les balises HTML ( pour ajouter des logos de sites partenaires )
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 .
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="https://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 :[Vous devez être inscrit et connecté pour voir ce lien]
1 <a href="http://maquettequebec.forumperso.com/t1519-1941-chevrolet-panel-fini">
2 <img src="https://i.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="https://i.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
Re: Tutoriel sur les balises HTML ( pour ajouter des logos de sites partenaires )
JE COMPRENAIS PAS AVANT.....BEN LA ....JE COMPRENDS ENCORE MOINS
EN CAS DE QUESTION VOUS POUVEZ ENVOYER UN MP DIRECTEMENT
MERCI
Sujets similaires
» HTTP://DIORAMA-MILITAIRE-HO.OVER-BLOG.COM/ARTICLE-DIORAMAS-ALLEMANDS-SECONDE-GUERRE-MONDIALE-105813834.HTML
» CÔTE FRANCE
» SITES CANADIENS SCHOOTERS
» SITE POUR LES SIÉGES ÉJECTABLES POUR LE NOM ET LA PEINTURE DES SIÉGES/ PETITPANDA59
» POUR DAKOTA
» CÔTE FRANCE
» SITES CANADIENS SCHOOTERS
» SITE POUR LES SIÉGES ÉJECTABLES POUR LE NOM ET LA PEINTURE DES SIÉGES/ PETITPANDA59
» POUR DAKOTA
WARBIRDS, le plaisir de la maquette :: BIENVENUE sur HOBBY-MAQUETTES :: MODE D'EMPLOI "PASSAGE OBLIGATOIRE"
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|