Correction EFF TDi 2011 v4

 

Correction de EFF TDI 2011

Pour Telecgarger 

Cliquer

ici

Lire la suite

HTML

I. Introduction :

1. Sémantique des éléments HTML

À l'origine, HTML a été conçu pour être un langage de balisage porteur de sens. Cela signifiait que chaque élément codait un type de contenu particulier. Dans la deuxième moitié des années 1990, lorsque le « Web » a pris son essor, bon nombre d'auteurs de site ont émis le souhait que des éléments puissent être créés, qui leur permettent de gérer plus finement l'apparence du document quand il est affiché sur un navigateur graphique. Les éditeurs de navigateur ont suivi. Par la suite au tournant du siècle, les navigateurs supportant mieux les feuilles de style CSS, il est devenu possible de revenir à la séparation initiale du fond et sa mise en forme. Ce chapitre expose les éléments de la spécification plus spécialement consacrés au balisage « sémantique » du contenu.

Il existe en HTML deux types d'éléments : les éléments en ligne et les éléments de type bloc.2. Éléments de type bloc, éléments de type en ligne

• Les éléments en ligne sont destinés à être placés au fil du texte. Il s'agit par exemple des éléments d'emphase (em), des images (img), des liens (a)... Normalement, ces éléments n'ont pas vocation à être placés sur une page, mais à être affichés dans le contexte de l'élément parent qui les encadre. Un élément en ligne ne peut contenir que des éléments en ligne ou du texte.
• Les éléments de type bloc sont ceux qui, par défaut, ont un rendu visuel « en bloc » sur un navigateur graphique : c'est le cas par exemple des titres (h1...6), des paragraphes (p), des tableaux (table)... Ils peuvent être positionnés sur une page. À l'écran, ces éléments sont précédés et suivis d'un retour à la ligne. Les éléments de type bloc peuvent contenir des éléments en ligne. Tous les éléments de type bloc, sauf les paragraphes et les titres, peuvent de plus contenir d'autres éléments de type bloc.

1. Groupements d'élémentsII. Éléments usuels

Avant d'aborder les éléments porteurs d'une information sémantique à proprement parler, nous allons aborder deux éléments dont la fonction n'est que d'en contenir d'autres, sans aucune connotation sémantique propre : les éléments div et span. Il est parfois nécessaire de grouper plusieurs éléments soit pour organiser le contenu, soit pour mettre en page à l'aide d'une feuille de styles, tels que par exemple des titres et des paragraphes partageant un point commun (table des matières en tête d'un document, ensemble de liens sponsorisés et de publicités...). C'est là l'unique fonction de ces éléments. div est un élément de type bloc et peut contenir d'autres éléments de type bloc, span est un élément en ligne.

Un texte se structure à l'aide de titres (éléments h1... h6) et de paragraphes (éléments p). Tous sont des éléments de type bloc.2. Hiérarchisation de l'information : entêtes et paragraphes

