Le langage HTML5 V6

TP1 HTML : Le langage HTML5

MA PREMIÈRE PAGE WEB (index.html) -------------------------------------------------------------------------------------------------------------- Le HTML5 est incontournable pour apprendre à créer des sites internet. Nous allons voir pourquoi il est important de le connaître: Un premier test pour ma page web

1. Effacez le contenu de la page «index.html». 2. Vous allez simplement écrire dans la zone de saisie le titre "Ma première page web".

3. Lancer votre page web et vérifier que la phrase s'affiche bien dans votre navigateur. Un grand titre c’est bon pour les yeux Le HTML5 repose sur le principe de balises imbriquées. Pratiquement, il sert à indiquer au navigateur (Internet Explorer, Opera, Firefox, Safari, Chrome...) comment afficher la page web. Imaginez que vous vouliez cette fois, voir le titre apparaître sur votre page web avec une taille plus grande.

1. Vous allez devoir ajouter les lignes de codes suivantes (dans la zone de saisie):

<h1> Ma première page web </h1>

2. Cliquer sur executer

La ligne de code ci-contre est très simple à comprendre. On ouvre une première balise <h1> pour indiquer au navigateur que l'on veut "heading" et </h1> (slash h1) pour arrêter.

On explique pour que vous puissiez mieux comprendre ;) Le HTML5 affiche un contenu (texte, image, lien, vidéo, animation …). On appelle ceci un langage descriptif (le python est lui un langage interactif).

Pour faire simple, le HTML5 sert principalement à :

• Afficher un contenu (texte, image, tableau…) • Créer des liens hypertexte et relier les pages entre elles • Structurer un document (titre, paragraphe …) • Bien indexer votre page web dans les moteurs de recherches (choix de balise, mot-clé …)

Le HTML5 ne compte qu’une centaine de balises. (Rassurez-vous, vous n’aurez pas besoin de les connaître toutes).

Comment est écrite une page Web ? (Manuel SNT P 62)

Une image sur ma page web c’est plus sympa - Essayons d’aller plus loin avec notre première page web.

Tout d'abord créer un dossier avec le nom images. - Ajouter dans ce fichier la photo

cheval.jpg ( voir sur Teams dans la partie «Fichiers» dans le dossier «images pour HTML» et le télécharger)

o Cliquez sur les 3 boutons o Chargez le fichier (Upload file) o Choissisez l’image sur votre PC (probablement dans

téléchargement) - Faites un glisser-déplacer de votre image dans le dossier images. - Importez aussi les autres images du dossier. - Puis taper le code suivant dans page «index.html».:

<!DOCTYPE html> <html> <head> <title>Ma première page</title>  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> </head> <body>  <h1>Ma première page avec des photos</h1> <p> <img src="images/cheval.jpg" width="300"> </p> </body> </html>

Résultat:

Encore des petites informations importantes pour HTML

Aussi, vous aurez compris que les balises permettent de faire apparaître vos textes et images sur votre page web (<p> <h1> etc…).

Néanmoins, Il existe aussi des balises qui elles, servent à donner des informations au navigateur.

Ici la balise <meta> informe le navigateur que notre page web contient des accents par exemple. (Essayer d'afficher votre page sans la ligne meta pour vérifier)

LE LIEN HYPERTEXTE (lien.html) -------------------------------------------------------------------------------------------------------------- Les liens hypertexte permettent de surfer en passant de pages en pages. Ils peuvent pointer vers un autre site web, vers d'autres pages de votre propre site ou encore lancer la boite mail.

Pour créer un lien hypertexte en HTML5, on utilise la balise <a>. Elle sera fermée en utilisant la balise </a> (comment traduisez-vous le mot ancre en anglais?).

1. Créer la page lien.html En utilisant le principe de balise imbriqué, on va donc "entourer" le lien avec les balises <a> et </a>.

<a> Ceci est un lien </a>

Ici on utilise des mots mais un lien hypertexte peut-être une image, un texte, ou même une vidéo. Ce lien ne pointe vers rien du tout. Il faut ajouter l'attribut HREF="http://www.blabla.html".

- Créez une nouvelle page HTML «lien.html»

Taper le code suivant:

<!DOCTYPE html> <html> <head> <title>Premier lien</title>  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> </head> <body>  <h1>Mon premier lien</h1> <p> <img src="images/chat.jpg" width="300"> <br> <a HREF="index.html">retour à la page du début (cheval) </a>. </p> </body> </html>

Résultat:

Attention Padawans, cette ligne à votre page «index.html (fichier), il faut ajouter juste avant </body>»:

<br> <a HREF="lien.html">page lien (chat) </a>.

LES TABLEAUX (tableau.html) contre-attaquent ha ha ha ha --------------------------------------------------------------------------------------------------------------

• Un exemple de code pour un tableau

- Créez une nouvelle page HTML «tableau.html» et saisir le code suivant :

 <table border="1" width= "200"> <tr> <td>Bruno</td> <td>ingénieur</td> <td>25</td> </tr> <tr> <td>Michelle</td> <td>Professeure</td> <td>28</td> </tr> </table>

Attention Padawans, cette ligne à votre page «index.html (fichier), il faut ajouter »

<br> <a HREF="tableau.html">page lien (tableau) </a>

et un lien hypertexte pour pouvoir retourner vers la première page à partir de la page du tableau.

Résultat:

Je comprends un peu comment ca marche

Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr> (table row).

Ce tableau a deux lignes donc il y aura deux fois <tr></tr> (début et fin de ligne)

Sur chaque ligne, il y a deux cellules donc nous aurons deux fois <td></td> (début et fin de cellule pour table data).

Et zou à vos clavier à vous les tableaux

- Modifier la page (fichier) HTML «tableau.html»

Taper le code suivant: <! Doctype html> <head><title>Ma seconde page</title></head> <body> <table border="1" > <tr><td colspan="2"><h1>Ma première page avec un tableau</h1></td></tr> <tr> <td><img src="images/cheval.jpg" width="300"></td> <td><img src="images/voiture.jpg" width="300"></td> </tr> <td colspan="2"> cliquer sur le lien pour retourner a la <a HREF="index.html">page index</a>. </td> </tr></table></body> </html>

Résultat:

LES LISTES non-ordonnées et ordonnées (listes.html) -------------------------------------------------------------------------------------------------------------- Les listes non-ordonnées Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance).

