cours6 .pdf



Nom original: cours6.pdf
Titre: Microsoft PowerPoint - cours6.ppt [Mode de compatibilité]
Auteur: Administrateur

Ce document au format PDF 1.6 a été généré par Microsoft PowerPoint - cours6.ppt [Mode de compatibilité] / ScanSoft PDF Create! 6, et a été envoyé sur fichier-pdf.fr le 29/10/2014 à 22:46, depuis l'adresse IP 197.202.x.x. La présente page de téléchargement du fichier a été vue 609 fois.
Taille du document: 431 Ko (25 pages).
Confidentialité: fichier public


Aperçu du document


Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - le langage HTML

Cours N°6
5
1
0
Le langage HTML
2

D

e
r
è
1
Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

~
4

1
0

2

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

Concepts de Base

5
1
0
2
~

1. Généralités
HTML (pour HyperText Markup Language) est un
langage de description de documents hypermédia.

0
2

4
1

Un document hypermédia est un document qui est à la
fois multimédia et hypertexte.

M
S

Un document multimédia est un document constitué
d’éléments de plusieurs natures : texte, images, son,
vidéo, code exécutable, etc.

D

M
L

Un document hypertext est un document dans lequel
certains éléments sont rendus actifs (on parle alors de
liens). En activant un lien (généralement en cliquant
dessus) le lecteur peut accéder à un autre document. Ce
dernier peut être un document hypertexte ou non.
2

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
En utilisant SGML, l’auteur balise le~ contenu de son
4
document par des marques spéciales,
dites balises.
1
Certaines balises sont utilisées 0
pour décrire la structure
2
du document (titre, section, sous-section, etc…).
M
D’autres pour décrire S
la présentation du document
(caractères en gras, en italique, etc…).
D
La troisième famille
de balises sert à décrire la
M
L aux composants (ex. spécifier
sémantique attribuée
e
qu’une chaîne
de caractères représente une adresse, le
r
è
nom d’une
1 personne, un numéro de téléphone, etc…).

1. Généralités (suite…)
Le langage HTML est dérivé du langage SGML
(Standard Generalized Markup Language).

3

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

2. Balises HTML
Les balises servent à donner des instructions :
mise en forme du texte
mise en forme de la page
insertion d'objets multimédias comme les images
insertion de liens hypertextes
insertion d'éléments actifs : javascript, applets
java, animations flash, ...
Une balise se présente sous la forme d'une lettre ou
d'un mot (son nom) entourés par les symboles < et >.
Exemple:

D

<p>

e
r
è
1

M
L

commence

M
S

0
2

4
1

paragraphe; </p> termine le
paragraphe.
<b> indique que le texte doit être écrit en gras; </b> met fin
à la commande.
4
Informatique 1 "Bureautique & Tech. WEB"

un

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

2. Balises HTML (suite…)
La syntaxe d’une balise est la suivante :
<nom de la balise>
Par exemple la balise qui marque le début d’un
document HTML est la balise : <HTML>
Pour marquer la fin du champ d’action d’une balise on
utilise une balise de fermeture dont la syntaxe est :
</nom de la balise>
Ainsi pour marquer la fin d’un document HTML on
utilise la balise </html>
Il existe des balises qui n’ont pas la fin du champ
d’action. Exemple
<br> Simple saut de ligne.
<HR> Dessine une ligne.
5

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

4
1

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

3. Premier fichier HTML

5
1
0
2
~

<html>
<head>
<title>Ma première page</title>
</head>
<body>
Salut! Tout le monde.
</body>
</html>

0
2

4
1

M
S
les balises <html> et </html> : elles entourent le
document HTML. D
M
Le document est
constitué de deux parties : l'entête et le
L
corps.
e
r
les balises
<head> et </head> délimitent l'entête.
è <body> et </body> délimitent le corps
les 1
balises
6

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

Entête
L'entête est destiné à recevoir certains renseignements
généraux sur le fichier : auteur, mots-clés, titre de la
page,...

4
1