Il existe six niveaux de titres, par ordre d'importance décroissante h1 à h6. Ces niveaux de titre sont interprétés par certaines aides techniques, et fournissent une table des matières pour la page Web. Il est donc important de respecter la hiérarchie de ces titres. Il faut également prendre garde à ne pas émietter l'information (il est rare d'avoir à faire appel à h5 ou h6 !).

Un paragraphe se signale dans la plupart des cas par l'élément p. Il est possible également d'utiliser l'élément pre (pour preformatted), qui permet, sur un navigateur graphique ou textuel, d'afficher le paragraphe en respectant les retours chariot et nombre d'espaces indiqués dans le code source.

L'élément br permet d'insérer un saut de ligne à l'intérieur d'un paragraphe. Avant de l'utiliser, il faut se demander si ce saut de ligne s'intercale logiquement au sein du paragraphe, ou bien s'il n'y a pas lieu de scinder ce dernier en deux éléments p distincts.

a. Introduction3. Listes

On distingue trois types de listes : listes à puces (éléments ul) et listes numérotées (éléments ol) qui partagent l'utilisation de l'élément li, et les listes de définitions (élément dl). Tous ces éléments sont de type bloc.

Les listes à puces sont les listes les plus simples, quand l'ordre de présentation des items est important ; elles comportent des items (éléments li). Il est possible d'imbriquer des listes. Attention toutefois au fait qu'un élément ul ne peut contenir que des éléments li :b. Listes à puces et ordonnées

<ul>
  <li>(....)</li>
  <li>(....)</li>
  <li>
    <ul>
      <li>(...)</li>
      <li>(...)</li>
      <li>(...)</li>
    </ul>
  </li>
  <li>(....)</li>
</ul>

Les listes numérotées sont des énumérations ordonnées (comme dans le cas de la présente liste) ; elles comportent des items (éléments li) et peuvent être imbriquées, tout comme les listes à puces. Par exemple, dans une recette de cuisine, on utilisera plutôt une liste non ordonnée pour les ingrédients, et une liste ordonnée pour indiquer la séquence des opérations.

Les listes de définition sont des suites de termes (éléments dt) et de définitions pour ces termes (éléments dd). Plusieurs définitions peuvent être indiquées pour un terme. Il est à noter que Google possède la fonctionnalité define, qui tire parti de ces listes pour extraire des définitions sur le Web. On écrira par exemple...c. Listes de définitions

<dl>
  <dt>Maison</dt>
  <dd>Une maison est une habitation.</dd>
  <dt>Château</dt>
  <dd>Un château est une grande maison.</dd>
  <dt>Palais</dt>
  <dd>Château somptueux</dd>
  <dd>Partie supérieure de la cavité buccale.</dd>
</dl>

a. Présentation4. Les tableaux

Un tableau se déclare à l'aide de l'élément table. Cet élément doit contenir des données sous format tabulaire, présentes dans des cellules. Ces dernières sont soit des cellules de données (élément td), soit des cellules d'entête (élément th). L'attribut summary de l'élément table donne une description du tableau. Tous les éléments mentionnés dans cette partie sont de type bloc.

Les tableaux ont souvent été utilisés pour la mise en page, afin de pallier le support partiel de CSS par les navigateurs. Dans la mesure où ce support est maintenant largement répandu, cet usage obsolète qui détournait l'élément table de sa signification première, est à abandonner.

Un tableau de données doit contenir une légende (élément caption), des entêtes de lignes et/ou de colonnes (éléments th). On peut également utiliser les éléments thead,tfoot et tbody, qui permettent d'organiser les grands blocs d'informations dans le tableau. thead est destiné à contenir les lignes d'entêtes, tfoot éventuellement leur reprise en fin de tableau (à noter que cet élément se place dans le code lorsqu'il est utilisé, entre les éléments thead et tbody). tbody contient les informations du corps du tableau ; il est possible d'en compter plusieurs par tableau, ce qui permet d'isoler des blocs de données indépendants.b. Structuration

Dans les cellules d'entête th, l'utilisation de l'attribut id, couplée à celle de l'attribut headers dans les cellules de données td permet de lier les cellules aux entêtes dont elles dépendent. Il est possible également d'utiliser l'attribut scope, pouvant prendre les valeurs col ou row, liant la cellule d'entête respectivement à une colonne ou une rangée de cellules de données.

<table summary="Description du tableau">
  <caption>Légende du tableau</caption>
  <thead>
    <tr>
      <th id="id1">Titre de la première colonne</th>
      <th id="id2">Titre de la deuxième colonne</th>
      <th id="id3">Titre de la troisième colonne</th>
      <th id="id4">Titre de la quatrième colonne</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Titre de la première colonne</th>
      <th>Titre de la deuxième colonne</th>
      <th>Titre de la troisième colonne</th>
      <th>Titre de la quatrième colonne</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td headers="id1">Cellule de la deuxième ligne, première colonne</td>
      <td headers="id2">Cellule de la deuxième ligne, deuxième colonne</td>
      <td headers="id3">Cellule de la deuxième ligne, troisième colonne</td>
      <td headers="id4">Cellule de la deuxième ligne, quatrième colonne</td>
    </tr>
    <tr>(...)</tr>
    <tr>(...)</tr>
  </tbody>
</table>

Pour plus de détails, voir le chapitre consacré aux tableaux.

Pour introduire un minimum d'interactivité dans un site Web, il est souvent bienvenu d'utiliser un formulaire. Il s'agit d'une zone d'une page dans laquelle l'utilisateur est invité à entrer des informations. Un formulaire est indiqué par l'élément de type bloc form. Cet élément peut contenir divers autres éléments (tous de type en ligne) de saisie (éléments input, textarea ou select), d'interaction (élément button) ou des étiquettes destinées à informer l'utilisateur de la nature du champ à remplir (élément label). Lorsque des ambiguïtés sont susceptibles de perturber le bon remplissage du formulaire, on peut utiliser un élément fieldset accompagné d'une légende (élément legend) pour lever les incertitudes. Par exemple,5. Formulaires

