Remerciez-le!

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

Mickaël Martin Nevot 18/10/2022 10:59 Cette œuvre de Mickaël Martin Nevot est m

Mickaël Martin Nevot 18/10/2022 10:59 Cette œuvre de Mickaël Martin Nevot est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage à l'Identique 3.0 non transposé. Cette œuvre de Mickaël Martin Nevot est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage à l'Identique 3.0 non transposé. V1.12.1 CM 1 : Rappels Web, HTML, CSS et JavaScript Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 I. Présentation du cours II. Rappels Web, HTML, CSS et JavaScript III. PHP IV. PHP « avancé » PHP – Développement Web Mickaël Martin Nevot Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Théâtre Web Pièce de théâtre Actes Livret Producteur Scène Metteur en scène Public Auteur Site Web consulté Pages Web Code source des pages Web Web Écran de l’ordinateur Navigateur Internautes Webmaster Plantons le décor ! PHP – Développement Web Mickaël Martin Nevot Comme au théâtre, le résultat final diffère selon le metteur en scène. L’auteur doit veiller à ce que le metteur en scène respecte le livret et ne dénature pas l’œuvre ! 1/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 1970, premiers pas : ARPAnet Courrier électronique (1972 : Ray Tomlinson) FTP TCP/IP (Transmission Control Protocol / Internet Protocol) 1980, Internet : ARPAnet devient Inter Networking (Internet) Historique PHP – Développement Web Mickaël Martin Nevot 2/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 1990, début du Web statique (Tim Berners-Lee) : HTTP (hyper text transfer protocol) HTML/XHTML (extensible hypertext markup language) Historique PHP – Développement Web Mickaël Martin Nevot Client Serveur Internet Page HTML 2 Interprétation HTML par le navigateur 3 Requête HTTP 1 3/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Internet 1995, le Web orienté client : JavaScript Historique PHP – Développement Web Mickaël Martin Nevot Client Serveur Page HTML Requête HTTP 1 2 Interprétation HTML par le navigateur 3 Exécution JavaScript 4 4/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Internet 2000, le Web orienté serveur : PHP (hypertext preprocessor) Base de données Historique PHP – Développement Web Mickaël Martin Nevot Client Serveur Requête HTTP Page HTML 1 Interprétation HTML par le navigateur Exécution JavaScript Base de données Échange de données PHP/ Base de données Exécution PHP 2 3 4 5 6 7 5/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Internet 2005, le compromis client-serveur : CSS (cascading style sheets) DOM (document object model) Historique PHP – Développement Web Mickaël Martin Nevot Client Serveur Requête HTTP Page HTML 1 Interprétation HTML/CSS par le navigateur Exécution JavaScript Base de données Échange de données PHP / Base de données Exécution PHP 2 3 4 5 6 7 6/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Internet 2010, les tendances du Web 2.0 : Ajax (asynchronous JavaScript and XML) Historique PHP – Développement Web Mickaël Martin Nevot Client Serveur Requête HTTP 1 Interprétation HTML/CSS par le navigateur Exécution JavaScript Base de données Échange de données PHP / Base de données Exécution PHP 10 Page HTML Moteur Ajax Données serveur HTTP Ajax 9 11 8 12 7 6 5 2 3 4 7/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 1970 : premiers pas 1980 : Internet 1990 : début du Web statique 1995 : le Web orienté client 2000 : le Web orienté serveur 2005 : le compromis client-serveur 2010 : les tendances du Web 2.0 Historique : récapitulatif PHP – Développement Web Mickaël Martin Nevot 8/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Qu’est-ce qu’Internet ? Retrouvez cette carte simplifiée, ainsi qu’une plus complète, en ligne sur le site Web de l’enseignant PHP – Développement Web Mickaël Martin Nevot Internet ≠ Web : Internet contient le Web, les e-mails, les messageries instantanées, etc. 9/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Première page Web : http://www.w3.org/History/19921103- hypertext/hypertext/WWW/TheProject.html Exemple de site Web des années 1990 : http://themostamazingwebsiteontheinternet.com Les Horribles Cernettes (premier groupe du Web) Premières pages Web PHP – Développement Web Mickaël Martin Nevot 10/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 WorldWideWeb : Premier navigateur PHP – Développement Web Mickaël Martin Nevot 11/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Évolution du Web et des navigateurs Retrouvez cette infographie en ligne sur le site Web de l’enseignant PHP – Développement Web Mickaël Martin Nevot 12/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 HTML CSS Fond - Contenu (textes, liens, images, etc.) Forme - Apparence (agencement, déco., couleur, etc.) Page Web ? PHP – Développement Web Mickaël Martin Nevot 13/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Extension(s) de fichier :.html (ou .htm) HTML : Langage de description de données (≠ programmation) Utilisé pour créer le contenu des pages Web Langage balisé XHTML : Même langage que HMTL Respect de certaines règles syntaxiques HTML5 / X/HTML5 : Dernière version de HTML/XHTML HTML PHP – Développement Web Mickaël Martin Nevot Normalisation 2014 14/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Balise simple : <br> Balise double (paire de balises, ouvrante et fermante) : <title>Titre de la page</title> Attribut : <html lang="fr"></html> <meta charset="utf-8"> Élément : Ensemble de données délimité par une balise double Balises PHP – Développement Web Mickaël Martin Nevot 15/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Ordre d’imbrication des balises PHP – Développement Web Mickaël Martin Nevot <balise1> … </balise1> <balise2> … </balise2> <balise1> … <balise2> </balise1> … </balise2> Correct Incorrect Une bonne indentation permet d’éviter la plupart des erreurs d’imbrication ! <balise1> … <balise2> … </balise2> … </balise1> 16/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Non interprétés par le navigateur Visibles dans le code source Exemple :    Commentaires HTML PHP – Développement Web Mickaël Martin Nevot 17/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 <!DOCTYPE html> <html lang="fr"> <head> <title>Titre de la page</title> <meta charset="utf-8"> </head> <body>  </body> </html> Page HTML5 minimale PHP – Développement Web Mickaël Martin Nevot 18/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 <!DOCTYPE html> <html lang="fr"> <head> <title>Titre de la page</title> <meta charset="utf-8"> </head> <body>  </body> </html> Page HTML5 minimale PHP – Développement Web Mickaël Martin Nevot DTD (document type definition) du document (version de HTML utilisée) Page HTML Informations générales sur la page (invisible) Partie visible de la page HTML Encodage du fichier Titre de la page (visible dans le navigateur) 19/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Block Inline <p></p> <hx></hx> (x : de 1 à 6) <pre></pre> <blockquote></blockquote> <div></div> <iframe></iframe> <header></header> <footer></footer> <nav></nav> <article></article> <aside></aside> <table></table> <ol></ol> <ul></ul> <dl></dl> <form></form> <option></option> <br> <strong></strong> <em></em> <code></code> <a></a> <img> <span></span> <input> <textarea></textarea> <select></select> Balises essentielles PHP – Développement Web Mickaël Martin Nevot <html></html> <head></head> <body></body> <title></title> <link> <script></script> <meta> <tr></tr> <td></td> <li></li> <audio></audio> <video></video> Spéciales Block : bloc. Génère un retour à la ligne Inline : à l’intérieur d’une balise block. Pas de retour à la ligne Il en existe d’autres ! 20/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Sans CSS Avec CSS CSS PHP – Développement Web Mickaël Martin Nevot 21/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 CSS PHP – Développement Web Mickaël Martin Nevot 22/45 Présentation du cours > Rappels Web, HTML, CSS et JavaScript > PHP > PHP « avancé » V1.12.1 Évolution des sites Web de 1996 à 2011 Retrouvez cette infographie en ligne sur le site Web de l’enseignant PHP – Développement Web Mickaël uploads/Litterature/ s02-cm1-rappels-web-html-css-javascript.pdf