HTML Et Php18-24

5/11/2018 HTML Et Php18-24 - slidepdf.com

http://slidepdf.com/reader/full/html-et-php18-24 1/7

AP5 : HTML et PHP

Langage PHP 18

7. Feuilles de style (CSS)

Une bonne référence : http://fr.html.net/tutorials/css/

a) Intérêt

Là où HTML permet de décrire une page, CSS permet de structurer le contenu.

Désormais, on définit la présentation générale du site dans une feuille de style (fond d’écran, taille

des titres, épaisseur des bordures, etc.) et chaque page fait appel à ces feuilles de style.

La feuille de style décrit la structure de plusieurs pages HTML.

Le format est :

<Balise "attribut: valeur;">

b) Les 3 méthodes

Méthode 1 : style dans la balise <body> de la page HTML

<body style="background-color: #FFC800;">

Méthode 2 : inclure le code CSS avec la balise <style>

<style type="text/css">

body {background-color: #FFC800;}

</style>

Ces deux méthodes n’exploitent pas le véritable intérêt des feuilles de style, à savoir une séparation

entre la description et la structure.

Méthode 3: chaque page possède un lien vers la feuille de style.

c) Exemples de style

1. Fichier en fond d’écran, répété ou non

body {background-color: #ffc800;

background-image: url("petitfond.JPG");

background-repeat: repeat-y;

background-position: center center;

}

h2 {color: darkblue; font-size: 16pt; text-align: center;

background-color: yellow;

}

Remarques :

background-repeat: repeat-y | repeat-x | no-repeat | repeat

background-position: “abscisse” “ordonnée” où “abscisse” et “ordonnée” sont exprimées

en points, pourcentages (valeurs fixes) ou par bottom, top, center, right ou left



AP5 : HTML et PHP

Langage PHP 19

<head>

<title>Page XHTML avec style.css</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h2>Cette page fait appel à la feuille de style "style.css"</h2>

</body>

Remarque : l’attribut background-image peut couvrir l’attribut background-color selon sa taille.

Et de façon plus concise :

