FRFAM.COM >> Famille >> Technologie &Innovation >> Informatique

5 modèles HTML gratuits pour créer facilement des sites Web rapides

Que vous dirigiez votre propre entreprise ou que vous vouliez simplement faire de la publicité pour vous et vos compétences, il est important d'avoir un site Web. Mais peut-être que vous n'avez pas le temps d'apprendre le langage HTML et que vous ne voulez pas dépenser d'argent pour des services de conception Web coûteux.

Dans ce cas, vous pouvez utiliser nos modèles HTML gratuits. Nous avons créé des modèles simples que vous pouvez adapter à vos propres besoins pour créer un site Web simple. Nous avons également inclus des instructions afin que vous puissiez utiliser les modèles même si vous êtes un débutant total avec HTML.

Comment utiliser les modèles

Vous pouvez prévisualiser chaque modèle en cliquant sur le lien dans le titre. Mais pour modifier et utiliser les modèles vous-même, vous devez d'abord les télécharger. Pour cela, clic droit sur le titre de chaque modèle et choisissez Enregistrer le lien sous... . Sélectionnez ensuite un dossier pour enregistrer le modèle et cliquez sur Enregistrer.

Une autre méthode consiste à ouvrir le modèle dans votre navigateur en cliquant sur le lien. Puis clic droit n'importe où sur la page et sélectionnez Afficher la source de la page . Cela vous montrera le code HTML utilisé pour la page. Vous pouvez ensuite appuyer sur Ctrl + S pour enregistrer le modèle sur votre ordinateur.

Allez maintenant dans le dossier où vous avez enregistré le modèle. Clic droit sur le modèle et choisissez Ouvrir avec puis sélectionnez Bloc-notes. Cela ouvre le modèle en tant que document texte. Ici, vous pouvez apporter les modifications souhaitées au modèle, puis enregistrer.

Une fois vos modifications effectuées, vos pages sont prêtes à être hébergées. Consultez notre guide des meilleurs services d'hébergement de sites Web gratuits pour trouver un hébergeur approprié et votre site peut être en ligne en un rien de temps.

1. Modèle À propos de moi

5 modèles HTML gratuits pour créer facilement des sites Web rapides

Ce modèle est destiné à une simple page d'accueil, qui peut être destinée à votre site Web personnel ou professionnel. Vous pouvez ajouter une image de portrait et un texte sur vous et vos réalisations professionnelles.

Vous pouvez également utiliser ce modèle pour tout autre type de contenu textuel, comme des informations sur un passe-temps ou un sujet que vous souhaitez partager.

Pour personnaliser le modèle, ouvrez d'abord le fichier HTML dans un éditeur de texte comme le Bloc-notes ou WordPad. Pour comprendre ce que vous voyez, vous pouvez apprendre à comprendre le code HTML de base.

Modifier le titre de la page

La première chose à changer est le titre. Il s'agit du texte qui apparaît en haut de l'onglet lorsque vous ouvrez la page. Pour changer cela, trouvez la section :

John Smith - À propos de moi

Modifiez maintenant le texte à l'intérieur des balises pour dire ce que vous voulez.</P> <h3 id="change-the-image">Changer l'image</h3> <p> Le modèle est fourni avec le logo MakeUseOf à titre d'exemple. Vous pouvez changer cette image en ce que vous voulez. Une image carrée est plus belle, mais vous pouvez également utiliser une image rectangulaire si vous préférez. Pour changer l'image, trouvez cette ligne :</P> <p> <pre><img loading='lazy' alt='5 modèles HTML gratuits pour créer facilement des sites Web rapides ' src="muo-logo.jpg" class="about"></pre> </P> <p> Remplacez maintenant "muo-logo.jpg" par l'URL de votre image.</P> <h3 id="change-the-text">Modifier le texte</h3> <p> Il ne vous reste plus qu'à ajouter le texte que vous souhaitez pour la page. Pour ce faire, recherchez les balises de paragraphe. Ce sont <p> au début et </p> à la fin.</P> <p> Copiez et collez le texte que vous voulez entre ces balises de paragraphe. Un espace sera automatiquement ajouté à la fin de chaque paragraphe. Pour ajouter plus de paragraphes, ajoutez simplement un autre ensemble de balises <p> </p> avec du texte à l'intérieur.</P> <p> Vous pouvez également modifier le titre en haut du texte. Pour changer cela, recherchez la ligne :</P> <p> <pre><h1>À propos de moi</h1></pre> </P> <p> Et remplacez le texte "À propos de moi" par ce que vous voulez.</P> <h2 id="where-to-find-me-template"> 2. Modèle Où me trouver</h2> <img loading='lazy' alt='5 modèles HTML gratuits pour créer facilement des sites Web rapides ' src="//www.frfam.com/article/uploadfiles/202203/2022030311093493.jpg" /> <p> Ce modèle est un moyen simple de lier tous vos sites de médias sociaux. Vous pouvez l'utiliser comme une page de destination qui pointe vers tous les autres sites sur lesquels vous pouvez être trouvé en ligne.</P> <h3 id="change-the-social-media-links">Modifier les liens des médias sociaux</h3> <p> Vous devez modifier les liens et le nom de chaque compte de réseau social. Pour ce faire, commencez par le compte Twitter. Trouvez cette ligne :</P> <p> <pre><img loading='lazy' alt='5 modèles HTML gratuits pour créer facilement des sites Web rapides ' src="twitter-logo.svg" class="socmed"></P> <p> <br><br></P> <p> <b>Twitter :</b> <a href="http://twitter.com/johnsmith" target="_blank">@JohnSmith</a> </pre> </P> <p> Il y a deux choses à changer ici. Tout d'abord, remplacez le lien http://twitter.com/johnsmith par le lien de votre compte Twitter. Deuxièmement, changez la poignée @JohnSmith en votre poignée.</P> <p> Faites maintenant de même avec les autres sites de médias sociaux.</P> <p> S'il y a un site que vous n'utilisez pas, par exemple si vous n'avez pas de compte Tumblr, supprimez simplement cette section du modèle :</P> <p> <pre><img loading='lazy' alt='5 modèles HTML gratuits pour créer facilement des sites Web rapides ' src="tumblr-logo.png" class="socmed"></P> <p> <br><br></P> <p> <b>Tumblr :</b> <a href="https://johnsmith.tumblr.com" target="_blank">johnsmith</a> </P> <p> <div style="clear:both"></P> <p> <br><br></P> <p> </div> </pre> </P> <h3 id="change-the-heading-and-title">Modifier le titre et le titre</h3> <p> À l'instar du modèle À propos de moi, vous pouvez modifier l'en-tête et le titre en modifiant le texte à l'intérieur des balises <h1></h1> et des balises <title>.

