TP2 Le Web

Lors du TP 1, nous avons découvert quelques balises en HTML et quelques instructions en CSS. Voyons désormais comment se construit une page HTML. Pour cela, nous allons écrire un fichier HTML et un fichier CSS avec l'éditeur de texte : Notepad++

I/ Le squelette.

Vous trouverez ci-dessous le squelette d'une page HTML.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
	<title>Mon titre</title>
    </head>
    <body>

    </body>
</html>

La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web en HTML5. C'est une balise atypique. Html est la balise principale du code. Elle englobe tout le contenu de la page. Ici, elle précise de plus que nous écrivons en français.

head (tête): cette section contient quelques informations générales sur la page:

Ici, l'encodage est fait en utf-8
Le titre de ma page est: Mon titre.
C'est également ici que nous taperons le code qui fera le lien avec le fichier CSS.

body (corps): c'est là que nous tapons le contenu de la page HTML.

Faisons un essai simple:

Ouvrez l'éditeur de text Notepad++
Faites un copier-coller du code suivant.
Enregistrez votre document dans votre dossier de classe/eleve/1 Web/TP2
Utilisez le nom html1.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
	<title>Mon titre</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    </body>
</html>

Puis vous recherchez le fichier que vous venez juste d'enregistrer : html1.html

Vous faites un clic gauche dessus, suivi d'un clic droit. Vous faites ouvrir avec google.

Vous devriez voir apparaître une page WEB dont le titre de l'onglet est "Mon titre" et contenant : Hello World

II/ Une page WEB complète avec le lien vers le fichier CSS.

Nous allons désormais essayer de faire quelque chose d'un peu plus complet en associant 4 éléments.

Premier élément à copier-coller dans notepad++ (Il faut donc ouvrir une nouvelle page. Pour cela, il suffit d'aller en haut à gauche dans fichier et de faire nouveau ) : le squelette.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
	<title>Mon titre</title>

    </head>
    <body>

    </body>
</html>

Deuxième élément à copier-coller entre les balises "body" dans notepad++

<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>

Troisième élément à copier-coller entre les balises "head", juste avant la balise fermante:

<link href="style.css" rel="stylesheet" />

Cette ligne indique qu'il faut aller chercher la mise en page dans le fichier style.css situé au même niveau que le fichier html.

Vous allez enregistrer ce fichier dans votre dossier de classe/eleve/1 Web/TP2

Utilisez le nom html2.html

Puis dans notepad++, vous ouvrez un nouveau fichier. C'est-à-dire, vous allez en haut à gauche dans fichier, et vous faites nouveau. Un nouvel onglet apparait avec une page blanche.

Vous copier-coller le code CSS suivant dans notepad++

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;
}

Vous allez enregistrer ce fichier dans votre dossier de classe/eleve/1 Web/TP2

Utilisez le nom style.css

Vous allez rechercher votre fichier html2.html sur lequel vous allez faire un clic gauche suivi d'un clic droit pour l'ouvrir avec google.

Vous devriez voir la même chose que lors du TP1.

Appelez-moi pour me montrer votre travail.

Lorsque nous créons un site internet, nous avons plusieurs pages en lien les unes avec les autres et nous souhaitons avoir la même présentation pour l'ensemble du site. Vous allez insérer au bon endroit, dans le ficier html1.html la ligne faisant référence au fichier CSS à utiliser :

<link href="style.css" rel="stylesheet" />

Juste pour info. Le fichier html2.html n'est pas bien structuré d'un point de vue visuel. L'idéal est de décaler les différentes lignes pour obtenir une structure propre comme celle qui suit, elle est plus lisible,comme vous pouvez l'observer.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
	<title>Mon titre</title>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <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>
    </body>
</html>

III/ Des insertions.

Lorsque l'on crée un site internet, souvent, nous souhaitons y intégrer des images, des liens avec d'autres pages.... Voici quelques balises :

Balise pour se déplacer vers une autre page de notre site (lien relatif).

<a href="nom de la page">le texte qui sera souligné et sur lequel il faudra cliquer</a>

Je vous propose d'utiliser nos deux pages html1.html et html2.html pour essayer.

Inclure la ligne suivante dans le corps de html1.html et enregistrer.

<p> En cliquant sur ce lien je vais à la page 2 <a href="html2.html">page 2</a></p>

Inclure la ligne suivante dans le corps de html2.html et enregistrer.

<p> En cliquant sur ce lien je vais à la page 1 <a href="html1.html">page 1</a></p>

Allez sur vos pages et à l'aide d'un clic droit, actualisez puis, essayez de passer d'une page à l'autre en cliquant sur le lien.

Appelez moi pour me montrer

Balise pour se déplacer vers une page d'un autre site internet (lien absolu)

La balise est la même:

<a href="adresse du site">le texte qui sera souligné et sur lequel il faudra cliquer</a>

Inclure la ligne suivante dans le corps de html1.html

<p> En cliquant sur ce lien je vais sur le site <a href="https://openclassrooms.com">OpenClassrooms</a></p>

Pensez à enregistrer et à actualiser avant de vérifier que cela fonctionne

Balise pour intégrer une image.

L'image doit être sauvegardée au même niveau que le fichier, sinon, dans le nom de l'image, il faut préciser le chemin d'accès.

On privilégie une image en JPEG pour des raisons de poids, et donc de réactivité du site internet.

Si le navigateur n'arrive pas à afficher l'image, il va afficher le texte alternatif tapé dans l'attribut alt.

Je vous propose d'insérer la ligne suivante dans le corps de html1.html

<img src="pomme.jpg" alt="pomme" />

Pensez à enregistrer et à actualiser

Appelez-moi pour me montrer votre travail.

IV/ Inspecter, ou examiner l'élément.

Il est possible d'avoir accès au code HTML et CSS d'une page WEB. Pour cela, il suffit d'ouvrir la page avec un navigateur, de faire un clic droit, et de cliquer sur inspecter ou examiner l'élément, la terminaison est variable selon les navigateurs. Ensuite, vous cliquez sur les éléments du fichier html sur lesquels vous voulez des informations.
Essayez avec les pages html1.html et html2.html