Remerciez-le!

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

Introduction à la programmation web École Marocaine des Sciences de l'Ingénieur

Introduction à la programmation web École Marocaine des Sciences de l'Ingénieur (EMSI) Hamza Jamal Année Universitaire 2021/2022 1 Email: hamzajamal.phd@gmail.com 2 Architecture web de base Année Universitaire 2021/2022 Internet Internet Navigateur client Serveur web Demande de page Demande de page Envoi de la page Envoi de la page 3 Architecture web de base Année Universitaire 2021/2022 Serveur web: • Crée la page demandée pour le client en exécutant des scripts PHP. • Résultat de l’exécution : page HTML envoyée par le serveur au navigateur (réponse HTTP). Navigateur client: • Exemples : Chrome, Firefox, Internet explorer… • Interprète et affiche la page Web. • Demande la page Web au serveur (requête HTTP). • Exemple: Apache HTTP Server 4 Année Universitaire 2021/2022 HyperText Markup Language HTML 5 Année Universitaire 2021/2022 Introduction au HTML • HTML est le langage de balisage standard pour la création des pages Web: HTML décrit la structure d'une page Web. HTML consiste en une série d'éléments. Les éléments HTML indiquent au navigateur comment afficher le contenu. Les balises HTML représentent des éléments de contenu tels que "titre", "paragraphe", "tableau", etc. Les navigateurs n'affichent pas les balises HTML, mais les utilisent pour afficher le contenu de la page. 6 Année Universitaire 2021/2022 Introduction au HTML • Versions de HTML: Version Année HTML 1 1992 HTML 2 1994 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 7 Année Universitaire 2021/2022 Introduction au HTML • Structure de la page HTML: <html> </html> <head> </head> <title> Titre de la page </title> <body> le contenu de la page </body> <html>: est l'élément racine d'une page HTML. <head>: représente l’en-tête du document. Elle peut contenir diverses informations (feuilles de styles, titre, encodage de caractères, . . . ). <title>: spécifie un titre pour le document. <body>: contient le contenu de la page visible. 8 Année Universitaire 2021/2022 Balises HTML • Les balises HTML sont des noms d’éléments entourés de crochets: <balise> le contenu va ici ... </ balise > • Les balises HTML viennent normalement par paires, comme <p> et </p>. • La première balise dans une paire est la balise de début, la deuxième balise est la balise de fin. • La balise de fin est écrite comme la balise de début, mais avec une barre oblique insérée avant le nom de la balise. 9 Année Universitaire 2021/2022 Balises HTML  Chaque fois que vous avez des balises HTML dans d'autres balises HTML, vous devez d'abord fermer la balise la plus proche: Exemple: • Balises imbriquées 10 Année Universitaire 2021/2022 Balises HTML 1. Balises de Formatage de texte: • <br> ligne suivante • <b> Texte en gras </b> • <i> Italique </i> • <u> Souligné </u> • <p> Nouveau paragraphe </p> 11 Année Universitaire 2021/2022 Balises HTML 2. Les en-têtes : • Les pages Web sont généralement organisées en sections avec des en-têtes. • Pour créer un en-tête, utilisez l'expression <hn>…. </ hn> où n est un nombre compris entre 1 et 6. • Le 1 correspond à l'en-tête de taille la plus grande alors que le 6 correspond à la plus petite taille. 12 Année Universitaire 2021/2022 Balises HTML 3. Les commentaires: • Les commentaires sont des notes dans le code HTML qui expliquent les fonctionnalités importantes du code. • Les commentaires n'apparaissent pas sur la page Web, mais constituent une référence utile pour l'auteur de la page et les autres programmeurs. • Pour créer un commentaire on utilise la balise suivante:  13 Année Universitaire 2021/2022 Balises HTML 4. Images : • Les images sont définies avec la balise <img>. • La balise <img> est vide, elle ne contient que des attributs et n’a pas de balise de fermeture. <img src="img_fleur.jpg" alt=" Fleurs" width="500" height="600"> • Les attributs width et height sont utilisés pour ajuster la taille d’une image. • L'attribut alt est utilisé pour définir un texte de remplacement pour une image s'il ne peut pas être affichée. 14 Année Universitaire 2021/2022 Balises HTML 5. Liens : • Un lien permet de passer d'une page à une autre, d'envoyer des courriels, de télécharger des fichiers, etc. • Dans le lien ci-dessus, "http://www.emsi.ma/" est la destination. La destination spécifie l'adresse de la page Web ou du fichier auquel l'utilisateur aura accès lorsqu'il cliquera sur le lien. • Les liens sont définis avec la balise HTML <a>: <a href="http://www.emsi.ma/">EMSI</a> 15 Année Universitaire 2021/2022 Balises HTML 6. Listes Ordonnées : • Une liste ordonnée c’est une liste d'éléments numérotés. • Pour créer une liste ordonnée, on écrit: <ol> <li> étape 1. </li> <li> étape 2. </li> <li> étape 3. </li> </ol> 16 Année Universitaire 2021/2022 Balises HTML 7. Listes non ordonnées: • Une liste non ordonnée est une liste d'éléments à puces. • Pour créer une liste non ordonnée, on écrit: <ul> <li> Premier élément de la liste </li> <li> Deuxième élément de la liste </li> <li> Troisième élément de la liste </li> </ul> 17 Année Universitaire 2021/2022 Balises HTML 8. Les tableaux: • Les tableaux en HTML sont utilisés pour afficher des lignes et des colonnes de données. • Un tableau est défini avec la balise <table> . • Chaque ligne du tableau est définie avec la balise <tr>. Un en-tête de tableau est défini avec la balise <th>. Une cellule est définie avec la balise <td>. 18 Année Universitaire 2021/2022 Balises HTML 8. Les tableaux: <table> <tr> <th>Nom</th> <th>Prénom</th> <th>Age</th> </tr> <tr> <td>HAMIDI</td> <td>SAID</td> <td>50</td> </tr> </table> • Exemple: 19 Année Universitaire 2021/2022 Exercice : Site web statique en HTML L’objectif de cet exercice est de créer votre premier site web pour la société Innosys, spécialisée dans le développement des applications informatiques. Vous créez un dossier nommé site_html contenant 4 pages html que vous nommerez : • index.html : contient un menu de liens qui dirigent l’internaute vers les autres pages. • propos.html : donne une présentation de l’entreprise. • produits.html : visualise les produits de l’entreprise. • contact.html : affiche le contact de l’entreprise. Les pages propos.html, produits.html, et contact.html contiennent un lien nommé "Retour", qui dirige l’internaute vers la page d’accueil. 20 Année Universitaire 2021/2022 Exercice : Site web statique en HTML 1) Page d’accueil : 21 Année Universitaire 2021/2022 Exercice : Site web statique en HTML 2) Page de présentation : 22 Année Universitaire 2021/2022 Exercice : Site web statique en HTML 3) Page des produits : 23 Année Universitaire 2021/2022 Exercice : Site web statique en HTML 4) Page de contact : uploads/Litterature/ chapitre-1 24 .pdf