REPUBLIQUE DU CAMEROUN REPUBLIC OF CAMEROON

Paix-Travail-Patrie Peace-Work-Fatherland
ECOLE NATIONALE SUPERIEURE DES POSTES, DES TELECOM ET DES TIC NATIONAL ADVANVED SCHOOL of POSTS,TELECOMS AND ICT

UE 24:

COURS TECHNOLOGIES ET APPLICATIONS WEB

Enseignant: Ing SAVAISSOU RIGOBERT

Année académique: 2019/2020

2 Iere Partie LE LANGAGE HTML
Introduction
1) Balises, Attribut et Element
2) Structure d’une page web
3) Les listes
4) Les liens internes et externes
5) Insertion d’une image
6) Les ancres
7) Les tableaux
8) Les formulaires
9) Recapitulatif des balises
10) Structure d’une page web
 
IIeme Partie  LE CSS
Introduction
11) Insertion d’un code CSS
12) Elements dans un CSS
13) Les selecteurs
14) Fornatage du texte
3

Iere Partie LE LANGAGE HTML

4 INTRODUCTION

Le langage HTML5|CSS3 sont deux veritables standards et n’ont donc a

ce titre pas de concurrent comme certains langages (PHP par exemple). Ils
sont le socle de tout projet de developpement web.

HTML( HyperText Markup Language ou Langage HyperTexte de balisage) a

ete cree en 1991 et a pour fonction de structurer et de donner du sens a du
contenu
 1. Balise, Attribut et Élément
5  Les balises servent de marqueurs pour indiquer une information au navigateur. Ils reprennent le nom de l’element et
sont entourees de chevrons.
Exemple un titre, une citation
Il existe 2 types de balises:
Balises en paires Exemple <title> …………..</title>
Balises orphelines qui servent en general a inserer un element
Exemple < img />, <br>
 Attribut: moyen de donner une precision sur un element
Exemple < img nom= “souvenir.jpg” />
 
 Elements ils vont nous servir a definir les objets dans notre page. Par exemple un paragraphe, des titres ou un lien.
On en distingue 3 types:
 
i. Les elements de type bloc Exemple <div>
ii. Les elements de type inline Exemple <span>
iii. Les elements auto-fermants Exemple </br>

Exercice1
Differences entre les balises <div> et <span> 
6 2. Structure d’une page html

< ! DOCTYPE html> <!.. Type de document...>

< html>
< head> <!.. entete du document...> Commentaires en html
<title> ………………… </title> <!.. titre de document...>
<meta charset = “utf-8” /> <!.. Encodage du document...>
< /head>
< body>
<!.. Corps de la page qui contiendra les instructions...>
< /body>
< /html>
 3. LES LISTES
7

Elles ont deux grands interets qui sont la creation des menus et la presentation du
contenu pour un blog par exemple.

On distingue 3 types:

 Les listes ordonnees <ol> < /ol> ol: Ordered List

Elles permettent generalement d’afficher avec un indicateur ordinal pouvant prendre la
forme des nombres, des lettres, de chiffres romains ou de points.
 Exemple
< ! DOCTYPE html>
8
< html>
< head>
<title> LES LISTES </title>
<meta charset = “utf-8” />
< /head>
< body>
< h1> les listes ordonnees < /h1>
< ol>
< li> Chapitre 1 < /li> li: list items
< li> Iere Partie < /li>
< li> IIeme Partie < /li>
< /ol>
< /body>
< /html>
 
  Les listes non ordonnees < ul> < /ul> ul: unordered list
9 Elles sont utiles pour lister des elements sans hierarchie ni ordre logique.
Exemple
< ! DOCTYPE html>
< html>
< head>
<title> LES LISTES </title>
<meta charset = “utf-8” />
< /head>
< body>
< h1> les listes non ordonnees < /h1>
< ul>
< li> Orange < /li>
< li> Banane < /li>
< li> Mangue < /li>
< /ul>
< /body>
< /html>
 
  Les listes de definition
