Theme 3 : LE WEB
retour a la page principale
COMPRENDRE DE QUOI EST CONSTITUEE UNE PAGE WEB
Un site web ou site internet est un ensemble de fichiers organisés en dossiers dans une arborescence stockée sur un serveur.
Les fichiers sont de différents types :
texte
son
photo
vidéo
...
ECRIRE UNE PAGE WEB
Le but de cet exercice est de réaliser une page HTML de présentation de votre film préféré. Cette page sera simple mais ATTENTION! ne sera pas stockée sur un serveur (il faudrait un nom de domaine pour cela), cette page web sera seulement stockée sur votre ordinateur (on dit "en local"). On pourra piocher les informations de votre film sur des bases de données en ligne de films telles que IMDb, AlloCiné, Wikipédia...
Les constituants essentiels d'une page web sont :
Le fichier html, qui donne le CONTENU de la page:
Le fichier css, qui définit le STYLE GRAPHIQUE de la page web:
Le fichier html fait donc appel au fichier css pour assurer sa mise en forme, ainsi la combinaison des 2 donne par exemple:
Pour bien comprendre comment construire la page html, explorons les notions essentielles :
Les balises
n élément HTML peut être soit constitué d’une paire de balises (ouvrante et fermante) et d’un contenu, soit d’une balise unique qu’on dit alors « orpheline ».
L’élément p (qui sert à définir un paragraphe) est par exemple constitué d’une balise ouvrante, d’une balise fermante et d’un contenu textuel entre les balises. L’idée ici est que le texte contenu entre les deux balises va être le texte considéré par le navigateur comme étant un paragraphe.
Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise :
Certains éléments en HTML ne vont être constitués que d’une balise qu’on appelle alors orpheline. Cela va être le cas pour certains éléments qui ne possèdent pas de contenu textuel, comme cette balise qui sert simplement à créer un retour à la ligne en HTML :
A noter qu'on trouve aussi la balise équivalente dite "auto-fermante":
Les attributs html
Les éléments html vont également pouvoir contenir des attributs qu’on va alors placer au sein de la balise ouvrante de ceux-ci. Pour certains éléments, les attributs vont être facultatifs tandis que pour d’autres ils vont être obligatoires pour garantir le bon fonctionnement du code HTML.
Par exemple l’élément a qui est l’abréviation de « anchor » ou « ancre » en français. Cet élément pointe un endroit bien précis qui peut être sur la page même ou sur une autre page. Il va principalement nous servir à créer des liens vers d’autres pages.
Pour le faire fonctionner correctement, nous allons devoir lui ajouter un attribut href pour « hypertexte reference » ou « référence hypertexte » en français.
En effet, c’est l’attribut href qui va nous permettre de préciser la cible du lien, c’est-à-dire la page de destination du lien en lui passant l’adresse de la page en question en valeur:
Nous verrons d'autres attributs lors de la création de la page web
Remarque : Dans une page web, on peut accéder au code source html en cliquant droit et en sélectionnant "Code source de la page" ... Le faire pour le site blaisesnt.go.yo.fr
Structure minimale d'une page html
Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement comporter certains éléments et suivre un schéma précis.
Vos pages HTML devraient toujours être valides pour les raisons évoquées ci-dessus. En effet, une page non valide ne sera pas comprise par le navigateur qui va alors potentiellement mal l’afficher voire dans certains cas ne pas l’afficher du tout.
Voici ci-dessous le code minimum pour créer une page HTML valide:
Tout d’abord, nous devrons toujours démarrer une page HTML en précisant le doctype qui indique le type de document.
Puis on va préciser le langage utilisé, à savoir le HTML dans notre cas.
A l’intérieur de l’élément html, nous devons à nouveau indiquer obligatoirement deux éléments qui sont les éléments head et body : l'en-tête (head) contient des informations générales, comme le titre de la page encore le type d’encodage utilisé pour que celui-ci puisse afficher les caractères de texte correctement), élément body va lui contenir tous les éléments définissant les contenus « visibles » de la page : c'est là que nous allons écrire.
A l’intérieur du body on respecte la logique des imbrications :
Mise en page : l'indentation
Le but de l’indentation est de nous permettre de discerner plus facilement les différents éléments ou parties de code. Regardez plutôt les deux exemples suivants :
Travail à faire: JE CONSTRUIS MA PROPRE PAGE WEB
Pour cet exercice, pas de capture d'écran!, les fichiers créés sont à sauvegarder dans le dossier Theme_3.
Dans le dossier Theme_3, créer un sous dossier nommé images
Ouvrir l'application Notepad++ puis ouvrir le fichier .html disponible dans Echanges: il s'agit d'une structure de départ d'une page html.
Enregistrer le fichier html sous le nom index.html dans le dossier Theme_3
EN PARALLELE, double cliquer sur le fichier index.html dans le dossier Theme_3 pour ouvrir la page web en local (aucun nom de domaine pour cette page donc pas d'accès internet...): par la suite il faudra régulièrement réactualiser cet affichage pour voir l'évolution de son contenu en double cliquant sur le fichier html ou en utilisant F5 dans le navigateur.
Compréhension du fichier
Dans un premier temps, analysez le fichier et sa construction, vous devez reconnaître l'en-tête (head), l'élément "body", la balise orpheline de saut à la ligne
Les parties écrites en vert sont des commentaires et n'ont pas d'influence sur la page html
OBJECTIF : Obtenir une page web respectant la mise en page ci-dessous :
TRAVAIL 1 : réalisation de la page avec contraintes
1) MISE EN PAGE PAR DEFAUT SANS LE FICHIER CSS
a) Ajoutez les balises "strong"" aux 4 items des Informations générales : Année de sortie, Réalisateur, Acteurs principaux, Genre, afin de les afficher en gras.
b) Ajoutez les balises de mise à la ligne nécessaires
c) Les balises du type "h1" indiquent un titre de niveau 1. Ajoutez les balises "h2" à Informations générales, Résumé, Bande-Annonce et Sources
d) Enregistrez votre travail puis faire F5 dans votre navigateur pour rafraîchir la page. Admirez les changements.
2) COMPLETER LES INFORMATIONS
Choisissez votre film puis, à l'aide des sites web Allocine, wikipedia, etc..., renseignez les différentes informations de la page.
3) AJOUTER UNE IMAGE
a) Depuis un site web, télécharger le fichier image du film et la stocker dans le dossier images sous le titre : affiche
b) Pour ajouter une image dans une page HTML, il faut utiliser la balise 
. La ligne de code est déjà présente dans le fichier index.html.
La syntaxe à respecter est la suivante :
Le chemin vers notre fichier images intitulé affiche est en l'occurence (à partir du dossier Theme_3 dans lequel se situe le fichier html): images/affiche.ext (.ext désigne une extension du fichier image qui dépend du format d'enregistremnet, .png ou .jpg ou ...)
4) INTEGRER DU CONTENU DISTANT
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 Attention, bien cocher la case : Activer le mode confidentialité avancé. Pourquoi ?Le mode de confidentialité avancé empêche que les contenus intégrés visionnés par les utilisateurs dans le lecteur intégré influent sur leur expérience de navigation sur YouTube. En d'autres termes, les contenus regardés dans le lecteur intégré lorsque le mode de confidentialité avancé est activé ne sont pas utilisés pour personnaliser l'expérience de navigation sur YouTube, que ce soit dans le lecteur intégré ou lors de toute utilisation ultérieure de YouTube...
5) CREER DES LIENS HYPERTEXTES
Voyons comment réaliser ces liens avec du HTML. Un lien permet simplement de se déplacer vers une autre page HTML.
Le 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.
Voici la syntaxe :
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.
--- Vous devriez obtenir une page comme cela :
6) AMELIORER LA MISE EN PAGE GRACE A UN FICHIER CSS
le rendu obtenu jusqu'à maintenant est le rendu par défaut des différentes balises; nous allons donc ajouter une feuille de styles à notre page afin de la personnaliser à notre goût. Pour cela, copiez le code ci-dessous dans un nouveau fichier vierge de Notepad++:
Enregistrez-le dans le dossier Theme_3 en le nommant style.css
Il ne reste plus qu'à rajouter le lien (attention au chemin, prenez exemple sur le lien de votre image...) dans le bloc en-tête de notre page HTML en utilisant la balise :
Visualisez le rendu en le montrant au professeur puis personnalisez-le à votre guise en modifiant le fichier style.css
BIEN ENREGISTRER LA VERSION FINALE
Construire une belle page web sur le sujet de votre choix, votre page devra utiliser des styles variés, avoir des images , une ou plusieurs videos et des liens hypertextes. On pourra repartir du fichier de structure de base fourni et on pourra rechercher d'autres balises sur internet en autonomie ...
LA AUSSI, BIEN ENREGISTRER LA VERSION FINALE sous le nom pagelibre.html dans le dossier Theme_3
TRAVAIL 2 : réalisation d'une page libre et non guidée