Comment utiliser un passe-partout HTML

Plaque signalétique HTML
(Crédit d'image: html5boilerplate.com)

Bienvenue dans le guide de Creative Bloq sur l'utilisation d'un passe-partout HTML. Lorsqu'il s'agit de créer un site Web, les fondations sous-jacentes sont toujours très similaires. Ainsi, au lieu de commencer chaque nouvelle page à partir de zéro, il est logique d'utiliser un passe-partout HTML contenant la structure HTML essentielle. C'est un moyen rapide et facile de commencer à créer n'importe quel site, et cela vous fera gagner beaucoup de temps et d'efforts. (Si vous démarrez un site à partir de zéro, consultez notre favori constructeurs de sites Web ).

Jetez un coup d'œil au code HTML d'un site ou d'une page et nous vous garantissons que vous verrez plusieurs des mêmes balises HTML (si vous voulez en savoir plus, consultez notre guide sur Balises HTML ) qui constituent la structure de base de toute expérience Web. Chaque page Web jamais créée démarrera avec le tag et il est presque certain que vous verrez les balises essentielles telles que ,,

Et ce ne sont pas seulement les balises HTML auxquelles vous devez penser. Les concepteurs et développeurs Web devront faire face aux bizarreries des navigateurs individuels. Un navigateur rendra certaines balises HTML différemment d'un autre, ce qui signifie que la mise en page d'une page peut être différente dans différents navigateurs. Découvrez notre mise en page parfaite du site Web post pour obtenir des conseils essentiels sur la façon de bien concevoir votre design. Et choisissez soigneusement entre hébergement Web services pour vous assurer que votre site est parfait.

CSS et JavaScript sont également une considération. Encore une fois, tous les navigateurs ne les interprètent pas de la même manière. Mais, presque tous ces problèmes peuvent être éliminés avec l'utilisation d'un passe-partout HTML. Et le meilleur, c'est qu'avant de commencer votre dernier projet, vous savez qu'il fonctionnera tout simplement. Le moyen idéal pour démarrer n'importe quel projet.



Qu'est-ce qu'un passe-partout HTML?

Les plaques chauffantes sont similaires aux modèles en ce sens qu'elles fournissent les éléments nécessaires pour créer la base d'une construction. En règle générale, un passe-partout HTML est un ensemble de fichiers qui fournissent une base pour tout site Web et qui auront été créés par des professionnels de l'industrie, qui ont rencontré les mêmes problèmes et ne veulent pas que les autres aient les mêmes problèmes.

Les boilerplates contiennent généralement une gamme de types de fichiers associés aux versions Web, notamment des documents HTML, des feuilles de style CSS de base, du JavaScript essentiel, des images d'espace réservé et de la documentation sur l'utilisation de ce que vous venez de télécharger.

Pour vous mettre sur la voie du paradis du HTML, le Plaque chauffante HTML5 est un excellent point de départ. Il se décrit comme «le modèle de frontend le plus populaire du Web» et est un modèle HTML élégant et simple qui contient tous les fichiers et ressources essentiels dont vous avez besoin pour commencer à créer immédiatement.

La dernière version de HTML5 Boilerplate (v7) est équipée d'un fichier index.html qui comprend des balises pour accueillir les options mobiles essentielles, Google Analytics et un lien vers Normaliser.css , qui aide à aplanir les incohérences du navigateur. Pour avoir une idée du fonctionnement de HTML5 Boilerplate, regardez la vidéo qu'ils ont mise en ligne sur leur chaîne YouTube. Il a quelques années, mais donne une idée générale du fonctionnement du passe-partout.

Une autre option très populaire à explorer est Amorcer . Il s'agit d'une «bibliothèque de composants frontaux», et c'est une offre bien plus complète que le framework HTML5 Boilerplate. Il propose des options pour la mise en page, le contenu, les polices, la typographie et les composants frontaux tels que les boutons, le carrousel, les info-bulles et bien plus encore.

Mais si vous ne voulez pas tout, vous ne pouvez télécharger que les éléments que vous souhaitez pour votre build. Parole d'avertissement, Bootstrap est un choix très populaire pour de nombreux concepteurs et développeurs Web, alors essayez d'être un peu plus imaginatif lorsque vous utilisez ses modèles. Vous ne voulez pas ressembler à tous les autres sites Web.

Utilisation du Boilerplate HTML5

Une fois téléchargé, ce passe-partout gratuit et open-source vous fournit la base d'une page html (index.html), quelques feuilles de style CSS, des fichiers JavaScript clés, un dossier img pour placer des images, une page 404, des fichiers de configuration et des Documentation.

HTML passe-partout

HTML5 passe-partout inclut Normalize.css pour vous assurer que vos sites fonctionnent correctement dans tous les navigateurs(Crédit d'image: necolas.github.io)

Lors du premier téléchargement, c'est une bonne idée de faire une copie, afin que vous ayez une version propre et non éditée des fichiers, comme référence.

Pour commencer, remplacez d'abord le favicon.ico et icon.png fichiers avec votre logo - ceux-ci apparaîtront en tant que favicon de votre site et icône lorsque votre site est enregistré sur l'écran d'accueil iOS de quelqu'un. Un générateur en ligne peut vous aider à créer de nouvelles images.

Dans le HTML, il y a une collection de balises avec lesquelles vous serez familier et certaines choses que vous ne connaissez pas. Par exemple, Moderniser peut être quelque chose que vous ne connaissez pas. Il s'agit d'un «code JavaScript qui détecte automatiquement la disponibilité des technologies Web de nouvelle génération». Cela permet de garantir que votre site reste à jour le mieux possible. L'élément de script final est pour Google Analytics, cela peut être supprimé, mais si vous l'utilisez, ajoutez simplement votre propre code Google Analytics.

Idéalement, laissez tout ce que vous avez trouvé et concentrez-vous sur le tag car c'est là que va le contenu. Ajouter du contenu après l'ouverture et idéalement avant le les balises qui viennent immédiatement après le

Mots clés. Assurez-vous que la page a un et remplissez le 'teneur' valeur dans le 'la description' balise meta. Cela donnera une introduction à ce qu'est le site, bon pour le référencement.

Notez également que tous les liens sont relatifs dans ce document et que vous devrez peut-être les changer en liens relatifs à la racine ou absolus si vous commencez à imbriquer des pages Web dans des dossiers. Par exemple, pourrait avoir besoin de devenir . De plus, il est recommandé de ajoutez des commentaires si vous apportez des modifications majeures au code HTML. Ainsi, lorsque vous reviendrez, vous pourrez vous rappeler quels changements ont été apportés.

Modifications CSS

Plaque chauffante HTML5

HTML5 Boilerplate est un excellent moyen de gagner du temps lors de la création de nouveaux sites Web

Sur les deux documents CSS inclus avec HTML5 Boilerplate, il n'est pas nécessaire de toucher normalize.css . Il s'agit du document de réinitialisation qui garantit que tous les navigateurs démarrent sur un pied d'égalité en ce qui concerne votre site Web. Par contre, main.css inclut ce que le document appelle `` valeurs par défaut d'opinion '', y compris certains styles de base pour les sélections, les règles horizontales, les images et les formulaires, les aides pour la visibilité des éléments, et @demi règles pour site Web adaptatif et imprimez.

Tout ici est un jeu équitable pour la mise à jour, mais réfléchissez soigneusement à la nécessité de le faire. Il y a une zone réservée aux styles personnalisés de l'auteur (c'est-à-dire le vôtre) ou vous pouvez créer un document CSS entièrement séparé et le joindre également à votre HTML.

Quel que soit votre choix, soyez conscient de la manière dont vous gérerez les mises à jour ultérieures de HTML5 Boilerplate lui-même. Si vous modifiez l'un des styles main.css par défaut, les modifications apportées dans les futures versions de HTML5 Boilerplate (qui seraient soit ajoutées en remplaçant des fichiers, soit en remplaçant des parties de fichiers) ne se retrouveront pas nécessairement sur votre site ou remplaceront votre propres modifications. Par conséquent, utilisez à nouveau les commentaires pour toute modification, ce qui rend les comparaisons ultérieures beaucoup plus faciles.

Options de passe-partout alternatives

HTML passe-partout: Initializr

Basé sur HTLM5 Boilerplate, Initializr génère un modèle personnalisable propre pour vous

Une fois que vous avez acquis de l'expérience, il vaut la peine d'envisager une version personnalisée en utilisant Initializr , en conservant les composants dont vous avez besoin et en abandonnant ceux dont vous n'avez pas besoin. De plus, si vous créez un site WordPress, explorez un thème vierge spécifique à WordPress, tel que HTML5 vierge . Ces téléchargements et services sont tous gratuits, vous pouvez donc les vérifier et les expérimenter à votre guise.

Néanmoins, quoi que vous fassiez, un peu de travail et d'enquête maintenant devrait vous faire gagner beaucoup de temps plus tard, lorsque vous sortez simplement votre passe-partout (rangé en toute sécurité dans stockage en ligne ) pour faire craquer un nouveau site Web.

Ce contenu est apparu à l'origine dans le magazine net.

Articles Liés: