Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cour Developpeur Web Et Mobile

    Transféré par

    هداية مسلمة
    6 vues46 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é
    6 vues46 pages

    Cour Developpeur Web Et Mobile

    Transféré par

    هداية مسلمة

    Droits d'auteur :

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

    Spécialité: Développeur Web et Mobile

    Module : interface d’utilisateur statique


    Thème: Création des pages web statique

    Prof: M S 1
    Les éléments de cours:
    1. Structure d’un document Html5
    2. Tags spéciaux
    3. Gestion des liens
    4. Images
    5. Listes
    6. Attribut Style
    7. Les tableaux et les DIV
    8. Les cadres 2
    9. Les formulaires
    10. Définition et évolution CSS
    11. Différentes façons d’écrire du CSS (style local,
    interne, externe)
    12. Syntaxe de CSS
    13. Les différents unités CSS
    14. Le CSS et le responsive
    15. Version de bootsrup

    3
    1. Structure d’un document Html5:
    Un document HTML5 de base suit une structure générale qui
    comprend les éléments essentiels nécessaires pour créer une
    page web. Voici une structure typique d'un document HTML5 :

    4
    5
    Cette structure de base comprend les éléments suivants :
    • <!DOCTYPE html> : Déclaration du type de document.
    • <html> : Élément racine de la page web.
    • <head> : Contient les métadonnées, les liens vers les styles CSS, les
    scripts, etc.
    • <meta charset="UTF-8"> : Spécifie l'encodage des caractères pour le
    document.
    • <title> : Titre de la page affiché dans la barre de titre du navigateur.
    • <body> : Contient tout le contenu visible de la page.
    • <header> : Section d'en-tête de la page.
    • <nav> : Zone de navigation.
    • <main> : Contient le contenu principal de la page.
    • <article> : Un contenu spécifique, comme un article de blog.
    • <footer> : Pied de page de la page web. 6
    2. Tags spéciaux:
    HTML offre une variété de balises, chacune ayant un rôle
    spécifique dans la structuration et la présentation du contenu d'une
    page web. Voici quelques balises importantes en HTML :
    <html> : Balise racine de tout document HTML.
    <head> : Contient des métadonnées, des liens vers des scripts,
    des styles, etc.
    <title> : Définit le titre de la page affiché dans la barre de titre
    du navigateur.
    <body> : Contient tout le contenu visible de la page web.
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Balises de titres allant
    du titre principal <h1> au titre de niveau inférieur <h6>
    7
    • <p> : Balise pour les paragraphes de texte.
    • <a> :Crée un lien hypertexte vers une autre page, une ancre
    dans la même page ou un lien vers un fichier.
    • <img> : Insère une image dans la page.
    • <ul>, <ol>, <li> : Balises pour créer des listes non ordonnées
    (<ul>) et ordonnées (<ol>) avec des éléments de liste (<li>).
    • <div> et <span> : Balises de conteneurs génériques utilisées
    pour regrouper du contenu et appliquer des styles.
    • <table>, <tr>, <td>, <th> : Balises pour créer des tableaux
    avec des lignes, des cellules et des en-têtes de tableau.
    <form> : Permet de créer un formulaire avec des champs de
    saisie, des boutons, etc.
    8
    • <input>, <textarea>, <select>, <button> : Balises utilisées à
    l'intérieur des formulaires pour différents types d'entrées
    utilisateur.
    • <link> : Relie le document HTML à des ressources externes
    comme des feuilles de style CSS, des icônes, etc.
    • <iframe> : Intègre une fenêtre rectangulaire dans une page
    web, généralement utilisée pour inclure du contenu externe.
    • <video> et <audio> : Balises pour intégrer des fichiers vidéo
    et audio dans une page web.
    • Chaque balise a sa propre fonction et peut être combinée avec
    d'autres balises pour créer une structure de page web complexe
    et riche en contenu.
    9
    3.Gestion des liens:
    • En HTML, les liens sont gérés à l'aide de la balise <a>, qui crée
    des liens hypertextes vers d'autres pages, des ressources en
    ligne, des sections spécifiques de la même page ou des adresses
    email. Voici quelques exemples de gestion des liens en HTML :
    a)- Lien vers une autre page web :

    b)- Lien vers une autre page de votre site :

    10
    c)- Lien vers une section spécifique de la même
    page (ancre) :

    d)- Lien vers une adresse email :

    De plus, des attributs supplémentaires peuvent être


    utilisés pour personnaliser le comportement des liens, tels
    que target pour spécifier où ouvrir le lien (dans une
    nouvelle fenêtre, dans la même fenêtre, etc. 11
    4. Images:
    En HTML, les images sont intégrées à l'aide de la balise
    <img>. Cette balise permet d'afficher des images dans une
    page web. Voici un exemple simple :

    src : spécifie l'URL ou le chemin d'accès à l'image. Il peut s'agir


    d'une URL complète (http://www.example.com/image.jpg) ou
    d'un chemin relatif (images/image.jpg).
    alt : fournit un texte alternatif pour l'image. Il est important pour
    l'accessibilité et s'affiche si l'image ne peut pas être chargée ou
    si le lecteur d'écran est utilisé. Il décrit le contenu de l'image.
    12
    • De plus, vous pouvez ajouter d'autres attributs pour contrôler
    la présentation et le comportement de l'image :
    • width et height : spécifient la largeur et la hauteur de l'image
    en pixels.
    • title : ajoute une info-bulle lorsqu'on survole l'image.
    • style : permet de définir des styles CSS pour l'image.

    Notez que la balise <img> est auto-fermante en HTML, ce qui


    signifie qu'elle n'a pas de balise de fermeture (</img>).
    13
    5. Listes:
    En HTML, il existe deux types principaux de listes : les
    listes ordonnées (<ol>) et les listes non ordonnées (<ul>).
    a)- Listes ordonnées (<ol>):
    Une liste ordonnée est une liste numérotée où chaque
    élément est précédé d'un numéro.

    14
    b)-Listes non ordonnées (<ul>):
    Une liste non ordonnée est une liste à puces où chaque
    élément est précédé d'un symbole, généralement un
    point ou un cercle.

    15
    • C)- Listes imbriquées:
    • Il est également possible d'imbriquer des listes, c'est-à-dire
    d'avoir des listes à l'intérieur d'autres listes (ordonnées ou non
    ordonnées).
    • Exemple d'une liste ordonnée avec une liste non ordonnée
    imbriquée :

    16
    • Ces balises <ol> et <ul> sont utilisées pour
    structurer les informations sous forme de listes et
    peuvent être combinées avec des styles CSS pour
    personnaliser l'apparence des listes. Chaque
    élément de liste est défini par la balise <li>.

    17
    6. Attribut Style:
    • Les attributs de style en HTML sont utilisés pour définir des
    styles directement sur les éléments HTML. Ils permettent de
    spécifier des propriétés de présentation telles que la couleur,
    la taille, la police, la mise en page, etc. directement dans la
    balise HTML.
    • L'attribut style est ajouté à une balise HTML pour définir des
    styles spécifiques pour cet élément. Par exemple, pour
    changer la couleur du texte d'un paragraphe en rouge, vous
    pourriez utiliser l'attribut style de cette manière :

    18
    7. Les tableaux et les DIV:
    • En HTML, les tableaux (<table>, <tr>, <td>, etc.) et les
    DIV (<div>) sont deux éléments clés utilisés pour
    structurer et organiser le contenu d'une page web.
    Cependant, ils sont utilisés dans des contextes différents
    et ont des propriétés distinctes.
    a)- Tableaux HTML :
    Les tableaux sont utilisés pour organiser les données
    tabulaires, comme les feuilles de calcul. Voici un exemple
    simple de code HTML pour créer un tableau :

    19
     Dans cet exemple, <table> définit le début du tableau,
    <tr> crée une ligne, et <td> crée des cellules à l'intérieur
    de cette ligne.
     L'attribut border="1" est utilisé ici pour ajouter une
    bordure au tableau à des fins de démonstration. 20
    b)- DIV HTML :
    Les DIV sont des éléments de division utilisés pour regrouper
    et organiser d'autres éléments HTML, et ils sont souvent
    utilisés en conjonction avec des feuilles de style CSS pour la
    mise en page.
    Voici un exemple simple :

    21
    - Dans cet exemple, la balise <div> englobe deux paragraphes
    <p>.
     L'attribut style est utilisé pour appliquer des styles CSS
    directement à la div, ce qui inclut une bordure et un
    remplissage.
     L'utilisation de tableaux pour la mise en page est déconseillée,
    car elle est considérée comme obsolète.
     Les DIV associées à CSS sont préférées pour la mise en page
    moderne, car elles offrent une plus grande flexibilité et un
    meilleur contrôle sur le style. Par exemple, vous pouvez utiliser
    des propriétés CSS telles que display: flex ou grid pour créer
    des mises en page plus complexes et réactives.
    22
    8. Les cadres:
    les cadres (frames) étaient une technique utilisée pour diviser
    la fenêtre du navigateur en plusieurs sections indépendantes,
    chacune affichant un document HTML distinct.
    Balise <frameset> : La balise <frameset> était utilisée pour
    définir la structure des cadres.

    23
    9. Les formulaires:
    Les formulaires HTML sont des éléments clés qui
    permettent aux utilisateurs d'interagir avec une page web en
    saisissant des informations et en les envoyant au serveur.
    Voici un exemple de base d'un formulaire HTML :

    24
    25
    •

    26
    27
    28
    Dans cet exemple, le formulaire utilise l'élément <form>
    pour englober tous les champs du formulaire.
     Les différents types de champs (texte, radio, case à cocher,
    menu déroulant, etc.) sont créés à l'aide d'éléments comme
    <input>, <textarea>, et <select>.
     L'attribut name : est utilisé pour identifier chaque champ
     l'attribut id est utilisé pour lier les balises <label> aux
    champs correspondants.
     L'attribut action spécifie l'URL où les données du
    formulaire seront envoyées,
     l'attribut method définit la méthode d'envoi des données
    (par exemple, "post" ou "get").

    29
    10. Définition et évolution CSS:
    CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour
    décrire la présentation d'un document HTML ou XML.
     Il permet de définir la mise en forme et le style visuel des éléments d'une page
    web, tels que les couleurs, les polices de caractères, les marges, les espacements,
    les dimensions, etc.
     L'utilisation de CSS sépare la structure du contenu HTML de sa présentation,
    offrant ainsi une meilleure séparation des préoccupations dans le développement
    web.
    a)- Définition de CSS :
     Cascading : Le terme "cascading" signifie que les styles peuvent être hérités par
    les éléments enfants à partir de leurs parents, mais ils peuvent également être
    modifiés ou annulés par des styles plus spécifiques.
     Style Sheets : Il s'agit de feuilles de style qui décrivent la présentation d'un
    document. Les règles CSS définissent comment les éléments HTML doivent être
    affichés sur l'écran, imprimés ou rendus sous d'autres formes de médias.
    30
    b)- Évolution de CSS :
     CSS1 : Publié en décembre 1996, CSS1 était la première version
    officielle de CSS. Il a introduit des fonctionnalités de base pour définir
    la mise en page et la présentation.
     CSS2 : Publié en mai 1998, CSS2 a apporté des améliorations
    significatives en introduisant de nouvelles fonctionnalités telles que les
    feuilles de style pour l'impression, les médias visuels et auditifs, ainsi
    que des sélecteurs plus avancés.
     CSS2.1 : Publié en juin 2011, CSS2.1 était une version révisée de CSS2
    avec des corrections et des clarifications, mais sans ajout majeur de
    fonctionnalités.
     CSS3 : Plutôt que d'être une seule spécification monolithique, CSS3 est
    un ensemble de modules qui sont développés individuellement. Chaque
    module introduit de nouvelles fonctionnalités et améliorations.
    Certaines parties de CSS3 sont maintenant bien établies et largement
    prises en charge, tandis que d'autres sont encore en cours de
    développement.
    31
    11. Différentes façons d’écrire du CSS (style local, interne,
    externe):
     Il existe plusieurs façons d'écrire du CSS dans une page web, chacune ayant
    ses avantages et ses inconvénients. Les trois principales méthodes sont le style
    local (inline), le style interne (embedded) et le style externe (external).
    Voici une explication de chacune :
    a)- Style Local (Inline) :
    Le style local est appliqué directement à un élément HTML spécifique en
    utilisant l'attribut style. Cela signifie que le CSS est inclus directement dans la
    balise HTML concernée.
    Exemple :

    32
    b)- Style Interne (Embedded) :
    Le style interne est inclus dans la section <style> de l'en-tête
    HTML de la page. Cela permet de définir les styles directement
    dans le document, mais de manière plus organisée que le style
    local.
    Exemple :

    33
    c)- Style Externe (External) :
    Le style externe implique l'utilisation d'un fichier CSS séparé qui
    est lié à la page HTML à l'aide de la balise <link>.
    Exemple (fichier styles.css):

    34
    12. Syntaxe de CSS:
    La syntaxe CSS (Cascading Style Sheets) est relativement simple
    et se compose de règles qui définissent le style des éléments
    HTML sur une page web. Voici un aperçu de la syntaxe de base :
    Structure d'une Règle CSS :

     Sélecteur : Identifie les éléments HTML auxquels la règle


    s'applique.
     Propriété : Attribut que vous souhaitez styliser (par exemple,
    color, font-size, margin, etc.).
    35
     Valeur : La valeur assignée à la propriété (par exemple, red,
    16px, 10px 20px, etc.).
     Commentaire : Vous pouvez ajouter des commentaires en
    utilisant /* commentaire */.
    Exemples de Règles CSS :
    1. Sélection par Élément :

    36
    2. Sélection par ID :

    3. Sélection par Classe :

    Sélection par Attribut :

    37
    4. Sélection par Relation (Descendant) :

    5. Sélection par État :

    Inclusion du CSS dans une Page HTML :


    a)- Style Interne (Embedded) :

    38
    b)- Style Externe (External) :

    13. Les différents unités CSS:


    En CSS, il existe différentes unités que vous pouvez utiliser
    pour définir les valeurs numériques, telles que les dimensions,
    les marges, les paddings, etc.
    Ces unités peuvent être catégorisées en deux types principaux :
    les unités absolues et les unités relatives.

    39
    a)- Unités Absolues :
    1. Pixels (px) : Une unité fixe représentant un pixel à l'écran.
    Elle est souvent utilisée pour des dimensions fixes.

    2. Pouces (in), Centimètres (cm), Millimètres (mm) : Unités


    physiques qui dépendent des dimensions physiques de l'appareil
    d'affichage.
    Elles sont moins couramment utilisées sur le web en raison de la
    variabilité des tailles d'écran.

    40
    3. Points (pt), Pica (pc) : Unités typographiques utilisées
    principalement pour les dimensions de texte. Un point équivaut
    à environ 1/72 de pouce.

    41
    b)- Unités Relatives :
    1. Pourcentage (%) : Représente une proportion de la valeur
    parente. Par exemple, si un conteneur a une largeur de
    300px et un enfant a une largeur de 50%, il aura une
    largeur de 150px.

    2. Em (em) : Relatif à la taille de la police de l'élément. Un


    em équivaut à la taille de la police de l'élément courant.

    42
     L'utilisation appropriée des unités dépend du contexte et
    des besoins spécifiques de votre mise en page.
     Les unités relatives sont souvent préférées car elles
    permettent une meilleure adaptation aux différentes tailles
    d'écrans et aux préférences de l'utilisateur.

    43
    14. Le CSS et le responsive:
    Le Responsive Web Design (RWD) est une approche de conception de
    sites web qui vise à rendre les pages web adaptatives à différents
    appareils et tailles d'écrans.
    Le CSS joue un rôle crucial dans la mise en œuvre du responsive design
    en permettant aux développeurs de définir des styles qui répondent
    dynamiquement aux caractéristiques de l'appareil de l'utilisateur.
    Voici comment le CSS est utilisé pour créer un design responsive :
    Media Queries :
    Les Media Queries sont une fonctionnalité clé du CSS pour implémenter
    le responsive design. Elles permettent d'appliquer des styles différents en
    fonction de caractéristiques spécifiques du périphérique, telles que la
    largeur de l'écran, la résolution, l'orientation, etc.
    44
    Exemple :

    45
    15. Version de bootsrup:
    en janvier 2022, et à cette date, la dernière version stable de
    Bootstrap était la version 5.2.0, publiée en juillet 2021.
    Pour obtenir la dernière version de Bootstrap, je vous
    recommande de vérifier le site officiel de Bootstrap
    (https://getbootstrap.com) ou son référentiel GitHub
    (https://github.com/twbs/bootstrap)

    46

    Vous aimerez peut-être aussi