Remerciez-le!

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

Chapitre II : Les langages Web 1. Pages statiques et pages dynamiques 1.1 Pages

Chapitre II : Les langages Web 1. Pages statiques et pages dynamiques 1.1 Pages statiques : chacune des pages est créée en HTML. Un ordinateur qui se connecte au serveur, demande une page. Celle-ci lui est directement servie. le serveur web (HTTP) se contente d'envoyer des fichiers stockés sur disque dur. 1.2 Pages dynamiques: les pages peuvent être générées dynamiquement, en fonction des informations données par le navigateur (liens cliqués, formulaires, cookies...) et par le serveur (base de données SQL, fichiers de configuration...). - Le serveur web (HTTP) exécute un ou plusieurs programmes qui vont renvoyer des données, que le serveur web retransmet au navigateur. - Le contenu est obtenu (par exemple) en combinant l’utilisation d’un langage de scripts ou de programmation et une base de données. Il s’agit souvent de PHP pour le langage et MySQL pour la base de données. 2. Programmation web statique 2.1 HTML 2.1.1 Définition - « HyperText Mark-Up Language» Langage de description de documents HyperTextuels, il a été défini par le W3C (World Wide Web Consortium). - Issu de SGML (Standard Generalized Markup Language), langage de définition de langages. - Développé par Tim Berners-Lee au CERN (Suisse) en 1990 et utilisé sur le Web depuis. - Un document HTML (source) est composé de morceaux de textes délimités par des balises (Tag) qui jouent le rôle de directives de mise en forme. 2.1.2 Historique et succession de versions  1990: HTML 1  1995: HTML 2  19 95: HTML+ et HTML3 ( non standards)  1997: HTML 3.2 et HTML 4 (W3C)  2000: XHTML 1.0 (HTML 4 réécrit en XML)  2001: XHTML 1.1  2003: XHTML 2 (évolution de XHTML 1 abandonnée en 2009)  2008: HTML 5/ XHTML 5 (évolution de HTML 4, finalisation de spécification en 2014) 2.1.3 XHTML « Extensible HyperText Mark-Up Language» XHTML est le successeur de HTML, il se base sur la syntaxe définie par XML. Il est Devenu standard pour assurer la compatibilité entre les navigateurs (Firefox, Internet Explorer, Mozilla, …). Pour vérifier la validité d'une page, le W3C a mis en place un validateur qui comptabilise les erreurs et donne les moyens de les corriger : http://validator.w3.org/ 2.1.4 Les principales différences entre HTML et XHTML HTML XHTML Des tags en majuscules ou en minuscules Tous les noms sont en minuscules. Paragraphe peut être ouvert avec l'instruction <p> sans le terminer par </p>. Cela fonctionne.. La page ne s'affiche pas. Tout tag ouvert <tag> doit obligatoirement être refermé par </tag>. Les guillemets ne sont pas toujours obligatoires autour des valeurs d’attributs Les guillemets sont toujours obligatoires On peut utiliser des formules réduites par exemple: <option value="valeur" selected> À tous les attributs utilisés doit être donnée une valeur: <option value="valeur" selected="selected"> 2.1.5 Structure d’un documet XHTML 2.1.6 Les balises XHTML Les balises sont écrites en paire, balise ouvrante et autre fermante (<tag>…..</tag>) ou auto-fermante (<tag ….. />). 2.1.6.1 L’entête (Head) Contient des informations d’en-tête qui ne sont généralement pas affichées sur la page: - La balise <title> : Le titre d’une page web est affiché dans la barre de titre du navigateur <title>Titre de la page</title> - La balise <meta/> : utilisée pour indiquer différentes informations : la description de la page web, ses mots-clés, son auteur, les règles spécifiques destinées aux robots des moteurs de recherches, la langue de la page web... <meta name="author" lang="fr" content="prénom NOM" /> <meta name="keywords" content="web,langage,services" /> <meta name="description" content="site destine aux développeurs web" /> <meta name="category" content="Développement web" /> 2.1.6.2 Le corps (body) Contient le texte et les objets (images, vidéos, tableaux,..) qui seront affichés par le navigateur : - Les paragraphes (<p></p>) : pour délimiter les paragraphes du document <p>ceci est un paragraphe</p> - Les titres et sous titres (<h1…6></h1…6>) : la balise <h> définit 6 niveaux de titre, h1 étant le plus grand. - Balise division <div> .... </div> : Pour regrouper en un seul bloc un ensemble de paragraphes, de titres, etc., auxquels on pourra appliquer globalement un style particulier. - Balise fusion <span>…</span>: pour regrouper plusieurs mots ( ou même un mot isolé ou une lettre seule ! ) d’un paragraphe et leur donner une mise en forme commune, p.exla taille, la couleur ou la police de caractère. - Texte en gras <strong></strong> - Texte en italique <em></em> - Texte en exposant <sup></sup> - Texte en indice <sub></sub> - Caractères spéciaux : Espace : &nbsp, & :&amp, " :&quot - Liens hypertextes :  Lien externe <a href="http://www.google.dz">Aller à google</a>  Lien interne avec infobulle <a href="page2.html" title="suivre mon cours">mon cours</a>  Ancre <h2 id="cours">cours prog web </h2> (création de l’ancre) <a href="#cours"> visualiser le cours prog web </a> (référence depuis la même page) <a href="page.html #cours"> visualiser le cours prog web </a> (référence depuis une autre page)  Lien pour envoyer un mail <a href="mailto:myacount@gmail.com">Envoyez-moi un message !</a> - Les images <img src="photo.jpg" alt="ma photo" title="ma photo" /> src: précise le chemin vers l’image à afficher. alt: indique un texte de remplacement (dit « texte alternatif ») pour votre image. Ce texte sera affiché à la place de votre image si celle-ci ne peut pas être affichée. title: afficher une infobulle lors du survol sur l’image. -Image cliquable <a href="http://www.photo.org"><imgsrc="photo.jpg"alt="ma photo"/></a> - Les listes : - Listes non ordonnées <ul></ul> (Unordered list) <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> - Listes ordonnées <ol></ol> (Ordered list) <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol> -Listes imbriquées <ol> <li>item1 <ul> <li>sub_item1</li> <li>sub_item2</li> <li>sub_item3</li> </ul> </li> <li>item2</li> <li>item3</li> </ol> - Les tableaux <table></table> Exemple : - Tableau irrégulier -Fusion des colonnes (colspan), Fusion des lignes (rowspan) - Les formulaires <form></form> Balises Description + attributs possibles <form></form> Définition d’un formulaire Attributs : method, action,.. <label></label> Permet de définir une étiquette pour indiquer au visiteur ce que doit contenir le champ. Attributs : for <input></input> Permet de créer les composants du formulaire. Attributs : type, name, value, id, size, maxlength (texte simple, mot de passe, boutton) <fieldset>< /fieldset > Définir un regroupement dans un formulaire. <legend></legend> Créer une légende à un formulaire. <textarea></ textarea > Créer une zone de texte <select></select> Créer une liste déroulante Exemple : 2.1.7 Structure d’une page HTML5 Code HTML de la page : <!DOCTYPE HTML> <html> <head> <title>Titre principal de la page</title> <meta charset="utf-8"> <meta name="description" content="165c. uniques"> </head> <body> <div id="page">  <header></header> <nav></nav> <aside></aside> <article></article> <footer></footer> </div> </body> </html> 2.2 Feuilles de style CSS 2.2.1 Définition La création de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le complément indispensable du langage (X)HTML. Ce procédé correspond parfaitement à la séparation du contenu et de la présentation d’un document. 2.2.2 Les règles de style Une règle de style comprend : • un sélecteur : il s’agit des balises concernées par cette règle ; • un bloc de déclarations : il indique les propriétés à attribuer à ces balises. Chaque déclaration est du type : propriété : valeur; Exemple : Cette règle comprend : • le sélecteur (h3) ; • deux déclarations, donc deux propriétés à attribuer aux titres de niveau 3 de la page. 2.2.3 Les commentaires Il est utile de commenter abondamment les feuilles de style, pour s’y retrouver plus tard lorsqu’il s’agira d’apporter des modifications. Il suffit de placer les commentaires entre les signes /* et */ : /* Voici un commentaire */ /* Et en voilà un autre, mais sur plusieurs lignes */ 2.2.3 Emplacements des styles Les règles de style peuvent se trouver : • dans le code HTML, comme attributs de balises : ce sont des styles en ligne : <h2 style= "text-align: center; color: red;"> ...Titre... </h2> • dans l’en-tête de la page web : feuille de style interne : <head> ... <style type="text/css">  </style> ... </head> • ou dans un fichier distinct : feuille de style externe, à appeler dans l’en-tête de la page web : <head> ... <link rel="stylesheet" type="text/css" href="mon_style.css" /> ... </head> Ou <head> ... <style type="text/css"> @import url(mes_styles.css); </style> ... </head> Une feuille de style externe garantit une mise en forme homogène pour l’ensemble du site web. 2.2.4 Les sélecteurs de style - Sélecteurs simples div { color: blue; } p { color: red; } La première règle s’applique à toutes les balises <div> de la page web, la deuxième à toutes les balises <p>. - Classes  Définir une classe : <p class="chapeau">...</p>  Ecrire une règle de style : p.chapeau { text-align: center; } Une même classe pour plusieurs types de balises <h1 class="menu">, <a class="menu"> .menu { font-style: italic; } - Identifiants <p id="auteur">...</p> p#auteur { color: gray; } ou #auteur { color: gray; } Cette règle s’applique à la balise d’identifiant « auteur » <... id="auteur"> (il ne peut y en avoir qu’une seule dans la page). - Pseudo-classes :link, :visited, :hover, :active, uploads/s3/ daw-chapitre-ii.pdf