Cours 2 Outils de Dév Initiation Au Web HTML Et Css

Outils de
Développement
Initiation au Web
Mr WANGUE Rameaux
ENSEIGNANT VACATAIRE (MASTER EN TECHNOLOGIE APPLIQUEE
DE L’INFORMATIQUE OPTION SECURITE DES DONNEES),
DEPARTEMENT DE GENIE INFORMATIQUE - INSTITUT SUPERIEUR
DE TECHNOLOGIE – UNIVERSITE DE BANGUI
Table des matières
I. INTRODUCTION ..................................................................................................... 2
1. Objectif du cours ................................................................................................... 3
2. Méthode du cours.................................................................................................. 3
1. Introduction .......................................................................................................... 5
2. Historique ............................................................................................................. 5
3. Le réseau Internet .................................................................................................. 6
4. Architecture .......................................................................................................... 7
5. Serveur.................................................................................................................. 7
III. Le WEB ............................................................................................................... 9
Serveur WEB.................................................................................................................. 9
1. Types de Sites ..................................................................................................... 10
2. HTML .................................................................................................................. 11
3. Le langage HTML ................................................................................................. 12
4. Principaux caractères de code ASCII de la langue française ................................... 13
5. Balise d’entête ..................................................................................................... 13
6. Les méta-données................................................................................................ 14
7. Corps de la page ................................................................................................. 14
8. Balises de mise en page ....................................................................................... 17
9. Balises de mise en page ....................................................................................... 18
10. Balises de mise en forme .................................................................................. 20
11. Les listes .......................................................................................................... 24
12. Liste non ordonnée .......................................................................................... 24
13. Les listes numérotées ....................................................................................... 25
14. Les listes emboîtées ......................................................................................... 25
15. Polices de caractères ........................................................................................ 28
16. Tableaux .......................................................................................................... 29
17. Les tableaux..................................................................................................... 33
18. Les Images ....................................................................................................... 36
19. Affichage des images ....................................................................................... 37
20. Liens et ancrés ................................................................................................. 38
21. Les formulaires ................................................................................................ 40
22. Attribut Input ................................................................................................... 40
23. Attribut Select .................................................................................................. 44
24. Zone de texte ................................................................................................... 45
25. Les maps ......................................................................................................... 47
IV. HTML ET CSS .................................................................................................... 48
1. Les propriétés du style ........................................................................................ 49
2. Définition de style ............................................................................................... 49
3. Ou définir le style ................................................................................................ 49
4. Explication .......................................................................................................... 50
5. Le style CSS ......................................................................................................... 50
6. div et span .......................................................................................................... 52
1
I. INTRODUCTION
Le génie logiciel est la branche de l’informatique et du génie industriel
qui s’occupe des méthodes du travail et des bonnes pratiques autour des
activités du développement.
L’évolution de complexité des taches et des langages de programmation

a exigé la création des logiciels pour le traitement (semi-)automatique
de programmes pendant leur développement.
Un outil de développement est un logiciel qui aide un développeur dans
le déroulement d’une activité de développement.
L’importance des outils de développement
Dans le cas général, les outils de développement nous aident à :

