Scribd Logo
Importer

Bienvenue sur Scribd !

  • Chapitre 1

    Transféré par

    Imad Ettamen
    52 vues23 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    52 vues23 pages

    Chapitre 1

    Transféré par

    Imad Ettamen

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 23

    École Marocaine des Sciences de

    l'Ingénieur (EMSI)

    Introduction à la
    programmation web

    Hamza Jamal

    Email: hamzajamal.phd@gmail.com

    Année Universitaire 2021/2022 1


    Architecture web de base

    Demande de page Demande de page

    Internet
    Envoi de la page
    Navigateur client Envoi de la page

    Serveur web

    Année Universitaire 2021/2022 2


    Architecture web de base

    Navigateur client:

    • Demande la page Web au serveur (requête HTTP).

    • Interprète et affiche la page Web.

    • Exemples : Chrome, Firefox, Internet explorer…

    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).
    • Exemple: Apache HTTP Server

    Année Universitaire 2021/2022 3


    HTML

    HyperText Markup
    Language

    Année Universitaire 2021/2022 4


    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.

    Année Universitaire 2021/2022 5


    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

    Année Universitaire 2021/2022 6


    Introduction au HTML

    • Structure de la page HTML:

    <html>

    <head> <html>: est l'élément racine d'une page HTML.


    <title> Titre de la page </title> <head>: représente l’en-tête du document.
    Elle peut contenir diverses informations
    </head> (feuilles de styles, titre, encodage de
    caractères, . . . ).
    <body>
    <title>: spécifie un titre pour le document.
    le contenu de la page
    <body>: contient le contenu de la page
    </body> visible.

    </html>

    Année Universitaire 2021/2022 7


    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.

    Année Universitaire 2021/2022 8


    Balises HTML

    • Balises imbriquées

     Chaque fois que vous avez des balises HTML dans d'autres balises
    HTML, vous devez d'abord fermer la balise la plus proche:

     Exemple:

    Année Universitaire 2021/2022 9


    Balises HTML

    1. Balises de Formatage de texte:

    • <b> Texte en gras </b>

    • <i> Italique </i>

    • <u> Souligné </u>

    • <p> Nouveau paragraphe </p>

    • <br> ligne suivante

    Année Universitaire 2021/2022 10


    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.

    Année Universitaire 2021/2022 11


    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:

    <!-- Ceci est un commentaire -->

    Année Universitaire 2021/2022 12


    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.

    Année Universitaire 2021/2022 13


    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.

    • Les liens sont définis avec la balise HTML <a>:

    <a href="http://www.emsi.ma/">EMSI</a>

    • 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.

    Année Universitaire 2021/2022 14


    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>

    Année Universitaire 2021/2022 15


    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>

    Année Universitaire 2021/2022 16


    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>.

    Année Universitaire 2021/2022 17


    Balises HTML

    8. Les tableaux:

    • Exemple:

    <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>

    Année Universitaire 2021/2022 18


    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.

    Année Universitaire 2021/2022 19


    Exercice : Site web statique en HTML

    1) Page d’accueil :

    Année Universitaire 2021/2022 20


    Exercice : Site web statique en HTML

    2) Page de présentation :

    Année Universitaire 2021/2022 21


    Exercice : Site web statique en HTML

    3) Page des produits :

    Année Universitaire 2021/2022 22


    Exercice : Site web statique en HTML

    4) Page de contact :

    Année Universitaire 2021/2022 23

    Vous aimerez peut-être aussi