Vous êtes sur la page 1sur 61

ENI-ABT

Conception Internet

Dr. CAMARA
2019-2020
Objectifs

Apprendre aux apprenants les concepts de bases


de la création de documents web par la
découverte des technologies « coté client »
Plan du Cours
o Généralités
o Structure HTML
o Codage des couleurs
o Listes
o Liens
o Images et Vidéo
o Tableaux
o Formulaires
o Divs
o Structure CSS
Généralités
Généralités
 Les langages de balises: SGML(Standard Generalized Markup
Language) date du début des années 70.

 Le web: création au CERN(European Organization for Nuclear


Research) en 1989 par Tim Berners-Lee.

Le W3C (World Wide Web Consortium) www.w3.org a été fondé en


1994 par Tim Berners-Lee avec comme objectif de rédiger des
recommandations pour la spécification des langages, des services,
des protocoles liés au Web afin d’assurer leur interopérabilité et de
guider l’évolution du web.
Généralités
Le W3C
 L’équipe : une soixantaine de chercheurs et d’ingénieurs, pour la
plupart dans l’un de ces trois centres
 le MIT (Massachusset’s Institute of Technology)
 l’ERCIM (Consortium Européen de Recherche en
Informatique et Automatique)
 Keio University (Japon)
 Les membres : 383 membres actuellement
 des universités
 des centres de recherche
 des sociétés privées (AT&T, Google, IBM, ILOG, MicroSoft,
Mozilla, Nokia, SUN, etc. . .)
Généralités
Dans le cadre d'internet :

