Voici le cours de ce matin J`y ai mis également nouveau.css pour
Transcription
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