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

Atelier HTML

Exercice 1

  • Donner le code HTML permettant de créer la page Web au-dessous contenant les éléments suivants :
    • Le titre de la page « Exercice 1 »
    • Le titre « Programme Filière SMI », est de type H1 en bleu, taille 18 et centré,
    • Une ligne séparatrice,
    • Une liste imbriquée comme indiquée dans la page au-dessous.
    Conseils
    Structure HTML
    • Commencez avec <!DOCTYPE html> et utilisez les balises <html>, <head>, et <body>.
    Titre & En-tête
    • Utilisez <title> pour le titre de la page et <h1> pour les titres principaux.
    Style du Texte
    • Utilisez <font color="..."> pour la couleur et <font size="..."> pour la taille du texte.
    Alignement
    • Utilisez <center> pour centrer du contenu (même si CSS est préféré en HTML moderne).
    Ligne de séparation
    • Utilisez une balise <hr> pour insérer une ligne horizontale sous les titres, afin de séparer la section des titres de la liste des cours.
    Listes des semestres
    • Utilisez une liste ordonnée (<ol type="I">) pour afficher les semestres en chiffres romains. Les matières sont listées avec des balises <i> dans chaque semestre. Utilisez une sous-liste non ordonnée (<ul>) pour les sous-thèmes du cours “Programmation Web 1” au Semestre 3. </li>
    Correction 
    <!DOCTYPE html>
<html>
    <head>
        <title> Exercice 1 </title>
    </head>
    <body>
        <h1>
            <center>
                <font size="18" color="Blue">Programme de la filière SMI Semestre 3 et 4</font>
            </center>
        </h1>
        <hr>
        <ol type="I">
            <li> Semestre 3 </li>
            <ol>
                <li> Programmation en langage C </li>
                <li> Architecture des ordinateurs </li>
                <li> Système d'exploitation 1 </li>
                <li> Probabilité et statistiques </li>
                <li> Programmation Web 1 </li>
                <ul>
                    <li> Généralités: Internet et Web </li>
                    <li> Langage HTML </li>
                    <li> Langage CSS </li>
                    <li> Langage JQuery </li>
                </ul>
                <li> Langues Étrangères </li>
            </ol>
            <li> Semestre 4 </li>
            <ol>
                <li> Programmation Web 2 </li>
                <li> Structures des données </li>
                <li> Système d'exploitation </li>
                <li> Programmation Objets </li>
                <li> Algèbre relationnel </li>
                <li> Langues Étrangères </li>
            </ol>
        </ol>
    </body>
</html>

Exercice 2

  • Reprendre la page Web de l’exercice précédent en ajoutant les éléments suivants comme indiqués dans la page Web au-dessous :
    • Le titre de la page « Exercice 2 »
    • Une image du nom « logoIbnTofail.jpg » alignée à gauche de l’écran, de taille 15% en largeur et 20% en hauteur par rapport à la taille de l’écran.
    • Un titre de niveau H4, centré, contenant le texte « Programme de la filière SMI Semestre 3 et 4 » en bleu, de taille 18.
    • Un titre de niveau H3, centré, contenant le texte « Contenu de la filière S3 et S4 » en incluant un lien hypertexte vers le document « Exercice1.html ».
    • Un autre titre de niveau H3, centré, contenant le texte « Contacter professeur », en incluant un lien hypertexte vers l'adresse e-mail du coordonnateur de la filière : [email protected], précédé d’une image du nom « mail8.gif ».
    • Une ligne horizontale sous les titres pour séparer la section des listes.
    • Le liste imbriquée de l'exercice 1.
    Images
    Conseils
    Structure HTML
    • Commencez avec <!DOCTYPE html> et utilisez les balises <html>, <head>, et <body>.
    Image alignée à gauche
    • Utilisez une balise <img> pour afficher l’image logoIbnTofail.jpg, alignée à gauche de la page. Utilisez les attributs width et height en pourcentage pour adapter l’image à la taille de l’écran.
    Titre & En-tête
    • Utilisez <title> pour le titre de la page et <h1> pour les titres principaux.
    Lien mail
    • Créez un second titre <h3> centré avec le texte « Contacter professeur ». Utilisez une balise <a> avec mailto:[email protected] pour permettre aux utilisateurs d’envoyer un e-mail au professeur. Placez une image mail8.gif avant le lien pour le rendre plus visible.
    Style du Texte
    • Utilisez <font color="..."> pour la couleur et <font size="..."> pour la taille du texte.
    Alignement
    • Utilisez <center> pour centrer du contenu (même si CSS est préféré en HTML moderne).
    Ligne de séparation
    • Utilisez une balise <hr> pour insérer une ligne horizontale sous les titres, afin de séparer la section des titres de la liste des cours.
    Listes des semestres
    • Utilisez une liste ordonnée (<ol type="I">) pour afficher les semestres en chiffres romains. Les matières sont listées avec des balises <i> dans chaque semestre. Utilisez une sous-liste non ordonnée (<ul>) pour les sous-thèmes du cours “Programmation Web 1” au Semestre 3. </li>
    Correction 
    <!DOCTYPE html>
