Créer une page web HTML : mode d’emploi et conseils

Publié le : 03 septembre 202114 mins de lecture

Récemment, vous avez effectué des recherches pour votre travail et, au lieu d’utiliser le PowerPoint « classique », vous aimeriez présenter les résultats de vos recherches dans une page Web riche en contenu. Le problème maintenant est que vous êtes complètement dans le noir, car vous n’avez jamais essayé de comprendre comment créer une page HTML auparavant, et vous recherchez donc un cours « intensif » qui puisse vous donner au moins les connaissances de base pour faire ce genre de travail.

Comment construire une page Web HTML ?

Comme nous l’avons dit à plusieurs reprises, une page de ce type n’est rien d’autre qu’un ensemble de balises spécifiques incluses dans un fichier de texte brut, qui seront interprétées par un navigateur (ou d’autres programmes dédiés à cet effet) pour afficher sur l’écran la structure conçue par ceux qui construisent la page elle-même. Je vais vous expliquer ci-dessous comment fonctionnent les balises les plus couramment utilisées lors de la création d’une page HTML et qui sont spécifiées dans son corps (c’est-à-dire dans la section correspondante).

Titres et sous-titres

Les marqueurs sont généralement utilisés pour spécifier les titres et sous-titres de la page (par exemple, Bienvenue sur mon site !). Par défaut, le texte contenu dans ces balises est formaté différemment, tant en taille qu’en style, du texte contenu dans les autres éléments de la page.

• Paragraphes – le contenu d’un paragraphe est enfermé entre les balises.
• Images – la balise qui permet d’inclure des images dans une page HTML est. Il permet de définir des paramètres tels que src (c’est-à-dire l’adresse de l’image), width et height (pour définir la taille) et align (pour définir la position du texte par rapport à la photo en question).
• Ancres – les balises d’ancrage vous permettent d’insérer des hyperliens dans une page HTML. La destination du lien est spécifiée dans le paramètre href, tandis que le texte du lien (c’est-à-dire le texte « cliquable ») est placé entre les marqueurs de début et de fin.
• Balises de mise en forme du texte – comme vous pouvez facilement l’imaginer, il existe des balises qui permettent de définir (au moins en partie) le style du texte à afficher sur la page : les mots ou les phrases à mettre en forme sont placés entre les marqueurs de début et de fin. Les balises les plus utilisées sont (pour le texte en gras), (pour le texte en italique) et (pour le texte souligné).

Balises de division

Dans certains cas, vous pouvez vouloir donner à différentes sections d’une page HTML des caractéristiques spéciales sans les diviser graphiquement en paragraphes, tableaux ou cadres. À cette fin, on utilise des balises de division : elles divisent la page en sections graphiquement invisibles qui partagent des caractéristiques spécifiques et personnalisables. Par exemple, vous pouvez attribuer une classe à un élément de type div (), puis définir les caractéristiques spécifiques des éléments qu’il contient par le biais de CSS, avec une feuille de style ou une définition in-page.

• Listes à puces – comme son nom l’indique, ce type de balise vous permet de définir des listes à puces et, si vous le souhaitez, des listes ordonnées. Le début et la fin d’une liste à puces sont décrétés par les balises et la liste non ordonnée.
• Formulaires – Certaines balises HTML sont spécialement conçues pour créer des formulaires à remplir. Par exemple, le début et la fin d’un formulaire sont spécifiés par les marqueurs et les symboles. Les différents éléments de saisie (zones de texte, cases à cocher, etc.) sont identifiés par la balise et spécifié par le paramètre type. Pour créer des cadres à l’intérieur d’un formulaire, en revanche, il faut utiliser la fonction.

Pour plus d'informations : Ajouter une icone FAVICON sur votre site

Comment créer une page HTML de base ?

Une fois que vous avez analysé le fonctionnement des balises les plus importantes, vous êtes enfin prêt à créer votre première page HTML de base. En fait, il s’agit d’assembler tout ce que vous avez vu dans les sections précédentes afin de structurer une véritable page Internet : sans plus attendre, ouvrez l’éditeur de texte fourni avec votre système d’exploitation (comme le Bloc-notes de Windows ou TextEdit pour macOS) et collez-y le texte suivant.