<form method="(...)" action="(...)">
  <fieldset>
    <legend>Adresse de facturation</legend>
    <label for="nomFac">Nom</label>
    <input type="text" id="nomFac">
    <label for="numrueFac">Numéro et rue</label>
    <input type="text" id="numrueFac">
    <label for="codepostalFac">Code postal</label>
    <input type="text" id="codepostalFac">
    <label for="villeFac">Ville</label>
    <input type="text" id="villeFac">
  </fieldset>
  <fieldset>
    <legend>Adresse de livraison</legend>
    <label for="nomLiv">Nom</label>
    <input type="text" id="nomLiv">
    <label for="numrueLiv">Numéro et rue</label>
    <input type="text" id="numrueLiv">
    <label for="codepostalLiv">Code postal</label>
    <input type="text" id="codepostalLiv">
    <label for="villeLiv">Ville</label>
    <input type="text" id="villeLiv">
  </fieldset>
</form>

Pour plus de détails, voir le chapitre consacré aux formulaires.

Il est facile d'indiquer qu'une image doit être présente sur une page Web ; pour cela, on utilise l'élément img. Cet élément utilise deux attributs obligatoires : l'attribut srcpointe vers l'image à insérer, et l'attribut alt en donne une alternative à destination des agents utilisateurs qui ne sont pas en mesure de restituer les images (navigateurs graphiques dans lesquels la visualisation des images a été désactivée, lecteurs d'écran, moteurs de recherche...). Pour plus de détails, voir le chapitre consacré aux images.6. Images

7. Liens hypertexte

a. Adresse relative, adresse absolue

Quand, à partir d’une page donnée, on fait référence à une autre ressource (ce peut être une image, ou un autre fichier HTML), il est possible de le faire de deux manières : relative ou absolue.

• Une adresse absolue commence par http:// : concrètement, le poste client (celui sur lequel se trouve le navigateur) doit alors déterminer le chemin vers le serveur à chacune de ces requêtes, et ce, que ce chemin lui soit réellement connu ou pas (via son serveur de nom de domaine (DNS).
• Une adresse relative spécifie le chemin menant au fichier cible, à partir du fichier courant, en utilisant une syntaxe similaire à la navigation dans une arborescence Unix. Par exemple, pour indiquer que le fichier fichier1.html se trouve dans le répertoire rep1, fils du répertoire courant, on écrira rep1/fichier1.html. Si le fichierfichier2.html se trouve dans le répertoire parent, on écrira ../fichier2.html et enfin, si le fichier image1.png se trouve dans le répertoire images frère du répertoire courant, on écrira ../images/image1.png.

b. Types de liens

Il existe deux types de liens dans une page :

• Les liens « classiques » que l'on a l'habitude de suivre quand on consulte une page Web se codent à l'aide de l'élément a, pour lequel on précise l'attribut href qui pointe vers l'adresse de la page ou, plus généralement, de la ressource à visiter. Il est possible aussi de spécifier la langue dans laquelle est rédigée cette ressource à l'aide de l'attribut hreflang. Il s'agit d'un élément de type en ligne. Par exemple, <p>Ceci est un paragraphe contenant un lien vers l’<a href="http://www.upmc.fr/">Université Pierre-et-Marie Curie</a>.</p>
• Il est possible d'ajouter à un document une deuxième sorte de liens qui n'apparaissent pas dans le corps de la page, grâce à l'élément link. Cet élément, à utiliser dans l'entête du fichier, permet de spécifier aux outils capables de le traiter des « méta-liens », comme un lien vers des informations sur l'auteur, sur une table des matières, vers l'accueil... L'exemple ci-après permet d'indiquer au navigateur l'existence d'un lien vers un fichier censé être le suivant dans l'ordre logique de lecture des pages du site, puis l'existence d'une version alternative au format Postscript :
  
  
  <link rel="next" type="text/html" href="fichier_suivant.html">
  <link rel="alternate" type="application/postscript" href="document.ps">

Sauf exception, tous les éléments mentionnés ci-après sont des éléments de type en ligne.III. Autres éléments

1. Emphase

Une emphase est réalisée grâce à l'élément em ; si on a besoin d'une emphase plus forte, on utilise strong. Ces éléments étaient parfois mal utilisés pour mettre du texte respectivement en italique ou en gras, alors qu'il ne s'agit là que de la manière dont elles sont traduites par un navigateur graphique, et donc d'un détournement de leur signification.

La notion de citation prête à confusion en français, par rapport à l'anglais. Dans cette langue en effet, il existe deux sortes de citations au sens français : d'une part les « citations », qui désignent des références de type bibliographique, comme par exemple des titres de livres ou des noms d'auteur, et d'autre part les « quotations » qui sont des extraits de texte.2. Citation

1. Les références bibliographiques sont codées grâce à l'élément cite.
2. Les citations de texte se font en ligne grâce à l'élément q, et quand il s'agit d'un bloc de texte, grâce à l'élément blockquote qui est de type bloc. Ces deux éléments peuvent être précisés avec l'attribut cite, dont le but est de donner, quand cela est possible, l'URL de la ressource qui est citée.

Par exemple,

<p>Le célèbre poème de Pierre de Ronsard intitulé <cite>À Cassandre</cite> commence par ces mots : <qcite="http://fr.wikisource.org/wiki/Mignonne%2C_allons_voir_si_la_rose...">"Mignonne, allons voir si la rose Qui ce matin avait déclose..."</q>.</p>

<blockquote cite="http://fr.wikisource.org/wiki/Son_Excellence_Eug%C3%A8ne_Rougon_-_10">
  <p>Cependant, M. Kahn, qui avait dîné avec le ministre et le préfet, était très questionné sur la solennité du lendemain. On devait se rendre à une lieue de la ville, dans le quartier dit des Moulins, devant l'entrée d'un tunnel projeté pour le chemin de fer de Niort à Angers ; et là Son Excellence le ministre de l'Intérieur mettrait lui-même le feu à la première mine. Cela parut touchant.</p>
  <p>Rougon faisait le bonhomme. Il voulait simplement honorer l'entreprise si laborieuse d'un vieil ami. D'ailleurs, il se considérait comme le fils adoptif du département des Deux-Sèvres, qui l'avait autrefois envoyé à l'Assemblée législative. À la vérité, le but de son voyage, vivement conseillé par Du Poizat, était de le montrer dans toute sa puissance à ses anciens électeurs, afin d'assurer complètement sa candidature, s'il lui fallait jamais un jour entrer au Corps législatif.</p>
</blockquote>

Il est parfois nécessaire de conserver les traces des mises à jour successives d'une page mise en ligne. Deux éléments complémentaires ont ce rôle : del et ins. Ces deux éléments possèdent deux attributs, datetime et cite. cite donne l'URL d'une ressource expliquant éventuellement les raisons de la modification. datetime indique la date et l'heure de la modification, sous une forme normalisée (YYYY-MM-DDThh:mm:ssTZD) :3. Insérer des marques de mise à jour

• YYYY désigne l'année ;
• MM désigne le mois ;
• DD désigne le jour ;
• hh:mm:ss désigne l'heure en heures, minutes, secondes ;
• T sépare date et heure ;
• TZD désigne le fuseau horaire.

Cette notation assez lourde peut être tronquée quand une telle précision n'est pas nécessaire. On peut ainsi écrire <del datetime="2005-06-13">texte supprimé</del> <ins datetime="2005-06-13">texte corrigé</ins>.

On distingue en français acronymes et sigles. Les acronymes, codés à l'aide d'éléments acronym, sont prononcés comme des mots (par exemple, OTAN ou CAPES). Les sigles sont codés grâce à l'élément abbr, de l'anglais abbreviation, à ne pas écrire selon l'orthographe française abréviation (par exemple UE ou URSS).4. Abréviations et acronymes


HTML étant un langage informatique, ses concepteurs ont eu tendance à multiplier les éléments destinés à la transcription des langages de programmation. On dénombre ainsi :5. Formatage de code

1. code, qui désigne un morceau de code de programmation ;
2. var, qui désigne une variable ;
3. kbd, qui désigne une saisie faite au clavier par l'utilisateur ;
4. samp, qui désigne une sortie faite par un programme.

6. Définition en ligne : l'élément dfn

L'élément dfn permet d'écrire une définition dans un corps de texte. Par exemple,

<p><dfn>Un château est une grande maison</dfn>, et Louis XIV a fait construire celui de Versailles.</p>

Lire la suite

javascript

javaScript est un langage de programmation complètement lié au langage HTML. Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages.C'est le navigateur qui interprète le code HTML et JavaScript. L'interprétation dépend naturellement du type de navigateur utilisé et de sa version.JavaScript est un langage objet et événementiel. Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc...) 

