Spaceuit


Informatique Appliquée

Fillière Intelligence Artificielle

Automne 2024

Ali El Hourch
[email protected]

Guide
Nouveau
Assistant AI Visual Studio Code Google Classroom Whatsapp Whatsapp Discord Discord
Module 1: Probabilités Et Statistiques Module 2: Architecture Des Ordinateurs Module 3: Structure De Données En C Module 4: Système d'exploitation 1 Module 5: Programmation Web 1 Module 6: Langues Etrangéres Module 7: Compétences Culturelles & Artistiques

Semestres

Automne 2024

Tronc Communs

Informatique Appliquée

Langage HTML

Généralités

  • HTML = Hyper-Text Markup Language.
  • HTML est un langage de présentation basé sur les balises (markup) permettant de créer du texte contenant des liens.
  • Un document HTML contient 2 types de texte (ASCII) :
    • Données utilisateurs
    • Balise
  • Le document HTML sera interprété sur un navigateur pour obtenir la page web.
  • Balise HTML = texte entre < et >
  • Le langage HTML offre aux utilisateurs un ensemble de balises prédéfinies.
  • Une balise indique au navigateur ce qu'il doit faire.
  • La casse des caractères (maj / min) n'est pas considérée par les versions du HTML (4.0 et 5.0).
  • Les balises sont non-visibles sur le navigateur.
  • Syntaxe balise :
    • <balise attrib="Val" opt> contenu </balise>

    Remarque

    • Eviter le chevauchement des balises

    Exemple

    • <i> ... <b> ... </b> ... </i> ✔
    • <i> ... <b> ... </i> ... </b> ✖
  • 3 parties dans le document HTML:
    1. Prologue : informations sur le langage utilisé, version, code service, ...
    2. Entête du document : <head> ... </head>
    3. Corps du document : <body> ... </body>

      4. Exemple

      <html lang="fr">
    <head> ... </head>
    <body> ... </body>
</html>

Balises de Structures

  • Permettant de donner la structure de la page:
    1. <html> ... </html> : racine du document
    2. <head> ... </head> : entête (titre de la page, barre du titre navigateur)
    3. <title> ... </title> : titre de la page
    4. <body> ... </body> : corps d'une page

      5. Exemple

      <html lang="fr">
    <head>
        <title> Titre </title>
    </head>
    <body>
        <p> Bonjour! </p>
    </body>
</html>

Balises de Structures

  • Quelques balises de formatage:
    • <b> : gras → Bonjour
    • <i> : italique → Bonjour
    • <u> : soulignement de texte → Bonjour
    • <s> : barré de texte → Bonjour
    • <sub> : texte en indice → O2
    • <sup> : texte en exposant → x2
    • <br> : retour chariot
    • <centre> : centrer un texte
  • HTML propose 6 niveaux de titres aux utilisateurs :
    • <h1> ... </h1> : Supérieur
    • <h2> ... </h2> : Plus petit que h1
    • <h3> ... </h3> : Plus petit que h2
    • <h4> ... </h4> : Plus petit que h3
    • <h5> ... </h5> : Plus petit que h4
    • <h6> ... </h6> : Plus petit que h5

      • H1

      H2

      H3

      H4

      H5
      H6
  • <hr> : Ligne séparatrice →

    • Remarque

    • <hr> n'a pas de balise de fin.
  • <PRE> ... </PRE> : texte préformaté
    • ⇒ Le navigateur respecte les caractères d'espace.

      • Exemple

        <p>Hello,        World!</p> → Hello, World!
        <pre>Hello,        World!</pre> → Hello,        World!
  • <span> ... </span> : formatage en ligne (pour plusieurs caractères)

      • Exemple

      <b>Hello, <span><u>World<u></span></b> → Hello, World
  • <div> ... </div> : formatage mode bloc (plusieurs lignes)
  • <font size="..." color="..." face="..."> ... </font>
    • Balise permettant de proposer la couleur, la taille, la police d'un texte.

      • Exemple

        <font size="10px" color="red"> Hello </font> → Hello

