Ma première page HTML

Dans un premier temps :

• créez un dossier SNTdans votre espace personnel : Ce PC / NomPrenom (\\kwartz-peda) (H:)

• à l'intérieur, créez un dossier WebNomPrenom (qui correspond au thème SNT),

• puis créez un dernier dossier Activite_1 dans ce dossier WebNomPrenom.

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

• Dans le dossier Activite_1, créez 2 dossiers :

1. medias

2. css

• Ouvrir le logiciel Notepad++

• Enfin, copions le code HTML ci-dessous (Sélectionner le texte brut pour le copier) dans le logiciel Notepad++). 

• Enregistrons-le dans le dossier Activite_1 et nommons-le index.html

• Une fois copié et enregistré, double cliquer sur fichier  pour l'ouvrir avec le navigateur.

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.

NB: ce qui est écrit en rouge n'a pas d'impact sur la page que vous créez ; il s'agit de commentaires pour vous guider lors de cette activité

Cette page sera composée d'un gros titre (le titre du film) puis de 4 titres de niveau inférieur. Pour ces 4 derniers, on utilisera la balise <h2>

On pourra aussi mettre en évidence, avec la balise <strong>, les différents items de la partie Informations générales.

• Modifiez le texte Ce document a été réalisé par VOTRE NOM ET PRENOM 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 (ex : <strong>Année de Sortie :</strong> 2010 <br /> 

• Réalisateur

• Acteurs principaux

• Genre

Enregistrez votre travail puis faire F5 dans votre navigateur pour rafraîchir la page. Admirez votre premier travail.

• A l'aide des sites web du début de page, renseignez les différentes informations de la 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 médias 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 <src>. La ligne de code, déjà présente dans le fichier index.html, est la suivante :

<img src="chemin vers l'image" />

chemin vers l'image est le chemin à fournir à partir du fichier HTML. On explique ci-dessous ce qu'est le "chemin vers l'image".

Il faut donner le chemin pour aller de index.html à affiche.jpg qui est contenu dans le dossier medias. Ce chemin s'écrit :

medias/affiche.jpg

Remarque : si affiche.jpg avait été enregistrée à la racine du site, on aurait mis la ligne de code suivante :

<img src="affiche.jpg"/>

• Ajoutez l'affiche à votre page web en ajoutant la ligne de code HTML adéquate. Faites vérifier par votre enseignant.

• Si votre affiche est trop grande, on peut demander au navigateur de réduire sa largeur en pixels (width) ou sa hauteur en pixels (height).

• A noter que sur le web, ce n'est pas une très bonne pratique car cela peut consommer beaucoup d'espace et l'image sera donc longue à être télécharger. Cette problématique est abordé tout au long de l'année dans les Thèmes 'Data' et 'Photographie Numérique'.

<img src="chemin vers l'image" width="taille en pixels" />

Par exemple :

<img src="DSC_0113.jpg" width="250px" />

Ce qui est chouette avec le web, c'est que l'on peut intégrer du contenu issu d'un autre site. Nous allons intégrer la bande-annonce, la vidéo donc, à notre page.

Ce n'est pas plus compliqué qu'un simple copier-coller. Prenons l'exemple du site Youtube, il suffit de cliquer sur le bouton Partager puis <Intégrer>, sélectionner le code qui commence par <iframe> et le coller sous notre titre bande-annonce. 

Si possible, cocher la case : Activer le mode confidentialité avancé.

Le code ressemble à cela :

<iframe width="560" height="315" src="https://www.youtube.com/...></iframe>

Vous remarquerez que l'on peut jouer sur la taille de la vidéo affichée et quelques paramètres, toujours en anglais.

On l'a vu précédemment, 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 support du lien hypertexte.

La syntaxe est :

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

Dans la partie Sources des informations et médias, ajouter le ou les site.s où vous avez pris vos informations et l'affiche en créant un lien vers le ou les site.s en question.

Enregistrez, vérifiez et montrez le résultat à votre enseignant. Vous devriez obtenir une page comme cela :

Ok, le rendu précédent n'est pas très fun, c'est le rendu par défaut des différentes balises 

• Ouvrir un nouveau fichier dans Notepad++

• Nommer ce fichier MesStyles.css

• Copier-coller le code ci-dessous à gauche

• Enregistrer dans le dossier css

Il ne reste plus qu'à rajouter le lien (attention au chemin, prenez exemple sur le lien de votre image...) dans le bloc <head> de notre page HTML en utilisant le cours (Langage CSS  (le style graphique)). 

NB : modifier la ligne de code en indiquant le nom du fichier que vous venez de créer.

Visualisez le rendu en le montrant à votre enseignant puis personnalisez-le à votre guise en modifiant le fichier messtyles.css.