Créer un site Internet

 

internetRetrouvez sur cette page les grandes lignes de l’atelier “Création de site Internet” ainsi que des ressources et des lectures complémentaires pour vous accompagner dans la mise en œuvre d’un tel projet.

Créer un site avec le code HTML

Le HTML (Hyper Text Markup Language) n’est pas un langage de programmation, il s’apparente plutôt à un outil de mise en forme des pages web (texte et images). C’est ce langage qui est utilisé pour créer toutes les pages du web.

Bloc note

  • Utiliser le Bloc note

-> Connaître le code HTML

- avec OpenClassrooms

- avec HTML.net

 

  • Utiliser un éditeur HTML Wysiwyg

Le terme WYSIWYG est un acronyme anglophone signifiant “What You See Is What You Get“, ce qui peut se traduire littéralement en français par “ce que vous voyez est ce que vous obtenez“.

kompozer

Un éditeur HTML Wysiwyg, vous permet de créer des pages web comme sur un traitement de texte et se charge d’écrire le code à notre place.

-> Kompozer (logiciel libre et gratuit)

- Télécharger Kompozer

Tutoriel

 

  • Organisation de votre site

 Une page comme un site internet est un assemblage de divers éléments (dossiers, sous-dossiers, texte, images, vidéos, etc) qui nécessitent d’être organisés pour répondre à des contraintes techniques… et pour faciliter la conception des pages.

arborescenceLorsque vous comptez insérer des images sur vos pages web, il convient de les réunir toutes “au même endroit”. Un projet de site internet doit prévoir un dossier images dans lequel seront présentes toutes les images utiles à vos pages.

Ce dossier “images” vous permettra de les insérer plus facilement, et respecter ainsi cette organisation de base de tout (ou presque) site internet.

Enfin, veuillez noter que la suppression ou le déplacement des images de ce dossier empêchera son affichage sur la page.

 

  • Utiliser des Gabarits/Templates

templatesLe Gabarit, aussi nommé Template et Layout, est une mise en page préformatée, vide de contenu, qui sert de modèle pour la structure des pages d’un site internet.

L’avantage principal est de pouvoir intervenir sur l’apparence du site web, sans modifier le code, mais simplement en changeant certains éléments (couleurs, images,…) et contenu.

- Free Website Templateswww.freewebsitetemplates.com

 

 

Héberger votre site sur Internet

Pour que votre site soit accessible sur Internet, vous devez le mettre en ligne sur des ordinateurs particuliers appelés : Serveurs. Ces serveurs vont stocker vos documents destinés à la publication sur le Web et permettre aux internautes d’y accéder, on dit d’un serveur qu’il héberge votre site internet.

Définition et liste des différentes possibilités d’hébergement : Dictionnaire du Web

 

  • Obtenir un nom de domaine (ex : www.monsiteweb.fr)

Un nom de domaine est un adresse nominative d’un site Internet. Il se compose d’un nom (marque, société, nom de famille, etc.) et d’une extension. Cette dernière peut être un suffixe géographique de deux lettres (.fr, .be par exemple) ou un suffixe générique en trois lettres (.com, .net par exemple). Cette adresse se définit par une URL (Uniform Resource Locator). Et c’est cette adresse que l’on doit entrer dans la barre de navigation des navigateurs pour arriver à destination de la page et afficher cette dernière.

En France, l’AFNIC (Association Française pour le Nommage Internet en Coopération) a pour mission de gérer les noms de domaines Internet nationaux. Sur le site de l’AFNIC vous pouvez vérifier si un nom de domaine est disponible, et éventuellement  le réserver. Le site AFNIC vous permet également d’obtenir des informations sur les noms de domaines déjà réservés avec le service de recherche Whois.

En savoir plus sur le Nom de domaine : Comment ça marche

 

  • Choisir son Hébergeur

Comment choisir son hébergeur : Comment ça marche

