Remerciez-le!

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

1 HTML/CSS LPTI-1 Novembre 2016 2 Objectifs ●Créer ou modifier des pages HTML.

1 HTML/CSS LPTI-1 Novembre 2016 2 Objectifs ●Créer ou modifier des pages HTML. ●Utiliser les styles CSS. ●Découvrir les nouveautés du HTML 5 3 SOMMAIRE • Le modèle Client-Serveur • Le World Wide Web • Structure d’une page en HTML • Images sur une page Web • Les hyperliens • Les tableaux • Les CSS • Les formulaires • Audio et vidéo dans une page Web Le modèle client-serveur ●Partage de ressources à travers un réseau ●travail en équipe ●Environnement favorable (débit, processeurs, stockage) ●Deux parties distinctes ●Client (consommateur) ●Serveur (fournisseur) Le client ●Utilise les services d’un ou plusieurs serveurs ●Demande l’exécution d’une ou plusieurs tâches ●Deux formes ●Machine ●Interface ●Récupère les « résultats » du serveur Le serveur ●Met des services à disposition du client ●Chargé d’accomplir des tâches ●Répond aux sollicitations des clients ●Exécute les tâches demandées ●Renvoie les réponses aux clients ●Deux formes ●Machine ●Logiciel Communication client-serveur ●Dialogue entre processus 2 à 2 ●Résultat : échange de données ●Client initie l’échange ●Serveur écoute en permanence une requête éventuelle CLIENT Logiciel client SERVEUR Logiciel serveur Protocoles Services de l'Internet Nom du service Logiciel client Logiciel serveur Protocoles Messagerie électronique Client de messagerie (Outlook, Thunderbird,...) Serveur de messagerie (Zimbra, Microsoft Exchange Server,...) POP3/IMAP/SMTP Transfert de fichiers Client FTP (Filezilla, Ftp (unix),..) Serveur FTP (ProFTPd, FileZilla Server,...) FTP WWW Navigateur web Serveur Web (Apache, IIS, Nginx) HTTP Le World Wide Web ●Principe original ●Accéder à des documents textuels situés sur des machines accessibles par Internet reliés entre eux par un mécanisme de lien « hypertexte » s'appuyant sur le protocole HTTP (HyperText Transfer Protocol) ●Chaque document est identifié par une URL (Uniform Resource Locator) 10 Le World Wide Web ●Un site Web est un serveur d'informations inscrit sur le WEB grâce à son identifiant (URL) sa présentation (pages HTML) et ses procédures d'accès (HTTP). ●Le serveur web est l'ensemble des matériels, logiciels et liaisons sur lequel sont implémentés les sites WEB et qui permettent de les rendre consultables sur le WEB. ●Le navigateur interprète le code HTML renvoyé par le serveur et affiche la page. Sous forme d'URL, http://... <html>......</html> 11 Le World Wide Web ●1991 :Tim Berners-Lee crée le World Wide Web ●1994 : Naissance du W3C (World Wide Web Consortium) qui est un organisme de normalisation chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, CSS, PNG, SVG et SOAP. Le World Wide Web ●Actuellement ●Servir des ressources de différentes natures : – texte, image, son, vidéo, contenu applicatif… ●Permettre à l’utilisateur : – de rechercher de l’information, acheter un objet, accéder à ses mails, consulter ses comptes en banque… 13 Le World Wide Web ●Les serveurs Web les plus connus sont: ●IIS (Internet Information Service) de Microsoft ●Apache ●Nginx 14 Affichage d’un texte en HTML • Le HTML (HyperText Markup Language) est un langage permettant de décrire les différents composants d’un document multimédia. • Un document HTML est un fichier dont le suffixe est .htm ou .html. Pour créer et tester rapidement une page web nous avons besoin respectivement d’un éditeur de texte (Bloc notes de Windows par exemple) et d’un navigateur web . 15 Affichage d’un texte en HTML • Les commandes HTML utilisées pour le formatage des informations sont désignées sous le nom de balises, marqueurs ou tags,. • Les balises sont délimitées par les chevrons ‘<‘ et ‘>' 16 Affichage d’un texte en HTML Ossature d’un fichier HTML <html> <head> <title>Titre de la page</title> </head> <body> Contenu de la page... </body> </html> 17 Affichage d’un texte en HTML Les balises • De nombreuses commandes HTML se composent souvent d’une balise d’ouverture (<balise>) et d’une balise de fermeture (</balise>). • Toutes les informations comprises entre ces balises sont influencées par la commande en question. ●Les balises indiquent ce que l'on désire afficher (un paragraphe, une liste, un tableau, une image, etc.) 18 Affichage d’un texte en HTML Les balises EXEMPLE 1 : <p>Ces commandes délimitent le paragraphe</p> <h1>TITRE 1 de niveau 1</h1> <h2> Sous titre de niveau 2</h2> <strong>contenu très important</strong> <em>contenu important</em> <mark>contenu mis en évidence</mark> 19 Affichage d’un texte en HTML Les balises Paragraphe <p></p> Saut de ligne <br /> ou <br> Ligne horizontale <hr> image <img> ou <img/> Cellule pour spécifier l'entête d'une colonne <th></th> Cellule d'un tableau <td></td> Ligne d'un tableau <tr></tr> Tableau <table></table> Élément d'une liste <li></li> Liste numérotées <ol></ol> Liste avec puces <ul></ul> Variantes de titres (6 tailles possibles) <h1></h1> ; <h2></h2> ;… ; <h6></h6> Description Commande 20 Affichage d’un texte en HTML Les attributs • Les attributs sont des indicateurs spécifiques placés dans la balise d’ouverture pour: – ajouter des propriétés au format (taille de l'image, la couleur du texte, etc.). – Apporter des informations complémentaires et souvent indispensable sur l'élément en question (source de l'image, texte alternatif, etc). <balise attribut1="valeur1" attribut2="valeur2" attribut3="valeur3"> 21 Affichage d’un texte en HTML Les attributs EXEMPLE 3 : <h1 style="text-align:center">Bienvenue sur ma première page Web</h1> <p style=“text-align:right; color:green”> C’est mon premier test! </p> <p style=”color:#3366CC”>A bientôt</p> ●Par exemple l’attribut style permet d'ajouter une série de couples propriété:valeur. ●Par exemple la propriété text-align, permet d’indiquer l’alignement d’un paragraphe (à gauche, au centre ou à droite). 22 Affichage d’un texte en HTML Références des commandes HTML <head> …. <meta charset=”utf-8”> <meta name="author" content=" Nom de l’auteur"> <meta name="keywords" content=" liste de mots clés"> <meta name="description" content="courte description de la page"> <meta name="date" content="date de création"> </head> La balise <meta> permet de donner des informations sur le document Liens utiles: • http://www.w3.org (W3C) • https://developer.mozilla.org/fr/docs/Web/HTML/Element (Mozilla -MDN)  23 Structure classique d'une page HTML 5 <!DOCTYPE html> <html> <head> [...] </head> <body> <header> [en-tête de page] </header> <nav> [menu de navigation] </nav> <main> [contenu propre à la page] </main> <footer> [pied de page] </footer> </body> </html> <header> <header> <main> <nav> <footer> 24 Affichage d’un texte en HTML Couleurs standards 25 Affichage d’un texte en HTML Codes de couleurs ●http://html-color-codes.info/Codes-couleur-HTML/ 26 Affichage d’un texte en HTML Caractères spécifiques ë ë ù ù ê ê è è é é ç ç à à Code d’entité Caractère 27 Affichage d’un texte en HTML Caractères spéciaux € € É É ou bien Espace insécable @ @ % % ! ! Espace Code ISO Caractère 28 Affichage d’un texte en HTML Liste numérotée <ol> (Début) <lh>Titre de la liste (facultatif)</lh> <li>premier item</li> <li>Deuxième item</li> …. </ol> (Fin) <ol> <lh>Pour réussir:</lh> <li>Il faut travailler</li> <li>Beaucoup travailler</li> <li>Toujours travailler</li> <li>Encore travailler</li> </ol> 29 Affichage d’un texte en HTML Liste avec puces <ul> (Début) <lh>Titre de la liste (facultatif)</lh> <li>premier item</li> <li>Deuxième item</li> …. </ul> (Fin) <ul> <lh>Pour réussir:</lh> <li>Il faut travailler</li> <li>Beaucoup travailler</li> <li>Toujours travailler</li> <li>Encore travailler</li> </ul> 30 Images sur une page web Formats d’image • Le HTML gère les formats d’image: – GIF : Graphics Interchange Format, image compressée sans perte – JPEG : Joint Photographic Experts Group, image compressée avec perte – PNG : Portable Network Graphic, il combine les propriétés des formats GIF et JPEG. 31 Images sur une page web Insertion d’une image • L’insertion d’une image est annoncée par le tag <img> avec un certain nombre d’attributs : – src ="chemin relatif" – alt =" texte alternatif pour les navigateurs qui ne peuvent afficher l’image " • <img src=”images/logo.jpg”> • <img src=”http://www.esmt.sn/images/logo_esmt.jpg”> 32 Les Hyperliens • Un lien hypertexte est un texte qui est sensible au clic de la souris et qui provoque une action sous ce clic (en général, le chargement d’un autre document Web) • Un lien hypermédia, sera par exemple une image sensible au clic de la souris 33 Les Hyperliens Ancres Une ancre est l’indication d’une cible par une balise <a>. La cible peut être : – Une étiquette (ou un signet) dans un document local ou distant. – Un document local ou distant défini par son chemin d’accès ou son URL. – La cible est déclarée avec l'attribut href 34 Les Hyperliens Cible locale - Signet ●La déclaration de l’étiquette ou signet sur le document concerné se fait à l'aide de l'attribut id d'un élément HTML: ●Déclaration de la cible (dans un document) <h1 id="mon_etiquette">Mon étiquette</h1> ●Déclaration de l'ancre (lien vers la cible) <a href="#mon_etiquette">Vers mon étiquette </a> ●En cliquant sur le lien, l'utilisateur est dirigé au point précis indiqué par le signet “mon_etiquette” 35 Les Hyperliens Cible – document distant L’hyperlien est déclaré dans une balise <a> avec l’attribut href : <a href="http://www.MonSite.sn">Mon site</a> (lien vers le mon site) ●Lorsque l’on clique sur le lien hypertexte d’une page, la page associée au lien se charge par défaut dans la même page. ●L’attribut target de la balise <a> permet de préciser le cadre (frame) s'il existe ou la fenêtre où doit se charger la page. ●La valeur “_blank” donnée à l'attribut permet d'afficher la cible dans une nouvelle fenêtre ou un nouvel onglet 36 Les Hyperliens Lien vers une adresse e-mail • La commande pour un tel lien est la suivante : <a href="mailto:jmp@jmp.sn">Pour écrire</a> 37 TABLEAUX • Un tableau est constitué de lignes qui sont elles uploads/Management/ support-cours-html-css-lpti117.pdf