Apprendre la programmation HTML et CSS #4 Images et liens hypertexte

Aujourd’hui dans cette quatrième partie de cette formation pour apprendre le HTML et le CSS de base, nous allons voir les deux principales balises qui se retrouvera partout dans notre code HTML.

Je vous parle bien entendu des balises permettant d’ajouter des images et les balises permettant d’ajouter des liens hypertexte (des liens cliquable).

En fais, après ceci, vous aurez pas mal vu la majorité des balises de contenu de base pour y ajouter du contenu HTML, cela veut donc dire qu’après ce cours, nous commencerons déjà le pas dans le CSS.

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Les images

Parlons en premier lieu des images. Avant-même de toucher au code, connaissez-vous vos types d’images? Cela est important de les connaitre et les démêler pour les ajouter.

Voici les trois principaux types d’images que vous allez retrouver lors de la création de sites web:

JPEG

Le JPEG (.jpg) est un format d’images numérique créer en 1992 (dont la dernière version date de 1994, c’est donc très vieux).

Il est recommandé d’utiliser les fichiers JPEG pour les images de type paysage ou photographiés (pas d’illustrations). Il permet avec ces images d’afficher plus clair des fichiers avec moins de résolution

PNG

Le PNG (.png) est un format d’images graphiques portatif créer en 1996. Il est recommandé d’utiliser des illustration, il tolère la transparence et est très répandue.

WebP

Le WebP est un format d’images matricielle développé par Google lui-même en 2010. Il a tous les avantages pour le web:

• Léger (3x plus léger pour même qualité que le PNG ou JPEG)
• Tolère la transparence
• Utilisé pour les graphiques ET les images numériques
• Google le pousse avec des recommandation d’augmentation de vitesse avec sont testeur de vitesse de sites web.

Maintenant, comment nous faisons pour ajouter une image concrétement en HTML?

Voici le code:

<img alt="DESCRIPTION DE L'IMAGE" src="CHEMIN" />

Décomposition des attributs:

• Alt: Texte alternatif, permettant de décrypter l’image pour tout ce qui n’est pas humain (bref, les moteurs de recherche etc)
• src: Source, endroit, chemin permettant d’aller chercher l’emplacement de l’image.

Vous pouvez aller chercher la source de votre image de plusieurs façon:

Depuis une URL web:

Par exemple, j’upload une image sur Imgur. Voici son lien: Imgur – Test Informerick

Je fais un clique droit sur l’image et « Copier l’adresse de l’image ». Cela donnerais en code:

<img alt="Bannière Informerick" src="https://i.imgur.com/Gzgsa8M.jpeg" />

Depuis le même endroit:

Si vous avez une image dans le même endroit que le fichier HTML que vous vous situez. Vous pouvez écrire le nom de l’image et son extension (.png, .jpg, .webp)

<img alt="Logo d'informerick" src="logo.png" />

Depuis un chemin dans votre ordinateur:

Vous pouvez sélectionner et prendre une image dans votre ordinateur et faire « copier le chemin de destination » et le mettre dans votre source.

Comment ajouter des liens hypertexte en HTML

Ce qui est le cool est liens hypertexte, c’est que vous pouvez ajouter ce que vous voulez entre. Tant que vous l’englobez de la balise du lien, tout ce qui se trouvera entre, seras cliquable pour faire un lien hypertexte.

Voici le code pour ajouter un lien hypertexte:

<a href="MONSITE.COM"> (CONTENU) </a>

Attributs HTML de la balise:

href: référence hypertexte, liens qui vont s’ouvrir lors du clique.

Tout ce qui se trouvera entre les balise <a> et </a> seras cliquable.

Vous n’êtes pas obligé d’ajouter des liens, d’autres protocoles existent avec les liens hypertexte. Dans le href= » » vous pouvez y ajouter ceci:

• mailto:exemple@hotmail.com → Ouvrir un formulaire pour contacter ce courriel
• #ID → Se déplacer vers un élément de la page avec un certain ID
• (FICHIER).(Extension) → ex: monfichier.zip. → Fais télécharger un fichier
• fichier.html → Ouvrir une seconde page HTML (pour de la navigation entre pages)

FAQ

Ce tutoriel se trouve dans la catégorie: Programmation