Université des sciences et de la technologie Houari Boumediene

Faculté d’Electronique et d’Informatique

Module :
Techniques de l'information et de la communication
TIC

Enseignante : Mme BESSAAD Wissam 1ere année MI

Bessaad.wissam@gmail.com 2 eme Semestre 2021

1
 Université des sciences et de la technologie Houari Boumediene
Faculté d’Electronique et d’Informatique

Cours 04

Enseignante : Mme BESSAAD Wissam Module TIC

Bessaad.wissam@gmail.com 1ere année MI
2 eme Semestre 2021
2
Plan du cours

• Définitions
• Structure d’un document HTML
• En-tête des documents HTML
• Corps des documents HTML
• Présentation du texte en HTML
• Liens hypertextes
• Insérer une image en HTML
• Les tableaux en HTML
• Exemple du code HTML

3
Définitions

4
Le développement web c’est quoi ?
Le développement Web désigne de manière générale les tâches associées au développement
de sites Web destinés à être hébergés via un intranet ou Internet.

Le processus de développement web comprend, entre autres, la conception de sites web, le

développement de contenu web, l’élaboration de scripts côté client ou côté serveur et la
configuration de la sécurité.

Le développement Web est le codage ou la programmation qui permet de faire fonctionner

un site Web, il va de la création de pages en texte brut à des applications Web complexes,
des applications de réseaux sociaux et des applications commerciales électroniques.

5
Les 03 types du développement web
Les trois principaux types de développeurs sont front-end, back-end et full-stack.

 Un développeur front-end est responsable de la programmation côté client, il prend en

charge la conception du site Web l’écriture du code nécessaire pour l’implémenter sur le
Web; Il se doit de maîtriser au moins trois langages de
programmation (HTML, CSS et JavaScript); Ainsi que la performance du site web et sa
compatibilité avec les différents navigateurs et format d’affichage (mobile, desktop)
autrement dit « responsive design »

• Un développeur back-end est responsable de la programmation côté serveur, il doit créer

le code et les programmes qui alimentent le serveur du site web, les bases de données et
toutes les applications que contient le site Web.

6
Les 03 types du développement web (Suite)
Il utilise un large éventail de langages différents côté serveur afin de construire des
programmes compliqués; Parmi les langages les plus utilisés PHP, Python, Java et Ruby,
tandis que le SQL pour gérer et analyser les données dans les bases de données des sites
web.
La vitesse d’un site web étant une considération majeure lorsqu’il s’agit d’optimisation pour
les moteurs de recherche, elle est un facteur important lors du développement du back-end.

• Un développeur full-stack fait un peu de tout .

Les termes « front-end » et « back-end » sont utilisés dans le métier de programmeurs pour
décrire les couches d’un site web.

7
Langages pour la création d’un site Web
Il existe plusieurs langages et outils utilisés pour le développement des sites et des
applications Web, exemples : HTML, CSS, Java Script, PHP, MySQL, etc…

• HTML : Le HTML (HyperText Markup Language) est un langage qui permet de décrire
et structurer des informations (textes, images, médias…) dans le but de les faire afficher
dans un navigateur.
• CSS : Le langage CSS (Cascading Style Sheets : Feuilles de Style en Cascade) a pour
but de séparer totalement la présentation d'une page Web de son contenu (du langage
HTML).
• Java Script : Ce langage est un langage de programmation qui permet d’apporter des
améliorations au langage HTML en permettant d’exécuter des commandes du coté client
(au niveau du navigateur).
8
Langages pour la création d’un site Web (suite)

• PHP : Le langage PHP (historiquement Personal Home Page, officiellement : HyperText

Preprocessor) est un langage de script coté serveur qui a été conçu spécifiquement pour
le web; Ce langage est utilisé pour créer des pages Web dynamiques, le code PHP est
inclus dans une page HTML et sera exécuté à chaque fois qu’un visiteur affichera la
page.

• MySQL : MySQL est un système de gestion de bases de données. Le serveur MySQL

contrôle l’accès aux données pour s’assurer que plusieurs utilisateurs peuvent se servir
simultanément d’une même base de données et pour garantir que seuls les utilisateurs
autorisés peuvent accéder aux données.

9
Page web statique vs Page web dynamique
Page Web statique Page Web dynamique
Une page Web dynamique est
Une pages Web statiques offre le même
comportementale et a la capacité de
Présentation contenu pour tous les visiteurs.
produire un contenu distinct pour
différents visiteurs.