implanter une phase d’un processus de développement logiciel
automatiser des taches importantes et ennuyeuses
être plus efficace, nous ne pourrions pas avancer dans le
développement p.ex. comment écrire un programme sans un
éditeur (de texte)? comment l’exécuter sans un compilateur ou
un interprète?
Notre temps serait occupés par des taches moins “nobles” que la
conception abstraite, l’algorithmique, la résolution de problèmes —
qui constituent les vrais habilités du développeur p.ex. Combien
de temps il vous faut pour (ré-indenter une fonction de 40 lignes?
et pour renommer (sans capture) une structure de données dans
20 fichiers source?
pour exécuter 99 tests unitaires après un bug fix? ñ
déployer toto 2.0 sur 1’000 machines? ñ combien
d’actions manuelles dans chaque cas?
La pratique du génie logiciel à travers des années nous a amenés à
l’utilisation d’une multitude des outils de développement.
Les différentes phases dans l’outil de développement :
 Définition du projet : pourquoi ?

 Analyse des Besoins
2
 Définition des besoins (cahier des charges fonctionnels)
 Analyse des besoins (spécification)
 Planification (gestion de projet)
 Conception
 Développement (codage, test, intégration)
 Validation
 Qualification (test)
 Distribution (déploiement)
 Support
 Maintenance
1. Objectif du cours
Dans votre vie de développeur, l’utilisation des outils correspondants à
toutes taches du développement logiciel sera votre quotidien. Les
maîtriser est impératif (et dans votre intérêt).
Maîtriser les outils du développement logiciel
Efficacité dans l’exécution de tâche fréquent, non automatisables si

vous passez une heure à apprendre comment gagner 20 seconds sur
une tache que vous répétez 50 fois par jour, en combien de jours
vous aurez plus de temps à disposition?
Automatisation de tâches répétitives même gagne de temps
qu’avant, car l’ordinateur est souvent beaucoup plus rapide que nous!
A plus d’automatisation → moins d’erreurs
Des outils fondamentaux qui font une seule chose, bien aux outils
complexes.
2. Méthode du cours
Maîtriser les composantes individuelles, pour mieux comprendre leur

interactions et pouvoir en suite maîtriser leurs agrégations.
Le paradigme des environnements de développement intégré(IDE)
comme orchestrations d’outils plus simple.
L’accent sera mis sur les outils de développement typiques du logiciel
libre open source (libre eux-mêmes).
Avantage didactique : on peut étudier leur fonctionnement
3
Une grosse partie des activités de développement sont liées à la
collaboration entre développeurs : le monde du libre est un cas extrême
de collaboration.
Demande importante et à la hausse dans le marché de l’IT.
4
II. CREATION DES PAGES WEB EN HTML
1. Introduction
 Un réseau est un ensemble d’objets interconnectés les uns avec les
autres :
o permet de faire circuler des éléments entre chacun de ces
objets.
 Un réseau permet :
o le partage :
 fichiers,
 applications,
 la communication entre personnes,
 la communication entre processus (machines industrielles),
 manipulation de bases de données,
 le jeu à plusieurs, ...
2. Historique
 1969 : création du réseau militaire ARPANET :
o assurer la transmission d’informations, même en temps de
guerre.
o le téléphone était le seul moyen de communication :
 les noeuds sont des points essentiels pour le
fonctionnement de tout réseau,
 il fallait concevoir un réseau de communication capable
d’emprunter des routes différentes si l’un des noeuds
n’était plus en service :
 un réseau complètement décentralisé,
 construire une toile (Web).
o 4 universités de connectées :
 Internet était un réseau fréquenté par des initiés qui
maîtrisaient le système d’exploitation Unix.
 1971 :
o 15 universités sont sur ARPANET,
o le premier e-mail est envoyé.
 1972 : FTP : protocole de transfert de fichiers.
 1973 : internationalisation avec la connexion d’une université de
Londres et une autre de Norvège.
 1974 : TELNET : protocole de prise de commande à distance.
 1983 :
5
o les protocoles principaux sont finalisés,
o les militaires quittent ARPANET pour fonder leur propre
réseau.
 1985 :
o avec le développement de la technologie "personal computer"
et des Local Area Network, il devient possible de construire
une interconnexion de réseaux.
 1987 :
o la plus grave "panne" de sécurité d’Internet :
 Robert Morris écrivit un WORM (programme s’auto
reproduisant et se propageant dans un réseau),
 des réseaux entiers furent complètement paralysés,
d’autres furent déconnectés pour limiter les dégâts.
 1990 :
o ARPANET s’éteint pour être remplacé par Internet, qui
compte plus de 300 000 hôtes,
o arrivé du WWW (World Wide Web) développé au CERN en
Suisse,
 changement irréversible de l’économie mondiale :
 apparition du e-Business (commerce
électronique),
 interconnexion des systèmes d’information des
entreprises,
 1992 : plus de 1 000 000 machines connectées.
 1993 : conception du premier navigateur Web : Mosaic.
 1994 :
o 3 500 000 d’hôtes pour 40 000 réseaux interconnectés,
o les moteurs de recherche apparaissent.
o création de Nestcape Communicator.
 2000 :
o l’économie mondiale mute à nouveau : apparition du c-
Business (travail collaboratif),
o utilisation du Web pour définir des espaces communautaires.
 2005 : 1 milliard d’internautes.
Claude
3. Le réseau Internet
 Internet est un immense réseau d’ordinateurs interconnectés sur
toute la planète :
 tous ces ordinateurs peuvent échanger des informations.
6
 pendant le temps d’une connexion à l’Internet, l’ordinateur utilisé
devient membre de ce réseau.
4. Architecture
 Une des raisons majeures, qui fait la solidité d’Internet, est sa
composition.
o totalement décentralisé :
 il ne comporte aucun "site central",
 c’est un réseau maillé, constitué de routeurs : nœuds
du réseau.
formé d’un ensemble de réseaux.
 Internet ne possède pas d’architecture véritable :
 ce qui le caractérise, c’est le principe d’acheminement des
messages qui y transitent.
5. Serveur
 machine avec système d’exploitation multitâches,
 offre des services à l’écoute du réseau 24h/24,
7
 rôle : transformation de l’url en fichier ou en script.
 envoi de la réponse au client,
 mise à jour des journaux (Acces_log, error_log, ...) ,
 vérification d’accès :
 le client est-il autorisé à effectuer cette requête ?
...
Client :
 programme appelant un service sur une machine distante,
 pas de communication client / client,
 clients / serveur sont mis en relation par un protocole :
o méthode standard qui permet la communication entre des
processus.
o les protocoles : TCP, UDP, HTTP, FTP, IP, SMTP, Telnet...
Routeur = une machine connectée à plusieurs réseaux.
 Les routeurs calculent à chaque instant le chemin optimal :
 en cas d’encombrement, les informations (paquets) sont
transmises, mais avec une vitesse moindre.
 L’ordinateur destinataire réceptionne les informations
(paquets) les unes après les autres et les assemblent.
Claude Du
 L’architecture d’un réseau a 2 aspects :
 physique :
o déterminé par des contraintes physiques et
d’emplacements.
 logique :
o déterminé par les objectifs que l’on veut atteindre en
termes de débit, de sécurité, de disponibilité.
8
III. Le WEB
● APACHE : Serveur WEB
● HTML: Langage hypertexte de description de documents
● PHP : Langage de programmation interprété coté serveur
● MYSQL : Gestionnaire de base de données

● JavaScript : Langage de programmation interprété coté client.
Pourquoi ces choix :
➢ Le prix (gratuit)
➢ La qualité (utilisés par les entreprises
ex : Apache = 2/3 des serveurs
WEB)
● PHP - MySQL ➢
Php de base.
➢ Interaction avec des SGBDD
➢ Création d'images à la volée / creation de pdf....
Serveur WEB
●Un serveur WEB est une application capable de répondre aux

requêtes de clients.
●Il est connecté au clients via un réseau (souvent).
●Il communique avec le client à l'aide du protocole HTTP.
●Il fournit aux clients une page HTML.
9
Serveur
Clients
1. Types de Sites
On distingue trois types de sites :
● Site Statique : les requêtes portent sur des fichiers html.
● Site Dynamique : les requêtes déclenche sur le serveur

l'exécution d'un script. Le script produit une page HTML.
● Site "Sapin de Noël" : les requêtes portent sur des fichiers html
contenant des scripts coté client.
Attention : un commercial qui parle d'un site dynamique parle

(parlait) souvent d'un sapin de noel....
On peut avoir un site dynamique et sapin de noel...
Hyperliens
 Le web a été inventé au CERN en Suisse. Il se base sur l’hypertexte
:
 ensemble de documents liés les uns aux autres à l’aide de liens
ou hyperliens.
 En sélectionnant un de ces liens :

 passe d’un document à l’autre :
10
 un hypertexte se différencie d’un texte habituel par le fait qu’il
ne se lit pas linéairement.
 Sur un texte, le lien se présente sous la forme d’un texte souligné de
couleur bleue.
2. HTML
Claude Duvallet
HTML (HyperText Markup Language)
 Le HTML est un format d’écriture de document du type SGML
(Standard Generalized Markup Language) :
 HTML est un ensemble de balises utilisés pour définir les
différents composants d’un document Web.
 langage de description de documents hypertextuels.
HTML =) XHTML
 Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C
