des centaines d'astuces pour vous faciliter le quotidien

INSERTION D' IMAGES ET DE LIGNES EN HTML

INSERTION D' IMAGES ET DE LIGNES EN HTML

 

                     

 

 

 

INSERTION D' IMAGES ET DE LIGNES EN HTML

 

 

 : Trace une ligne horizontale. Cette balise n'a pas de balise fermante
Ex :

Résultat :

width="..." : Cette propriété donne une largeur à la ligne
La valeur peut-être exprimé en pixels ou en pourcentage de la largeur disponible 
Ex :




Résultat :



align="..." : Cet attribut aligne horizontalement la ligne.
Les valeurs possibles sont : center (valeur par défaut), left, right. Attention pour voir l'effet, il faut bien sur que la ligne n'occupe pas toute la largeur disponible !
Ex :








 
Résultat :





noshade : Cet attribut rend la ligne pleine, vous ne voyez plus d'ombrage.
Aucune valeur n'est affectée à cet attribut.
Ex :

Résultat :

size="..." : Affecte l'épaisseur de la ligne
La valeur est exprimée en pixels.
Ex :

Résultat :

ligne verticale : Par astuce, il est possible de tracer une ligne verticale avec la balise "hr", et ce en réduisant "width" (la largeur) à quelques points et en donnant à l'attribut "size" (hauteur dans ce cas) une valeur assez élevée selon les besoin .
Ex :

Résultat :

Compatibilité : IE Firefox
 : Insertion d'image.
Cette balise est toujours associée à l'attribut src="..." (source de l'image : adresse de l'image qui peut aussi être à l'extérieur du site).
La balise d'insertion d'image s'emploi sans balise fermante !
NB : Remarquez que l'image est issue d'un sous-répertoire, prenez cette habitude de ranger vosimages dans un répertoire dédié aux images, cela décharge considérablement votre répertoire principal qui deviendrait vite surchargé !
Ex :
Résultat :
align="..." : Cet attribut aligne l'image par rapport à la ligne de texte courante.
Les valeurs possibles sont :
  • absbottom : Aligne le bas du texte et le bas de l'image.
  • absmiddle : Aligne le milieu du texte et le milieu de l'image.
  • baseline : Aligne le milieu du texte et le milieu de l'image.
  • bottom : Aligne le bas du texte et le bas de l'image (valeur par défaut).
  • middle : Aligne le bas du texte et le milieu de l'image.
  • texttop : Aligne le haut du texte et le haut de l'image.
  • top : Aligne le haut du texte et le haut de l'image.
Ex :
Texte de référence
Résultat :
Text de référence
Ex :
Texte de référence
Résultat :
Text de référence
Ex :
Texte de référence
Résultat :
Text de référence
Ex :
Texte de référence
Résultat :
Text de référence
Ex :
Texte de référence
Résultat :
Text de référence
Ex :
Texte de référence
Résultat :
Text de référence
Ex :
Texte de référence
Résultat :
Text de référence
alt="..." : Cet attribut n'a pas d'utilité d'affichage. Néanmoins, il est fortement recommandé que vous l'utilisiez. En effet, les moteurs de recherche, comme Google, ne savent pas analyser le contenu des images, la  solution est donc d'utiliser cette balise pour décrire l'image. Un commentaire d'image bien adapté, nourri en contenu les moteurs et améliore ainsi le référencement de votre page.
Ex :
Petite terre
Résultat :
Petite terre
border="..." : Ajoute un bord autour de l'image.
Les valeurs sont exprimée en pixels.
Lorsque vous ne souhaitez pas avoir de bord, il est bon d'ajouter border="0"
Ex :
Résultat :
hspace="..." : Cet attribut forcent un espace à gauche et droite de l'image.
Les valeurs sont exprimée en pixels.
Ex :
Texte gaucheText droit
Résultat :
Texte gaucheText droit
title="..." : Si vous avez placé cet attribut avec une description de l'image, vous verrez aparaître le contenu de la description lorsque vous passerez la souris sur l'image. Il semble que Google en tienne compte de la présence de cet attribut pour le calcul du PageRank de votre page.
Ex :
Résultat :
vspace="..." : Cet attribut forcent un espace au-dessus et en-dessous de l'image.
Les valeurs sont exprimée en pixels.
Ex :
Texte supérieur



Text inférieur
Résultat :
Texte supérieur

Text inférieur
width="..." et height="..." : Ces 2 attributs forcent l'image en largeur et hauteur.
Les valeurs sont exprimée en pixels.
Ces attributs sont fortement conseillés (et surtout dans le cas des images de grandes dimensions) afin que le navigateur réserve la surface de l'image avant que celle-ci ne soit chargée.
Lorsque ces 2 attribut sont absents, le navigateur attend d'avoir chargé les images pour en connaître les 2 dimensions, qu'il affecte ensuite aux images respectives.
Ex :
Résultat :
Vous pouvez donner d'autres valeurs (plus petites ou plus grandes) de largeur et de hauteur.
L'image sera ainsi forcée aux dimensions que vous aurez imposées.
Ex :
Résultat :
Compatibilité : IE Firefox
Astuces  d'utilisation :
2 méthode pour tracer une ligne colorée horizontale ou verticale :
Il faut au préalable créer 2 images
  • Une image de 1 pt sur 1 pt, par exemple rouge (qui est ici volontairement grossie) : 
  • Une image de 8 pt de haut sur 1 pt de large, par exemple rouge et jaune (qui est ici volontairement grossie) : 

  • Regardez le code et voyez le résultat ! C'est plus joli qu'avec la balise "hr" ?
Ex :


Résultat :




Compatibilité : IE Firefox

 

 

 

 

Rechercher dans le site

Contact

MAC ASTUCE1

ASTUCES INFORMATIQUE WINDOWS

17/03/2016 19:06

Bon plan, les meilleurs sites et applications pour mini budget

  Vous êtes un radin ou simplement n’aimez pas dépenser un sou !   Ne vous inquiétez pas vous n'êtes pas le seul, des applications et sites Web sont spécialement dédiés à ceux qui traquent  les bonnes affaires. Radins.com    accompagne les...

TOUTS SAVOIR SUR LES DRONES

13/03/2015 10:55

Le drone DJI capture l'image d'un objet volant non identifié

Le drone DJI aurait  filmé un objet volant non identifié au-dessus de la Silicon Valley. La vidéo fait grand bruit sur Internet et suscite les hypothèses les plus variées.  La vidéo a été mise en ligne le 8 mars. Les images auraient été tournées par un drone DJI...
08/03/2015 12:58

Le drone DJI S1000+ hexacopter photo pro

Le DJI S1000+ hexacopter est un drone prêt à voler et à capturer le summum de la photographie aérienne.   Si vous cherchez un drone professionnel pour des inspections, agricole de précision, la photographie, la cinématographie, l'arpentage et plus, le S-1000 est le...

 

BEAUTÉ A PETIT PRIX

03/12/2012 22:56

Comment prendre un bain adoucissant

    Quand on veut prendre un bain adoucissant, on peut se préparer le mélange maison soi-même et en plus il est naturel.   Il faut mélanger une demi-tasse de miel avec deux grosses cuillères d’essence de lavande et rajouter le tout dans...
 

  PARTENAIRE