0
Les balises <Title> et </Title>
2 servent à définir le titre
utilisé par le navigateur pour l'affichage de la barre de titre
M
de la fenêtre ou pour l'insertion
S dans les favoris.
D
La balise <Meta>
serve à définir les informations qui
M
L du document : description du
décrivent le contenu
e
document, date
de création, auteur, mots-clés…
r
è
1
7

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

Exemple de Balises Meta
<Head>
<Title>Ma première page</Title>

0
2

4
1

<Meta Name="description" Content="Page éditer par le langage HTML">
<Meta Name ="keywords" Content= "langage, html, éditeur texte, page
web, site" Lang="fr">

D

M
S

<Meta Name ="author" Content= "Première LMD SM (S1)">

M
L

<Meta Name ="copyright" Content="© 2014-2015 FS – Univ Tlemcen">
</Head>

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

8
2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

Corps
Le corps du fichier contient le texte qui constitue la partie
visible du document.

0
2

4
1

Voir le résultat
Enregistrer le fichier texte sous le nom exemple1.html.
Double cliquer sur exemple1.html pour le voir apparaître
dans un navigateur web.

D

e
r
è
1
Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

9
2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

4. Utilisation des couleurs
Certaines balises peuvent être accompagnées
d'attributs: la balise <body> permet de définir la couleur
du fond de la page ainsi que celle du texte.
Les couleurs sont définies par une suite de 3 nombres
hexadécimaux représentant les valeurs du rouge, du vert
et du bleu.
Pour obtenir un texte écrit en blanc sur fond bleu, on
complètera la balise <body> de la façon suivante:
<body bgcolor="#0000FF" text="#FFFFFF">
Il est aussi possible d'utiliser certains noms de couleurs :
White, Black, Red, Green, Cyan, Magenta, Gray, Silver,
Gold, Orange, Yellow et Blue.
Ainsi, <body bgcolor="Gold" text= "blue"> donnera un
texte bleu sur fond doré.
10

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

5
1
0
2
~

4
1

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

La balise <body> accepte les principaux attributs suivants:
background: désigne la source d’une image de fond.
bgcolor: désigne la couleur de fond de la page.
link: désigne la couleur d’un lien non encore visité.
vlink: désigne la couleur d’un lien déjà visité.
alink: désigne la couleur d’un lien sélectionné.
text: désigne la couleur du texte.

0
2

4
1

M
S
<body background="butterfly.gif"
bgcolor="#FFFFFF"
D
text="#000000">
M
Cette balise spécifie
que le fond de la page est remplie par
L
l’image contenu
dans le fichier butterfly.gif, le texte de la
e
r
page est en noir
et la couleur du fond est en blanc.
è
1
Par exemple la balise suivante:

11

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5. Organisation du texte
Un texte est organisé en sections.
Chaque section peut contenir de sous-sections et/ou des
paragraphes.
Un paragraphe est composé de plusieurs lignes.
HTML fournit un ensemble de balises pour gérer une
telle décomposition de textes.
Les balises <Hx> et </Hx> où x = [1, 6] sont utilisées
pour marquer les sections.
La balise <H1> pour marquer les sections principales
<H2> pour les sous-sections et <H3> pour les sous
sous-sections et ainsi de suite.
Chacune des balises <Hx> accepte un attribut
d'alignement nommé align qui peut prendre les valeurs:
left, right et center

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

5
1
0
2
~

4
1

12

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

5. Organisation du texte (suite…)

5
1
0
<H1 align="center"> Titre Principal 2
</H1>
~
4
1
<H2 align="left "> Sous–titre </H2>
0
2
<H3 align="left "> Sous sous–titre </H3>
M
S

D
M
<H6 align="left
" > Dernier sous-titre </H6>
L
e
r
è
1

Exemple:

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

13
Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

5. Organisation du texte (suite…)

5
1
0
2
~

Le début d'un paragraphe est marqué par la balise <P>
qui accepte aussi un attribut align.
La fin d'une ligne (ou pour commencer une nouvelle
ligne) est marquée par la balise <br>.
La fin du paragraphe est marqué par la balise </P>
Exemple:

