Développement D'Applications Web: Formation Aide Ingénieur-Info

DÉVELOPPEMENT
D’APPLICATIONS WEB
FORMATION AIDE
INGÉNIEUR-INFO
02 HTML
02 HTML, l'origine
HTML Hyper Text Markup Language est né en 1989

sous l'impulsion de Tim Berners Lee, " inventeur "
du Web.
HTML est basé sur SGML (Structured Markup
Language), qui est une vieille norme utilisée pour la
description de documents.
HTML est une instance de SGML.
L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 3/56

02 HTML, les principes
Il contient des commandes, implémentées par
des balises pour marquer les différents types de
texte (titres, paragraphe, listes …) , pour inclure
des images, des formulaires, des liens …
C'est un langage à balisage qui décrit la structure
logique d'un document hypertexte. Il a
volontairement été conçu pour être simple.

02 L'hypertexte
Le langage HTML permet de créer des documents

interactifs grâce à des liens hypertextes, qui
relient votre document à d'autres documents.
En cliquant sur une zone de texte (ou une image,

un logo) mise en évidence, on peut accéder a un
nouveau document situé sur un autre ordinateur
en n'importe quel point du globe.

02 Introduction au marquage - 1
Pour décrire un fichier hypertexte, le langage HTML

insère des balises dans le texte du document :
<marqueur> ici votre texte </marqueur>
Début de mise en forme Fin de mise en forme
Synonymes: marqueur, élément, tag.

Ces balises peuvent être insérées n'importe

où dans le texte, entre 2 phrases, mots,
lettres …
<gras>Le <italique> cours </italique> HTML</gras>
Le cours HTML
Il faut respecter une logique d'imbrication:
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Mauvais:
<gras><italique> Le cours HTML</gras></italique>

02 Les attributs
Les balises peuvent posséder un ou plusieurs attributs qui

permettent de spécifier l'action de la balise. Toujours mettre
la valeur de l'attribut entre guillemets.
<marqueur attribut="argument">texte</marqueur>
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>

02 Les commentaires
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->

02 Le langage HTML
Structure minimale d’un document
<html>
<head>
entête
<title>Titre fenetre</title>
</head>
<body>
Corps du document
Corps


</body>
</html>

Respectez l’indentation
DAWeb L2-S4-INFO- USTO-MB /

02 
Eléments de niveau bloc
<hn> . . </hn> Titre de niveau n, de 1 à 6

<p> . . </p> Paragraphe
Et aussi: div, hr, pre sans oublier body !

02 Eléments de listes
<ul> . . </ul> Liste non triée, liste à puces

<ol> . . </ol> Liste triée, liste à numéros
<li> . . </li> Elément de la liste
Et aussi: dl, dt, dd

02 Les liens sur un texte …ou sur autre chose !
<a> . . </a>
Création d'un lien hypertexte, ou vers un point

d'ancrage du document
Principaux attributs:
href = url
name = chaîne de caractères
<a href = "http://www.univ-usto.dz">USTO-MB</a>

02 La balise <a href="mailto:adress">
<html>
<head>
<title>Les hyperliens</title>
</head>
<body>
<p>Vous êtes dans la page lien </p>
<p>Cliquez sur
<a href="mailto:name@gmail.com">mail to name</a></p>
</body>
</html>

02 La balise <a href="#label">
Les ancres (liens internes)
 Permettent de créer un lien vers un endroit précis de la

page donnée afin de positionner correctement le
navigateur.

Pour permettre le déplacement dans une même page :

✗ il faut dans un premier temps définir des points
particuliers dans la page. Ceci se fait en posant des
ancres avec : <a name="nom_ancre">. . . </a>
✗ puis on pourra définir des zones sensibles (au clic de la
souris) avec : <a hef="#nom_ancre"> portion de
page </a>

Ou d'attribuer à l'élément vers lequel on veut pouvoir