<html>
    <head>
        <title>Exercice 2</title>
    </head>
    <body>
        <img align="left" src="logoIbnTofail.jpg" width="15%" height="20%">
        <h4>
            <center>
                <font size="18" color="blue">Programme de la filière SMI Semestre 3 et 4</font>
            </center>
        </h4>
        <h3 align="center">
            <a href="Exercice1.html">Contenu de la filière S3 et S4</a> <br>
            <img align="middle" src="mail8.gif">
            <a href="mailto: [email protected]">Contacter professeur</a>
        </h3>
        <hr>
        <ol type="I">
            <li>Semestre 3</li>
            <ol>
                <li>Programmation en langage C</li>
                <li>Architecture des ordinateurs</li>
                <li>Système d'exploitation 1</li>
                <li>Probabilité et statistiques</li>
                <li>Programmation Web 1</li>
                <ul>
                    <li>Généralités: Internet et Web</li>
                    <li>Langage HTML</li>
                    <li>Langage CSS</li>
                    <li>Langage JQuery</li>
                </ul>
                <li>Langues étrangères</li>
            </ol>
            <li>Semestre 4</li>
            <ol>
                <li>Programmation Web 2</li>
                <li>Structures des données</li>
                <li>Système d'exploitation</li>
                <li>Programmation Objets</li>
                <li>Algèbre relationnelle</li>
                <li>Langues étrangères</li>
            </ol>
        </ol>
    </body>
</html>

Exercice 3

  • Créez une page Web qui présente différentes technologies du web dans un tableau structuré, comme indiqué dans l'image ci-dessous :
    • Le titre de la page doit être « Exercice 3 ».
    • Utilisez une table de largeur 100% avec une bordure de taille 1.
    • Le tableau doit contenir plusieurs lignes, chacune présentant une technologie web avec une image et des descriptions.
    • Chaque image de taille 150 pixels en largeur et 100 pixels en hauteur doit être un lien hypertexte vers une page spécifique ou une ressource en ligne.
      • En cliquant sur la première image « HTML.gif » du tableau, on charge sur le navigateur le fichier « ChapHTML.html » qui se trouve dans le même répertoire.
      • En cliquant sur la deuxième image « CSS.gif » du tableau, on charge sur le navigateur le fichier « ChapCSS.html » qui se trouve dans le même répertoire.
      • En cliquant sur la première image « JavaScript.gif » du tableau, on charge sur le navigateur le fichier « ChapJavaScript.html » qui se trouve dans le même répertoire.
      • En cliquant sur la deuxième image « JQuery.gif » du tableau, on charge sur le navigateur le lien externe : https://fr.wikipedia.org/wiki/JQuery.
    • Utilisez les attributs rowspan et colspan pour fusionner des cellules lorsque c'est nécessaire.
    • Alignez le texte et les images de manière appropriée, en centrant les éléments quand il le faut.
    Images
    Conseils
    Structure HTML
    • Démarrez avec <!DOCTYPE html> et incluez les balises <html>, <head>, et <body>.
    • Utilisez la balise <title> pour définir le titre de la page.
    Création du tableau
    • Utilisez la balise <table> pour créer un tableau.
    • Définissez la largeur du tableau à 100% et la bordure à 1 en utilisant les attributs width et border.
    • Organisez le contenu du tableau en utilisant des lignes (<tr>) et des cellules (<td> ou <th>).
    Fusion de cellules
    • Utilisez l'attribut colspan pour fusionner des cellules horizontalement et rowspan pour fusionner des cellules verticalement.
    Images et liens
    • Insérez des images avec la balise <img> et spécifiez la source avec l'attribut src.
    • Encapsulez les images dans des balises <a> pour en faire des liens hypertextes.
    • Les liens peuvent pointer vers des pages locales (comme ChapHTML.html) ou des URLs externes.
    Alignement du contenu
    • Utilisez l'attribut align dans les balises <td> ou <th> pour aligner le contenu (par exemple, align="center").
    • Pour centrer le texte dans un titre, vous pouvez utiliser la balise <center> ou l'attribut align.
    Correction 
    <!DOCTYPE html>
