www.mesmaths.com

3-URL

Florent Girod — 2023-06-20T11:37:38Z

qu'est-ce que c'est ?

Dans la barre d'adresse de votre navigateur web vous trouverez, quand vous visitez un site des choses du genre : http://www.mesmaths.com/spip.php?article404

Nous avons déjà parlé des parties "http" et de "www".

La partie "/spip.php ?article404" s'appelle une URL.

Le sigle URL (de l'anglais : Uniform Resource Locator, littéralement « localisateur uniforme de ressource »), désigne le nommage uniforme d'une ressource localisée (par exemple un fichier).

L'URL indique « l'endroit » où se trouve une ressource sur un ordinateur. Un fichier peut se trouver dans un dossier qui peut lui-même se trouver dans un autre dossier... On parle d'une structure en arborescence, car elle ressemble à un arbre à l'envers :

structure en arborescence

Comme vous pouvez le constater, la base de l'arbre s'appelle la racine de l'arborescence et se représente par un /

chemins

Chemin absolu ou chemin relatif

Pour indiquer la position d'un fichier (ou d'un dossier) dans l'arborescence, il existe 2 méthodes :

indiquer un chemin absolu

Le chemin absolu doit indiquer « le chemin » depuis la racine.

Par exemple l'URL du fichier fichier3.jpg sera :

/dossier2/dossier3/fichier3.jpg

Remarquez que nous démarrons bien de la racine / (attention les symboles de séparation sont aussi des /)

indiquer un chemin relatif

Imaginons maintenant que le fichier fichier1.css fasse appel au fichier fichier3.jpg (comme un fichier HTML peut faire appel à un fichier CSS).

Il est possible d'indiquer le chemin non pas depuis la racine, mais depuis le dossier (dossier2) qui accueille le fichier1.css, nous parlerons alors de chemin relatif ; pour cette même arborescence, il s'écrit :

dossier3/fichier3.jpg

Remarquez l'absence du / au début du chemin : c'est cela qui nous permettra de distinguer un chemin relatif et un chemin absolu.

Imaginons maintenant que nous désirions indiquer le chemin relatif du fichier fichier1.css depuis l'intérieur du dossier 4. Comment faire ?

Il faut « remonter » d'un « niveau » dans l'arborescence pour se retrouver dans le dossier dossier2 et ainsi pouvoir repartir vers la bonne « branche ». Pour ce faire il faut utiliser 2 points : ..
Cela donne :

../dossier2/fichier1.css

Il est tout à fait possible de remonter de plusieurs « crans » : ../../ depuis le dossier dossier4 permet de « retourner » à la racine.

A faire 1

Soit la structure en arborescence suivante :

Le contenu du fichier "fichier7.odp" utilise le fichier "fichier5.svg".

Donner le chemin relatif qui devra être renseigner dans le fichier "fichier7.odp" afin d'atteindre le fichier "fichier5.svg".

réponse 1

../dossier2/dossier3/fichier5.svg

A faire 2

Soit la structure en arborescence suivante :

Donner le chemin absolu permettant d'atteindre le fichier "fichier6.html".

réponse 2

/dossier2/dossier4/fichier6.html

Remarque : Sous Windows, ce n'est pas le slash qui est utilisé, mais l'antislash (\). Pour ce qui nous concerne ici, les chemins réseau (et donc le web), pas de problème, c'est le slash qui est utilisé.

architecture et liens hypertextes

Architecture d'un site et liens hypertextes

Imaginons un site WEB sur « Asterix » hébergé sur un serveur http de type « apache ». Ce site contient plusieurs pages contenues dans le répertoire « localweb ». Les fichiers html ont été organisés, stockés par thèmes dans des dossiers.

Le point de départ pour la navigation sur le site est la page index.html.

Elle représente le point de départ de l'arborescence du site.

La navigation sur le site, pour passer d'une page html à une autre se fait par l'utilisation des liens hypertextes (décrits dans l'activité HTML).

Un petit rappel :

la balise hypertexte Visitez la page Idéfix sur la fichier "index.html" permet de lancer le fichier "Idefix.html" en suivant le chemin relatif "personnages/Idefix.html" de la structure arborescence www.

A faire

1) Téléchargez le dossier .zip ci-dessous :

2) Copiez le dossier "www" dans votre espace de travail.

3) Ouvrez chacun des dossiers dans Notepaad++

4) Ouvrez la page 'index' dans un navigateur.

5) Observez le passage d'une page à l'autre, le code qui l'a permis.

6) Complétez la page "Idéfix" afin qu'elle donne l'accès à l'ensemble des pages, comme c'est le cas de la page "Astérix"

7) Ajouter du texte (quelques mots) sur les pages "Le Domaine des Dieux" et "Le Combat des Chefs"

8) Observez l'ensemble du résultat.

A toi maintenant

Tu as maintenant tous les éléments (HTML / CSS / URL) pour créer une page web qui contiendra :

une page d'accueil
une page servant de 'carnet de bord' pour la SNT sur laquelle tu noteras ce qui a été fait à chaque séance.
une page pour chaque thématique étudiée :
- web
- internet
- informatique embarquée
- photographie numérique
- réseaux sociaux
- traitement de données
- localisation, cartographie

2-CSS

Florent Girod — 2023-06-20T11:37:32Z

pourquoi ?

La page HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise pratique). Le HTML s'occupe uniquement du contenu (texte, images, liens, etc.)

Pour tout ce qui concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).


 
 
 
 mon site
 
 
 Ceci est un titre

 ceci est un paragraphe Avez-vous tout compris ?

Si on saisit ce code sur une page (comme on l'a fait lors des séances précédentes) cela donne ...

... vous constatez que le contenu y est, mais on reste sur sa fin pour ce qui concerne la mise en page !

résultat

un peu de style !

Téléchargez et enregistrez ces deux documents dans votre espace de travail :

Il reprend le document .html précédent et le document .css ci-dessous :

h1
 {
 text-align: center;
 background-color: red;
 }
 p
 {
 font-family:Verdana;
 font-style: italic;
 color: green;
 }

Pour l'instant le CSS n'est pas appliqué à la page html ; pour ce faire, il faut modifier le code HTML en ajoutant une ligne qui va permettre d'associer le code CSS à notre page de la manière suivante :

à saisir entre les balises ……

Faites ce travail et observez la nouvelle page ... un peu plus stylée !

résultat

plus de styles !

Complétez le code CSS sur votre fichier style.css avec :

#para_1
 {
 font-style:italic;
 color: blue;
 }

Modifiez une ligne du code HTML de votre page de la manière suivante :

ceci est un paragraphe Avez-vous tout compris ?

Testez votre code à l'aide d'un navigateur web. Que s'affiche-t-il dans la fenêtre ?

résultat

image

Insérez une image dans votre code html et ajoutez à votre fichier style.css le code suivant :

Img
 {
 position: absolute;
 top:100px;
 left:30%;
 width:300px;
 padding:10px;
 margin:20px;
 border:2px solid blue;
 }

Testez votre page html à l'aide d'un navigateur web :

que s'affiche-t-il dans la fenêtre ?
que remarquez-vous si vous agrandissez ou diminuez la taille de la fenêtre du navigateur ?

réponses

On obtient :

Si on modifie la taille de la fenêtre du navigateur, l'image conserve sa taille (300 pixels) mais elle sa position s'adapte en largeur car elle a été réglée par un pourcentage (30 %)

1-HTML

Florent Girod — 2023-06-20T11:37:25Z

en amont

Dans votre espace de travail (sur l'ordinateur, la zone qui porte votre identifiant) :

créer un dossier SNT
créer un sous dossier 'temp'
créer un sous dossier 'mon_site'
dans ce sous dossier, créer un sous dossier 'images'

Les documents qui seront faits dans cette séance seront stocker dans cet espace.

A la fin de la séance, si vous voulez retrouver ces documents depuis n'importe quel ordinateur connecté à Internet, télécharger le dossier 'mon_site' dans votre cloud "École Directe".

Au fur et à mesure de votre avancement, vous pourrez renouveler l'opération.

Si vous voulez faire fonctionner votre site depuis chez vous, il faudra recréer les mêmes arborescences que celles faites sur le poste occupé.

Sinon, vous pouvez reprendre le dossier dans son intégralité sur une clé usb.

c'est quoi ?

Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets).

Dans un premier temps, nous allons exclusivement nous intéresser au HTML.

Qu'est-ce que le HTML ?

Voici la définition qu'en donne Wikipedia :

« L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage permettant d'écrire de l'hypertexte, d'où son nom. »

Pour l'instant, nous allons retenir deux éléments de cette définition :

« conçu pour représenter les pages web » ;
« un langage de balisage ».

compléments

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....) :

