Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP1 Dev Web Midoun

    Transféré par

    Kenza Sanaa
    6 vues33 pages

    Titre original

    TP1DevWebMidoun

    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é
    6 vues33 pages

    TP1 Dev Web Midoun

    Transféré par

    Kenza Sanaa

    Droits d'auteur :

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

    République Algérienne Démocratique et Populaire

    Ministère de l’Enseignement Supérieur et de la Recherche Scientifique


    UNIVERSITÉ DE BLIDA 1, Faculté des Sciences, Département d’Informatique

    Développement WEB(L2)

    TP1

    Dr. MIDOUN Khadidja


    K_miodun@esi.dz

    2020-2021
    EXERCICE 01

    Dr. MIDOUN Khadidja 4/30/2021 2


    Exercice 1 (Partie 1)
    Exercice 1 (Mise en forme du texte) :
    Il est demandé de créer une première page HTML de base, à l'aide du
    "Notpad++", « BlocNote » de Windows.
    1. Réaliser une page html composée des éléments suivants (exemple ci-dessous)
    :
    un titre de niveau 1 composé d'une abréviation "XML" sans oublier de
    mentionner sa signification au niveau de l'attribut "title".
    un titre de niveau 2 et un paragraphe.
    le titre "exemple" contient un code xml préformaté (comme illustré sur l'image).
    une ligne horizontale
    un paragraphe contenant : le mot "citation" souligné suivi d'une citation courte
    et le nom de l'auteur en italique.
    Des commentaires.

    Dr. MIDOUN Khadidja 4/30/2021 3


    Le Code XML(3)

    Dr. MIDOUN Khadidja 4/30/2021 4


    Titre
    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>

    </body>
    </html>

    Dr. MIDOUN Khadidja 4/30/2021 5


    Titre

    Dr. MIDOUN Khadidja 4/30/2021 6


    Titre 1
    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>XML Schema</h1>
    </body>
    </html>

    Dr. MIDOUN Khadidja 4/30/2021 7


    Titre1

    Dr. MIDOUN Khadidja 4/30/2021 8


    Une abréviation
    la balise abbr pour définir une abréviation

    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><abbr title="Extensible Markup Language">XML</abbr>Schema</h1>
    </body>
    </html>
    Dr. MIDOUN Khadidja 4/30/2021 9
    Une abréviation

    Dr. MIDOUN Khadidja 4/30/2021 10


    Titre 2
    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><abbr title="Extensible Markup Language">XML</abbr>Schema</h1>
    <h2>Defnition</h2>
    </body>
    </html>
    Dr. MIDOUN Khadidja 4/30/2021 11
    Titre2

    Dr. MIDOUN Khadidja 4/30/2021 12


    Paragraphe
    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><abbr title="Extensible Markup Language">XML</abbr>Schema</h1>
    <h2>Defnition</h2>
    <p><b><abbr title="Extensible Markup Language">XML</abbr>Schema </b> publié
    comme recommandation par le W3C en mai 2001 est un langage de description de
    format de document XML permettant de définir la structure et le type de contenu d'un
    document XML. Cette définition permet notamment de vérifier la validité de ce
    document.</p>
    </body>
    </html>

    Dr. MIDOUN Khadidja 4/30/2021 13


    Paragraphe

    Dr. MIDOUN Khadidja 4/30/2021 14


    Paragraphe 2
    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><abbr title="Extensible Markup Language">XML</abbr>Schema</h1>
    <h2>Defnition</h2>
    <p><b><abbr title="Extensible Markup Language">XML</abbr>Schema </b> publié comme recommandation
    par le W3C en mai 2001 est un langage de description de format de document XML permettant de définir la
    structure et le type de contenu d'un document XML. Cette définition permet notamment de vérifier la validité
    de ce document.</p>
    <h2>Modèle de XML Schema</h2>
    <p>La recommandation spécifie la validation des documents XML à partir d'un modèle abstrait ; elle en
    fournit le format XML.Pour ce modèle abstrait, un schéma est un ensemble de composants </p>
    </body>
    </html>

    Dr. MIDOUN Khadidja 4/30/2021 15


    Paragraphe 2 (2)

    Dr. MIDOUN Khadidja 4/30/2021 16


    Exemple
    <html>
    <head>
    <title>Balises de mise en forme HTML</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><abbr title="Extensible Markup Language">XML</abbr>Schema</h1>
    <h2>Defnition</h2>
    <p><b><abbr title="Extensible Markup Language">XML</abbr>Schema </b> publié comme recommandation
    par le W3C en mai 2001 est un langage de description de format de document XML permettant de définir la
    structure et le type de contenu d'un document XML. Cette définition permet notamment de vérifier la validité
    de ce document.</p>
    <h2>Modèle de XML Schema</h2>
    <p>La recommandation spécifie la validation des documents XML à partir d'un modèle abstrait ; elle en
    fournit le format XML.Pour ce modèle abstrait, un schéma est un ensemble de composants </p>
    <h2>Exemple</h2>
    </body>
    </html>

    Dr. MIDOUN Khadidja 4/30/2021 17


    Exemple(2)

    Dr. MIDOUN Khadidja 4/30/2021 18


    Le Code XML en HTML

    la balise code:
     pour définir un block de code
     Cependant il faut :
     Remplacer les élements "<" et ">" par les entités &lt; et &gt;
     Utilise la balise "pre" pour afficher le code tel qu'il est écrit.

    Dr. MIDOUN Khadidja 4/30/2021 19


    Le Code XML (2)
    <body>
    <h2>Exemple</h2>
    <code>
    <pre>
    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"&gt;
    &lt;xs:element name="personne"&gt;
    &lt;xs:complexType&gt;
    &lt;xs:sequence&gt;
    &lt;xs:element name="nom" type="xs:string" /&gt;
    &lt;xs:element name="prenom" type="xs:string" /&gt;
    &lt;xs:element name="date_naissance" type="xs:date" /&gt;
    &lt;xs:element name="etablissement" type="xs:string" /&gt;
    &lt;xs:element name="num_tel" type="xs:string" /&gt;
    &lt;/xs:sequence&gt;
    &lt;/xs:complexType&gt;
    &lt;/xs:element&gt;
    &lt;/xs:schema&gt;
    </pre>
    </code>
    </body>

    Dr. MIDOUN Khadidja 4/30/2021 20


    Le Code XML(3)

    Dr. MIDOUN Khadidja 4/30/2021 21


    Les balises pour texte

     La balise <hr>: définit une pause thématique dans une page HTML. Elle est
    affiché comme un trait horizontale.
     La balise <u>: souligne le texte.
     La balise <i>: Pour le mettre le texte en italic.
     La balise <q>: pour en valeur les citations courte.

    Dr. MIDOUN Khadidja 4/30/2021 22


    Le Code XML (2)
    <body>
    <hr>
    <p>
    <u>citation</u>:
    <q>Les données sont une chose précieuse et dureront plus longtemps que les
    systèmes eux-mêmes. </q>
    (<i>Time berner lee</i>)
    </p>
    </body>

    Dr. MIDOUN Khadidja 4/30/2021 23


    Le Code XML(3)

    Dr. MIDOUN Khadidja 4/30/2021 24


    Exercice 1 (Partie 2)
    Exercice 1 (Mise en forme du texte) :
    2. Créer un document html contenant des listes numérotées et des listes à puce.

    Dr. MIDOUN Khadidja 4/30/2021 25


    Les listes en HTML

    < ol >: une liste ordonnée


    < ul >: une liste non-ordonnée
    < il >: les items de la liste

    Dr. MIDOUN Khadidja 4/30/2021 26


    Les listes en HTML (2)
    <ol type="I">
    <li><h3>HTML</h3>
    <ol type="1">
    <li>Historique</li>
    <li>Structure </li>
    <li>Validation</li>
    <li>Nouveautés HTML5</li>
    </ol>
    </li>

    <li><h3>CSS</h3>
    <ul>
    <li>Introduction</li>
    <li>Les proprietés css</li>
    <li>Nouveautés CSS3</li>
    </ul>
    </li>
    </ol>

    Dr. MIDOUN Khadidja 4/30/2021 27


    Les listes en HTML (3)

    Dr. MIDOUN Khadidja 4/30/2021 28


    Devoir pour TP02

    Dr. MIDOUN Khadidja 4/30/2021 29


    Exercice 2
    Exercice 2 (Tableaux) :
    Reconstituer le tableau suivant :
    1. Déclarer un tableau de largeur 90% de la largeur de la fenêtre, aligné au centre, avec une bordure de 1.
    2. Déclarer un entête au tableau (balise <thead>), constitué d'une ligne de trois colonnes de type header.
    3. Déclarer un <tbody>.
    4. Déclarer une première ligne constituée de trois cellules simples.
    5. Déclarer la deuxième ligne constituée de deux colonnes assemblées, et d'une troisième colonne
    6. Aligner le texte à droite dans la première cellule de la ligne
    7. Déclarer une troisième "ligne" constituée de deux cellules simples, et d'une cellule assemblant deux lignes.
    8. Aligner le texte en bas dans la dernière colonne.
    9. Déclarer une quatrième ligne constituée de deux cellules simples (expérimenter ce qui se passe en déclarant
    une cellule de moins, ou une cellule de plus ; interpréter).
    10. Déclarer une cinquième ligne constituée d'une cellule simple et d'une cellule regroupant deux colonnes et deux
    lignes.
    11. Aligner le texte au centre et en haut dans la dernière cellule.
    12. Compléter le tableau par une dernière ligne. Combien faut-il de cellule.
    Note: On n'essaiera pas de tout faire à la fois !

    Dr. MIDOUN Khadidja 4/30/2021 30


    Exercice 3
    Exercice 3 (Liens relatives) :
    1. Créer les différents dossiers et fichiers de cette arborescence.

    2. Utiliser les liens relatifs afin de réaliser ce qui suit :


    • la page index.html dans le dossier site, contenant un sommaire vers les différentes pages comme
    illustré dans la figure ci-dessus.

    Dr. MIDOUN Khadidja 4/30/2021 31


    Exercice 3
    Exercice 3 (Liens relatives) :
    • La page "qui-somme-nous.html" contient une description de l'équipe et deux liens : un lien vers la
    page "list-produits" et un lien vers la page "contact " :

    • La page "list-produits" affiche des liens vers les 3 produits.

    • Les pages "produit-1.html" ,"produit-2.html","produit-3.html" contiennent les détails du produit et


    un lien qui renvoie vers la page "list-produits" . Exemple de la page "produit-1.html.

    Dr. MIDOUN Khadidja 4/30/2021 32


    Merci pour votre attention

    k_midoun@esi.dz

    Dr. MIDOUN Khadidja 4/30/2021 33

    Vous aimerez peut-être aussi