<html>
    <head>
        <title>Exercice 3</title>
    </head>

    <body>
        <table width="100%" border="1">
            <tr>
                <th colspan="2">
                    <h1>
                        <center>Technologie du Web</center>
                    </h1>
                </th>
            </tr>
            <tr>
                <td align="center" rowspan="2">
                    <a href="ChapHTML.html">
                        <img src="html.png" width="150" height="100">
                    </a>
                </td>
                <td>Langage de présentation</td>
            </tr>
            <tr>
                <td>Langage de création des sites web statiques</td>
            </tr>
            <tr>
                <td align="center" rowspan="2">
                    <a href="ChapCSS.html">
                        <img src="css.png" width="150" height="100">
                    </a>
                </td>
                <td>Langage de création des feuilles de styles</td>
            </tr>
            <tr>
                <td>Séparation du contenu utilisateur et forme de présentation</td>
            </tr>
            <tr>
                <td align="center" rowspan="2">
                    <a href="ChapJavaScript.html">
                        <img src="JavaScript.png" width="150" height="100">
                    </a>
                </td>
                <td>Langage de Script</td>
            </tr>
            <tr>
                <td>Langage pour améliorer l'interactivité entre utilisateur et le site</td>
            </tr>
            <tr>
                <td align="center" rowspan="2">
                    <a href="https://fr.wikipedia.org/wiki/JQuery">
                        <img src="JQuery.png" width="150" height="100">
                    </a>
                </td>
                <td>Bibliothèque des fonctions JavaScript</td>
            </tr>
            <tr>
                <td>Faciliter la programmation en JavaScript</td>
            </tr>
        </table>
    </body>
</html>

Exercice 4

  • Donner le code HTML permettant de diviser la fenêtre du navigateur en cadres comme la page WEB au-dessous. Les pages affichés dans cette fenêtre sont :
    • Entete.html
    • Sommaire.html
    • ChapHTML.html
    • ChapCSS.html
    • ChapJavaScript.html
    • ChapJQuery.html
  • Ces pages se trouve dans le même répertoire.
    • Spécifications
      Entete.html

      Ce page est composé de :

      • Le titre de la page « Entete »
      • Image « logoIbnTofail.jpg » placée dans la marge gauche du document avec comme dimension 150 pixel en largeur et 150 pixel en hauteur.
      • Entête « Technologie du web »: Texte centré en gras et en bleu de taille 7.
      • Un lien hypertexte « Ma boîte » vers une boîte d'adresse : [email protected], centré et devant un texte en gras « Courier Eléctronique du professeur : »
      Sommaire.html

      Ce page est composé de :

      • Le titre de la page « Sommaire »
      • Sommaire : titre H1 centré en noire.
      • Une liste numérotée de lettres romaines contenant les éléments de ce sommaire avec l'effet suivant :
        • Lorsqu'on clique sur « Langage HTML », on charge le contenu du lien dans le cadre du nom « ChapHTML.html ».
        • Lorsqu'on clique sur « Langage CSS », on charge le contenu du lien dans le cadre du nom « ChapCSS.html ».
        • Lorsqu'on clique sur « Langage JavaScript », on charge le contenu du lien dans le cadre du nom « ChapJavaScript.html ».
        • Lorsqu'on clique sur « Langage JQuery », on charge le contenu du lien dans le cadre du nom « ChapJQuery.html ».
      ChapHTML.html

      Ce page est composé de :

      • Le titre de la page « ChapHTML »
      • Langage Web : titre H1 centré en noire.
      • Ligne separatrice
      • Un paragrapghe « HTML = HyperText Markup Language est un langage de présentation .......... »
      ChapCSS.html

      Ce page est composé de :

      • Le titre de la page « ChapCSS »
      • Langage CSS : titre H1 centré en noire.
      • Ligne separatrice
      • Un paragrapghe « CSS = Cascading Style Sheets, est un lange des feuilles de style .......... »
      ChapJavaScript.html

      Ce page est composé de :

      • Le titre de la page « ChapJavaScript »
      • Langage JavaScript : titre H1 centré en noire.
      • Ligne separatrice
      • Un paragrapghe « JavaScript = Est un langage de programmation dynamique complet .......... »
      ChapJQuery.html

      Ce page est composé de :

      • Le titre de la page « ChapJQuery »
      • Langage JQuery : titre H1 centré en noire.
      • Ligne separatrice
      • Un paragrapghe « Jquery = Est la bibliothèque JavaScript la plus utilisée et vous permet de créer des effets dynamiques .......... »
    Images
    Conseils
    Frameset
    • Utilisez <frameset> pour diviser la page en sections, avec rows ou cols pour définir les proportions des frames.
    Imbriquer des frames
    • Placez un <frameset> dans un autre pour diviser une section en plusieurs frames, chacune pointant vers une page source (src="page.html").
    UTF-8
    • Pour afficher correctement les caractères accentués, il est essentiel d'ajouter la balise meta charset="UTF-8" dans la section <head> de votre document. Cela garantit que l'encodage utilisé prend en charge les accents et autres caractères spéciaux.
    Correction
    Entete.html 
      <!DOCTYPE html>
