Vous n’avez pas besoin d’être un expert en informatique pour créer une page Web. Vous avez juste besoin de comprendre quelques compétences de base et vous êtes sur la bonne voie. Les outils et la technologie Web d’aujourd’hui vous aideront avec le reste.
Table des matières
Construire une page Web
Afin de créer une page Web décente, vous avez besoin de quelques outils de base et d’un aperçu qui montre tout ce dont vous avez besoin pour lancer un site réussi. Vous n’avez pas encore besoin de vous soucier du design ou du style. Il y a quelques autres choses que vous devez d’abord régler.
Enregistrement et hébergement de votre domaine
Une fois que vous avez choisi le sujet de votre site, vous devez vous assurer d’enregistrer le nom de domaine et de trouver un hébergeur pour votre site. Vous devriez toujours trouver au moins deux ou trois noms de domaine, au cas où votre premier (et parfois deuxième) choix est déjà fait.
Astuces de domaine
Une société d’enregistrement de domaine réputée aura:
- Bon service client 24/7 par téléphone, e-mail ou chat en direct
- Pas de frais sous-jacents ou cachés
- Inscription privée à faible coût
- Une allocation pour un transfert DNS
- Frais de nom de domaine annulés avec l’achat de services d’hébergement
Conseils pour l’hôte
Lorsque vous choisissez un hôte pour vos pages Web, gardez à l’esprit:
- Quantité de bande passante autorisée
- Quelles mesures de sécurité sont proposées pour dissuader les intrusions
- La vitesse de chargement de la page
- Le système d’exploitation du serveur
- S’il y a un panneau de commande dans un emplacement central
Choisir un éditeur
Éditeurs HTML
L’éditeur de contenu que vous décidez finalement d’utiliser dépend de votre niveau d’expérience dans la création de sites Web. Si vous êtes familier avec HTML ou autre codage, utiliser un éditeur HTML est votre meilleur choix. Les éditeurs HTML comprennent:
-
Éditeur HTML CoffeeCup
Bloc-notes: considéré comme «l’une des interfaces utilisateur les plus simples de tous les outils de création Web Internet», le bloc-notes est simple et d’apparence épurée, mais il ne détecte aucune erreur HTML à votre place.
- CoffeeCup: Cet éditeur HTML relativement peu coûteux est assez puissant et possède une interface agréable pour les novices et les experts. Il comprend également FTP qui simplifie la mise en ligne de votre page.
- Adobe Dreamweaver CC: Probablement le plus connu de tous les éditeurs, ce programme possède de nombreuses fonctionnalités avancées pour un concepteur de niveau expert, mais il est assez simple à maîtriser pour un novice.
Éditeurs WYSIWYG
Si vous souhaitez créer votre page avec le moins d’effort possible, un constructeur de page Web gratuit peut être plus rapide car tout le travail est effectué en quelques touches. Vous pouvez choisir parmi des éditeurs Web et des constructeurs de sites Web WYSIWYG (Ce que vous voyez est ce que vous obtenez) gratuits tels que:
- KompoZer: Avec ce programme simple, vous vous concentrez sur la conception et la mise en page pendant que le programme crée le codage. Le programme est similaire en apparence à Dreamweaver.
- Microsoft Expression Web 4: Un autre programme puissant, celui-ci était autrefois un produit payant. La version gratuite possède toutes les fonctionnalités de la version payante, et si un novice peut facilement l’utiliser, un expert appréciera les fonctionnalités puissantes dont elle dispose.
- BlueGriffon: Avec un espace de travail bien conçu et intuitif, ce programme est extrêmement utile pour un débutant qui n’est pas familier avec les balises HTML. Le logiciel est connu pour son excellence et a été nommé meilleur logiciel libre de 2012 par PCMag.com.
Utilisation d’un système de gestion de contenu
Les systèmes de gestion de contenu (CMS) sont une alternative aux éditeurs Web et aux programmes WYSIWYG. Ces systèmes deviennent une méthode de plus en plus populaire utilisée pour lancer, créer et maintenir un site Web. Cela est dû en grande partie à trois systèmes populaires, WordPress, Drupal et Joomla, qui ont considérablement réduit la complexité de la maintenance continue du site Web. Si vous prévoyez une croissance significative de votre site au fil des ans, le construire dans un CMS est probablement un bon moyen de procéder puisque tous les éléments du site, y compris le contenu, les images et le multimédia, peuvent être gérés à partir d’un seul endroit.
CMS WordPress
Ces systèmes vous fournissent:
- Une grande variété de modèles
- Des moyens plus simples d’installer plus de « cloches et sifflets » via des plug-ins.
- Tutoriels gratuits
- Une communauté de développeurs améliorant le produit
Héberger vos images
Vous pouvez ajouter des images à votre site de l’une des deux manières suivantes: soit télécharger les images directement sur le serveur de fichiers de votre hôte, soit héberger vos images sur un site tiers.
Les avantages de l’utilisation d’un site tiers incluent:
- Coût: La plupart des sites d’hébergement de photos sont gratuits.
- Bande passante: Vous utiliserez moins de bande passante de votre propre site.
- Facile à utiliser: Aucune expérience HTML n’est nécessaire.
Cependant, l’inconvénient est:
- Résolution: La résolution des photos peut ne pas être aussi bonne qu’avec un abonnement payant.
- Intimité: Vous devrez peut-être payer pour garder vos images privées.
- Téléchargement: La plupart des sites n’autorisent pas les téléchargements directs d’images; vous devrez peut-être utiliser des liens à la place.
Mettre tous ensemble
Maintenant que vous avez mis en place toute la logistique, vous pouvez tout mettre en place avec le style que vous souhaitez. La partie difficile est de comprendre comment une page Web est construite; la partie amusante est de le concevoir. Prenez votre temps et expérimentez tout ce qu’Internet a à offrir.
Utiliser un modèle
Étant donné que l’objectif d’un service d’hébergement Web est de vous vendre un compte d’hébergement, nombre de ces services offrent des outils et des modèles supplémentaires (généralement moyennant des frais supplémentaires) qui vous permettent de lancer votre site rapidement. Si votre objectif est de créer un site Web relativement simple, ces produits valent souvent de l’argent. Assurez-vous simplement de ne payer que des frais uniques et de ne pas vous inscrire à un service permanent basé sur un abonnement.
Parties de la page
Pour créer une page qui fonctionne correctement dans les résultats des moteurs de recherche, les styles correctement et s’affiche comme vous le souhaitez dans plusieurs navigateurs, vous devez formater la page correctement. HTML est un langage de balisage créé pour mettre en page une page sous la forme d’un plan. Lors de la création d’une page HTML, le codage minimal qu’elle peut avoir est:
Contenu du document ……
La plupart du formatage d’une page se produit entre la balise d’ouverture et de fermeture . Vous placerez du texte, des images, des graphiques, des formulaires, un pied de page et peut-être plus à l’intérieur de cette balise, en fonction de la complexité de votre site.
Formatage de votre contenu
Les balises HTML sont conçues pour créer la hiérarchie d’importance de la page et garantir que les navigateurs Web comprennent le contenu de votre page afin qu’il s’affiche correctement. Même s’il existe un nombre important de balises HTML, vous n’en utiliserez probablement que quelques-unes au départ.
- Un
ne doit être utilisé qu’une seule fois sur une page et il doit être réservé comme titre sur le contenu le plus important de la page. Les balises
restantes doivent être utilisées dans l’ordre décroissant; est plus important que
, et ainsi de suite. Il est rare d’utiliser les six balises
sur une page. - La balise de paragraphe
open / close est utilisée autour de chaque paragraphe de texte. Vous pouvez utiliser le
si vous voulez un espace insécable entre les paragraphes. - Si un mot ou quelques mots doivent être mis en valeur, vous pouvez utiliser la balise pour mettre le mot en gras ou la balise pour le mettre en italique.
- Lorsque vous citez des informations provenant d’une autre source, désignez-les en plaçant le contenu entre les balises
d’ouverture / fermeture.
Puisque le HTML est utilisé pour formater une page, comptez sur CSS pour contrôler l’apparence.
Gérer les images
Codage d’image
Si vous souhaitez ajouter une image à votre page, vous insérerez la balise sur la page où vous souhaitez que l’image apparaisse.
Voici ce que chacun des attributs contrôle.
- Hauteur largeur: Mesuré en pixels, cet attribut contrôle la taille exacte de votre image. Toutes les images doivent inclure l’attribut height et width car il indique au navigateur la quantité d’espace à réserver pour l’image. Lorsque cet attribut n’est pas inclus, il ralentit le temps de chargement de la page.
- Hspace / vspace: Bien que cet attribut offre un moyen acceptable de contrôler l’espace horizontal et vertical autour d’une image, cet espacement est plus souvent contrôlé par une feuille de style.
- Frontière: C’est un autre détail normalement contrôlé par une feuille de style. Dans l’exemple de codage ci-dessus, l’image aurait une bordure de 1 pixel autour d’elle.
- Alt: C’est un peu de texte qui décrit l’image; la balise alt doit toujours être incluse pour l’accessibilité.
Utilisation de l’extension correcte
Chaque format d’image est conçu dans un but spécifique, il est donc utile de comprendre ce que chacun fait. Quel que soit votre type de fichier, optimisez toujours pour le Web afin que votre image se charge rapidement.
- JPG: Ce format est le mieux adapté pour les photographies et les graphiques complexes, et il ne fonctionne pas bien pour les dessins au trait, les lettres ou les graphiques simples.
- GIF: Utilisez ce format pour les images avec seulement quelques couleurs distinctes, telles que les dessins au trait, les images en noir et blanc et le petit texte. Si vous voulez un graphique animé ou une image avec un arrière-plan transparent, utilisez cette méthode.
- PNG: Ce type de fichier repose sur le concept d’un GIF. L’une de ses fonctionnalités supplémentaires est la possibilité de contrôler le degré de transparence, également appelé opacité. Sachez simplement que certains navigateurs plus anciens ne prennent pas en charge l’extension.
Ajout d’interactivité
L’ajout de contenu intéressant est important si vous souhaitez que vos visiteurs reviennent pour plus. Il y a quelques éléments de base que toute personne qui crée sa première page Web doit savoir comment ajouter. Ces fonctionnalités permettent à vos visiteurs Internet de vous contacter par e-mail ou de communiquer entre eux à l’aide d’outils de réseaux sociaux.
Le courrier électronique est l’un des éléments d’interaction les plus simples que vous puissiez placer sur votre site. Pour permettre à une personne de vous envoyer un e-mail, utilisez ce code:
Envoyez-moi un e-mail
Lorsqu’un utilisateur clique sur le lien, il ouvrira son programme de messagerie électronique et placera le mot «Bonjour» dans la ligne d’objet. Si vous ne voulez rien dans la ligne d’objet, supprimez? Subject = « Hello » de la balise.
Éditeur de salle de discussion Chatango
Forums, blogs et salles de discussion
Si vous souhaitez un forum, un blog ou une salle de chat sur votre site Web, assurez-vous que votre hébergeur Web propose ces services avant de vous inscrire. Étant donné que les réseaux sociaux et les outils collaboratifs améliorent considérablement l’expérience du visiteur, ce sont certainement des fonctionnalités intéressantes à inclure. Cependant, il est un peu plus compliqué de moderniser ces services une fois votre site créé. Si vous devez effectuer une mise à niveau, il existe des moyens d’ajouter des blogs et des salles de discussion à un site Web existant. Il existe également quelques entreprises qui offrent encore un hébergement de forum gratuit avec des publicités limitées.
Lancement du site
Une fois la page créée, vous devez la faire vivre. Ceci est accompli en plaçant la page, toutes les images utilisées sur la page et la feuille de style (si vous en avez utilisé une) sur un serveur connecté au Web. Bien que cela puisse paraître compliqué, il ne s’agit en réalité que d’une fonction de glisser-déposer.
Si vous avez utilisé un programme d’édition avec FTP intégré, vous allez simplement aller dans le menu et cliquer sur «Publier» ou «Télécharger». Cela chargera tous les fichiers que vous avez sélectionnés sur le serveur distant.
Si votre programme n’a pas de FTP, vous devez:
- Téléchargez un programme FTP; FileZilla est couramment utilisé.
- Entrez les informations de connexion et de mot de passe pour le serveur distant; la société d’hébergement les fournira.
- Une fois que vous êtes connecté au serveur distant, faites glisser vos dossiers et fichiers dans la zone désignée par la société d’hébergement.
Faire remarquer votre site
Une fois que votre site est opérationnel, vous voulez vous assurer que les gens peuvent le trouver. L’une des premières choses que vous pouvez faire est d’envoyer par e-mail le lien de la page à votre famille, vos amis et d’autres contacts. Vous pouvez utiliser les réseaux sociaux ou les sites de bookmarking social pour annoncer que votre page est en ligne. Plus important encore, à long terme, soumettez votre site à Google, Bing et Yahoo. Une fois soumis, vous pouvez augmenter la visibilité dans les résultats des moteurs de recherche en mettant souvent à jour votre site avec un contenu de qualité.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !