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.

 

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 :

• Création des pages web
• Création de la feuille de style ou des feuilles de style
• Vérification à l'aide du validateur W3C
• Le transfert des fichiers sur le serveur si la création ne peut être faite en ligne.

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 :

• La page index.html qui est la page d’accueil de votre site, par convention nous ne modifieront pas l’intitulé de cette page de cette page.
• La page scripts.js pour les scripts JavaScript, cette page nous allons la supprimer, car nous avons la possibilité de placer les scripts à la fin des pages web concernées
• La page styles.css qui contiendra l’ensemble des codes CSS nécessaires pour le bon fonctionnement du site.

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.

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

Exemple de réalisation

 

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.

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.