HTML

DEVELOPPEMENT WEB
HTML
HTML
Objectifs du cours
Après ce cours vous serez capable de:
– Utiliser les outils pour travailler avec HTML
– Créer un site web avec HTML
– Valider votre site web
– Créer des formulaires avec HTML
HTML
Plan du cours
 Introduction
 Les bases des balises en html
 Quoi d’autres avec le html?
 Validation
 Les formulaires
Ferdinand BATANA, ferdinand.batana@ipnetexperts.com, 99 31 07 19/92 71 30 37

HTML
INTRODUCTION
introduction
Le html est partout

• HTML(HyperText Markup Language) a pour role de gérer et
d’organiser le contenu
• Tous les sites web utilisent le HTML
• Certaines applications mobiles et desktops utilisent le HTML
Introduction
Qui font la maintenance de HTML
• Comme tout autre langage, il y a des mises à jour

– La version 4.0.1 a été standardisée en 1999
– Le html5 a été recommandé depuis 2014
• Deux groups travaillent sur le html
– WHATWG
– W3C
• Nous avon déja parlé du W3C
Introduction
WHAT Working Group
 Web Hypertext Application Technology Working Group

 Fondé in 2004
 Une communauté qui s’est intéressée à l'évolution

du langage HTML et des technologies connexes
 Composé par des ingénieurs de Apple, de Mozilla

Foundation, d'Opera Software et de Google
Introduction
WHAT Working Group & W3C

 En mai 2007, le W3C adopte le HTML5 du WHATWG comme
point de départ de son travail
 Depuis lors, W3C et WHATWG travaillent ensemble sur le

développement de HTML5
Tout ceci est bon mais……………………
Comment écrire du html
introduction
Presentation
 Un fichier html a une extension .html

 Un fichier html est fait de balises (tag)
 Nous allon apprendre les balises
pas à pas
introduction
Presentation
 Les balises sont entourées de < et >
 <balise >
 Deux types de balises
 Les balises paires
 < p > …</ p >
 Balises orphelines
 < br / >
 Les noms de balises sont toujours en letter minuscule (bonnes pratiques)
introduction
Les balises de type block

 La disposition des données
 Utilisé pour afficher les données suivant l’axe vertical
 Utiliser pour structurer les pages en différents blocks
 Exemple: <p>, <h1>, <h2>, etc…
introduction
Les balises de type inline

 La disposition des données
 Utilisées pour afficher les données suivant l’axe horizontal
 Doivent etre entouré des balises de type groupe
 Exemple: <span>, <em>, <strong>, etc…
introduction
Les outils
 Plusieurs outils sont disponibles pour écrire du html
 Éditeurs de codes:
 Notepad++
 SublimeText
 TextMate
 IDE
 Adobe Dreamweaver
 WebStorm
introduction
Les outils
 Beaucoup d’outils sont disponibles
 Les navigateurs modernes incorporent un inspecteur
permettant d’éditer, de déboguer et de monitorer le
HTML, le CSS et du JS
 Google Chrome, Opera, Apple Safari
 Microsoft Edge
 Mozilla Firefox
 Vivaldi
 …
Questions ?
HTML
Balises html de base

Étape par étape

 Nous allons écrire une page web simple
 Un cv simple
 A fin de découvrir les balises html de base
 Sans du css
 À la fin, chacun pourra concevoir son propre cv
Exemple de cv
Exemple de cv
Avant tout: les commentaires

 Invisible aux navigateur
 Utiles:
 Reprise du projet après un long moment
 Compréhensible pour d’autres développeur web
 Travail en équipe
 …….
<!–- ceci est un commentaire qui va vous aider dans le futur --

>
Étape 1: Structure
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Étape 1: Structure
<!DOCTYPE html>
 Indique au navigateur qu’il sagit d’une page html

 Le Doctype doit être placé avant la balise principale
Étape 1: Structure
<html>
...
</html>
 Balise de type block

 Balise principale
 Contient les balises <head> et <body>
Étape 1: Structure
<head>
...
</head>
 Balises de type block contenant

 <title>
