PHP4 et MySQL
Download
Report
Transcript PHP4 et MySQL
HTML / CSS
Gestion des systèmes d’information
Classe terminale
Professeur: Mme BELLILI
Liens
HTML
www.html.net/tutorials/html/
http://xhtml.developpez.com/cours/
http://www.siteduzero.com
CSS
http://www.cssdebutant.com//
http://css.mammouthland.net/
http://www.csszengarden.com/tr/francais/
Partie 1 : HTML
Langage de document interprétable
par les navigateurs www.
Exemple : Internet Explorer, FireFox …
Langage de script caractérisé par des
balises marquant la mise en forme:
Texte,
Image,
Son,
Vidéo
1
Partie 1 : HTML
Hypertext Markup Language
Hypertexte lien dans document
pointe vers autre document
Markup Language code pour
marquer des zones dans un document
2
Principes du HTML (1)
Fonctionne sous la base de la balise (ou tag).
Ex: <html>, <p>, <table>
Une balise formate le document en entier ou une partie
du texte
A (pratiquement) chaque balise correspond une balise
fermante, ce qui délimite l'effet de la balise.
<p>Ceci est un paragraphe.</p>
3
Principes du HTML (2)
Un document html peut être édité
Dans un simple éditeur de texte (exemple: Notepad,
Document text …)
A l'aide d'éditeurs plus ou moins sophistiqués (grand
choix sur Internet)
4
Balise
Les balises sont emboîtées.
<p>Ceci est un paragraphe avec un mot <b>en gras</b>.</p>
Une balise peut avoir des attributs.
<p align="center>Paragraphe centré</p>
Balises non sensibles à la casse.
<b> = <B>, <b> </B> toléré
5
Exemple1
Créer un dossier nommé web (dans lequel toutes vos pages seront stockées) sur votre
compte. A l’intérieur du dossier web créer deux autres dossiers nommés : images et files.
le nom des pages HTML est libre.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Page HTML</title>
</head>
<body> Ceci est un <b>document HTML</b>. <br />
Son contenu fait l'objet d'un formatage de présentation<br />
défini à l'aide de balises HTML et interprétées par le<br />
logiciel qui affiche cette page.<br />
</body>
</html>
6
Différence HTML/XHTML
XHTML: une évolution de HTML
Doctype:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
Approche fondé sur la séparation entre, d’une part, le
contenu et la structure, et d’autre part, définie à l’aide
de feuilles de style
Exemple :
HTML: <img src= " image1.jpg " height= " 200" width= " 200" >
XHTML: <img src= " image1.jpg " class= " image" >
7
Partie 2 : CSS
CSS : Cascading Style Sheets
Feuille de styles permettant la
présentation et la mise en forme de no
page HTML.
Deux mode de présentation:
Entre les balises <head></head>
<style type= " text/css " >
{
/*code CSS */
}
</style>
8
Partie 2 : CSS
Dans un fichier.css séparé appelé dans le fichier
html par le lie suivant:
<link rel="stylesheet" type="text/css" href="style.css" />
9
Exemple 2 (avec css)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Site du lycée Guy de Maupassant</title>
</head>
<body>
<h1 class="centrage">Bienvenue au lycée</h1>
<h1 class="centrage">Guy de Maupassant!</h1>
<div class="image">
<img class="image" src=« logo.jpg">
<div>
</body>
</html>
10
Créer das le dossier web , un dossier nomé CSS.
Créer un fchier “style.css”
.centrage
{
text-align:center;
}
img.image
{
height:221px;
width:158px;
}
div.image
{
margin-top:60px;
margin-bottom:30px;
text-align:center;
}
11
Partie 3 : Exemple récaputilitaif
(les menus)
La technique consiste à utiliser les balises:
<ol> (délimiteur de liste numérotée) ,
<ul> (délimiteur de liste à puces)
et <li> (élément de liste) du XHTML
Les mettre en forme avec quelques lignes de CSS.
12
Définissez une liste à puces en XHTML.
Pour cela, vous utiliserez les balises <ol> et <li>,
comme ceci (bien entendu, il manque les désormais classiques
balises <!DOCTYPE>, <html>, <head> et <body> :
<ol>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
</ol>
13
Solution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Menu</title>
</head>
<body>
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
</body>
</html>
</html>
14
Menu vertical
Pour définir un menu vertical, il suffit de modifier le
comportement des balises <ul> et <li> avec un peu de
CSS :
Dans le style ul, définissez les propriétés suivantes :
width: 150px;
float: left;
Dans le style li, supprimez les puces avec :
List-style-type: none;
15
Exercice
Définissez le code XHTML/CSS pour afficher un
menu vertical qui donne accès aux trois sites Web
suivants :
Google
http://www.google.fr
Yahoo
http://fr.yahoo.com
Live Search http://search.live.com
16
Solution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul
{
width: 150px;
float: left;
}
li
{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.google.fr">Aller sur Google</a></li>
<li><a href="http://fr.yahoo.com">Aller sur Yahoo</a></li>
<li><a href="http://search.live.com">Aller sur Live Search</a></li>
</ul>
</body>
</html>
17
Menu horizontal
Pour définir un menu horizontal, il suffit d'affecter la valeur inline
à la propriété display du CSS li. En d'autres termes :
li
{
display: inline;
}
/*padding-right: 20px;*/
18
Solution
<html>
<head>
<style type="text/css">
ul
{
list-style-type: none;
}
li
{
display: inline;
padding-right: 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.google.fr">Aller sur Google</a></li>
<li><a href="http://fr.yahoo.com">Aller sur Yahoo</a></li>
<li><a href="http://search.live.com">Aller sur Live Search</a></li>
</ul>
</body>
</html>
19
Les tableaux HTML
Un tableau doit respecter les quelques règles suivantes :
Le tableau est encadré par les balises <TABLE> et </TABLE>.
Le titre du tableau est encadré par <CAPTION> </CAPTION>
Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par ligne du tableau).
Les cellules d'en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête de tableau)
Les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau)
20
Exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
<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>
</body>
</html>
21
Les formulaires HTML
Les formulaires HTML sont des ensembles de composants appelés
aussi champs qui permettent à l’utilisateur d’entrer des informations,
d’exprimer ses choix, de saisir un texte …
Un formulaire est délimité par les balises <form> </form>
Les éléments de formulaires sont répartis en 3 classes :
Input
Champs de saisie de texte et différents types de boutons
Select
Listes (menus déroulants et ascenseurs)
Textarea
Zone de saisie de texte libre
22
INPUT
Cet élément est utilisé pour définir des zones d'entrée de texte
simple, des boutons, des cases à cocher ou des boutons radio.
Le type d'élément dont il s'agit sera précisé en utilisant l'attribut TYPE.
23
SELECT
Cet élément sert à définir des listes (menus déroulant ou ascenseurs).
Elle s'utilise avec l'élément OPTION.
24
Textarea
Permet de créer une zone de texte en spécifiant sa taille grâce
aux attributs ROWS et COLS
25
Merci pour votre attention