0
2

4
1

M
S
Ceci est une <br>
Page web D
M
<br> L
e
C’est
une autre ligne
r
è
<p align="center">

1 </p>
Informatique 1 "Bureautique & Tech. WEB"

14
2014-2015©Faculté des Sciences

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Centré, Gras, Italique, etc…

5
1
0
2
~

<BODY>
<B>texte en gras</B> <BR>
<I>texte en italique</I> <BR>
<U>texte souligné</U> <BR>
<CENTER>texte centre</CENTER> <BR>
<B><FONT color="red" size=2>texte en rouge, gras de
taille 2</FONT></B>

0
2

4
1

M
La balise <B> pour mettre
S le texte en gras.
La balise <I> pour mettre
D le texte en italique.
La balise <U> pour
souligner un texte.
M
L pour centrer le texte.
La balise <center>
e
La balise <FONT>
pour changer la couleur et la taille du
r
è
texte. 1
15

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

6. Remarques Importantes

5
1
0
2
~

Attention à bien refermer vos balises (avec la balise de
fin) sinon la suite du texte aura également les propriétés
de la balise non refermée.

0
2

4
1

Si vous voulez cumulez des balises, par exemple mettre
un texte en gras, en italique et centré, il faut bien faire
attention à l'ordre des balises pour les refermer ! Voici
ce qu'il ne faut pas faire :

M
<B><I><CENTER>monS
texte</I></B></CENTER>
D l'ordre inverse de l'ouverture
Il faut les refermer dans
M
:
L
e
<B><I><CENTER>mon
texte</CENTER></I></B>
r
è
1
16

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
La balise <A> permet de créer un lien1 hypertexte
0
pointant vers un document en spécifiant
l'url de celui-ci
2
~
au niveau de l'attribut "href".
4
1
La page définie par le lien hypertexte
s'affiche dans la
0
2 n'est pas spécifié. Si
page courante si l'attribut "target"
cet attribut vaut "blank",Mla page s'ouvrira dans un
S fenêtre.
nouvel onglet ou une nouvelle
D
Exemple:
M
L
<a href="http://www.univ-tlemcen.dz" target="blank"> Lien
e
r
de l’Université
de Tlemcen</a>
è
1
7. Les Liens (ou Pointeurs)

17

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
Les balises principales sont <TABLE>...</TABLE>.
1
0
Elles entourent le tableau.
2
~
Entre ces balises seront définies les
cellules, ligne par
4
1
ligne.
0
2
Les balises <TR>...</TR> entourent les cellules qui
M
forment une ligne du tableau.
S
Les balises <TD>...</TD>
D entourent une cellule.
M
L
e
r
è
1

8. Les Tableaux

18

Informatique 1 "Bureautique & Tech. WEB"

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Exemple:

5
1
0
2
~

<table border=1>
<tr>
<td>Cellule Ligne1 Colonne 1</td>
<td>Cellule Ligne1 Colonne 2</td>
<td>Cellule Ligne1 Colonne 3</td>
</tr>
<tr>
<td>Cellule Ligne2 Colonne 1</td>
<td>Cellule Ligne2 Colonne 2</td>
<td>Cellule Ligne2 Colonne 3</td>
</tr>
</table>

D

e
r
è
1
Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

4
1

19
2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Services Web

Attribues de la balise <TABLE>
La balise <TABLE> peut contenir un certain nombre d'attribut qui définissent son
positionnement, sa taille et son aspect.
1. BORDER
L'attribut BORDER permet de fixer la taille en pixels des lignes qui délimitent
les cellules du tableau. Si cette taille est 0, ces lignes ne sont pas affichées.
2 BGCOLOR
L'attribut BGCOLOR permet de définir la couleur de fond du tableau.
3. WIDTH
L'attribut WIDTH permet de fixer la largeur du tableau en pixels ou en
pourcentage de la largeur disponible.
4. ALIGN
L'attribut ALIGN permet de définir l'alignement du tableau dans la largeur de
l'espace disponible. Les valeurs possibles sont LEFT, CENTER et RIGHT.
5. CELLSPACING
L'attribut CELLSPACING permet de définir en pixels l'espace de séparation des
cellules.
6. CELLPADDING
L'attribut CELLPADDING permet de définir en pixels l'espace séparant le bord
des cellules de leur contenu.
20

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