pointer un identifiant (avec l'attribut HTML id) et d'y
associer un lien (avec la balise <a href...>...</a>
débutant par le caractère dièse #, suivi du nom de cet
identifiant.

02
<body>
Le langage HTML
La balise <a id="label">
<a href="#bas">down</a>
<h1 id="haut">Les liens internes (les ancres)</h1>
<a href="#chapter1">chapitre 1</a>
<ol>
<li id="chapter1"><h3>Chapitre 1: langages pour le web</h3>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>PHP</li>
</ul>
</li>…...
02
…..
Le langage HTML
<li id="chapter2"><h3>Chapitre 2: langages sturcturés</h3>
<ul type="square">
<li>XML</li><li>DTD</li> <li>XSD</li>
</ul>
</li>
<li id="chapter3">
<h3>Chapitre 3: les bases des web services</h3>
<ul type="square">
<li>SOAP</li><li>WSDL</li><li>UDDI</li>
</ul>
</li>
</ol>
<a href="#haut">top</a>
<a name="bas"></a>
</body>
02 Le langage HTML
….../liensInternes.html

02 Les adresses URL
Les adresses du Web ou URL ( Uniform Resource

Locator ) sont du type:
https://www.univ-usto.dz/faculte/fac-mathinfo/
Le protocole: http
Le serveur (sous domaine + nom de domaine):
www.univ-usto.dz
Le fichier avec son chemin:
faculte/fac-mathinfo/index.php

02 Eléments de ligne
<b>texte gras</b> texte gras

<i>texte italique</i> texte italique
<big>texte gros</big> texte gros
<small>texte petit</small> texte petit
Et aussi: br (pour sauter des lignes), code, sub,

sup, span, u (pour underline/soulignement), strike
…
02 Les tableaux -2
<table> . . </table>
Définit un tableau
align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n

02 Les tableaux -2
<tr> . . </tr>
Définit une ligne d'un tableau

Principaux attributs :
align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n

02 Les tableaux -3
<td> . . </td>
Définit une cellule de données

Principaux attributs :
align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n

02 Les tableaux -4
<table>
<tr>
<td> A</td>
<td> B </td>
A B C
<td> C </td> D E F
</tr>
<tr>
<td> D</td>
<td> E </td>
<td> F </td>
</tr>
</table>

02 Les images -1
<img> . . </img>
Insère une image
align = left, bottom, middle, top, right

alt = text
border = n
height, width = n
src = url
<img src=‘’monimage.jpg’’ />

<img src=‘’monimage.jpg’’ width=‘’5’’ width=‘’10%’’/>

02
Le langage HTML
Les iframe
L'élément HTML <iframe> représente un contexte de

navigation imbriqué qui permet d'obtenir une page
HTML intégrée dans la page courante.
Attribut Utilisation
src indiquer l’adresse du document à
intégrer
Width
Définir les dimensions de notre
height élément iframe.

02
Le langage HTML
Exemple iframe
<html>
<head>
<title>iframe example</title>
</head>
<body>
<iframe src="HTML_CSS.mp4" width="30%"
height="30%"></iframe>
<iframe src="image.html" width="40%" height="25%"></iframe>
<iframe src="list.html"></iframe>
</body>
</html>

02 Le langage HTML
Les formulaires HTML
HTML permet, via des objets nommés "formulaires",

d'interagir avec l'utilisateur au-delà des simples liens
de navigation.
Avec un formulaire, il est possible de :
donner à l'utilisateur la possibilité de faire un choix
demander à l'utilisateur de remplir des informations
procéder à des authentifications
opérer des recherches ou sélections sur le site ...

02 Le langage HTML
Les formulaires HTML sont caratérisés par des
éléments qui permettent de collecter des
informations auprès des utilisateurs.
Le formulaire le plus connu est sans doute le champ
de recherche de Google :
Formulaire de recherche de google

02 Le langage HTML
Un formulaire apporte de l'inter-activité avec
l'utilisateur en proposant des zones de dialogue
Un formulaire n'est qu'une interface de saisie !
Selon les choix de l'utilisateur, il faut y associer un
traitement :
sur le client avec JavaScript par exemple
sur le serveur par l'intermédiaire de CGI, PHP, …

02 Le langage HTML

02 Le langage HTML
On décrit à l'aide de balises HTML les différents
champs de saisie
Chaque zone est identifiée par un nom symbolique
auquel sera associée une valeur par l'utilisateur
Quand le formulaire est soumis, les couples
(nom/valeur) de toutes les zones sont transmis dans
la requête HTTP au serveur
A chaque zone de saisie peut être associé un
traitement sur le client par l'intermédiaire d'un
événement JavaScript
02 Le langage HTML
Les éléments qui composent un formulaire sont inclus entre les

balises <form> et </form> dont la syntaxe minimale est la
suivante : <form action="traitement.php" method="get">
...
</form>
Les champs du formulaire sont transmis :

1. via l’URL dans le cas de l’utilisation de la méthode GET
2. dans le contenu de la requête HTTP dans le cas de l’utilisation
de la méthode POST

02 Le langage HTML
Les formulaires : les attributs de la balise form
method Indique la méthode HTTP utilisée

(obligatoire) (GET | POST)
action URL du programme (CGI ou php) qui
(obligatoire) sera exécuté quand l'utilisateur clique sur
un bouton de soumission
name (optionnel) Identifie le formulaire

02 Le langage HTML
Les éléments d’un formulaire
Les champs d’un formualire ne seront visibles que

s’ils sont à l’intérieur du bloc <form> </form>
Nous distinguons trois types d’éléments HTML
dans un formulaire :
1.label : définit un label (ou étiquette) pour un élément input.
2. input : champs de saisie
3. select : menus déroulants, listes à ascenceurs
4. textarea : zone de saisie d’un texte long

02
Type
Le langage HTML
Les éléments input
Signification Apparence
text Zone de texte
number Zone de valeur
numérique
password Zone de texte invisible
email Zone de type email
hidden Élement caché

date Zone de type
date

02
Type
Le langage HTML
Les éléments input
button N'a de sens que dans un
contexte JavaScript
submit Soumission des données
du formulaire
reset Réinitialisation des
champs du formulaire
checkbox Case à cocher
(plusieurs choix possibles)
radio Bouton radio
(un seul choix possible)
file Upload un file vers un
serveur
02
Élément
Le langage HTML
Les éléments select et textarea
<select> Liste déroulante
…...
</select>
<select > Liste déroulante
<optgroup> avec option
…
</optgroup>
</select>
<textarea> Zone de saisie
…... multi-lignes
</textarea>

02 Le langage HTML
L’élément input (text/number/password)
<form method="GET" action="auth.php">
<label>Nom : </label>
<input type="text" name="nom" placeholder="your name" size="20" maxlength="12"
required/>
<label>Age : </label>
<input type="number" name="age" min="18" max="100" placeholder="your
old"/><br><br>
<label>Mot de passe: </label>
<input type="password" name="pwd" minlength="8" maxlength="10"
placeholder="your password" required/>
</form>

02 Le langage HTML
L’élément input (hidden/date/email)
<input type="hidden" name="nationalite" value="algérienne"><br><br>
<label for= "date_n">Date de naissance: </label>
<input type="date" name="dateN" id="date_n"><br><br>
<label>Votre adresse elelctronique: </label>
<input type="email" name="mail" required><br><br>
</form>

02 Le langage HTML
L’élément input (radio/checkbox/file)
<label>Langages maitrisés: </label>
<input type="checkbox" name="langages" value="1"/> <label>HTML </label>
<input type="checkbox" name="langages" value="2"/> <label>CSS </label>
<input type="checkbox" name="langages" value="3"/> <label>JS </label>
<input type="checkbox" name="langages" value="4"/> <label>PHP </label><br>
<label>Genre: </label>
<input type="radio" name="genre" checked value="1"/> <label>Homme
</label>
<input type="radio" name="genre" value="2"/> <label>Femme </label><br>
<label>Sélectionnez votre fichier: </label>
<input type="file" name="file"/><br><br>
</form>
DAWebL2-S4-INFO-
DAWeb L2-S4-INFO-USTO-MB /
02 Le langage HTML
L’élément input (button/submit/reset)
……………….
……………...
<input type="button" name="click" value="Click here"><br><br>
<input type="submit" value="Valider">
<input type="reset" value="Annuler"><br>
</form>

02 Le langage HTML
L’élément select
……………….
<label>Catégorie : </label>
<select size="1">
<option value="ens">Enseignant</option>
<option value="etu">Etudiant</option>
<option value="admin">Administrateur</option>
</select><br>
</form>

02 Le langage HTML
L’élément select avec optgroup
……………….
<label>Catégorie</label>
<select size="1">
<optgroup label="Enseignant">
<option value="ma">MA</option><option value="pr">PR</option>
</optgroup>
<optgroup label="Etudiant">
<option value="licence">Licence</option>
<option value="master">Master</option>
<option value="doctorat">Doctorat</option>
</optgroup>
<optgroup label="Adminisrateur">
<option value="resp">Responsable</option>
<option value="agent">Agent</option>
<option value="sec">Secrétaire</option>
</optgroup>
</select><br>
</form>
02 Le langage HTML
L’élément textaera

……………….
<label>Laissez un commentaire: </label>
<textarea rows="4" cols="30"></textarea><br>
</form>

02 Le langage HTML
Les éléments fieldset et legend
L’élément <fieldset> permet de regrouper une partie d'un

formulaire HTML et d'associer une légende (<legend>) décrivant
ce groupe.

02 Le langage HTML
Les éléments fieldset et legend

<fieldset>
<legend>Informations :</legend>
<label>Nom : </label>
<input type="text" name="nom" placeholder="your name"
maxlength="12"/>
<label>Age : </label>
<input type="number" name="age" min="18" max="100"
placeholder="your
old"/><br>
<label>Mot de passe: </label>
<input type="password" name="pwd" minlength="8"
maxlength="10"
placeholder="your password"/>
</fieldset>
</form>
02 Le langage HTML
Les éléments d’ajustement : div et span
<div> et <span> éléments génériques sans information

structurante prédéfinie
Les éléments <div> et <span> sont des conteneurs pour
les autres éléments. Par conséquent, un ensemble
d'éléments peut être intégré aux éléments <div> ou/et
<span>.
Lorsqu'ils sont utilisés avec une feuille de style en
cascade (CSS), les balises <div> et <span> peuvent être
utilisées pour styler un bloc de contenu.

02 Le langage HTML
La balise <span> permet de définir un bloc "in-line" de
texte (Les blocs <span> se placent les uns à côté des autres et ont
la dimension qu'occupe leur contenu)
La balise <div> permet aussi de définir un bloc mais les blocs
<div> se placent les uns en dessous des autres

02
<body>
<div>
Le langage HTML
<p>My first paragraph</p>

<p>My second paragraph</p>
</div>
<div>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
</div>
</body>

02
<body>
Le langage HTML
<div>
<p>les formations assurées par <span>L'USTO</span>
sont : </p><span>Licence</span> <span>Master</span>
<span>Doctorat</span>
</div>
</body>

02 Le langage HTML

SUITE CHAPITRE
02
2

Développement D'Applications Web: Formation Aide Ingénieur-Info

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Développement D'Applications Web: Formation Aide Ingénieur-Info

Transféré par

Droits d'auteur :

Formats disponibles

DÉVELOPPEMENT

HTML Hyper Text Markup Language est né en 1989

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 3/56

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 4/56

Le langage HTML permet de créer des documents

En cliquant sur une zone de texte (ou une image,

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 5/56

Pour décrire un fichier hypertexte, le langage HTML

<marqueur> ici votre texte </marqueur>

Début de mise en forme Fin de mise en forme

Synonymes: marqueur, élément, tag.

Ces balises peuvent être insérées n'importe

<gras>Le <italique> cours </italique> HTML</gras>

Il faut respecter une logique d'imbrication:

<gras><italique> Le cours HTML </italique> </gras>

<gras><italique> Le cours HTML</gras></italique>

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 8/56

Les balises peuvent posséder un ou plusieurs attributs qui

<marqueur attribut1="argument" attribut2="argument">texte</marqueur>

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 9/56

<!–- Voici un commentaire HTML -->

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 10/56

DAWeb L2-S4-INFO- USTO-MB /

<hn> . . </hn> Titre de niveau n, de 1 à 6

Et aussi: div, hr, pre sans oublier body !

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 12/56

<ul> . . </ul> Liste non triée, liste à puces

Et aussi: dl, dt, dd

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 13/56

Création d'un lien hypertexte, ou vers un point

<a href = "http://www.univ-usto.dz">USTO-MB</a>

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 14/56

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 15/56

Les ancres (liens internes)

 Permettent de créer un lien vers un endroit précis de la

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 16/56

Pour permettre le déplacement dans une même page :

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 17/56

Ou d'attribuer à l'élément vers lequel on veut pouvoir

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 18/56

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 21/56

Les adresses du Web ou URL ( Uniform Resource

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 22/56

<b>texte gras</b> texte gras

Et aussi: br (pour sauter des lignes), code, sub,

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 24/56

Définit une ligne d'un tableau

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 25/56

Définit une cellule de données

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 26/56

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 27/56

align = left, bottom, middle, top, right

<img src=‘’monimage.jpg’’ />

L.BAGDADI DAWeb -Aide Ingénieur Dept Info USTO-MB 28/56

L'élément HTML <iframe> représente un contexte de

DAWeb L2-S4-INFO- USTO-MB /

DAWeb L2-S4-INFO- USTO-MB /

HTML permet, via des objets nommés "formulaires",

DAWeb L2-S4-INFO- USTO-MB /

DAWeb L2-S4-INFO- USTO-MB /

DAWeb L2-S4-INFO- USTO-MB /

DAWeb L2-S4-INFO- USTO-MB /