Balise de liste

  • Liste non numérotée :
    • <ul> ... </ul> : permet de créer une liste non numérotée.

    • <li> ... </li> : crée un élément de la liste.

      • Remarque

      • </li> est facultatif.

      Exemple

      <ul type="square">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>
      • Apple
      • Orange
      • Banana
  • Liste numérotée :
    • <ol> ... </ol> : permet de créer une liste numérotée.

    • <li> ... </li> : crée un élément de la liste.
    • Attributs:

      • Remarque

      • </li> est facultatif.

      Exemple

      <ol>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ol>
      1. Apple
      2. Orange
      3. Banana
    • Les types d'une liste numérotée sont: a,A,1,I,...

Les Images

    <img>: Permet d'inserer une image dans une page web.

    Syntaxe :

    <img 
    src="Adresse de l'image obligatoire" 
    width="Longueur de l'image en % ou en pixel" 
    height="Hauteur de l'image" 
    border="Ajouter une bordure autour de l'image" 
    alt="Texte de remplacement (Description de l'image)" 
    align="Top,Middle,Bottom ou Left,Right"
>

    Top, Middle, Bottom (Sommet, Centre, Bas): Pour aligner le texte adjacent au l'image.
             Left, Right (Gauche, Droite): Pour aligner l'image

Balise d'hyperliens:

  • <a href="URL ou adresse locale">...</a>
    • Permet de créer un lien hypertexte vers une destination.

    3 Types de liens :

    1. Lien local : La destination se trouve dans le même dossier.
    2. Lien externe : La destination est éloignée (sur un autre poste) accessible à travers une adresse URL.
    3. Lien mixte : La destination se trouve dans le même poste dans un autre dossier.

    2 Types d'adressage à utiliser :

    1. Adressage absolu : le chemin de la destination est à partir de la racine (disque dur).
      ex: Disque\Cours1\. . .\fichier.html
    2. Adressage relatif : le chemin est à partir du dossier courant.
      ex: fichier.html

      3. Remarque

      • Il est préférable d'utiliser l'adressage relatif dans vos liens pour la portabilité du site web.

Ancres

  • Ancre = position créée (ancre) dans un fichier pour l'appeler dans un lien.

    • Syntaxe

    • Création de l'ancre : <a name="pt"> Position </a>
    • Appel de l'ancre dans <a href="#NameId"> #pt3 lien</a>

Tableaux

  • Tableaux pour HTML :
    • HTML (HyperText Markup Language) est un moyen de présentation pour structurer des données.
  • Les balises permettant la création du tableau en HTML :
    • <table> ... </table> : Créer une table
    • <tr> ... </tr> : Créer une ligne de la table
    • <td> ... </td> : Créer une cellule de données d'une ligne
    • <th> ... </th> : Créer une cellule d'en-tête de la première ligne

    Remarque

    • </tr>, </td>, et </th> sont facultatifs.
    • <tr>, <td>, et <th> doivent être appelés entre <table> et </table>.
    • Une ligne de la table est composée de plusieurs cellules.

    Syntaxe

  • Squelette d'un table
    • <table>
    <tr>
        <th> Entête 1 </th>
        <th> Entête 2 </th>
    </tr>
    <tr>
        <td> Cellule 1 </td>
        <td> Cellule 2 </td>
    </tr>
    <tr>
        <td> Cellule 3 </td>
        <td> Cellule 4 </td>
    </tr>
</table>
    Entête 1 Entête 2
    Cellule 1 Cellule 2
    Cellule 3 Cellule 4
  • <caption> ... </caption>: Ajouter la legende de table
  • La balise Table prend également un attribut border="size line_type color"

    • Exemple

    <table border="1 solid black">
    <caption> Tableau </caption>
    <tr>
        <th> Entête 1 </th>
        <th> Entête 2 </th>
    </tr>
    <tr>
        <td> Cellule 1 </td>
        <td> Cellule 2 </td>
    </tr>
    <tr>
        <td> Cellule 3 </td>
        <td> Cellule 4 </td>
    </tr>
