Html / Css

J’avais commencé à enrichir la catégorie Html/Css de ce site avec l’article « apprendre le langage Html (Les bases) ». Nous avons vu comment créer et structurer une page Html de base. Certes, vous n’irez pas bien loin avec cet unique article car les pages que vous pourrez créer seront pauvres en contenu. Je vais donc m’atteler à vous apprendre à insérer des images, à améliorer la mise en page, à créer des liens Internet …

Aujourd’hui, nous allons donc voir comment facilement créer un lien web sur votre page Html. Le lien peut être inséré sur du texte ou sur une image. Les deux supports seront abordés.

Quelle balise Html pour créer un lien ?

Pour créer un lien Html, il faut utiliser la balise <a>. Mais cette balise Html nécessite l’utilisation de plusieurs attributs. L’attribut principal est l’attribut « href ». Voici donc la structure de base d’un lien Internet :

<a href= »http://www.lesiteinternetcible.fr »>Mon ancre texte ou image</a>

Parmi les autres attributs possibles :

• Target : prend les valeurs « _blank », « _parent », « _self », « _top », cet attribut permet d’ouvrir le lien dans une nouvelle fenêtre, dans la même fenêtre …
• Title : pour indiquer le titre du lien cible
• Rel : peut prendre des valeurs comme follow ou nofollow qui indiquent aux moteurs de recherche de suivre le lien ou pas.
• Style : pour insérer du code CSS (par exemple, pour modifier la couleur du lien, ou le souligner …)
• …

Dans l’exemple suivant, j’ouvre le site web cible dans une nouvelle fenêtre et j’indique à Google de ne pas suivre le lien (en d’autre terme, que ne je sais pas si c’est un site de confiance) :

<a href= »lesiteinternetcible » target= »_blank » rel= »nofollow »>Mon ancre texte ou image</a>

Créer un lien texte

Si je veux créer un lien vers la page d’accueil de Wikipédia avec l’ancre texte « Encyclopédie libre », j’utiliserais le code suivant :

<a href= »http://fr.wikipedia.org » title= »Wikipedia » target= »_blank »> Encyclopédie libre </a>, Ce qui donne : Encyclopédie libre

Le lien texte est le plus simple à créer. Après quelques minutes d’exercice cela devient complètement naturel.

Créer un lien image

Créer un lien sur une image j’ai besoin de deux balises Html (contrairement au lien texte). D’abord la balise <a> pour le lien, et ensuite la balise <img> pour l’image. Cette dernière a besoin de l’attribut src pour indiquer l’adresse de notre image et de l’attribut width pour indiquer la largeur de l’image (en pixel).

Pour parler plus concrètement, voici un simple code Html pour afficher une image :

<img src= »http://www.tutotek.com/wp-content/uploads/2014/01/DSC_4518-695×460.jpg » width= »400″>

Voici mon image qui s’affiche :

Je vais ensuite « envelopper » ma balise <img> d’une balise <a> pour insérer un lien sur l’image :

<a href= »http://www.tutotek.com/gerer-la-temperature-de-couleur-sur-lightroom-4-1/ » target= »_blank »>
<img src= »http://www.tutotek.com/wp-content/uploads/2014/01/DSC_4518-695×460.jpg » width= »400″>
</a>

Et voici le résultat, on peut désormais cliquer sur l’image pour ouvrir le lien :

Vous savez désormais comment créer un lien vers un site Internet, il ne vous reste plus qu’à vous exercer et à tester les différentes possibilités. Avec le temps et l’habitude, cette action deviendra aussi simple que de taper un texte en français 😉

Si vous avez apprécié cet article, s’il vous a été utile, n’hésitez pas à le partager. Grâce à vous l’information circulera et d’autres personnes pourront bénéficier de ce tuto liens web.

Avant de vouloir apprendre à créer un site web, il faut maitriser la base, c’est-à-dire apprendre le langage html et les feuilles de style CSS. Dans ce tutoriel, nous allons apprendre à créer une page html. Un futur article traitera des feuilles de style CSS afin d’habiller vos pages et leur donner un style graphique. Pour l’heure, voyons comment créer une page web.

