Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Conception et réalisation des sites web Pr. Aziz MABROUK Pr.mabrouk.fpt@gmail.c

Conception et réalisation des sites web Pr. Aziz MABROUK Pr.mabrouk.fpt@gmail.com HTML Site Web ? 2 Professeur Aziz MABROUK Site Web ? ➢un ensemble de pages Web hyperliées entre elles Page Web Liens hypertextes 3 Professeur Aziz MABROUK Le Web Site Web ? ➢Organisation hiérarchisée des pages web 4 Professeur Aziz MABROUK Site Web ? ➢Organisation hiérarchisée des pages web Document principal Documen t secondair e Documen t secondair e Documen t secondair e Documen t secondair e Documen t secondair e Documen t secondair e Documen t secondair e Documen t secondair e 5 Professeur Aziz MABROUK Page Web ? 6 Professeur Aziz MABROUK Page Web 7 Professeur Aziz MABROUK Page Web images animations vidéos Son Autres pages web Autres pages web Autres pages web CSS programmes Base de données Code HTML Codes de programmation Javascript, Php, Asp,… Que du textes… Page web : ➢ un document texte (HTML,…) + documents utilisés (ex: images, sons, vidéo, etc.) 8 Professeur Aziz MABROUK ➢ un assemblage de ressources, textuelles, visuelles, sonores, logicielles. Hébergement ?? 9 Professeur Aziz MABROUK Documents Navigateur Web Consultation Client FTP Hébergement Site Web: hébergement et consultation HTTP FTP Serveu r Web Serveu r FTP Poste Serveur Poste client 10 Professeur Aziz MABROUK Les Outils ? 11 Professeur Aziz MABROUK Les Outils ? • Outils de création •Outils d’édition de code • Assistants de création des pages web • Outils multimédia : son, images, animations et vidéos • Outils d’hébergement • Outils de navigation 12 Professeur Aziz MABROUK Les Outils ? • Outils de création •Outils d’édition de code ➢des logiciels très légers ➢permettent de créer et de modifier le code source d'une page web ➢permettent de rechercher du code ➢Pour certains, la syntaxe du code est mise en relief pour faciliter la recherche. Bloc-note Notepad++ 13 Professeur Aziz MABROUK Les Outils ? • Outils de création •Assistants de création des pages web ✓Logiciels dédiés ✓un éditeur dit "WYSIWIG", ✓(le condensé en anglais de what you see is what you get qui signifie "vous obtenez ce que vous voyez"). ✓permet de voir directement le résultat obtenu sans être "obligé" de consulter le code (le même principe que "word« ) ✓ des notions d'html soient plutôt conseillées par la suite. 14 Professeur Aziz MABROUK Les Outils ? • Outils de création •Outils multimédia : son, images, animations et vidéos ➢créer des en-têtes, des logos, des bannieres, boutons etc .. ➢créer d'images animés ➢assembler plusieurs images GIF ensemble pour n'en faire qu'une seule et choisir l'ordre d'apparition des images ainsi que la vitesse de passage d'une image à une autre. ➢Créer et assembler des vidéos Easy Flash Maker (SWF Creator) Windows Movie Maker Photoshop The Gimp 15 Professeur Aziz MABROUK Les Outils ? • Outils d’hébergement ➢ Des logiciel de transfert de fichiers sur l'hébergeur ➢ Certains éditeurs HTML permettent de transférer les s fichiers Filezill a FTP Expert 16 Professeur Aziz MABROUK Le Web Est ce que HTML est un langage de programmation? Le Web Le langage HTML ●HTML : HyperText Markup Language ●Langage de description de pages web ●Un document HTML est ○un fichier texte, construit suivant une syntaxe précise ○structuré par des balises ○créé dans un éditeur de pages web (Dreamweaver, Namo,..) ou tout éditeur de texte (bloc-notes, notepad++, …) ○interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, Safari, etc.) HTML Le Web Le langage HTML Document HTML Edition Visualisation/ Interprétation du code Le Web Le langage HTML Le principe des balises ➢balise = limite d'une boîte où l'on peut mettre des choses <balise> chose </balise> à chaque balise ouvrante <balise> ... ... on associe une balise fermante </balise> ➢balises sans contenu : <autrebalise /> ➢<balise attribut1="valeur" attribut2="valeur">...</balise> ➢commentaire :  Le Web Le langage HTML Structure d’un document HTML ? Le Web Le langage HTML Structure d’un document HTML Le Web Le langage HTML l'entête ? Le Web Le langage HTML <head> ... </head> informations qui ne seront pas affichées sur la page HMTL ➢titre de la page : <title>ma page html</title> ➢informations utilisées par les moteurs de recherche : <meta name="description" content="Formation HTML" /> l'entête Le Web Le langage HTML le corps? Le Web Le langage HTML <body> ... </body> informations qui vont s'afficher dans le navigateur le corps Le Web Le langage HTML Structuration du texte Le Web Le langage HTML Structuration du texte <p>paragraphe</p> <hr/> (trait horizontal) <h1>important</h1> <h6>moins important</h6> <div>bloc</div> Le Web Le langage HTML Structuration du texte les listes non ordonnées : les listes ordonnées : Le Web Le langage HTML Structuration du texte les listes non ordonnées : <ul> <li>amuse</li> <li>soir</li> </ul> les listes ordonnées : <ol> <li>pouquoi</li> <li>banane</li> </ol> Le Web Le langage HTML Structuration du texte les tables : Le Web Le langage HTML Structuration du texte <table> <tr> <td>1ère ligne, 1ère colonne</td> <td>1ère ligne, 2ème colonne</td> </tr> <tr> <td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td> </tr> </table> les tables : <h1>une table un peu plus compliquée...</h1> <table border="1"> <tr> <td colspan="3"> 1ère ligne, 1ère colonne </td> <td>1ère ligne, 4ème colonne</td> </tr> <tr> <td>2ème ligne, 1ère colonne</td> <td>2ème ligne, 2ème colonne</td> <td>2ème ligne, 3ème colonne</td> <td rowspan="2"> 2ème ligne, 4ème colonne </td> </tr> <tr> <td colspan="2" rowspan="2"> 3ème ligne, 1ère col </td> <td>3ème ligne 3ème colonne</td> </tr> <tr> <td>4ème ligne, 3ème colonne</td> <td>4ème ligne, 4ème colonne</td> </tr> </table> Le Web Le langage HTML Balise propres à l’hypertexte et au multimédia les liens : <a href="http://fpl.ma">page web</a> <a href="page2.html">autre page</a> <a href="mailto:admin@fpl.com">email</a> les images : <img src="ma_photo.jpg" alt="description" /> une image lien : <a href="http://www.fpl.com"> <img src=“fpl.png" alt=“FPL" /> </a> Créer cette page web http://www.fpl.ma <html> <head> <title>Visite de la FPL</title> </head> <body> <p>Ceci est un paragraphe</p> <hr/> <h1>bonjour!</h1> <h3>moyenjour.</h3> <h6>mauvaisjour.</h6> <p><i>je vais aller</i> <a href="http://www.fpl.ma"> rendre visite à la Faculté polydisciplinaire de Larache</a>. <br><img src="fpl.jpg" alt="fpl" />.</p> <ul> <li>un élément</li> <li>un autre élément</li> </ul> <ol> <li><b>premier élément</b></li> <li>deuxième élément</li> </ol> </body> </html> Le Web Le langage HTML Balises de formatage/mise en page aller à la ligne : <br/> écrire en italique : <i>...</i> écrire en gras : <b>...</b> Je suite la Page d’accueil 1.Je suis le lien vers la page 1 2.Je suis le lien vers la page 2 Je suis la page 1 Je suis le lien vers la page d’accueil Je suis la page 2 Je suis le lien vers la page d’accueil Index.htm page1.htm page2.htm ➢ Créer ces trois pages hyperliées ✓ index.htm ✓ page1.htm ✓ page2.htm A faire et à envoyer à pr.mabrouk.fpt@gmail.com Le Web Le langage HTML Les formulaires ? Le Web Le langage HTML ➢servent à envoyer des données au serveur, ✓Les données remplies en général par un visiteur, que ce soit pour l'inscription sur un site ou un formulaire de contact par exemple. ➢sont dotés de divers contrôles comme : ✓des champs de saisie, ✓des boutons, ✓des listes, etc, ➢permettent au visiteur d'interagir avec la page qu'il est en train de consulter. Les formulaires Le Web Le langage HTML Les formulaires La balise form ➢ Tous les champs de formulaires quels qu'ils soient doivent se trouver dans cette balise <form>. <form action="envoi-formulaire.php" method="post">  </form> Le Web Le langage HTML Les formulaires Les champs texte monolignes ➢caractérisé par la balise <input> ➢l'attribut type prend la valeur : ➢"text" ➢"password". ➢l'attribut name est le nom du champ, ✓ permet de retrouver la valeur lors de l'envoi du formulaire. ➢l'attribut value permet d'attribuer une valeur par défaut au champ, ➢l'attribut size permet de préciser la taille du champ en nombre de caractères, ➢Maxlength limiter le nombre de caractères possibles, ➢readonly prend pour seule valeur "readonly" et verrouille le champ, ➢ disabled prend pour seule valeur "disabled" et permet de désactiver le champ. Le Web Le langage HTML Les formulaires Les champs texte monolignes <input type="text" name="textfield" value="Je suis un champ texte " /> <input type="password" value="Mot de passe" /> <input type="text" value="Je suis un champ texte désactivé" size="35" disabled/> <input type="text" value="Tu ne peux pas me modifier" size="35" readonly="true" /> Le Web Le langage HTML Les formulaires Les champs texte multilignes ➢Permettent de saisir de longs textes, comme des champs de commentaires pour des articles. ➢l'utilisation de la balise <textarea> ➢son contenu est écrit entre les balises ouvrante et fermante et non dans un attribut value. ➢L’attribut rows contient le nombre de lignes ➢L’attribut cols qui contient le nombre de colonnes. ➢On peut, rajouter les attributs name, readonly et disabled Le Web Le langage HTML Les formulaires Les champs texte multilignes <html> <head> <title>champs de texte</title> </head> <body> <textarea name="commentaire" rows="5" cols="40"></textarea> <br><br> <textarea name="sujet" rows="6" cols="50">Texte par défaut</textarea> </body> </html> Le Web Le langage HTML Les formulaires Les champs cachés ➢un champ caché, ➢N’est pas affiché dans le navigateur ➢La balise dans le code source de la page ➢on utilise la balise <input> avec "hidden" comme valeur de l'attribut type Exemple de champ caché <input type="hidden" name="clef" value="a182f8e84f"> Le Web Le langage HTML Les formulaires Les champs de fichiers Exemple de champ file <input type="file" name="image"> Le Web Le langage HTML Les formulaires uploads/Management/ conception-et-realisation-des-sites-web-pr-aziz-mabrouk.pdf