10 Elles sont utilisees pour definer des termes. On va utiliser trois elements dl (definition list),
dt(definition term) et dd (description definition) definition en soi c’est a dire pour decrire un element
dans la liste de definition.
Exemple
< ! DOCTYPE html>
< html>
< head>
<title> LES LISTES </title>
<meta charset = “utf-8” />
< /head>
< body>
< h1> les listes de definitions < /h1>
< dl>
< dt> HTML < /dt>
< dd> HTML signifie HyperText Markup Language qui est cree en 1990 et c’est
un langage de balisage…… < /dd>

< /dl>
< /body>
< /html>
 4. Les liens, Insertion d’une image et Formatage du texte
11
 Les liens
Un lien interne est un lien cree entre 2 pages d’un meme site tandis qu’un lien externe est un lien menant a d’autres sites
web.
Exemple <a href (hypertext reference) =’’/répertoire/page_à_atteindre.html> nom du lien </a>.

 Insertion d’une image 

Les differents formats utilises sont:
JPEG (Joint Photographic Expert Group) definit un format d’enregistrement d’une image fixe
PNG (Portable Network Graphics) developpe pour proposer une alternative libre au format GIF (proprietaire)
GIF (Graphics Interchange Format) permet de creer des images animes ou a fond transparent
Exemple <img src= “images_souvenir.jpg” alt= “Photos souvenirs” />
12

 Formatage des textes

<strong> </strong> : permet d’appliquer un effet gras au texte

<mark> </mark> : est un surligneur de texte
 : pour mettre un indice
 : pour mettre l’exposant
 5. Les Ancres
13

Elle est un point de repere de vos pages html lorsqu’elles sont longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse
acceder directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.

Exemple1:
< a href= “ancre.html” # Foot” > vous amene sur la page ancre.html, directement au niveau de l’ancre appellee
Foot
14
Exemple2
<h1>Ma grande page</h1>
<p> Aller directement à la partie traitant du theme sur :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<br>
<br><br>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="arc">Le tir à l'arc</h2>
<p>... (beaucoup de texte) ...</p>
15
6- les tableaux

Un tableau est constitué de lignes et de colonnes, la balise utilisée est

<table>

.
Balises ou attributs descriptions
<tr> </tr> Definition d’une ligne
<th> </th> Definition d’une cellule d’entete
<td> </td> Definition d’une cellule normale
colspan Cellules sur plusieurs colonnes
rowspan Cellules sur plusieurs lignes
<Caption> Titre du tableau
 Exemple

16 < ! DOCTYPE html>

< html>
< head>
<title> LES TABLEAUX </title>
<meta charset = “utf-8” />
< /head>
< body>
< table>
< tr>
<td> Nom </td>
<td> Prenom </td>
<td> Age </td>
</tr>
 
< tr>
<td> Pascal </td>
<td> Pierre </td>
<td> 25ans </td>
</tr>
< /table>
< /body>
< /html>
17
Code CSS
td { border: 1px solid black;}
table { border- collapse: collapse;}

Exercice2
Donner le code html permettant d’obtenir le document suivant:

Annees Salaires
Nord Sud Total
2019 10$ 8$ 18$
2020 14$ 11$ 25$
18 7- Les Formulaires

Ils sont un moyen simple et le plus utilise pour recueillir des donnees a propos de vos utilisateurs.
Si on peut creer des formulaires en html, on ne peut en revanche stocker ni utiliser les donnees du formulaire
avec ce langage.
On utilise la balise <form> qui possede deux attributs:
 Action indique ou les informations recueillies dans le formulaire doivent etre envoyees pour etre traitees

 Method: permet de specifier le type de requete HTTP utilisee pour envoyer les donnees a l’URL d’action.
On peut choisir 2 valeurs GET et POST
19 Syntaxe:
< ! DOCTYPE html>
< html>
< head>
<title> LES FORMULAIRES </title>
< meta charset = “utf-8” />
< /head>
< body>
<form method=”POST” action= “cible.php”>
<!.. code du formulaire...>
</form>
< /body>
< /html>
 Exemple
