Le Langage HTML

1 Le langage HTML (Hyper Text Markup Language)
Toute page Web comprend une base de langage HTML.

Il s'agit d'un langage de balisage qui définit essentiellement la structure de la
page web (titres, tableaux, paragraphes, etc…).
Il permet en outre de créer des liens d'un document à un autre ou d'un endroit
d'un document à un autre endroit du même document.
Le langage HTML est interprété au niveau du client par un navigateur web
(Internet Explorer, Mozilla Firefox, Google chrome, Opéra, …). Il n’est donc pas
nécessaire d’utiliser un serveur web pour lire une page HTML.
1.1 Premier exemple
Dans un éditeur de texte (Gedit sous Ubuntu ou notepad(blocnote) sous
Windows), tapez le texte suivant puis enregistrez-le en extension .html.
<HTML> Ceci est une balise. Elles sont encadrées par < et >
<HEAD>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<TITLE>Page Test</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9966">
<H1><CENTER><B>Bonjour à tous!</B></CENTER></H1>
<H2><CENTER><B>Bienvenue</B></CENTER></H2>
<P>Vous êtes ici sur une <B>page de test....</B></P>
<P>Pour faire une recherche, <A
HREF="http://www.google.fr"><B><I>cliquez ici!</I></B></A></P>
</BODY>
</HTML>
Testez l’affichage de la page en double-cliquant sur l’icone du fichier. Vous

devriez obtenir le résultat suivant :
URL : file
<HEAD>
<TITLE>Page Test</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9966">
<A
HREF="http://www.google.fr">
<B><I>cliquez ici!</I></B>
</A>
<H1><CENTER><B>Bonjour à tous!</B></CENTER></H1>
Le navigateur interprète les différentes balises et produit le rendu graphique.

Ce type de programmation est donc en WYSINWYG
Ainsi, <BODY BGCOLOR="#FF9966"> indique la couleur de fond du corps de
la page,
<H1><CENTER><B> indique que le texte qui suit (Bonjour à tous !) sera du
premier niveau de titre (<H1>), centré (<center>) et en gras (<B>).
Une page HTML peut s'accompagner de feuilles de style en cascade (CSS :
Cascading Style Sheets - Feuilles de style en cascade) qui sont des styles qui
se chargent de la mise en forme de la page.
Le fait de dissocier le formatage du contenu permet de faciliter le ré habillage
du site. Il suffira de modifier les styles définis dans le fichier CSS pour
impacter toutes les pages HTML du site.
La ligne <meta http-equiv="Content-Type" content="text/html"; charset="utf-
8"/> permet au navigateur d’identifier le jeu de caractères utilisé.
UTF-8 est le jeu de caractère universel, qui permet de coder à peu près tous
les caractères connus de toutes les langues.
Il faut donc veiller à ce que le fichier HTML soit bien écrit en utilisant ce jeu de
caractères sous peine de voir les caractères spéciaux non codés selon la
norme HTML (ê pour ê par exemple) de manière curieuse et illisible (Ã©
ou � par exemple).
Si vous utilisez Gedit sous Ubuntu, choisissez le bon format lors de
l’enregistrement, si vous êtes sous Windows et que vous utilisez Notepad++,
choisissez Format → Encoder en UTF-8.
Lorsqu’un fichier HTML est exécuté localement, la barre d’adresse indique
file://. Lorsqu’il est hébergé sur un serveur, elle indique http://.
Structure d’une page HTML

Un document HTML commence par la balise <HTML> et finit par la balise
</HTML>.
Il contient également un en-tête décrivant le titre de la fenêtre du navigateur
ou de l’onglet.
Puis un corps dans lequel se trouve le contenu de la page.
L'en-tête est délimité par les balises <HEAD> et </HEAD>.
Le corps est délimité par les balises <BODY> et </BODY>.
<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>
<BODY>
Contenu de la page
</BODY>
</HTML>
1.2 Principales balises HTML
On trouvera sur internet de nombreux sites répertoriant les balises HTML de
manière plus exhaustive.
La liste ci-après ne représente que les quelques balises qu’il me semble,
indispensable de connaitre.
1.2.1 Structure de la page HTML

