SNT : pages WEB

(1)

1

SNT : pages WEB

Une page WEB est transmise à un navigateur internet sous la forme de

plusieurs fichiers : le code source, le code css et les différents médias qui seront présentés (fichiers, images, sons, vidéos). C’est le navigateur qui reconstitue la page pour l’afficher à l’écran en fonction des différentes contraintes dues au matériel (HD,4K, écran de portable, etc)

Réaliser les exercices en appelant un professeur pour validation avant de commencer le suivant.

Le code source se compose des informations ou objets à afficher.

Le code css est la liste des propriétés graphiques des différents objets.

objets à afficher. Les autres fichiers sont les

jpg, les mp3, les mp4 , les pdf, etc objets à afficher.

(2)

2

EXERCICE No1 : citer 5 navigateurs les plus courants et deux éditeurs de texte.

EXERCICE No2 : télécharger le fichier index.txt depuis pronote et l’enregistrer dans son répertoire privé. Le renommer en index.htm

Avec un clic droit l’ouvrir avec le bloc-note de windows. Ce sera le code source.

Avec un double clic l’ouvrir avec votre navigateur favori.

Afficher les deux fenêtres en même temps à l’écran.

Dans le code source, modifier la phrase en indiquant votre véritable passion, enregistrer le bloc-note et dans la fenêtre navigateur utiliser la touche F5 pour rafraichir la page. Que remarquez-vous ?

Supprimer <br/> dans le code source, enregistrer et utiliser F5 dans le

navigateur, que se passe-t-il ? Quel est le rôle de la balise <br/> dans le code source ?

Navigateurs :

Editeurs de texte :

Que se passe-t-il si j’ajoute des sauts de lignes dans le code source ? Que se passe-t-il si j’ajoute des espaces dans le code source ? Comment forcer le navigateur à passer à la ligne ?

(3)

3

Ce « mot » est une balise HTML, elle indique au navigateur ce qu’il doit faire pour présenter la page à l’écran. La plupart des balises fonctionnent par paires (comme des parenthèses). Par exemple : un paragraphe commencera toujours par <p> (une balise ouvrante) et finira par </p> (une balise fermante).

Le code HTML débute toujours avec la balise <html> et se termine avec

</html>

Entre ces balises on trouvera le corps de la page entourée de <body> et

</body> c’est lui contient l’ensemble des informations affichées

Au-dessus du corps, on trouvera la tête entourée de <head> et </head>

qui contient des informations sur les propriétés de la page (par exemple le titre de l’onglet qui sera affiché dans le navigateur)

EXERCICE No3 : ajouter la séquence suivante juste après <html> et juste avant

<head>

<title>Mon titre à moi</title>

</head>

<body> dans le fichier source

précédent enregistrer puis rafraichir la page du navigateur avec F5, que remarquez-vous ? Changer le titre comme bon vous semble.

EXERCICE No4 : un peu de couleurs.

Ouvrir le fichier texte nommé monstyle.txt et le renommer en monstyle.css dans le même répertoire que index.htm

Copier/coller la séquence suivante dans le fichier index.htm entre les balises

<head> et </head> :

<link type="text/css" rel="stylesheet" href="monstyle.css" />

Puis enregistrer et rafraichir la page du navigateur avec F5

(4)

4

Quel est le rôle de background ? Quel est le rôle de color ?

Dans monstyle.css changer les couleurs indiquées par celles de votre choix parmi : red, blue, black, white, yellow, green, gray, fushsia, navy.

Puis enregistrer et rafraichir la page du navigateur avec F5 Note1 : si F5 ne produit rien alors effectuer Ctrl+F5

Note2 : on fera attention de laisser les : et le ; à chaque ligne.

En fait on peut régler plus finement les couleurs en utilisant le # comme le montre le site : https://htmlcolorcodes.com/fr/

Par exemple : background : #F9E79F ; produira un fond orangé.

En réalisant plusieurs choix de couleurs sur le site, que signifie selon vous ce code : #F9E79F ?

Dans le fichier CSS,

le mot background sert à : le mot color sert à :

(5)

5

EXERCICE No5 : mise en forme.

Ouvrir les fichiers exercice5.htm et exercice5.css dans des fenêtres de bloc note puis ouvrir de nouveau le fichier exercice5.htm dans un navigateur.

Quel est le rôle des balises <div …></div> du fichier .htm ?

Les propriétés graphiques de la partie appelée « trucAgauche » sont réglées dans le fichier .css.

Modifier ses dimensions puis enregistrer et rafraichir la page web du navigateur avec F5 (ou ctrl+F5)

Quelles sont les dimensions usuelles pour un écran HD ? Quel point de l’écran sert d’origine ?

Dans le fichier exercice5.htm ajouter une division après « trucAgauche » et avant la fin du « body » qui sera mise en forme par #trucAdroite que l’on trouve dans le .css

Dans le fichier exercice5.css modifier les propriétés de #trucAdroite pour que les deux objets sont placés l’un à côté de l’autre avec des bordures identiques.

(6)

6

EXERCICE No6 : ajouter une image.

Ouvrir le fichier exercice6.htm à la fois dans le bloc-note et dans le navigateur.

Pour insérer une image dans une page web il suffit d'écrire :

Mais on peut aussi être plus respectueux des règles de rédaction des pages web et donner un titre alternatif qui s'affichera si le fichier n'existe pas :

On peut aussi donner des dimensions à l'image avec :

Pour centrer l'image verticalement sur le texte il ajoute encore une information dans l'appel :

<img src="avengers.jpg" style="width:60px;vertical-align:middle;"

alt="Les avengers"/>

Enfin on peut appliquer un style extérieur qui rédigé dans un css avec :

Ce qui permet d’alléger un peu le code et de mieux séparer le contenu (les informations à afficher) et le contenant (la forme que prendront ces informations)

Entre les balises <body> et </body> effacer tout sauf la ligne :

Enregistrer votre fichier dans le bloc-note et rafraichisser l’affichage du navigateur avec la touche F5

Ouvrir exercice6.css dans le bloc-note, modifier les propriétés de la classe mesimages, enregistrer et appuyer sur F5 dans votre navigateur. On modifiera les dimensions, les couleurs, les nombres de points (pt) ou de pixels (px).