Les Types de données

(1)

Partie B : Web statique I – Le langage HTML

1. Introduction au langage HTML

• Les pages web sont crées grâce à des scripts HTML.

• L’HTML est un langage composé d’un ensemble de balise (tags).

• Une balise permet la mise en page et en forme du contenu d’une page web.

• HTML est l’abréviation de : Hypertext Markup Language (Langage de balise d’hypertexte)

Activité 1 :

1) Créer à l’aide du bloc-notes un fichier texte

2) Enregistrer ce fichier en utilisant les paramètres suivants :

o Nom : page_1

o Extension : .html

3) Fermer l’éditeur texte et double cliquer sur le fichier obtenu.

Constatation :

• Le script html est interprété par le navigateur par défaut de votre système (client web) exemple : IE, Firefox…

2. Structure d’un document HTML

Constatations : Voir le haut de la page 54.

Activité 2 :

<HTML> Balise de Début html

<HEAD> Entête de la page

<TITLE> </TITLE> Titre de la page

</HEAD>

<BODY> Corps de la page

</BODY>

</HTML> Balise de fin html

(2)

3. Les balises du langage HTML

• Les balises html ne sont pas sensibles à la casse.

• Syntaxiquement on peut trouver quatre types de balises :

o Balises à partie ouvrante et fermante, Exemple : <body> </body>

o Balises à une seule partie, Exemple : <HR>

o Balises à partie ouvrante avec propriétés et à partie fermante, Exemple : <Font size ="5" color = "blue"> texte </Font>

o Balises composées d’une partie ouvrante avec propriétés, Exemple : <IMG src =" " width = " " height = " " alt = " ">

a) Les textes et les paragraphes Nouveau paragraphe :

<P> </P>

Alignement du paragraphe : La commande align :

Exemple : <P align = center> texte <P>

Align = center Texte centré

Align = right Texte aligné à droite

Align = left Texte aligné à gauche

Passage à ligne suivante :

<BR>

Tracer un trait horizontal :

<HR size = " " width= " " align=" ">

Insérer un commentaire :

Texte en gras (Bold) :

<b>...</b>

Texte en italique :

<i>…. </i>

Soulignement du texte :

<u>…</u>

(Size : épaisseur, width : longeur en pixel)

(3)

Mise en forme de la police :

"x" face = "police"> </Font>

, blue … F

e 1 à 7.

het Ms

texte :

Activité 3 :

r texte, Modifier le code html de la page_1.html de sorte à ce

<Font color = "couleur" size = La couleur :

• Red, green

• #000000 … #FFFFF La taille "x" :

• Peut aller d La police :

• Arial

• Trebuc

• Verdana…

Soulignement du

<u>…</u>

1) A l’aide de votre éditeu

que vous obtenez le contenu suivant :

Enregistrer les modifications et visualiser votre page sur le navigateur.

2)

(4)

b) Les titres

titre : texte

eau de titre voulu

En htm

/Hn> Appelé balise header, utilisée pour afficher un titre. (1≤ n≤ 6)

Activité 4 :

éditeur web installé sur vote ordinateur.

en algorithmique tout en définissant

• Créer un

1) Sélection du 2) Menu Format 3) Option Style 4) Choisir le niv 5) Valider

l :

<Hn…> <

1) Lancer l’

2) Créer une page nommée types_de_données.html 3) Résumer les types de données que vous manipuler

différents niveaux de titres.

Les Types de données

Les types standards

rdinaux)

teurs

Les types scalaires Les types discret (o

Les types utilisa

Les types tableaux

Les types énumérés

Les types intervalles

(5)

c) Les images

• Insertion d’une image:

1) Choisir l’emplacement d’insertion 2) Menu Insertion

3) Image / A partir d’un fichier 4) Chercher et sélectionner l’image 5) Insérer

En html :

Voir livre page 59.

• Insertion d’image en arrière plan : 1) Clic droit sur la page

2) Propriétés de la page 3) Arrière-plan

4) Choisir l’image de fond 5) Valider

En html : <body background="image.jpg"> </body>

• Couleur du fond de la page :