1 - Comment intégrer du code JavaScript dans une page HTML ?

Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript :

• dans le corps de la page,
• en entête de page,
• dans un événement d'un objet de la page.

La structure classique d'une page HTML contenant du JavaScript est la suivante :

<HTML>
<HEAD>
<TITLE>Titre de page</TITLE>
<SCRIPT language="JavaScript">
<!--   // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript


//-->  // Fin de la partie cachée
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT type="text/JavaScript">
<!--   // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript


//-->  // Fin de la partie cachée
</SCRIPT>
</BODY>
</HTML>

C'est donc entre les balises <SCRIPT> qu'est inséré le code javascript. Veillez à bien respecter la syntaxe proposée, en particulier les <!-- et //--> pour cacher le script aux anciens navigateurs.
Il est possible aussi de faire appel à un script quand l'utilisateur clique sur un lien :

<A HREF="javascript:ma_fonction()">Cliquez ici</A>

2 - La déclaration des variables, des objets et des tableauxJavaScript utilise l'instruction var pour la déclaration. Toute nouvelle variable doit être initialisée.

Déclaration des variables basiques
Pour déclarer une variable basique, c'est-à-dire de type entier, numérique, chaîne de caractères, etc, il ne faut pas déclarer le type. Le navigateur le détecte.
EXEMPLES de déclaration de variables basiques :

