informatique - Le Blog de Patrice

18 novembre 2006 6 18 /11 /novembre /2006 14:37

Liens et images en HTML

Et voilà un petit article pour étoffer ma rubrique informatique.

1. IMAGES

Première chose indispensable pour un site web : mettre des images !

Pour cela c'est tout simple, il faut utiliser la balise <img> Pour indiquer quelle image vous voulez insérer il faut utiliser l'attribut src (source) avec le chemin d'accès à votre image (elle doit être sur un serveur web et pas sur votre machine à vous).

Par exemple :

<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" />

Ce code va afficher dans un navigateur web :

Vous pouvez rajouter l'attribut alt qui permet de mettre un texte alternatif qui s'affichera à la place de l'image s'il y a un problème pour afficher celle-ci et qui apparaîtra en message bulle quand vous placer votre souris quelques secondes sur l'image.

Pour le code cela donne :

<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" alt="Photos de voyages" />

Et pour l'affichage dans le navigateur :

Photos de voyages

Placer votre souris quelques secondes sur la première image... rien de se passe. Faites la même chose sur la deuxième et vous verrez le texte apparaître en info bulle.

Même si ces infos suffisent, on peut préciser les dimensions de l'image par sa longeur (width) et sa largeur (height). Le code complet est donc :

<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" alt="Photos de voyages" width="468" height="60" />

2. LIENS

Autre tag à connaître absolument, le tag <a></a> qui permet de mettre des liens vers une page d'un même site ou vers une page d'un autre site. L'adresse du lien doit être mis dans l'attribut href. On peut faire le lien sur un texte, c'est donc ce texte qui doit être mis entre la balise d'ouverture <a> et la balis de fermeture </a>

Exemple :

<a href="http://pg92.free.fr">Lien vers le site 'Photos de voyages'</a>

Cela donnera à l'affichage :

Lien vers le site 'Photos de voyages'

Comme vous pouvez le remarquer, la nouvelle page s'affiche dans le même navigateur internet, vous perdez donc l'endroit d'où vous venez. Ca peut être utile quand on passe d'une page à l'autre sur un même site (on ne va pas ouvrir un nouveau navigateur à chaque fois qu'on passe d'une page à une autre !) Par contre si on fait un lien vers un autre site on préfère en général garder la page actuel. On lui précise alors la cible (target en anglais) avec target="_blank" ce qui pourrait se traduire par 'la cible est une nouvelle page blanche'.

Pour le code cela donne :

<a href="http://pg92.free.fr" target ="_blank">Lien vers le site 'Photos de voyages'</a>

Et à l'affichage :

Lien vers le site 'Photos de voyages'

3. IMAGE-LIEN

Et maintenant, le top du top, faire un lien avec une image !

C'est tout simple une fois que l'on a compris les deux points précédents, il suffit de remplacer le texte entre les balises lien par le code de l'image. Pour éviter d'avoir un cadre autour de l'image lie on peut rajouter border="0" dans le tag de l'image. Cela donne :

Et à l'affichage on retrouve la bannière standard faisant un lien vers un site web :

Partager cet article

Repost0

Patrice - dans Informatique
commenter cet article …

9 août 2005 2 09 /08 /août /2005 23:00

La terre vue du ciel

Vous voulez voir la terre telle que peuvent la voir les astronautes ? Google met gratuitement à la disposition du publique une cartographie du globe terrestre faite par les satellites ! Pour cela il faut télécharger le logiciel Google Earth sur le site http://earth.google.com/

Le logiciel est en anglais mais assez facile d'utilisation. Certaines zones du globe sont vraiment détaillées, en particulier les grandes villes où on peut même distinguer les voitures !

