Formation et pratique du numérique


Création d’un site web ou d'un blog.

  22 janvier 2022

La création d'un site web ou d'un blog ne demande plus d'importante connaissance des langages HTML et CSS mais elles sont préférables. Les créations de sites présentées ici sont gratuites et en ligne. Mais comme toujours la gratuité est possible si la taille de ces sites est peu importante, alors pour continuer il faudra passer à une version payante.

 

Création d’un espace web avec W3shool.com

Pour réaliser un site web, il faut d'abord avoir une bonne connaissance du langage XHTML ainsi que le langage CSS et les feuilles de style afin que le site ainsi créé puis être interprété parfaitement avec les navigateurs modernes. Les sites ainsi réalisés doivent conforment aux normes du W3C.

Le World Wide Web Consortium (W3C) développe des standards internationaux pour le web : HTML, CSS et bien d’autres. Les standards web du W3C sont appelés Recommandations du W3C.

Pour la réalisation de ce site, nous nous sommes rapprochées des sites de w3school :

Pour l’étude des langages HTML et CCS voir le site de w3schools.com

Pour les exemples et la création des modules voir le site W3Scools How To

Pour créer un site web les principales étapes sont :

Pour la création de votre premier site web, nous avons choisi une création entièrement en ligne sur le site "Spaces" de w3shool.com qui convient parfaitement pour la création d’un premier site web. Ainsi la formation, la création complète du site et sa diffusion sont faites avec un seul et unique site.

Vous devez donc créer un compte sur le site de w3schools.com

Ainsi vous pouvez créer votre espace, nous avons ici choisi de démarrer avec une page blanche.

Nous pouvons alors continuer avec la création de notre site en lui attribuant l’adresse web de la forme : xxxxx.w3space.com qui sera l’URL de votre site.

Toutes les actions seront ainsi faites en ligne à partir de votre espace.

Trois pages ont donc été créé automatiquement :

Enfin nous avons la possibilité d’ajouter des pages, des vidéos, des images, etc., en cliquant sur le bouton "Upload files" et ajouter une nouvelle page en cliquant sur le bouton "New file".

Création de la page index.html

Pour créer cette page, nous allons modifier l’un des modèles de la rubrique How To de w3school : Mobile Navigation Bar

En cliquant sur le bouton "Try it Yourself" nous pouvons alors modifier la présentation de notre page index.html

Vous devez ensuite copier tous les codes CSS contenus entre les balises style dans la page styles.css.

Vous copier ensuite la totalité des codes dans la page index.html puis vous supprimer les codes CSS de la partie style, car il sont inutiles à cause de la liaison avec la feuille styles.html.

En cliquant sur le bouton "preview", vous visualiser cette page index.htlm.

Création du contenu de la page

Pour créer le contenu de la page, vous devez ajouter les titres, les sous-titres et également des modules que vous pouvez créer à partir du site How To de W3shools

Ce module est représenté dans l’exemple ci-dessus par le cadre rouge. Les codes html du module doivent toujours être dans une boîte <div> avec la class= "row"

Pour allez plus loin.

Créer un site avec W3school.com nécessite une bonne connaissance des langages HTLM et CSS. Cette application est réservée aux personnes utilisant la création de sites web traditionnelle avec des pages créées avec un éditeur de texte comme "Notepad ++" et éffectuer le transfert des fichiers avec un client FTP comme "FileZilla".

Avec l'application W3school.com, tout ce fait en ligne ca qui présente un avantage certain en termes de rapidité.

L'application est gratuite, mais elle ne permet pas de créer un site web normal. Il faut obligatoirement prendre un compte Pro au minimum.

 


Création d'un blog avec Blogger

Pour créer un blog gratuitement il suffit de se connecter à la page d’accueil de Blogger : cliquez ici pour démarrer

Puis se connecter avec votre compte Google.

Puis vous choisissez votre Thème que vous pouvez personnaliser

Vous devez compléter ou modifier les différents "gadgets".

Enfin vous devez compléter la rubrique "paramètre".

Vous êtes prêt pour rédiger votre premier article.

