Le HTML est très facile à écrire, mais souvent lorsque vous créez des pages Web, vous devez effectuer les mêmes tâches répétitives, telles que: B. la création de formulaires.

Dans ce guide de l’utilisateur, j’ai rassemblé plus de 10 extraits HTML prêts à l’emploi pour améliorer votre codage frontal.

Modèle de démarrage HTML5

Lorsque vous démarrez un nouveau projet, vous avez besoin d’un modèle de démarrage. Vous trouverez ici un modèle clair et bien agencé qui sert de base à vos projets HTML5.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
    <link rel="stylesheet" type="text/css" href="https://catswhocode.com/html-snippets/theme.css">

    <!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
		
  </body>
</html>

La source: https://snipplr.com/view/68539/plain-html5-starter-template/

Charger JavaScript de manière asynchrone

L’une des meilleures fonctionnalités de HTML5 est la possibilité de charger des fichiers JavaScript de manière asynchrone. Cela se fait très simplement en ajoutant le async Attribut à votre script Mots clés:

<script src="https://cdn-5ce4a003f911c80f50818892.closte.com/script.js" async></script>

Ce simple extrait de code montre le chargement asynchrone d’un fichier JavaScript. Cela accélère considérablement le chargement de la page, car le navigateur charge les fichiers HTML et JavaScript en même temps.

Définir la fenêtre d’affichage des sites Web réactifs

Lors de la création d’un site Web réactifL’ajustement de la fenêtre est un must.

L’extrait de code HTML suivant doit y être collé head Section de votre document.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Cet extrait de code HTML définit la vue sur tous les écrans sur un rapport hauteur / largeur 1 × 1 et supprime la fonctionnalité standard des iPhones et autres appareils mobiles qui rendent les sites Web en pleine vue et permettent aux utilisateurs de zoomer sur la mise en page en pinçant.

Obtenir un formulaire d’itinéraire (Google Maps)

Voici un extrait de code simple mais puissant pour créer un formulaire que l’utilisateur peut saisir à son emplacement pour obtenir un itinéraire vers un emplacement spécifique. Très utile pour les pages de contact.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

La source: https://css-tricks.com/snippets/html/get-directions-form-google-maps/

Encodage Base64 d’un Gif d’espacement 1 * 1px

Je ne recommande pas d’utiliser des gifs « espaceurs » clairs, mais je sais que les gens les utiliseront encore de temps en temps en 2019. Si vous êtes l’un d’entre eux, vous aimerez probablement cet encodage Base64 d’un gif d’espacement 1 * 1px. Bien mieux que d’utiliser une image.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

La source: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Modèle d’expression régulière pour la validation des e-mails

Avec HTML5, entre autres, les e-mails peuvent être comparés à un modèle avec des expressions régulières. En voici un prêt à l’emploi input Champ de modèle d’expression régulière pour vérifier une adresse e-mail.

<input type="text" title="email" required pattern="[^@][email protected][^@]+.[a-zA-Z]{2,6}" />

Formulaire d’inscription Bootstrap

Forme verticale Bootstrap

Un très simple Modèle de formulaire Bootstrap qui peut facilement être étendu et modifié pour répondre à presque tous les besoins. Utilisez cet extrait HTML comme point de départ pour presque tous les formulaires simples tels que les formulaires d’inscription, les formulaires de contact, etc.

 <form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Intégration flash valide

Intégrez-vous souvent des fichiers Flash dans vos pages HTML? Si tel est le cas, enregistrez le code d’intégration flash valide ci-dessous pour une utilisation ultérieure.

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

Insérer une vidéo HTML avec Flash de remplacement

Une autre grande caractéristique de la spécification HTML5 est certainement que video Balise qui vous permet d’intégrer facilement des fichiers vidéo.

Malheureusement, les anciens navigateurs ne peuvent pas gérer les vidéos HTML5 intégrées. Voici donc un extrait HTML complet avec une solution de secours Flash pour les anciens navigateurs.

<video width="640" height="360" controls>
	<source src="https://catswhocode.com/html-snippets/__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>

La source: http://camendesign.com/code/video_for_everybody

Appels iPhone et liens SMS

Avec la sortie de l’iPhone, Apple a introduit un moyen rapide de créer des liens d’appel et de message texte. Voici un exemple d’extrait de code à conserver dans votre bibliothèque d’extraits.

<a href="https://catswhocode.com/html-snippets/tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

Saisie automatique avec les listes de données HTML5

Utilisation de datalist Élément, HTML5 vous permet de compiler une liste de données pour compléter automatiquement un input Champ. Super utile! Voici un exemple de code que vous pouvez réutiliser dans vos propres projets.

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

La source: https://davidwalsh.name/datalist

Liste déroulante des pays pour les formulaires Web

Voici un autre gain de temps: une liste déroulante prête à l’emploi de tous les pays.
En raison de la taille du code, consultez la source directement.
La source: https://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

Fichiers téléchargeables

HTML5 vous permet de forcer le téléchargement des fichiers en utilisant download Attribut. Voici un lien standard vers un fichier téléchargeable.

<!-- will download as "expenses.pdf" -->
<a href="https://catswhocode.com/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

Limiter les téléchargements à certains types MIME

le accept L’attribut a été inclus dans la spécification HTML5. Utilisé sur un input type="file" Élément, il limite les téléchargements de fichiers à certains types MIME:

<input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png">

le accept L’attribut peut être utilisé pour spécifier une liste de types MIME séparés par des virgules qui sont acceptés pour le téléchargement. Dans le fragment de code ci-dessus, seules les images sont acceptées.

La source: David Walsh

Crash d’IE6

En 2019, la plupart des gens ont finalement mis à niveau le terrible Internet Explorer 6 qui a donné des cauchemars aux développeurs frontaux pendant des années. Mais certaines personnes l’utilisent encore. Si vous voulez vous débarrasser de ce navigateur préhistorique pour de bon, voici un code très amusant à inclure dans vos pages HTML.

Ce code plante IE6. Bam!

<style>*{position:relative}</style><table><input></table>

Questions fréquemment posées

Extrait de code HTML

Qu’est-ce qu’un extrait de code HTML?

Un extrait de code HTML est une petite partie du code source dans le balisage HTML. Les extraits comme ceux décrits dans ce guide de l’utilisateur peuvent être facilement réutilisés dans vos propres projets, c’est pourquoi ils sont populaires auprès des développeurs.

Comment ajouter du code HTML à un article WordPress ou à un site WordPress?

Lorsque vous affichez un extrait de code HTML dans un article ou un site WordPress, assurez-vous d’encoder et d’incorporer le code HTML <pre> et </pre>. Plus d’informations peuvent être trouvées ici Afficher le code dans WordPress conduite.

Quel type d’hébergement est le meilleur pour HTML?

Les pages HTML pures peuvent être hébergées sur n’importe quel plan d’hébergement. Bluehost fournit une plate-forme sécurisée pour les sites HTML et PHP pour 3,95 $ / mois. Vous pouvez trouver plus d’informations sur notre meilleur hébergement web conduite.



Source link

Recent Posts