5
1
0
2
~

4
1

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

Attribues de la balise <TD>
La balise <TD> peut contenir un certain nombre d'attribut définissant le
comportement d'une cellule.
1 WIDTH
L'argument WIDTH permet de définir la largeur de la cellule en pixels
ou en pourcentage de la largeur du tableau.
2 BGCOLOR
L'attribut BGCOLOR permet de définir la couleur de fond de la cellule.
3 VALIGN
L'attribut VALIGN permet de définir l'alignement vertical dans la cellule.
Les valeurs possibles sont TOP, MIDDLE et BOTTOM.
4 COLSPAN
L'attribut COLSPAN permet de définir le nombre de colonnes de
tableau que devra occuper la cellule.
5 ROWSPAN
L'attribut ROWSPAN permet de définir le nombre de lignes de tableau
que devra occuper la cellule.

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

4
1

21

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

9. Insérer une image dans un document html
On peut inclure une image dans le corps du document en
utilisant la balise IMG.
Exemple :
<IMG SRC="nom_fichier">

0
2

4
1

Cette balise admet un certain nombre d'attributs :

M
S

ALT
permet de spécifier un petit texte associé à l'image; ce texte
sert de remplacement tant que l'image n'est pas affichée, il
apparaît aussi lorsqu'on laisse la souris au dessus de
l'image.
Exemple :
<IMG SRC="nom_fichier" ALT="Mon image">

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

22
2014-2015©Faculté des Sciences

Semestre1 LMD SM

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Cours 6: Technologies web - Le langage HTML

5
1
0
2
~

BORDER :
permet d'encadrer l'image ou de supprimer le cadre qui est
mis automatiquement lorsque l'image joue le rôle de lien
hypertexte.

0
2

4
1

WIDTH et HEIGHT
Permet de spécifier les dimensions de l'image en pixels.
Cela permet des agrandissements, réductions ou
déformations.
Il est recommandé de spécifier les dimensions de l'image
même si on ne les modifie pas, cela accélère le
téléchargement.
Le navigateur connaît immédiatement la place à réserver
Cela lui permet de continuer à afficher le texte avant de
s'occuper des images.
23

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

2014-2015©Faculté des Sciences

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Université Abou Bekr Belkaïd – Tlemcen (Algérie)

Exemple
<HTML>
<HEAD>
<TITLE> Exemple 4 </TITLE>
</HEAD>

0
2

5
1
0
2
~

4
1

<BODY bgcolor="#FFFFFF" text="#000000">

<Table border=1 align="left">
<tr>
<td colspan=2><B><I><FONT color="Cyan" size=4>Insertion d'une
Image </FONT></I></B></td>
</tr>
<tr>
<td> L'image de droite est un papillon </td>
<td> <IMG SRC="butterfly.gif" ALT="un beau papillon"> </td>
</tr>
</table>
</body>
</html>

D

e
r
è
1

Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

2014-2015©Faculté des Sciences

24

Semestre1 LMD SM

Cours 6: Technologies web - Le langage HTML

Exemple (suite…)

D

e
r
è
1
Informatique 1 "Bureautique & Tech. WEB"

M
L

M
S

0
2

5
1
0
2
~

4
1

25
2014-2015©Faculté des Sciences

Semestre1 LMD SM




Télécharger le fichier (PDF)

cours6.pdf (PDF, 431 Ko)

Télécharger
Formats alternatifs: ZIP







Documents similaires


cours6
cours6
cours6 2diapos
cours6
cours6 2diapos
cours5 2diapos

Sur le même sujet..