Module HTML / CSS / PHP / MySQL

Slides:



Advertisements
Présentations similaires
Mais vous comprenez qu’il s’agit d’une « tromperie ».
Advertisements

Le Nom L’adjectif Le verbe Objectif: Orthogram
ORTHOGRAM PM 3 ou 4 Ecrire: « a » ou « à » Référentiel page 6
Introduction aux Web Services Partie 1. Technologies XML
Distance inter-locuteur
1 Plus loin dans lutilisation de Windows Vista ©Yves Roger Cornil - 2 août
Création de site internet
Feuilles de style CSS - XHTML est un langage impur
Le CSS : un complément au HTML
Les numéros 70 –
Les numéros
Les identités remarquables
XML, et HTML, comme langages de structuration
HTML CSS.
1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll
Cascading style sheets
LES TRIANGLES 1. Définitions 2. Constructions 3. Propriétés.
Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély – Stage CIES « Initiation au web »
11:06:28 Programmation Web Programmation Web : Feuilles de style CSS Jérôme CUTRONA
1 7 Langues niveaux débutant à avancé. 2 Allemand.
XHTML XHTML Un document XHTML étant un document XML il commence par une déclaration XML indiquant la version et le jeu de caractère utilisé. Ensuite vous.
Introduction aux Web Services Partie 1. Technologies HTML-XML
Cascading Style Sheets (CSS)
Applications Internet – cours 3 La page web
Le soccer & les turbans Sondage mené par lAssociation détudes canadiennes 14 juin 2013.
Projet poker 1/56. Introduction Présentation de léquipe Cadre du projet Enjeux Choix du sujet 2.
HTML CSS.
CSS.
Logiciel gratuit à télécharger à cette adresse :
Les chiffres & les nombres
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
DUMP GAUCHE INTERFERENCES AVEC BOITIERS IFS D.G. – Le – 1/56.
HTML / CSS Gestion des systèmes d’information Classe terminale
HTML-CSS-XHTML.
M. Larooussi Formatage de documents - CSS École dété INSAT Août 2006.
Année universitaire Réalisé par: Dr. Aymen Ayari Cours Réseaux étendus LATRI 3 1.
MAGIE Réalisé par Mons. RITTER J-P Le 24 octobre 2004.
Cascading Style Sheets (CSS)
Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.
Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.
MAGIE Réalisé par Mons. RITTER J-P Le 24 octobre 2004.
Cours n° 1 Le langage HTML Prof. : E. BAKKI
 Créer une page html nommé index  Cette page doit contenir  Partie de l’entête Titre Métas(description et mots clés) Lien vers une feuille de style.