body {background: #FFC800 url("petitfond.JPG") no-repeat center center;}

L’attribut background est suivi des propriétés qui complètent et définissent implicitement cet

attribut.

En complément : voir l’attribut scrolling sur les bons sites…

2. Polices

h1 {border-bottom: 6px dotted green;}

h2 {font-family: broadway,"Times New Roman",arial;}

h3 {font-family: arial; font-style: italic; font-size: 15pt ;}

p { font-family: arial; font-weight: bold; line-height: 1.8em;}

Les titres en <h2> seront en police broadway; si cette police n’est pas présente sur le navigateur, la

police Times New Roman sera retenue, etc.

Les paragraphes (ce qui est situé entre les balises <p> et </p> seront en police arial, en gras et defixer la hauteur de ligne à 1,8 fois la taille de la police courante.

Les titres en <h3> ont une police de 15 pt (unité absolue ; on peut utiliser l’unité absolue : px) ; on

peut utiliser aussi l’em (unité relative, voir http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-

avec-les-em.html ) qui permet à l’utilisateur d’ajuster la taille de la police.

3. Mise en forme des liens : pseudo-classes

On utilise des pseudo-classes qui permettent de définir des propriétés qui dépendent de l’événement

lié (lien pas encore cliqué, lien déjà cliqué…).

a:link {color: blue;}

a:visited {color: green;}

a:active {background-color: red;}

a:hover {color: darkblue;font-size: 16pt; text-transform: uppercase;}

:link = lien non visité

:visited = lien visité

:active = lorsqu’on maintient le clic enfoncé

:hover = lors du survol du lien



AP5 : HTML et PHP

Langage PHP 20

d) Définir des classes ; class et id

On peut définir ses propres classes ; l’intérêt réside dans le fait que l’on peut vouloir imposer

ponctuellement un style différent de celui défini dans la feuille de style.

/* On est dans la feuille de style */ .style1 { font-family: "Baskerville Old Face"; font-size 14pt; color: red;}

On peut placer class dans n’importe quelle balise et on peut l’utiliser plusieurs fois.

<q class="style1">Ceci est un commentaire utilisant la classe style1</q>

<h5 class="style1">Titre en h5 qui utilise également la classe style1</h5>

<span class="style1">Ce texte ne se situe entre aucune balise, on lui joint donc

la balise SPAN</span>

class et id : id a la même fonction que class ; la différence est qu’elle ne peut être utilisée qu’une

seule fois ; à utiliser donc sur un objet dont on sait qu’il est unique.

Exemple : classe qui définit un retrait de la première ligne de 30 pixels ainsi qu’une marge gauche de

10 pixels.

.retrait { text-indent: 30px; margin-left: 10px;}

<p class="retrait">HTML n’a jamais été figé ; des extensions propriétaires ont

été imposées pas Microsoft ou Netscape, certaines ont été abandonnées, d’autres

ont été considérées comme une norme……………………………………………… (2000) ; pour éviter les

incompatibilités et les incohérences, la norme XHTML (eXtensible HTML) est

imposée</p>

Exemple : les images ont une largeur de 600 et une hauteur de 500 pixels (on peut définir la taille en

pourcentage) et sont entourées d’une bordure de 4 pixels d’une couleur (définie par sa valeur hexa).

La classe centrer définit un centrage

img {height :600; width :500;border:4px solid #ff00ff;}

.centrer {text-align: center;}

<div class="centrer"><img src="FalaiseAult.jpg"></div>

La balise <div> est utilisée en HTML pour modifier l’aspect d’un ou plusieurs paragraphes ; en CSS

elle est utilisée pour positionner des éléments. La balise <div> est de type bloc ; elle génère un saut

de ligne.



AP5 : HTML et PHP

Langage PHP 21

Exemple avec <div >, class et id : l’enseignement général doit être en bleu et l’enseignement

technologique en rouge ; l’attribut class peut-être utilisé plusieurs fois (cas des mises en forme,

couleur, taille, etc.) ; l’attribut id n’est utilisé qu’une fois dans la page (cas d’un positionnement sur

l’écran)

#general {color: blue;}.technologique {color:red;}

<ol type="1">

<div class="technologique">

<li>Informatique

<ul type="disk">

<li>HTML Php

<li>Algo

<li>Base de données

</ul>

</div>

<div id="general">

<li>Anglais<ul type="disk">

<li>Anglais technique

<li>Anglais littéraire

<li>Oral

</ul>

</div>

</ol>

e) Les boîtes

Comment disposer des groupes de textes indépendamment les uns des autres.

Exemple d’un textebody { margin-top: 100px; margin-right: 15%; margin-bottom: 10px;

margin-left: 20%; text-align: justify;

}

<body>

HTML n’a jamais été figé ; des extensions propriétaires ont été imposées par

Microsoft ou Netscape, certaines ont été abandonnées, d’autres ont été

considérées comme une norme.

Naissance en 1990 avec l’apparition du Web ; il subit des améliorations comme

l’insertion d’images, formulaires qui permettent de consulter et saisir des

données (1993), tableaux, feuilles de style CSS (1994), intégration de scripts,d’objets, de cadres (frame) (DHTML 1997 ? 1999)

L’apparition de XML (2000?2007) met en évidence le manque d’homogénéité de HTML

(2000) ; pour éviter les incompatibilités et les incohérences, la norme XHTML

(eXtensible HTML) est imposée/

</body>



AP5 : HTML et PHP

Langage PHP 22

Exemple d’image flottante

body { margin-top: 100px; margin-right: 15%; margin-bottom: 10px;

margin-left:5%;

}

p {font-size: 1.5em; text-align: justify;}

.image {float: left; width: 350px;}

<div class="image"><img src="falaiseaultpetit.jpg" alt="Les falaises d'Ault"

width=300px"></div>

<p>Les falaises crayeuses de Haute Normandie se poursuivent au delà de

l’embouchure de la Bresle de Mers-les-bains jusqu’à Ault et Onival.

………………………………………

………………………………………

à sud-ouest dominant</p>

Une boîte flottante est retirée du flux normal et est placée à droite ou à gauche ; le contenu suivant

est placé à côté et « s’écoule » le long de cette boîte.

Travail de synthèse

En utilisant les liens hypertextes, les frames, les tableaux, les images réactives et le CSS, créer un

site qui répond aux fonctionnalités suivantes :

Thème : au choix ; il présente des photos : paysages, articles mis en vente, etc… Chaque photo est

accompagnée d’un texte descriptif.

La page d’accueil en 3 parties :

1. Un bandeau avec en-tête (fixe).

2. Une partie à gauche (fixe) contenant les liens (3 ou 4) :

Les liens doivent être agrémentés d’effet selon que l’on clique, survol, etc.

3. Une partie droite (la plus importante) qui contient les pages du site. Parmi ces pages, on doit

trouver :

une page avec une photo avec texte descriptif (exemple ci-dessus)

une page avec des photos sur des colonnes adjacentes (images flottantes et non pas dans un tableau)

une page avec un tableau « classique » qui permet de représenter de façon concise et lisible des

informations relatives à votre site.

Une page avec des photos et/ou du texte avec recouvrement (z-index).

… et tout autre chose que vous jugerez utile…



AP5 : HTML et PHP

Langage PHP 23

8. Les formulaires

Objectif : Jusque là, les données ont été reçues et interprétées par le navigateur ; les formulaires

permettent d’envoyer vers d’autres destinations (pages web, adresse électronique) des données

saisies par l’utilisateur.

a) Un exemple