var prenom_visiteur="Marcel";
var nom_visiteur="Dupond";
var age_visiteur=29;

On remarque la présence du point virgule (;) à la fin de chaque instruction.
Il est possible de placer sur une même ligne plusieurs instructions séparées par des points virgules.
Une variable déjà déclarée s'utilise ensuite normalement :

var accueil="Bonjour " + prenom_visiteur + " " + nom_visiteur;

Déclaration et création d'objetsJavaScript intègre d'origine plusieurs type d'objets. Voyons tout d'abord l'objet Date, très utile dans un environnement internet.
La déclaration se fait toujours avec var. Pour créer un objet, il faut utiliser le mot-clé new suivi du type d'objet Date. ATTENTION, le respect des majuscules/minuscule est indispensable et source de nombreuses erreurs.

var date_jour=new Date();

Cette ligne crée un objet Date contenant la date du jour.

var une_date=new Date(annee,mois-1,jour,heure,min)

Cette ligne crée un objet date avec une date paramétrable.

Déclaration et utilisation des tableauxEn JavaScript, les tableaux sont des objets et leur déclaration est identique à celle vue plus haut.

var un_tableau=new Array(10)

Cette ligne crée un tableau de 10 éléments de type basique (réel, entier, chaîne de caractères). En JavaScript, le premier élément est indexé à 0. Il est possible de déclarer un tableau sans dimension fixée. La taille du tableau s'adapte en fonction du contenu :

var un_autre_tableau=new Array;

Pour accéder aux éléments du tableau, on utilise les crochets "[" et "]"

un_tableau[0]=10;
un_tableau[9]=5;

Des méthodes associées à l'objet permettent d'effectuer des traitements ou d'accéder à des propriétés. On utilise la notation pointée pour appliquer une méthode sur un objet ou pour accéder à une propriété.

var dimension=un_tableau.length;

Cette ligne retourne le nombre d'éléments de l'objet Array appelé "un_tableau".

3 - La déclaration des fonctions et des instructionsLes fonctions et instructions sont déclarées et codées dans l'entête de la page et peuvent être appelées ensuite à n'importe quel endroit de la page. Pour déclarer une fonction ou une instruction, on utilise le mot-clé "function", suivi de son nom et des éventuels paramètres.

function ma_fonction(param1, param2)
 {
 ....
 }

function mon_autre_fonction()
 {
 ....
 }

Le corps des fonctions et instructions est délimité par "{" et "}" dans lequel on place la déclaration des variables locales, propres à la fonction, ainsi que l'ensemble des traitements.
Une fonction aura dans son corps une ou plusieurs instructions return qui permet de renvoyer une valeur ou un objet. L'instruction return n'est pas obligatoire; on a alors affaire à une instruction qui ne renvoie pas de valeur.
Les fonctions déclarées dans l'entête de la page peuvent être appelées elles-mêmes, de manière itérative, dans d'autres fonctions et dans le corps de la page.

Lire la suite

Correction EFF 2010 V1

 

Corretion TDI EFF

Voila Le Lien de Telechargement 

Telecharger

Lire la suite

Correction EFF TDI 2010 v8

Correction EFF 2010 V8

Telecharger 

Lire la suite

Corretion TDi EFF 2009 v6

 

Corretion TDI EFF

Voila Le Lien de Telechargement 

Telecharger

Lire la suite