Liste d’hébergeurs gratuits : Kommunauty.fr ou !nfoWebMaster.fr

Liste d’hébergeurs payants : !nfoWebMaster.fr ou Guide Hébergeur

Hébergeurs vus pendant l’atelier :

1&1 : www.1and1.fr  (leurs offres)

OHV : www.ovh.com (leurs offres)

Hébergeur utilisé lors de l’atelier avec l’adresse “www.webettic.fr

one.com : www.one.com (1 an gratuit avec 5Go d’espace web)

 

  • Mettre votre site sur l’hébergeur que vous avez choisi

    Type de mail envoyé par votre hébergeur

    Type de mail envoyé
    par votre hébergeur

Votre hébergeur vous octroie un espace qui est accessible exclusivement au propriétaire /administrateur de l’hébergement. Il s’agit de l’espace où vous déposez tous les fichiers (et dossiers) nécessaires au bon fonctionnement du site.

Pour y déposer votre site , vous aurez besoin des informations fournies par votre hébergeur lors de votre abonnement.

Pour accéder à cet espace, il faudra utiliser un logiciel qui permet le transfert de fichiers. On parle alors de logiciel client FTP (File Transfer Protocol). Il existe de nombreux logiciels de ce type. Lors de l’atelier, nous avons utilisé :

 filezilla-> Filezilla (logiciel libre et gratuit)

- Télécharger Filezilla

- Télécharger Filezilla – Version portable (recommandée par les animateurs OPeN, à dézipper et à exécuter)

- Tutoriels :     – OpenClassrooms

- Filezilla

- Developpez.com

 

 

Les solutions auto-hébergées

auto-hebergementDe nombreux services en ligne permettent maintenant sur simple inscription (nom/prénom ou pseudonyme et adresse mail) de disposer d’un espace de publication sur Internet. Très pratique pour ceux qui ne souhaitent pas investir dans un hébergement et un nom de domaine, ces services peuvent constituent des alternatives simples à mettre en œuvre, notamment en ce qui concerne la création des pages et la publication de leurs contenus.

Cependant ces services ont leurs limites, et surtout dès lors qu’ils sont utilisés dans le cadre d’une “formule” gratuite. En effet, des limitations liées au poids/taille des fichiers images, vidéos ou autres documents peuvent venir compliquer finalement la tâche.

Ensuite ces services, tant que vous les utilisez gratuitement, ne vous fourniront pas de nom de domaine avec une adresse (URL) simple du type  www.monsite.com… mais plutôt monsite.nomduservice.com. Votre site est alors créé sur un sous domaine du service en ligne que vous aurez utilisé. (Vous trouverez d’ailleurs cités ci-dessous quelques exemples de ces services).

La plupart de ces services en ligne vos imposeront également de la publicité, qu’il s’agisse de la leur ou celle de leurs partenaires.

Bien que proposés gratuitement, ces services disposent de formules payantes, qui permettront de débloquer et changer certains des aspects cités ci-dessus. Ces formules payantes permettent alors de supprimer les publicités, de déverrouiller des options supplémentaires et débloquer la majorité des limitations techniques citées plus haut… y compris la possibilité de réserver un véritable nom de domaine et de disposer d’une adresse simple et présentable pour son site internet.

Sélection de solutions auto-hébergées :

Jimdo : fr.jimdo.com
Wordpress.com : fr.wordpress.com
e-monsite : www.e-monsite.com
Weebly : www.weebly.com
SiteGo : www.sitego.fr
Asso-Web : www.asso-web.com

Comparatifs de solutions auto-hébergées : Dessine-moi un Site ou SocialCompare

 

Installer un CMS

Les sites Internet reposent aujourd’hui pour la plupart sur des logiciels CMS (Content Management Systems) permettant une gestion dynamique des contenus présents sur le site. Un CMS permet de concevoir et d’administrer un site internet avec peu de connaissances techniques. Ce type de solutions permet de se concentrer sur la publication en s’affranchissant de certains des aspects techniques cités plus haut.