o Le titre de la page
 <style> et <link />
o Contient les styles (css, à voir plus loin)
Étape 1: Structure
<head>
...
</head>

 <script>
o Contient du JavaScript
 <meta />
o Aide au référencement et au l’encodage du page html
Étape 1: Structure
<body>
...
</body>

 Contient tous les élément qui permettent de décrire le contenu de
la page
o Paragraphes
o Images
o Etc…………..
Étape2 : titre de la page

• <!DOCTYPE html>
• <html>
• <head>
• <title>My resume</title>
• </head>
• <body>
• </body>
• </html>
Étape3 : les titres

<hn>...</hn>
Six balises pour définir les titres

Etape 3 les titres
• <body>
– <h1>John Doe</h1>
– <h3>Programming Languages</h3>
– <h3>Foreign Languages</h3>
– <h3>More about me ?</h3>
• </body>
• ...
Etape 4: les paragraphes
<p>...</p>
• Définit un paragraphe
• Ajoute automatiquement une nouvelle ligne
<br />
Pour un retour à la ligne ...
<body>
<p>First Paragraph</p>
<p>Second <br/> Paragraph</p>
</body>
...
Etape 4: les paragraphes

Etape 5: les lists

<ol>...</ol>
• Définit une liste ordonnée
• Chaque élément est défini par : <li></li>
<ol>
<li>HTML</li>
<li>Javascript</li>
</ol>
Etape 5: les lists

<ul>...</ul>
• Définit une liste non ordonnée
• Chaque élément est défini par : <li></li>
<ul>
<li>HTML</li>
<li>Javascript</li>
</ul>
• ...
• <body>
listes
– <h1>John Doe</h1>
– <ol>
» <li>Programming Languages</li>
» <li>Operating Systems</li>
» <li>Foreign Languages</li>
– </ol>
– ...
– <h3>Programming Languages</h3>
– <ul>
» <li>PHP</li>
» <li>Ruby</li>
» <li>JavaScript</li>
– </ul>
• </body>
• ...
Etape 5: les lists

Etape 6: les liens et ancres

<a>...</a>
 Utilsé pour créer:
 Un lien vers une autre ressource
Exemple: un fichier à télécharger, un élément sur la même page
ou sur une autre page etc……

 Trois types de liens:
 Liens relatifs
<a href="file.html">My link</a>
 Liens absolus
<a href="www.website.com/file.html">My link</a>


 Trois types de liens:
 Liens vers une ancre
 Accès direct à une section spécifique d’une page
<span id="myAnchor">My text</a>
<a href="file.html#myAnchor">My link</a>


Etape 7: les images
<img/>
 Utilisé pour afficher une image
 Deux attributs sont obligatoires
 Src = “url”
 Alt = “texte alternative”
 Title: un titre
Etape 7: les images

Exemple
<img src="picture.jpg" alt="A picture" title="My picture" />
 Règles par rapport aux attributs:
 Doivent etre écrite dans la balise ouvrante

 Les attributs sont écrit en minuscule
Etape 7: les images

Etape 8: les tables
<table>...</table>
 Divisé en lignes (lignes de table):
<tr>...</tr>
 Chaque ligne contient:
 Un en-entête (table header):
<th>...</th>
 Les données (table data) : <td>...</td>
 Les balises td et th forment les cellules
Etape 8: les tables
<table>...</table>
 Utilisations :
 Classification des données
 Affichage en mode tabulaire
 Mauvaise utilisation:
 affichage
Etape 8: les tables

 Fusion de cellules
 Deux attributs:
 Colspan: pour la fusion des colonnes
 Rowspan: pour la fusion des lignes
 Les deux attributs peuvent être utilizes
pour la même cellule
<table border="1">
<tr>
<th colspan="2">Header</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">Merging two lines</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td colspan="2">
Fusionning two cells
</td>
</tr>
</table>
...
<h3><a name="Foreign">Foreign Languages</a></h3>
<table>
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="5">Level</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
...
...
<tr>
<th rowspan="3">English</th>
<th>Read</th>
<td></td><td></td><td></td><td></td><td>X</td>
</tr>
<tr>
<th>Spoken</th>
<td></td><td></td><td>X</td><td></td><td></td>
</tr>
<tr>
<th>Written</th>
<td></td><td></td><td></td><td>X</td><td></td>
</tr>
</table>
...
Etape 8: les tables

