Scribd Logo
Importer

Bienvenue sur Scribd !

  • Chapitre1 HTML CSS

    Transféré par

    safe selmi
    43 vues35 pages

    Titre original

    Chapitre1-HTML-CSS

    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é
    43 vues35 pages

    Chapitre1 HTML CSS

    Transféré par

    safe selmi

    Droits d'auteur :

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

    Le web!

    HTML et CSS

    Chapitre I (Partie 1)

    1
    Programmation Web

    ISAMM. Université Manouba. 2022/2023

    2
    Comment fonctionnent les
    pages Web?

    Les navigateurs sont des applications qui


    peuvent afficher des pages Web.
    Par exemple. Chrome, Firefox, Safari, Internet
    3
    Explorer, Edge, etc.
    Comment fonctionnent les
    pages Web?

    Les pages Web sont écrites dans un langage


    de balisage appelé HTML, de sorte que les
    navigateurs affichent une page Web en lisant
    4
    et en interprétant son HTML.
    Comment fonctionnent les
    pages Web?

    Le fichier HTML peut être lié à d'autres


    ressources, comme des images, des vidéos,
    ainsi que des fichiers JavaScript et CSS
    (feuille de style), que le navigateur charge 5

    ensuite également.
    Comment fonctionnent les
    pages Web?

    Un serveur Web est un programme exécuté


    sur un ordinateur qui fournit des pages Web
    en réponse à des requêtes.
    6

    Il stocke ou génère la page Web renvoyée.


    Comment fonctionnent les
    pages Web?

    cs193x.stanford.edu
    www.twitter.com
    1. Vous
    saisissez
    une URL,
    qui est
    l'adresse
    du fichier
    HTML sur
    Internet.

    7
    Comment fonctionnent les
    pages Web?
    2. Le navigateur
    demande au serveur
    Web qui héberge le
    document d'envoyer
    ce document.

    GE
    T

    8
    Comment fonctionnent les
    pages Web?
    3. Le serveur Web
    répond au
    navigateur avec le
    fichier HTML
    demandé.
    OK

    9
    Comment fonctionnent les
    pages Web?
    4, Le navigateur lit
    le code HTML, voit
    les ressources
    intégrées et les GE
    OK
    demande T
    également au
    serveur.

    .. GE OK
    . T

    10
    Comment fonctionnent les
    pages Web?
    5. La page Web est chargée lorsque toutes les
    ressources sont extraites et affichées.
    (C'était évidemment très simplifié. Nous
    obtiendrons plus de détails lorsque nous parlerons
    des serveurs dans d’autre cours.)

    11
    HTML et CSS

    12
    C’est quoi HTML?

    HTML (Hypertext Markup Language)


    - Décrit le contenu et la structure d'une
    page Web; pas un langage de
    programmation.
    - Composé de blocs de construction appelés
    éléments.
    <p>
    HTML est<em>exellent!!!</em>
    <img src="puppy.png" />
    </p>

    13
    Strcture de base d’une page
    HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>CS 193X</title>
    </head>

    <body>
    ... contents of the page...
    </body>
    </html>

    14
    <!DOCTYPE html>
    Métadonnées <html>
    qui <head> E.g. <title>
    n'apparaissent <title>Dev web</title> apparaît
    pas dans la </head> comme le
    fenêtre nom de
    d'affichage du l'onglet
    Contenu
    navigateurqui <body>
    s'affiche dans la ... Contenu de la page...
    fenêtre </body>
    d'affichage du </html>
    navigateur

    15
    Eléments HTML

    <p>
    HTML est<em>génial!!!</em>
    <img src="puppy.png" />
    </p>

    ● Un élément a généralement des balises de début et de fin


    (<p> et </p>)
    ○ contenu: trucs entre les balises de début et de fin
    ● Un élément peut se fermer automatiquement (img)
    ● Un élément peut avoir des attributs (src = "puppy.jpg")
    ● Les éléments peuvent contenir d'autres éléments (p contient
    em et img)
    16
    Eléments HTML
    (dans <body>)

    Titre
    <h1>Moby James</h1>
    h1, h2, ... h6
    Paragraphe <p>Call me Ishmael.</p>
    Retour à la since feeling is first<br/>
    ligne who pays any attention
    Image <img src="cover.png" />
    <a href="google.com">click
    Lien
    here!</a>
    Gras(bold) <strong>Be BOLD</strong>
    He's my <em>brother</em> and
    Emphase (italic)
    all 17
    Exercise: page web du cours

    Créer la page suivante

    18
    Exercice: page web du cours

    Éléments HTML Contenu de la page


    texte
    <!DOCTYPE html> Dev web: front-end!!
    <html>
    <head> annonce
    <title>Dev 14/02: Projet 1!
    web</title> Deadline vendredi
    </head> prochain
    14/02: Présentation du
    <body> plan.
    ...
    </body> résumé
    </html> 19
    Solution

    <!DOCTYPE html>
    <html>
    <head>
    <title>Dev web !</title>
    </head>
    <body>
    <h1>Dev web: front-end!!</h1>
    <p>
    <strong>Annonce</strong><br/>
    14/02: Projet 1! <span>Deadline vendredi</span>.<br/>
    14/02: Présentation du plan.</p>
    <a href="https://developer.mozilla.org/"> résumé
    </a>
    </body>
    </html>
    20
    CSS

    21
    CSS

    CSS: Cascading Style Sheets


    - Décrit l'apparence et la mise en page d'une
    page Web
    - Composé de règles CSS, qui définissent des
    ensembles de styles
    selecteur {
    propriété:
    valeur;
    }
    22
    CSS

    A CSS file is composed of style rules:

    selecteur {
    propriété:
    valeur;
    }
    selecteur : Spécifie le ou les éléments HTML à
    styliser.
    properiété: Le nom du style CSS.
    valeur: La valeur du style CSS.
    Enregistré dans un fichier
    filename.css.
    23
    CSS

    // pas du vrai
    css
    fourchette {
    color: gold;
    }
    " Toutes les
    fourchettes sur la
    table doivent être en
    or " 24
    CSS

    p {
    color: blue;
    font-weight:
    bold;
    }
    " Tous les éléments <p>
    de la page doivent être
    bleus et gras » "
    25
    Appel de CSS dans HTML

    <!DOCTYPE html>
    <html>
    <head>
    <title>cours web</title>
    <link rel="stylesheet"
    href="filename.css" />
    </head>

    <body>
    ... Contenu de la page...
    </body>
    </html>
    26
    Quelques propriétés CSS

    Il y a plus de 500 propriétés CSS! Voici quelques-


    uns :
    police font-family: Helvetica;
    couleur color: gray;
    Couleur arrière
    background-color: red;
    plan
    border: 3px solid
    bordure
    green;
    Alignment de texte text-align: center;

    27
    Les couleurs en CSS:

    140 nom prédéfinis


    Valeur hexa
    color: black;
    color: #00ff00;
    rgb() and rgba() color: #0f0;
    color: rgb(34, 12, 64); color:
    color: rgba(0, 0, 0, #00ff0080;
    0.5);

    - Le "a" signifie canal alpha qui est une valeur de


    transparence

    28
    Exercice: page du cours

    Écrivons du CSS pour styliser notre page:

    29
    Exercice: page du cours

    Écrivons du CSS pour styliser notre page:

    Police: Helvetica

    Bordure: hotpink 3px


    Couleur Background:
    lavenderblush
    Highlight: jaune

    - La boite centrée
    - Titre et le lien centré
    - Le contenu de la boite
    à gauche

    30
    Résumé de l’exercice

    Quelques techniques clés:


    • Ajoutez des conteneurs invisibles en HTML pour
    sélectionner des groupes d'éléments en CSS.
    • Appliquez des styles à l'élément parent /ancêtre
    et à tous ses enfants.

    Mais nous avons rencontré des choses bizarres...


    Impossible de définir l'alignement du texte: centré
    directement aux balises <a> ou <strong>, mais
    on peut centrer <p> et <h1>
    Comment définir une largeur sur la boîte pour
    qu'elle s’ajuste au texte?
    Comment centrer la boîte?! Comment mettre un
    31
    texte en évidence?!
    Utilisation de balises
    sémantiques HTML5 pour
    définir la structure

    32
    Balises
    <main>
    HTML5 et sémantiques
    Contenu principal du document - contrairement aux
    balises <header> et <footer>, il ne peut y avoir qu'un
    seul élément principal dans le <body>. Le contenu à
    l'intérieur doit être unique et ne pas contenir de contenu
    répété sur plusieurs pages (par exemple, barres
    latérales, lien de navigation, barres de recherche, etc.)

    <header>
    Élément d'en-tête - contient des informations d'en-tête
    pour le corps de la page ou la section / l'article, y
    compris les logos, la barre de navigation, etc.
    <footer>
    Élément de pied de page - contient des informations de
    pied de page pour le corps de la page ou la section /
    l'article, y compris les informations de copyright, le
    contact, les liens, etc. 33
    Balises HTML5 et sémantiques

    <footer>
    Élément de pied de page - contient des
    informations de pied de page pour le corps de
    la page ou la section / l'article, y compris les
    informations de copyright, le contact, les liens,
    etc.

    34
    article vs section

    ● Les articles sont un contenu complet et


    autonome. Les sections font partie d'une
    plus grande partie.

    ● div n'a pas de signification sémantique, ne


    doit être ajouté que pour sélectionner le
    contenu en CSS/JS, et doit être votre "dernier
    recours"

    35

    Vous aimerez peut-être aussi