La commande bgcolor s'intègre dans d'autres balises comme : En html : <body bgcolor= #003399 > </body>

Activité 5 :

Créer une page web nommée fond.html et tester limage d’arrière plan et la couleur d’arrière plan.

(6)

d) Les listes

<UL type =" "> Liste non numérotée (Unordered List)

<Li>

<Li> éléments de la liste (List item)

……

</UL>

• Types : square, circle.

<OL type =" "> Liste numérotée (Ordered List)

<Li>

……

</OL>

• Types : A, a, I, i, 1.

<DL>

……

</DL>

Activité 6 :

Mettre à jour la page types_de_données.html en créant des listes à puces, des listes numérotées et des listes de définition.

e) Les tableaux

• Insertion d’un tableau : 1) Menu Tableau

2) Option Insérer / tableau

3) Choisir les paramètres du tableau 4) Valider

En html :

<table width =" " border=" " cellspacing=" " cellpadding=" "> Déclaration du tableau

<tr> ligne

<td> </td> colonne

…

</tr>

(7)

f) rtextes

un lien :

et (texte, image…)

rtexte

e ou externe)

En htm

chemin de la page cible" Target =" "> Texte du lien </a>

ancre) et :

l’emplacement voulu

du signet

En htm

nom du signet"> </a>

Les liens hype Lien externe :

• Création d’

1) Sélection de l’obj 2) Menu insertion 3) Option lien hype

4) Préciser la cible (intern 5) Valider

l :

<a href= "

Voir livre 69.

Lien interne : (

• Insertion d’un sign

La propriété « Target » veut dire qu’on va ouvrir le lien dans : Une nouvelle fenêtre : "_blank"

La même fenêtre : "_Self"

Dans un cadre : "_parent"

1) Placer le curseur à 2) Menu Insertion 3) Option signet 4) Préciser le nom 5) Valider

l :

<a name="

(8)

g) a création de formulaires HTML

">

nom" size="20" maxlength ="30"></p>

</p>

="adresse" cols="20"></textarea>

2ème langue :</p>

e="Français">Français<br>

" name="option1" value ="Musique">Musique<br>

="fichier" size="35">

"submit" value="Envoyer" name="B1">

>

/form

L

<form method="GET" action="Formulaire.htm

<p>Votre Nom :<input type="text" name="

<p>Votre Prénom :<input type="text" name="prenom" size="20" maxlength ="20">

<p>Votre adresse :</p>

<textarea rows="2" name <p>Votre BAC :</p>

</select>

<p>Précisez votre

<input type="radio" name="langue" valu

<input type="radio" name="langue" value="Anglais">Anglais<br>

<input type="radio" name="langue" value="Allemand">Allemand

<p>Vos options :</p>

<input type="checkbox

<input type="checkbox" name="option2" value="Théatre">Théâtre<br>

<input type="checkbox" name="option" value="Dessin">Dessin<br>

<p>Votre photo :</p>

<input type=

<input type="reset" value="Rétablir" name="B2"></p

< >

• sertion des objets du formulaire :

ire ulu Act

formulaire.html en mode création.

In

1) Menu insertion 2) Option Formula 3) Cliquer sur l’objet vo ivité 7 :

Créer la page

(9)

h) Les cadres

e cadres est une fonctionnalité du HTML qui permet de découper la

a page définissant la structure du découpage.

es modèles de pages

modèle souhaité

<h

res</title>

cols="200,*">

" name="g">

Le système d

fenêtre de navigation en plusieurs parties indépendantes. Chacune de ces parties peut alors contenir une page web qui peut changer au fil de la navigation.

• 1^ère étape : Création de l 1) Menu Fichier 2) Nouveau / Autr 3) Onglet cadres 4) Sélectionner le 5) Valider

En html :

tml>

<head>

<title>Cad

</head>

<frameset

<frame src=" cadre_g.html

</frameset>

</html>

2^ème étape :

é s qui vont apparaître au niveau des cadres.

index.html en mode code html.

.html.

• Constatations :

•

Cr ation des page Activité 8 : Créer la page

Créer les deux pages cadre_g.html et cadre_d

Voir livre 76.