Lorsque vous avez terminé, enregistrez le fichier que vous venez de créer en utilisant l’extension .html et, pour afficher la page dans votre navigateur, double-cliquez sur le fichier que vous venez d’enregistrer. Eh bien, vous venez de créer votre première page HTML ! Si vous le souhaitez, vous pouvez visualiser le code de la page en cliquant avec le bouton droit de la souris à un endroit quelconque de la page et en choisissant l’option Afficher la source de la page dans le menu proposé par le navigateur.

N’oubliez pas que, de cette manière, la page HTML que vous créez ne sera visible qu’à l’intérieur de l’ordinateur que vous utilisez ; si vous voulez que la page soit accessible depuis l’Internet, vous devez acheter un espace d’hébergement capable de l’accueillir, éventuellement associé à un domaine pour l’atteindre facilement.

Comment créer une page index.html ?

En général, une page index.html n’est rien d’autre que la page d’accueil d’un site Web qui contient une description (sommaire ou détaillée) du site lui-même, avec des hyperliens vers les autres pages qui le composent. Par exemple, si vous allez créer un site web personnel, la page index.html pourrait se composer d’une brève description de vous-même, d’une photo et de quelques liens vers d’autres pages thématiques, telles qu’une biographie, un portfolio et une page de contact que vous devez prendre soin de créer séparément. Pour vous donner une idée, voici le code d’une telle page web.

Comme vous pouvez facilement le deviner, les hyperliens vers les autres pages du site ont été insérés dans une liste à puces non ordonnée. En outre, un fond coloré a été attribué à la page au moyen du paramètre bgcolor (c’est-à-dire backgroundcolor) attaché à la balise

Comment créer une page de connexion en HTML ?

Vous souhaitez créer une page HTML de connexion, c’est-à-dire une partie de votre site qui vous permet d’accéder à une section protégée en saisissant votre nom d’utilisateur et votre mot de passe ? Vous pouvez facilement le faire en utilisant les balises liées aux formulaires dont je vous ai parlé précédemment, en utilisant un code similaire à celui qui suit.

La difficulté, dans ce cas, est de communiquer au navigateur comment vérifier que le nom d’utilisateur et le mot de passe ont été correctement saisis, lorsque l’utilisateur appuie sur le bouton d’authentification : généralement, cette opération est effectuée en appelant un script particulier (écrit en javascript, php, ASP ou d’autres langages), qui compare les champs dans les cases appropriées avec les enregistrements dans une base de données ou un fichier texte. Dans le code ci-dessus, ce script est spécifié dans le paramètre action de la balise, qui indique l’action à entreprendre lorsque l’on appuie sur le bouton d’envoi (dans notre cas, « Connexion »).

Comment créer une page HTML avec CSS ?

Comme on l’a déjà mentionné, bien que le HTML soit capable de gérer le formatage de base des éléments, il est possible d’utiliser un langage spécifique qui permet de modifier l’esthétique, la mise en page et les décorations à votre guise : le CSS. Ce langage a une syntaxe extrêmement différente de celle du HTML, qui est principalement axée sur la définition graphique des différents éléments.

Ce type de code peut être inclus dans une page HTML de deux manières : la première, utile lorsque les éléments sont peu nombreux et limités à une seule page, consiste à l’enfermer dans les balises et déclaré dans la section.

La seconde, au contraire, prévoit l’écriture du code à l’intérieur d’un fichier texte avec l’extension .css, qui peut être importé dans une ou plusieurs pages HTML en utilisant la balise. Le marqueur est spécifié dans la balise de la page.

Par exemple, on vous montre ci-dessous le code d’une feuille de style CSS qui permet de colorer tous les éléments appartenant à la classe de couleur : en particulier, le texte sera coloré en bleu, avec un fond noir et sera recouvert d’une ligne. En outre, l’espacement des caractères sera porté à 5 pixels.

Pour vérifier que la feuille de style fonctionne, collez le code ci-dessus dans un fichier texte brut et enregistrez-le sous le nom de style.css, dans la même page où vous avez précédemment enregistré la page HTML de base.

Pour intégrer la feuille, ouvrez-la en mode édition et, juste en dessous de la balise. Pour terminer, enregistrez le fichier, double-cliquez sur le html correspondant et profitez du résultat.