1/65 微距摄影 美丽的微距摄影 Encore une belle leçon de Macrophotographies venant du Soleil Levant Louis.
Le langage XHTML 420-S4W-GG Programmation Web Client
Les feuilles de style en HTML. CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent.
Nom:____________ Prénom: ___________
PowerPoint Créer une présentation Créer une diapositive de texte
Auteur : Frédéric Thériault 1. Les sélecteurs simples  Tous les éléments HTML du sélecteur sont affectés dans le document. Exemple : h1 { color:purple;
Création de sites web I. Site statique : Généralités :
LE CSS ISN Terminale S CSS Types de styles.
2. Premiers pas en CSS… Comprendre le fonctionnement de la syntaxe CSS
Introduction aux langages Html et CSS
Template joomla Leblanc 2011.
Cours de programmation web
Introduction à l’informatique en gestion 1 Plan de la leçon Compagnon office Sections et Mise en page En-têtes et pieds de page Notes de bas.
HTML Cours 2.
Auteur : Frédéric Thériault 1. Les boîtes 2 Les attributs 3 width height margin margin-top margin-right margin-bottom margin-left border-style border-width.
Before Starting…. Pour les passionnés, le cours de Xhtml en classe peut être complété par les références suivantes : Cours de Xhtml en ligne :
HTML Cours 3. Plan du cours Les feuilles de styles CSS Mise en forme du texte et des paragraphes.
INTERNET Le langage HTML
Introduction à CSS Généralités. Introduction Beaucoup de documents XML sont destinés à être présentés. Les information du fichier seul (avec ou sans DTD)
T ECHNOLOGIES WEB CHAPITRE II : L E LANGAGE CSS Mme Amani JARRAYA & Mohamed MOHSEN 1.
CSS et DREAMWEAVER.
HTML Rappels des fondamentaux
Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.
Transcription de la présentation:

Module HTML / CSS / PHP / MySQL Comprendre l’architecture client / serveur avec les langages phares du développement Web Rudy Leclercq

Plan du module XHTML / CSS (3 séances) PHP (4 séances) PHP / MySQL (3 séances) Frameworks, ORM, Debug, … (2 séances)

Plan du cours Introduction XHTML / CSS : Les bases Utilisation avancée

Introduction

Introduction Modèle Client / Serveur Protocole HTTP / Architecture REST XHTML ? CSS ? Navigateurs Editeurs

Modèle Client / Serveur Requête Réponse Serveur Client 2 Requête Réponse DB Requête Réponse Client 2

Protocole HTTP / Architecture REST HTTP : HyperText Transfer Protocol Méthodes principales Get Post Put Delete Codes de statut 200 (2xx : Succès) 404 (4xx : Erreur du client) 500 (5xx : Erreur du serveur) 301 (3xx : Redirection) Ressource Post Get Put Delete Traitement Etat

XHTML ? CSS ? XHTML : eXtensible HyperText Markup Language Contenu, Informations logiques Exemple : Le titre de ma page est « Page d’accueil » CSS : Cascading Style Sheets Présentation du contenu Exemple : Le texte de ma page est rouge

Navigateurs Internet Explorer Firefox Chrome Safari …

Editeurs Le plus simple : Bloc notes ! Pour débuter : EDI : Sous Windows : Notepad++ Sous Mac OS : TextMate EDI : Eclipse PDT, Aptana Netbeans PHP Storm

XHTML / CSS : Les bases

XHTML Ce n’est pas un langage de programmation : c’est un langage de présentation Langage proche de XML Structure sémantique de l’information, du contenu HTML 4 ? XHTML 1,1? HTML 5 ?

XHTML : Balises Paire de balise Balise unique Balise ouvrante + Balise fermante <balise></balise> Exemple :<title> Titre de ma page </title> Balise unique <balise /> Exemple : <image /> <br /> <hr />

XHTML : Balises Imbrication des balises <head></head><body></body> <head><body></head></body>

XHTML : Attributs (1/2) <balise attribut="valeur" ></balise> <balise attribut="valeur" /> Exemples : <img src="image.jpg" /> <citation auteur="Neil Armstrong" date="21/07/1969"> C'est un petit pas pour l´homme` un bond de géant pour l´humanité. </citation>

XHTML : Attributs (2/2) Attributs universels Title  Bulle d’aide Id  Identifiant unique de l’élément Class  Classe de l’élément

XHTML : Exercice Modéliser une voiture Parties de la voiture Sièges Volant Roues … Utiliser les balises avec des identifiants et des classes

XHTML : Commentaires

XHTML : Structure d’une page

XHTML : Titres 6 niveaux <h1> </h1>  Titre de la page

XHTML : Paragraphes / Sauts de ligne Un saut de ligne dans l’éditeur n’est pas un saut de ligne visible Balise pour sauter une ligne : <br /> Paragraphes : <p>Texte </p> <p>Ligne 1<br /> Ligne 2</p>

XHTML : Espacer le texte <p>Texte avec espaces</p> Affichera : Texte avec espaces Solutions Entité HTML :   CSS

XHTML : Mise en valeur de texte <strong>Important</strong>  Rendu par défaut en gras <em>Peu important</em>  Rendu par défaut en italique PS : Ne plus utiliser les balises <i> et <b>

XHTML : Autres balises <sup></sup>  Exposant <sub></sub>  Indice <q></q>  Citation courte <blockquote></blockquote>  Citation longue <acronym title="Local Area Network"> LAN </acronym>  Accronyme

XHTML : Liens (1/3) Relatif ou absolu ? Relatif : dépend du contexte Image.jpg  relatif dossier/icone.ico  relatif ../../footer.html  relatif C:\Site\index.html  absolu /var/www/site/index.html  absolu /  ??? Relatif : dépend du contexte Absolu : précise le chemin complet

XHTML : Liens (2/3) Lien vers une autre page du même site <a href="autrepage.html">Un lien</a> Lien vers une page d’un autre site <a href="http://www.google.fr/">Google</a> Ouvrir dans une nouvelle fenêtre ? non ! Lancer un client mail ? <a href="mailto:r.leclercq@epixelic.com">Ecrivez moi !</a>

XHTML : Liens (3/3) Ancres Lien vers un endroit précis dans une page : <a href="#titre1">Lien vers titre 1</a> <a href="#contenu">Lien vers titre 2</a> <h1 id="titre1">Titre 1</h1> <p id="contenu">bla bla bla</p> Lien vers un endroit précis dans une autre page <a href="autrepage.html#titre1">Lien vers titre 1</a> <a href="autrepage.html#contenu">Lien vers titre 2</a>

XHTML : Images Formats : JPEG, PNG, GIF, BMP <img src="images/logo.jpg" alt="Logo" /> Attention : Aux chemins d’accès Aux accents Aux espaces Image cliquable <a href="/"> <img src="images/logo.jpg" alt="Logo" /> </a>

XHTML : Balises génériques <span></span>  inline <div></div>  block  Utiliser les attributs « id » et « class »

Plan du cours Introduction XHTML / CSS : Les bases Utilisation avancée

CSS : Introduction Cascading Style Sheets  Feuilles de style Langage de mise en forme de l’HTML

CSS : Placement 3 méthodes de placement Fichier CSS externe (head) <link rel="stylesheet" href="monStyle.css" media="screen,projection" type="text/css" /> Balise de style (head) <style type="text/css"> … </style> Attribut de style <div style="…"></div> JavaScript : méthodes identiques de placement

CSS : Syntaxe (1/2) balise { propriété: valeur; } Exemple : body { color: #ff0000; background-color: yellow; font-size: 12px; } La partie précédent l’accolade s’appelle le sélecteur

CSS : Syntaxe (2/2) Cibler plusieurs éléments : em, strong { text-decoration: underline; }  Souligne tous les mots importants Cibler des éléments par imbrication p a{ color: green; }  Colore en vert uniquement les liens contenus dans les paragraphes

CSS : IDs et Classes Cibler un élément en particulier #navigation { color: blue; } Cibler des éléments par classe .alert { color: red; } .warning { color: orange; } .huge{ font-size: 2em; } <a href="…"  class="alert">Attention</a> <p class="alert huge">Texte</p>

CSS : Formatage de texte (1/3) Tailles Pixels  font-size: 16px; Valeur relative font-size: small; font-size: 1.3em; Polices font-family: "Arial Black", Arial, Verdana, serif; Alignements text-align: right;

CSS : Formatage de texte (2/3) Indentation text-indent: 30px; Effets font-style: italic; Couleurs color: #f00; color: red; color: rgb(255,0,0); Variantes font-variant: uppercase; Décoration font-decoration: line-throught;

CSS : Formatage de texte (3/3) Fonds background-color: black; background-image: url("../images/neige.png"); background-attachment: fixed; background-repeat: no-repeat; background-position: top right; background: url(…) no-repeat top right fixed;

Exercice Styliser notre voiture !

CSS : Pseudo-formats (1/2) a{ /* Style du lien normal */ } a:hover{ /* Style du lien survolé */ } a:active{ /* Style du lien cliqué */ } a:focus{ /* Style du lien sélectionné */ } a:visited{ /* Style du lien visité*/ }

CSS : Pseudo-formats (2/2) p:first-letter{ /* Style de la première lettre du paragraphe */ } p:first-line{ /* Style de la première ligne du paragraphe */ } .question:before { content: "Question : "; font-weight: bold; } .question:after { content: " ?"; } .question:after { content: url("../../images/interrogation.gif"); }

XHTML / CSS : Utilisation avancée

XHTML / CSS : Utilisation avancée Listes Block / Inline Tableaux Formulaires CSS avancé Structure d’une page TP

Les listes Listes non ordonnées Listes ordonnées Listes de définitions

Listes non ordonnées (1/2) <ul> <li>Pierre</li> <li>Feuille</li> <li>Ciseaux</li> </ul> Affiche : Pierre Feuille Ciseaux

Listes non ordonnées (2/2) Listes non ordonnées imbriquées <ul> <li> Menu 1 <ul> <li>Sous menu 1.1</li> <li>Sous menu 1.2</li> </ul> </li> <li> Menu 2 <ul> <li>Sous menu 2.1</li> <li>Sous menu 2.2</li> </ul> </li> </ul> Affiche Menu 1 Sous menu 1.1 Sous menu 1.2 Menu 2 Sous menu 2.1 Sous menu 2.2

Listes ordonnées Listes ordonnées <ol> <li>Conception</li> <li>Développement</li> <li>Test</li> </ol> Affiche: Conception Développement Test

Listes de définitions <dl> <dt>LAN</dt> <dd>Local Area Network</dd> <dt>WAN</dt> <dd>Wireless Area Network</dd> </ol>

Listes et CSS List-style-position List-style-type List-style-image outside inside List-style-type Listes non ordonnées disc (défaut) circle square none Liste ordonnées decimal (défaut) decimal-leading-zero upper-roman lower-roman upper-alpha lower-alpha lower-greek List-style-image url("/images/folder.png");

Menu de navigation et listes <ul> <li><a href="">Accueil</a></li> <li><a href="">Artistes</a></li> <li><a href="">Vidéos</a></li> </ul>

Block / Inline Block : h1, p, ul, div Inline : strong, a, img, span Une balise block ne peux être contenu dans une balise inline display: block / display: inline

Block : Taille p{ width: 90%; height: 100px; overflow: hidden; }

Block / Inline : bordures (1/2) .none { border: none; } .solid { border: 2px solid black; } .dotted { border: 2px dotted green; } .dashed { border: 2px dashed red; } .double { border: 4px double maroon; } .groove { border: 4px groove teal; } .ridge { border: 4px ridge fuchsia; } .inset { border: 3px inset black; } .outset { border: 3px outset black; }

Block / Inline : bordures (2/2) border-top border-bottom border-left border-right a img { border: none; }

Block : marges Marges intérieures à la bordure : padding Marges extérieures à la bordure : margin Centrer horizontalement : « margin: auto; » Texte Texte

Block : Flottants float: left; float: right; clear: left;  stopper un flottant gauche Exercice : Créer une lettrine flottante Float Texte

Block : Positionnement Relatif position: relative; Absolu position: absolute; left: 10px; top: 20px; Fixe position: fixed;

Tableaux (1/3) # Nom Prénom 1 Leclercq Rudy 2 Grancher Nicolas 3 <table> <caption>Titre</caption> <thead> <tr> <th>#</th> <th>Nom</th> <th>Prénom</th> </tr> </thead> <tfoot>…</tfoot> <tbody> <tr> <td>1</td> <td>Leclercq</td> <td>Rudy</td> </tr> <tr> <td>2</td> <td>Grancher</td> <td>Nicolas</td> </tr> </tbody> </table> # Nom Prénom 1 Leclercq Rudy 2 Grancher Nicolas 3 Durand Benoît

Tableaux (2/3) table{ border-collapse: collapse; }

Tableaux (3/3) Fusions a b a+b 1 1+2 2 Colonnes : attribut colspan Lignes : attribut rowspan <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td colspan="2">a+b</td> </tr> </table> <table> <tr> <td>1</td> <td rowspan="2">1+2</td> </tr> <tr> <td>2</td> </tr> </table> a b a+b 1 1+2 2

CSS avancé Sélecteurs avancés + > [attr] [attr=val] [attr~=val] …

Formulaires (1/6) Les formulaires constituent le premier pas vers les sites dynamiques (Client / Serveur) Les données d’un formulaire sont envoyées pour être traitées coté serveur

Formulaires (2/6) <form method="post" action="action.php"> <p> <label for="pseudo">Votre pseudo :</label> <input type="text" name="pseudo" id="pseudo" value="Rudy" size="30" maxlength="10" /> </p> <p> <label for="pass">Votre mot de passe :</label> <input type="password" name="pass" id="pass" /> </p> </form>

Formulaires (3/6) <label for="lePseudo">Pseudo : </label> <input id="lePseudo" name="pseudo" type="text" value="Rudy" /> <label for="leMotdepasse">Mot de passe : </label> <input id="leMotdepasse" name="motdepasse" type="password" /> Un champ vide est quand même transmis pseudo  Rudy motdepasse  123456 Pseudo : Rudy Mot de passe : ● ● ● ● ● ●

Formulaires (4/6) <input id="rouge" name="couleur" type="radio" value="red" selected="selected" /> <label for="rouge">Rouge</label> <input id="vert" name="couleur" type="radio" value="green" /> <label for="vert">Vert</label> La valeur sélectionné est transmise : couleur  green Rouge Vert

Formulaires (5/6) <input name="souvenir" type="checkbox" value="oui" /> <input name="couleurs[]" type="checkbox" value="red" /> <input name="couleurs[]" type="checkbox" value="green" /> <select name="couleur"> <option value="red">Rouge</option> <option value="green">Vert</option> </select> <select name="couleurs[]" multiple="multiple"> <option value="red">Rouge</option> <option value="green">Vert</option> </select>

Formulaires (6/6) <textarea name="message"></textarea> <input name="envoyer" type="submit" value="Envoyer" /> <input type="button" value="OK" /> <button name="bouton">Bouton</button>

Structure d’une page header navigation sidebar content footer

TP : Chat / Twitter Réaliser l’interface graphique Utiliser les différentes balises Tableaux Listes Formulaires … Fonctionnalités Page d’accueil Lister les messages existants Ajouter un nouveau message Page d’identification Page membre

Introduction (2h) Bases Avancé 6h JavaScript PHP Evaluation Navigateurs Protocole HTTP Editeurs Bases XHTML (2h) Introduction Partie 1 Balises Attributs Structure d’une page Commentaires Partie 2 Paragraphes Sauts de ligne Titres Mise en valeur de texte Autres balises Partie 3 : Liens Relatif et absolu Liens vers une autre page Ancres Mails Partie 4 : images Formats Balise Partie 5 : Balises génériques CSS (2h) Partie 1 : Premiers pas Méthodes de placement Appliquer du style aux balises IDs et Classes Texte Tailles Polices Alignement Effets Couleurs Fond Pseudo – Formats Liens Première lettre et première ligne Avant / Après Avancé 6h Listes Block / Inline Bordures Marges Flottants Positionnement Tableaux Formulaires … JavaScript PHP