en matière de langage balisé pour concevoir des documents Web :
 le XHTML n’est rien de plus que du HTML reformulé de
façon à respecter les règles strictes du XML.
Claude Duvallet
Exemple de fichier source
<html>
<head>
<title>
Titre de la page
</title>
</head>
<body>
Exemple simple de page WEB
</body>
</html>
Résultat dans un navigateur:
11
Affichage du code source d’une page
 menu ’Affichage’ puis ’Code source de la page’.
3. Le langage HTML
 De façon générale les commandes sont de la forme :

<balise>texte</balise>
ou encore
<balise attribut="valeur">texte</balise>
 L’instruction suivante n’est pas du XHTML :
<balise>
 balise est vide ou orpheline :
<br ></br>
ou
<br/>
Remarques générales
Les noms de marqueurs sont minuscules : <b> et non <B>
12
Plusieurs attributs pour une même balise :
<balise attribut1="valeur" attribut2="valeur">
texte
</balise>
 Plusieurs caractères blancs sont remplacés par un seul caractère
blanc.
 Les "retours-chariot " ne sont pas pris en compte, il faut utiliser :
<p>
(changement de paragraphe).
<br />
(changement de ligne).
Une ligne peut être mise en commentaires :

4. Principaux caractères de code ASCII de la langue française
 Les normes HTML demandent de respecter le codage dans les

caractères ASCII 7 bits, c’est à dire sans caractères accentués :
5. Balise d’entête
 Entre le couple de balises <head> et </head> :
o donnent des informations générales sur toute la page :
<title> </title>
o titre de la page.
<meta...>
o informations lues par le serveur,
o optimise le référencement.
13
6. Les méta-données
 Définition de la langue et du nom de l’auteur :

<meta name="Author" lang="fr" content="Claude Duvallet"/>
o plusieurs auteurs possibles séparés par des virgules.
 Définition de mot-clés qui caractérisent le mieux le site :
<meta name="Keywords" lang="fr"
content="Mots clés, espacés par une virgule"/>
 Catégorie de la page (pour les moteurs de recherche) :
<meta name="Category" content="Création de site WEB"/>
 Copyright de la page :
<meta name="Copyright" content="Claude Duvallet"/>
 Description :
o zone fréquentée par les moteurs de recherche qui indexent le
site,
o utilisée comme résumé,
<meta name="Description"
content="Le rôle des balises HTML"/>
 Langage :
o langue de la page sous la forme de 2 lettres,
o fr, en, de, es, it, ...
<meta name="Language" content="fr"/>
 Interdire l’enregistrement de la page dans la mémoire cache :
<meta http-equiv="Pragma" content="no-cache"/>
 Réactualisation de la page toutes les 4 sec :
< meta http-equiv="refresh" content="4"/>
 Redirection vers une autre page au bout de 5 secondes :
<meta http-equiv="refresh"
content="5;url=http://www.google.fr"/>
7. Corps de la page
Encadré par les balises :

<body>
</body>
o dans cette partie sont définis les éléments visualisables de la page.
14
Exercice 1
 Écrire une page HTML :
o nom du fichier : premier.html
o titre : ma Première Page WEB
o spécifier votre nom comme auteur,
o préciser les langues avec fr et en,
o faire une redirection de la page vers le site : http ://www.bing.fr
au bout de 10 secondes,
o corps de la page : redirection dans 10 sec.
Correction
<html>
<head>
<title>Ma Premiere Page WEB</title>
<meta name="Author" lang="fr"
content="Nom Auteur"/>
<meta http-equiv="refresh"
content="10;URL=http://www.bing.fr"/>
</head>
<body>
Redirection dans 10 sec.
</body>
</html>
Claude
Attributs de body
15
Exemple
<html>
<head>
<title>Exemple de page avec une image de fond fixe
et un texte de couleur bleue</title>
</head>
<body leftmargin="100" topmargin="100"
bgproperties="fixed"
background="imageFond.jpg"
text="blue">
Corps de la page
</body>
</html>
Exercice 2
 Deuxième page HTML :
o ajouter une image fixe de fond (mer.jpg),
o ajouter une barre de défilement,
o définir la couleur du texte à "rouge",
o ajouter une marge à gauche de 50 pixels,
o Titre de la page
Exemple de page WEB avec une image de fond
 corps du document :
Ma page WEB
Correction
<html>
<head>
<title>
Exemple de page WEB avec une image de fond
</title>
</head>
<body background="mer.jpg" scroll="yes"
leftmargin="50"
bgproperties="fixed" text="red" >
Ma page WEB
</body>
</html>
16
8. Balises de mise en page
 Permettent de faire une action ponctuelle là où elles apparaissent,

sans effet sur la suite du document :
<hr />
o trace un trait de séparation dans le texte, il occupe toute la
largeur de l’écran.
o attributs possibles :
<hr size="nombre" />
o donne une épaisseur au trait.
<hr width="nombre|pourcentage" />
o donne la longueur du trait.
<hr align="left|right|center" />
o le trait peut être aligné à gauche, à droite ou centré, il est
centré par défaut.
Exercice 3
17
Correction
<html>
<head>
<title>Exercice 3</title>
</head>
<body>
Première partie
<hr />
Deuxième partie
<hr size= "20" />
Troisième partie
<hr align= "left " width= "50%" />
Quatrième partie
<hr align= "center" width= "50%" />
Cinquième partie
<hr align= "right " width= "50%" />
Sixième partie
<hr />
</body>
</html>
9. Balises de mise en page
<br/>
 Est une marque de fin de ligne.
<p>
 est une marque de fin de paragraphe.
<p align="center|left|right">
 permet d’aligner le texte, il est aligné à gauche par défaut,
 la balise </p> limitera la portée de la balise <p>.
