Programmation Web HTML/CSS PDF

20/09/2023 Programmation Web HTML/CSS Pr. OULAD SAYAD Younes [email protected] 20/09/2023...

20/09/2023 Programmation Web HTML/CSS Pr. OULAD SAYAD Younes [email protected] 20/09/2023 1 Comment fonctionne le Web? C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne ce dernier tel qu'il est stocké. Lorsque le client lance une requête pour accéder à cette page (en cliquant sur un lien ou en tapant l’URL correspondant). Le serveur, quelque part sur le réseau, renvoie la réponse en format HTML. 20/09/2023 2 1  20/09/2023 La communication entre le client et serveur web s'effectue de la manière suivante : le client envoie un message de requête au serveur web. Ce dernier y répond par un message de réponse. Le protocole HTTP organise la structure de ces messages. Si celui-ci peut fournir la page demandée, le document est retourné, en format HTML, par la même connexion, qui est ensuite refermée. 20/09/2023 3 Résultat visible à l’écran 20/09/2023 4 2  20/09/2023 20/09/2023 5 Langages HTML/CSS 20/09/2023 6 3  20/09/2023 20/09/2023 7 Les pages web statiques sont des documents en HTML invariables préparées à l’avance. Le serveur renvoie ces pages à l’utilisateur mais n’effectue aucune action particulière. Le code source de la page affichée par le navigateur sur le poste client est identique au code source de la page web installée sur le serveur. 20/09/2023 8 4  20/09/2023 9 POURQUOI APPRENDRE LE HTML & LE CSS ? Les langages HTML et CSS sont incontournables car n’ont pas de concurrent et sont à la base de tout projet de développement web; Une base pour comprendre son site, le modifier et résoudre les problèmes au besoin; Indispensable pour optimiser son référencement; Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très beau : l'information apparaîtra « brute ». C'est pour cela que le langage CSS vient toujours le compléter. 20/09/2023 10 5  20/09/2023 HTML & CSS : DEFINITION HTML = HyperText Markup Language. Créé en 1991 Fonction : donner du sens et structurer le contenu CSS = Cascading Style Sheets Créé en 1996 Fonction : mettre en forme le contenu en lui ajoutant des styles 20/09/2023 11 20/09/2023 12 6  20/09/2023 LES VERSIONS HTML & CSS Versions actuelles : HTML5 & CSS3 Toutes les deux non finalisées (encore en développement) mais totalement stables et déjà très largement utilisées. Introduisent de nouvelles fonctionnalités très attendues : insérer des vidéos, bordures arrondies, etc. 20/09/2023 13 L’EDITEUR DE TEXTE Pour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur de texte gratuit : Pc = Sublime Text, NotePad++, Komodo, etc. Mac = Sublime Text, Komodo, TextWrangler, etc. Linux = Sublime Text, Komodo, gEdit, etc. Première chose à faire : changer la couleur du fond ! 20/09/2023 14 7  20/09/2023 Partie 1: HTML 20/09/2023 15 ELEMENTS, BALISES & ATTRIBUTS Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci : Exemples: L’élément p définit un paragraphe , Les éléments h1, h2, … , h6 définissent des titres.., Généralement constitués d’une paire de balises : Balise ouvrante : Balise fermante : 20/09/2023 Exception : balises orphelines comme 16 8  20/09/2023 ELEMENTS, BALISES ET ATTRIBUTS Attributs = Propriétés utilisées pour donner des indications supplémentaires aux éléments. Ex: Indiquer la cible d’un lien. Balise ouvrante Balise fermante Le site YouTube attribut élément a 20/09/2023 17 STRUCTURE D’UNE PAGE EN HTML5 20/09/2023 18 9  20/09/2023 BONNES PRATIQUES, REGLES & COMMENTAIRES Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez les refermer dans le bon ordre :. Indentez votre code et commentez le pour le rendre plus lisible, plus professionnel et plus simple à comprendre. ! Tout le monde peut voir votre code HTML ! N’écrivez donc pas d’infos sensibles en commentaires comme des mots de passe ! 20/09/2023 19 Éléments de base L’élément p définit un paragraphe. L’élément br crée un retour à la ligne. Les éléments h1, h2,… jusqu’à h6 définissent des titres (par ordre d’importance). L’élément strong est utilisé pour définir un contenu comme important. L’élément em est utilisé pour définir un contenu comme assez important. L’élément mark est utilisé pour faire ressortir du contenu. 20/09/2023 20 10  20/09/2023 Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires. Voici les codes de quelques couleurs basiques. Bleu #0000FF Vert #00FF00 Blanc #FFFFFF Violet #8000FF Rouge #FF0000 Jaune #FFFF00 20/09/2023 21 Exercice d’application (1) 20/09/2023 22 11  20/09/2023 Correction Exercice d’application (1) les textes Texte simple Texte en gras Texte en italique Texte centrer texte en gras et en italique Texte en bleu Texte de taille 50 pixel 20/09/2023 23 Les paragraphes Bonjour et bienvenue sur mon site ! signifie « Début du paragraphe » ; signifie « Fin du paragraphe ». On écrit le contenu du site web entre les balises 20/09/2023 24 12  20/09/2023 Exercice d’application (2) 20/09/2023 25 Correction Exercice d’application (2) les paragraphes Mon premier paragraphe Mon deuxieme paragraphe 20/09/2023 26 13  20/09/2023 Les Titres En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents. : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci. : signifie « titre important ». : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez). : titre encore moins important. : titre pas important. : titre vraiment, mais alors là vraiment pas important du tout. 20/09/2023 27 Exercice d’application (3) 20/09/2023 28 14  20/09/2023 Correction Exercice d’application (3) les titres titre très important titre important sous-titre titre moins important titre pas important le plus petit titre 20/09/2023 29 LISTES ORDONNEES / NON-ORDONNEES / IMBRIQUEES Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations. Nous allons découvrir ici deux types de listes : les listes non ordonnées ou listes à puces ; les listes ordonnées ou listes numérotées ou encore énumérations. 20/09/2023 30 15  20/09/2023 LISTES ORDONNEES / NON-ORDONNEES / IMBRIQUEES Liste non ordonnée Une liste non ordonnée ressemble à ceci : Fraises Fraises Framboises Framboises Cerises Cerises il faut utiliser la balise pour les listes non ordonnée chaque élément doit être entre deux balises. 20/09/2023 31 LISTES ORDONNEES / NON-ORDONNEES / IMBRIQUEES Liste ordonnée Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer par. À l'intérieur de la liste, on ne change rien : on utilise toujours des balises pour délimiter les éléments. L'ordre dans lequel vous placez les éléments de la liste est important. Le premier sera l'élément n° 1, le second sera le n°2 etc… 20/09/2023 32 16  20/09/2023 LISTES ORDONNEES / NON-ORDONNEES / IMBRIQUEES Liste ordonnée 20/09/2023 33 TYPES DES LISTES ORDONNEES L’attribut «type» définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants: 20/09/2023 34 17  20/09/2023 TYPES DES LISTES NON ORDONNEES L’attribut «type» définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants: 20/09/2023 35 EXERCICE D’APPLICATION (4) Les mois de l’hiver i. Décembre ii. Janvier iii. Février Les mois du printemps I. Mars II. Avril III. Mai Les mois de l’été A. Juin B. Juillet C. Août 20/09/2023 36 18  20/09/2023 LES LIENS Un lien vers un site web externe Les liens vers un site sont écrits d'une façon différente (par défaut, en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus. Exemple : lien qui amène vers le Site Wikipedia : Bonjour. Souhaitez-vous visiter le Site Wikipedia? Pour faire un lien, la balise que nous allons utiliser :. Il faut cependant lui ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire. Bonjour. Souhaitez-vous visiter le Site wikipedia 20/09/2023 37 LES LIENS Un lien vers une page interne de notre site Nous avons deux fichiers HTML différents (page1.html et page2.html) dans le même dossier 20/09/2023 38 19  20/09/2023 LES LIENS Un lien vers une page interne de notre site Comment faire un lien de la page 1 vers la page 2 ? si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien le nom du fichier vers lequel on veut amener. Par exemple :. On dit que c'est un lien relatif. page1.html : Bonjour. Souhaitez vous consulter la page 2 ? page2.html : Retourner vers la page 1 ? 20/09/2023 39 LES LIENS Un lien vers une page interne de notre site Deux pages situées dans des dossiers différents Dans ce cas de figure, le lien doit être rédigé comme ceci : S'il y avait plusieurs sous-dossiers, on écrirait ceci : Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il faut écrire deux points comme ceci : 20/09/2023 40 20  20/09/2023 LES LIENS Un lien vers un ancre Une ancre est une sorte de point de repère à l’interieur d’une page HTML qui mène vers un paragraphe. 20/09/2023 41 LES LIENS Un lien vers un ancre Exemple Titre Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple Aller vers l'ancre Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement). 20/09/2023 42 21  20/09/2023 LES LIENS Un lien vers un ancre Ma grande page Aller directement à la partie traitant de : La cuisine Les rollers Le tir à l'arc La cuisine... (beaucoup de texte)... Les rollers... (beaucoup de texte)... Le tir à l'arc... (beaucoup de texte)... 20/09/2023 43 LES LIENS Un lien qui affiche une infobulle au survol Vous pouvez utiliser l'attribut title qui affiche une information lorsqu'on pointe sur le lien. Cet attribut est facultatif. Bonjour. Souhaitez-vous visiter le Site Wikipedia ? 20/09/2023 44 22  20/09/2023 LES LIENS Un lien qui ouvre une nouvelle fenêtre Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise : Bonjour. Souhaitez-vous visiter le Site Wikipedia ? 20/09/2023 45 LES LIENS Un lien pour envoyer un e-mail Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de typemailto. vous devez simplement modifier la valeur de l'attribut href comme ceci : Envoyez-moi un e- mail ! Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e- mail où on peut vous contacter. 20/09/2023 46 23  20/09/2023 LES LIENS Un lien pour télécharger un fichier Par exemple, supposez que vous vouliez faire télécharger monfichier.zip. Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier : Télécharger le fichier Le navigateur va lancer la procédure de téléchargement lorsqu'on cliquera sur le lien. 20/09/2023 47 EXERCICE D’APPLICATION (5) Créer deux pages html: 1. Créer page1.html contenant : 1. Créer un titre sport et un paragraphe du sport 2. Créer un titre éducation et un paragraphe éducation 3. Créer un ancre vers sport et un ancre vers éducation 4. Ajouter une info bulle dans les deux liens 5. Créer un lien qui ouvre page2.html dans un nouvelle onglet 2. Créer page2.html contenant : 1. un lien vers page1.html 2. Créer un lien qui envoie un email a [email protected] 3. Créer un lien qui télécharge un fichier pdf 20/09/2023 48 24  20/09/2023 Les Images Afficher l'image qui se trouve à l'adresse. La balise image possède de nombreux attributs. 1. Texte alternatif alt="****" Pour les browser n'ayant pas l'option "image" activée 2. Dimensions width=? height=? Hauteur et largeur (en pixels) 3. border=? (en pixels) Bordure 4. align= (top, middle, left, right …) Lien sur Image : 20/09/2023 49 Les arrière-plans Le langage HTML permet d'agrémenter la présentation du document d'un arrière- plan [background] coloré ou à l’utilisation d’une image ce qui apporte un élément "artistique" à votre page. La balise à utiliser ne pose pas de problème : Avec Couleur: Avec Image: 20/09/2023 50 25  20/09/2023 Les tableaux Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc : Définition du tableau [Table] Début et fin de tableau Définition de l’en-tête du tableau [Table Header] Définition d'une ligne [Table Row] Début et fin de ligne Définition d'une cellule [Table Data] Début et fin de cellule 20/09/2023 51 Les tableaux permet de regrouper un ou plusieurs éléments afin de former le corps d'un tableau. définit un ensemble de lignes qui définit l'en-tête des colonnes d'un tableau. permet de définir un ensemble de lignes qui résument les colonnes d'un tableau. L'élément , ainsi que les éléments et , fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité. 20/09/2023 52 26  20/09/2023 Les tableaux - - : 20/09/2023 53 Les tableaux Bordure de cadre [Border] L'espace entre les cellules ou l'épaisseur des lignes du quadrillage: L'enrobage des cellules ou l'espace entre le bord et le contenu: La largeur de la table 20/09/2023 54 27  20/09/2023 Les tableaux 20/09/2023 55 Les tableaux 12 34 12 34 12 34 20/09/2023 56 28  20/09/2023 Les cellules des tableaux les cellules peuvent contenir tous les éléments Html : du texte des images des liens et même des tableaux Largeur d'une cellule en pixels ou en pourcentage Fusion de lignes Fusion de colonnes 20/09/2023 57 Les cellules des tableaux EXEMPLE : Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. cellule1 cel. 2 3 20/09/2023 58 29  20/09/2023 Les cellules des tableaux Exemple 1 : Exemple 2 : 20/09/2023 59 Les cellules des tableaux Exemple 1 : cellule 1 cellule 1 cel 2 3 20/09/2023 60 30  20/09/2023 Les cellules des tableaux Exemple 2 : cellule 1 cel 2 3 cel 2 3 20/09/2023 61 Exemple 1 : Exercice cellule 1 cellule 1 cel 2 3 Exemple 2 : cellule 1 cel 2 3 1. Reproduisez ce tableau en le centrant horizontalement 2. Donner la valeur 6 à cellpading et cellspacing. cel 2 3. Modifier la dimension des cellules. 3 Remarque : Utilisez les attributs: ‘bgcolor’, ‘align’, ‘valign’ 20/09/2023 62 31  20/09/2023 EXERCICE D’APPLICATION (6) 1. Reproduisez ce tableau en le centrant horizontalement 2. Donner la valeur 6 à cellpading et cellspacing. 3. Modifier la dimension des cellules. Remarque : Utilisez les attributs: ‘bgcolor’, ‘align’, ‘valign’ 20/09/2023 63 Corrigé 20/09/2023 64 32  20/09/2023 Les formulaires Les formulaires sont utilisés pour échanger des données entre le poste client et le serveur. Cet échange de données fait appel à des programmes spéciaux s’exécutant sur le serveur. 1. L’utilisateur remplit le formulaire et le valide ce qui a pour effet d’envoyer des données vers le serveur 2. Le script s’exécute sur le serveur qui effectue un traitement en produisant éventuellement des résultats 3. Les résultats sont transmis en code HTML au poste client. Ils sont affichés par le navigateur 20/09/2023 65 Les formulaires (envoi de paramètres) Un formulaire est délimité par les balises et.... champs de saisie se trouvent entre ces deux balises. Les données saisies sont transmises selon deux méthodes indiquées par l’attribut METHOD au script (sur le serveur) 20/09/2023 66 33  20/09/2023 Les formulaires (envoi de paramètres) METHOD = GET : correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation METHOD = POST : permet l’envoi de listes de données plus longues (les paramètres sont envoyés indépendamment de l’adresse URL du script). Action : indique l'adresse d'envoi (script , mailto:adresse email, …) Enctype : (facultatif) spécifie le codage des données dans l'URL 20/09/2023 67 Les formulaires (Composantes) 20/09/2023 68 34  20/09/2023 Les formulaires (Zone de Saisie) Les zones de saisie sont définies par la balise qui possède les attributs suivants : NAME : nom du champ de saisie ; TYPE : type de champ ; text : texte ; password : mot de passe checkbox : boite à cocher radio : boite d’option Email : champ email Datetime-local : champ date SIZE : taille du champ 20/09/2023 MAXLENGHT : nombre maximum de caractères à saisir 69 Les formulaires (Zone de Saisie) Champ de saisie sur une ligne Saisie d’un mot de passe 20/09/2023 70 35  20/09/2023 Les formulaires (Zone de Saisie) Cases à cocher (sélection de plusieurs éléments) 1 2 3 cases à option ou boutons radio (sélection d’un seul élément) tiède froid 20/09/2023 71 Les formulaires (Les Boutons) Le déclenchement de l’envoi des paramètres peut s’effectuer avec un bouton «Envoi» : La remise à leur valeur initiale des paramètres peut également s’effectuer ave un bouton «Reset» 20/09/2023 72 36  20/09/2023 Les formulaires (Exemples) Exemple 1 : 20/09/2023 73 Les formulaires (Exemples) Exemple 1 : Merci de bien vouloir indiquer votre nom : 20/09/2023 74 37  20/09/2023 Les formulaires (Exemples) Exemple 2 : 20/09/2023 75 Les formulaires (Exemples) Exemple 2 : Entrez votre prénom: Entrez votre nom : Entrez un mot de passe : 20/09/2023 76 38  20/09/2023 Les formulaires (Exemples) Exemple 3 : 20/09/2023 77 Les formulaires (Exemples) Exemple 3 : nom : prenom : Sexe: Homme Femme 20/09/2023 78 39  20/09/2023 Les formulaires (Exemples) Exemple 4 : 20/09/2023 79 Les formulaires (Exemples) Exemple 4 : nom : prenom : Loisirs : foot lecture voyage 20/09/2023 80 40  20/09/2023 Liste Déroulante et : crée une liste déroulante. Attributs : name, size (spécifie le nombre d'éléments visibles)… et : ajoute un élément à la liste déroulante créée avec un select. On lui donne une valeur grâce à son attribut "value". bleu rouge jaune 20/09/2023 81 Zone de texte et : délimite une zone de texte. On peut en spécifier la taille avec: "rows" (nombre de lignes) "cols" (nombre de colonnes). Exemple : Texte de départ 20/09/2023 82 41  20/09/2023 Les FieldSet L'élément HTML est utilisé pour regrouper plusieurs contrôles interactifs ainsi que des étiquettes () dans un formulaire web. Titre Cliquez moi 20/09/2023 83 placeholder  placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. C'est une valeur qui s'efface dès que l'utilisateur active le champ de formulaire. Éléments compatibles L'attribut placeholder peut être placé sur les éléments : : de type text, , password, url, tel, email 20/09/2023 84 42  20/09/2023 required L'attribut required permet de rendre obligatoire le remplissage d'un champ et bloquer la validation du formulaire si l'un des champs (concernés par cet attribut) n'a pas été renseigné. 20/09/2023 85 pattern Les expressions régulières permettent de préciser le format attendu d’une chaine de caractères. Ainsi, on peut mettre un champs qui n’accepte qu’une chaine alphabétique d’une longueur entre 4 et 10 caractères : Exemple : Ce champ attend une valeur numérique d'au moins 5 chiffres précédés d'une lettre majuscule comprise entre A et F. Si le format n'est pas respecté, le navigateur en informe l'utilisateur. 20/09/2023 86 43  20/09/2023 L’attribut autofocus Encore une fois, HTML5 élimine les solutions JavaScript. Si un champs particulier doit être sélectionné après le chargement de la page. Exemple : 20/09/2023 87 Champ de type email Toujours très proche du type text, ce champ est équivalent au type url, seul le format attendu change. Ce champ attend au minium un caractère (caractère non accentué comprenant les séparateurs tiret ou underscore) suivi d'un @ suivi à son tour d'un caractère. Exemple d'entrée invalide : é@ç Exemples d'entrées valides : -@_ , f@r 20/09/2023 88 44  20/09/2023 Champ de types date, time Champ de type date  Champ de type time