Création de pages et de sites web
Premières séances : HTML en ligne (et hors ligne) Nous allons aujourd'hui voir comment créer une page web en HTML (Hypertext Markup Language). 1) Se rendre sur ce site : https://frederic-junier.org/SNT/Theme1_Web/SNT_Activite3_Web.html 2) Lire le point de cours n°1, et regarder l'exemple de page HTML, afin de comprendre quelles sont les balises importantes, comment elles sont placées, etc. 3) Faire l'exercice 3 (remettre les balises dans l'ordre). 4) Appeler (sans hurler, merci) le professeur pour qu'il contrôle votre travail. Ensuite nous allons voir comment créer une page HTML de A à Z en wysiwyg avec Glitch : 5) Se rendre sur https://glitch.com/ -Sign Up en haut à droite, Email Magic link (vous recevez alors sur votre boîte mail un code temporaire, vous servant à vous connecter à Glitch), il faut ensuite rentrer votre mail, aller sur votre boîte mail puis se servir du code reçu par mail. -Cliquer en haut à droite sur "new project", puis Glitch "hello webpage" -Cliquer sur les lunettes de soleils (Show) et choisir "Next to the code". Nous verrons ainsi facilement le résultat des modifications que l'on apporte au code. Cela permet de revoir comment décrypter l'environnement, les balises, etc. On peut enlever une ou des parties du code proposé au départ, afin de comprendre la structure, comment mettre en gras, comment sauter des lignes, etc. On peut aussi se référer aux document suivants pour mettre en gras, sauter des lignes, mettre des liens sous forme d'image, etc : http://www.delprat.org/cours/texte.htm http://www.delprat.org/cours/lien.htm http://www.delprat.org/cours/ http://www.aliasdmc.fr/courshtml/cours_html22.html 6) Le travail demandé est le suivant (toujours sur Glitch) : Créer une page (pas trop moche) contenant trois paragraphes, des titres (en gras), et un lien vers une autre page. 7) Appeler (toujours sans hurler) le professeur pour qu'il contrôle votre travail. 8) Pour les gros balèzes : aller voir le site suivant afin de voir comment gérer les pages de style (CSS), et faire le travail demandé pas à pas. 9) Nous allons maintenant essayer de créer plusieurs page web. Cela ne va pas être évident, car le clic droit n'est pas activé sur vos sessions. Il faudra bien suivre l'exemple donné au tableau. Pour créer un site internet (plusieurs pages) : lire la page suivante, afin d'apprendre à créer des pages un site internet complet (hors-ligne, avant de le faire héberger sur un serveur web). Une page simple peut s'écrire sous la forme :<!DOCTYPE html><html><head><title>Titre de la page</title></head><body>Cette page est une page toute simple</body></html>Le résumé de cours est ici. Pour faire des liens : http://www.delprat.org/cours/lien.htm Pour mettre le texte en gras, etc : http://www.delprat.org/cours/texte.htm Pour insérer une image : http://www.delprat.org/cours/image.htm Pour centrer une image ou un texte : relire le résumé de cours, ou lire ceci (exemple 2 à privilégier). On peut aussi lire cette page pour les images, elle est très claire.
Création d'un site internet du type jeu d'aventure textuel Un des premiers jeu de ce type a été créé en 1975. En voici un exemple (très court). 1) Rendez-vous sur https://twinery.org/ en utilisant chrome. Le site en fonctionne pas correctement dans l'établissement avec Firefox. 2) Use it Online (en haut à droite) 3) +Histoire (à droite) 4) Donnez un nom à l'histoire 5) Pour faire un lien d'une page vers une autre page, il faut écrire par exemple [[c'est ici que cela se passe->page bidule]] 6) Débrouillez-vous. Vous pouvez améliorer votre histoire en ajoutant des images, un fond, en changeant la couleur, etc. Plus d'explications ici pour ceux qui le souhaitent. On peut faire bien sûr un tel site internet "à la main", mais cela prend davantage de temps.
Création d'un site sans trop mettre les mains dans le cambouis Pour créer un site internet, on utilise souvent un logiciel externe et/ou un système de gestion de contenu. On peut penser par exemple à Spip, Joomla ou WordPress. SPIP (Système de publication pour l'Internet) est un logiciel libre destiné à la production de sites web. Joomla! est un système de gestion de contenu libre, open source et gratuit. Il est écrit en PHP et utilise une base de données MySQL. WordPress est un système de gestion de contenu gratuit, libre et open-source. Ce logiciel écrit en PHP repose sur une base de données MySQL et est distribué par la fondation WordPress.org. A noter qu'il existe une version payante de WordPress (WordPress.com) qui utilise/héberge le logiciel WordPress.org. Nous allons voir, après une présentation rapide de Spip et Joomla!, voir comment faire un site rapidement avec WordPress.org. Pour bien comprendre la différence entre la version libre de droit et gratuite (WordPress.org) et une hébergement et des outils payants (WordPress.com), on peut lire ceci. 1) Se rendre ici. 2) Cliquer sur "Créer son site web". 3) Il vous faut un mail à ce moment là. Créer un mail sur Protonmail par exemple, afin de ne pas donner votre adresse personnelle. C'est très sécurisé et rapide. 4) Suivez les indications et choisissez bien la version gratuite (hébergement gratuit). Je rappelle que le logiciel utilisé est bien libre de droit et gratuit (ce qui est payant c'est un hébergement de qualité, le support, certaines extensions, ce qui ne sera pas le cas ici). Lorsque nous serons plus avancé, nous verrons que l'on peut installer WordPress.org sur son propre serveur.