TP M1106 n°1 - Partie 1 sur 2 - Durée 2h

Rappels Web et bases HTML 5 [balises fondamentales - listes - tableaux - formulaires]

html5 M1106 TP1

Objectifs

Préambule (vu le contexte de TP en distanciel)

Vous déposerez alors en fin de séance une archive zip de ce répertoire sur Moodle (dépôt de vos archives zip TP). Un seul dépôt (une seule archive) pour les parties 1 et 2.

Données de ce TP

Le World Wide Web Consortium a.k.a. W3C

Le World Wide Web Consortium (W3C) est un organisme international qui développe des recommandations ("open standards") pour assurer à long terme la croissance du World Wide Web (HTML, CSS, PNG, SVG, ...). Référence : https://www.w3.org/

Tout au long des TP, vous pourrez valider vos pages par rapport aux recommendations du W3C ici http://validator.w3.org/#validate_by_uri.

Choix de l'éditeur de texte

Nous utiliserons Sublime Text à l'IUT pour éditer les fichiers HTML (et CSS) sous Linux.

Vous pourrez aussi utiliser sur vos machines personnelles Sublime Text que l'on vous recommande ou un autre éditeur généraliste comme geany, gedit, nano, vim, emacs,... disponibles sous Linux. Sous Windows vous avez Notepad++. Sous Mac vous avez aussi BBEdit par exemple. Par la suite vous pourrez utilisez des éditeurs dédiés aux développements Web et plus généralement à la programmation et à tous développements informatiques : des IDE (integrated development environment) parmi lesquels on trouve Netbeans (qu'on utilisera dans des futurs TP) et Eclipse.

Pour tester des bouts de code et les partager, vous pouvez également utiliser des plateformes en ligne comme codepen ou jsfiddle par exemple.

Voir par exemple dans ce tuto MDN sur les formulaires HTML ou encore celui-ci, ce dernier lien juste pour vous donner envie, chez vous, de découvrir un peu ce langage JavaScript, désolé nous ne pouvons pas l'aborder dans les 30h de ce module, il y a bien des choses à faire en HTML et CSS, mais sachez que vous l'utiliserez au moins indirectement via le framework Bootstrap pour votre deuxième projet.

Choix du navigateur

Nous utiliserons (Mozilla) Firefox à l'IUT.

Il ne faut pas vouloir développer sur un navigateur en particulier. La bonne méthode de programmation Web (créer des pages Web) consiste à d'abord suivre les recommandations du W3C puis, seulement après, une fois votre site créé, vous vérifiez la bonne navigation sur les navigateurs les plus courants : (Google) Chrome, (Mozilla) Firefox, Internet Explorer/Microsoft Edge, Safari et Opéra (Parts de marché 2020, source wikipédia, ici).

Site web adaptatif (en français) / Responsive Web Design (in English)

Définition à retenir : un site web adapatif (ou "responsive") est un site offrant une bonne expérience de lecture et de navigation sur n'importe quel appareil. En gros : le site s'adapte au support (taille de l'écran principalement, on pourrait imaginer aussi d'autres particularités : couleurs etc.)

Travail demandé

Introduction

Dans cette première partie de TP vous allez faire un tour d'horizon des balises HTML 5 usuelles employées.