3. Modèle de contact

5 modèles HTML gratuits pour créer facilement des sites Web rapides

Cette page est un moyen pour les gens de vous contacter sans qu'ils aient à vous envoyer un e-mail. Le formulaire prend les informations saisies et les envoie automatiquement à votre adresse e-mail. C'est un moyen facile pour les visiteurs du site de vous contacter.

Modifier votre adresse e-mail

Pour que le formulaire fonctionne, vous devez modifier une ligne dans le modèle :

Ici, vous remplacez votre [email protected] par votre adresse e-mail. Cela fonctionnera avec n'importe quel fournisseur de messagerie et vous recevrez un e-mail avec les commentaires saisis dans le formulaire par les visiteurs du site.

Modifier le texte, l'en-tête et le titre

Encore une fois, vous pouvez également modifier le texte qui apparaît sur cette page. Pour modifier le texte, modifiez simplement ce qui apparaît entre les balises

. Pour modifier le titre, modifiez le texte entre les balises

. Pour modifier le titre, modifiez le texte entre les balises .

4. Modèle de page d'accueil d'entreprise

5 modèles HTML gratuits pour créer facilement des sites Web rapides

Lorsque vous créez une page d'accueil pour votre entreprise, vous souhaitez avoir toutes les informations clés en un seul endroit. C'est à cela que sert ce modèle.

Modifier les titres de section

Pour modifier le titre de chaque section, recherchez ces lignes :

À propos de nous

Notre mission

Nos services

Nos clients

Changez maintenant le titre de ces sections comme bon vous semble en modifiant le texte entre les balises

et

.

Modifier le contenu de la section

Pour modifier le texte qui apparaît sous chaque titre, recherchez un paragraphe qui commence comme suit :

Lorem ipsum dolor sit amet...

Modifiez maintenant le texte à l'intérieur des balises

et

pour dire ce que vous voulez.

Changer l'image

Le modèle comprend un espace pour une image en bas de la page. Pour changer l'image, trouvez cette ligne :

5 modèles HTML gratuits pour créer facilement des sites Web rapides

Remplacez maintenant l'URL "muo-logo.jpg" par l'URL de l'image que vous souhaitez utiliser.

5. Modèle de page d'avis commercial

5 modèles HTML gratuits pour créer facilement des sites Web rapides

Lorsque vous dirigez une entreprise, il est important de rendre disponibles les témoignages de clients. Cela montre aux nouveaux clients potentiels que d'autres personnes ont utilisé votre entreprise et ont eu une bonne expérience.

Ce modèle vous permettra de montrer vos meilleurs avis clients.

Ajout d'informations client

Pour ajouter des avis à cette page, vous devez d'abord ajouter les informations du client. Pour ce faire, recherchez cette section pour le premier avis que vous souhaitez ajouter :

Nom du client : John Smith



Activité client : Smith's Supplies

Maintenant, remplacez simplement "John Smith" par le nom du client et remplacez "Smith's Supplies" par le nom de l'entreprise du client.

Ajouter des avis clients

Pour ajouter l'avis lui-même, regardez sous les informations client et trouvez ce paragraphe qui commence comme suit :

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Supprimez maintenant ce texte et remplacez-le par l'avis du client.

Ajouter d'autres avis

Pour ajouter plus d'avis que les trois sur le modèle, copiez tout le bloc commençant par

et se terminant par

. Collez ceci sous les avis actuels et modifiez-le pour ajouter d'autres avis.

Créer un site Web rapidement avec des modèles HTML

Ces modèles vous permettront de créer rapidement et facilement une page web personnelle ou professionnelle. Vous pouvez modifier chaque modèle en fonction de vos besoins, ou en utiliser plusieurs et les lier ensemble pour créer un site complet.

Si vous souhaitez faire passer votre site Web au niveau supérieur, vous pouvez apprendre à créer votre propre site Web à partir de zéro. Découvrez comment créer un site Web pour les débutants pour en savoir plus.


[]