– support stone Tickoon
Les applications web et le HTML
Une application web désigne un logiciel hébergé sur un serveur et accessible via un navigateur web. Le HTML (HyperText Markup Language) est un langage de balisage (et non de programmation) de 1993. Le W3C édite les normes de celui ci. Chaque navigateur interprète différemment le HTML. On associe souvent ce langage avec le CSS et le JavaScript pour obtenir le rendu désiré.
Exemple de fichier HTML
<!-- Commentaire -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> mon tableau </title>
</head>
<body>
<table border="1">
<tr>
<td>Compote</td>
<td>Yaourt</td>
<td>Fruit</td>
</tr>
<tr>
<td>épinard</td>
<td>Maïs</td>
<td>Riz</td>
</tr>
</table>
</body>
</html>
La structure d’une page HTML
Document HTML
<html></html>
Corps du document
<body></body>
titre 1er niveau
<h1></h1>
titre 2ème niveau
<h2></h2>
Paragraphe
<p></p>
liste à puce
<ul></ul>
liste numérotée
<ol></ol>
élément d'une liste
<li></li>
lien hypertexte
<a href="https://frebourg.es"> CherryClass</a>
tableau
<table border="1">
<tr>
<td>Compote</td>
<td>Yaourt</td>
<td>Fruit</td>
</tr>
</table>
ligne du tableau
<tr></tr>
cellule du tableau (colonne)
<td></td>
Vidéo - Controls permet de naviguer dans le fichier
<video controls src="video.ogv">description</video>
Audio - Exécution dans l’ordre, horse.ogg puis horse.mp3
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
en-tête
<header></header>
section
<section></section>
sous-section pour un article
<article></article>
bloc de navigation
<nav></nav>
encart
<aside></aside>
pied-de-page
<footer></footer>
Les formulaires
Champ de saisie
<input type="text" name= "monchamps">
placeholder - Une aide à la saisie
required- Champ obligatoire
<input type="text" name= "monchamps" required placeholder="Entrez un pseudo">
Champ de password
<input type="password" name= "pass">
Champ radio - Le name doit être identique.
<input type= "radio" name="prix" value="23"> 23€
<input type= "radio" name=" prix " value="22"> 22€
<input type= "radio" name=" prix " value="21"> 21€
Champ check box
<input type="checkbox" name="option1" value="tigrou"> Tigrou
<input type="checkbox" name="option2" value="winnie"> Winnie
Champ de saisie de texte
<textarea name="grdTexte" rows="nombre_de_lignes" cols="nombre_de_colonnes"></textarea >
Liste déroulante -L’attribut selected sélectionne cet élément par défaut. L’option size indique le nombre d’élément visible.
<select name="maListe" size="1">
<option value="valeur1">Lionel </option>
<option value="valeur2">Paul</option>
<option value="valeur3" selected>Henri</option>
<option value="valeur4">Jack</option>
<option value="valeur5">Frederic</option>
</select >
Champ caché utile pour passer des valeurs non visibles
<input type="hidden" name="invisible " value="tuNeSaisPas">
Champ de type tel – fonctionne comme un champ de type text.
<input type="tel">
Champ de type url - Ce champ devra respecter un pattern URL. Le mot pattern signifiant une structure.
<input type="url" value="http://" name="monSite">
Champ de type email
<input type="email" name="monEmail">
Champ de type search – même fonctionnement que le champ text
<input type="search" name="recherche">
Champ de type date – affiche un calendrier selon les navigateurs
<input type="date" name="maDate">
Champ de type number - Un champ contenant des valeurs entieres. Le step est le pas. Step, min et max sont optionnelles.
<input type="number" step="2" value="0" min="0" max="24">
Champ de type range, malheureusement il faudra du JavaScript pour afficher les valeurs…
<input type="range" value="15" max="50" min="0" step="5">
Champ de type color – affiche une palette de couleur
<input type="color" name="couleur">
Champ datalist – lier une liste à un élément input
<input list=" choix_couleur " type="text" id="couleur">
<datalist id="choix_couleur ">
<option value="bleu">
<option value="blanc">
<option value="rouge">
<option value="vert">
</datalist>
Formulaire simple
Un formulaire commence par la balise form.
La méthode indique le moyen d’envoi. Soit on utilise GET et les informations seront envoyées dans l’URL et donc visible, soit on utilise POST. Attention, l’utilisation de POST ne veut pas dire que les informations sont cachées, elles sont en clair dans les paquets envoyés. Les valeurs envoyées seront récupérées grâce à l’attribut name contenu dans chaque champ.
L’attribut action indique la page de destination lorsque le formulaire est soumis.
Tout ce qui est contenu entre la balise d’ouverture et de fermeture du form sera transmis.
On indique par défaut un id, identifiant, pour permettre la modification ultérieure par JS.
On soumet un formulaire grâce à un bouton de type submit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mon titre</title>
</head>
<body>
<form method="post" id="frmConnection" action="recuperation.php">
<label for="email"> Votre email:</label>
<input type="email" name="txtEmail" id="txtEmail" autofocus />
</br>
<label for=" txtPass "> Mot de passe :</label>
<input type="password" name="txtPass" required />
<input type="submit" name="cmd" id="cmd" value=" envoie " />
</form>
</body>
</html>
Il est possible de réaliser plusieurs formulaires sur une même page. Un seul sera envoyé, celui qui sera validé.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mon titre</title>
</head>
<body>
<form method="post" id="frmConnection" action="recuperation.php">
<label for="email"> Votre email:</label>
<input type="email" name="txtEmail" id="txtEmail" autofocus />
<label for=" txtPass "> Mot de passe :</label>
<input type="password" name="txtPass" required />
<input type="submit" name="cmd" id="cmd" value=" envoie " />
</form>
<form method="GET" id="frmConnection2" action="recuperation.php">
<label for=" txtLogin "> Votre login:</label>
<input type="txt" name="txtLogin" id=" txtLogin " />
<label for=" txtPass "> Mot de passe :</label>
<input type="password" name="txtPass" required />
<input type="submit" name="cmd" id="cmd" value=" envoie " />
</form>
</body>
</html>