Une page HTML valide est une page qui passe le test du
 validator (http://validator.w3.org)

 Langages serveur: préparation et envoi des pages web


 Langages client (navigateur): affichage des pages web
Généralités
Architecture client / serveur:
Généralités
Architecture client / serveur:

Principe général de la requête :


L'utilisateur (final) est sur le « poste client »
Les données à accéder sont sur le « serveur »
Le client effectue une « requête » et le serveur lui renvoie en
réponse des données (fichier, flux de données, etc.)
Généralités
DOM (Document Object Model)
Généralités
DOM (Document Object Model)
URL (Uniform Resource Locator)
Généralités
DOM (Document Object Model)

Exemple de structure d’un site de commerce


Généralités
DOM (Document Object Model)

Exemple de structure d’un site de presse


Généralités
Feuilles de styles
Généralités
Design des pages d'un site internet
Généralement prédéfini pour le site, seul le contenu et quelques
mises en forme changent.
Généralités
Quelques statistiques du web:
Généralités
Quelques statistiques du web:
Généralités
HTML : HyperText Markup Language (1992)
 A l'origine: mise en forme de documents hypertextes (liens)
 Aujourd'hui :
– Mise en forme
– Structuration
o Insertion d'objets (Flash, vidéo, Java, etc.)
o Utilisé pour quasiment tous les sites web
o Evolution (malheureusement) laborieuse 
o Version HTML : 4.0 (1997) 4.0.1 (1999)
o Version HTML : 1.1 (2001)
o Prochaine version HTML5 (2014)
o Prochaine version HTML5.2 (2017)
Structure HTML
 Le langage HTML ( Hyper Text Markup Language)
permet de décrire et de mettre en forme des documents
variés, depuis du simple texte jusqu’à des documents
multimédia riches avec la définition d’HTML 5.
 Une page HTML est en général destinée à être publiée sur
le World Wide Web, où toutes sortes de gens utilisent
toutes sortes de navigateurs qui fonctionnent sous
différentes plates-formes (Mac OS, ipad, Linux, Androïd,
MS Windows, etc.).
Structure HTML
Un document HTML ou XHTML doit comporter :

1. Sur la première ligne le doctype qui spécifie le type de document


(HTML, XHTML et version). Ceci permet que le navigateur puisse
supporter et interpréter plusieurs formats de documents.
2. Une balise de début de description de document <html
[+attributs]> et finit par la balise </html>.
3. Un en-tête compris dans une balise <head>...</head>.
4. Dans le header, une spécification de l’encoding ou charset: ISO-
8859-1, latin1, et maintenant systématiquement utf-8. Ce dernier est
d’ailleurs le défaut utilisé lorsque l’encoding n’est pas spécifié.
5. Dans le header, de manière optionnelle, une description du style
de document (couleurs, polices, tailles, etc.) au format CSS.
6. Un corps du document dans une balise<body>...</body>.
Structure HTML
<!DOCTYPE html >
<html lang = "fr">
<head>
<!-- l'en-tête -->
</head>
<body>
<!-- le corps -->
</body>
</html>
Structure HTML
l'en­-tête
<head> ... </head>
 Informations qui ne seront pas affichées sur la page HMTL

 Titre de la page : <title> ma page html </title>

 Informations utilisées par les moteurs de recherche :
<meta name = "description" content = "Formation HTML" />
Structure HTML
le corps
<body> ... </body>
informations qui vont s'afficher dans le navigateur.

NB:
 Nous allons utilisé dans ce cours l’éditeur de texte
Notepad++ et enregistrer avec l’extension html ou htm pour
l’édition de notre page web.
 En géneral, la première page d'un site est appelée index.html
Structure HTML
Le principe des balises

balise (tag) = limite d'une boîte où l'on peut mettre des choses


<balise> chose </balise>
balises sans contenu : <autrebalise />
<balise attribut1="valeur" attribut2="valeur">...</balise>

commentaire : <!-- voici un commentaire-->


<meta> permet de faciliter la recherche de la page ou de
passer automatiquement à une autre page.
Structure HTML
Quelques balises:

 Titres (headings) : Six niveaux notés h1 à h6


Ex. <h1>Titre de niveau 1</h1>
 Paragraphes (séparés entre eux par un espace)
Ex. <p>Ceci est un paragraphe</p>
 Séparateurs :
Retour à la ligne (sans espace) : <br />
Ligne horizontale : <hr />
 Texte préformaté
Ex. <pre>Le formatage (tabulations) sera conservé à
l'écran</pre>
Structure HTML
Quelques balises:

 Texte appuyé : <strong>…</strong>


 Emphase : <em>…</em>
 Surlignage : <mark>…</mark>
 Police « machine à écrire » : <code>…</code>
 En indice : <sub>…</sub>
 En exposant : <sup>…</sup>
Structure HTML
Balise <meta>
 <meta charset = "utf-8">

 <meta name = "author|description|keywords"


content="…….">

 <meta http-equiv= "refresh" content="5;


url=https://www.w3schools.com">
Structure HTML
Balise <meta>
<head>
<!-- Jeu de caractères universel (accents compris) -->
<meta charset="utf-8" />
<!-- Autres métadonnées -->
<meta name="Author" content="Dr CAMARA" />
<meta name="Keywords" content= "Enseignement, Infos" />
<meta name="Description" content="Exemple de page
HTML" />
</head>
Structure HTML
Mise en forme des caractères:
Tout texte tapé hors d'une balise est considéré comme du texte
"statique".

Il faut coder les caractères spécifiques en utilisant un système de


codage qui permet un affichage universel.
 <b> </b> : gras
 <i> </i> : italique
 <u> </u> : souligné
 <s> </s> : barré
Structure HTML
Mise en forme des caractères:

<basefont size="s"/> sert à fixer la taille par défaut dans une


page Web (s un entier compris entre 1 et 7).
 <br> retour à la ligne simple
 <p> retour à la ligne avec saut d’une ligne.
 Lignes horizontales: <hr size="s" width= "w|w%" align =
"LEFT|CENTER|RIGHT" color = "#RRVVBB" >

NB: La taille par défaut des caractères est fixée à 3


Structure HTML
Codage de caractères spéciaux:
<p>Ceci est un paragraphe. &copy; GIT</p>
Codage des couleurs
Trois manières de définir les couleurs:
 Traditionnelle:
blue, yellow, green,…
 Codage rgb (Rouge - Vert - Bleu):
noir(0,0,0) ; blanc (255,255,255); rouge(255,0,0);…
rgba(250,0,0,0.6) a = alpha (transparence)
 Codage hexadecimal (6 caractères hexadécimal):
noir(#000000); blanc(#FFFFFF); rouge(# FF0000);…
Exemple:
o <p style="color:red">bonjour</p>
o <p style="color:#bf70dd; opacity:0.8"> bonjour </p>
Listes

2 types de listes
 les listes à puce (non ordonnée): <ul> et </ul>
Ex: <ul type=" disc|circle|square "> </ul>
les listes numérotées (ordonnée): <ol> et </ol>
Ex: <ol type="i|I|a|A|1" >
<ol type = "i">
<li> liste1</li>
<li> liste2</li>
<li> liste3</li>
<li> liste4</li>
</ol>
NB: Les listes peuvent être imbriquées.
Listes

Les listes hiérarchiques


<dl>
<dt>programmation</dt>
<dd> Java </dd>
<dd> Python </dd>
<dd> Cpp </dd>

<dt> SGBD </dt>


<dd> Oracle </dd>
<dd> SQL Serveur </dd>
<dd> MySQL </dd>
</dl>
Liens
<a href=" URI | URL " target="fenêtre d'affichage">lien </a>
URI : Uniform Resource Identifier (anciennement URL : Uniform
Resource Locator)

Target permet de spécifier un nom de fenêtre pour


l'affichage
Si la fenêtre précisée n'existe pas, elle est créée
Par défaut l'affichage se fait dans la fenêtre courante.
Ex: <a href="www.campusmali.ml " target = "_blank">
Inscription </a>
<a href="ftp//:…"> Télécharger ici </a>

NB: Il est possible de créer un lien vers vers une partie de la


meme page.
Images et Vidéo
Les fichiers images sont de deux types :
o Les images JPEG avec une extension .jpg offre une
possibilité de compression intéressante avec une image de
qualité.
o Les Images GIF avec une extension .gif sont plus lourde
généralement pour des images animés.
Exemple: <img src = "image.jpg" height="100" widht="150"
alt="Photo"/>

NB: Le chemin d'accès du fichier par rapport à la page qui est


affichée doit etre toujour indiquer.
Images et Vidéo
 L'option src : nom du fichier contenant l'image
 L'option width : largeur de l'image affichée. Si cette option
n'est pas spécifiée, l'image est affichée à sa taille réelle. On
indique soit la valeur en pixel, soit en pourcentage de la
taille originale de l'image.
 L'option height : hauteur de l'image affichée.

Ex:
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas cet audio.
</audio>
Images et Vidéo
Ex:
<video controls poster = "im.jpg" width="320" height="240" >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne supporte pas cette video.
</video>

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas cet audio.
</audio>
Tableaux
Listes

<tr></tr>: ouverture et fermeture d'une ligne dans le


tableau (Table Row)
<td></td>: ouverture et fermeture d'une cellule (Table data)

Ne jamais oublier les balises de fermeture, car le tableau


pourrait être désordonné, voire ne pas s'afficher.
Les tableaux peuvent être imbriqués, mais il faut toujours qu'il
y ait le même nombre de balises d'ouverture et de fermeture
(attention à l'ordre)
Tableaux
Exercice: Écrivez le code qui vient et visualisez le résultat
<html>
<head>
<meta charset= "UTF-8">
<</head>
<body >
<table border ="4" cellpadding="20" cellspacing="20">
<tr > <th colspan="4" >Infos etudiants </th>
</tr>
<tr>
<th>Numero</th>
<th>Nom</th>
<th>Classe</th>
<th>Age</th>
<th>Statut</th>
</tr>
<tr>
<td>1</td>
<td>Keita</td>
<td>GIT3</td>
<td>22</td>
<td rowspan="2">Regulier</td>
</tr>
</tr>
<tr>
<td>2</td>
<td>Toure</td>
<td>GIT2</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Tableaux
Les options des tableaux:

 Les options height, width, align, border, bgcolor,


background comme d'habitude;

 L'option cellpadding définit l'espace entre le bord des


cellules et leurs contenus (intra cellulaire);

 L'option cellspacing définit l'espace entre les cellules (inter


cellulaire).
Tableaux
Les options des lignes <tr> :

 Les options height, width, align, border, bgcolor,


background comme d'habitude;

 L'option align pour un alignement horizontal centré,


justifié, à gauche ou encore à droite;

 L'option valign permet de positionner verticalement le


tableau
Tableaux
Les options des cellules <td> :
 Les options height, width, align, border, bgcolor,
background, align, valign comme pour les lignes;
 L'option colspan=nombre de cellules fusionnées à
l'horizontal. Permet de disposer du texte sur plusieurs
colonnes. Pour que le tableau s'affiche correctement, il faut
que ligne par ligne, le nombre de cellules soit le même.
 L'option rowspan=idem pour les fusions à la verticale

<TD COLSPAN=3>

ROWSPAN=3>
<TD COLSPAN=2>
Formulaires
<form>

<div>
<label for="nom"> Nom :</label>
<input type="text" id="nom" name="nom" placeholder=" Svp
entrez votre nom: " required="required">
</div>

<div>
<input type="checkbox" name="git" value="mali" checked> Mali
<br>
<input type="checkbox" name="git" value="senegal"> Senegal
<br>
<input type="checkbox" value="algerie"> Algerie
</div>

</form>
Formulaires
<form>
<div>
<input type="radio" value="informatique" name="git" checked>
Informatique
<br>
<input type="radio" value="telecom" name="git"> Telecom
</div>

<div>
<input type = "submit" value=" valider">
</div>

<div>
<input type = "text" /> <input type = "button" value=" Afficher">
</div>
</form>
Formulaires
<form>
<div>
<fieldset>
<legend> Choix du filiere </legend>
<select name="licence">
<option value="git"> GIT </option>
<option value="gme"> GME </option>
<option value="geea"> GEEA </option>
<option value="geologie"> GEOLOGIE </option>
<option value="topo"> TOPO </option>
<option value="genie civil"> GENIE CIVIL </option>
</select>
<input type = "submit" id="licence" value=" valider">
<fieldset>
</div>

</form>
Formulaires
<form>

<div>
<label for="mail">e-mail :</label>
<input type="email" id="mail" name="user_mail">
</div>

<div>
<label for="msg">Message :</label>
<textarea cols="60" rows="20" id="msg"
name="message"></textarea>
</div>

</form>
Structure CSS
 Les versions actuelles des navigateurs respectent les normes
CSS (Cascading Style Sheet, feuille de style).

 Les feuilles de style permettent un gain de temps en


développement et en maintenance de page mais sont peu
connues.
Structure CSS
La création de style:

 La déclaration de style se fait dans l'entête de la page


HTML, encadrée par les balises

<STYLE> et </STYLE>

 Il y a 3 possibilités pour affecter un style :

o modifier le style d'une balise existante


o créer une nouvelle classe de style
o affecter l'attribut style
Structure CSS
Pour les balises existantes:

<HTML>
<HEAD>
<link rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY> ... </BODY></HTML>
Structure CSS
Pour les balises existantes:

<HTML>
<HEAD>
<STYLE>
P{font-family:arial;font-size:12px||2em}
</STYLE>
</HEAD>
<BODY> ... </BODY></HTML>
Structure CSS
<!DOCTYPE html>
<head>
<style>
.myDiv {
border: 5px outset red; background-color: lightblue;
text-align: center; }
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
Structure CSS
Le cas particulier de la balise de lien a
Pseudo class
On obtient ainsi 3 balises A:
a:hover {text-decoration:underline}
a:active {color:red}
a:visited {color:green}

p:first-child{color:green}
Structure CSS
Création de classes
<HTML><HEAD>
<STYLE>
.code {font-family:courrier;color:green}
</STYLE>
</HEAD>
Pour affecter ce style à une portion de texte, on écrit :
<SPAN class="code">texte mis en forme</SPAN>
Structure CSS
L'extension d'un fichier de feuille de style est toujours .css
Le fichier css contient uniquement l'intérieur des balises
<STYLE>

Ex: style.css
// Ceci est un commentaire
/* autre comments*/
TD {font-family:arial;font-size:12pt}
.code {font-family:courrier;color:green}
Structure CSS
Les propriétés de police
Structure CSS
Les propriétés de texte
Structure CSS
Les propriétés d'arrière-plan
Structure CSS
Les propriétés d'arrière-plan
letter-spacing:10px;
word-spacing:15px;
text-shadow: 3px 2px 3px black; deplacement horiz vert
propagation et couleur de l’ombre

<fieldset>
<legend> Infos utiles </legend>

</fieldset>
Merci.
Modele des boites

Vous aimerez peut-être aussi