Scribd Logo
Importer

Bienvenue sur Scribd !

  • 15 vues

    Web S1 Ok

    Transféré par

    auxx.2701
    idk

    Droits d'auteur :

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

    Web S1 Ok

    Transféré par

    auxx.2701
    15 vues3 pages
    idk

    Titre original

    WEB S1 OK

    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é ?

    idk

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    15 vues3 pages

    Web S1 Ok

    Transféré par

    auxx.2701
    idk

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    Vous êtes sur la page 1sur 3

    NOM : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Classe : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

    novembre 2021

    SNT - ELLA
    L E WEB : S ÉANCE 1 - I NTRODUCTION AU LANGAGE HTML
    HTML ET CSS

    Important : Une page WEB écrite « proprement » sera constituée de deux fichiers.
    • un fichier HTML qui va s’occuper uniquement du contenu brut de la page web.
    • un fichier CSS qui va s’occuper uniquement de la décoration de la page web.

    PARTIE 1:: D ÉCOUVERTE DU FICHIER HTML

    1. Dans sa zone personnelle, créer un dossier nommé pagesWEB


    2. Ouvrir l’éditeur de texte notepad++ puis recopier le texte suivant en respectant autant que possible la mise en page :

    Le HTML

    Le HTML est un langage informatique utilisé sur l’internet.


    Il sert à décrire le contenu brut des pages web.
    HTML signifie HyperText Markup Language, c’est-à-dire langage de balisage d’hypertexte.
    Comme nous le verrons, ce langage utilise des balises.
    Les balises permettent de mettre en forme le texte, les liens, les images...

    3. Sauvegarder la page dans le dossier pagesWEB sous le nom : exercice1.html


    4. Ouvrir cette page avec le navigateur internet Firefox (avec un clic droit sur le fichier faire "ouvrir avec Firefox")
    5. Que constate-t-on :
    • Concernant la mise en page ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    • Concernant l’accentuation des caractères ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

    ! 1. À RETENIR (L IRE TRÈS ATTENTIVEMENT CE CADRE )

    Pour écrire une page HTML, il ne suffit pas de taper le texte comme on le ferait dans un traitement de texte
    (l’accentuation et la mise en page ne sont pas respectées). Aussi, Il va falloir "décrire" la page HTML à l’aide de
    balises pour qu’elle soit interprétée correctement par le navigateur internet.

    E 2. E XERCICE : S TRUCTURE CORRECTE DE LA PAGE HTML


    1. Ouvrir le document précédent avec notepad++ et le compléter comme ci-dessous afin d’obtenir la structure balisée
    suivante :
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title> introduction au HTML </title>
    </head>
    <body>
    <h1>Le HTML</h1>
    Le HTML est un langage informatique utilisé sur l’internet. <br />
    Il sert à décrire le contenu brut des pages web. <br />
    HTML signifie HyperText Markup Language, c’est-à-dire langage de balisage d’hypertexte.<br />
    Comme nous le verrons, ce langage utilise des balises. <br />
    Les balises permettent de mettre en forme le texte, les liens, les images...
    </body>
    </html>

    2. Sauver le fichier exercice1.html puis l’ouvrir à nouveau avec un navigateur internet.

    DEPÔT 1 exercice1.html sur http://entraide-ella.fr

    © S. COLOMBAN - Lycée Ella Fitzgerald – Année 2021/2022


    1/3
    PARTIE 2:: C OMMENT BALISER CORRECTEMENT UN FICHIER HTML ?

    > 1. R EMARQUE IMPORTANTE


    Comme on le voit à la partie 1, l’intégralité de la page html est balisée par la balise ouvrante <html> et la balise fermante
    </html>
    <html>
    ... Toute la page web ...
    </html>

    A l’intérieur des balises <html> </html> on remarque deux parties :


    • L’entête (non affiché à l’écran) : balisé par la balise ouvrante <head> et la balise fermante </head>

    <head>
    <meta charset="utf-8" /> ← Permet d’utiliser les caractères accentués
    <title> introduction au HTML </title> ← Titre apparaissant dans l’onglet du navigateur
    </head>

    • Le corps (qui sera affiché à l’écran) : balisé par la balise ouvrante <body> et la balise fermante </body>
    <body>
    ... Corps de la page web ... (affiché à l’écran)
    </body>

    ! 2. À RETENIR

    • Les balises sont encadrées par les chevrons < et >


    • Les balises ne sont pas affichées par le navigateur
    • Il y a deux types de balises :
    — Les balises "en paires" qui s’ouvrent et se referment plus loin comme par exemple :
    <title> .... </title> qui balisent le titre apparaisant sur l’onglet du navigateur
    <head>...</head> qui balisent l’en-tête de la page
    <body>...</body> qui balisent la totalité du corps de la page
    <h1>...</h1> qui balisent les gros titres

    — Les balises "orphelines" qui s’ouvrent et se ferment aussitôt comme par exemple :
    <meta ... /> qui définit l’encodage des caractères et permet les caractères accentués
    <br /> qui permet d’aller à la ligne

    Structure correcte d’une page HTML.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title> titre (de l’onglet) </title>
    </head>

    <body>
    ... tout le corps (affiché) de la page ...
    </body>
    </html>

    E 3. E XERCICE
    Sur le modèle précédent, écrivez une page html nommée : poeme.html dans laquelle vous baliserez les quatorze vers et
    le titre du poème "Une promenade au Jardin des Plantes" d’Alfred de Musset.

    DEPÔT 2 poeme.html sur http://entraide-ella.fr

    © S. COLOMBAN - Lycée Ella Fitzgerald – Année 2021/2022


    2/3
    PARTIE 3:: L ES PRINCIPALES BALISES HTML

    ! 1. Q UELQUES BALISES UTILES POUR BIEN DÉBUTER EN HTML

    Balisage HTML

    ...<br /> Retour à la ligne


    <p>...</p> Création d’un paragraphe

    <ol>...</ol> Création d’une liste numérotée


    <ul>...</ul> Création d’une liste non numérotée
    <li> ...</li> Chaque item d’une liste (numérotée ou non)
    (dans <ol>... </ol> ou <ul>... </ul> )

    <h1> ... </h1> Gros titre


    <h2> ... </h2> Moyen titre
    <h3> ... </h3> Petit titre

    <img src= "photo.jpg" /> Affichage de l’image photo.jpg

    <!-- écrire un commentaire personnel --> Commentaire (invisible à l’écran)

    <a href="autrepage.html"> Nom du lien </a> Lien externe vers la page autrepage.html
    <div id="monancre"></div> Création d’une ancre
    <a href="#monancre"> Nom du lien </a> Lien interne vers l’ancre monancre
    située sur la même page

    E 2. E XERCICE
    1. Ouvrir le fichier poeme.html avec notepad++.
    2. Baliser le nom de l’auteur avec <h1>...</h1>, le nom du poème avec
    <h2>...</h2>, chaque fin de vers avec <br /> et enfin encadrer chaque
    strophe avec la balise <p> ... </p>.
    3. Télécharger une (petite) photo de Musset faisant partie du domaine
    public.
    4. Copier cette photo dans le dossier pagesHTML puis la renommer sous
    le nom photomusset.jpg
    5. Afficher la photo en bas de la page html. (Utiliser une des balises du
    cadre situé au 1.)
    6. a) Sur le web, récupérer une biographie avec au moins quatre dates de
    la vie de Musset.
    b) A la suite de la page HTML, créer un moyen titre nommé :
    BIOGRAPHIE
    c) Créer alors une liste non numérotée de ces quatre dates.
    7. a) Sur le web, récupérer une bibliographie avec au moins quatre oeuvres
    de Musset.
    b) À la suite de la page HTML, créer un moyen titre nommé :
    BIBLIOGRAPHIE
    c) à la suite de la page HTML, créer une liste numérotée de ces quatre
    œuvres.

    DEPÔT 3 poeme.html et photomusset.jpg sur http://entraide-ella.fr

    © S. COLOMBAN - Lycée Ella Fitzgerald – Année 2021/2022


    3/3

    Vous aimerez peut-être aussi