<html>
    <head>
        <title>Entete</title>
    </head>

    <body>
        <img src="logoIbnTofail.jpg" width="150" height="150" align="left">
        <center>
            <b><font color="blue" size="7">Technologie du Web</font></b>
            <br>
            <b>Courier Electronique du professeur :</b>
            <a href="mailto: [email protected]">Ma Boite</a>
        </center>
    </body>
</html>
    Sommaire.html 
      <!DOCTYPE html>
<html>
    <head>
        <title>Sommaire</title>
    </head>

    <body>
        <h1 align="center">Sommaire</h1>
        <ol type="I">
            <li><a href="ChapHTML.html">Langage HTML</a></li>
            <li><a href="ChapCSS.html">Langage CSS</a></li>
            <li><a href="ChapJavaScript.html">Langage JavaScript</a></li>
            <li><a href="ChapJQuery.html">Langage JQuery</a></li>
        </ol>
    </body>
</html>
    ChapHTML.html 
      <!DOCTYPE html>
<meta charset="UTF-8">
<head>
    <title>ChapHTML</title>
</head>
<body>
    <h1 align="center">Langage HTML</h1>
    <hr>
    <p>HTML = HyperText Markup Language est un langage de présentation ..........</p>
</body>
    ChapCSS.html 
      <!DOCTYPE html>
<head>
    <title>ChapCSS</title>
</head>
<body>
    <h1 align="center">Langage CSS</h1>
    <hr>
    <p>CSS = Cascading Style Sheets, est un lange des feuilles de style ..........</p>
</body>
    ChapJavaScript.html 
      <!DOCTYPE html>
<meta charset="UTF-8">
<head>
    <title>ChapJavaScript</title>
</head>
<body>
    <h1 align="center">Langage JavaScript</h1>
    <hr>
    <p>JavaScript = Est un langage de programmation dynamique complet ..........</p>
</body>
    ChapJQuery.html 
      <!DOCTYPE html>
<meta charset="UTF-8">
<head>
    <title>ChapJQuery</title>
</head>
<body>
    <h1 align="center">Langage JQuery</h1>
    <hr>
    <p>Jquery = Est la bibliothèque JavaScript la plus utilisée et vous permet de créer des effets dynamiques ..........</p>
</body>
    Exercice4.html 
      <!DOCTYPE html>
<html>
    <head>
        <title>Exercice 4</title>
        <meta charset="UTF-8">
    </head>
    <frameset rows="25%, 90%">
        <frame name="Entete" src="Entete.html">
        <frameset cols="30%, *">
            <frame name="Sommaire" src="Sommaire.html">
            <frameset rows="50%, *">
                <frame name="ChapHTML" src="ChapHTML.html">
                <frame name="ChapCSS" src="ChapCSS.html">
            </frameset>
        </frameset>
    </frameset>
