Conception Web
Chapitre1:HTML 5
1 Elaboré par: Hela Limam
AU: 2022/20223
Objectifs du cours
Connaître et maîtriser Les outils nécessaires à la mise
en place d'un site web dynamique : langage HTML,
feuilles de style, bases de données, langage PHP.
Savoir créer son propre site.
Savoir manipuler une base de données à partir d’un
site.
La mise en pratique en TP avec différents outils
2
Plan du COURS
Le langage HTML 5
Les feuilles de style(CSS 3)
Le langage PHP
3
Le langage HTML
Il a fait son apparition dès 1991 lors du lancement du Web.
Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez
ce qui doit être affiché sur une page web : du texte, des liens, des images etc..
HTML 5 : c'est la dernière version. De plus en plus répandue, elle fait beaucoup
parler d'elle car elle apporte de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc. C'est cette version que nous allons
découvrir ensemble.
4
5 Le langage HTML
HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText
Markup Language). Il ne s’agit pas d’un langage de programmation
proprement dit. C’est un langage de mise en forme à base de balises. Pour
avoir une idée de l'aspect d'une page écrite en HTML, cliquez sur
"Affichage" (ou "View") dans votre navigateur, puis sélectionnez "page
source".
Les balises permettent d'organiser le contenu du site.
Les balises sont interprétées par le navigateur Internet (Firefox ou IE).
Les pages du site sont liées par des liens hypertextes sur lesquels on clique
pour naviguer.
Les nouveautés dans le code HTML
Un allègement du code: certaines balises ont été simplifiées
Code HTML Code HTML 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html>
Strict//EN" «
<head>
<html xmlns=" xml:lang="fr">
<meta charset="utf-8" />
<head>
<link rel="stylesheet" href="[Link]" />
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"> <script src="[Link]">
<link rel="stylesheet" type="text/css" href="[Link]" /> </script>
<script type=”text/javascript” src=[Link]"> </head>
</script> <body>
</head> </body>
<body> </html>
</body>
</html>
6
Les balises usuelles du langage HTML
Les balises simples
Les listes
Les tableaux
Les liens
Les ancres
Les images
Les formulaires
7
Qu’est ce qu’une balise (1/2)
Une balise est une "instruction" comprise entre crochets < > qui possède un
nom et parfois des attributs. <br> est, par exemple, la balise utilisée pour
spécifier qu'il faut passer à la ligne.
La plupart des balises doivent être ouvertes puis refermées. On retrouvera
donc souvent une balise de début et une balise de fin.
La balise de fin porte le même nom que la balise de début mais est en plus
précédée du signe /.
Par exemple: <b>mon texte en gras (bold)</b>.
8
Qu’est ce qu’une balise (2/2)
Le nom de la balise (contenu entre les crochets) n'est pas sensible à la
casse: il peut être écrit indifféremment en majuscule, en minuscule ou en
un mélange des 2.
Syntaxes possibles:
Une balise pourra contenir des attributs <balise attribut1=A
attribut2=B>TEXTE</balise>
balises ouvrantes <balise> TEXTE balises fermantes </balise >
<balise attribut=A >
<balise>
9
Comment écrire du code HTML ?
En utilisant un éditeur de texte basique de type bloc-notes ou note pad. On
peut aussi utiliser un éditeur spécialisé tel que le front page,Un des plus
puissants :Dreamweaver.
Enregistrer son programme et lui attribuer l’extension html ou htm.
Ouvrir avec votre navigateur Internet.
NB: vous n'aurez pas besoin d'être connecté à Internet pour créer votre site.
Chaque navigateur a sa propre interprétation du langage HTML.
La transformation du document HTML en page WEB s’effectue par un sous
programme appelé moteur de rendu HTML qui est propre au navigateur.
10
La structure du document HTML
1. Copiez ceci dans votre éditeur:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html
1. sauvegardez le document avec comme extension ".htm" ou ".html", et comme
type "texte seulement" ou "tout type (*.*)";
2. Doublecliquez sur le document: votre navigateur par défaut sera alors ouvert
sur la page.
11
Explication des balises utilisées
<html> et </html> : informent votre navigateur qu'il s'agit d'une page HTML; la
première balise doit donc être la première de votre code, et la seconde doit être la
dernière.
<body> et </body> : informent votre navigateur qu'il s'agit du corps de votre
document; c'est là que vous allez placer textes, images, et tout ce que contiendra votre
page; la balise <body> doit se situer après la balise de fermeture de l'entête </head>.
HTML Headings sont les niveaux de titres définis de <h1> à <h6> .<h1> définit le
plus haut niveau, H6 le plus bas
<p> la balise qui permet de délimiter les paragraphes
12
Les balises simples
Les commentaires :
<! --ceci est un commentaire dans mon fichier HTML-- >
<! il n'apparaitra donc pas dans le texte de mon document >
<br>: passage à la ligne;
<b>: mettre un texte en gras (bold);
<i>: mettre un texte en italique;
<u>: souligner un texte (underline);
<center>: centrer un texte;
etc...
Exemple En tapant :
<center> <b> <u> Mon texte </u> </b> <br> Et la suite... </center>
Vous obtenez :
Mon texte
Et la suite...
13
14 Les listes
<!DOCTYPE html>
<html>
<OL> correspond aux listes numérotées <body>
(Ordered List); <h2>An Unordered HTML List</h2>
<ul>
<UL> aux listes à puces (Unordered
<li>Coffee</li>
List); <li>Tea</li>
<LI> sert à spécifier qu'on démarre un <li>Milk</li>
nouvel élément de liste; </ul>
a. <ol type="a"> <h2>An Ordered HTML List</h2>
<ol>
b. <ol type="a"> <li>Coffee</li>
I.<ol style="liststyletype: upper- <li>Tea</li>
roman"> <li>Milk</li>
II.<ol style="liststyletype: upper-roman">
</ol>
</body>
</html>
Les tableaux
<TABLE> et </TABLE> servent respectivement à ouvrir une nouvelle table, et fermer
la table courante;
<TR> et </TR> servent à définir une ligne du tableau:
row entoure les données qui se trouvent dans les lignes d’un tableau.
<TD> et </TD> servent à définir une cellule du tableau (a noter que </TD> n'est pas
indispensable, pour la même raison que </LI>):
data indique une cellule du tableau.
<TH> et </TH> servent à définir un titre de ligne ou de colonne (le texte apparaît alors
centre en gras dans la cellule correspondante);
<CAPTION> et </CAPTION> servent à définir un titre pour le tableau.
15
Les tableaux
Les attributs du tableau
Colspan:fusion de colonnes
une cellule sur largeur de plusieurs colonnes.
La valeur de l’attribut définit la largeur en colonnes de la cellule.
Rowspan:fusion de lignes
Une cellule sur hauteur de plusieurs lignes.
La valeur de l’attribut définit la largeur en colonnes de la cellule.
<TABLE cellspacing =".." cellpadding =".." width =".." > </TABLE>.
Cellpadding:formater l’espace du texte dans une cellule.
Cellspacing:formater l’épaisseur du bord de la cellule.
Width:formater la dimension du tableau.
Align:formater le texte dans le tableau.
16
Les tableaux
Example du tabeau
En tapant:
<table>
<caption>Mon titre</caption>
<tr>
<th>Nom 1
<th>Nom 2
</tr><tr>
<td>Cellule 1
<td>Cellule 2
</tr>
</table>
Vous obtenez :
17
Les liens
On peut dans un document HTML mettre un lien vers un autre document en
utilisant la balise suivante :<A HREF="url">zone cliquable</A>.Cet hyperlien
peut être de plusieurs types :
Un autre document HTML:
<A HREF="[Link] Web de l'UREC</A>.
Un lien vers une image:
<A HREF="[Link]">Image de la rétine</A>
Un lien sur fichier son, ou vidéo à charger, un fichier compressé :
<A HREF="[Link]">cliquez ici pour visionner l'animation</A>
Un lien vers un programme de composition de mail:
<A HREF="[Link] texte </A>
Cette directive mailto permet de spécifier le champ sujet :
<A HREF="[Link] texte</A> 18
Les ancres
On peut dans un document HTML mettre des ancres à l'aide de
la balise :<A NAME="nom">
Ces ancres pourront être appelées dans le même document, ce
qui permet d'écrire des références croisées (Un sommaire par
exemple).
Créer un lien vers un élément de la même page
<!-- <a> élément liens vers la section ci-dessous -->
<p><a href="#section_further_down">
Passez à la rubrique ci-dessous
</a></p>
<!-- Rubrique à relier -->
<h2 id="section_further_down">Section plus bas</h2>
19
Les images
On peut insérer des images dans une page:
<img src= "adresse de l’image "> pas de balise fermante.
Si le fichier graphique se trouve dans le même dossier que le fichier html, il suffit
de donner le nom du fichier.
S’il s’agit d’un fichier d’un autre dossier, il faut préciser le chemin relatif.
Dimensions:
Bordure d’une image: <img src= "adresse de l’image " border=n> n en pixels.
Alignement des images: <img src="" align=right ou middle ou left>.
20
Les images
Espacement entre image et texte: <IMG> dispose de deux attributs:
Hspace (espacement horizontal;
Vspace (espacement vertical);
Attribut de taille d'image (redimensionne):
<img src="" width=230 height=120>
Attention à la taille (poids en kilo-octets) des images !
On peut mettre une image de fond de page:
<body background="ma_photo.jpg">
21
22 Nouveauté pour les images
Les figures
Utilisez un élément <figure> pour annoter une photo dans un
document, et un élément <figcaption> pour définir une
légende pour la photo
Les formulaires
La déclaration d'un formulaire
La définition des différents éléments du formulaire se fait en utilisant l'élément
<FORM>. L'action à réaliser pour traiter le formulaire doit être précisée en
utilisant les deux attributs suivants :
L'attribut ACTION:
Il indique l'action à exécuter lorsque lors de l'envoi des données. Ce sera
souvent un logiciel du serveur activé en utilisant la passerelle CGI. On peu
aussi utiliser un script JAVAscript.
L'attribut METHOD:
Il permet de définir la méthode de transfert des données vers le serveur. Les
deux valeurs possibles sont GET et POST.
La syntaxe habituelle est donc :
<FORM METHOD="POST"
ACTION="[Link]
23
Les formulaires
method="post / get" méthode de requête HTTP pour soumettre les
données du formulaire ;
action="url" pour indiquer le script à exécuter quand on clique sur le
bouton de soumission ;
name nom du formulaire qui expédie les données vers le script (CGI,
PHP), utilisé par le serveur et par JavaScript ;
24
25 La différence entre GETet POST
GET POST
Visibilité Visible pour l’utilisateur dans le champ d’adresse Invisible pour l’utilisateur
Marque-page et historique de navigation Les paramètres de l’URL sont stockés en même temps L’URL est enregistrée sans paramètres URL.
que l’URL.
Cache et fichier log du serveur Les paramètres de l’URL sont stockés sans chiffrement Les paramètres de l’URL ne sont pas enregistrés
automatiquement.
Comportement lors de l’actualisation du Les paramètres de l’URL ne sont pas envoyés à Le navigateur avertit que les données du formulaire
navigateur / Bouton « précédent » nouveau. doivent être renvoyées.
Type de données Caractères ASCII uniquement. Caractères ASCII mais également données binaires.
Longueur des données Limitée - longueur maximale de l’URL à 2 048 Illimitée.
caractères.
Les éléments du formulaire
Les éléments de formulaires sont répartis en 3 classes :
Input
Champs de saisie de texte et diféérents types de boutons
Select
Listes (menus déroulants et ascenseurs)
Textarea
Zone de saisie de texte libre
Chaque élément doit être nommé, pour cela on utilise l'attribut NAME. Le
nom ainsi défini permet d'identifier les données lors de leur envoi. Il doit
être unique, sauf dans le cas d'un ensemble composé de plusieurs
éléments (boutons radio par exemple). Un autre attribut VALUE es
commun à ces balises, mais son rôle est différent selon le type d'élément
utilisé.
26
L’élément INPUT
Cet élément est utilisé pour définir des zones d'entrée de texte
simple, des boutons, des cases à cocher ou des boutons radio. Le
type d'élément dont il s'agit sera précisé en utilisant l'attribut
TYPE.
27
L’élément SELECT
Cet élément sert à définir des listes (menus déroulant ou ascenseurs).
On l’utilise avec l'élément OPTION.
28
L’élément Textarea
Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs
ROWS et COLS.
29
30 Des formulaires améliorés
Il est possible de spécifier de toutes nouvelles valeurs dans le champ
“type” des balises input, afin d’indiquer le type de contenu du champ.
C’est particulièrement utile afin d’effectuer une première validation du
contenu avant l’envoi des informations au serveur.
C’est également très important pour la navigation depuis un smartphone,
qui affichera un clavier adapté selon le type de contenu.
Par exemple, pour le champ input suivant :On aura un clavier sur un
iPhone plus adaptéIl existe bien d’autres nouveautés pour le code HTML,
mais je pense que c’est suffisant pour une première introduction. Passons
maintenant au Javascript.<input type="tel" />
31 Les nouveaux éléments de formulaire
Le HTML5 apporte de nouveaux éléments pour les
formulaires
<datalist>: Spécifie une liste pré-définis d’options pour
un élément <input>.
<output>: Représente le résultat d’un calcul (réalisé par un
script par exemple).
<optgroup>: Utilisé dans un formulaire, permet de créer un
groupe d'options parmi lesquelles on peut choisir dans un
élément <select>.
<label>: représente une légende pour un objet d'une interface
utilisateur,
32 Types d'entrée
Il existe donc à présent de nombreux nouveaux types qui viennent
compléter les anciens
types text, hidden et password, chekbox et radio. Les principaux
sont :
number : pour renseigner une valeur numérique.
email : pour accueillir des adresses mails valident.
url : pour accueillir des liens hypertextes.
color : pour accueillir une couleur au format hexadécimal
(exemple : #eeaaff). Certains navigateurs affichent une palette
pour inviter l'internaute à sélectionner une couleur.
date : pour accueillir une date, certains navigateurs affichent un
calendrier.
time : pour accueillir un horaire, certains navigateurs affichent un
sélecteur.
file : pour accueillir un champ afin d'uploader un fichier.
Chapitre1: HTML5 / CSS3
33 Exemples
34 Exemples
35 Nouveaux attributs dans HTML 5
Required: Oblige la saisie du champ.
Pattern: Les patterns ou masques de saisie permettent de
contrôler le format de données saisi dans un champ de
formulaire. Les types : email, url, tel que nous avons utilisé
avant sont des patterns prédéfinies.
Exemple: pattern[a..z0..9A..Z]{4}
autofocus : champ sélectionné lors du chargement de la page
Placeholder: Permet d'afficher un texte indicatif dans le champ.
min, max, step: Ces attributs concernent les champs de texte
de type: number, range, date, datetime, month, week, time.
Chapitre1: HTML5 / CSS3
36 Et aussi des balises multimédia
<video>: Cette balise intègre directement un lecteur vidéo dans la page, avec des
boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube
intégré à votre page et natif au navigateur !
<audio>: Cette balise est l’équivalent de la balise video mais pour l’audio. En 3 lignes
de code vous avez un lecteur MP3 !
<canvas>: Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit
d’une surface sur laquelle il est possible de tracer des formes et de les animer.
En résumé… C’est dans cette zone que sont réalisées des animations ou des [Link]
noms n’ont pas été choisis au hasard. Google a fourni au W3C les chiffres de la
fréquence d’utilisation de tous les id utilisés sur les sites indexés par le moteur de
recherche, et ceux-ci font partie de ceux qui sont les plus employés.