Remerciez-le!

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

Technologie Web 1 Pr. Hiba Chougrad Année-universitaire: 2019-2020 Planning Cou

Technologie Web 1 Pr. Hiba Chougrad Année-universitaire: 2019-2020 Planning Cours Technologie Web: • 3 séances de cours + 3 séances de TP • Cours collectif : Lundi matin (normal) et samedi 23/11 (rat) • TP en groupe : Groupe1 Lundi Matin et Groupe2 Lundi après- midi (normal) et Samedi 16/11 (rat) La note : • Rapports des TP • Examen final pratique 2 Plan I. Langage HTML / CSS II. Langage JavaScript III. PHP/MySQL 3 Introduction 4 Site Web : Définition • Un site web est un ensemble de pages web et de ressources reliées par des hyperliens, défini et accessible par une adresse web. • Un site est hébergé sur un serveur web accessible via le réseau mondial internet, un intranet local ou encore depuis le serveur web lui-même. • L'ensemble des sites web constituent le World Wide Web (www). • Le serveur Web désigne le logiciel utilisé sur le serveur pour exécuter les requêtes HTTP (protocole de communication employé sur le World Wide Web). 5 Site Web : définition • Le World Wide Web (WWW) a été créé en 1989 par le chercheur anglais Tim Berners-Lee au CERN (Centre européen pour la recherche nucléaire). • Le web a été essentiellement conçu pour partager automatiquement des informations entre les scientifiques, universités et instituts du monde entier. • info.cern.ch fut le premier site web mis en ligne, fonctionnant sur un ordinateur NeXT au CERN. Ce site est toujours accessible par internet. 6 Premier site web 7 8 Naissance du web 9 1989 1990 Fin 1990 Le chercheur anglais Tim Berners-Lee écrit la première proposition de création du World Wide Web. Il écrit sa seconde proposition puis l’ingénieur en systèmes belge Robert Cailliau le rejoint et ils élaborent ensemble une proposition formelle pour un système de gestion de l'information Il développe le code pour le premier serveur et navigateur Web sur un ordinateur NeXT. Pour éviter qu'on ne l'éteigne accidentellement, une étiquette avait été collée sur l'ordinateur, où il était écrit à la main, en rouge : « Cette machine est un serveur. NE PAS ÉTEINDRE !! » 1991 1993 Il lance son premier logiciel WWW, qui devient accessible à d'autres collègues sur des ordinateurs du CERN. Le CERN met gratuitement à disposition le code source du World Wide Web, qui devient ainsi un logiciel libre. 1994 Robert Cailliau a lancé la première conférence internationale sur le World Wide Web. Tim Berners-Lee quitte le CERN pour rejoindre MIT, et fonde le Consortium international World Wide Web (W3C). Question : Comment fonctionnent les sites web? C'est un mécanisme client-serveur. Le client demande un fichier, le serveur le lui donne tel qu'il est stocké: processus statique. Le serveur peut aussi générer un fichier en fonction de la demande du client : processus dynamique. L’accès à des sites web, demande l’utilisation d’un programme appelé: navigateur web. 10 11 Logo Menu Les données du contenu soit statique ou dynamique 12 Site attractif : • Choix du design, • Choix des couleurs • La police, la taille … • Choix et taille des images … 13 Menu horizontal ou vertical 1 14 Mise en place du texte : - Sous forme de blocs - Dans le corps de la page 1 1 1 15 • Enregistrer les données • Données Clients ajoutées • Envoyer des newsletters et mails Pourquoi faire un site web  Votre site web est plus qu’une vitrine. • Il doit bien entendu mettre en avant votre offre, vos produits et votre expertise. • Il doit présenter votre équipe et montrer ce qui vous différencie de la concurrence.  Mais votre site web ne peut se contenter d’être figé. • Il doit être vivant, changer, s’adapter et amener toujours plus d’informations. • Informer des prochaines échéances et événements.  Internet est le média idéal pour s'adresser à un large public à peu de frais. 16 Langages de programmation Web 17 Source : https://web.developpez.com/actu/163267/Quels-sont-vos-langages-de-programmation-preferes-pour-le-Web-en-2017- Et-pourquoi-Vous-etes-invites-a-partager-votre-experience/ Langages de programmation Web 18 FrameWorks 19 Twitter en 2011 Joyent en 2009 John Resig en 2006 Facebook en 2013 Google en 2010 SensioLabs en 2005 FrameWorks 20 Wordpress Editeurs 21 Sublime Text A installer 22 Serveur Web 23 Un serveur Web est un logiciel servant des pages Web aux utilisateurs Web Navigateur côté client (Chrome, Firefox, Opera, …) 24 Web statique –HTML Une page statique est affichée tel quelle à l’écran par le Navigateur. 25 Web dynamique –PHP/MySQL 26 Pour une page dynamique le Serveur Web doit la générer pour qu’elle puisse existée et être affichée à l’écran par le Navigateur. Web dynamique –PHP/MySQL 27 Langage HTML & CSS 28 HTML5 29 HTML : Définition et principes généraux HTML = Hypertext Markup Language langage de balisage hypertexte inventé par Tim Berners Lee (~1989) permet de o publier des documents en ligne o retrouver de l'information en ligne via des liens o opérer des transactions entre services o inclure du multimédia et d'autres applications dans les documents CSS = Cascading Style Sheets Créé en 1996 Mettre en forme le contenu en lui ajoutant des styles 30 Balise ouvrante Balise fermante Une balise : <aa> bonjour </aa> ou <bb /> Syntaxe du langage : Eléments, Balises et Attributs • Eléments Définissent des objets dans notre page web  L’élément p définit un paragraphe,  Les éléments h1, h2, …, h6 définissent des titres.  L’élément br définit un arrêt de ligne (break) et retour à la ligne.  L’élément a définit un lien web Généralement constitués d’une paire de balises (ou tag) : o Balise ouvrante : <p> o Balise fermante : </p> o Exception : balises orphelines comme <br/> 31 Syntaxe du langage: Eléments, Balises et Attributs Attributs o Propriétés utilisées pour donner des indications supplémentaires aux éléments. o sont séparés par un espace o sont mentionnés uniquement dans la balise ouvrante o peuvent avoir une valeur (nom, unité de mesure ...) inscrite entre guillemets • Syntaxe o <Nom de la balise de début Attribut1 = "valeur1" Attribut2 = "valeur2" ... Attributn = "valeur n"> texte mis en forme </Nom de la balise de fin> • Exemple : indiquer la cible d’un lien 32 Balise ouvrante Balise fermante attribut élément a <a href="https://www.google.com"> Site Google </a> Structure d’une page en HTML5 <!DOCTYPE html> <html lang="fr"> <head>  <meta charset="utf-8"/> <title> le titre de la page</title> <link rel="stylesheet" href="style.css"/> <script src="script.js"></script> </head> <body>  Bienvenu dans ma première page </body> </html> 33 Définit l’encodage des langues latine • Remarque: les balises ne sont pas sensibles à la casse <BODY> = <BodY> = <body> Les balises fondamentales Titres • <TITLE> ... </TITLE> • placé dans l'en-tête <HEAD> du document Intertitres • <H1> .... </H1> , <H2> ... </H2> , ....................... <H6> ... </H6> Paragraphes • <P> : signifie « début du paragraphe » • </P> : signifie « fin du paragraphe » • Remarque : ne pas croiser les balises • <H1> cours sur les <B> plantes </H1></B> ==> code non-interprétable • <H1> cours sur les <B> plantes </B></H1> ==> code correct 34 Mise en forme (1/2) Définir un texte en gras <b> Votre Texte en Gras </b> (voir aussi <strong> pour html5) Définir un texte en italique <i> Votre Texte en Italique </i> (voir aussi <em> pour html5) Souligné un texte <u> Votre Texte Souligné </u>  Définir un texte barré <s> Votre Texte barré </s> 35 Mise en forme (2/2) Formater un texte en couleur <font color="blue">Votre Texte en Couleur </font> Remplissage de forme : <mark> test </mark> résultat : Modifier la taille du texte : <font size="5">Votre Texte en taille 5 </font> Modifier la police du texte : <font face="Arial">Votre Texte en Arial </font> Un retour à la ligne : <br> définit un retour à la ligne 36 test Niveaux de titre 37 Les caractères spéciaux (1/2) Le format d’encodage des caractères des pages HTML est par défaut : UTF-8 (format américain). Il existe deux codages pour ajouter les caractères spéciaux (comme exemple le é, ç, à ..) : • L’un ISO en format numérique : &#code; • Le 2ème spécifique à HTML s’écrit : &nom; oSyntaxe : & + lettre + abréviation + ; oExemple : Pour le cas de é : é 38 Les caractères spéciaux (2/2) Caractère Code ISO Abréviation HTML À À À è è è é é é î î î ñ ñ ñ > › > < ‹ < ± ± ± ƒ ƒ ß ß ß ç ç ç 39 Les balises de liste  La liste ordonnée.  La liste non ordonnée.  La liste de définition. 40 Listes ordonnée 41 <ol> <li> article 1 </li> <li> article 2 </li> </ol> Résultat : 1. article 1 2. article 2 TYPE = "1/A/a/I/i" Liste non ordonnée 42 <ul> <li> article 1 </li> <li> article 2 </li> </ul> Résultat : • article 1 • article 2 TYPE = "disc/circle/square" Liste de définition 43 <dl> <dt>Terme</dt> <dd>Définition</dd> </dl> • Résultat : Terme définition Exercice : Listes • Villes marocaines 1. Casablanca a. uploads/Ingenierie_Lourd/ cours1-web-pdf.pdf