Balises Définitions
<HTML>...</HTML> Début et fin de fichier Html
<HEAD>...</HEAD> Zone d'en-tête d'un fichier Html
<TITLE>...</TITLE> Titre affiché par le browser (élément
de HEAD)
<BODY>...</BODY> Début et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX"> Couleur d'arrière-plan (en
hexadécimal)
<BODY background="xyz.gif"> Image d'arrière-plan
1.2.2 Mise en forme des caractères

<B>...</B> Texte en gras
<I>...</I> Texte en italique
<FONT Texte en couleur où XXXXXX est
color="#XXXXXX">...</FONT> une valeur hexadécimale
<FONT size=X>...</FONT> Taille des caractères où X est une
valeur de 1 à 7
1.2.3 Mise en forme du texte

 Commentaire ignoré par le
navigateur
<BR> Retour à la ligne
<CENTER>...</CENTER> Centre tout élément compris dans la
balise
<P>...</P> Nouveau paragraphe
<P align=center>...</P> Paragraphe centré. La balise align
accepte left et right
1.2.4 Les liens hypertextes ou ancrages
<A href="http://...">...</A> Lien vers une page Web
<A href="mailto:...">...</A> Lien vers une adresse Email
<A name="xyz">...</A> Définition d'une ancre
<A href="xyz">...</A> Lien vers une ancre
1.2.5 Listes
<UL> Liste à puces
<LI> ... </LI>
Elément de la liste
<LI> ... </LI>
</UL>
<OL> Liste numérotée
<LI> ... </LI>
Elément de la liste
<LI> ... </LI>
</OL>
<HR> Barre horizontale
1.2.6 Images
<IMG src="xyz.gif"> Insertion d'une image.
<IMG ... width=x height=y> Mise à l'échelle de l'image en pixels
<IMG ... alt="votre texte"> Texte alternatif lorsque l'image n'est pas
affichée
<IMG ... align=bottom> Alignement : bottom, middle, top, center,
left, right
1.2.7 Tableau
<TABLE>...</TABLE> Définition d'un tableau
<TABLE width=x> Largeur du tableau en pixels ou en %
(width=x)
<TABLE border=x> Largeur de la bordure
<TABLE cellpadding=x> Espace entre la bordure et le texte
<TABLE cellspacing=x> Epaisseur du trait entre les cellules
<TR>...</TR> Ligne du tableau
<TD>...</TD> Cellule du tableau
1.1.1 Les formulaires
< FORM>...</FORM> Définition d'un formulaire
<FORM METHOD=x> Méthode de soumission des données au
serveur (METHOD=POST ou
METHOD=GET)
<FORM ACTION=x> URL du script de traitement des
données du formulaire.
<input type="text" /> Définition d’une zone
de saisie de texte.
<input type="password" /> Définition d’une zone de saisie de mot
de passe (caractères cachés).
<input type="submit" /> Définition d’un bouton de soumission de
formulaire.
<input type="checkbox" /> Définition d’une case à cocher (cases
carrées, plusieurs choix possibles).
<input type="radio" /> Définition de cases d’options à
cocher (cases rondes, un seul choix
possible)
<input type="reset" /> Définition d’un bouton de remise à zéro
(effacement) d’un formulaire.
<input type="hidden" /> Définition d’un champ caché.
<textarea> Définition d’une zone de

