TUTOS.EU

Template de base pour une page web avec du jQuery

Page web de base contenant une fonction jQuery

Une page de base en jquery peut se présenter ainsi

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />

		<title>jQuery : page de base</title> <!-- Très important pour le référencement. Google fera un lien vers votre page avec ceci. C'est aussi le titre donné quand on met la page dans les favoris. Ne doit pas dépasser 70 caractères (pas une règle absolue, mais Google par exemple coupe les titres trop longs entre 65 et 70 caractères dans les pages de résultat). -->
		<meta name="Description" content="jQuery : page de base"/> <!-- Utilisé pour le référencement. Ne pas dépasser 200 caractères. -->
		<meta name="author" content="Bob l'éponge" />
		<meta name="Keywords" content="jQuery, base"/> <!-- D'après http://www.alsacreations.com/article/lire/628-balises-meta.html, c'est obselète et ce n'est plus utilisé par Google. Mais allez trouver un site qui ne l'a pas. -->

		<!-- déclaration des fichiers de scripts -->
		<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <!-- Inclusion des scripts jQuery -->

	</HEAD>
	<BODY>

		<!-- Pour la structure, ce site explique très bien : http://www.siteduzero.com/tutoriel-3-561847-structurer-sa-page.html -->
		<div id="bloc_page">
			<header>
				<div id="titre_principal">
					<h1>jQuery : page de base</h1> <!-- Très important pour le référencement -->
				</div>
			</header>

		   <script>
			   jQuery(document).ready(function(){ <!-- En langage naturel : quand votre document actuel est prêt, jouez le code jQuery suivant -->
				   // Mettez ici votre code jQuery
			   });
		   </script>			
		</div> <!-- div bloc_page -->
	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

La première partie intéressante, c'est la déclaration du fichier qui contient les fonctions jQuery

Et il y a l'appel au code jQuery.
On peut en placer entre 2 balises scripts elles mêmes contenues dans la balise Body.


2