Dans le même thème : Les balises en HTML5

Outils pour la création de pages HTML

Si vous êtes arrivé jusqu’ici, cela signifie que vous avez acquis les connaissances de base nécessaires pour créer une page HTML et que vous êtes prêt à faire vos premiers pas en toute autonomie. Donc, une fois que vous avez compris l’utilisation des balises et comment construire la structure d’une page Web, vous souhaitez avoir un aperçu complet des outils qui peuvent vous aider à réaliser facilement votre travail : voici ceux qui, à mon avis, pourraient être plus utiles.

Éditeur HTML

Êtes-vous intéressé par un programme qui vous permet de créer des sites HTML, également avec l’aide d’une partie graphique qui vous permet de créer de nouveaux éléments également avec le clavier et la souris et sans nécessairement agir sur le code ? Les éditeurs HTML de ce type sont appelés WYSIWYG (what you see is what you get) et sont très répandus tant au niveau amateur que professionnel.

Comment créer une page HTML avec le Bloc-notes ?

Préférez-vous rester sur le « classique » et vous entraîner à écrire du code HTML en utilisant uniquement le Bloc-notes de Windows ? Gardez à l’esprit que ce programme a été conçu pour écrire des fichiers texte élémentaires, et qu’il ne fournit donc pas de fonctionnalités spécifiques pour l’édition HTML (telles que le signalement des erreurs, la suggestion de paramètres, etc.)

Tout d’abord, lancez le programme en l’appelant depuis le dossier Accessoires Windows du menu Démarrer (l’icône en forme de drapeau située dans le coin inférieur droit de l’écran), tapez le code HTML qui vous intéresse et allez dans Fichier > Enregistrer sous…, situé dans le coin supérieur gauche, pour accéder aux options d’enregistrement.

À ce stade, sélectionnez l’option Tous les fichiers (*.*) dans le menu déroulant Enregistrer sous et saisissez un nom pour le fichier dans le champ de texte prévu à cet effet, en veillant à spécifier l’extension .html (par exemple, mysite.html). Lorsque vous avez terminé, appuyez sur le bouton Enregistrer et le tour est joué.

Comment créer une page HTML avec Word ?

Microsoft Word est un programme extrêmement puissant qui, si nécessaire, peut être utilisé pour créer d’excellentes pages HTML en mode WYSIWYG. Comment ? Très simple ! Tout d’abord, démarrez le programme et utilisez les outils qu’il contient (tels que les tableaux, les graphiques, le formatage du texte, les listes, les images, etc.) pour construire la page Web telle que vous souhaitez la visualiser dans le navigateur.

Lorsque vous avez terminé, cliquez sur le menu Fichier Word, choisissez l’option Enregistrer sous, indiquez le dossier dans lequel vous souhaitez enregistrer le fichier, puis spécifiez le nom du fichier et réglez le menu déroulant Enregistrer sous (Format de fichier sur Mac) sur Page Web si vous souhaitez enregistrer uniquement du texte, ou Page Web en tant que fichier unique pour enregistrer également les images, les polices utilisées et d’autres éléments Word « externes » dans le même fichier.

Note : Afin de respecter le formatage original, Word peut ajouter certaines balises « propriétaires » pour ne pas altérer l’affichage de la page. Si vous voulez les exclure et n’enregistrer que le balisage HTML, vous devez sélectionner Page Web filtrée dans le menu déroulant Enregistrer sous/Format de fichier.

Comment créer une page HTML en ligne ?

Allez-vous créer votre page HTML directement sur Internet, sans installer aucun programme sur votre ordinateur ? Dans ce cas, un CMS pourrait vous convenir : en effet, un système de gestion de contenu est un système, également écrit en langage Web, qui vous permet de gérer toutes les étapes de la création d’une page HTML (ou d’un site Web entier) par le biais d’un portail de gestion doté d’une interface graphique.

Sur Internet, il existe plusieurs CMS gratuits (qui proposent également un espace d’hébergement) qui permettent de créer et de publier facilement une ou plusieurs pages web : deux des plus utilisés aujourd’hui sont certainement WordPress.com et Google Sites, dont je vous ai parlé en détail dans nos guides sur comment créer un site avec WordPress et comment créer un site avec Google Sites.