Projets 2010-2011

Cours HTML/CSS

Semaine 4

Semaine 3

Semaine 2


Installation du Framework jQuery

Pour installer jQuery, il faut d'une part télécharger le fichier JavaScript contenant la bibliothèque jQuery, d'autre part télécharger un modèle de fichier vierge qui va nous permettre d'écrire notre propre script.

  • Télécharger le framework jQuery : jquery.js (version 1.4.4 compressée)
  • Télécharger le fichier de base pour l'écriture du script : commun.js

Une fois les deux fichiers téléchargés, on les place dans un dossier js placé à la racine du site. Ensuite, afin d'activer ces fichiers, on place le code suivant dans l'entête de la page (balise head), par exemple sous la ligne relative aux css. La ligne concernant le fichier jquery.js doit toujours être placée en première position :

<script script type="text/javascript" src="js/jquery.js"></script>
<script script type="text/javascript" src="js/commun.js"></script>

On devra donc avoir un code pour l'entête de la page HTML ressemblant à ceci :

                
                (...)
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Titre de la page</title>
                <link href="css/common.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="js/jquery.js"></script>
                <script type="text/javascript" src="js/commun.js"></script>
                </head>
                (...)
                
            

Exemple de code

            
            $('.header a').click(
			function(){
				$('.colonne').hide();
				return false;
				}
			);
             
            
            

Ressources

La balise Méta description

Cette balise sert à spécifier une courte description (2 lignes) pour la page. Elle doit être placée juste après la balise title, dans l'entête de la page (balise head). Cette description ne sera visible que lors de l'affichage de la liste des résultats d'un moteur de recherche, sous le lien / titre vers la page.

<meta name="description" content="Travaux réalisés à l'Ensad en 2010." />

Pour plus d'information : À quoi servent les balises META ?

Ajouter une icône favicon dans la barre du navigateur

<link rel="shortcut icon" href="favicon.ico" />

Pour générer une favicon transparente : Dynamic Drive

Pour plus d'information : Afficher une icône favicon dans le navigateur

La balise span

Pour plus d'information : STRONG, B, I, EM : quelle balise utiliser et pourquoi ?

Référencement

Indexation d'un site

Soumettre son site à Google

Insertion de médias

Insertion d'une animation flash

Plusieurs solutions sont possibles, toutefois nous préconisons l'utilisation de swfobject.

Télécharger swfobject 2.2 : swfobject.js

On place habituellement ce fichier nommé swfobject.js dans un dossier js placé à la racine du site (comme le dossier images). Ensuite pour activer ce fichier, on place le code suivant dans l'entête de la page (balise head), par exemple sous la ligne relative aux css :

 <script type="text/javascript" src="js/swfobject.js"></script>

Ensuite, à l'endroit où vous souhaitez insérer votre animation Flash, vous créez une nouvelle zone vide grâce à la balise div. On attribue à cette div un attribut id unique

<div id="animationFlash1"></div>

Au chargement de la page, le Javascript (swfobject.js) va remplacer cette div par l'animation flash correspondante. Au cas où l'utilisateur n'aurait pas la bonne version de Flash, on ajoute toujours un lien spécifique :

<div id="animationFlash1"><a href="http://www.adobe.com/go/getflashplayer">Télécharger flash</a> pour voir cette animation</div>

Si l'utilisateur ne possède pas la bonne version du Flash Player, le Javascript ne s'exécute pas, la div n'est pas remplacée ; la phrase est laissée et l'utilisateur est invité à télécharger la dernière version.

Enfin, on charge l'animation Flash (le swf doit être placé dans un dossier swf) grâce au code suivant, à placer dans dans l'entête de la page (balise head), juste après l'appel à swfobject.js :


            <script type="text/javascript">
            swfobject.embedSWF("swf/animation1.swf", "animationFlash1", "940", "40", "9.0.0", false);
            </script>
            

Mis à jour le 12/01/2011 | Benoît Montigné