Une page WEB est constituée de deux éléments distincts: le code HTML pour la structure et la feuille CSS pour la présentation.

I/ Le HTML.

Le langage HTML (Hyper Text Markup Language) permet de créer des pages WEB. Il s'écrit avec des balises généralement par deux: la balise d'ouverture et la balise de fermeture.

Pour découvrir ce langage, nous allons utiliser le logiciel en ligne: jsfiddle que vous obtiendrez en cliquant sur l'image ci-dessous.

Commencez par observer celle-ci:

Vous allez lancer le logiciel en cliquant sur l'image ci-dessus. Celui-ci va s'ouvrir dans une seconde fenêtre. Vous allez copier-coller le code HTML ci-dessous dans la partie HTML, puis appuyer sur le bouton Run pour voir le résultat.

<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris?</p>

Comme vous pouvez le constater, ce qui se trouve entre les balises "h1" est affiché en grand et  ce qui se trouve entre les balises "strong" est affiché en gras (pour mettre en évidence). Le texte classique se trouve entre balise "p".

Vous pouvez également observer la syntaxe des balises. Pour la balise ouvrante nous avons la syntaxe : <balise> et la balise fermante, elle, elle contient un slash avant le nom de la balise </balise>.

Comme vous pouvez le constater sur la seconde ligne, lorsqu'une balise est ouverte à l'intérieur d'une autre, il faut la fermer avant de fermer la première balise. La structure autorisée est:

ouverture balise 1

ouverture balise 2

fermeture balise 2

fermeture balise 1

Nous allons découvrir d'autres balises à l'aide de l'exemple ci-dessous que vous allez comme précédemment copier-coller. Puis vous appuierez sur le bouton Run.

<h1>La balise h1 permet d'écrire des titres de niveau 1</h1>
<h3>On a 6 niveaux de titre, de h1(Le plus important) jusqu'à h6 (Le moins important)</h3>
<p>La balise p permet d'écrire des paragraphes</p>
<p>La balise strong permet de mettre en évidence un élément <strong>important</strong></p>
<p>La balise b permet de mettre en <b>gras</b></p>
<p>La balise i permet de mettre en <i>italique</i></p>
<p>Nous pouvons également créer des listes non ordonnées avec la balise ul, sachant que chaque élément devra être entre balise li, exemple:</p>
<ul>
<li>Fraise</li>
<li>Framboises</li>
<li>Cerise</li>
</ul>
<p>Nous pouvons également créer des listes ordonnées avec la balise ol, sachant que chaque élément devra être entre balise li, exemple:</p>
<ol>
<li>Je me lève</li>
<li>Je mange et je bois</li>
<li>Je retourne me coucher</li>
</ol> 

Il existe également les attributs: compléments d'informations d'une balise.

Copier-coller le code suivant, appuyez sur Run.

<h1>Ceci est un titre principal</h1>
<h2 class="titre_1">Ceci est un sous titre comportant l'attribut class</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong> comportant un attribut id. Avez-vous bien compris?</p>

Vous constatez que les attributs n'ont rien changé. Dans cet exemple, ce sont des repères qui peuvent servir pour la mise en page.

II/ Le CSS.

Le langage CSS (Cascading Style Sheets) permet de définir des feuilles de style, c'est à dire le style graphique d'une page WEB.

Nous allons reprendre le code HTML suivant que vous allez copier-coller dans la fenêtre HTML.

<h1>La balise h1 permet d'écrire des titres de niveau 1</h1>
<h3>On a 6 niveaux de titre, de h1(Le plus important) jusqu'à h6 (Le moins important)</h3>
<p>La balise p permet d'écrire des paragraphes</p>
<p>La balise strong permet de mettre en évidence un élément <strong>important</strong></p>
<p>La balise b permet de mettre en <b>gras</b></p>
<p>La balise i permet de mettre en <i>italique</i></p>
<p>Nous pouvons également créer des listes non ordonnées avec la balise ul, sachant que chaque élément devra être entre balise li, exemple:</p>
<ul>
<li>Fraise</li>
<li>Framboises</li>
<li>Cerise</li>
</ul>
<p>Nous pouvons également créer des listes ordonnées avec la balise ol, sachant que chaque élément devra être entre balise li, exemple:</p>
<ol>
<li>Je me lève</li>
<li>Je mange et je bois</li>
<li>Je retourne me coucher</li>
</ol> 

Vous allez améliorer un peu la présentation en copiant-collant le code suivant dans la fenêtre CSS. Puis appuyez sur Run.

h1
{
text-align:center;background-color:red;
}
h3
{
font-family:Verdana;font-style:italic;color:green;
}
p
{
color:aqua;
}
ul
{
color:purple;
}
ol
{
color:olive;
}

Comme vous pouvez le constater, la syntaxe est la suivante : nom de la balise{style avec un ; entre les informations}

Voyons l'intérêt des attributs id et class.

Copier-coller le code HTML suivant:

<h1>Ceci est un titre principal</h1>
<h2 class="titre_1">Ceci est un sous titre comportant un attribut</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong> comportant un attribut. Avez-vous bien compris?</p>
<h2>Ceci est un sous titre de même niveau que le sous titre précédent, mais sans attribut</h2>
<h2 class="titre_1">Ceci est un sous titre comportant un attribut</h2>
<p id="para_2">Second paragraphe.</p> 

Copier-coller le code CSS suivant puis appuyez sur Run.

#para_1
{
font-style:italic;Color:green;
}
.titre_1
{
color:lime;
}

Comme vous pouvez le constater, il est possible de cibler un paragraphe et pas un autre en utilisant l'attribut id (en CSS l'attribut id se traduisant par le #). Il est aussi possible d'utiliser l'attribut class. Dans le CSS, l'attribut class se traduit par un point"." . L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page.