Coucoudesignnumerique : Différence entre versions
(→Le squelette HTML) |
|||
| (15 révisions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
== Le protocole == | == Le protocole == | ||
| + | === 1. "Rédiger" === | ||
* Passez par le poste de travail "Rédiger" | * Passez par le poste de travail "Rédiger" | ||
* consultez l'adresse du wiki https://designnumerique.be/wiki/Coucoudesignnumerique | * consultez l'adresse du wiki https://designnumerique.be/wiki/Coucoudesignnumerique | ||
* copiez/collez le "squelette" html de la page du wiki dans un éditeur de texte (attention! un éditeur de texte qui permet de traiter du texte "brut". Exemple: vscodium, vim, gedit, nano, notepad, notepad++, textedit en format "texte", brackets) | * copiez/collez le "squelette" html de la page du wiki dans un éditeur de texte (attention! un éditeur de texte qui permet de traiter du texte "brut". Exemple: vscodium, vim, gedit, nano, notepad, notepad++, textedit en format "texte", brackets) | ||
| − | * Remplacez le contenu de la balise <body> avec ce que vous souhaiteriez partager pour vous présenter. Notez la présence des balises <a> pour faire un lien, <img> pour ajouter une image < | + | * Remplacez le contenu de la balise <code>body</code> avec ce que vous souhaiteriez partager pour vous présenter. Notez la présence des balises <code>a</code> pour faire un lien, <code>img</code> pour ajouter une image <code>h1</h1></code> pour faire un titre, <code>h2</code> pour faire un sous-titre, <code>h3</code> pour faire un sous-sous titre. |
* Sauvegardez le fichier sur votre ordinateur sous le nom "index.html" dans un dossier portant votre nom, sans espace et sans majuscule. | * Sauvegardez le fichier sur votre ordinateur sous le nom "index.html" dans un dossier portant votre nom, sans espace et sans majuscule. | ||
| + | * N'hésitez pas à ajouter du CSS dans la balise <code>style</code> si vous le désirez. | ||
* Ajoutez le dossier sur une clé usb prévue. | * Ajoutez le dossier sur une clé usb prévue. | ||
| + | |||
| + | === 2. "Publier" === | ||
| + | * Transmettez la clé au poste de travail "Publier" qui se chargera de mettre en ligne votre page de présentation html. | ||
| + | * Vous avez maintenant une adresse personnelle sur le serveur web du cours <code>http://work.designnumerique.be/votrenom</code>! | ||
| + | * L'opérateur du poste "Publier" vous transmettra votre clé d'accès pour pouvoir modifier, ajouter, et gérer votre espace de publication personnel du cours. Cet espace est en partie public et mutualisé, prenez-en soin. | ||
| + | * Télécharger un logiciel ftp (Filezilla, Cyberduck...) et accédez à votre espace en ligne. | ||
| + | |||
| + | === 3. "Relier" === | ||
| + | * Lire les présentations de chacun·e et créer une série de liens vers les pages des autres étudiant·es dans le corps du texte en fonction de vos affinités, liens d'amitié, souhaits de rencontre ou de collaboration sur des sujets, partage de ressources ou tout autre façon de créer du lien. | ||
== Le squelette HTML == | == Le squelette HTML == | ||
| Ligne 14 : | Ligne 25 : | ||
<meta http-equiv="content-type" content="text/html; charset=utf-8"> | <meta http-equiv="content-type" content="text/html; charset=utf-8"> | ||
<title>le titre de la page</title> | <title>le titre de la page</title> | ||
| + | <style> p {color: red; }</style> | ||
</head> | </head> | ||
<body> | <body> | ||
| Ligne 20 : | Ligne 32 : | ||
<p>un paragraphe</p> | <p>un paragraphe</p> | ||
<p>un autre paragraphe</p> | <p>un autre paragraphe</p> | ||
| + | <p> | ||
| + | Je suis en train de créer un lien vers | ||
| + | <a href="https://designnumerique.be">la page d'accueil de design numérique</a>. | ||
| + | </p> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version actuelle datée du 26 septembre 2024 à 14:33
Le protocole
1. "Rédiger"
- Passez par le poste de travail "Rédiger"
- consultez l'adresse du wiki https://designnumerique.be/wiki/Coucoudesignnumerique
- copiez/collez le "squelette" html de la page du wiki dans un éditeur de texte (attention! un éditeur de texte qui permet de traiter du texte "brut". Exemple: vscodium, vim, gedit, nano, notepad, notepad++, textedit en format "texte", brackets)
- Remplacez le contenu de la balise
bodyavec ce que vous souhaiteriez partager pour vous présenter. Notez la présence des balisesapour faire un lien,imgpour ajouter une imageh1pour faire un titre,h2pour faire un sous-titre,h3pour faire un sous-sous titre. - Sauvegardez le fichier sur votre ordinateur sous le nom "index.html" dans un dossier portant votre nom, sans espace et sans majuscule.
- N'hésitez pas à ajouter du CSS dans la balise
stylesi vous le désirez. - Ajoutez le dossier sur une clé usb prévue.
2. "Publier"
- Transmettez la clé au poste de travail "Publier" qui se chargera de mettre en ligne votre page de présentation html.
- Vous avez maintenant une adresse personnelle sur le serveur web du cours
http://work.designnumerique.be/votrenom! - L'opérateur du poste "Publier" vous transmettra votre clé d'accès pour pouvoir modifier, ajouter, et gérer votre espace de publication personnel du cours. Cet espace est en partie public et mutualisé, prenez-en soin.
- Télécharger un logiciel ftp (Filezilla, Cyberduck...) et accédez à votre espace en ligne.
3. "Relier"
- Lire les présentations de chacun·e et créer une série de liens vers les pages des autres étudiant·es dans le corps du texte en fonction de vos affinités, liens d'amitié, souhaits de rencontre ou de collaboration sur des sujets, partage de ressources ou tout autre façon de créer du lien.
Le squelette HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>le titre de la page</title>
<style> p {color: red; }</style>
</head>
<body>
<img src="adressedelimage">
<h2>un titre</h2>
<p>un paragraphe</p>
<p>un autre paragraphe</p>
<p>
Je suis en train de créer un lien vers
<a href="https://designnumerique.be">la page d'accueil de design numérique</a>.
</p>
</body>
</html>