afficher du texte
afficher des images
proposer des hyperliens (liens vers d'autres pages web)
afficher des formulaires
afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation (comme Python par exemple), ici, pas question de conditions, de boucles... C'est un langage de description.

conception d'une page

Une page HTML est ainsi un simple fichier texte avec l'extension « .html » ou « . htm » contenant des balises (parfois appelées marqueurs ou tags en anglais) permettant de mettre en forme le texte, les images, ….

En HTML tout est une histoire de balise que l'on ouvre et que l'on ferme :

une balise ouvrante de la forme ;
une balise fermante de la forme .

Un exemple de page web :


 
  
 Titre de ma page html 
 
 
 corps de la page, ce qui apparait dans la fenêtre principale du navigateur.

A faire

Faites la liste de tous les couples de balises présents dans ce code (balise ouvrante et balise fermante) en notant leur syntaxe.
En "traduisant" leur nom, dites à quoi elles servent.

correction

et : indique que l'on va taper du code html
et : ce qui est entre ces balises sera en 'tête' de la page
et : le titre est écrit entre ces deux balises
et : c'est le corps du texte qui se trouve ici
et : permet d'écrire en gras (« bold » en anglais)

compléments

d'autres balises :

et pour écrire en italique
et pour souligner (underline)

il existe des balises dites orphelines ; nous en présentons deux importantes :

: pour un retour à la ligne
: pour insérer une image

une page

Écrire le code source d'une page html qui :

affichera : « Bonjour et bienvenue sur mon site : Sciences Numériques et technologie »
aura pour titre : « SNT ».

Pour écrire de code, on utilise le logiciel « Notepad++ » et un navigateur (« Mozilla » par exemple)

mode d'emploi

Démarrer le logiciel Notepaad++ et choisir dans l'onglet "Langage", "HTML".
Enregistrer votre document Notepaad++ dans votre espace de travail de l'ordinateur (il s'enregistrera bien au format .html si vous avez choisi ce langage auparavant) au nom de votre choix.
L'ouvrir à l'aide d'un navigateur (comme Mozilla)
A présent, si vous faites des modifications sous Notepaad++ (et que vous les enregistrez !), vous les observerez sur le navigateur après rafraîchissement de le page (par F5).

remarque : vous pouvez vous baser sur le code vu précédemment en faisant un copier/coller et en faisant les modifications nécessaires.

correction

Voici le code à taper :


 
  
 SNT 
 
 
 Bienvenue sur mon site  :  Sciences Numériques et Technologie

complément

Supprimez la balise dans le document Notepaad++, enregistrez-le et rafraîchissez la page ... que constatez-vous ?

C'est en rapport avec l'encodage des symboles et notamment la gestion des accents.

les attributs

Les attributs sont les options des balises : ils viennent les compléter pour donner des informations supplémentaires.

L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur.

Exemple : insertion d'une image


 
 Titre de ma page html

La balise a, dans ce cas, deux attributs :

L'attribut « src » : désigne l'arborescence permettant de trouver le fichier « LaPhotoDeMaMaison.jpg ».
L'attribut « alt » : "info-bulle" affichée au survol de la photo par la souris.

A faire

Après un saut de ligne, insérer l'image de votre choix sur la page web faite précédemment.

correction

Après avoir placé une image (ici nommée « monlycee.jpg ») dans un dossier "images" situé au même niveau d'arborescence que le document en .html, on complète le code précédent pour obtenir :


 
  
 SNT 
 
 
 Bienvenue sur mon site  :  Sciences Numériques et Technologie

liens externes

Les liens hypertextes (ancrages) sont des éléments d'une page HTML permettant aux internautes de naviguer vers une nouvelle page lorsque l'on clique dessus.

Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles.

Ils permettent notamment de naviguer :

vers une autre page HTML du site (lien local)
vers un autre site (lien externe)
vers un autre endroit de la page sur laquelle on est situé.

Lien externe :

Un lien externe est un lien vers une page pointée par son URL (Uniform Resource Locator).

C'est un lien vers un autre site ; il s'écrit sous la forme suivante :

texte

Exemple :

un super site !

La balise paire …… (la lettre pour ancrage) est utilisée pour encadrer le texte qui va devenir un lien dans la page.

Dans l'exemple précédent, http://www.mesmaths.com va devenir un lien et apparaitra de ce fait en bleu souligné.

href="…………………" est un attribut de la balise paire …… permettant de cibler le fichier que l'on va consulter quand on va cliquer sur le lien.

A faire

Insérer un lien vers le site : www.externatnotredame.fr après un saut de ligne sur votre document en .html

correction


 
  
 SNT 
 
 
 Bienvenue sur mon site  :  Sciences Numériques et Technologie 

 

  mon lycée

0-plan de travail

Florent Girod — 2023-06-20T11:37:13Z

1ère séance

en salle informatique, par demi-groupes

présentation du thème et des objectifs
1-HTML suivre les consignes sur le site

2ème séance :

En salle de classe, classe entière

travail sur la notion de page-rank (fiche TI partielle)

prise de conscience des liens créés à son insu lorsque l'on pointe vers un site

3ème séance

en salle informatique, par demi-groupes

2-CSS
3-URL
selon l'avancement, page web personnelle

pour la séance suivante : page personnelle à avancer

4ème séance :

En salle de classe, classe entière

histoire du web : exposé ?
les points de vigilance par rapport au web : extrait du film 'la fabrique du mensonges'
le navigateur
modèle client serveur

pour la séance suivante : page personnelle à avancer

QCM d'entraînement / évaluation ?