Si vous êtes intéressé à devenir un développeur web pro ou vous voulez juste apprendre comment les sites web fonctionnent, la première chose que vous devez étudier est HTML. Le HTML est un langage standard utilisé pour créer des pages et des applications web. Chaque fois que vous accédez à un site, un serveur envoie un fichier HTML à l’ordinateur et le navigateur interprète et affiche les informations incluses dans ce fichier.
En fait, toutes les informations que vous lisez maintenant sont juste des données qui sont stockées dans un fichier HTML et envoyées au navigateur. Mais faut-il vraiment maîtriser le langage HTML pour faire un site ? Nous allons le découvrir.
Construire des sites web avec HTML
Construire un site n’est pas une tâche difficile à l’ère du numérique. Ce n’est pas limité au codage sophistiqué et à au design complexe de sites web.
Il y a des tonnes d’options que vous pouvez choisir pour créer un site web. Le HTML est considéré comme un moyen économique de créer un site. Vous n’avez pas besoin d’un grand savoir-faire technique pour écrire des codes HTML. Vous avez un peu de temps à consacrer à la création d’un site web ? Alors autant apprendre et construire un site HTML.
Cet article a deux objectifs. Le premier est d’être un guide de HTML pour les débutants qui veulent créer un site HTML pour le commerce. Et l’autre est de leur donner une idée claire des autres options qu’ils ont, au cas où ils découvrent que la construction d’un site HTML est pas la tasse de thé.
Nous vous emmenons à travers les bases du HTML et vous montrons les étapes nécessaires pour mettre en place un site web en HTML. Pour comprendre les bases du HTML, il faut connaître les termes de base et les caractéristiques d’un site HTML.
Qu’est-ce que le HTML et comment ça marche ?
Pour apprendre le langage HTML et créer un site web sans l’aide d’un développeur, suivez ce tutoriel pour vous familiariser avec la création de sites web en HTML.
Pour commencer, HTML est l’abréviation de Hypertext Markup Language (Langage de balisage hypertexte).
Ce n’est pas un langage de programmation. Il ne peut pas être utilisé pour créer des designs web dynamiques et des graphiques. Mais il permet à l’utilisateur d’organiser et de formater la conception et la structure du site. Le HTML permet de créer des sections, des paragraphes, des titres, des liens et des applications.
Composants d’un site HTML
Pour construire un site HTML, il faut connaître quelques composants clés. Les sites web HTML ont deux composants principaux :
• Balises
• Attributs
Ils sont utilisés simultanément. Mais les objectifs qu’ils servent varient.
• Balises HTML
Une balise HTML est un moyen de donner des instructions à un site web HTML. Pour que le site web affiche un en-tête, ou pour organiser la mise en page, on utilise une balise. Une balise est désignée par des crochets et le texte qu’elle contient est une instruction.
Un exemple de balise est :
<h1>
Les balises doivent être ouvertes <h1> et fermées </h1>.
• Attributs HTML
Les attributs HTML, quant à eux, donnent des instructions portant principalement sur la fonctionnalité. Ils se placent normalement à l’intérieur d’une ta. Et sont marqués par les mêmes crochets d’angle. On s’en sert pour mettre des images, des vidéos, des liens et d’autres aspects externes de design et de fonctionnalité.
Un exemple d’attribut est.. :
<img src="produit.jpg" alt="le dernier produit">
Ici, la source de l’image (src) et le texte alt (alt) sont des attributs de la balise ![]()
.
Comment faire un site HTML
Vous n’avez pas besoin d’un logiciel sophistiqué pour créer un site HTML. Faites-le sur l’éditeur HTML du système, qui est le plus souvent le bloc-notes. Et suivez ces étapes.
• Doctype
On va commencer avec le doctype. La création d’un site web HTML commence au moment où vous créez un fichier Doctype. Ce fichier indique au navigateur web que le document est un fichier de site web.
C’est le code HTML de base d’un site web. Même pour créer un site web assez simple, vous devrez écrire beaucoup de code. C’est pourquoi il est toujours conseillé de garder tous les fichiers HTML dans un seul dossier afin de les avoir tous au même endroit.
Voici une représentation de comment est organisé le web..
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
Le fichier doctype indique au navigateur comment lire le fichier. Maintenant, il faut mettre les codes qui spécifient les pages, le design, le contenu et la mise en page.
Chacune des pages est créée séparément avec des codes qui définissent ses spécificités.
• Autres balises
Le Doctype est un fichier qui décrit la mise en page de base de la page. Il faut ensuite mettre d’autres parties et attributs au site web.
La balise
contient toutes les parties et attributs liés au titre, à la balise meta,, et tout ça.
La balise
est l’endroit où mettre le titre de la page. Elle apparaît sur l’en-tête de la page.<p></p><p>La balise</p><meta>est utilisée pour mettre des infos sur le document comme le codage des caractères, le nom (contexte de la page), la description.<p></p><p>Voici à quoi ressemble le code de la section head :</p><pre><code><head>
<title>Mon site HTML</title>
<meta charset="UTF-8">
<meta name="description" content="Info sur le contenu">
</header>
</code></pre><h2><strong>Comment mettre du contenu</strong></h2><p></p><div class="mediabox"><img class="fake-mediabox-img" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-pankaj-patel-byiw48klbmw-unsplash.jpg"> <img class="mediabox-img lazyload" data-srcset="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,h_400,w_600,q_auto/blog_service/2021-07-07-pankaj-patel-byiw48klbmw-unsplash.jpg 600w 400h, https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-pankaj-patel-byiw48klbmw-unsplash.jpg 1200w" data-lowsrc="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-pankaj-patel-byiw48klbmw-unsplash.jpg" data-sizes="auto" host="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-pankaj-patel-byiw48klbmw-unsplash.jpg" alt="structure HTML" title="structure HTML" loading="lazy"></div><p></p><p>La section suivante est la balise</p><body>.<p></p><p>Tout le contenu du site HTML est affiché ici. Il comprend le texte, les images, les tableaux, les <a href="https://support.strikingly.com/hc/fr/articles/360000362462-Ajouter-un-formulaire-de-contact-ou-Formulaire-d-inscription" target="_blank" rel="nofollow noopener noreferrer">formulaires </a>et tous les autres éléments de conception du site web.</p><h3>• <strong>Ajouter des titres au site web</strong></h3><p>En HTML, les titres sont écrits dans les parties suivantes :</p><ul><li><em><h1></h1></em></li><li><em><h2></h2></em></li><li><em><h3></h3></em></li><li><em><h4></h4></em></li><li><em><h5></h5></em></li><li><em><h6></h6></em></li></ul><p>Les balises</p><h1>et<h2>sont des titres importants. Les autres balises sont utilisées comme sous-titres et autres contenus supplémentaires.<p></p><p>Ces informations aident les robots des moteurs de recherche à comprendre ce qu’ils doivent afficher dans les résultats de recherche.</p><h3>• <strong>Créer un titre</strong></h3><p>On va faire un essai. Sur une nouvelle ligne de l’éditeur HTML, tapez :</p><pre><code><h1>Bienvenue sur mon site HTML</h1>
</code></pre><p>Enregistrez ce fichier sous le nom « index.html » dans un nouveau dossier et désignez-le comme « ma page web. » Ouvrez le fichier dans un navigateur web pour visualiser les modifications.</p><h3>• <strong>Comment mettre du texte</strong></h3><pre><code>Ajouter du texte à la page HTML est simple avec une partie ouverte par la balise <p> qui crée un nouveau paragraphe. On place tout le texte ordinaire à l’intérieur de la partie <p>.
</code></pre><p>Lorsque nous écrivons du texte en HTML, nous disposons aussi d’un certain nombre d’autres éléments pour personnaliser le texte.</p><h2><strong>Balises HTML normalement utilisées</strong></h2><p>Les balises doivent être ouvertes et fermées autour du texte en question.</p><p>Essayez-le. Sur une nouvelle ligne de l’éditeur HTML, tapez le code HTML suivant :</p><pre><code><p>Bienvenue sur <em>mon</em> site web. Toutes mes <b>dernières mises à jour</b> ici.</p>
Enregistrez la page pour visualiser les modifications.
</code></pre><h2><strong>Ajouter une feuille de style</strong></h2><p>Créez une feuille de style et désignez-la par « style.css » et enregistrez-la dans un nouveau dossier nommé « css. » Et ce fichier style.css nous aide à styliser la page web.</p><p>Souvenez-vous juste avant de fermer la balise head, ajoutez une ligne qui dit…</p><pre><code><link href="css/style.css" rel="stylesheet" type="text/css">
</code></pre><p>Cette ligne de code informe le navigateur qu’il doit rechercher la feuille de style lorsqu’il charge la page web.</p><p>Maintenant vous êtes prêt à créer votre propre site HTML.</p><h2><strong>Pourquoi ne pas coder son propre site web</strong></h2><p>Coder son propre site web semble être une superbe façon de créer un site. Mais il y a certains inconvénients qu’il faut connaître d’abord.</p><p>Vous devez avoir une bonne maîtrise du <a href="https://support.strikingly.com/hc/fr/articles/215046527-Code-HTML-Int%C3%A9gr%C3%A9" target="_blank" rel="nofollow noopener noreferrer">codage HTML </a>ou vous allez perdre un temps précieux que vous auriez pu mettre ailleurs.</p><p>Le codage n’est pas rapide. Même si vous engagez un pro, ça va prendre du temps. Imaginez comment ce serait si vous aviez l’intention de suivre des tutoriels HTML et de construire un site web à partir de zéro.</p><p>Et ce n’est pas comme si le travail était fini une fois que vous avez construit le site. Non. Vous devrez maintenir le site à jour. Ça signifie que vous devrez constamment modifier les codes.</p><p>Ça nuit au référencement.</p><p>Apprendre le HTML n’est pas aussi facile que certaines vidéos tutorielles le font croire. Il y a beaucoup de subtilités.</p><p>Vous pouvez utiliser un modèle HTML tout fait. Mais ça ne change rien à la façon dont c’est fait.</p><p>Un constructeur de site est un outil qui assure d’atteindre le même but. Contrairement à un site HTML où il faut écrire manuellement tous les codes pour chaque aspect du design et de la fonctionnalité, les constructeurs de sites ont des codes intégrés.</p><p>Tout ce dont vous avez besoin, c’est de savoir quel type de design ou de fonction vous voulez donner à votre site. Après ça, cliquez sur les options que vous aimez et boum !</p><p>Votre site est prêt.</p><p>C’est plus simple qu’avec des codes HTML et tout aussi impressionnant.</p><p>L’outil de création de site permet de construire rapidement des sites web à part entière. Le client est facturé sur la base de <a href="https://fr.strikingly.com/content/blog/espace-web" target="_blank" rel="nofollow noopener noreferrer">l’espace Web </a>et du nombre de pages Web spécifié avec un plan particulier.</p><p>Modifier un site HTML n’est pas aussi difficile qu’il est long. Lorsque votre activié tourne à plein régime, vous n’aurez pas forcément le temps d’écrire des codes HTML pour chaque modification du site. En revanche, les constructeurs de sites offrent des modèles de design intégrés, des palettes de couleurs et des fonctionnalités en un clic.</p><h2><strong>Avantages d’un constructeur de site</strong></h2><p></p><div class="mediabox"><img class="fake-mediabox-img" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-login-compte-4.jpg"> <img class="mediabox-img lazyload" data-srcset="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,h_400,w_600,q_auto/blog_service/2021-07-07-login-compte-4.jpg 600w 400h, https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-login-compte-4.jpg 1200w" data-lowsrc="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-login-compte-4.jpg" data-sizes="auto" host="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-login-compte-4.jpg" alt="Connexion au compte Strikingly" title="Connexion au compte Strikingly" loading="lazy"></div><p></p><p><em>Image tirée de Strikingly</em></p><p>Voici quelques raisons pour lesquelles vous pourriez vouloir construire un site web avec un constructeur de site pro.</p><p>Pas besoin de coder : Un avantage génial est que vous avez tout à portée de main.</p><p>Vous n’avez pas besoin d’apprendre le codage ou de comprendre comment les constructeurs de sites fonctionnent. Tout ce dont vous avez besoin, c’est de créer un compte avec un constructeur de site comme Strikingly et de commencer à <a href="https://fr.strikingly.com/content/blog/modifier-un-site-web" target="_blank" rel="nofollow noopener noreferrer">modifier </a>l’un des modèles de sites web gratuits.</p><p><strong>Rapide :</strong> Si vous devez apprendre le HTML et créer un site web, ça ne se fera pas en un jour. Mais construire un site sur une plateforme comme Strikingly est beaucoup plus rapide. Ceci parce que les codes sont intégrés.</p><p><strong>Intuitif :</strong> Vous pouvez être un véritable étranger à la plate-forme de construction. Malgré ça, vous créez un site web qui a l’air mieux qu’un site HTML. Prenez par ex. l’interface utilisateur simple de Strikingly. N’importe qui ayant des compétences informatiques de base peut créer un site web simple et élégant sans aucune aide extérieure.</p><p>Les constructeurs de sites comme Strikingly sont remarquablement simples. L’aspect intuitif réduit la gestion du site en quelques clics. Qu’il s’agisse d’ajouter une nouvelle page, de changer de bannière, d’ajouter une liste d’e-mails, etc., tout se fait très facilement.</p><p><strong>Attrayant :</strong> La grande variété de choix en matière de conception, de mise en page, de schémas de couleurs et de widgets permet de créer des sites web sortant tout droit de l’imagination.</p><p>Un site web construit sur une plateforme telle que Strikingly garantit aussi que votre <a href="https://fr.strikingly.com/content/blog/site-web-entreprise" target="_blank" rel="nofollow noopener noreferrer">entreprise </a>est bien présentée aux principaux acteurs du secteur.</p><h2><strong>Personnalisation en utilisant HTML ou Strikingly</strong></h2><p>Les constructeurs de site ont une simplicité et une facilité d’utilisation remarquables par rapport aux sites HTML.</p><p>L’exemple ici montre ce que vous devez faire pour changer la couleur du texte. Dans un site web HTML, il faut mettre dans la balise particulière le code pour la couleur et la taille individuellement. Sur un constructeur de site comme Strikingly, c’est quelques clics et le tour est joué.</p><h2><strong>Comment créer un site web Strikingly</strong></h2><p>Voici une méthode rapide pour créer un site web avec Strikingly :</p><h3><strong>1. Créer un compte</strong></h3><p></p><div class="mediabox"><img class="fake-mediabox-img" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-creer-compte-9.jpg"> <img class="mediabox-img lazyload" data-srcset="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,h_400,w_600,q_auto/blog_service/2021-07-07-creer-compte-9.jpg 600w 400h, https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-creer-compte-9.jpg 1200w" data-lowsrc="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-creer-compte-9.jpg" data-sizes="auto" host="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-creer-compte-9.jpg" alt="Créer un compte Strikingly" title="Créer un compte Strikingly" loading="lazy"></div><p></p><p><em>Image tirée de Strikingly</em></p><p>La première chose dont vous avez besoin est un compte enregistré Strikingly. Utilisez votre identifiant e-mail ou connectez-vous avec votre compte Google.</p><h3><strong>2. Choisir un modèle</strong></h3><p></p><div class="mediabox"><img class="fake-mediabox-img" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-modeles-sites-9.jpg"> <img class="mediabox-img lazyload" data-srcset="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,h_400,w_600,q_auto/blog_service/2021-07-07-modeles-sites-9.jpg 600w 400h, https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-modeles-sites-9.jpg 1200w" data-lowsrc="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-modeles-sites-9.jpg" data-sizes="auto" host="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-modeles-sites-9.jpg" alt="Modèles de sites Strikingly" title="Modèles de sites Strikingly" loading="lazy"></div><p></p><p><em>Image tirée de Strikingly</em></p><p>Vous vous êtes inscrit ? Choisissez un des modèles remarquables de la vaste bibliothèque de Strikingly. Il y a des modèles classés par catégorie pour rendre le choix facile.</p><h3><strong>3. Editer le modèle</strong></h3><p></p><div class="mediabox"><img class="fake-mediabox-img" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-editeur-site-web.jpg"> <img class="mediabox-img lazyload" data-srcset="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,h_400,w_600,q_auto/blog_service/2021-07-07-editeur-site-web.jpg 600w 400h, https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-editeur-site-web.jpg 1200w" data-lowsrc="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-editeur-site-web.jpg" data-sizes="auto" host="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-editeur-site-web.jpg" alt="Éditeur Site Web" title="Éditeur Site Web" loading="lazy"></div><br><em>Image tirée de Strikingly</em><p></p><p>Après avoir choisi le modèle, vous serez redirigé vers la page d’édition. C’est ici que la magie opère. <a href="https://fr.strikingly.com/content/blog/site-personnalise" target="_blank" rel="nofollow noopener noreferrer">Personnalisez </a>n’importe quel aspect du site ! Assurez-vous de mettre dans toutes les pages nécessaires, les boutons, les images, le texte et le contenu pour une page se démarquer parmi les autres.</p><h3><strong>4. Publier le site</strong></h3><p></p><div class="mediabox"><img class="fake-mediabox-img" src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-editeur-apercu.jpg"> <img class="mediabox-img lazyload" data-srcset="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,h_400,w_600,q_auto/blog_service/2021-07-07-editeur-apercu.jpg 600w 400h, https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-editeur-apercu.jpg 1200w" data-lowsrc="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,f_auto,fl_lossy,w_20,q_auto/blog_service/2021-07-07-editeur-apercu.jpg" data-sizes="auto" host="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/blog_service/2021-07-07-editeur-apercu.jpg" alt="Éditeur Aperçu" title="Éditeur Aperçu" loading="lazy"></div><br><em>Image tirée de Strikingly</em><p></p><p>L’étape suivante est de publier le site et de voir comment il se présente sur le web. Essayez tous les aspects visuels et pratiques du site.</p><p>Assurez-vous d’enregistrer un domaine pour le site. Ça enregistre le site sur le net et crée un espace où le site est hébergé.</p><p>Et voilà. C’est aussi simple que ça. Pas besoin d’apprendre les codes HTML, pas de problèmes d’édition ou de mise à jour. Et tout ça en une journée de travail.</p><p>Alors, qu’est-ce que vous attendez ? Faites un site web gratuit sur <a href="https://fr.strikingly.com/s/discover" target="_blank" rel="nofollow noopener noreferrer">Strikingly </a>maintenant !</p></h2></h1></body>