Questions?
HTML
QUOI D’AUTRE ?
Quoi d’autres
Section
 La balise <section> sert à regrouper des contenus en fonction de leur
thématique
 Un chapitre par exemple
<section>
<h1>Chapter 2 : Basic HTML tags</h1>
<p>
HTML markup consists of several key components,
including elements […], character-based data types,
character references and entity references
</p>
</section>
Quoi d’autres
Article
 La balise <article> sert à englober une portion généralement autonome
de la page
 Nouvels
 Blogs
 Etc…………
<article id="comment-6">
<header>
<h4>John Doe</h4>
</header>
<p>Very good course ;-)</p>
</article>
Quoi d’autres
nav
 La balise <nav> doit regrouper tous les principaux liens de navigation du
site
 Exemple: site amazone (La balise <nav> doit regrouper tous les
principauxliens de navigation du site page 123)
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>
Quoi d’autres
Header
 <header> : l'en-tête
principauxliens de navigation du site page 121)
<header>
<h1>Introduction to HTML5</h1>
<p class="author-line">By ferdinand</p>
</header>
Quoi d’autres
<footer> : le pied de page
principaux liens de navigation du site page 122)
<footer>
<p>© 2017 Ipnet Tnstitue of Technologie
International University</p>
</footer>
Quoi d’autres
Resumé
<header>
<nav>
<article>
<aside>
<section>
<footer>
<body>
<header></header>
Semantic Example
<article>
<section>

</section>
<section>

</section>
</article>
<aside>

</aside>
<footer></footer>
</body>
Quoi d’autres
Caractère spéciaux
 Code de base
 &#+ unicode;
 Exemple:
<p> Web'n'Dev © </p>

Quoi d’autres
Caractères spéciaux
 Les espace sont évités par défaut dans le html
<p> Web'n'Dev rocks</p>
<p> Web'n'Dev rocks</p>
Quoi d’autres
Caractères spéciaux
 Cas particulier pour les accents
 Règle: « & » + lettre utilisée + abbrevation + « ; »
Quoi d’autres
Exemples :

Quoi d’autres
Autres balises html

 Il y a beaucoup d’autres balises html
 Vous pouvez les retrouver ici:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Questions?
HTML
Exercice
 Maintenant c’est votre tour
 Créer votre cv
 Votre statut
 Votre photo
 Une description de vous
 Les diplomes
 Vos compétences
 Expériences professionnelles
 Centre d’interêt
HTML
Validation
Validation
Pourquoi valider ?
 La validation est essentielle pour la normalization
 La portabilité
 Contrôle facile
 Reférencement
 …………………
Validation
validation
http://validator.w3.org/
 Possibilté de valider par:
 URI, fichier, code source
 Limite:
 Validation par page
Questions?
HTML
Exercices
 Essayer de valider certains sites web
 http://www.google.com
 http://www.ipnetuniversity.com
 http://www.w3.org
 Validez votre page de cv
HTML
FORMULAIRES
Formulaires
Utilisations
 Très important pour le dynamisme du web
 Permet aux utilisateurs d’inserer les données
 Envoi et reception des données

Formulaires
structure de base
<form id="myForm" action="page.html" method="post">
<!-– Form codes -->
</form>
 Attributs
 Action: la page qui va traiter les données
 Method: méthode d’envoie des données saisie par
l’utilisateur
Formulaires
Méthode d’envoie des données - GET

 Les données sont envoyées par URL
 <URI>?name1=value1&name2=value2
 Problèmes de sécurité
 Nombre de caractères dépendant des navigateurs (limité à 255 pour
certains)
Formulaires
Méthode d’envoie des données - POST

 Les données sont envoyées par le protocole HTTP
 Le nombre de caractère est presque sans limite
 Non visible à l’utilisateur
 Visible dans dans la requête HTTP
 Un peu plus sécurisé que la méthode GET