D'autres parties sont seulement visibles en plan large. Ce logiciel fait déjà parler de lui puisque l'Australie a demandé à Google de masquer les centrales nucléaires sur son logiciel. C'est déjà le cas pour la maison blanche à Washington !
Regardez sur cette vue plus large en dessous, on voit des bandes de couleur différente : ce sont des zones détaillées où on peut descendre à un niveau de précision de 2500 pieds (760 mètres d'altitude !) :

Par exemple là ce n'est pas le Mont-St-Michel vu d'avion mais bien vu d'un satellite !

En tout cas je trouve ce logiciel fantastique et je n'ai pas fini de me balader autour du monde.

Bon voyage !

Partager cet article

Repost0

Patrice - dans Informatique
commenter cet article …

21 juin 2005 2 21 /06 /juin /2005 23:00

Une page HTML

Bon, je sais qu'il y a plein de sites vulgarisant l'informatique et internet et qu'en cherchant bien on trouve tout ce qu'on veut, mais comme ma rubrique informatique est un peu vide et que je connais certaines personnes qui galèrent avec le html voici quelques éléments de bases que je complèterai au fur et à mesure.

D'abord le minimum, pour être affichée dans un navigateur une page html doit être enregistrée sous le format .html ou .htm, par exemple mapage.html ou mapage.htm Avec un simple éditeur de texte comme notepad (bloc-notes) on peut modifier cette page et y mettre les éléments indispensables :

<html>
<head>
<title> Le titre </title>
</head>
<body>
Contenu de la page
</body>
</html>

Vous pouvez enregistrer ce code dans un fichier mapage.html puis double-cliquer sur ce fichier pour le voir s'afficher dans votre navigateur.
Les éléments entre < et > sont appelés des balises, on ne peut pas les inventer, elles consituent le langage HTML. La barre / permet de distinguer les balises d'ouverture des balises de fermeture. Pour ceux qui ont un minimum de notions d'anglais il devient facile de constater que les balises <title> et </title> permettent de définir le titre de la page ! <title> est donc la balise d'ouverture du titre et </title> la balise de fermeture. Entre les 2 le texte consitue le titre de votre page.
Autre balise très employée la balise qui permet d'aller à la ligne (cette balise peut s'utiliser sans balise de fermeture ou directement comme cela : )
En effet si on écrit :

<html>
<head>
<title> Le titre </title>
</head>
<body>
Contenu de la page
sur une seule ligne !
</body>
</html>

le texte "Contenu de la page sur une seule ligne !" sera affiché sur une seule ligne dans le navigateur même si vous avez sauté une ligne en l'écrivant. Par contre si on écrit :

<html>
<head>
<title> Le titre </title>
</head>
<body> Contenu de la page 
sur deux lignes !
</body>
</html>

le texte affiché sera :
Contenu de la page
sur deux lignes !
Car le navigateur a rencontré la balise qui lui dit d'aller à la ligne.
Beaucoup d'autres balises de mise en forme du texte existent comme par exemple la balise qui permet de mettre en gras du texte : Mon texte en gras donne Mon texte en gras
La balise <center> permet de centrer votre texte au milieu de la page. A bien noter qu'à part pour la balise de saut de ligne il faut bien penser à "refermer" chaque balise avec la barre /.

Voilà pour le moment quelques éléments pour s'amuser un peu avec vos pages html.

Partager cet article

Repost0

Patrice - dans Informatique
commenter cet article …

10 janvier 2005 1 10 /01 /janvier /2005 00:00

Option target sous Citrix

Puisque google référence pas trop mal les articles des blogs j'inaugure une nouvelle rubrique "informatique" avec des petits trucs, astuces ou problèmes relevés au cours de mes développements.

Pour commencer une curiosité sous environnemenbt Metaframe Citrix : normelement il est possible lorsque l'on ouvre une nouvelle fenêtre par exemple de nommer cette fenêtre au moyen de la propriété "target" par exemple

<a href="http://pg92.free.fr" target="Popup">Site de photos de voyages</a>

Ainsi si on veut envoyer un nouveau lien (une image par exemple) dans cette même fenêtre il suffit d'utiliser le même nom de target et le lien s'ouvrira dans la fenêtre déjà ouverte.

Et bien sous environnement Citrix cela ne marche pas ! Même si vous nommez correctement vos target à chaque fois une nouvelle fenêtre est ouverte... Je n'ai pas trouvé la raison exacte ni le moyen d'y remédier mais cela peut expliquer des comportements bizarres sur vos applications ;-)

Partager cet article

Repost0

Patrice G - dans Informatique
commenter cet article …

Liens et images en HTML

La terre vue du ciel

Une page HTML

Option target sous Citrix

Présentation

Recherche Dans Le Blog

Recherche

Derniers Articles

CatÉGories

Liens

Liens et images en HTML

La terre vue du ciel

Une page HTML

Option target sous Citrix

Présentation

Recherche Dans Le Blog

Recherche

Derniers Articles

CatÉGories

S'abonner

Liens