<div align="left|center|right"> ... </div>
 permet de justifier un texte à droite, au centre, ou à gauche,
 permet de d’organiser en block la structure d’un site.
<center>...</center>
 permet de centrer le texte qu’il encadre
18
Exercice
Correction
<html>
<body>
<center>Le corbeau et le Renard</center>
<hr /><hr />
<center>Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l’odeur alléché,<br />
Lui tint à peu près ce langage:<br />
</center>
Et bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli! que vous me semblez beau!<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois.<br />
<center>A ces mots, le Corbeau ne se sent pas de joie;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s’en saisit, et dit:<br />
</center>
19
<div align="right">Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l’écoute.<br />
Cette leçon vaut bien un fromage, sans doute.<br />
</div>
<center>Le Corbeau honteux et confus<br />
Jura, mais un peu tard, qu’on ne l’y prendrait plus.<br />
</center>
</body>
</html >
10. Balises de mise en forme

 Gras :
<b> Ceci permet d’afficher en gras </b>
 Italique :
<i> Ceci permet d’afficher en italique </i>
 Souligné :
<u> Ceci permet d’afficher en souligné </u>
 Combinaison :
<b> < i> Gras italique </i></b>
 Autres balises :
<blockquote>...</blockquote>
 affiche un texte en retrait.
<s>...</s>
o affiche un texte barré.
Claude Du
<tt>...</tt>
o affiche un texte style machine à écrire .
<em>...</em>
o met en relief un groupe de caractères.
<big>...</big>
o écrit un texte plus gros.
<small>...</small>
o écrit un texte plus petit.
<sup> ... </sup>
o permet d’entrer des exposants : x2 + y2 = R2
<sub> ... </sub>
o permet d’entrer des indices : xn+1-xn = nn-1
o
 Niveau hiérarchique :
20
<h1>Titre de niveau 1</h1>
<html>
<body>
<h1>
<center>
<b><u>
Le corbeau et le Renard
21
</u></b>
</center>
</h1>
<hr />
<hr />
<center>
<b>
Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l’odeur alléché,<br />
Lui tint à peu près ce langage:<br />
</b>
</center>
<i>
Et bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli! que vous me semblez beau!
<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois.
<br />
</i>
<center>
<b>
A ces mots, le Corbeau ne se sent pas de joie;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s’en saisit, et dit:<br />
</b>
</center>
<div align="right">
<i>
Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l’écoute.<br />
Cette leçon vaut bien un fromage, sans doute.<br />
</i>
</div>
<center>
<b>
22
Le Corbeau honteux et confus<br />
Jura, mais un peu tard, qu’on ne l’y prendrait plus.
<br/>
</b>
</center>
</body>
</html>
Claude Duvallet — 47/108
Correction
<html>
<body>
<h1>
<center><b><u><i>Le corbeau et le Renard</i></u></b></center>
</h1>
<hr />
<hr />
<center>
23
<h1>Maître Corbeau, sur un arbre perché,</h1><br />
<h2>Tenait en son bec un fromage. </h2><br />
<h3>Maître Renard, par l’odeur alléché, </h3><br />
<h4>Lui tint à peu près ce langage: </h4><br />
<h5>Et bonjour, Monsieur du Corbeau.</h5> <br />
<h6>Que vous êtes joli! que vous me semblez beau! </h6><br />
<hr />
<tt>Machine à écrire </tt><br />
<s>Barré</s><br />
Définition de la suite : x<sub>n+1</sub>= x<sub>n</sub><sup>2</sup>
</center>
</body>
</html>
11. Les listes
 Il existe 3 types de liste :

o listes de définitions,
o listes non ordonnées,
o listes ordonnées.
 Liste de définitions :
o utilisation des balises principales : <dl> ... </dl>
o utilisation des balises secondaires <dt>...</dt> et <dd>...</dd>
<dd> est en retrait par rapport à <dt> :
<dl>
<dt>Terme 1 à définir </dt>
<dd>Définition du terme 1 </dd>
<dt>Terme 2 à définir </dt>
<dd>Définition du terme 2 </dd>
</dl>
 Résultat dans le navigateur :
Claude
12. Liste non ordonnée
 Permet de faire une liste d’éléments, sans notion d’ordre :

o pas de premier,
o pas de dernier,
24
il suffit d’utiliser la balise <ul>.
 Liste à puces :
<ul>
<li>texte 1</li>
<li>texte 2</li>
</ul>
 La balise peut prendre les arguments suivants :

<ul type="disc|circle|square" >
 exemple :
<ul type="square" >
<li> texte 1 </li>
<li> texte 2 </li>
</ul>
1/108
13. Les listes numérotées
 L’ordre dans lequel les éléments vont être mis est important :
<li></li> sera le premier élément,
<li></li> sera le second élément,
 Liste de numéros qui s’incrémente automatiquement :
<ol>
<li>texte 1</li>
<li>texte 2 </li>
</ol>
 arguments possible
o type A|a|I|i|1
o start : permet de changer la valeur de départ pour la
numérotation :
Exemple : <ol type="a" start= "3">
14. Les listes emboîtées

 Les listes peuvent être emboitées en niveaux :
25
 se programme :
<ul>
<li>Niveau 1 </li>
<ul>
<li>Niveau 2 </li>
<li>Niveau 2 </li>
</ul>
<li>Niveau 1 </li>
</ul>
Exercice
Correction
<html>
<body>
<b>
26
<dl>
<dt> Terme 1 à définir
<dd> Définition du terme 1</dd>
</dt>
<dt> Terme 2 à définir
<dd> Définition du terme 2</dd>
</dt>
</dl>
<hr/>
<ol>
<li>puce 1</li>
<li>puce 2 </li>
<li>puce 3 </li>
</ol>
<ul type="square" >
<li> texte 1 </li>
<li> texte 2 </li>
</ul>
<ol type="A" start="2">
<li> grand B </li>
<ol type="a">
<li> petit a </li>
<li> petit b </li>
<ol type= "i" >
<li>petit i</li>
<li>petit ii</li>
<li value="4">petit iv</li>
<li>petit v</li>
</ol>
<li> petit c </li>
</ol>
<li> grand C </li>
<li> grand D </li>
</ol>
<hr/>
<ul>
<li>Niveau 1 </li>
<ul>
<li>Niveau 2 </li>
<li>Niveau 2 </li>
27
</ul>
<li>Niveau 1 </li>
</ul>
</b>
</body>
</html>
Claude Duvallet
15. Polices de caractères
 Pour modifier la taille :

