Académique Documents
Professionnel Documents
Culture Documents
Cours 04 Module TIC
Cours 04 Module TIC
Cours 04 Module TIC
Module :
Techniques de l'information et de la communication
TIC
1
Université des sciences et de la technologie Houari Boumediene
Faculté d’Electronique et d’Informatique
Cours 04
• 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.
5
Les 03 types du développement web
Les trois principaux types de développeurs sont front-end, back-end et full-stack.
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.
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)
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>
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:
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>
</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