</table>
    Tableau
    Entête 1 Entête 2
    Cellule 1 Cellule 2
    Cellule 3 Cellule 4
  • Nous reviendrons plus en détail sur le styles dans le chapitre CSS.

Fusion de cellules

  • Une cellule peut avoir plusieurs lignes comme largeurs de pluseirs colonnes.

    • Syntaxe

  • <td rowspan="nombre de lignes"> ... </td>

    • Fusion horizontale

  • Une cellule peut avoir comme largeur plusieurs colonnes.

      • Syntaxe

    • <td colspan="n"> où n est le nombre de colonnes fusionnées.

    Fusion verticale

  • Une cellule peut avoir plusieurs lignes comme hauteur de la cellule.

      • Syntaxe

    • <td rowspan="n"> où n est le nombre de lignes.

    Exemples

    <table border="1 solid black">
    <caption> Tableau </caption>
    <tr>
        <th> Entête 1 </th>
        <th> Entête 2 </th>
    </tr>
    <tr>
        <td colspan="2"> Cellule 1 </td>
    </tr>
    <tr>
        <td> Cellule 2 </td>
        <td> Cellule 3 </td>
    </tr>
</table>
    Tableau
    Entête 1 Entête 2
    Cellule 1
    Cellule 2 Cellule 3 
    <table border="1 solid black">
    <caption> Tableau </caption>
    <tr>
        <th> Entête 1 </th>
        <th> Entête 2 </th>
    </tr>
    <tr>
        <td rowspan="2"> Cellule 1 </td>
        <td> Cellule 2 </td>
    </tr>
    <tr>
        <td> Cellule 3 </td>
    </tr>
</table>
    Tableau
    Entête 1 Entête 2
    Cellule 1 Cellule 2
    Cellule 3

Cadres-Frames

  • HTML permet aux utilisateurs de diviser l’écran de navigation en parties appelées frames ou cadres qui permettent d’afficher plusieurs pages web sur un même site de navigation.
  • <frameset> ... </frameset>
    permet de faire la division de l’écran en cadres.

    • Deux types de division :

    1. Division horizontale
      • En utilisant l’attribut rows (lignes)
      • Exemple : <frameset rows="liste">
      • Où liste = taille des cadres en pixels ou pourcentage % ou *
        • <frameset rows="30%, 30px, *">
      • Division en 3 cadres de longueur 30%, 30px et le reste.
    2. Division verticale
      • En utilisant l’attribut cols
      • <frameset cols="30%, 30px, *">
  • On obtient deux types de sorties :
    • <frameset> : faire des divisions imbriquées.
    • <frame> : pour affecter une page web à un cadre.

    Syntaxe :

    • <frame name="Nom" src="Adresse/Page du cadre-web">

    Remarque :

    • Le nom du cadre (name de <frame>) peut être appelé dans un lien hypertexte <a> pour afficher le contenu de ce lien en utilisant l’attribut target.

    Syntaxe :

    • <a href="src" target="fichier.html">
  • Le page web qui divise l’écran en cadres n’a pas de contenu (pas de <body>).

    • Exemple

    <!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Exemple de Division de Page avec Frameset</title>
    </head>
    <frameset rows="10%, 90%">
        <frame name="frame1" src="frame1.html">
        <frameset cols="20%, 80%">
            <frame name="frame2" src="frame2.html">
            <frame name="frame3" src="frame3.html">
        </frameset>
    </frameset>
</html>
    Diagram illustrating division of the screen