</html>

Exercice 5

  • Créer une page web nom « Recherche.html » contenant un formulaire de recherche des documents dans une bibliothèque de la forme suivante :
    • Spécifications
    • Titre de la page : « Exercice 5 »
    • Formulaire principal :
      • Un tableau centré avec une bordure noire de 1 pixel et une largeur de 40%, ayant pour titre « Recherche de Documents ».
      • Une ligne pour le champ « Titre » avec un champ texte de largeur 40%.
      • Une ligne pour le champ « Auteur » avec un champ texte de largeur 40%.
      • Une ligne pour le champ « Résumé » avec une zone de texte de 40% de largeur et de 10 lignes de hauteur.
      • Un saut de ligne suivi d’une ligne horizontale de largeur 40%.
    • Options de Recherche :
      • Un second tableau centré avec une bordure noire de 1 pixel et une largeur de 40%, ayant pour titre « Options de Recherche ».
      • Une ligne avec le texte « Les documents recherchés doivent contenir : » et deux boutons radio pour sélectionner :
        • « Les trois champs (ET) »
        • « L’un des trois champs (OU) » (par défaut, cette option est sélectionnée)
      • Une ligne avec le texte « Type de Support » et deux cases à cocher pour :
        • « Polycopie » (par défaut, cochée)
        • « Livre » (par défaut, cochée)
      • Une ligne avec le texte « Catégorie des Documents » et une liste déroulante avec les options suivantes :
        • « Tous » (par défaut, sélectionnée)
        • « Programmation »
        • « Bases de Données »
        • « Réseau »
        • « Programmation Internet »
        • « Mathématique »
        • « Marketing »
        • « Gestion »
      • Un saut de ligne suivi d’une ligne horizontale de largeur 40%.
    • Boutons d’action :
      • Un troisième tableau centré avec une bordure noire de 1 pixel et une largeur de 40%, contenant :
        • Un bouton « Rechercher ».
        • Un bouton « Effacer ».
    Correction 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Exercice 5</title>
    </head>
    <body>
        <form>
            <table border="1 solid black" width="40%" align="center">
                <caption><h3>Recherche de Documents</h3></caption>
                <tr>
                    <td><b>Titre</b></td>
                    <td><input type="text" name="titre" size="40%"/></td>
                </tr>
                <tr>
                    <td><b>Auteur</b></td>
                    <td><input type="text" name="auteur" size="40%"/></td>
                </tr>
                <tr>
                    <td><b>Résumé</b></td>
                    <td><textarea name="auteur" cols="40%" rows="10"></textarea></td>
                </tr>
            </table>
            <br>
            <hr width="40%"/>
            <table border="1 solid black" width="40%" align="center">
                <caption><h3>Options de Recherche</h3></caption>
                <tr>
                    <td><b>Les documents Recherchés doivent contenir:</b></td>
                    <td>
                        <input type="radio" name="condition" value="ET"/>Les trois champs (ET) <br>
                        <input type="radio" name="condition" value="OU" checked/>L'un des trois champs (OU)
                    </td>
                </tr>
                <tr>
                    <td><b>Type de Support</b></td>
                    <td>
                        <input type="checkbox" name="supportp" value="polycopie" checked/>Polycopie <br>
                        <input type="checkbox" name="supportl" value="livre" checked/>Livre
                    </td>
                </tr>
                <tr>
                    <td><b>Catégorie des Documents</b></td>
                    <td>
                        <select name="documents">
                            <option value="tous" selected>Tous</option>
                            <option value="programmation">Programmation</option>
                            <option value="base">Bases de Données</option>
                            <option value="réseau">Réseau</option>
                            <option value="internet">Programmation Internet</option>
                            <option value="math">Mathématique</option>
                            <option value="marketing">Marketing</option>
                            <option value="gestion">Gestion</option>
                        </select>
                    </td>
                </tr>
            </table>
            <br>
            <hr width="40%"/>
            <table border="1 solid black" width="40%" align="center">
                <tr>
                    <td>
                        <input type="submit" name="rechercher_button" value="Rechercher" size="50%"/>
                    </td>
                    <td>
                        <input type="reset" name="reset_button" value="Effacer"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>