texte multi-lignes.
<select name="pays"> Définition d’une liste déroulante.
<option value="c1">Choix name : nom de la liste
1</option> option : entrée dans la liste
<option value="c2">Choix value : valeur renvoyée par le
2</option> formulalire
<option value="c3">Choix >...< : chaine affichée dans la
3</option> liste
</select>
1.2.8 Exercice
Créez une page HTML de présentation qui contient vos nom, prénom,
discipline préférée, établissement de Collège, ville et une photo (image de
taille maxi 100ko) ou adaptez à votre propre situation.
Ajoutez un lien vers google.fr pour faire une recherche et un lien vers le site
de votre établissement.
1.3 Les limites du HTML
Une page web créée en HTML est totalement statique et n'offre aucune
possibilité d'interaction avec le visiteur. Chaque page doit être créée au
préalable et doit être manuellement mise à jour.
Pour rendre une page web plus dynamique, il est possible d'y insérer des
objets grâce aux balises <object>, <img>, <applet> ou <script>. Les objets
peuvent être des animations flash, des vidéos, des programmes joints à la
page web et exécutés soit dans le navigateur (scripts java, active X), soit par
l’ordinateur client (applets java).
Les objets ne fournissent pas toutes les solutions aux besoins d'interactivité et
de dynamisme des sites et peuvent parfois lourds à mettre en place.
Il faut alors avoir recours à la programmation coté serveur.
Plusieurs langages sont alors disponibles, nous étudierons uniquement ici le
PHP que l’on peut associer à une base de données relationnelle pour fournir
plus de puissance à nos applications.
2 Le langage PHP ( Hypertext Preprocesor)
PHP est un langage de script interprété côté serveur (comme les scripts CGI,
ASP, ...).
Sa syntaxe est voisine de celle du C.
Le serveur interprète le code PHP et génère du code HTML transmis au client. Il
offre donc un haut niveau de sécurité car le code originel n’est jamais transmis
au client, contrairement aux programmes exécutés côté client.
PHP est distribué sous licence GNU GPL, ce qui permet de l’utiliser librement et
gratuitement. De nombreux développeurs ont profité de l'Open Source pour
développer des modules prêts à l'usage et paramétrables à volonté.
Les modules serveurs de PHP sont implémentés, entre autre, sur les serveurs
Apache. Ce type de serveur est généralement installé dans les distributions de
linux. Sous Windows, il est possible d’installer un tel serveur à l’aide du logiciel
Wampserver (http://www.wampserver.com/download.php). La solution serveur
web de Microsoft (IIS) est aussi en mesure d’interpréter les scripts PHP.
PHP travaille généralement avec une base de données MySQL. Elle est installée
par défaut avec Wampserver. Sous linux, il faut procéder à son installation.
3 Le SQL (Structured Query Language)
a. Bases de données :
C’est un ensemble d’informations sur des objets, liés par des relations.
Exemple :
Livres
Titre ISBN Auteur Parution Genre Mot clé Dispo
Don Quichotte 97813.. Cervantes 1605 Roman Médiéval OUI
Alice au pays 97815.. Caroll 1865 Roman Conte NON
des merveilles Imaginaire
Dix petits 97805.. Christie 1939 Policier Train OUI
nègres
L’alchimiste 97829.. Coelho 1988 Conte Synagogue NON
philosophiqu
e
L‘attrape 97889.. Salinger 1951 Roman Antihéros OUI
cœurs
Un tableau comme ci-dessus est une Table
Chaque ligne est un Enregistrement. Ces enregistrements sont des n-

uplets.
Les éléments d’un enregistrement sont des Attributs, exemple Cervantes

et 1605 sont des valeurs de deux attributs d’un même enregistrement.
Chaque attribut est d’un Type particulier, on dit qu’il appartient à un

Domaine. Par exemple Coelho est du type chaine de caractères,
9782921997331 du type entier (grand), NON du type booléen codé False
(ou 0).
La description des éléments d’une ligne est une Relation. La relation de

cette table est donc le titre, le code ISBN, l’auteur, etc.
Dans une table, quand un attribut permet d’identifier tous les

enregistrements de manière unique, alors c’est une Clef. Ici le code ISBN
est une clef alors que le genre n’en est pas.
Mais on peut utiliser comme clef le genre et la disponibilité.
La clef choisie en priorité est la clef primaire. C’est souvent l’adresse mail
qui est choisie comme clef primaire.
Lors de la description d’un schéma relationnel on souligne la clef primaire.

Livres (Titre : VARCHAR(255), ISBN : BIGINT, parution : DATE etc.
Les types VARCHAR, BIGINT et DATE sont des types du langage SQL.
En pratique pour créer une base de données on peut utiliser une interface
graphique comme phpMyAdmin et l’extension Sqlite manager du
navigateur Firefox.
b. Les bases de données sont des éléments d’un SGBD système de gestion
de bases de données), un SGBD étant l’ensemble des logiciels qui
permettent la manipulation de bases de données.
Ces manipulations sont : Consultation, Modification, Ajout, Organisation, Copie,
Sauvegarde et Restauration.
Ces manipulations sont proches de l’algèbre relationnelle.
c. L’algèbre relationnelle est le support mathématique cohérent sur lequel

repose le modèle relationnel.
L’algèbre relationnelle propose un ensemble d’opérations élémentaires formelles
sur les relations dans le but de créer de nouvelles relations.
Ces opérations permettent de représenter des requêtes sur la base de données
dont le résultat s’exprime sous la forme d’une relation (i.e. table).
C’est ce formalisme qui est au cœur du langage de requête de SQL.
Nous pouvons distinguer trois familles d’opérateurs relationnels :

- Les opérateurs unaires (la sélection et la projection), qui sont les plus
simples, permettent de produire une nouvelle table à partir d’une autre table.
- Les opérateurs binaires ensemblistes (l’union, l’intersection et la différence)
permettent de produire une nouvelle relation à partir de deux relations de même
degré et de même domaine.
- Les opérateurs binaires ou n-aires (le produit cartésien, la jointure et la
division) permettent de produire une nouvelle table à partir de deux ou plusieurs
autres tables.
Remarque : Les notations de l’algèbre relationnelle ne sont pas standardisées .
1. Les opérateurs unaires
A. Sélection :
Définition : La sélection génère une relation regroupant exclusivement toutes les

occurrences de la relation R qui satisfont l’expression logique E.
Notation : σ(E)R.
Il s’agit d’une opération unaire essentielle dont la signature est :
relation  expression logique  relation.
La sélection permet ainsi de choisir (i.e. sélectionner) certaines lignes dans une
table. Le résultat de la sélection est donc une nouvelle relation qui a les mêmes
attributs que R.
Si R est vide (c’est-à-dire sans aucune occurrence), la relation qui résulte de la
sélection est vide.
Exemple : Avec la base de données Personne
Personne
idPersonne nom prénom
5 Durand Caroline
1 Germain Stan
12 Dupont Lisa
3 Germain Rose-Marie
Avec la sélection σ (idPersonne > 4)Personne, on obtient le tableau :
σ (idPersonne > 4)Personne
idPersonne nom prénom
5 Durant Caroline
12 Dupont Lisa
B. Projection
Définition : La projection consiste à supprimer les attributs autres que A1,

A2,..,An d’une relation et à éliminer les n-uplets en double apparaissant dans la
nouvelle version.
Notation : ( A1, A2,..,An)R

Il s’agit d’une opération unaire essentielle dont la signature est :
relation  liste d’attributs  relation
En d’autres termes, la projection permet de choisir des colonnes dans une table.
Si R est vide, la relation qui résulte de la projection est vide, mais pas forcément
équivalente étant donné qu’elle contient généralement moins d’attributs.
Exemple de projection sur la table PERSONNE :
∏ (nom )Personne
nom
Durant
Germain
Dupont
2. Les opérateurs binaires ensemblistes

A. Union
Définition : l’union est une opération portant sur deux relations R1 et R2 ayant le
même schéma et construisant une troisième relation constituée des n-uplets
appartenant à l’une ou l’autre des deux relations R1 et R2 sans doublon.
Notation : R1∪ R2. Il s’agit d’une opération binaire ensembliste commutative

essentielle dont la signature est : relation  relation  relation
Comme déjà dit, R1 et R2 doivent avoir les mêmes attributs et si une même
occurrence existe dans R1 et R2, elle n’apparaît qu’une seule fois dans le résultat de
l’union.
Le résultat de l’union est une nouvelle relation qui a les mêmes attributs que R1 et
R2.
Si R1 et R2 sont vides, la relation qui résulte de l’union est vide.
Si R1 (respectivement R2) est vide, la relation qui résulte de l’union est identique à
R2 (respectivement R1).
Ci-dessous un exemple d’union :
R1
nom prénom
Durand Caroline
Germain Stan
Dupont Lisa
Germain Rose-Marie
R2
nom prénom
Durand Caroline
Germain Luc
Dupond Laurent
R1 U R2
nom prénom
Durand Caroline
Germain Stan
Dupont Lisa
Germain Luc
Dupond Laurent
Germain Rose-Marie
B. Intersection
R 1∩ R 2
nom prénom
Durand Caroline
C. Différence
R1 – R2
nom prénom
Germain Stan
Dupont Lisa
Germain Rose-Marie
3. Les opérateurs binaires ou n-aires
A. Le produit cartésien
R1
nom prénom
Durand Caroline
Germain Stan
R2
Prix Jouet
35 € Voiture
45 € Poupée
R 2× R 1=R 1× R 2
nom prénom Prix Jouet
Durand Caroline 35 € Voiture
Germain Stan 45 € Poupée
Germain Stan 35 € Voiture
Durand Caroline 45 € Poupée
B. La jointure
C’est un produit cartésien suivi d’une sélection :
R1 ⋈E R2 = σE (R1R2)
C. La thêta-jointure
Pour la La thêta-jointure : σE = σA1<A2. La sélection compare deux
attributs.
D. Équi-jointure
Pour l’equi-jointure : σE = σ(A1=A2). La sélection implique l’égalité de

deux attributs.
E. La division
Définition : la division est une opération portant sur deux relations R1 et

R2, telles que le schéma de R2 est strictement inclus dans celui de R1,
qui génère une troisième relation regroupant toutes les parties
d’occurrences de la relation R1 qui, associées à toutes les occurrences de
la relation R2, se retrouvent dans R1.
Notation : R1÷ R2.
Exemple :
R1
nom prénom R2
Durand Caroline nom
Germain Stan Germain
Dupont Lisa
Germain Rose-Marie
R1÷R2
prénom
Stan
Rose-Marie
d. Quelques commandes du SQL
_ SELECT titre, auteur

FROM Livres ;
C’est une projection
_ SELECT * # le signe * désignant le fait de prendre tout le tableau#

FROM Livres
WHERE genre=’roman’
C’est une sélection σ (genre=roman)

Le Langage HTML

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Le Langage HTML

Titre original :

Transféré par

Droits d'auteur :

1 Le langage HTML (Hyper Text Markup Language)

Toute page Web comprend une base de langage HTML.

Testez l’affichage de la page en double-cliquant sur l’icone du fichier. Vous

<H1><CENTER><B>Bonjour &agrave; tous!</B></CENTER></H1>

Le navigateur interprète les différentes balises et produit le rendu graphique.

Structure d’une page HTML

1.2.1 Structure de la page HTML

1.2.2 Mise en forme des caractères

1.2.3 Mise en forme du texte

<textarea> Définition d’une zone de

Un tableau comme ci-dessus est une Table

Chaque ligne est un Enregistrement. Ces enregistrements sont des n-

Les éléments d’un enregistrement sont des Attributs, exemple Cervantes

Chaque attribut est d’un Type particulier, on dit qu’il appartient à un

La description des éléments d’une ligne est une Relation. La relation de

Dans une table, quand un attribut permet d’identifier tous les

Lors de la description d’un schéma relationnel on souligne la clef primaire.

c. L’algèbre relationnelle est le support mathématique cohérent sur lequel

Nous pouvons distinguer trois familles d’opérateurs relationnels :

Remarque : Les notations de l’algèbre relationnelle ne sont pas standardisées .

1. Les opérateurs unaires

Définition : La sélection génère une relation regroupant exclusivement toutes les

Exemple : Avec la base de données Personne

Définition : La projection consiste à supprimer les attributs autres que A1,

Notation : ( A1, A2,..,An)R

Exemple de projection sur la table PERSONNE :

2. Les opérateurs binaires ensemblistes

Notation : R1∪ R2. Il s’agit d’une opération binaire ensembliste commutative

Ci-dessous un exemple d’union :

3. Les opérateurs binaires ou n-aires

C’est un produit cartésien suivi d’une sélection :

Pour l’equi-jointure : σE = σ(A1=A2). La sélection implique l’égalité de

Définition : la division est une opération portant sur deux relations R1 et

Notation : R1÷ R2.

_ SELECT titre, auteur

C’est une projection

_ SELECT * # le signe * désignant le fait de prendre tout le tableau#

C’est une sélection σ (genre=roman)

Centres d'intérêt liés

Vous aimerez peut-être aussi

<H1><CENTER><B>Bonjour à tous!</B></CENTER></H1>