COMMENT

Page d'accueil

Menus

Barre d'icônes Icône de menu Accordéon Onglets Onglets verticaux En-têtes d'onglet Onglets pleine page Onglets de survol Navigation supérieure Topnav réactif Barre de navigation avec icônes Menu de recherche Barre de recherche Barre latérale fixe Navigation dans les pages Barre latérale réactive Navigation plein écran Menu hors-toile Survolez les boutons Sidenav Barre latérale avec icônes Menu de défilement horizontal Menu vertical Navigation en bas Bas de page réactif Liens de navigation de la bordure inférieure Liens de menu alignés à droite Lien de menu centré Liens de menu de même largeur Menu fixe Faites glisser la barre vers le bas sur le défilement Masquer la barre de navigation sur le défilement Réduire la barre de navigation lors du défilement Barre de navigation collante Barre de navigation sur l'image Survolez les listes déroulantes Cliquez sur Listes déroulantes Liste déroulante en cascade Liste déroulante dans Topnav Liste déroulante dans Sidenav Liste déroulante de la barre de navigation Resp Menu de sous-navigation Déposer jusqu'à Méga Menu Menu mobile Menu rideau Barre latérale réduite Panneau latéral réduit Pagination Chapelure Groupe de boutons Groupe de boutons verticaux Barre sociale collante Navigation dans les pilules En-tête réactif

Images

Diaporama Galerie de diaporamas Images modales Boite à lumière Grille d'images réactive Grille d'images Galerie d'onglets Fondu de superposition d'image Diapositive de superposition d'image Zoom de superposition d'image Titre de superposition d'image Icône de superposition d'image Effets d'image Image en noir et blanc Texte de l'image Blocs de texte d'image Texte d'image transparent Image pleine page Formulaire sur l'image Image du héros Image d'arrière-plan floue Changer Bg sur le défilement Images côte à côte Images arrondies Images d'avatars Images réactives Centrer les images Vignettes Bordure autour de l'image Rencontrer l'équipe Image collante Retourner une image Secouer une image Galerie de portefeuilles Portefeuille avec filtrage Zoom sur les images Loupe d'image Curseur de comparaison d'images Icône de favori

Boutons

Boutons d'alerte Boutons de contour Boutons partagés Boutons animés Boutons de fondu Bouton sur l'image Boutons de médias sociaux En savoir plus En lire moins Boutons de chargement Boutons de téléchargement Boutons de pilule Bouton de notification Boutons d'icône Boutons suivant/précédent Plus de bouton dans la navigation Bloquer les boutons Boutons de texte Boutons ronds Bouton de défilement vers le haut

Formes

Formulaire de connexion Formulaire d'inscription Formulaire de paiement Formulaire de contact Formulaire de connexion sociale Formulaire d'inscription Formulaire avec icônes Bulletin Formulaire empilé Formulaire réactif Formulaire contextuel Formulaire en ligne Effacer le champ de saisie Masquer les flèches numérotées Copier le texte dans le presse-papiers Recherche animée Bouton de recherche Recherche plein écran Champ de saisie dans la barre de navigation Formulaire de connexion dans la barre de navigation Case à cocher personnalisée/Radio Sélection personnalisée Interrupteur à bascule Cochez la case Détecter le verrouillage des majuscules Bouton de déclenchement à l'entrée Validation du mot de passe Basculer la visibilité du mot de passe Formulaire en plusieurs étapes Saisie automatique Désactiver la saisie semi-automatique Désactiver le correcteur orthographique Bouton de téléchargement de fichier Validation d'entrée vide

Filtres

Filtrer la liste Tableau de filtrage Éléments filtrants Liste déroulante des filtres Trier la liste Sort Table

les tables

Table à rayures zébrées Tables centrales Tableau pleine largeur Tableaux côte à côte Tableaux réactifs Tableau de comparaison

Suite