Liste de CMS gratuits : Scriptol ou Wikipédia

Conseils sur le choix d’un CMS : tom’sGuide


CMS utilisé lors de l’atelier :

-> WordPress (fr.wordpress.org)

 

Tutoriels pour l’installation et l’utilisation de WordPress

Tutoriel d'OpenClassrooms

Tutoriel de Tom's Guide

 Introduction

- Des blogs 100% personnalisables

Objet du blog

- Choisir un nom pour son blog
– Choisir un nom de domaine (optionnel)

L’hébergement de votre blog

- Choisir un hébergement payant (optionnel)
– WordPress ou DotClear ?

Installer WordPress

- Se connecter à son serveur FTP
– Activer le blog

Customiser son blog

- Configurer son thème
– Modifier un thème graphique
– Installer un thème graphique

Adapter son blog à tous les écrans

- Une offre riche en thèmes responsives

Choisir et installer des plugins

- Activer un plugin

Publier des billets

- Organiser ses billets

Gérer les commentaires

- La modération des commentaires

Promouvoir son blog

- Les stats made by WordPress
– Les solutions professionnelles
– Conseils de Tom’s Guide

Un blog au jour le jour…

 

Activer le plugin AkismetAkismet

Akismet est un service antispam très performant qui est déjà installé dans votre WordPress et qu’il va falloir activer

- Tutoriels de OrdiFormation et de WordPress Channel

 

Pour aller plus loin avec WordPress…

Nous avions eu l’occasion de l’évoquer lors des séances dédiées au CMS WordPress, cet outil bénéficie d’une notoriété mondiale et l’on retrouve sur internet une communauté officielle ou communauté d’utilisateurs épars qui alimentent sans cesse des contenus à son sujet. Vous trouverez ci-dessous une sélection de sites ou d’articles consacrés à son utilisation, son actualité, la résolution des problèmes rencontrés ou encore les astuces pour parvenir à vos fins.

N’hésitez pas à formuler vos demandes sur votre moteur de recherche préféré, les résultats concernant wordpress ne manquent pas…

Un site adapté à des besoins

Installer une boutique en ligne

- Avec le plugin WooCommerce :boutique

- Présentation
Site officiel du plugin
Tutoriel

 

Installer un forum en ligne

- Avec le plugin bbPress :forum

- Télécharger le plugin
Tutoriel pour l’installation

- Avec le plugin WordPress

- Télécharger le plugin
Tutoriel pour l’installation

 Publié par le 25/04/2014 à 17:33

  3 réponses sur “Créer un site Internet”

  1. Bonsoir,

    ça y est je me suis lancé ! Le site n’est pas encore en ligne mais cela ne serait tarder. Bravo à vous, pour votre méthodologie d’accompagnement qui est réellement bien rodée. L’appui de votre site, avec en partie le contenu des séances de découverte, m’a permis de retrouver rapidement des repères et d’aller plus loin. Merci pour votre savoir faire et savoir être. A très bientôt.

  2. Bonjour Malika,

    Merci pour ton commentaire ! :-)

    En effet 5 séances ne permet pas d’aborder en profondeur tous les points de la création d’un site Internet…

    L’objectif de cet atelier était de vous faire une initiation, vous montrer les différentes pistes qui s’offraient à vous dans ce domaine.

    N’hésite pas à nous contacter si tu souhaites revoir quelques points (comme celui des extensions dans WordPress ;-) ), nous nous ferons un plaisir de revoir cela avec toi.

    A bientôt Malika.

  3. Bonsoir,

    Félicitations ! C’est clair et bien détaillé. Merci pour tout ce temps de travail. Merci encore pour votre atelier qui malheureusement était trop court pour moi. J’ai rencontré des difficultés pour les extensions (anglais). A très bientôt !

 Laisser un commentaire

(requis)

(requis)

Laisser ces deux champs tels quels :