Dans le cas d’un blog, les articles seront classés en ordre décroissant en fonction de la date de création (date de création qui peut être modifiée à votre convenance).

Le module se présente comme un éditeur de texte classique avec la possibilité d’insérer des images et des vidéos.

Pour allez plus loin.

Avec blogger vous avez la possibilité de créer facilement et réellement un blog. Vous créez les articles au jour le jour comme un journal de bord, le dernier article sera mis en premier afin d'être vu par vos visiteurs. La priorité est donc mise à l'actualité, ce qui n'est pas le cas pour un site web.

En complément de vos articles, vous pouvez créer des pages visibles ou non à partir d'un menu.

Par défaut, le blog est public donc visible par tout le monde. Cependant vous pouvez restreindre sa diffusion pour votre famille, les membres de votre association, etc. en paramétrant l'accès en lecture.

L'affichage HTLM, permet la modification des pages pour :

  • Insérer une balise <iframe></iframe>
  • Créer un bouton cliquable
  • Ajouter une ligne de séparation
  • Modifier le style du titre d'un paragraphe par l'ajoute de style=""

Exemple de code a insérer

Bouton pour blogger

<button style="background-color: #04AA6D;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 20px;margin: 4px 2px;cursor: pointer;border-radius: 8px;"><a href="..." target="_blank">...</a></button>

Séparateur

<hr style="background-color: #e65c00; border-width: 0px; height: 4px;" />

 


Création d'un blog avec Vivaldi

Vivaldi s'impose comme une alternative à Google Chrome, Edge ou Firefox avec des fonctions intégrées comme son service de mail gratuit et de ses forums de discussion, Vivaldi.net vous offre un moyen d’expression supplémentaire par la création d’un blog personnel, dont l’adresse sera http://username.vivaldi.net, tout simplement !

La création de ce blog est assurée par un module Wordpress.

Ainsi pour créer votre blog il vous faut vous inscrire sur :https://vivaldi.com/fr/ puis installer le navigateur.

Pour accéder au module Wordpress, vous devez vous connecter à l'adresse de votre blog : http://username.vivaldi.net

En cliquant sur le bouton W en haut et à gauche vous accédez à toutes les fonctions de configuration de votre blog.

La première action à faire c'est de cliquer sur "Apparrance" afin de choisir et de personnaliser votre thème.

Vous êtes ainsi prêt pour écrire votre premier article.

La version utilisée sur le site de vivaldi.net est une version complète de Wordpress, il est possible de réaliser un blog avec l'insertion d'articles qui seront visible dans la page d'accueil , et aussi un véritable site web avec la création de pages et de menus.

Exemple de réalisation

Réalisé avec le module Wordpress de Vivaldi

 


Création d'un blog avec Sites de Google

Vous pouvez créer un véritable site web avec "Google Sites" en utilisant votre compte Google gratuit (pour un usage personnel) ou un compte Google Workspace (pour un usage professionnel).

La création du site ne nécessite pas de connaissances en programmation ou de conception. Des thèmes créés avec soin vous aident à mettre votre contenu en valeur. Grâce à une optimisation efficace de votre travail, Google Sites vous permet de créer une présentation soignée, quel que soit l'appareil utilisé (PC, tablette ou smartphone.

Accéder à : sites.google.com avec avec compte Google. La version gratuite fait partie de Google Drive, l'hébergement est fait uniquement sur le cloud. Une autre version existe dans Google Workspace (anciennement G Suite) mais cette version est payante même pour les particuliers.

Pour notre exemple nous avons choisi le modèle "Club"

Vous devez d'abord modifier le modèle en ajoutant vos informations puis vous commencé a insérer les différents modules proposés dans l'onglet "Insérer", comme dans notre exemple ci-dessous : Carrousel d'images, la première mise en page et un groupe réductible.

Modules d'insertion

Vous pouvez ensuite créer vos pages web qui seront par défaut inclus dans le menu du site, mais vous avez aussi la possibilité de créer un page qui sera exclu de la barre de navigation en utilisant l'option "Masquer dans la navigation" comme la page "Documentation" de notre exemple.

Notre exemple