Formulaires
Type de données entrées

 Les valeurs des attriuts de la balise input
 Type “text”
• Affiche un champ de type text
• Valeur optionelles: size, maxlength
<input type="text" name="firstname" value="textfield" />

Formulaires

 D’autres valeurs existent:
• color • number &
• date & datetime range
• email • url
• week
<input type="range" min="1" max="5" />
Formulaires

 Type « password »
• Les caractères saisi par l’utilisateur est
remplacé par *
<input type="password" name="pass" value="1234" />

Formulaires

 Type « checkbox »
• Affiche un champ de sélection permettant de
sélectionner ou de désélectionner
• Attribut optionel: cheked
<input type="checkbox" name="day" value="6"
checked="checked" /> Saturday
Formulaires

 Type « radio »
• Les zones d'options vous permettent de faire un
choix(et un seul) parmi une liste de possibilités
<input type="radio" name="sex" value="m" /> Man

<input type="radio" name="sex" value="f"
checked="checked" /> Woman
Formulaires

 Type « submit »
• Bouton
• Envoie les données du formulaire
<input type="submit" value="Send contents" />
Formulaires

 Type « reset »
• Bouton
• remise à zéro du formulaire
<input type="reset" value="Reset values" />

Formulaires

 Type « button »
• Bouton
• bouton générique, qui n'aura (par défaut) aucun effet
<input type="button" value="No Action" />

Formulaires

 Type « image »
• Affiche une image
• fonctionne comme un bouton de type submit
<input type="image" src="go.png" alt="Go" />

Formulaires

 Type « hidden »
• Caché, invisible à l’utilisateur
<input type="hidden" name="hide" value="Invisible" />

Formulaires

 Type « file »
• Sélection de fichier
• La méthode POST et l’attribut enctype obligatoire dans
la balise <form>
<form id="form1" method="post" enctype="multipart/form-
data">
<input type="file" name="file_send“ />
</form>
Formulaires
Autres éléments
 La balise button
 Affiche un bouton spécifique
<button name="send" type="submit">

Envoyer <img src="accept.png" alt="wow" />
</button>

<button name="delete" type="reset">
Effacer <img src="delete.png" alt="oops" />
</button>
Formulaires
Autres éléments
 Liste déroulante:
 Balises
• <select></select>
• <optgroup></optgroup>
• <option></option>
 Attributs
• size
• multiple
• selected
Formulaires
Autres éléments
<select name="FrenchDepartments">
<optgroup label="Alsace">
<option value="67">Bas-Rhin</option>
<option value="68">Haut-Rhin</option>
</optgroup>
<optgroup label="Corse">
<option value="2B">Haute-Corse</option>
<option value="2A">Corse-du-Sud</option>
</optgroup>
</select>
Formulaires
Autres éléments
 Labels
 Balise <label> </label>
 Pour lier le libellé au champ
 Utilisation implicite:
<label>
<input type="radio" name="sex" value="h" /> Homme
</label>
Formulaires
Autres éléments
 Labels
 Balise <label> </label>
 Pour lier le libellé au champ
 Utilisation EXPLICITE:
<input type="radio" name="sex" value="f" id="femme" />
<label for="femme">Femme</label>
 Utilisez la forme explicite de préférence

• Facilite l’utilisation du css
Formulaires
Autres éléments
 Textarea
 Zone de texte multiligne
 Attributs: cols, rows
<textarea cols="25" rows="10" name="comments">

Put your text here
</textarea>
Formulaires
Autres éléments
 Fieldset et legend:
<fieldset>
<legend>Informations</legend>
<label for="last">Lastname:</label>
<input type="text" name="last" />
<label for="first">Firstname :</label>
<input type="text" name="first" />
</fieldset>
Questions?

Formulaires
Exercices
 Créer une nouvelle page nommé
contact.html pour reproduire la
forme suivante:
 Ajouter un lien dans votre cv

menant vers ce formulaire
HTML
AUDIO ET VIDEO
Audio & vidéo
Introduction
 Nous avons beaucuop de contenu audio et video sur