<form name="Inscription" action="suiteform.htm" method="get">

<fieldset>

<legend>Faites votre réservation</legend>

Votre nom <input name="nom" type="text" size=15 maxlength=20 /><br />

Votre mot de passe

<input name="mdp" type="password" size=10 maxlength=12 /><br />

Votre profession

<input name="profession" type="hidden" value="Administrateur réseau" size=15

maxlength=20 /><br />

Etes-vous un homme ou une femme<br />

<input type="radio" name ="sexe" value="homme" />Homme<br />

<input type="radio" name="sexe" value="femme" />Femme<br />

Votre choix

<select name="ville" size=1>

<optgroup name="continent" label="Continent" />

<option name="c1" value=1>Marseille</option>

<option name="c2" value=2>Nice</option>

<option name="c3" value=3>Toulon</option>

<optgroup name="corse" label="Corse" />

<option name="c3" value=4>Calvi</option>

<option name="c4" value=5>Bastia</option>

<option name="c5" value=6>Bonifacio</option>

</select><br /><br />

Choisissez les prestations (plusieurs choix possibles)

<select name="prestation" multiple size=6>

<option value=1>Randonnée</option>

<option value=2>Plongée</option>

<option value=3>Sortie pédestre</option>

<option value=4>Découverte de la ville</option>

<option value=5>Visite de la cathédrale</option>

<option value=6>Les hortillonnages en barque</option>

</select><br /><br />

Votre location

<input type="checkbox" name="location" value="piscine" id=" piscine"/><label for=" piscine">Piscine</label>

<input type="checkbox" name="location" value="Terrasse" id="terrasse"/>

<label for="terrasse">Terrasse</label>

<input type="checkbox" name="location" value="Hammam">Hammam

<input type="checkbox" name="location" value="Cuisine">Cuisine<br /><br />

<textarea rows=4 cols=50 name="commentaire">

Tapez ici votre commentaire

</textarea><br /><br />

<input type="reset" name="annuler" value="Annuler" />

<input type="submit" name="valider" value="Valider" />

<input type="image" src="falaiseaultpetit.jpg" name="valide2"

value="valide2" />

</fieldset></form>



AP5 : HTML et PHP

Langage PHP 24

b) Barre d’URL

En validant le formulaire, les champs saisis sont passés en paramètres ; le premier paramètre est

précédé du caractère ?; ensuite, chaque paramètre est séparé l’un de l’autre par le caractère &

http://localhost/test/suiteform.htm?nom=dupont&mdp=Ren%E9&profession=Administrateur+r%E9seau&sexe=homme&ville=2&prestation=1&prestation=4&location=piscine&locatio

n=Hammam&commentaire=Mon+commentaire&valider=Valider Cette URL est “bien formée”; on pourra donc passer des paramètres de cette façon par la suite.

c) Les balisesform

action : nom de la page à ouvrir suite à l’envoi des données

method :

get : les paramètres sont transmis en clair par l’URL ; le nombre et la longueur des

paramètres sont limités à la taile maximale naturelle de l’URL qui ne doit pas

excéder 255 caractères.

post : les paramètres sont transmis par l’URL mais ne sont pas visibles

input type=

text: zone de texte

password : zone de texte ; les caractères saisis ne s’affichent pas

hidden : comme son nom l’indique

checkbox : case à cocher

radio : bouton radio

reset : bouton d’anulation

submit: bouton d’envoi des données du formulaireimage : image cliquable permettant l’envoi de données du formulaire

textarea : zone de texte pouvant stocker plusieurs lignes

select :

size = 1 : liste déroulante (une seule ligne affichée)

size=n : zone de liste (plusieurs lignes affichées)

multiple : sélectionner plusieurs items.

Page à réaliser : bordereau de commande comportant les zones de saisies suivantes :

• Nom, prénom : zones de texte

• Adresse : textarea

• Comment avez-vous connu le site : checkbox (Publicité, moteur de recherche, un ami, etc.

• Les articles commandés : zone de liste à choix multiples

• Mode de livraison : liste déroulante (24 heures chrono, Chez vous en 48 heures, 1 semaine)

• Moyen de paiement : bouton radio (carte bleue, chèque, Paypal, etc…)

• Annulation

• Valider

HTML Et Php18-24

Documents

Transcript of HTML Et Php18-24