HTML Et Php18-24

AP5 : HTML et PHP 7. Feuilles de style (CSS) Une bonne rfrence : http://fr.html.
net/tutorials/css/
a) Intrt
L o HTML permet de dcrire une page, CSS permet de structurer le contenu. Dsormais, on dfinit la prsentation gnrale du site dans une feuille de style (fond dcran, taille des titres, paisseur des bordures, etc.) et chaque page fait appel ces feuilles de style. La feuille de style dcrit la structure de plusieurs pages HTML. Le format est :
<Balise "attribut: valeur;">
b)
Les 3 mthodes
Mthode 1 : style dans la balise <body> de la page HTML

<body style="background-color: #FFC800;">
Mthode 2 : inclure le code CSS avec la balise <style>

<style type="text/css"> body {background-color: #FFC800;} </style>
Ces deux mthodes nexploitent pas le vritable intrt des feuilles de style, savoir une sparation entre la description et la structure. Mthode 3: chaque page possde un lien vers la feuille de style.
c) Exemples de style
1. Fichier en fond dcran, rpt 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 ordonne o abscisse et ordonne en points, pourcentages (valeurs fixes) ou par bottom, top, center, right ou left
sont exprimes
Langage PHP
18
AP5 : HTML et PHP

<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 : lattribut background-image peut couvrir lattribut background-color selon sa taille. Et de faon plus concise :
body {background: #FFC800 url("petitfond.JPG") no-repeat center center;}
Lattribut background est suivi des proprits qui compltent et dfinissent implicitement cet attribut. En complment : voir lattribut 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 nest pas prsente 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 de fixer 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 lunit absolue : px) ; on peut utiliser aussi lem (unit relative, voir http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texteavec-les-em.html ) qui permet lutilisateur dajuster la taille de la police.
3. Mise en forme des liens : pseudo-classes
On utilise des pseudo-classes qui permettent de dfinir des proprits qui dpendent de lvnement li (lien pas encore cliqu, lien dj 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 = lorsquon maintient le clic enfonc :hover = lors du survol du lien
Langage PHP
19
AP5 : HTML et PHP

d) Dfinir des classes ; class et id
On peut dfinir ses propres classes ; lintrt rside dans le fait que lon peut vouloir imposer ponctuellement un style diffrent de celui dfini 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 nimporte quelle balise et on peut lutiliser 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 mme fonction que class ; la diffrence est quelle ne peut tre utilise quune seule fois ; utiliser donc sur un objet dont on sait quil est unique. Exemple : classe qui dfinit un retrait de la premire ligne de 30 pixels ainsi quune marge gauche de 10 pixels.
.retrait { text-indent: 30px; margin-left: 10px;} <p class="retrait">HTML na jamais t fig ; des extensions propritaires ont t imposes pas Microsoft ou Netscape, certaines ont t abandonnes, dautres ont t considres comme une norme (2000) ; pour viter les incompatibilits et les incohrences, la norme XHTML (eXtensible HTML) est impose</p>
Exemple : les images ont une largeur de 600 et une hauteur de 500 pixels (on peut dfinir la taille en pourcentage) et sont entoures dune bordure de 4 pixels dune couleur (dfinie par sa valeur hexa). La classe centrer dfinit 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 utilise en HTML pour modifier laspect dun ou plusieurs paragraphes ; en CSS elle est utilise pour positionner des lments. La balise <div> est de type bloc ; elle gnre un saut de ligne.
Langage PHP
20
AP5 : HTML et PHP Exemple avec <div>, class et id : lenseignement gnral doit tre en bleu et lenseignement technologique en rouge ; lattribut class peut-tre utilis plusieurs fois (cas des mises en forme, couleur, taille, etc.) ; lattribut id nest utilis quune fois dans la page (cas dun positionnement sur lcran)
#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 donnes </ul> </div> <div id="general"> <li>Anglais <ul type="disk"> <li>Anglais technique <li>Anglais littraire <li>Oral </ul> </div> </ol>
e)
Les botes
Comment disposer des groupes de textes indpendamment les uns des autres. Exemple dun texte
body { margin-top: 100px; margin-right: 15%; margin-bottom: 10px; margin-left: 20%; text-align: justify; } <body> HTML na jamais t fig ; des extensions propritaires ont t imposes par Microsoft ou Netscape, certaines ont t abandonnes, dautres ont t considres comme une norme. Naissance en 1990 avec lapparition du Web ; il subit des amliorations comme linsertion dimages, formulaires qui permettent de consulter et saisir des donnes (1993), tableaux, feuilles de style CSS (1994), intgration de scripts, dobjets, de cadres (frame) (DHTML 1997 ? 1999) Lapparition de XML (2000?2007) met en vidence le manque dhomognit de HTML (2000) ; pour viter les incompatibilits et les incohrences, la norme XHTML (eXtensible HTML) est impose/ </body>
Langage PHP
21
AP5 : HTML et PHP Exemple dimage 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 lembouchure de la Bresle de Mers-les-bains jusqu Ault et Onival. sud-ouest dominant</p>
Une bote flottante est retire du flux normal et est place droite ou gauche ; le contenu suivant est plac ct et scoule le long de cette bote.
Travail de synthse
En utilisant les liens hypertextes, les frames, les tableaux, les images ractives et le CSS, crer un site qui rpond aux fonctionnalits suivantes : Thme : au choix ; il prsente des photos : paysages, articles mis en vente, etc Chaque photo est accompagne dun texte descriptif. La page daccueil en 3 parties : 1. Un bandeau avec en-tte (fixe). 2. Une partie gauche (fixe) contenant les liens (3 ou 4) : Les liens doivent tre agrments deffet selon que lon 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 reprsenter de faon 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
Langage PHP
22
AP5 : HTML et PHP 8. Les formulaires Objectif : Jusque l, les donnes ont t reues et interprtes par le navigateur ; les formulaires permettent denvoyer vers dautres destinations (pages web, adresse lectronique) des donnes saisies par lutilisateur.
a) Un exemple
<form name="Inscription" action="suiteform.htm" method="get"> <fieldset> <legend>Faites votre rservation</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 rseau" 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>Randonne</option> <option value=2>Plonge</option> <option value=3>Sortie pdestre</option> <option value=4>Dcouverte de la ville</option> <option value=5>Visite de la cathdrale</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>
Langage PHP
23
AP5 : HTML et PHP