le web
 Cependant, aucune balise HTML ne permettait
jusqu'ici de gérer la vidéo et audio
 Il fallait à la place utiliser un plugin, com Flash
Audio & vidéo
Audio
 Un élément audio représent un son ou un contenu
streaming
 Un contenu audio est contenu dans les balises
<audio>
 Exemple:
<audio
src="http://images.wikia.com/starwars/images/3/38/UlicFal
ls.ogg" controls>
Your browser doesn't support the HTML5 audio element.
</audio>
Audio & vidéo
Vidéo
 Un contenu vidéo est contenu dans les balises <video>
 Exemple:
<video src="myVideo.mp4" poster="movie.jpg" controls>

Your browser doesn't support the HTML5 video element.
</video>
Audio & vidéo
Les attributs
 Les vidéos et audio ont certains attributs en
communs:
 Preload: pour prétélécharger la ressource
 Autoplay: jouer automatiquement le média dès
que la page est chargée
 Controls: permet au navigateur de charger les
menus de control du média
 Loop: rejouer le média en boucle
Audio & vidéo
Sources alternatives
 L’élément source permet de specifier plusieurs
sources de media
 Permet ainsi au navigateur de choisir sa meilleure

source
Audio & vidéo
Sources alternatives
 Exemple
<audio controls autoplay loop>

<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser doesn't support the HTML5 audio element.
</video>
Questions?
HTML
La fin
Merci pour votre attention

HTML

Transféré par

Informations du document

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

HTML

Transféré par

Droits d'auteur :

Formats disponibles

DEVELOPPEMENT WEB

Ferdinand BATANA, ferdinand.batana@ipnetexperts.com, 99 31 07 19/92 71 30 37

Le html est partout

Qui font la maintenance de HTML

• Comme tout autre langage, il y a des mises à jour

WHAT Working Group

 Web Hypertext Application Technology Working Group

 Une communauté qui s’est intéressée à l'évolution

 Composé par des ingénieurs de Apple, de Mozilla

WHAT Working Group & W3C

 Depuis lors, W3C et WHATWG travaillent ensemble sur le

 Un fichier html a une extension .html

Les balises de type block

Les balises de type inline

Balises html de base

Étape par étape

Avant tout: les commentaires

<!–- ceci est un commentaire qui va vous aider dans le futur --

 Indique au navigateur qu’il sagit d’une page html

 Balise de type block

 Balises de type block contenant

 Balises de type block contenant

 Balises de type block contenant

Étape2 : titre de la page

Étape3 : les titres

Six balises pour définir les titres

Etape 3 les titres

Etape 4: les paragraphes

Etape 4: les paragraphes

Etape 5: les lists

Etape 5: les lists

Etape 5: les lists

Etape 6: les liens et ancres

Etape 6: les liens et ancres

<a href="file.html">My link</a>

<a href="www.website.com/file.html">My link</a>

Etape 6: les liens et ancres

<span id="myAnchor">My text</a>

<a href="file.html#myAnchor">My link</a>

Etape 6: les liens et ancres

Etape 7: les images

Etape 7: les images

<img src="picture.jpg" alt="A picture" title="My picture" />

 Règles par rapport aux attributs:

 Doivent etre écrite dans la balise ouvrante

Etape 7: les images

Etape 8: les tables

Etape 8: les tables

Etape 8: les tables

<h3><a name="Foreign">Foreign Languages</a></h3>

Etape 8: les tables

<footer> : le pied de page

<p> Web'n'Dev &#169; </p>

<p> Web'n'Dev rocks</p>

Ferdinand BATANA, ferdinand.batana@ipnetexperts.com, 99 31 07 19/92 71 30 37

Autres balises html

 Très important pour le dynamisme du web

 Permet aux utilisateurs d’inserer les données

 Envoi et reception des données

 Action: la page qui va traiter les données

 Method: méthode d’envoie des données saisie par

Méthode d’envoie des données - GET

 Nombre de caractères dépendant des navigateurs (limité à 255 pour

Méthode d’envoie des données - POST

<p> Web'n'Dev © </p>