PROGRAMMATION
WEB
HTML5
DEFINITION
HTML (HyperText Markup Language) ou langage de balisage est né en 1989 sous l'impulsion de
Tim Berners Lee, " inventeur " du Web
❑Les balises servent à structurer les informations d’un document.
❑Un lien hypertexte (ou hyperlien) est un marqueur faisant référence a un document (autre
page html, image, son, vidéo) c’est à dire permet de passer d'un document à un autre .
N.B: HTML est aujourd'hui le seul langage de description de pages Web.
HTML n’est pas un langage de programmation.
HTML ne sert pas a décrire la mise en page
Peter KIDOUDOU Cours Developpement web
REMARQUE
HTML ne doit pas être confondu avec :
PHP : langage dont une application possible est d'être utilisé côté serveur pour générer du code
HTML
MYSQL : langage de requêtes d'accès à une base de données dont une application possible est
d'être utilisé côté serveur, par exemple avec PHP, pour générer du code HTML
JavaScript : langage orienté objet pouvant être utilisé côté client pour générer du code HTML
JQuery : bibliothèque libre de JavaScript
Ajax : architecture combinant notamment JavaScript, XML et CSS pour construire des applications
Web
Peter KIDOUDOU Cours Developpement web
WORLD WIDE WEB
❑Ensemble des pages webs reliées les unes aux autres par les liens hypertextes.
❑à distinguer d’internet, l’ensemble des machines reliées en elles.
Peter KIDOUDOU Cours Developpement web
HTTP, XML, HTML, XHTML
HTTP(Hypertext Transfert Protocol): est un protocole de communication client-serveur d’échanger
des ressources.
XML: est un langage de balisage générique :
• on peut créer ses balises,
• peut être utilisé dans n’importe quel contexte
HTML est un langage de balisage specialisé :
• les balises sont prédéfinies,
• on l’utilise pour les pages web
XHTML est un ensemble de normes pour écrire proprement du HTML.
Peter KIDOUDOU Cours Developpement web
PREMIERES BALISES
• < !doctype> : permet de préciser le type de document au navigateur (n’est pas une balise html),
• < html> : racine du document html,
• <head> : en-tete du document
• <body> : corps du document.
Peter KIDOUDOU Cours Developpement web
EN TÊTE DU DOCUMENT
La balise <META/>: Cette balise peut prendre différents attributs permettant de décrire les
métadonnées de la page html.
• charset : permet de decrire l’encodage des caractères sur la page (ascii, utf-8, . . .)
• name et content : decrivent respectivement le nom et le contenu de la metadonnée.
La balise <title>:
• Permet d’indiquer le titre de la page, affichée dans la barre d’outils du ´ navigateur.
• Sert également de titre lorsque la page est mise dans les favoris
Peter KIDOUDOU Cours Developpement web
SYNTAXE DES BALISES
Du point de vue de la syntaxe, il existe deux types de balises :
• <balise>………</balise>
• <balise/>: on parle de balises autofermantes.
Certaines balises, ouvrante ou autofermante, contiennent des attributs.
• La syntaxe est < balise attribut1=”valeur1” attribut2=”valeur2 ” >
• La valeur de l’attribut doit toujours être entre guillemet.
Peter KIDOUDOU Cours Developpement web
LES HYPERLIENS
Un hyperlien est un marqueur faisant référence a un document (autre page html, image, son,
vidéo).
La balise <a>: Permet de créer un hyperlien vers une autre page html.
Exemple:
<a href=”autre [Link]”>Je suis un lien</a>
Peter KIDOUDOU Cours Developpement web
LES IMAGES
La balise <img> permet de placer une image sur la page.
Attributs :
• src : indique ou se situe l’image (serveur local ou distant).
• alt : texte a afficher si le navigateur ne peut charger l’image
Exemple:
< img src=”[Link]” alt=”Photo de chaton” />
Peter KIDOUDOU Cours Developpement web
LES SONS
La balise <audio>: Permet de placer un fichier mp3, wav ou ogg (dépend du navigateur). ´
Attributs :
• src : indique ou se situe le son (serveur local ou distant).
• type : indique le format du fichier audio.
N.B: Il n’existe pas d’ attribut alt mais le texte mis entre les balises joue le même rôle.
Exemple:
< audio controls>
< source src=”fichier.mp3”/> < /audio>
Peter KIDOUDOU Cours Developpement web
LES VIDEOS
La balise <video>:
Permet de placer un fichier mp4, WebM ou ogg (dépend du navigateur)
N.B: Le fonctionnement des attributs est semblable a la balise <audio>
Exemple:
< video controls>
< source src=”fichier.mp4”/>
< /video>
Peter KIDOUDOU Cours Developpement web
LES DEUX GRANDES FAMILLES
DEBALISES
• Les balises de types block : le navigateur passe a la ligne avant et après l’utilisation de la balise.
• Les balises de types inline : le navigateur n’effectue pas de saut de ligne
Type block
<h1>…………<h6>: définir un type d’en tête
<p>: définir un paragraphe
Peter KIDOUDOU Cours Developpement web
LES DEUX GRANDES FAMILLES
DEBALISES
Type inline:
<br/>:aller a la ligne.
<strong>:définir un morceau de texte important (en gras par défaut).
<em>:mettre l’emphase sur une portion de texte (en italique par défaut).
Les deux balises génériques:
Il est possible d’utiliser des balises génériques:
<div>:balise générique de type block
<span>:balise générique de type inline.
Peter KIDOUDOU Cours Developpement web
HTML4
Peter KIDOUDOU Cours Developpement web
HTML5
Peter KIDOUDOU Cours Developpement web
STRUCTURER SA PAGE
Les balises HTML5 pour structurer sa page sont:
<main>:contenu principal.
<nav>:bloc contenant des hyperliens pour la navigation sur le site.
<section>:regroupe des informations sous une même thématique.
<article>:bloc de contenu indépendant (on pourrait le sortir de la page sans détériorer la
compréhension).
<header>:en-tete.
<footer>:pied de page.
<aside>:bloc d’information complementaire
Peter KIDOUDOU Cours Developpement web
STRUCTURER SA PAGE
Remarque:
<header> et <footer> peuvent être placées dans les 4 autres balises.
les balises <nav>,<section> et <article> peuvent s’inclure les unes les autres.
Peter KIDOUDOU Cours Developpement web
LES LISTES
La balise <ul>:permet de créer des listes. Chaque élément est marqué par la balise <li>
Exemple:
Pour ce cours j’aurai beson:
<ul>
<li>d’un ordinateur,</li>
<li>d’un videoprojecteur,<li>
</ul>
Peter KIDOUDOU Cours Developpement web
LES TABLEAUX
La balise <table> permet de creer des listes.
<tr> (table row) représente les lignes,
<th> (table header) représente les titres
<td>(table data) représente les cellules.
Exemple:
J’ai besoin :
<table>
<tr><th>Objet</th><th>Equipé</th></tr>
<tr><td>Ordinateur</td><td>oui</td></tr>
<tr><td>Vidéoprojecteur</td><td>oui</td></tr>
</table>
Peter KIDOUDOU Cours Developpement web
LES FORMULAIRES
HTML permet de d’écrire dans un formulaire :
• La liste des questions.
• Le format de données de chaque réponse.
Cependant il ne décrit pas les actions à effectuer en lien avec ce formulaire
Peter KIDOUDOU Cours Developpement web
LES FORMULAIRES : LES ÉLÉMENTS
• L'élément <form> permet de créer des formulaires, qui peuvent contenir des cases à cocher, des boutons radio,
des listes déroulantes … les données recueillies sont transmises à un programme qui s'exécutera sur le serveur
web et vous retournera le résultat.
• <form action="mon_programme.php">
• … éléments du formulaire
• </form>
Peter KIDOUDOU Cours Developpement web
LES FORMULAIRES : LES ÉLÉMENTS
<form name="mon_formulaire" action="mon_programme.php">
<input type="text" name="nom" value="" size="60" />
<input type="radio" name="rad1" value="" size="60" />choix1
<input type="radio" name="rad2" value="" size="60" />choix2
<input type="checkbox" name="chk1" value="" size="60" />choix1
<input type="checkbox" name="chk2" value="" size="60" />choix2
<select name="liste">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="envoyer" value="envoyer" />
</form>
Peter KIDOUDOU Cours Developpement web
LES FORMULAIRES : LES ÉLÉMENTS
<form name="my_form" action="mon_programme.php"> … </form>
• name = "chaine" spécifie le nom sous lequel le formulaire peut-être identifié, par exemple en
Javascript , je peux y faire référence avec l'expression: document.my_form
• action = "URL" spécifie l'URL (Uniform Resource Locator ), à laquelle le contenu est envoyé
• method= "GET" ou "POST", spécifie la méthode HTTP utilisée pour transmettre les
données. Avec GET elles sont ajoutées à l’URL avec POST elles sont envoyées au serveur dans
le corps du message.
Peter KIDOUDOU Cours Developpement web
LES FORMULAIRES : LES ÉLÉMENTS
Les éléments de type <input>:
• text : zone de texte,
• password : zone de texte masquée,
• submit : bouton de validation du formulaire,
• button : bouton simple,
• radio : bouton radio (un choix parmi plusieurs),
• checkbox : cases a cocher (un ou plusieurs choix),
• date : zone texte réservée aux dates (dépends du navigateur),
• email : zone texte reservée aux mails (dépends du navigateur),
• url : zone texte reservée aux urls (dépends du navigateur),
• number : zone texte reservée aux nombres (dépends du navigateur),
Peter KIDOUDOU Cours Developpement web
LES FORMULAIRES : LES ÉLÉMENTS
Les éléments de type <select>: permet de sélectionner une valeur dans un menu déroulant
<select name="my_list">
<option value="10">10</option>
</select>
name = "chaine", associe un nom aux données entrées dans cet élément select
value = "valeur", spécifie la valeur de l'élément option. Si cet élément est omis, c'est le contenu
de l'élément option qui est envoyé au CGI(Common Gateway Interface).
Peter KIDOUDOU Cours Developpement web
QUELQUES RÈGLES
Il est interdit d’imbriquer des balises de la sorte :
• <balise1><balise2></balise1></balise2>,
• Le nom des balises et des attributs est en minuscule,
• Les valeurs des attributs sont entre guillemets,
• Une balise de type inline ne peut contenir une balise de type block,
• La balise <body> ne peut pas contenir directement de balises de type inline,
• Tout texte doit être dans une balise,
• Une balise ne peut se contenir elle même.
Peter KIDOUDOU Cours Developpement web