Vidéo plein écran Boîtes modales Supprimer modal Chronologie Indicateur de défilement Barres de progression Barre de compétences Curseurs de plage Info-bulles Survol de l'élément d'affichage Popups Pliant Calendrier HTML inclut Liste de choses à faire Chargeurs Évaluation étoilée Note de l'utilisateur Effet de superposition Contacter les puces Cartes Retourner la carte Carte de profil Fiche produit Alertes Faire appel à Remarques Étiquettes Cercles Style RH Coupon Groupe de liste Liste sans puces Texte réactif Texte découpé Texte lumineux Pied de page fixe Élément collant Hauteur égale Clearfix Flotteurs réactifs Snack-bar Fenêtre plein écran Faire défiler le dessin Défilement lisse Dégradé Bg Défilement En-tête collant Réduire l'en-tête lors du défilement Tableau des prix Parallaxe Ratio d'aspect Iframes réactifs Basculer J'aime/Je n'aime pas Basculer Masquer/Afficher Basculer en mode sombre Basculer le texte Basculer la classe Ajouter une classe Supprimer la classe Classe active Arborescence Supprimer la propriété Détection hors ligne Trouver l'élément caché Rediriger la page Web Zoom survol Boîte à rabat Centrer verticalement Bouton central en DIV Transition au survol Flèches Formes Lien de téléchargement Élément pleine hauteur Fenêtre du navigateur Barre de défilement personnalisée Masquer la barre de défilement Afficher/Forcer la barre de défilement Apparence de l'appareil Bordure modifiable Couleur de l'espace réservé Couleur de sélection de texte Couleur de puce Ligne verticale Diviseurs Animer des icônes Compte à rebours Machine à écrire Bientôt disponible Chat Messages Fenêtre de discussion contextuelle Écran divisé Témoignages Compteur de sections Diaporama de citations Éléments de liste fermables Points d'arrêt de périphérique typiques Élément HTML déplaçable Requêtes multimédia JS Surligneur de syntaxe Animations JS Longueur de la chaîne JS Exponentation JS Paramètres JS par défaut Obtenir l'URL actuelle Obtenir la taille d'écran actuelle Obtenir des éléments Iframe

Site Internet

Créer un site Web gratuit Créer un site Web Créer un site Web statique Créer un site Web (W3.CSS) Créer un site Web (BS3) Créer un site Web (BS4) Créer un site Web (BS5) Créer et afficher un site Web Créer un site Web d'arborescence de liens Créer un portefeuille Créer un CV Créer un site Web de restaurant Créer un site Web d'entreprise Créer un WebBook Site Web du centre Contacter la rubrique À propos de la page Grand en-tête Exemple de site Web

Grille

Disposition à 2 colonnes Disposition à 3 colonnes Disposition à 4 colonnes Grille extensible Affichage de la grille de liste Disposition des colonnes mixtes Cartes de colonne Disposition en zigzag Mise en page du blog

Google

Graphiques Google Polices Google Associations de polices Google Configurer Google Analytics

Convertisseurs

Convertir le poids Convertir la température Convertir la longueur Convertir la vitesse

Blog

Obtenir un emploi de développeur Devenez développeur front-end.

Comment créer un site Web avec une arborescence de liens

Un site Web d'arborescence de liens vous permet de partager tous vos liens sur un seul site.

Il s'agit d'une page de destination où vous pouvez afficher les liens vers vos réseaux sociaux, articles de blog, entreprises, projets, etc.

Créer un site Web d'arborescence de liens gratuitement »

Pourquoi créer un site web d'arborescence de liens

Le site Web de liens est idéal pour développer votre présence en ligne.

Cela facilite le partage de liens vers les endroits où vous avez du contenu.

De plus, le site Web de liens aide les gens à se connecter avec vous à plus d'un endroit.

En créant vous-même le site Web des liens, vous en avez le contrôle total.

L'apparence du site reflète votre marque. Concevez-le comme vous voulez qu'il apparaisse.


Que dois-je savoir pour créer mon site Web d'arborescence de liens ?