Les listes ordonnées Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée.

- Créez une nouvelle page HTML «liste.html» et saisir le code suivant :

<!DOCTYPE html> <html> <head> <title>Les listes non-ordonnée et ordonnées</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" > </head> <body>  <h1>Les listes non-ordonnées et ordonnées</h1> <P> <ol> <li>Item 1 <li>Item 2 <li>Item 3 </ol> </p> <P> <ul> <li>Item 4 <li>Item 5 <li>Item 6 </ul> </p> </body> </html>

Attention Padawans pour naviguer, créer des liens hypertexte tu devras…

Résultat:

PAGE DE STYLE (style.html) -------------------------------------------------------------------------------------------------------------- Utilisant un script de langage CSS (cascading style sheet), la page style permet de faire la mise en page des éléments présent dans une page HTML. Vous pouvez imbriquer le style dans la page HTML elle-même (dans la balise HEAD). Ce style ne sera donc actif que dans la page ou il est écrit. - Créez une nouvelle page HTML «style.html» et saisir le code suivant :

<!DOCTYPE html> <html> <head> <title>Ma première page avec un style</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> </head> <style type="text/css"> body {background-color: pink } h1 {background-color: rgb(192, 255, 206); color: purple; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } P { color: rgb(0, 119, 128); font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> <body>  <h1>Ma première page avec un style </h1> <P> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>

Attention Padawans pour naviguer entre tes pages, créer encore des liens hypertextes tu devras…

Résultat:

Cependant, si vous désirez écrire un script qui lui va modifier de multiple page simultanément, vous devrez écrire votre script et l’enregistrer en format CSS dans une autre page. Celle-ci aura l'extension .css (ex: style.css). On peut par la suite l’appeler dans chaque page HTML grâce au lien ci-dessous et éviter de devoir modifier toutes les pages d'un site si l'on veut changer de style. - Dans la page CSS déjà existante normalement «style.css», saisir le code suivant :

body {background-color: pink } h1 {background-color: rgb(192, 255, 206) ; color: rgb(9, 0, 128); font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } P { color: rgb(128, 0, 111); font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } Dans la balise <HEAD> de la page HTML «lien.html» à la dernière ligne <link rel="stylesheet" href="style.css">

Résultat:

- Créez une nouvelle page HTML «stylebis.html» et saisir le code suivant :

<!DOCTYPE html> <html> <head> <title>Ma première page avec un style</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <link rel="stylesheet" href="style.css"> </head> <style type="text/css"> body {background-color: yellow } </style> <body>  <h1> GRAZIELLA Roman Alphonse de LAMARTINE</h1> <P> A dix-huit ans, ma famille me confia aux soins d'une de mes parentes que des affaires appelaient en Toscane, où elle allait accompagnée de son mari. C'était une occasion de me faire voyager et de m'arracher à cette oisiveté dangereuse de la maison paternelle et des villes de province, où les premières passions de l'âme se corrompent faute d'activité. Je partis avec l'enthousiasme d'un enfant qui va voir se lever le rideau des plus splendides scènes de la nature et de la vie. Les Alpes, dont je voyais de loin, depuis mon enfance, briller les neiges éternelles, à l'extrémité de l'horizon, du haut de la colline de Milly ; la mer dont les voyageurs et les poètes avaient jeté dans mon esprit tant d'éclatantes images ; le ciel italien, dont j'avais, pour ainsi dire, aspiré déjà la chaleur et la sérénité dans les pages de Corinne et dans les vers de Goethe : Connais-tu cette terre où les myrtes fleurissent ? Les monuments encore debout de cette antiquité romaine, dont mes études toutes fraîches avaient rempli ma pensée ; la liberté enfin ; la distance qui jette un prestige sur les choses éloignées ; les aventures, ces accidents certains des longs voyages, que l'imagination jeune prévoit, combine à plaisir et savoure d'avance ; le changement de langue, de visages, de mœurs, qui semble initier l'intelligence à un monde nouveau, tout cela fascinait mon esprit. Je vécus dans un état constant d'ivresse pendant les longs jours d'attente qui précédèrent le départ. Ce délire, renouvelé chaque jour par les magnificences de la nature en Savoie, en Suisse, sur le lac de Genève, sur les glaciers du Simplon, au lac de Côme, à Milan et à Florence, ne retomba qu'à mon retour. </p> <br><br>cliquer sur le lien pour retourner a la <a HREF="index.html">page index</a>. </body> </html>

Attention Padawans pour naviguer entre tes pages, créer encore des liens hypertextes tu devras…

Résultat:

Fin de ce TP

Documents

Le langage HTML5 V6