Informatique
Université de Thiès
UFR des Sciences de la Santé
Cheikh S.M CISSÉ
sidimouhamed12@[Link]
Plan
I. Balise du langage HTML
II. Conception de site web (CSS, Dreamweaver)
III. Introduction aux bases de données,
photoshop
IV. Administration des bases de données
V. Requêtes sur des bases de données
I. Balise du langage HTML
Le langage HTML (HyperText Markup Language) est le
"langage" qui permet à un navigateur Web d'afficher un document
Web selon une certaine structure.
Une page Web est généralement écrite dans un fichier en HTML
(ou assimilé).
I. Balise du langage HTML
1. Notion de document HTML
Simple fichier contenant des balises
Par convention: extension .htm ou .html
Tout éditeur de texte de base (bloc-notes)
permet d’écrire le code HTML
Éditeur plus évolué: génération automatique du code HTM
I. Balise du langage HTML 5
2. Structure d’un document HTML
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page web </title>
</head>
<body>
Balises de création de la page web
</body>
</html >
I. Balise du langage HTML 5
2. Structure d’un document HTML
Tout document HTML peut débuter de la même manière par la
déclaration <!DOCTYPE html>
Vient ensuite l’élément racine <html> qui inclut les éléments
<head> <body>
Chacun de ces éléments a un contenu et donc une balise d’ouverture
et une balise de fermeture
<head> incluant obligatoirement l’élément <title> et un élément
<meta /> qui contient la définition du jeu de caractères utilisé dans
la page
I. Balise du langage HTML 5
2. Structure d’un document HTML
<body> ayant au moins un élément enfant ;Dans l’exemple qui
suit, il s’agit de <h1>
La structure minimale d’un document HTML 5 est donc
semblable à celle de l’exemple ci-dessous
Le fichier contenant ce code doit avoir une extension .html ou
.htm .
I. Balise du langage HTML 5
2. Structure d’un document HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title> HTML 5 </title>
</head>
<body>
<!-- Tout le contenu de la page -->
<h1>Le corps de la page minimale</h1>
</body>
</html>
I. Balise du langage HTML
3. Type de document HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" >
<html>
<head>
<title>Titre de la page web </title>
</head>
<body>
Balises de création de la page web
</body>
</html >
I. Balise du langage HTML
3. Balise HTML
En HTML, les informations sont organisées à l'aide de "balises".
Une balise permet de contenir quelque chose, par exemple "un
lien", "un paragraphe", etc.
La balise se caractérise par un mot encadré des signes inférieur <
et supérieur > comme par exemple <html>, <body>, etc.
Les balises HTML vont généralement par paire : l'une ouvre,
l'autre referme et ce qui est situé entre les deux balises est affecté.
Toutes les balises de la page sont organisées de manière
hiérarchique
I. Balise du langage HTML
3. Balise HTML
La balise ouvrante est la balise permettant de délimiter le début, et
la balise fermante délimite la fin.
Dans le cas d'un titre, "<h1>" est une balise ouvrante et "</h1>"
est la balise fermante correspondante.
I. Balise du langage HTML
3. Balise HTML
Ordre de fermeture non respecté:
<b><i>du texte en gras italique...</b></i>
Ordre correct:
<b><i>du texte en gras italique...</i></b>
I. Balise du langage HTML
3. Balise HTML
Une balise HTML est très simple : le signe "inférieur« < suivi de
quelques lettres et enfin du signe "supérieur" >.
Si la balise est double (c'est souvent le cas) car elle doit contenir
quelque chose, alors la balise fermante est très similaire à la balise
ouvrante : < suivi d'une barre oblique /puis des quelques lettres
(les mêmes que pour la balise ouvrante) et enfin >.
I. Balise du langage HTML
3. Balise HTML
Un titre est une balise double :
<h1>...</h1>
Les balises ayant du contenu doivent être hiérarchisées car elles
vont par paires. En revanche, les balises simples n'ont pas cette
contrainte.
I. Balise du langage HTML
3. Balise HTML
Un passage à la ligne est une balise simple (sans contenu) :
<br/>
Une ligne de séparation est une balise simple (sans contenu) :
<hr/>
NB: L'identifiant d'une balise ("body" ou bien "h1" par exemple) peut
être écrit en minuscules, majuscules ou un mélange des deux mais
il est fortement recommandé d'utiliser systématiquement les
minuscules.
I. Balise du langage HTML
4. Les niveaux de titre
Le HTML définit six niveaux de titre
Structuration hiérarchique dans un texte
Ces niveaux sont définies par des balises
<hi></hi> avec i allant de 1 à 6.
I. Balise du langage HTML
5. Les paragraphes
Considérés comme des blocs de texte
La balise <nobr></nobr> empêche le retour de ligne sur les
paragraphes
Les espaces, tabulations comptent pour un espace dans les
paragraphes.
Balise <p> </p> (option align)
I. Balise du langage HTML
Les conteneurs
Balises servant à indenter le texte
I. Balise du langage HTML
Les listes
Permettent une énumération
Le langage HTML définit trois niveaux de liste:
La liste ordonnée
La liste non ordonnée
La liste de définition
La balise pour les listes <li> </li >
I. Balise du langage HTML
La liste ordonnée
En plus de la balise <li></li> il faut rajouter une balise <ol></ol>
Exemple Résultat
<ol>
<li> article 1 </li>
<li> article 2 </li>
</ol >
I. Balise du langage HTML
La liste non ordonnée
En plus de la balise <li></li> il faut rajouter une balise <ul></ul>
Il nous permet de créer une liste d’éléments non ordonnée
Exemple Résultat
<ul>
<li> article 1 </li>
<li> article 2 </li>
</ul >
I. Balise du langage HTML
La liste de définition
Les balises <dl></dl>, <dd></dd> et <dt></dt>
Exemple
<dl>
<dt>Terme </dt> <dd> Définition 1 </dd>
<dt>Terme2</dt> <dd> Définition 2 </dd>
</dl>
I. Balise du langage HTML
Les liens hypertextes
Permettent de spécifier une nouvelle adresse de navigation quand
on clique dessus.
C’est un texte sur lequel on peut cliquer pour se rendre sur une
autre page.
Pour faire un lien, on doit utiliser la balise <a> avec l’attribut href
pour indiquer vers quelle page le lien doit conduire.
I. Balise du langage HTML
Les liens hypertextes
1. Le lien local (fichier en local):
a. Deux fichiers dans un même dossier:
On crée deux fichiers dans un même dossier, nommé: [Link]
et [Link]
On va écrire comme cible du lien le nom du fichier vers lequel
on veut être redirigé.
Ex : <a href="[Link]"> lien vers le fichier2 </a>.
On dit que c’est un lien relatif
I. Balise du langage HTML
Les liens hypertextes
Code de la page [Link]
<p>Bonjour. Souhaitez-vous consulter <a href="[Link]">le fichier
2</a> ?</p>
La page 2 affichera simplement un message pour indiquer que l'on
est bien arrivé sur la page 2 :
<h1>Bienvenue sur la page 2 !</h1>
I. Balise du langage HTML
Les liens hypertextes
b. Deux pages situées dans des dossiers différents
Si [Link] se trouve dans un sous dossier appelé contenu
comme exemple:
I. Balise du langage HTML
Les liens hypertextes
b. Deux pages situées dans des dossiers différents
Ici, le lien doit être rédigé comme suit:
<a href="contenu/[Link]">
Si on avait plusieurs sous-dossiers, on écrirait ceci:
<a href="contenu/autredossier/[Link]">
I. Balise du langage HTML
Les liens hypertextes
b. Deux pages situées dans des dossiers différents
Si le [Link] est placé dans un dossier qui se trouve «plus haut
» dans l'arborescence, il faut écrire deux points comme ceci :
<a href="../[Link]">
I. Balise du langage HTML
Les liens hypertextes
c. Liens externe
C’est un lien qui permet de nous diriger vers un autre site Internet
Ex : <a href="[Link] visitez le site google</a>
I. Balise du langage HTML
Un lien vers une ancre
Une ancre est un point de repère que l’on peut mettre dans une page
HTML lorsqu’elle est trop longue.
Elle permet de rediriger l’utilisateur plus bas dans la même page
afin d’atteindre plus vite la partie qui l’intéresse.
Pour créer une ancre, on rajoute l’attribut id à une balise qui servira
de repère
I. Balise du langage HTML
Un lien vers une ancre
Utiliser l’attribut id pour donner un nom à une ancre, nous servira de
faire un lien vers cette ancre.
Exemple:
<h2 id="nom_ancre">Titre</h2>
Ensuite, on crée un lien avec un dièse (#) dans l’attribut href suivi
du nom de l’ancre.
Exemple:
<a href="#nom_ancre">Aller vers l'ancre</a>
I. Balise du langage HTML
Un lien vers une ancre
Exemple
I. Balise du langage HTML
Un lien vers une ancre
NB: Évitez de créer des id avec des espaces ou des
caractères spéciaux, utilisez simplement, dans la
mesure du possible, des lettres et chiffres pour
que la valeur soit reconnue par tous les
navigateurs .
I. Balise du langage HTML
Un lien vers une ancre située dans une autre page
Elle nous permet de faire un lien qui ouvre une autre page et qui
amène directement à une ancre située plus bas sur cette page.
Pour le faire, il suffit de taper le nom de la page suivi d’un dièse (#)
suivi du nom de l’ancre.
Exemple:
<a href="[Link]#nom_ancre">
Ici, on sera ramené sur la page [Link], directement au niveau
de l’ancre appelée nom_ancre
I. Balise du langage HTML
Un lien vers une ancre située dans une autre page
Exemple
I. Balise du langage HTML
Un lien qui ouvre une nouvelle fenêtre
Pour créer un lien qui ouvre une nouvelle fenêtre, on rajoute
l’attribut target="_blank« à la balise <a>.
NB: Selon la configuration du navigateur, la page s'affichera dans
une nouvelle fenêtre ou un nouvel onglet. Vous ne pouvez pas
choisir entre l'ouverture d'une nouvelle fenêtre ou d'un nouvel
onglet.
I. Balise du langage HTML
Un lien pour envoyer un e-mail
Pour qu’un visiteur puisse envoyer un lien en restant sur la même
page, on utilise des liens de type mailto.
Il suffit de modifier la valeur de l’attribut href. Par exemple:
<p><a href="[Link] un e-mail
!</a></p>
I. Balise du langage HTML
Un lien pour télécharger un fichier
Ici, on procède exactement comme si on fait un lien vers une page
web, mais en donnant l’attribut href comme valeur, le nom du fichier
à télécharger.
Pour faire télécharger le fichier [Link], on place ce fichier
dans le même dossier que notre page web (ou dans un sous-dossier
ou dossier parent) et faire un lien vers ce fichier.
<p><a href="[Link]">Télécharger le fichier</a></p>
I. Balise du langage HTML
Les images
Possibilité de les intégrer dans une page web
La balise <img /> permet de les intégrer
C’est un balise unique
I. Balise du langage HTML
Les images
La balise doit être accompagnée de deux attributs obligatoires:
src : il permet d'indiquer où se trouve l'image que l'on veut
insérer
alt : cela signifie « texte alternatif ». On doit toujours indiquer
un texte alternatif à l'image, c'es t-à-dire un court texte qui décrit
ce que contient l'image. Ce texte sera affiché à la place de
l'image si celle-ci ne peut pas être téléchargée (cela arrive).
Les images doivent se trouver obligatoirement à l'intérieur d'un
paragraphe (<p></p>).
I. Balise du langage HTML
Les images
Voici un exemple d'insertion d'image :
On peut afficher une info bull à l’aide d’un attribut facultatif: Il
s’agit de title.
I. Balise du langage HTML
Les principaux attributs de la balise <img>
Il sont au nombre de six:
SRC : emplacement de l’image (obligatoire)
ALIGN : spécifie l’alignement
ALT : texte alternatif lorsque l’image ne s’affiche pas
TITLE : Info bulle quand on survole l’image avec le curseur
WIDTH : largeur de l’image
HEIGHT : hauteur de l’image
I. Balise du langage HTML
L’arrière-plan
Possibilité de définir une image en arrière plan
Utilisation des attributs de la balise <body></body>
Exemple:
<body background=image>.. </body>
I. Balise du langage HTML
Les principaux attributs de la balise <body></body>
BACKGROUND : image de fond d’écran
BGCOLOR : couleur de l’arrière plan
LINK : couleur des liens hypertexte
ALINK : couleur des liens actifs
VLINK : couleur des liens déjà visités
TEXT : couleur du texte
I. Balise du langage HTML
Gestion des flux audio vidéos
On utilise la balise <embed></embed>
Permet d’inclure d’autres types de fichiers (programme etc.)
Nécessité d’un plug-in:
Windows media player, Shockwave Flash etc.
Exemple
<EMBED id="son" src=“[Link]"
height="45" width="300" autostart="true" >
</EMBED>
I. Balise du langage HTML
Les tableaux
Présentation des informations de manière structurée
De nombreux attributs (à vous de les chercher)
Quelques règles à respecter
Le tableau est encadré par les balises <TABLE></TABLE>.
Le titre du tableau est encadré par <CAPTION></CAPTION>
Chaque ligne est encadrée par <TR> </TR>
Les cellules d'en-tête sont encadrées par <TH> </TH>
Les cellules de valeur sont encadrées par <TD> </TD>
I. Balise du langage HTML
Quelques attributs importants
COLSPAN : débordement des cellules sur les cellules adjacentes
ROWSPAN : débordement des cellules sur les lignes adjacentes
Faut spécifier un nombre pour les attributs COLSPAN et
ROWSPAN
WIDTH = pourcentage de la taille de la page
ALIGN : position horizontale dans la case du tableau
VALIGN : position verticale dans la case du tableau
I. Balise du langage HTML
Exemple de tableau
<TABLE BORDER="1">
<CAPTION> Voici le titre du tableau </CAPTION>
<TR>
<TH> Titre A1 </TH>
<TH> Titre A2 </TH>
<TH> Titre A3 </TH>
<TH> Titre A4 </TH>
</TR>
<TR>
<TD> Valeur B1 </TD>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
I. Balise du langage HTML
Exercice
Donner le code HTML permettant de créer ce tableau qui occupe 90%
de la taille de la page
I. Balise du langage HTML
Les frames
Afficher plusieurs pages HTML dans différentes zones
Chaque frame possède un nom (attribut name)
Création d’un fichier de base contenant l’agencement des
frames
Utilisation d’un conteneur <frameset> à la place du jeu de
balise <body>
Pour désigner un cadre particulier on utilise l’attribut target
<A HREF="[Link]" TARGET="gauche">
I. Balise du langage HTML
Zone avec des fenêtres
<FRAMESET> Début de zone avec des fenêtres
</FRAMESET> Fin de zone avec des fenêtres
Agencement des fenêtres
<FRAMESET ROWS="..."> Fenêtres horizontales
<FRAMESET COLS="..."> Fenêtres verticales
I. Balise du langage HTML
Application:
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
I. Balise du langage HTML
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN" définit la
hauteur des différentes fenêtres en cas de division horizontale.
La hauteur s'exprime en pixels ou en %. Dans ce cas, on veillera à
ce que le total soit égal à100%.
Le même pour un agencement vertical
<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
I. Balise du langage HTML
Les formulaire
Les formulaires servent à inviter les visiteurs à renseigner des
informations: saisir du texte, sélectionner des options, valider avec
un bouton, les cases à cocher, les listes déroulantes,…
Le traitement des résultats doit s'effectuer dans un autre langage, par
exemple le PHP .
I. Balise du langage HTML
Les formulaire
a. Créer un formulaire
Pour créer un formulaire, il faut utiliser la balise <form>…</form>
C’est la balise principale du formulaire. Elle permet d’en indiquer le
début et la fin.