Base de données N’utilise pas de bases de données Utilise une base de données
Temps de chargement de
Demande moins de temps Demande plus de temps
la page
Changement
Se produit rarement Fréquemment
d’information
Complexité Simple à concevoir. Compliquée à construire.

10
Structure d’un document HTML

11
12
Structure d’un document HTML
Un document HTML contient : du texte, et des balises (ou tags)
Exemple : <h1> Ceci est un titre </h1>
Ce document commence par la balise <HTML> et finit par la balise </HTML>
Il contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se
trouve le contenu de la page:
• En-tête est délimité par les balises <HEAD> et </HEAD>.
• Corps est délimité par les balises <BODY> et </BODY>.
• Balise de début de zone <... > (ex. : <HTML>)
• Balise de fin de zone </... > (ex. : </HTML>)

13
En-tête des documents HTML

14
 En-tête des documents HTML
L’en-tête d’un document HTML résume les informations générales de la page, il contient :
• Titre du document :
apparaît dans la barre supérieure du navigateur : <TITLE>un titre</TITLE>
• Propriété du document:
non affichée, plusieurs propriétés peuvent être définies. Pas de contrainte ni d'obligation sur
les propriétés définies.
<META NAME="propriété" CONTENT="valeur">

On peut aussi rajouter des commentaires ils peuvent s'étendre sur plusieurs lignes et bien sûr,
figurer également au milieu d'une page HTML : <!-- Commentaire-->

15
En-tête des documents HTML (Suite)

<HEAD>
<TITLE> Bienvenue sur cette page web </TITLE>
<META NAME="auteur" CONTENT=" BESSAAD Wissam">
<META NAME="contenu" CONTENT="Cours HTML">
</HEAD>

En tête document HTML

16
Corps des documents HTML

17
Corps des documents HTML
Tout le contenu de la page Web, du moins son apparence, se situe dans le corps, c’est la
partie principale d’une page web, elle contient tout ce qui est visible dans le navigateur,
avec notamment du texte, des images, des liens hypertextes, des titres en grosses lettres,
etc…

<body>
<h1>Module TIC</h1>
……..
……..
<p>Cours HTML.</p>
</body>

18
Présentation du texte en HTML

19
Présentation du texte en HTML
Ci-après quelques exemples : titre, paragraphe, passage à la ligne, trait horizontal, gras et
italique.
<H1>Titre</H1>
<H2> <H3> <H4> <H5> <H6>
Attribut possible ALIGN=« left|center|right>…
<P>... </P> paragraphe
<BR> passage à la ligne
<HR> trait horizontal
<B>... </B> gras
<I>... </I> italique

20
Liens hypertextes

21
 Liens hypertextes
Un lien est une portion de texte permettant d'atteindre un document désigné par une URL :
<A HREF="URL">texte du lien</A>
- URL absolue
<A HREF=" https://www.usthb.com "> USTHB </A>
- URL relative
<A HREF="sommaire.html"> sommaire </A>

22
Insérer une image en HTML

23
 Insérer une image en HTML
Le code suivant présente le format utilisé par le HTML pour insérer une image :
<img src="nom de l’image" height="hauteur" width="largeur" >
Exemple:

<img src="img_world.jpg" width="500" height="600">

24
Les tableaux en HTML

25
Les tableaux en HTML
Les tableaux sont présentés par les balises suivantes :
• La balise englobant le code de description du tableau est <TABLE >..</TABLE>
• Le marqueur TR (=Table Row) défini la ligne du tableau.
• Le marqueur TD (=Table Data) entoure un élément de tableau.
• Le marqueur TH (=Table Header) est un élément de titre.
• La CAPTION permet de faire précéder le tableau d'un titre.

26
Les tableaux en HTML (Suite)
<table> <tr> <!—1er Ligne-->
<td>Juin</td>
<td>10000 DA</td>
<CAPTION>Titre du tableau</CAPTION>
</tr>

<tr> <tr><!—2eme Ligne-->

<td>Juillet</td>
<th>Mois</th> <!–1er colonne-->
<td>80000 DA</td>
<th>Gain</th> <!– 2eme colonne--> </tr>

</table>
</tr>

27
Exemple du code HTML

28
Exemple du code HTML

Un exemple d’un code HTML avec le résultat sur le navigateur selon les critères suivants :
Un dossier nommé « web» contient :
-deux documents HTML : www.html et gallerie.html
-deux images.
L’outils utilisé est Notepad++, un navigateur web pour l’affichage.

29
Exemple du code HTML (suite)

30
Exemple du code HTML (suite)

31
Questions !?

32