Formulaires

  • Formulaire permet d'ajouter une interactivité entre le client et la page web.
  • Les formulaires sont utilisés dans des sites tels que:
    • Inscription dans une formation en ligne, achat d'un site, réservation dans un hôtel, etc.
  • Les données du formulaire seront traitées par un script côté serveur (par ASP ou PHP) sur une base de données.
  • Pour créer un formulaire on fait l'appel à la balise
    • <form> ... </form>
  • Plusieurs attributs avec <form>
    • Attributs Description
    Action Adresse url du script côté serveur (php)
    Method Méthode d'envoi de formulaire 2 valeurs:
    • get : Pour des petits formulaires (Environ 2 000 caractères) ou des requêtes où les données peuvent être exposées (recherche, filtres).
    • post : Pour des formulaires plus lourds (Pas de limite) ou des données sensibles, comme les mots de passe ou des fichiers.
    Target Le target dans un formulaire HTML spécifie où afficher la réponse du serveur après l'envoi du formulaire. Voici quelques options courantes pour l'attribut target :
    • _self (valeur par défaut) : La réponse s'affiche dans la même fenêtre ou onglet.
    • _blank : La réponse s'affiche dans un nouvel onglet ou une nouvelle fenêtre. C'est l'option que nous avons utilisée dans l'exemple suivant.
    • _parent : La réponse s'affiche dans la fenêtre parente (utile dans les cas où vous avez des cadres imbriqués).
    • _top : La réponse remplace la fenêtre principale, en brisant toute hiérarchie de cadres si elle existe.
    Name Nom du formulaire
    Enctype Type de fichier attaché
    Accept Les extensions des fichiers acceptés
    Accept-charset Les caractères acceptés: Francais, Anglais, ...

    Exemple

    <form action="submit.php" method="post" target="_blank">
        
    ...

</form>
  • Différents champs de contrôle dans un formulaire:
    • Zone de saisi: ligne texte, ligne password ou multilignes.
    • Zone à coucher
    • Boutons
    • Zone liste
    • Boutons de commandes: Validation, initialisation, script

Zone de texte de ligne

    Syntaxe

      <input 
    type="text" 
    name="Nom" 
    id="identif"
     value="valeur par défaut" 
    size="Taille maximal de input en fonction de caractères"
    maxlength="Nombre maximal des caractères tapés" 
/>

    Exemple

    <form action="submit.php" method="post">

<input type="text" name="id_text" id="identif" value="valeur par défaut" size="20"
       maxlength="20"/>

</form>
    Note: La taille de l'input peut ne pas ressembler exactement à la taille de 20 caractères en raison du style de la page.

Zone password

    Syntaxe

    <input type="password" name="Nom" id="identif" value="valeur par défaut" size="Taille maximal de input en fonction de caractères"
       maxlength="Nombre maximal des caractères tapés" />

    Exemple

    <form action="submit.php" method="post">

    <input type="password" name="pass" id="id_pass" value="valeur par défaut" size="20" maxlength="20"/>

</form>
    Note: La taille de l'input peut ne pas ressembler exactement à la taille de 20 caractères en raison du style de la page.

Zone de texte de plusieurs lignes (Zone commentaires)

  • Saisir un texte de plusieurs lignes et colonnes.

    • Syntaxe

    <textarea name="nom" cols="Nbr colonnes" rows="Nbr lignes">Texte par défaut</textarea>

    Exemple

    <form action="submit.php" method="post">
    <textarea name="commentaire" cols="30" rows="5">Texte par défaut</textarea>
</form>
    Note: La taille de zone peut ne pas ressembler exactement à la nombre de colonnes en raison du style de la page.

Envoi de fichiers

  • Le navigateur offre au client un bouton parcourir permettant de chercher le fichier à attacher au formulaire.
  • L'attribut enctype dans une balise <form> spécifie comment les données du formulaire sont encodées avant d'être envoyées au serveur. Lorsqu'il s'agit de fichiers (comme avec un champ de type file), il est indispensable d'utiliser l'encodage multipart/form-data
  • Ce type d'encodage permet de gérer l'envoi de fichiers ainsi que de texte simultanément. Chaque élément du formulaire est traité séparément, ce qui permet au fichier d'être envoyé de manière adéquate sans corrompre les autres données du formulaire.

    • Syntaxe

    <input type="file" name="nom_du_fichier" id="identif">

    Exemple

    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
