Ce premier atelier conduit à une recherche documentaire sur un concept ou une personne en relation avec l'informatique.
Une restitution sous la forme de page web permettra de partager les résultats de ces recherches.
Définissons l'informatique et les sciences du numérique
Chaque binôme s'empare d'un sujet parmi les propositions suivantes :
- La naissance de l'informatique
- Quelle est la place du numérique dans les objets de la vie quotidienne ?
- Qu'est-ce qu'un système d'exploitation ?
- Logiciel libre, propriétaire
- Qu'est-ce qu'un algorithme ? Un langage de programmation ? Pourquoi y a-t-il tant de langages ?
- Internet ?
- Comment fonctionne Wikipédia ?
On traitera d'une des questions précédentes.
- On s'aidera bien entendu de recherches sur le web.
Recherche sur le web ? Pourquoi ne dit-on pas recherches sur l'Internet ? Cette question est l'une de celles auxquelles nous allons répondre ici !Il n'est cependant pas interdit de fréquenter une bibliothèque !
- On pourra consulter directement Wikipédia.
- On profitera des articles d')i(nterstices
- On ne manquera pas de citer ses sources en fournissant par exemple leur URL.
Une page HTML de restitution
Il s'agit de présenter une synthèse du travail de recherche réalisé sur une des questions précédentes. Pour produire un tel document, un format adapté doit étre choisi. Il faut pouvoir structurer le document : indiquer son titre, le titre de parties ou de chapitres. Il faut pouvoir mettre en évidence certains mots, par exemple en gras ou en italique. Des tableaux, des schémas, des images doivent pouvoir étre insérés dans le document. De multiples formats sont utilisés. Parmi l'ensemble des formats possibles, nous retiendrons le HTML (Hypertext Markup Language).
Le format HTML est particuliérement utilisé pour produire les pages web. Un fichier HTML est un simple fichier texte. Il est donc possible de le produire ou modifier à l'aide d'un éditeur de textes.
Un logiciel de traitement de texte n'est pas un éditeur de textes. Cette question fait l'objet d'une des recherches menées ici !
Quel éditeur de textes utiliser ? Selon l'environnement de travail, on pourra choisir Notepad++ (qui ne fonctionne que sous Windows), Kate ou Kwrite sous Linux, Bluefish, ou l'incontournable couteau suisse de l'édition, Emacs (sans vouloir attiser la guerre des éditeurs...).
Ce fichier HTML qui n'est qu'un simple fichier texte va étre interprété par un navigateur web qui rendra les titres sous une certaine forme, affichera en gras ou en italique les caractéres devant l'être, permettra de suivre des liens sur d'autres pages web ou d'autres sites web, etc.
Les navigateurs web les plus utilisés sont Firefox, Chrome, Internet Explorer, et Safari.
Nous recommandons l'utilisation de Firefox.
Voir le code source d'une page. Dans le menu du bouton droit de la souris, sélectionner "Code source de la page" (sous Firefox) ouvre une fenétre qui affiche le code HTML de la page.
Essayez avec la page premier-html.html.
Soit le code HTML suivant :
<!-- Ceci est mon premier fichier HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Mon premier fichier HTML</title>
</head>
<body>
<h1>Section une</h1> <!-- titre de la 1re section -->
<p>Mon premier paragraphe. Ces <b>deux mots</b> sont en gras.</p>
<p>Ce second paragraphe termine la section une.</p>
<h1>Section deux</h1>
<p>Que pensez-vous du paragraphe suivant.</p>
<p>Martinus agens illas provincias pro praefectis aerumnas innocentium
malivolus tandem desineret
quieti coalitos homines in aperta pericula
proiectare.</p>
</body>
</html>
Ce contenu a été sauvegardé dans un fichier nommé
premier-html.html. Vous pouvez en visualiser le rendu en
cliquant sur le lien suivant :
visualisation du rendu
de premier-html.html.
Rendu de mon premier fichier HTML.
Observez attentivement le rendu dans votre navigateur du fichier
premier-html.html en parallèle du code HTML de ce
fichier.
- Comment le titre de la page est-il rendu ?
- Comment les caractéres entre
<!--et-->sont-ils rendus ? - Les caractéres espaces sont-ils significatifs ?
Le format HTML
Détaillons le code HTML.
En premier lieu, remarquons que le code HTML est structuré à l'aide de balises.
- Les balises sont encadrées par les caractéres
<et>ou<et/>. - Les balises s'utilisent comme des parenthéses : à la balise
ouvrante
<h1>correspond la balise fermante</h1>. - Les balises peuvent étre imbriquées, par exemple les balises
<b>-</b>des deux mots rendus en gras au sein des balises<p>-</p>du premier paragraphe.
Notre exemple débute par une ligne
<!DOCTYPE html>
qui indique que le fichier respecte la norme HTML.
Les balises utilisées dans l'exemple précédent sont :
- Les balises
<html>-</html>délimitent le code HTML qui comporte deux grandes parties, l'entéte et le corps. - Les balises
<head>-</head>délimitent l'entête du document. Cet entête permet de préciser des informations générales sur le document tel que le titre comme nous le faisons ici. L'entête contient éventuellement d'autres informations tels qu'une bréve description du document, des mots-clés, le nom du ou des auteurs du document, etc.Quelle est l'utilité des informations fournies dans l'entête d'un document HTML ? à quoi peuvent servir les mots-clés ou la description fournis ? Nous avons déjé vu comment le titre du document pouvait étre rendu. Toutes les informations contenues dans l'entête sont elles exploitées par le navigateur web ? - Les balises
<body>-</body>définissent le corps du document. C'est dans ce corps que nous allons trouver le contenu du document : texte, images, etc. -
Les balises
<h1>-</h1>indiquent le titre d'une section de premier niveau. Des titres de niveaux inférieurs peuvent être définis, par exemple<h3>-</h3>, puis<h3>-</h3>, etc.Les titres de sections sont des éléments importants d'un document HTML. Deux aspects sont à considérer :
- le rendu par le navigateur web, par exemple en gras, avec une taille de caractéres plus importante, permet au lecteur humain d'identifier le titre ;
- les titres de section mettent en évidence la structure du document. Cette structure est indispensable. Elle permet par exemple d'indexer automatiquement les pages web, de créer automatiquement des sommaires, etc.
- Les balises
<p>-</p>délimitent les paragraphes du texte. Les balises
<b>-</b>demandent au navigateur web de produire un rendu en gras d'une partie du texte. Il est également possible d'utiliser les balises<i>-</i>pour demander un rendu en italique.Ces deux rendus permettent de mettre en évidence des parties du texte.
Deux autres balises vont nous être utiles. L'une pour insérer des liens hypertextes, l'autre pour insérer des images dans une page HTML.
Un lien hypertexte est une référence sur un document, une référence sur une page web ou un site web. En cliquant sur un lien hypertexte, on atteint la page ou le site référencé.
La page web est identifiée par son adresse, on parle d'adresse web, ou d'URL (Uniform Resource Locator). C'est l'adresse qui apparaît dans la barre d'adresses de votre navigateur. Par exemple, l'adresse du site web Wikipédia est
http://wikipedia.fr/
l'adresse de la page de Wikipédia de l'article à propos de URL est :
http://fr.wikipedia.org/wiki/URL
Dans une page HTML, ces liens vont pouvoir étre associés à un texte qui sera rendu d'une maniére particuliére (par exemple souligné en bleu) pour marquer qu'il s'agit d'un lien hypertexte.
En HTML, on utilise la balise
<a>-</a>
avec l'attribut href="adresse_web" ajouté à
l'intérieur de la balise. Par exemple
<a href="http://wikipedia.fr" >Wikipedia</a>
va produire le texte "Wikipedia" à partir duquel on pourra
atteindre le site http://wikipedia.fr. é partir de
<a href="http://fr.wikipedia.org/wiki/URL" >Qu'est-ce qu'une URL ?</a>
on atteindra la page web de Wikipédia consacrée au terme URL.
Des images peuvent étre insérées dans des documents HTML : Connaissez-vous Wikimedia Commons, la médiathéque libre des projets Wikimedia ? Son logo est le suivant :
Wikimedia Commons est un dépét de millions d'images que vous pouvez utiliser. Le logo de Wikimedia Commons est disponible à l'adresse
http://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg
On utilise la balise <img> pour insérer cette
image dans un document HTML. L'adresse web de l'image est précisée
é l'aide de l'attribut src="adresse_de_l_image"
ajouté à l'intérieur de la balise :
<img src="http://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" />
Nous remarquons que la balise img s'utilise seule,
sans balise fermante correspondante. Dans ce cas particulier on remarque
que la fin de balise se note />
img sont
illustrées sur la page
dédiée, visualisez le code HTML pour vous en
inspirer. Observez les changements de mise en page quand vous
agrandissez ou diminuez la largeur de la fenêtre.
-
Créez une page html affichant les images suivantes :
<img src="http://maps.googleapis.com/maps/api/staticmap?center=50.609731,3.137511&zoom=17&size=400x400&sensor=false">et<img src="http://maps.googleapis.com/maps/api/staticmap?center=50.609731,3.137511&zoom=18&maptype=satellite&size=400x400&sensor=false"> - Recherchez les coordonnées GPS de votre lycée et modifiez le code html précédent pour afficher une page contenant la carte de votre lycée.
Votre première page HTML
Rappel de la strucutre proposée :
<!-- Ceci est mon premier fichier HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Mon premier fichier HTML</title>
</head>
<body>
<h1>Section une</h1> <!-- titre de la 1re section -->
<p>Mon premier paragraphe. Ces <b>deux mots</b> sont en gras.</p>
<p>Ce second paragraphe termine la section une.</p>
<h1>Section deux</h1>
<p>Que pensez-vous du paragraphe suivant.</p>
<p>Martinus agens illas provincias pro praefectis aerumnas innocentium
malivolus tandem desineret
quieti coalitos homines in aperta pericula
proiectare.</p>
</body>
</html>
