A tous les intéressés de près ou de loin par le développement ou la création de site Web, voici un petit exercice pour vous initier aux Bases des langages HTML et CSS.

Avec deja des connaissances sur ces 2 langages de programmation et un peu de créativité, on peut créer une inifinité de choses!

 

Attention Vous aurez besoin d’un PC pour réaliser les exercices à la fin de ce cours.

 

Le HTML, c’est quoi?

 

Pour qu’une page Web affiche ce que l’on veut, il faut y intégrer du contenu: des mots, des boutons, des formulaires, des liens, etc…

En un mot, il faut de la STRUCTURE. Et bien, la structure, c’est le rôle du HTML.

En effet, en écrivant du code html, vous allez créer les éléments de votre page.

Nous nous amuserons tout à l’heure à créer un formulaire de contact pour illustrer.

 

1. Mais que veut-on dire par “les éléments” d’une page?

 

Les éléments d’une page, ce sont ses composants. En HTML, on appelle cela des balises.

Et ces composants sont tous imbriqués les uns dans les autres.

Pour pouvoir les imbriquer les uns dans les autres, il faut définir un début et une fin pour chaque balise.

Schématisons:

Disons que nous avons une page, à l’intérieur de laquelle il y’ a un titre, une phrase et une image. On aurait 4 balises imbriquées ainsi:

<page>

<Gros_titre> Titre de la page </gros_titre>

<phrase> Phrase que l’on veut afficher </phrase>

<image>  Adresse de l’image que l’on veut afficher </image>

</page>

 

Sur cet exemple, vous comprenez que la balise d’ouverture d’un élément s’écrit <element>, et la balise de fermeture (ou de fin) s’écrit </element>.

 

On peut imbriquer des éléments à l’infini:

 

<page>

      <Gros_titre> Mon premier site internet </gros_titre>

      <phrase> Phrase que l’on veut afficher avec <lien> un lien </lien> à l’intérieur</phrase>

<image>  Adresse de l’image que l’on veut afficher </image>

</page>

 

Bien évidemment, ce serait beaucoup trop simple s’il suffisait d’écrire  cela comme ça!

En réalité, les balises “page”, “phrase”, “lien” “image”, “Gros_titre” n’existent pas!

 

“Whaaaat?”

 

Et oui, les balises sont déjà toutes créées et elles ont des noms bien spécifique, basées sur l’anglais. Si vous détestez l’anglais, sachez que pour coder, vous allez l’apprendre même sans le vouloir!

Ainsi:

 

Particularité de la balise <img/>

 

Vous avez peut-être cru à une erreur de frappe, mais non! La balise image est la seule qui n’est pas double. La balise reste ouverte et est refermée à la fin par /> . Le détail concernant l’adresse de l’image va s’indiquer à l’intérieur grâce à des attributs. Nous verrons plus tard de quoi il s’agit.

Pour l’instant, réécrivons correctement notre code:

 

<body>

<h1> Mon premier site internet </h1>

<p> Phrase que l’on veut afficher avec <a> un lien </a> à l’intérieur </p>

<img  https://adressedelimage.com />

</body>

 

2. Les attributs… des élements

 

Un élément peut avoir plusieurs attributs, c’est à dire plusieurs caractéristiques. Pour certains, ils sont même obligatoires.

Ainsi, on peut donner à un élément un attribut “nom” ou “source”, puis indiquer la valeur de cet attribut.

Au même titre que les balises, les attributs que l’on peut indiquer existent déjà, on ne peut pas les nommer soi-même.

 

L’attribut “nom” n’existe donc pas, c’est l’attribut “id” qui permet de nommer un objet. Pour la source, on utilise l’attribut “src”.

 

L’attribut doit toujours être placé à l’intérieur de la balise d’ouverture.

 

Voyons ceci avec un exemple:

<body id=”accueil”>

<h1 id=”title_1″> Mon premier site internet </h1>

<p class=”style_de_paragraphe_1″> Phrase que l’on veut afficher avec <a href=”http://votrelien.com”> Texte du lien </a> à l’intérieur </p>

<img  src=”https://adressedelimage.com” alt=”Description de l’image” />

</body>

 

Ceci peut s’interpréter de la sorte:

 

L’attribut class=””, dont nous n’avons pas encore parlé, consiste à dire au navigateur que l’élément fait partie d’un groupe d’objets. Plusieurs élements peuvent donc appartenir à la même classe.

Ainsi, on pourra appliquer plus tard des styles (couleurs, taille, etc…) à plusieurs objets en même temps s’ils appartiennent tous à la classe “style_de_paragraphe_1”.

 

En revanche, l’id est unique, c’est comme  l’adn d’un élement, ou son identité! Il ne peut pas y avoir deux “id=title_1” dans la même page, sinon cela constitue une erreur de code.

 

Comme vous l’aurez remarqué, il n’y a jamais d’espace dans les attributs. Les espaces peuvent être remplacés par des _ ou des – généralement.

 

3. Autre précisions

 

L’introduction étant faite, notez sans vous poser trop de question pour le moment qu’à la création d’une page web, vous devrez systématiquement insérer à minima les balises suivantes:

 

<!doctype html>
<html lang=”fr”>
<head><title>Titre de la page</title>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”style.css”>
</head>            <body><!– Votre contenu qui s’affichera à l’écran –>      </body>

</html>

 

Il s’agit des informations de base du document.

La balise <!doctype html> doit être affichée avant tout code dans vos pages html. Elle ne se referme pas.

La balise <html> indique que le code situé à l’intérieur est en language HTML.

La balise <head> contient les informations de la page Web, comme le titre qui s’affiche dans le navigateur, le type d’alphabet utilisé et la feuille de style associée au document.

 

Tout ce que vous voulez voir affiché sur la page doit être écrit entre les balises <body> </body>.

 

Petit exercice pratique

 

Pour tester ce que vous avez appris dans ce cours, je vous propose de créer votre première page Web!

 

Commencez par créer dans le dossier de votre choix sous Windows un fichier texte que vous nommerez par exemple “Mon premier site.”.

 

Une fois créé, collez-y le texte de base indiqué en 3.

 

Ensuite, entre les balises <body> </body>, créez votre tout premier contenu:

Sauvegardez le fichier et renommez le Mon premier site.html.

 

Si vous avez réussi l’exercice, vous devriez obtenir quelque chose comme ceci:

 

Félicitations, vous avez créé votre première page Web!

 

[caldera_form id=”CF5e9d61632b2f5″]

Leave a Reply