b) Barre dURL
En validant le formulaire, les champs saisis sont passs en paramtres ; le premier paramtre est prcd du caractre ?; ensuite, chaque paramtre est spar lun de lautre par le caractre &
http://localhost/test/suiteform.htm?nom=dupont&mdp=Ren%E9&profession=Administrate ur+r%E9seau&sexe=homme&ville=2&prestation=1&prestation=4&location=piscine&locatio n=Hammam&commentaire=Mon+commentaire&valider=Valider
Cette URL est bien forme; on pourra donc passer des paramtres de cette faon par la suite.
c)
form action : nom de la page ouvrir suite lenvoi des donnes method : get : les paramtres sont transmis en clair par lURL ;
Les balises
le nombre et la longueur des paramtres sont limits la taile maximale naturelle de lURL qui ne doit pas excder 255 caractres. post : les paramtres sont transmis par lURL mais ne sont pas visibles
input type= text: zone de texte password : zone de texte ; les caractres saisis ne saffichent pas hidden : comme son nom lindique checkbox : case cocher radio : bouton radio reset : bouton danulation submit: bouton denvoi des donnes du formulaire image : image cliquable permettant lenvoi de donnes du formulaire textarea : select
zone de texte pouvant stocker plusieurs lignes
: size = 1 : liste droulante (une seule ligne affiche) size=n : zone de liste (plusieurs lignes affiches) multiple : slectionner plusieurs items.
Page raliser : bordereau de commande comportant les zones de saisies suivantes : Nom, prnom : zones de texte Adresse : textarea Comment avez-vous connu le site : checkbox (Publicit, moteur de recherche, un ami, etc. Les articles commands : zone de liste choix multiples Mode de livraison : liste droulante (24 heures chrono, Chez vous en 48 heures, 1 semaine) Moyen de paiement : bouton radio (carte bleue, chque, Paypal, etc) Annulation Valider
Langage PHP
24

HTML Et Php18-24

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Et Php18-24

Încărcat de

Drepturi de autor:

Formate disponibile

AP5 : HTML et PHP 7. Feuilles de style (CSS) Une bonne rfrence : http://fr.html.

Mthode 1 : style dans la balise <body> de la page HTML

Mthode 2 : inclure le code CSS avec la balise <style>

AP5 : HTML et PHP

AP5 : HTML et PHP

AP5 : HTML et PHP Exemple dimage flottante

AP5 : HTML et PHP

zone de texte pouvant stocker plusieurs lignes

S-ar putea să vă placă și