Voici le cours de ce matin J`y ai mis également nouveau.css pour

Message de Suzanne du 11/10/2016 16:32
Voici le cours de ce matin
J'y ai mis également nouveau.css pour Dominique au cas où!!!!
A mardi
Suzanne
La pièce jointe sous forme d’archives zip contient cinq fichiers :
A.
Création d’une page html(suite2-menu) 11-10.docx
B.
nouveau.css
C.
première page php.docx
D.
préparation pour pages php.docx
E.
UTILISATION DE NOTEPAD.docx
Création d'une page (suite-menu)- 11/10/2016
Pour plus de commodités, Michel a demandé de copier le dossier sites dans le dossier tests de movamp
Ouvrir notepad et la page 1
Après head taper
Puis par
Fichier – enregistre une copie
Faire 3 autres enregistrements de copies et les nommer page2.html – page3.html – page4.html et rectifier le n°
De même que nous avons
, il faut rectifier dans chaque page le numéro
Il faut pouvoir naviguer entre les pages et pour cela il faut bâtir le menu en rapport avec les pages 1-2-3-4
Cela se fait par les listes à puces :
<ul> liste non ordonnée
<ol>liste ordonnée
<li> est un élément d'une liste ordonnée ou non
Se placer après
Et taper une liste avec 4 éléments puisque nous avons 4 pages html
Un menu permet de naviguer entre les pages donc il faut leur mettre un lien par la balise
<a></a> et un identifiant
Ce qui donne
comme résultat
Contenu du fichier “nouveau.css”
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
}
.head {
font-family : Arial, Helvetica, sans-serif;
font-size : 11pt;
border : 0 none ;
border-top-style : solid;
border-color : red;
border-right-style : solid;
padding-left : 3px;
padding : 3px;
font-weight : bold;
}
h1 {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 13pt;
border-bottom-width : 1px;
border-bottom-style : solid;
border-left-width : 13px;
border-color : red;
border-left-style : solid;
padding-left : 3px;
}
p{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10pt;
margin-left : 5px;
}
/* AFFICHAGE DES CARACTÈRES */
b{
color : red;
}
Création de la première page php
Ouvrir bonjour.php dans notepad
Entre un <p></p> taper le code php qui se traduit par la balise :
On lui donne des instructions comme "echo" pour écrire du texte
Espace
point exclamation
point-virgule très important
Pour vérifier le rendu de cette page php, il faut se servir du localhost donc de movamp
Ouvrir movamp en cliquant sur la panthère
Elle se place dans la barre du bas et faire un clic droit – raccourci - accueil -
Ouvrir le dossier test puis ouvrir la page bonjour.php
On peut insérer des balises html dans du php : exemple la balise gras <b></b>
On
peut mettre plusieurs feuilles de style dans une page et Michel nous avait envoyé la feuille nouveau.css
Il faut donc l'insérer dans la page
Placer le curseur après
Copier-coller cette ligne dessous puis changer style.css par nouveau.css
ATTENTION au dossier style avec ou sans s
On peut changer le p par la balise h1 ce qui donne, au résultat
Le php, comme le html peut avoir des commentaires qui apparaissent en vert
2 sortes de commentaires :
-
Court qui se traduit par // puis le texte
Long : sur plusieurs lignes qui se traduit par /*
Pour un commentaire court, on peut utiliser l'une ou l'autre formule
Pour un commentaire long, obligation de choisir la 2ème formule
*/
Préparation à la première page php
2 logiciels sont nécessaires pour travailler le php : Choix de Michel :
-
Movamp pour lire les pages php dans localhost
Notepad ++ pour créer ces pages
Nous avions créé un dossier tests dans movamp
Nous avons, dans un dossier site, une page html nommée base.html
La Copier et la coller dans le dossier tests
Faire de même avec le dossier styles dans lequel doit se trouver la page css nouveau que Michel nous avait envoyée
par mail
Ouvrir notepad ++
Ouvrir la page base.html dans notepad : c'est-à-dire :
Par l'explorateur de fichiers de notepad – chercher votre clé – votre dossier de travail – le logiciel movamp – le
dossier test puis la page base.html
Sur le modèle de cette page, il faut créer une page base.php qui servira tout au long des leçons
Créer une nouvelle page vierge par Fichier – nouveau
Changer le langage qui sera non pas du html mais du php donc : langage – P – PHP
Enregistrer cette copie, dans le dossier tests et l'appeler base.php
Copier tout ce qui se trouve dans la page base.html et le coller dans la page base.php
Fermer base.html
Travail sur base.php
Faire une copie de cette page (puisque base.php servira encore plus tard)
Fichier – Enregistrer une copie
Lui donner un nom bonjour.php et l'enregistrer dans le dossier test
Fermer base.php
UTILISATION DE NOTEPAD ++ Portable
Pour ouvrir notepad cliquer sur
Changer la langue :
Si à l'ouverture il est en anglais : Settings – Préférences
Choisir français dans la fenêtre qui s'ouvre et fermer
Rajout de plugins :
-
Comme l'explorateur de dossiers ou fichiers :
Compléments – Plugin Manager – Show Plugin Manager
Dans la liste, par ordre alphabétique, chercher le plugin, cocher la case et cliquer sur Install
Fermer notepad et le rouvrir
Retourner sur Complément – Explorer – Cliquer sur Explorer
L'explorateur de fichiers se place à gauche