<basefont size="valeur">
où taille est comprise entre 1 et 7 (par défaut c’est 3).
 Pour modifier la police :
<font face="style"> ...</font>
 Le style peut-être Verdana, Arial, Helveltica, sans-sherif, ...
 Pour modifier la couleur des caractères :
<font color="#FF0000"> ... </font>
ou encore
<font color="green">vert</font
28
Correction
<html>
<body>
<basefont size="5" />
Le texte par défaut de cette page est en taille 5<br />
Avec des parties de tailles différentes<br />
</font>
<font size= "2" >ce texte est en taille 2</font><br />
<font face="Verdana">police verdana</font><br />
<font face="Arial" size="6">police arial taille 6</font>
<br />
<font face="Helveltica">police Helveltica</font>
<br />
<font face="century">police century</font>
<br />
<font color="blue" face="tahoma">
police tahoma en bleu
</font>
<br />
Police par défaut de la page
</body>
</html>
16. Tableaux
 Permettent d’organiser le texte avec ou sans visualisation de

cadres :
o les tableaux peuvent être emboîtés,
o les tableaux se construisent ligne/ligne.
 Un tableau est encadré par la balise table :
<table ...></table>
<tr ...> </tr>
o chaque balise tr définit une ligne du tableau.
<td ...> </td>
o chaque balise td définit une cellule à l’intérieur d’une ligne,
o il y a autant de balises td que de colonnes par ligne.
Exemple :
<table border="1">
29
<tr>
<td>Colonne1 Ligne1</td>
</tr>
<tr>
</tr>
</table>
Exemple avec titre :

<table border="1">
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
<tr>
</tr>
<tr>
<td>Colonne3 ligne2</td>
</tr>
</table>
Exemple sans bordure :

<table border="0">
30
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Exemple avec titre de tableau :

<table border="2">
<caption align="top">
Titre du tableau en haut
</caption>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
<tr>
</tr>
<tr>
31
</tr>
</table>
Correction
<html>
<body>
<center>
<table border="3">
<tr>
<th>Nom</th>
<th>Quantité</th>
<th>Prix Unitaire</th>
<th>Total</th>
</tr>
32
<tr align="center">
<td>crayon</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr align="center">
<td>gomme</td>
<td>10</td>
<td>0,5</td>
<td>5</td>
</tr>
<tr align="center">
<td>compas</td>
<td>1</td>
<td>7</td>
<td>7</td>
</tr>
</table>
</center>
</body>
</html>
Claude Duvallet
L
17. Les tableaux

 Fusion de cellules :
o rowspan : lignes.
o colspan : colonnes.
Exemple :
<table border= "1">
</caption>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th> Titre3</th>
</tr>
<tr align= "center" >
33
<td colspan = "2" >
Cellules fusionnées
</td>
<td rowspan = "2" >
Colonne2 Ligne1
</td>
</tr>
<tr>
</tr>
</table>
Exercice
34
Correction
<html>
<body>
<table border="1">
</caption>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
<th>Titre4</th>
<th>Titre5</th>
</tr>
<tr align="center">
<td colspan="2">fruits</td>
<td rowspan="3">arbre</td>
<td colspan="2">légumes</td>
</tr>
<tr>
<td>pomme</td>
<td>banane</td>
<td>endive</td>
<td>carotte</td>
</tr>
<tr>
<td>raisin</td>
<td>pêche</td>
<td>choux</td>
<td>pois</td>
</tr>
<tr align="center">
<td>ananas</td>
<td>prune</td>
<td>poirier</td>
<td colspan="2">betterave</td>
</tr>
</table>
</body>
</html>
35
18. Les Images
 Insertion :
<img src="nom du fichier"/>
o attribut alt : pour afficher un texte si le browser ne sait pas
lire l’image.
o exemple : <img alt="texte" src="nom du fichier"/>
 La balise img peut être agrémentée des attributs :
align="left|right|top|texttop|middle|absmiddle|baseline|bottom|absbo
ttom"
o aligne les images à gauche, à droite, en haut, en haut du
texte, au milieu, au milieu par rapport à la ligne, en bas, en
bas de la ligne etc.
width="valeur" height= "valeur"
o permet au navigateur de mettre en place la bonne mise en
page.
 Autres attributs :
border= "valeur"
o donne l’épaisseur du trait autour de l’image.
vspace= "valeur" hspace= "valeur"
o vspace contrôle l’espacement vertical en pixels au-dessus et
en dessous de l’image,
o hspace contrôle l’espacement horizontal en pixels à droite et
à gauche de l’image.
Exemple :
<html>
<body>
<center>
<b>Plage</b><br />
<img alt="mer" src="mer.jpg"
width= "60%" height= "60%" vspace= "30" />
</center>
</body>
</html>
36
19. Affichage des images
 Pour la diffusion d’images sur Internet, le W3C conseille 3 formats

de fichier bitmap qui sont bien interprétés par les navigateurs Web
: JPEG, GIFF et PNG.
 JPEG (Joint Photographic Expert Group) fonctionne en mode RGB
24 bits :
o c’est une norme ISO de compression d’images avec perte.
o son algorithme élimine des données peu perceptibles à l’oeil,
appelées redondances psycho-visuelles par un découpage de
l’image en zones,
o sa compréhension est dite avec pertes :
 plus le taux de compression est élevé, plus l’image est
détériorée (apparition de « blocks » ou « carreaux »),
 ces pertes sont irréversibles,
 le taux de compression est variable et réglable par
l’utilisateur lors de son enregistrement.
 GIF (Graphic InterchangeFormat) :

o développé par CompuServe,
o 256 couleurs :
 adapté aux graphiques et logos.