< ! DOCTYPE html>
20 < html>
< head>
<title> Mon Formulaire d’Authentification </title>
<meta charset = “utf-8” />
< /head>
< body>
<form method=”POST” action= “login.php”>
<p> Entrez votre login:
<input type=’’text’’ name=”login” size=”20” required />
</p>
<p> Entrez votre mot de passe:
<input type=’’password’’ name=”password” size=”20” required />
</p>
<input type=’’submit’’ value=”Envoyer” />
</form>
< /body>
< /html>
21 8. Recapitulatif des Balises
Denominations Balises
Balises de listes < ul> , < ol> , <li>
Balises de tableau < table> , < caption>, < tr>, < td>, < col>
Balises de formulaire < form>, < fieldset>, < label>, < option>
Balises d’architecture <header>, < footer>, < section> < menu>, < nav>,< div>,< span>
Balises multimedias < audio>, < video>,< img />, < area>
Balises de structurations de textes < h1>…< h6>, < p>, < strong>, < a>, < i> (italique), < b>(en gras)
Balises de premier niveau < html>, < head>
Balises d’entete < title>, < meta />, < link />

< fieldset>: regroupe plusieurs elements du formulaire

< label>: titre d’un element
< option>: element d’une liste
< area>: zone cliquable a l’interieur d’une image
22 9. Structure d’une page web
23 header> : on y trouve le plus souvent un logo, une banniere, le slogan de votre site
<
24 < footer> : pour le pied de page
25 < section> : sert a regrouper des contenus en fonction de leur thematique
 < aside> : contient des informations complementairres au document qu’on
26 visualise
 < article> : sert a englober une portion generalement autonome de la page (par exemple les actualites,
27 articles de journaux, blogs)
28

IIeme Partie  LE CSS

29 Introduction

Il a ete cree en 1996 et a pour role de mettre en forme du contenu en lui appliquant
ce qu’on appelle le Style.

Il permet la separation du contenu de la presentation, l’utilisation par des

documents html et XML et enfin apporte une modularite au formatage.
30 1- Insertion d’un code CSS

• Dans l’entete du fichier html

Exemple <head>
<style type=”text|css”>……… ……… </style>
</head>

• Dans les balises du fichier html via la balise <style> (moins recommande)
Exemple < h2 style=”color: red”> Titre en rouge </h2>

• Declaration d’un lien vers le fichier CSS via la balise <link>

Exemple < link href=”fichier.css” rel=”stylesheet” type=”text|css” /> (recommande)
31 2- Elements dans un CSS

On retrouve 3 elements:
• Les noms de balise: Exemple <p>

• Les proprieties CSS (les effets de style)

Exemple color, font-size (taille du texte)

• Les valeurs pour chaque propriete on doit indiquer une valeur

Exemple P: { color: blue;}
32 3- Les selecteurs en CSS
On en distingue 4 types:
• Selecteur de type nom de balise
• Selecteur de type id(pour les ancres)
Exemple #nom_id {/* proprietes css*/}

• Selecteur de type class .

Exemple .nom_class {/* proprietes css*/}
• Selecteur universel *
Il permet de selectionner toutes les balises sans exception
Exemple *{}
 
 4-Formatage du texte
33
Attributs Descriptions
Font-size Taille de la police Ex: p{font-size:large;}

Font-family Police de caractere Ex: h1{font-family:Arial;}

Font-weight En gras Ex: h2{font-weight:bold;}

Text-align Alignement Ex: .nom{text-align: center;},

Background-color Couleur de fond Ex: body{background-color:

black; color: white;}

Exercice 4
1) Differences entre les selecteurs de type classe, type id et universel
2) Apres avoir defini HTML, XHTML et XML donnez les differences qui les
caracterisent
34 FIN

MERCI POUR VOTRE AIMABLE ATTENTION