On fera attention à bien séparer le fond (c'est-à-dire le contenu) qui sera réalisé en HTML, de la forme (c'est-à-dire l'habillage du texte et de la page) qui sera réalisée avec des feuilles de style CSS.

Vous allez donc devoir résister dans ce TP à toutes les tentations d'alignement de texte, de centrage, de mise en gras, de mise en italique, ... Tout cela sera fait plus tard avec des feuilles de style CSS. Dans cette première partie du TP 1 vous allez vous concentrer sur la réalisation de contenu. L'habillage sera vu dans la seconde partie du TP.

On fera aussi attention à écrire son code HTML de la manière suivante :

  1. Toutes les balises s'écrivent en minuscule,
  2. Toutes les balises se ferment,
  3. Tous les attributs de balises sont écrits entre guillemets.

Exemples :

<br/>
	    
<img src="image.png" alt="Description de mon image
 pour les malvoyants ou les navigateurs en mode texte/console"/>
 
<strong>Quelque chose d'important</strong>

Une dernière chose avant (d'enfin) créer vos pages, rappelez vous que HTML signifie HyperText Markup Language, soit en français langage de balise hyper texte, c'est un langage informatique de balise en charge de représenter le contenu d'une page Web. L'acronyme HTTP désigne quant à lui un protocole réseau, HTTP signifie HyperText Transfer Protocol, soit en français protocole de transfert hyper texte, c'est un protocole réseau de couche 5 (couche application) encapsulant des contenus Web.

C'était sur les erreurs 404, mais je ne la retrouve plus... 😅😂

(Au cas où une explication. Bon reprenons... 😁)

Rappelez-vous également de cette différence :

  • Qu'est-ce que le Web (ou World Wide Web, ou la Toile) ?
    • C'est l'ensemble des contenus (pages) accessibles via un navigateur.
  • Qu'est-ce qu'Internet ?
    • C'est le réseau informatique mondial accessible au public (le réseau des réseaux).

Allez c'est parti pour faire du TP et des jolies pages Web... 😁

Bien sûr tout ce qui est au dessus, il faut le savoir 🧐, c'est un condensé du minimum de théorie à connaître 😎.

Une première page : c'est parti

Réalisation d'une page minimale HTML 5 

<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8"/>
<title> TP n°1 : page de tests HTML 5</title>
<!-- un commentaire HTML : autre codage possible iso-88859-15 (Latin-9) -->
</head>

<body>

<h1> Test d'un titre avec accent : tôtô </h1>

</body>
</html>

<!doctype html> : déclaration du type de document, il s'agit d'un document HTML 5 (le 5 n'est pas précisé dans le doctype car en fait il indique "cette page utilise la dernière version d'HTML" qui se trouve être la 5 à ce jour.

<meta charset="utf-8"/> : spécifie l'encodage de la page.

<!-- un commentaire HTML --> : le navigateur ne l'affichera pas.

Ajout d'une vidéo

La balise <video> a fait son apparition avec HTML 5. Elle supporte actuellement les formats MP4, WebM, et Ogg. Son fonctionnement dépend des navigateurs.

C'est généralement une bonne chose de ne pas mélanger ses pages html avec ses fichiers d'images et de vidéos de son site. Comme dans cet exemple, rangez vos images et vidéos dans un répertoire.

Ajout d'une image avec légende

Notez bien le type de chemin employé pour indiquer le chemin du fichier image ! On utilise des chemins relatifs ! Et pas des chemins absolus genre "c:\MonSuperSite\images\bat-RT.png".

En effet des chemins absolus ne vont fonctionner qu'en local sur votre machine. Dès que vous transférerez votre site sur un autre ordinateur, votre hébergeur par exemple (ou à l'enseignant pour qu'il note votre site) cela ne fonctionnera pas. Les chemins ne seront plus bons. Donc pour faciliter le transfert et le déploiement de votre site, n'utilisez que des chemins relatifs et ranger vos fichiers par catégorie : images, css, ....

Ajout de titres h1,h2,h3,h4,h5,h6 à votre page

Ces balises titre h1, h2, ..., h6 indique le niveau du titre : h2 suit h1, h3 suit h2 etc.

Une grosse erreur consisterait à croire que vous allez utiliser h1, h2 ou h6 en fonction de la taille du texte que vous voulez obtenir. Que nenni ! (oui un peu désuet... Vous pouvez le remplacer par "Pas du tout !") L'habillage de vos balises pourra dans un second temps être réglé par l'utilisation d'une feuille de style CSS.

Test de balises dans du texte

Voir le mémento du cour sur les balises pour des rappels.

Les balises de type en ligne s'affichent les unes à la suite des autres comme du texte. Une balise de type en ligne n'occupe que l'espace dont elle a besoin en largeur. Lorsque deux balises de type en ligne se suivent, elles sont positionnées (par défaut) l'une à côté de l'autre.

Les balises de type bloc s'affichent les unes sous les autres. Une balise de type bloc occupe toute la largeur disponible. Lorsque deux balises de type bloc se suivent, elles sont positionnées (par défaut) l'une sous l'autre.

Ces notions sont importantes pour l'habillage.

Vous voyez que les symboles inférieur (<) et supérieur (>) sont réservés en HTML, pour les écrire il faut utiliser un codage spécial. Pour obtenir le symbole < vous allez donc écrire &lt; Pour obtenir le symbole > vous allez donc écrire &gt; Un dernier exemple : DUT R&T, le symbole & est codé par &amp;

Ajout de listes

Ajout d'un tableau

Cet inspecteur Firefox vous sera très utile dans la suite de ce module pour étudier finement vos pages (HTML et CSS). Il permet également de tester des modifications en direct.

Remarque : attention, les tableaux ne sont pas faits pour habiller une page. Cela a pu se faire au début de l'HTML quand peu d'outils étaient disponibles. De nos jours on utilise des feuilles de style CSS qui sont faites pour cela.

Formulaires

Pour finir cette première partie de TP sur les bases HTML 5 et Web, vous allez ajouter à votre page un formulaire.

Les formulaires permettent d'interagir avec l'utilisateur. Ils permettent de saisir des informations de la part de l'utilisateur.

Leurs traitements ne fait pas parti des obejctifs de ce module M1106. Ce que peut faire le serveur avec ces données saisies sera vu dans le prochain module de programmation Web dynamique M2105 (on a alors besoin d'un langage de programmation Web dynamique comme par exemple PHP, Java, Python, Ruby, Javascript, ...).

La documentation w3schools des formulaires se trouve ici doc w3schools formulaires, et l'aide MDN web docs sur les formulaires se trouvent ici Tuto MDN formulaires.

L'aide spécifique w3schools sur les champs input de formulaire qui pourra bien vous aider 😎 : HTML Input Types w3schools

  • La balise <form> est utilisée pour créer un formulaire. L'attribut method spécifie la méthode à employer pour envoyer les données saisies du formulaire vers le serveur (Message HTTP). Cette méthode peut être la méthode get où les données sont envoyées via l'URL ou la méthode post où les données sont envoyés dans la requête HTTP.
  • La balise ou champ <input> de type text (<input type="text" name="nom" id="nom"/>) permet se saisir une chaîne de caractères. La valeur peut être déjà mise avec l'attribut value (e.g. <input type="text" name="nom" id="nom" value="Nom déjà mis"/>). On peut aussi mettre un exemple de valeur, mais qui n'est pas mis comme valeur si les données étaient envoyées, avec l'attribut placeholder (e.g. <input type="text" name="nom" id="nom" placeholder="un exemple"/>) Plus d'infos là : HTML Input Types w3schools.
  • La balise ou champ <input> de type submit (<input type="submit" ...) crée un bouton servant à envoyer les données à une page de traitement dont l'url est donnée par l'attribut action de la balise form (<form method="post" action="page-de-traitement.<php ou jsp ou js ou ...>">, ici on ne traite pas les données c'est pour ça qu'on a mis action="#", le bouton renvoie sur la page actuelle (#)).
    • Vous verrez comment faire ce traitement au second semestre dans le module M2105 (Web dynamique).
  • L'attribut name d'un champ est utilisé lors de l'envoi de données du formulaire, il sert à référencer les données saisies pour y accéder dans la page de traitement au niveau du serveur. L'attribut id sert d'identifiant unique au niveau du client (CSS, JS, ...). Ces deux attributs n'ont pas toujours la même valeur comme vous le verrez au niveau des boutons radio. Vous pouvez avoir plusieurs boutons radio avec des identifiants différents, mais le même attribut name (ils sont liés, quand vous cochez sur un bouton autre que celui initialement coché, ce dernier se décoche. Lors de la soumission, il n'y a qu'une seule valeur dans la réponse - le bouton radio que vous avez sélectionné.
<form method="post" action="#">
    <fieldset>
		<legend>Informations sur vous</legend>
		<label for="nom">Nom</label> :
		<input type="text" name="nom" id="nom"/>
		<label for="prenom">Prénom</label> :
		<input type="text" name="prenom" id="prenom" value="Téo"/>
		<hr />
		<label for="pseudo">Pseudo</label> :
		<input type="text" name="pseudo" id="pseudo" size="10" maxlength="10"/>
		<label for="email">Courriel</label> :
		<input type="email" id="email" name="email" />
		<hr />
		<label for="pass">Mot de passe</label> :
		<input type="password" name="pass" id="pass" placeholder="Ex : progtr00"/>
		<hr />
		<input type="radio" name="genre" id="homme" value="homme"/>
		<label for="homme">Homme</label>
		<input type="radio" name="genre" id="femme" value="femme"/>
		<label for="femme">Femme</label>
		<hr />
		<label for="photo">Photo</label> :
		<input type="file" name="photo" id="photo"/>
		<hr />
		<label>Couleur préférée</label> :
		<select name="couleurs[]">
		<option value="vert" selected="selected">Vert</option>
		<option value="bleu">Bleu</option>
		<option value="rouge">Rouge</option>
		<option value="jaune">Jaune</option>
		</select>
		<hr />
		<label>Sports pratiqués</label> :
		<input type="checkbox" name="sports[]" value="football" />Football
		<input type="checkbox" name="sports[]" value="rugby" />Rugby
		<input type="checkbox" name="sports[]" value="golf" />Golf
		<input type="checkbox" name="sports[]" value="jogging" />Jogging	
		<input type="checkbox" name="sports[]" value="autre" />Autre
		<hr />
		<label for="description">Description</label> : <br />
		<textarea rows="10" cols="50" name="description" id="description"></textarea>
		<hr />
		<label for="depart">Départ :</label>
		<input type="date" name="depart" id="depart"/>
		<hr />
		<input type="reset" name="init" id="init" value="Réinitialiser" />
		<input type="submit" name="soumission" id="soumission" value="Envoyer"/> 
     </fieldset>
</form>

Quizz HTML w3schools

logo w3schools M1106 TP1

Complétez vos connaissances en HTML http://www.w3schools.com/, refaites le quiz pour avoir le maximum de point au besoin.

Des questions seront reprises dans des futurs tests de connaissance (Colle(s) ou DS).

Faire valider les résultats de votre test à l'enseignant (tout juste 😁).

Une pause de 10 mn est possible avant de passer à la deuxième partie une fois tout fini. Si vous avez fini avant les 2h aidez les autres à finir aussi :-)