o compression sans perte (LZW) :
 compression non efficace si l’image contient des
mélanges des mélanges de beaucoup de couleurs
différentes,
o 2 versions :
 GIF87a : transparence.
 GIF89a : transparence, animation.
 PNG (Portable Network Graphic) créé pour contourner

l’omniprésence du GIF. Il fonctionne en 8 ou 24 bits.
o en 8 bits :
 il reprend les caractéristiques principales du GIF (sauf
l’animation), en compressant un peu mieux,
o en mode 24 bits :
 il demeure plus lourd qu’un fichier JPEG, mais
compresse sans perte.
o Ce mode est encore peu utilisé et les navigateurs ne
l’interprètent pas toujours bien, ni de la même façon.
37
 Le format JPEG est préféré pour les photos, parce qu’il rend mieux
les fines nuances de gris et de couleurs.
 Le GIF est utilisé pour les images provenant de dessins, plus
techniques, ... :
o à utiliser s’il y a du texte dans l’image.
en cas de doute, utilisez le GIF.
20. Liens et ancrés
 Un lien permet de définir une région sensible au clic souris dans un

document et en même temps, l’endroit ou l’on va se retrouver
après ce clic.
 La syntaxe générale d’un lien est la suivante :
<a href="adresse" title= "valeur" >texte </a>
 Les signets (ancres) :
<a name="signet"> . . . </a>
o permet de donner un nom à un endroit d’une page afin d’y
faire référence.
<a href="#nom de signet"> ... </a>
o définit un lien vers un signet dans le document, c’est à dire
un lien hypertexte, qui conduira vers un signet après un clic
dessus.
 Pour télécharger un fichier (.exe,...) :

<a href="fichier">cliquez ici pour charger le fichier</a>
 L’argument mailto :adresse permet d’envoyer un courrier
électronique à l’adresse correspondante :
<a href=mailto :claude.duvallet@gmail.com>mail</a>
 L’attribut title de la balise a permet d’afficher une bulle d’aide lors
du passage de la souris sur le lien :
o exemple :
<a href="http ://www.google.fr" title="le moteur de
recherche Google">Google</a>
Exercice
 Créer une page WEB contenant des liens vers l’ensemble de vos
pages d’exercices.
38
 Ajouter un lien vers le bas de la page de l’exercice 7.
Correction
<html>
<body>
<center>
<a href="Exercice1.html">Exercice 1</a><br />
<a href="Exercice11.html">Exercice 11</a><br /><br />
<a href="Exercice7.html#lafin">
Bas de la page de l’exercice 7
</a>
</center>
</body>
</html>
39
21. Les formulaires
 Les formulaires permettent d’envoyer des données au serveur.

Elles seront ensuite traitées par celui-ci :
o enregistrement dans une base de données,
o récupération d’informations personnalisées, etc.
 La syntaxe d’une balise form est la suivante :
<form action="url" method="post"> ... </form>
 Les attributs suivants peuvent être utilisés :
 action fournit une adresse URL sur laquelle la requête issue
de le formulaire va être envoyée,
 method est la méthode d’accès au serveur http :
get
 la requête est dans l’URL,
 limité à 255 caractères.
post
o dans le corps de la requête http.
o Le texte encadré par le couple de balises <form> et

</form> peut contenir plusieurs commandes : input,
select, textarea.
22. Attribut Input
Les différents attributs que peut utiliser la commande input sont :

 type qui peut prendre les valeurs :
o text pour les entrées de type texte,
o hidden l’entrée ne sera pas affichée dans la page HTML,
o password pour les entrées de type mot de passe,
o checkbox pour les boîtes à cocher,
o radio pour les boutons radios,
o submit un bouton qui provoque l’envoi de la requête form,
o reset un bouton qui provoque la remise aux valeurs initiales de
tous les champs,
o image permet de remplacer le bouton par défaut par une
image,
o file permet de soumettre un fichier au serveur.
Les autres attributs que peut utiliser la commande input sont :
40
 name : nom d’utilisation par l’auteur de la page, et qui n’est pas le
nom affiché à l’utilisateur.
 value : valeur par défaut d’un champ de saisie.
 checked : indique que le bouton radio ou la boîte à cocher est cochée
par défaut.
 size : taille du champ pour les champs caractères (par défaut 20).
 maxlength : nombre maximum de caractères.
Exemple de formulaire
<html>
<body>
<form method="post"
action="http://www.google.fr/">
Entrez la valeur du champ 1
<input type="text" name="entree1"/>
<br />
<br />
41
<br />
<input type="submit"
value="Envoyer" />
</form>
</body>
</html>
<html>
<body>
<form method="post" action="http://www.google.fr/">
Nom <input type="text" name="Nom"><br />
Prénom <input type="text" name="Prenom"/>
<ol>
<li>
<input type="checkbox" checked
name="topping1"
value="Marie" />Marié
</li>
<li>
<input type="checkbox" name="topping2"
name="francais"/>français
42
</li>
</ol>
Volontaire
<dl>
<dd>
<input type="radio" name="callfirst"
value="Oui" checked/><i>Oui</i>
</dd>
<dd>
value="Non"/><i>Non</i>
</dd>
<dd>
value="Ne sait pas"/><i>Ne sait pas</i>
</dd>
</dl>
<input type="submit" value="Ok"/>
<input type="reset" value="Annuler"/>
</form>
</body>
</html>
8H
<html>
<body>
<form method="post" action="http://google.fr/">
Champ 1 (normal) : <input name="entree1"/> <br />
Champ 2 (40 caractères affichés) :
<input size="40" name="entree2"/> <br />
Champ3 (5 caractères seulement) :
43
<input size="5" maxlenght="5" name="entree3"/><br />
<input type="submit" value="OK">
</form>
</body>
</html>
23. Attribut Select
 select permet de donner la liste des champs accessibles pour les

menus déroulant :
o utilisée avec la syntaxe suivante :
<select name="menu">
<option value="valeur1">Option 1</option>
<option value="valeur2">Option 2</option>
</select>
Propriétés :
name
 nom symbolique de l’élément.