HTML, CSS et JavaScript sont les langages de base pour créer un site Web.

C'est tout ce dont vous avez besoin pour créer votre site de liens.

  1. Créez la structure avec HTML. La première chose que vous devez apprendre est HTML, le langage de balisage standard pour créer des pages Web.
  2. Apprendre le HTML ❯
  3. Styliser avec CSS. L'étape suivante consiste à apprendre le CSS, à définir la mise en page de votre page Web avec de belles couleurs, des polices et bien plus encore.
  4. Apprendre le CSS ❯
  5. Rendez-le interactif avec JavaScript. Après avoir étudié HTML et CSS, vous devez apprendre JavaScript pour créer des pages Web dynamiques et interactives pour vos utilisateurs.
  6. Apprendre JavaScript ❯

Comment puis-je commencer

Il existe deux façons de commencer à créer un site Web d'arborescence de liens.

Construire à partir de zéro ou en utilisant un modèle.

Construire avec les espaces W3Schools

Dans Spaces, vous pouvez créer et expérimenter votre site Web d'arborescence de liens.

Ici, vous pouvez créer des sites statiques avec HTML, CSS et JavaScript.

Tout ce dont vous avez besoin directement dans le navigateur.

Apprendre encore plus ❯

Construire une page Web d'arborescence de liens à partir de zéro

La première chose que vous devez faire est de créer une mise en page, puis d'ajouter du contenu.

Pour créer une mise en page de site Web, consultez notre article sur la façon de créer un site Web : Comment créer un site Web

Une fois que vous avez fait la mise en page. Créez les deux sections principales répertoriées ci-dessous :

1. Bio section.

La section bio est la première chose que les gens voient lorsqu'ils visitent votre site Web d'arborescence de liens.

Il est affiché en haut du site Web de l'arborescence des liens.

Gardez-le court et doux.

La section bio peut contenir votre image, votre nom et votre profession.

Les gens sont plus à l'aise pour communiquer avec vous s'ils connaissent votre nom et votre apparence.

section d'images

2. Rubrique Liens.

La section des liens contient tous les liens que vous souhaitez partager.

Il est affiché dans la section bio.

Assurez-vous que les liens sont bien structurés.

rubrique liens

Construire avec un modèle

Commencer avec des modèles est un excellent moyen de s'inspirer et d'apprendre.

Les modèles d'arbres de liens peuvent être chargés directement dans Spaces. Lancez-vous en quelques clics.

Copiez le code et collez-le dans l'éditeur Spaces ou enregistrez-le dans Spaces à partir de l'éditeur TryIt.

Commencer "

* Pas de carte de crédit nécessaire

Personnalisez le modèle

Voici une approche en quatre étapes pour personnaliser le modèle.


Première étape : modifier l'arrière-plan

Recherchez la propriété background ou background-image dans le code et modifiez l'URL.

Lisez ici comment changer une image d'arrière-plan : Comment changer l'image d'arrière-plan


Deuxième étape : Ajoutez votre photo

Trouvez la balise <img> et remplacez-la par l'URL de votre image.

Lire ici pour savoir comment changer une image : Comment changer une image


Troisième étape : rédigez votre biographie

Recherchez les balises de paragraphe en haut du code et modifiez le texte entre les balises <p> et </p>.

Lisez ici pour en savoir plus sur les paragraphes : À propos des paragraphes HTML


Quatrième étape : Ajoutez vos liens

Trouvez les balises d'ancrage et modifiez le texte entre les balises <a> et </a>.

Lisez ici pour en savoir plus sur les balises d'ancrage : À propos des balises d'ancrage HTML


Parcourir et choisir un modèle

Nous avons des modèles prêts à l'emploi que vous pouvez utiliser. Voici quelques exemples:

Liens sociaux 1

Liens sociaux 2

Liens sociaux 3


Espaces W3Schools

Espaces W3Schools

Créez votre site Web statique avec les espaces W3Schools.

Commencez gratuitement