Médiaforma

All posts tagged height

Lorsqu’une ligne d’un tableau doit avoir une hauteur particulière, vous devez initialiser l’attribut height d’une de ses balises <td>. Ici par exemple, la hauteur de la première cellule de la première ligne est initialisée à 100px, ce qui fixe la hauteur de la première ligne à 100px.

Quant à la deuxième cellule de la deuxième ligne, sa hauteur est initialisée à 50px. La hauteur de la deuxième ligne est donc égale à 50px.

Supposons maintenant que vous vouliez fixer la hauteur de toutes les colonnes à 120 pixels. Il suffit pour cela de définir la propriété CSS height de la balise <td>. Insérez la balise <style> </style> entre les balises <head> et </head>, puis modifiez la propriété height de la balise <td>. Vous pouvez supprimer les attributs height des première et quatrième balises <td>, qui font doublons avec la redéfinition de la balise <td>.


Lorsque vous cliquez sur un lien, la page cible s’ouvre dans la même fenêtre. Pour l’afficher dans une fenêtre secondaire, il suffit d’affecter la valeur _blank à l’attribut target de ce lien. Enfin, pour l’afficher dans une fenêtre secondaire de taille bien précise, vous utiliserez la fonction JavaScript window.open(), associée à l’événement onclick de la balise <a>. Définissez l’adresse de la page cible dans le premier paramètre de la fonction, le nom de la fenêtre dans le deuxième paramètre et les dimensions de la fenêtre secondaire dans les paramètres height et width. Ici, la fenêtre secondaire pointe vers le moteur de recherche Bing. Elle a une largeur de 400 pixels et une hauteur de 600 pixels.

Voici le résultat :


Lorsqu’une page Web contient des images, il est très important de bien choisir leur format et leur taille pour minimiser leur poids et donc le temps nécessaire à leur affichage dans le navigateur. Si vous le souhaitez, il est possible de redimensionner une image en utilisant les attributs height et/ou width dans la balise <img>. Mais attention, si vous utilisez ce procédé pour redimensionner une image de grande taille, elle mettra autant de temps à se charger. En effet, le redimensionnement est effectué une fois l’image téléchargée.

Dans cet exemple :

  • La ligne 6 affiche l’image originale.
  • La ligne 7 redimensionne l’image en agissant sur sa hauteur. La largeur est ajustée en conséquence.
  • La ligne 8 redimensionne l’image en agissant sur sa largeur. La hauteur est ajustée en conséquence.
  • La ligne 9 modifie la hauteur et la largeur de l’image. Comme vous le voyez, l’image est déformée.