Initiation à HTML¶

<!DOCTYPE html>

<html>
    <head>
        <title>Mon Film Préféré</title>
    </head>

    <body>
        <p>Ce document a été réalisé par VOTRE NOM ET PRENOM</p>
        <h1>TITRE DU FILM</h1>
        <img src="./mcnugget_action_movie.png" width="200px" /> <!--affiche du film (à insérer durant l'activité) -->
        <br/>

        Informations générales

        Année de Sortie : <br/>
        Réalisateur : <br/>
        Acteurs Principaux : <br/>
        Genre : <br/>

        Résumé
        <!--utiliser la balise paragraphe <p> -->

        Bande-Annonce du Film
        <!--à insérer durant l'activité -->


    </body>
</html>

Attention, on prendra soin de ne pas mettre d'espaces et d'accents dans notre arborescence de fichiers et dossiers.

Créez un dossier dans Mes Documents en ajoutant vos prenoms à la fin Activite_1_web_ajoutez_vos_prenoms_ici.
Ouvrez Notepad++ (ou tout autre éditeur de texte disponible).
Créez un nouveau fichier que vous appellerez index.html et placez le dans le dossier Activite_1_web_ajoutez_vos_prenoms_ici.
Copiez et collez le code ci-dessus dans le fichier index.html.
Ouvrez ce fichier avec le navigateur.

Analyse du fichier¶

Dans un premier temps, analysez le fichier et sa construction, les différentes balises <h1>, <br />. On remarque que TITRE DU FILM est entouré de la balise <h1>, correspondant au titre de niveau 1.

Mise en forme de quelques portions de textes¶

Modifiez le texte Ce document a été réalisé par VO(S) NOM(S) ET PRENOM(S) et TITRE DU FILM
Ajoutez les balises <h2> </h2> à Informations générales, Résumé, Bande-Annonce et Sources...
Ajoutez les balises <strong></strong> aux 4 items des Informations générales : Année de sortie, Réalisateur, Acteurs principaux Genre. Rechargez la page et vérifier que vos modifications sont bien prises en compte.

Ajouter une image à votre page¶

Depuis un site web, télécharger le fichier image du film en faisant un clic-droit dessus Enregistrer l'image sous... Enregistrez ce fichier dans le dossier crée précédemment.

Nommez cette image affiche.jpg, ou affiche.png selon le format initial du fichier image.

Pour ajouter une image dans une page HTML, il faut utiliser la balise <img src= ... />. La ligne de code est déjà présente dans le fichier index.html. Modifiez là pour afficher votre image et ajuster sa taille.

Créer des liens hypertextes¶

On l'a vu en cours, les liens hypertextes sont la base du Web. Voyons comment réaliser ces liens avec du HTML. Un lien permet simplement de se déplacer vers une autre page HTML.

<a> désigne une ancre, c'est-à-dire un lien vers une cible de destination. Cette balise entoure généralement un mot (une image, un paragraphe, un titre, ...) qui devient le texte 'support du lien' hypertexte.

La syntaxe est :

<a href="adresse_du_lien_hypertexte">support_du_lien</a>

Ajoutez un lien vers la page imdb (par exemple : https://www.imdb.com/title/tt0047478/) correspondant au film, ou vers tout autre site en rapport direct avec le film.

Envoyez votre travail (page HTML, ou autre document contenant le code HTML) sur école Directe avec comme objet dans le mail : TP - HTML - ajouter prenoms eleves. N'oubliez pas d'ajouter les prénoms des élèves dans l'objet du mail.