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 :
- Les balises doubles : <mabalise>Mon texte</mabalise>
- 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 :
<html>
<head>
<title>Mon titre</title>
<meta http-equiv= »content-type » content= »text/html; charset=utf-8″>
</head>
<body>
Mon contenu
</body>
</html>
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 :
<p> un autre <strong>paragraphe</strong> de mon premier article<br/>
<p> mon premier article …</p>
avec un retour à la ligne</p>
…
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é.