</form>

Cases à coucher

  • Permettant d'offirer un ensemble de choix au client sous forme de cases à coucher.

    • Syntaxe

    <input type="checkbox" name="case" id="case1" value="valeur_case" [checked]>

    Exemples

    <form action="submit.php" method="post"> 
    <input type="checkbox" name="option1" id="option1" value="Option1"> Option 1    
    <input type="checkbox" name="option2" id="option2" value="Option2" checked> Option 2
</form>
    Option 1
    Option 2

    Remarque

  • Checked: Coché par défaut (facultatif)
  • La valeur de l'attribut value est la donnée envoyé au serveur et non pas le texte devant la case.
  • Les cases d'une liste doivent avoir des nombs différents.

Boutons d'options

  • Offir au client une liste des choix sous forme une liste d'options.

    • Syntaxe

    <input type="radio" name="Nom" id="identifiant" value="...">

    Exemple

    <form action="submit.php" method="post">
    
    <input type="radio" name="module" id="option_bouton" value="ProgrammationWeb"> Programmation Web
    <br>
    <input type="radio" name="module" id="option_bouton" value="Structures"> Structures des Données
    
</form>
    Programmation Web
    Structures des Données

    Remarque

  • Le client doit prendre un seul choix dans la liste.
  • Les options dans une liste doivent partir de la même name
  • La valeur de value est la donnée envoyé lors de la validation.

Liste d'options

  • Offrir au client un eliste composée des choix proposées

    • Syntaxe

    <select name="..." id="...">
    
    <option value="..." [selected]>...</option>
    
</select>

    Exemple

    <form action="submit.php" method="post">
    <select name="module" id="module_select">
        <option value="ProgrammationWeb">Programmation Web</option>
        <option value="Structures" selected>Structures des Données</option>
    </select>
</form>

    Remarque

  • Pour nommer une liste il faur appeler name avec la balise <select>
  • Pour la valeur choisie, il faur appeler l'attribut value avec l'option <option>

Boutons de commande

  1. Bouton de validation

    • Permet de valider de formulaire = Envoyer les données de formulaire au serveur.

      • Syntaxe

      <input type="submit" name="...">

      Exemple

      <form action="submit.php" method="post">
    <input type="text" name="nom" value="Votre Nom">
    <br>
    <input type="submit" name="submit_btn">
</form>

  2. Bouton d'initialisation

    • Permet de revenir aux valeurs par défaut des champs de contrôle.

      • Syntaxe

      <input type="reset" name="...">

      Exemple

      <form action="submit.php" method="post">
    <input type="text" name="nom" value="Votre Nom">
    <br>
    <input type="reset" name="reset_btn">
</form>

  3. Bouton script

    • Permet d'exécuter des scripts cotés clients pour fermer le contrôle de la saisie par le client.

      • Syntaxe

      <input type="button" name="..." onclick="verif()"/>

      Remarque

    • Le verifi() est une fonction javascript. Plus de ca dans le chapitre Jquery.

Exemple d'une formulaire

    <form>
    <input type="text" name="nom_etudiant" value="">
    <br/>

    <select name="genre">
        <option  value="homme">Homme</option>
        <option  value="femme">Femme</option>
    </select>
    <br>
    
    <input type="radio" name="module"  value="ProgrammationWeb"> Programmation Web
    <br>

    <input type="radio" name="module"  value="Structures"> Structures des Données
    <br>

    <input type="radio" name="module"  value="Algorithmes"> Algorithmes
    <br>

    <input type="reset" name="reset_button">
    <br>

    <input type="submit" name="submit_btn">
</form>


    Programmation Web
    Structures des Données
    Algorithmes