size
 donne le nombre d’éléments qui seront affichés dans le menu.
multiple
 indique que la commande select pourra avoir plusieurs sélections.
selected
 indique que l’option est sélectionnée par défaut.
value
 est un paramètre optionnel permettant de donner à la variable la
valeur désirée.
<html>
<body>
<form method= "post"
action=" http://www.google.fr/">
44
<select name="menu">
<option value ="valeur1"/>Option 1
<option value= "valeur2"/>Option 2
</select>
<input type="submit" value="OK"/>
</form>
</body>
</html>
24. Zone de texte
<textarea name ="..." rows="..." cols=...>texte

défaut</textarea>
name
 nom symbolique de l’élément.
rows
 nombre de lignes des champs de saisie.
cols
 longueur de la ligne de saisie du champ texte.
45
Correction
<html>
<body>
<form method="post"
action="http://www.google.fr/">
Login
<input id="name" value="guess"/>
<br />
Mot de passe
<input type="password" name="passwd"
value="guess"/>
<br />
Système d’exploitation :
<select name="system">
<option value="mac"/>Mac OS
<option selected value="pc"/>
PC Windows
<option value="unix"/>Unix
</select>
<br />
Logiciels utilisés :
<select name="software" multiple size="5">
<option value="compta"/>Comptabilité
<option selected value="jeux"/>Jeux
<option value="traitementTexte"/>
Traitement de texte
</select>
<br />
<textarea name="Commentaires"
rows="20" cols="60">
Néant
</textarea>
<br/>
<input type="submit" value="OK"/>
<br />
</form>
</body>
</html>
46
25. Les maps
 Les balises <map> et </map> permettent d’appeler une page

HTML différente suivant la zone où l’on clique sur une image.
 Entre les balises <map> et </map>, la liste des zones sensibles
est spécifiée en utilisant <area> :
<area shape="valeur" coords="valeur" href="URL"
alt="infobulle">
avec shape= "rect|circle|poly|default"
 la zone de définition est alors un rectangle, un cercle, un polygone
ou l’image entière.
coords :
coordonnées des coins opposés pour un carré (exemple :
"130,10,170,90")
 coordonnées du centre et du rayon pour un cercle (exemple :
"50,50,10")
 coordonnées des points pour un polygone (exemple :
"250,10,210,90,290,90")
href="URL" est atteinte après le clic.

 Exemple :
<map name="nom">
<area shape="rect" coords="50,10,100,100"
href="http://www.google.fr"/>
<area shape="circle" coords="15,15,5"
href="http://www.google.fr"/>
<area shape="poly" coords="15,100,20,110,15,130"
href="mailto:duvallet@free.fr"/>
</map>
<img src="image.jpg" usemap="#nom"/>
Exercice
 Créer 2 zones de liens sur la carte de France :

o Utilisez regions.jpg.
o Région parisienne :
 cercle de centre (253,142) et de rayon 32.
 lien vers www.paris.fr (info bulle : Paris).
o Haute-Normandie :
 polygone défini par les points de coordonnées
(118,65),(187,95),(198,158),(119,127).
47
 lien vers www.haute-normandie.net (info bulle :
Normandie).
Correction
<map name= "france">

<area shape="circle"
coords= "253,142,32"
href="http://www.paris.fr" alt="paris" />
<area shape="poly"
coords= "118,65,187,95,198,158,119,127"
href="http://www.haute-normandie.net"
alt="haute-normandie"/>
</map>
<img src="regions.jpg" usemap="#france" />
IV. HTML ET CSS
 Les documents Web sont globalement composés de 2 normes :

XHTML
o définit la structure du document.
CSS
o apporte le rendu visuel.
 lorsque aucun style CSS n’est défini, chaque élément
hérite d’un affichage par défaut qui peut être
légèrement différent d’un navigateur à un autre.
 Les feuilles de style Cascading Style Sheets permettent :
o séparer les informations de la présentation :
o avoir une homogénéité sur tout un site,
o rapidement changer l’aspect d’un site complet,
o meilleure lisibilité du code HTML,
o positionnement rigoureux des éléments,
o chargements de page plus rapides.
 On les appelle aussi css pour « Cascading Style Sheets ».

 Objectif : Définir le style d'un document html indépendamment de
son contenu.
48
 Intérêt : Votre site est beau, bien rempli...vous voulez changer
l'image de fond de toutes les pages...
 Mise en œuvre : Dans un fichier, référencé dans le document html.
1. Les propriétés du style
 Elles permettent d’intervenir sur :

o polices,
o les propriétés du texte,
o les couleurs,
o les marges,
o les bordures,
o ...
 Pour définir un style "par défaut" à un document, il suffit de
l’associer à un élément qui encadre tous les autres : body.
2. Définition de style
 Un style est composé d’une balise et d’une déclaration de style :

Balise {
propriété de style: valeur;
propriété de style: valeur;
...
}
 exemple :
p {font-family:Arial;}
 le " ;" n’est pas obligatoire s’il n’y a qu’une seule propriété pour
la balise.
3. Ou définir le style
 Trois manières de définir un style :

 style du document :
 déclaré entre <style>...</style> dans l’en-tête du document.
 style en ligne :
 comme attribut de balise à laquelle il se rapporte :
49
<p style="style pour la balise">texte</p>
 style externe et style importé :
o nécessite un fichier d’extension .css
 Exemple :