Contrairement à ce que beaucoup pensent, le langage Html (HyperText Markup Language) n’est pas un langage de programmation. Il s’agit d’un format de données qui permet de créer et des structurer des pages web. Vous n’aurez donc pas besoin de mathématiques pour apprendre l’Html. Un simple travail de mémoire vous permettra de mémoriser les balises html (du moins les plus importantes dans un premier temps) et d’apprendre le html. Certains éditeurs de texte et logiciels comme Adobe Dreamweaver vous facilitent la tache avec des systèmes de suggestion et de pages préconstruites.

Les balises Html

Pour commencer ce tuto html, nous allons définir ce qu’est une balise html. En effet, ce sont ces balises qui indiquent aux navigateurs comment interpréter un texte. Toutefois, certaines balises structurent la page en elle-même. Ces dernières sont indispensables à une page html.

Voila à quoi ressemble une balise html : <mabalise>

Il existe deux types de balises :

1. Les balises doubles : <mabalise>Mon texte</mabalise>
2. Les balises simples : <mabalise />

Pour prendre un exemple de balise simple, la balise <p>…</p> permet de définir un paragraphe. La balise <br /> est quant à elle une balise simple, elle permet de faire un retour à la ligne.

Pour poursuivre notre formation au langage Html, nous allons voir à quoi ressemble la structure d’une page Html.

La structure d’une page html

Continuons notre formation html. Nous allons maintenant voir les balises html de bases, celles que comporte tout document html. Voici à quoi ressemble le code d’une page html vierge :

Voyons maintenant en détail à quoi servent toutes ces balises de base :

• La balise DOCTYPE : Elle sert à déclarer le langage utilisé pour notre page web, ainsi le navigateur saura décrypter notre code Html de la bonne manière.
• La balise <html></html> : indique le début et la fin d’une page html.
• La balise <head></head> : indique le début et la fin de la zone d’en-tête
• La balise <body></body> : indique le début et la fin du contenu de la page html.

Bon, tout ça est encore flou, mais vous allez comprendre au fur et à mesure de notre cours html. Dans la balise <head></head> nous allons indiquer les informations qui concernent le navigateur, les moteurs de recherche, les éventuels fichiers (css, javascript …) à inclure dans notre page …

Mais concentrons nous sur la partie <body></body>. Car c’est là que nous allons créer le contenu de notre page.

Comment créer une page html ?

Pour construire une page Html, nous allons commencer par indiquer un titre. C’est la balise <h1></h1> qui définit le titre comme ce qui suit :

Nous allons intégrer notre texte sous forme de paragraphes :

Vous remarquerez que le mot « paragraphe » est inclus dans la balise <strong></strong>. Cette balise sert à mettre une chaine de caractères en gras. Vous notez également que dans cet exemple, deux balises sont imbriquées : <p><strong></strong></p>. Ce qui est possible en Html.

Nous allons ensuite insérer une image dans notre contenu :

Arrêtons-nous sur cette balise img. Vous aurez remarqué que cette balise contient des paramètres supplémentaires qui sont les paramètres src et alt. Le paramètre src permet d’indiquer l’emplacement de l’image que l’on souhaite insérer dans notre page html, tandis que le paramètre alt permet d’indiquer un texte de remplacement, qui s’affiche dans le cas où l’image est introuvable. Ce texte alternatif sert également à indiquer aux moteurs de recherche une description de l’image. D’autre balises comme la balise <a></a> acceptent des paramètres.

Voyons maintenant cette balise <a></a> justement, et modifions la couleur d’un bout de texte par la même occasion :

L’attribut href que nous avons associé à la balise <a></a> sert à définir l’adresse de destination du lien. La balise <font></font> sert quant à elle à modifier les paramètres de la police de caractères. Nous y avons associé l’attribut « color » pour modifier la couleur. D’autres paramètres comme face (choix de la police de caractère <font face= »arial »>) ou size (choix de la taille de caractères <font size= »5″>) existent.

L’extension d’un fichier html

Un fichier html doit être enregistré au format html. Exemple : ma-page.html

Grace à notre cours Html gratuit, vous avez maintenant les connaissances de bases pour créer une page Html. Sachez toutefois que le nombre de balises html est élevé, il vous faudra du temps pour tout mémoriser. Pour aller plus loin dans votre formation au langage Html, je vous invite à consulter cette page contenant une liste complète des balises html et de leur utilisé.