<html>
<head>
<title>title</title>
<link rel=stylesheet type="text/css"
href="fichier.css" />
<style type="text/css">
@import url(http://www.style.com/fichierexterne.css);
h1 { color: blue; }
</style>
</head>
<body>
<p style="color: green">Paragraphe vert...</p>
</body>
</html>
4. Explication
 La balise <link> avertit le navigateur qu’il doit chercher un document

situé à l’extérieur de la page HTML.
 L’attribut rel="stylesheet" précise que le document en question est une
feuille de style externe.
 L’attribut type="text/css" précise le type de feuille de style.
 L’attribut href="URL" donne l’URL de la feuille de style, c’est-à-dire son
emplacement sur Internet.et — 98/108 HTML
5. Le style CSS
 Appliquer un style à plusieurs balises :

h1, h2, h3 {
font: helvetica;
}
 Regroupement de propriétés :
h1 {
50
color:blue;
font: helvetica;
}
 Héritage : La couleur de H1 s’applique à EM s’il n’a pas de couleur
spécifique :
<h1>Cette ligne <em>est</em> un exemple</h1>
 Les classes permettent d’affecter des styles différents à un même
sélecteur de balise :
o exemple :
b.rouge {font="Arial";font-color="red";}
b.blue {font="Arial";font-color="blue";}
o appel :
<b class="rouge">Paragraphe en gras et rouge </b>
 l’attribut class peut s’appliquer à toutes les balises.
 Classe universelle : la balise n’est pas précisée, la classe pourra

s’appliquer à toute balise pour laquelle elle a un sens :
o mettre un "." lors de la référence CSS,
o exemple :
<p class="jaune">texte à écrire en jaune</p>
.jaune {
font-type:arial;
color:yellow;
}
 pas de notion de sous-classe comme b.rouge.gras.
id fonctionne comme class mais ne peut être utilisé qu’une seule fois :
 mettre "#" lors de la référence CSS,
 exemple :
<p id="jaune">Texte à écrire en jaune</p>
#jaune{
font-type:arial;
color:yellow;
}
 fonctionne sur toutes les balises.
 Les commentaires dans une définition de style ressemblent à ceux

du langage C :
/*le texte sera en rouge*/
em {
color: red;
}
51
 Exercice 15 : Reprendre l’exercice 8 :
o faire figurer dans un document annexe les informations de
mise en forme (style externe).
Correction
<html>
<head>
<link rel="stylesheet" type="text/css" href="exo.css"˘a />
</head>
<body>
Le texte par défaut de cette page est en taille 5<br />
Avec des parties de tailles différentes<br />
<font class="petit">ce texte est en taille 2</font><br />
<font class="c1">police verdana</font><br />
<font class="c2">police arial taille 6</font><br />
<font class="c3">police Helveltica</font><br />
<font class="c4">police century</font><br />
<font class="c5">police tahoma en bleu</font><br />
Police par défaut de la page
</body>
</html>
body {font-size="large"; }
font.petit {font-size="small";}
font.c1 {font-family= "verdana";}
font.c2 {font-size= "large"; font-family="Arial";}
font.c3 {font-family="helvetica";}
font.c4 {font-family="century";}
font.c5 {font-family="tahoma"; color="blue";}
6. div et span
 La balise <div> est utilisée pour diviser un document en section :

o occasionne un saut de ligne,
o peut contenir des paragraphes, des titres, des tableaux
o attributs :
id
o identificateur global.
class
52
o liste de classes séparées par des espaces.
style
o information locale de style.
 La balise <span> organise le document en définissant une étendue
de texte :
o attributs :
id
 identificateur global.
class
 liste de classes séparées par des espaces.
style
 information locale de style.
Claude
53

Cours 2 Outils de Dév Initiation Au Web HTML Et Css

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

Cours 2 Outils de Dév Initiation Au Web HTML Et Css

Transféré par

Droits d'auteur :

Formats disponibles

Outils de

L’évolution de complexité des taches et des langages de programmation

Dans le cas général, les outils de développement nous aident à :

Les différentes phases dans l’outil de développement :

 Définition du projet : pourquoi ?

Maîtriser les outils du développement logiciel

Efficacité dans l’exécution de tâche fréquent, non automatisables si

Maîtriser les composantes individuelles, pour mieux comprendre leur

● HTML: Langage hypertexte de description de documents

● PHP : Langage de programmation interprété coté serveur

● MYSQL : Gestionnaire de base de données

➢ Création d'images à la volée / creation de pdf....

●Un serveur WEB est une application capable de répondre aux

●Il est connecté au clients via un réseau (souvent).

●Il communique avec le client à l'aide du protocole HTTP.

●Il fournit aux clients une page HTML.

● Site Statique : les requêtes portent sur des fichiers html.

● Site Dynamique : les requêtes déclenche sur le serveur

Attention : un commercial qui parle d'un site dynamique parle

On peut avoir un site dynamique et sapin de noel...

 En sélectionnant un de ces liens :

Exemple de fichier source

Résultat dans un navigateur:

 De façon générale les commandes sont de la forme :

4. Principaux caractères de code ASCII de la langue française

 Les normes HTML demandent de respecter le codage dans les

 Définition de la langue et du nom de l’auteur :

Encadré par les balises :

o dans cette partie sont définis les éléments visualisables de la page.

 Permettent de faire une action ponctuelle là où elles apparaissent,

9. Balises de mise en page

10. Balises de mise en forme

11. Les listes

 Il existe 3 types de liste :

12. Liste non ordonnée

 Permet de faire une liste d’éléments, sans notion d’ordre :

 La balise peut prendre les arguments suivants :

13. Les listes numérotées

14. Les listes emboîtées

15. Polices de caractères

 Pour modifier la taille :

 Permettent d’organiser le texte avec ou sans visualisation de

Exemple avec titre :

Exemple sans bordure :

Exemple avec titre de tableau :

17. Les tableaux

 Pour la diffusion d’images sur Internet, le W3C conseille 3 formats

 GIF (Graphic InterchangeFormat) :

 PNG (Portable Network Graphic) créé pour contourner

20. Liens et ancrés

 Un lien permet de définir une région sensible au clic souris dans un

 Pour télécharger un fichier (.exe,...) :

 Les formulaires permettent d’envoyer des données au serveur.

o Le texte encadré par le couple de balises <form> et

22. Attribut Input

Les différents attributs que peut utiliser la commande input sont :

Les autres attributs que peut utiliser la commande input sont :

23. Attribut Select

 select permet de donner la liste des champs accessibles pour les

24. Zone de texte

<textarea name ="..." rows="..." cols=...>texte

 Les balises <map> et </map> permettent d’appeler une page

href="URL" est atteinte après le clic.

 Créer 2 zones de liens sur la carte de France :