Outils pour utilisateurs

Outils du site


web:html3

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
web:html3 [2014/05/14 02:48] – créée sgariepyweb:html3 [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
-====== Techniques de déboguage ====== +<note>Page gardée seulement pour archives Les informations contenues dans cette pages ne sont plus pertinentes aujourd'hui.</note>
-La gestion des erreurs joue un rôle important dans le développement de logiciels. L’effort à  +
-fournir, en ressources humaines et financières, pour débarrasser un logiciel des erreurs qu’il  +
-contient peut être colossalEn général, plus une erreur fait du chemin dans le processus de  +
-développement, plus le prix à payer pour la corriger est élevé. Cela veut dire qu’il faut  +
-détecter et corriger une erreur le plus rapidement possible et ne pas la laisser se noyer dans la  +
-complexité grandissante du logiciel.+
  
-Ce document commence par dresser les types d’erreurs qui existent en programmation.  +====== Introduction ====== 
-Ensuiteil présente des techniques et conseils pour éviter de commettre des erreursEnfin, il  +L'//Hypertext Markup Language// sert à décrire des documents contenant du texte, des images, des liens et d'autres éléments à l'aide de balises Les documents HTML sont normalement tous reliés ensemble à l'aide des liens pour créer des ensembles, soit des sites, intranet ou des interfaces de CD-ROM multimédia.
-expose des techniques pour corriger les erreurs présentes dans un logiciel.+
  
-====== Types d'erreurs de programmation ======+====== Règles des balises ====== 
 +  * Toutes les instructions sont exprimées dans les balises (ou //tags//) 
 +  * Une balise est délimitée par les symboles ''<'' et ''>''
 +    * Exemple : ''<FORM>'', ''<TABLE>'', ''<FONT>''
 +  * Presque toutes les balises doivent être ouvertes et fermées 
 +    * Exemple : ''<TABLE></TABLE>'' 
 +    * ou s'il n'y a pas de balise de fermeture : ''<balise **/**>'' 
 +  * Les balises ne doivent pas se chevaucher  
 +    * Incorrect -> ''<b><i>bonjour</b></i> 
 +    * Correct -> ''<b><i>bonjour</i></b> 
 +  * Dans les balises les majuscules sont équivalentes aux minuscules
  
-Il existe plusieurs catégories d’erreurs en programmation : +====== Structure générale ====== 
-  - Les erreurs lexico-syntaxiques : elles se produisent lorsque le programmeur ne respecte pas les règles lexicales et syntaxiques du langage.  +Un document HTML est généralement divisé en deux parties.  L'entête qui est entre les balises ''<HEAD></HEAD>'' et le corps qui est entre les balises ''<BODY></BODY>''. 
-  - Les erreurs de logique : ce sont des erreurs qui changent le sens du programme.  +<code html> 
-  - Les erreurs d’exécution : ce sont des erreurs qui font planter le programme ou le terminent le façon impromptue. Elles peuvent être causées par le programme lui même du à des erreurs commises par le programmeur ou par l’environnement d’exécution.  +<HTML> 
-  - Les situations d’exception : ce ne sont pas des erreurs proprement dites mais des situations qui peuvent se produire et empêcher le programme de fonctionner normalement.  Elles sont généralement dues au comportement de l’utilisateur ou à l’environnement externe.+  <HEAD> 
 +    <TITLE>Titre de la page</TITLE> 
 +  </HEAD> 
 +  <BODY> 
 +  </BODY> 
 +</HTML>
  
-===== Les erreurs lexico-syntaxiques =====  
-Ces erreurs se produisent lorsqu’on ne respecte pas une règle lexicale ou syntaxique du langage comme, par exemple, écrire mal un mot réservé, oublier une accolade ouvrante ou fermante ((Ce document aborde le déboguage indépendamment de tout langage de programmation.  
-Cependant, les exemples se basent plutôt sur la syntaxe des langages C/C++ et Java. En  
-Pascal/Delphi, les accolades sont remplacées par begin et end. De plus, ce dernier langage n’est  
-pas sensible à la casse.)), imbriquer mal des accolades ou utiliser mal une structure de contrôle.  
-  
-<code java> 
-While (i>10) //le W doit être en minuscule  
- {...}  
-</code> 
-<code java> 
-int i;   
-for (i=0 ;i<10 ;i++)  
- ...  
- } //où est l’accolade ouvrante?  
-</code> 
-<code java> 
-int i;   
-if (i>=0)  
- {   
- ...  
-else //ce else doit être après }. 
-  
 </code> </code>
  
 +====== Les commentaires ======
 +Les commentaires est tout ce qui est ignoré par le navigateur.  Sert à documenter, débogguer, etc.
 +<code html><!-- ceci est un commentaire --></code>
  
 +====== Les balises de base ======
  
-====== Tests logiciels ====== 
-C’est bien de développer des logiciels, encore faut-il qu’ils soient de qualité.  La qualité d’un logiciel prend un sens différent pour chaque type d’intervenant dans le cycle de vie du logiciel.  Mais de manière générale, on peut dire que la qualité est l’aptitude à satisfaire des besoins, exprimés de façon implicite ou explicite.  La qualité ne se limite donc pas à l’absence d’erreurs. 
  
 +===== Niveaux de titres =====
 +Il existe six niveaux de titres : ''<H1>'' à ''<H6>''.
  
 +===== Paragraphes =====
 +  * La balise ''<P>'' débute un nouveau paragraphe
 +  * La balise ''<BR>'' fait une nouvelle ligne
  
-====== Normes et standards ======+===== Lignes horizontales ===== 
 +On peut insérer des lignes qui délimites des sections à l'aide d'une ligne horizontale. 
 +<code html><HR></code>
  
-L’organisation internationale des standards (ISO – International Standard Organization) élabore des normes et standards dans différents domaines.  L’élaboration de standards a comme objectifs :  +===== Alignement de plusieurs éléments ===== 
-  - De faire profiter de l’expertise existante;  +  * La balise <DIV> permet de définir l'alignement de plusieurs éléments (titres, textes, images, etc). 
-  - D’éviter de réinventer la roue;   +  * L'alignement s'appplique pour tout ce qui se trouve entre ''<DIV>'' et ''</DIV>''. 
-  - D’offrir les meilleures pratiques (ou façons de faire) +  * Elle possède l'attribut ''ALIGN'' qui peut prendre les valeurs suivantes : 
-  - D’améliorer la visibilité des produits et services;  +    * ''LEFT'', ''RIGHT'', ''CENTER'', ''JUSTIFY'' 
-  - De faciliter la communication du savoir et du savoir-faire;  +    * Exemple : ''<DIV ALIGN="CENTER"></DIV>''
-  - D’économiser temps et argent. +
  
-Les standards internationaux sont élaborés par des experts du domaine reconnus et désignés, organisés en groupes de travail, puis approuvés par des organismes internationaux tels que ISO, IEEE (Institute of Electrical and Electronics Engineers), AFNOR (Agence Française de NORmalisation), etc.  Ils sont revus et améliorés périodiquement. +===== Mise en forme ===== 
 +  * ''<B>'' 
 +  * ''<I>'' 
 +  * ''<TT>'' 
 +  * ''<U>'' 
 +  * ''<STRIKE>'' 
 +  * ''<BIG>'' 
 +  * ''<SMALL>'' 
 +  * ''<SUB>'' 
 +  * ''<SUP>''
  
-Les guides standards IEEE sont numérotés selon une nomenclature spécifique :  +===== Les polices de caractères ===== 
-  IEEE std numéro. année  +Il faut utiliser la balise ''<FONT>''.
-En adhérant à des standards et en suivant des normes, les entreprises acquièrent  +
-des gages en ce qui a trait :  +
-  - au respect des délais de réalisation et des coûts,  +
-  - à la pertinence des développements effectués par rapport aux objectifs fixés.  +
-  - à l’intégration de la qualité dans leur fonctionnement.  +
-  - à la mise en oeuvre de méthodes de travail adaptées+
  
-Pour obtenir la certification, l’entreprise est obligée de définir précisément les méthodes de travail et les procédures de validation.  +===== Les liens =====
-  +
-L’ISO a désigné l’IEEE pour élaborer des normes et standards relatifs aux technologies de l’information. Dans ce domaine, trois normes sont particulièrement intéressantes :  +
  
-  - ISO 9000 qui est une norme qualité relative à l'organisation du travail ;   +On utilise la balise ''<a>'' Il existe plusieurs types de liens : 
-  - ISO 9126 et ISO 12207 qui sont des normes qualités spécifiques au logiciel.  +  * liens internes à une page 
 +  * liens internes à un site 
 +  * liens externes
  
-Le but est de déterminer une façon de faire et un langage uniformes dans le développement des logiciels, et de proposer des guides pour effectuer et documenter de manière quasi-complète les tâches inhérentes+==== Lien externe ==== 
 +Fait référence à un site se trouvant sur un autre site.  Exemple : 
 +  <a href="http://www.google.com/" >Lien du site externe</a>
  
-La qualité concerne trois aspects de l'entreprise :   +==== Lien interne au site ==== 
-  **Le système qualité** qui traite de l'ensemble de l'organisation, des responsabilités, des procédures, des processus et des moyens nécessaires pour mettre en oeuvre le management qualité (norme 9000 );   +Fait référence à un document se trouvant sur le site dans lequel on se trouve.  Exemple : 
-  **Les processus** de réalisation qui spécifient les moyens de réalisation du produit (norme 12207) ;   +  <a href="../autrerep/document.html">Autre document du site</a> 
-  **Le produit** qui doit répondre aux besoins des utilisateurs (norme 9126).+ 
 +Il faut utiliser des URL relatifs : 
 +  * ''./'' -> Pour accéder au répertoire courant 
 +  * ''../'' -> Pour accéder au répertoire parent
      
-Liste de standards utiles  +Il faut __absolument__ éviter les URL absolus comme dans l'exemple suivant 
-  * ISO 9000 organisation du travail.  +  <a href="C:\site\autrerep\document.html">Autre document du site</a> 
-  * ISO 9126 satisfaction des besoins des utilisateurs +==== Lien interne à une page ==== 
-  * ISO 12207 : moyens de réalisation du produit.  +Fait référence à un emplacement se trouvant dans la page courante On utilise les ancres (ou signets).
-  * IEEE std 829 : documentation des tests.  +
-  +
-Conduire des tests pour évaluer la qualité d’une application doit suivre des règles et méthodes standardsLes sections suivantes décrivent brièvement les différents tests qui existent et étudient en détails les tests que doit mettre en oeuvre le programmeur+
  
-====== Déroulement des tests ====== +Définition de 'ancre 
-  +  <a name="hautdepage"></a>
-===== Phases de test ===== +
-  +
-Les tests que subit une application pendant son cycle de développement se réalisent en plusieurs phases :  +
-  - **Test unitaire** : vise à vérifier la conformité des unités (composants) aux exigences.  +
-  - **Test d’intégration** : vise à s’assurer que les modules de l’application communiquent et interagissent de manière correcte, stable et cohérente.  +
-  - **Test système** : vise à s’assurer que l’application sera acceptée par ses futurs utilisateurs.  +
-  - **Test d’intégration système** : vise à s’assurer que l’application va inter-opérer avec les autres systèmes et que son fonctionnement ne nuira pas aux autres systèmes en place dans l’environnement d’exploitation, et vice versa.  Ce test n’est nécessaire que si l’application est appelée à fonctionner avec d’autres systèmes logiciels.  +
-  - **Test de recette** (ou de réception) : vise à s’assurer de la conformité de l’application avec ses spécifications et donner confiance en son fonctionnement correct avant sa livraison officielle aux utilisateurs. Il se divise en test de recette utilisateur, qui concerne les utilisateurs finaux, et en test d’exploitation, qui concerne l’application. +
  
-Lorsque l’application subit des modifications (extensions, améliorations, mises à jour, etc), il convient d’effectuer des tests de régression pour s’assurer que ces modifications ne nuisent pas au fonctionnement de l’application.  Le test de régression n’est pas un phase de test, mais plutôt un test qui s’applique à toutes les autres phases, en particulier, les tests système et de recette. +Lien vers l'ancre : 
 +  <a href="#hautdepage">Aller en haut de page</a>
  
-===== Arrêt de tests ===== +Lien vers l'ancre à partir d'une autre page : 
-Les coûts impliqués par les activités de test (25 à 30% du coût total du développement) et l’impossibilité de réaliser des tests exhaustifs font de la décision d’arrêter les tests une décision très important. Souvent, la décision d’arrêter est prise indépendamment de la qualité de l’application. La décision est provoquée par l’épuisement des ressources allouées au test ou l’expiration du délai fixé+  <a href="autrepage.html#hautdepage">Aller à un endroit précis</a>
  
-Avec l’expérience, le gestionnaire de test dispose de critères qui vont l’aider dans la décision d’arrêter les tests. Ces critères vont lui permettre, en particulier, d’évaluer les risques liés à l’arrêt du test. Voici des exemples de critères :  
-  - le degré de conformité aux exigences de test permet de savoir si toutes les exigences, ou au moins celles correspondant aux risques les plus élevés, ont été testées.  
-  - La couverture de test du code permet de savoir si toutes les parties du code, y compris le code de gestion d’erreurs et d’exceptions, ont subi au moins une fois le test.  
-  - Le nombre de jeux d’essais prévus, conçus, mis en oeuvre, réussis ou ratés informe sur l’état d’avancement du processus de test.  
-  - Le taux de détection d’erreurs et la stabilisation de ce critère donne une idée raisonnable sur la détection de la plupart des erreurs.  
-===== Planification des test ===== 
-  
-Dans l’approche procédurale : 
  
 +==== Lien de courriel ====
 +Permet d'envoyer du corrier électronique.
 +  <a href="mailto:personne@domaine.ca">Écrire à personne</a>
  
  
  
-===== Démarche de test ===== +===== Images =====
-Un test est toujours réalisé selon les 3 étapes :  +
-  - Élaboration des jeux d’essais.  +
-  - Réalisation du test.  +
-  - Analyse des résultats.  +
-===== Approches de test ===== +
-Il existe 3 approches pour conduire un test :  +
-  - Approche ascendante.  +
-  - Approche descendante.  +
-  - Approche incrémentale. +
  
 +On utilise la balise ''<IMG>'' La balise ''<IMG>'' a de nombreux attributs :
 +  * ''NAME'' -> Nom du composant image
 +  * ''SRC'' -> nom du fichier
 +  * ''WIDTH'' et ''HEIGHT'' -> taille de l'image
 +  * ''ALT'' -> Texte qui apparaît si l'image est désactivée
 +  * ''BORDER'' -> épaisseur en pixels de la bordure
 +  * ''VSPACE'' et HSPACE -> espaces vertical et horizontal autour de l'image
 +  * ''LOWSRC'' -> image N&B chargée avant l'image principale
  
 +Exemple :
 +<code html><img src="images/logo.gif" name="logo" width="200" height="100" border="0" alt="image du logo" /></code>
  
 +=== Images réactives ===
 +Une seule et même image peut avoir différentes zones qui mèneront alors à différentes ressources.
  
 +<code html>
 +<img border="0" width="170" height="72" src="h-menu.gif" useMap="#menumap" />
 +<map name="menumap">
 +  <area SHAPE="RECT" COORDS="20,4,84,25"  HREF="http://www.microsoft.com">
 +  <area SHAPE="RECT" COORDS="20,26,84,48" HREF="http://wwww.nestcape.com">
 +  <area SHAPE="RECT" COORDS="20,49,84,71" HREF="http://www.multimania.com">
 +</map>
 +</code>
  
-====== Techniques de tests ====== 
-Les tests effectués dans les différentes phases sont réalisés en utilisant différentes techniques. Ces techniques peuvent être réparties en 3 catégories : techniques générales, techniques fonctionnelles et techniques non fonctionnelles.  
  
 +====== Entête ======
 +L'entête du document HTML se trouve entre les balises ''<head>'' et ''</head>'', qui eux-mêmes sont avant le corps du document (''<body>'').
  
 +===== Meta tags =====
  
 +  * ''<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">''
  
 +===== Lien CSS =====
 +Pour un lien externe à un fichier CSS :
 +<code html>
 +<link rel="stylesheet" type="text/css" href="style1.css">
 +</code>
  
-===== Techniques générales ===== 
-  
-==== Test par affirmation/négation ==== 
-  
-Ce sont 2 techniques complémentaires. Le test par affirmation vise à vérifier la conformité de l’application aux exigences formulées. Les jeux de test sont habituellement conçus en analysant la spécification des exigences. C’est une des techniques utilisées pour s’assurer que l’application a atteint les objectifs fixés.  
  
-Le test par négation vise à démontrer que l’application n’agit pas comme elle n’est pas censée le faire. Pour cela, on étudie le comportement de l’application en dehors du cadre fixé par les spécifications. C’est une technique utilisée pour examiner les aspects de l’application non décrits, manquants ou mal formulés. +====== Éléments plus avancés ======
  
-==== Test de boite blanche/boite noire ==== 
-  
-Ce sont également 2 techniques complémentaires. Le choix de l’une ou l’autre des techniques dépend du niveau de connaissance de la structure interne de l’application par l’analyste de test.  
  
-Le test de boite blanche, appelé aussi test structurel, s’appuie sur des informations portant sur la structure interne de l’application ou du composant à tester.  Connaissant cette structure, l’analyste de test construira le jeu de test de manière à vérifier toute la logique interne. Par exemple, pour tester une fonction contenant une structure si … alors … sinon…, le jeu de test permettra de vérifier le fonctionnement correct de la branche du si et celle du sinon. +===== Caractères spéciaux =====
  
-Le test de boite noire, appelé aussi test comportemental, à lopposé, ne suppose aucune connaissance sur la structure interne. Ce sera le cas par exemple lorsqu’on fait le test de recette d’une application achetée, donc développée par des programmeurs tiers avec lesquels on n’a aucun contact (c’est une méthode de choix de logiciel). Ce sera le cas aussi lorsqu’on veut effectuer des tests de régression pour tester l’extension d’une application héritée, sur laquelle la documentation est manquante. +^ Punctuation ^ HTML Entity ^ ISO Latin-1 code ^ name or meaning ^ 
 +| –  | &ndash;  | &#8211;  | en dash | 
 +| —  | &mdash;  | &#8212;  | em dash | 
 +| ¡  | &iexcl;  | &#161;  | inverted exclamation | 
 +| ¿  | &iquest;  | &#191;  | inverted question mark | 
 +| '  |  | &#39;  | apostrophe 
 +| "  | &quot;  | &#34;  | quotation mark | 
 +| ‘  | &lsquo;  |   | left single quote   |  
 +’  | &rsquo;  |  | right single quote  | 
 +| “  | &ldquo;  |  | left double quote    | 
 +| ”  | &rdquo;  |  | right double quote   | 
 +| „  | &bdquo;  |  | double low-9 quote   | 
 +| « »  | &laquo; &raquo;  | &#171; &#187;  | guillemets (European-style quotation marks
 +| (espace)  | &nbsp;  | &#160;  | non-breaking space | 
 +^ Symboles ^ HTML Entity ^ ISO Latin-1 code ^ name or meaning ^ 
 +| &  | &amp;  | &#38;  | ampersand | 
 +| ¢  | &cent;  | &#162;  | cent | 
 +| ©  | &copy;  | &#169;  | copyright | 
 +| ÷  | &divide;  | &#247;  | divide | 
 +| >  | &gt;  | &#62;  | greater than | 
 +| <  | &lt;  | &#60;  | less than | 
 +| µ  | &micro;  | &#181;  | micron | 
 +| ·  | &middot;  | &#183;  | middle dot | 
 +| ¶  | &para;  | &#182;  | pilcrow (paragraph sign) | 
 +| ±  | &plusmn;  | &#177;  | plus/minus | 
 +| €  | &euro;  | &#8364;  | Euro | 
 +| £  | &pound;  | &#163;  | British Pound Sterling | 
 +| ®  | &reg;  | &#174;  | registered | 
 +| §  | &sect;  | &#167;  | section | 
 +| ¥  | &yen;  | &#165;  | Japanese Yen | 
 +^ Diacritics ^^^^ 
 +| á Á  | &aacute; &Aacute;  | &#225; &#193;  | lower-case "a" with acute accent upper-case "A" with acute accent | 
 +| à À  | &agrave; &Agrave;  | &#224; &#192;  | lower-case "a" with grave accent upper-case "A" with grave accent | 
 +| â   | &acirc; &Acirc;  | &#226; &#194;  | lower-case "a" with circumflex upper-case "A" with circumflex | 
 +| å Å  | &aring; &Aring;  | &#229; &#197;  | lower-case "a" with ring upper-case "A" with ring | 
 +| ã à | &atilde; &Atilde;  | &#227; &#195;  | lower-case "a" with tilde upper-case "A" with tilde | 
 +| ä Ä  | &auml; &Auml;  | &#228; &#196;  | lower-case "a" with diaeresis/umlaut upper-case "A" with diaeresis/umlaut | 
 +| æ Æ  | &aelig; &AElig;  | &#230; &#198;  | lower-case "ae" ligature upper-case "AE" ligature | 
 +| ç Ç  | &ccedil; &Ccedil;  | &#231; &#199;  | lower-case "c" with cedilla upper-case "C" with cedilla | 
 +| é É  | &eacute; &Eacute;  | &#233; &#201;  | lower-case "e" with acute accent upper-case "E" with acute accent | 
 +| è È  | &egrave; &Egrave;  | &#232; &#200;  | lower-case "e" with grave accent upper-case "E" with grave accent | 
 +| ê Ê  | &ecirc; &Ecirc;  | &#234; &#202;  | lower-case "e" with circumflex upper-case "E" with circumflex | 
 +| ë Ë  | &euml; &Euml;  | &#235; &#203;  | lower-case "e" with diaeresis/umlaut upper-case "E" with diaeresis/umlaut | 
 +| í Í  | &iacute; &Iacute;  | &#237; &#205;  | lower-case "i" with acute accent upper-case "I" with acute accent | 
 +| ì Ì  | &igrave; &Igrave;  | &#236; &#204;  | lower-case "i" with grave accent upper-case "I" with grave accent | 
 +| î Π | &icirc; &Icirc;  | &#238; &#206;  | lower-case "i" with circumflex upper-case "I" with circumflex | 
 +| ï Ï  | &iuml; &Iuml;  | &#239; &#207;  | lower-case "i" with diaeresis/umlaut upper-case "I" with diaeresis/umlaut | 
 +| ñ Ñ  | &ntilde; &Ntilde;  | &#241; &#209;  | lower-case "n" with tilde upper-case "N" with tilde | 
 +| ó Ó  | &oacute; &Oacute;  | &#243; &#211;  | lower-case "o" with acute accent upper-case "O" with acute accent | 
 +| ò Ò  | &ograve; &Ograve;  | &#242; &#210;  | lower-case "o" with grave accent upper-case "O" with grave accent | 
 +| ô Ô  | &ocirc; &Ocirc;  | &#244; &#212;  | lower-case "o" with circumflex upper-case "O" with circumflex | 
 +| ø Ø  | &oslash; &Oslash;  | &#248; &#216;  | lower-case "o" with slash upper-case "O" with slash | 
 +| õ Õ  | &otilde; &Otilde;  | &#245; &#213;  | lower-case "o" with tilde upper-case "O" with tilde | 
 +| ö Ö  | &ouml; &Ouml;  | &#246; &#214;  | lower-case "o" with diaeresis/umlaut upper-case "O" with diaeresis/umlaut | 
 +| ß  | &szlig;  | &#223;  | ess-tsett | 
 +| ú Ú  | &uacute; &Uacute;  | &#250; &#218;  | lower-case "u" with acute accent upper-case "U" with acute accent | 
 +| ù Ù  | &ugrave; &Ugrave;  | &#249; &#217;  | lower-case "u" with grave accent upper-case "U" with grave accent | 
 +| û Û  | &ucirc; &Ucirc;  | &#251; &#219;  | lower-case "u" with circumflex upper-case "U" with circumflex | 
 +| ü Ü  | &uuml; &Uuml;  | &#252; &#220;  | lower-case "u" with diaeresis/umlaut upper-case "U" with diaeresis/umlaut | 
 +| ÿ  | &yuml;  | &#255;  | lower-case "y" with diaeresis/umlaut |
  
-Le test de boite blanche est souvent utilisé par le programmeur lors de test unitaires des composants qu’il construit+  * [[http://barzilai.org/math_sym.htm|Symboles mathématiques en HTML]]
  
-Le test de boite noire est souvent utilisé par l’analyste de test lors de phases ultérieurescomme le test système ; l’analyste de test n’ayant pas accès aux informations structurelles car les composants sont écrit par une équipe tierce+===== Tableaux ===== 
 +Permet tout d'abord de présenter l'information en colonnes et lignesils ont beaucoup servis aussi pour subdiviser la page en plusieurs parties en utilisant ses cellules.
  
-Souventl’analyste mélange les 2 techniques en suivant une méthode qu’on peut qualifier de boite grise+On utilise les balises ''<TABLE></TABLE>'' Un tableau contient une ou plusieurs ligneschaque ligne est décrite par les balises ''<TR></TR>'' Chaque ligne est composée d'une ou ou plusieurs cellules qui sont décrites par les balises ''<TD></TD>''.
  
 +Exemple de table avec un ''colspan'' et un ''rowspan'' :
 +<code html>
 +<table width="200" border="1">
 +  <tr>
 +    <td colspan="2">&nbsp;</td>
 +    <td rowspan="5">&nbsp;</td>
 +  </tr>
 +  <tr>
 +    <td>&nbsp;</td>
 +    <td>&nbsp;</td>
 +  </tr>
 +  <tr>
 +    <td>&nbsp;</td>
 +    <td>&nbsp;</td>
 +  </tr>
 +  <tr>
 +    <td>&nbsp;</td>
 +    <td>&nbsp;</td>
 +  </tr>
 +  <tr>
 +    <td>&nbsp;</td>
 +    <td>&nbsp;</td>
 +  </tr>
 +</table>
 +</code>
  
-===== Techniques fonctionnelles ===== +<html> 
-  +<table width="200" border="1"> 
-==== Analyse partitionnelle ==== +  <tr> 
-  +    <td colspan="2">&nbsp;</td> 
-Il s’agit de répartir, lorsque c’est possible, les entrées et les sorties en catégories cohérentes constituant des classes (pas au sens de l’orienté objet). On choisit ensuite un représentant de chaque classe. On émet ainsi l’hypothèse selon  +    <td rowspan="5">&nbsp;</td> 
-laquelle la réussite du test sur un représentant équivaut à sa réussite sur tous les éléments de la classe.+  </tr> 
 +  <tr> 
 +    <td>&nbsp;</td> 
 +    <td>&nbsp;</td> 
 +  </tr> 
 +  <tr> 
 +    <td>&nbsp;</td> 
 +    <td>&nbsp;</td> 
 +  </tr> 
 +  <tr> 
 +    <td>&nbsp;</td> 
 +    <td>&nbsp;</td> 
 +  </tr> 
 +  <tr> 
 +    <td>&nbsp;</td> 
 +    <td>&nbsp;</td> 
 +  </tr> 
 +</table> 
 +</html>
  
-Le secret de la réussite de cette technique réside dans l’identification des classes, du choix des représentants et dans le choix du nombre d’éléments à examiner.  +==== Attributs ==== 
 +  * BORDER 
 +  * BGCOLOR 
 +  * BACKGROUND
  
-==== Test aux limites ==== +===== Cadres ===== 
-  +Les cadres sont utilisés pour séparer une page en différentes sections.  Cette méthode de structuration d'un site n'est plus utilisée aujourd'hui car elle pose des problèmes d'affichage et de référencement.
-Cette technique est complémentaire à la précédente et se fonde sur le même principe de répartition des entrées et sorties en classes. Cependant, le test est axé sur les extrêmes des classes+
  
-L’analyse partitionnelle et le test aux limites sont souvent utilisés conjointement pour créer des jeux de test complets+===== Formulaires ===== 
 +  * Permet aux visiteur d'envoyer des données au serveur. 
 +  * La balise ''<FORM>'' insère un formulaire dans la page web. 
 +  * Les attributs sont 
 +    * ''METHOD'' -> Méthode utilisée pour envoyer les données du formulaire Valeurs possibles : GET et POST 
 +    * ''ACTION'' -> Action à entreprendre lorsque l'utilisateur soumet le formulaire 
 +    * ''ENCTYPE'' -> spécifie le format de données, dans le cas où le protocole n'impose pas de format précis
  
-==== Test intrusif ==== +Exemple :  
-  +<code html><FORM METHOD="POST" ACTION="script.php"></FORM></code>
-Il s’agit de modifier délibérément l’application pour les besoins du test. C’est ce qu’on fait en introduisant le fameux System.out.println (ou équivalent) afin de visualiser les valeurs de certaines variables à l’exécution.+
  
-On peut aussi utiliser un débogueur pour modifier les valeurs de variables à l’exécution pour étudier le comportement de l’application. +==== Éléments du formulaire ====
  
-Le risque avec cette technique est d’oublier de supprimer les modifications introduites et de livrer ainsi au client un produit altéré. +La balise <INPUT> 
  
-==== Test de transition d’état ==== +Attributs 
-  +  * NAME 
-Cette technique consiste à représenter les différents états possibles de l’application (ou du composant à tester), les transitions entre ces états, les événements déclenchant les transitions et les actions résultant de ces transitions. +  * MAXLENTGTH 
-  +  * VALUE 
-Les jeux d’essais sont extraits de la spécification de l’application et des diagrammes de transition d’états (utilisés en UML). +  * TYPE 
-  +    * TEXT 
-Les jeux d’essais sont conçus pour activer les différentes transitions d’état et préciser :  +    * BUTTON 
-  l’état de départ,  +    * PASSWORD 
-  les entrées dans l’application,   +    * CHECKBOX 
-  les résultats attendus,  +    * RADIO -> Les boutons radio sont regroupés par le nom qui doit être identique.  
-  l’état final attendu.  +    HIDDEN 
-Cette technique est utilisée, en particulier, lors du test par affirmation/négation. +    FILE -> Exemple : ''Incluez votre cv : <INPUT TYPE="file" NAME="lecv">'' 
 +    SUBMIT 
 +    RESET 
 +  * CHECKED -> dans le cas que le type est CHECKBOX
  
 +Les zones de texte : <TEXTAREA></TEXTAREA>
 +  * ROWS, COLS, READONLY
  
-==== Test statique ====+Listes de choix : <SELECT>
  
-Dans ce test, l’application n’est pas exécutée. Il s’agit de vérifier l’application en situation isolée. Plusieurs méthodes et outils sont utilisés :  +  * NAME 
-  * revue et vérification du code  +  * SIZE 
-  * exécution manuelle (avec un papier et un crayon)  +  * MULTIPLE 
-  * outils d’analyse syntaxiques  +  * Les choix sont décrits par la balise <OPTION> 
-  outils d’estimation de complexité.  +    VALUE 
-Cette technique est souvent utilisée lors du test unitaire. +    * SELECTED
  
-==== Test de navigation ==== 
-  
  
-Cette technique, appelée aussi test d’exécution, permet d’évaluer la fonctionnalité ou la logique métier de l’application de bout en bout. L’application, ou le composant, est mise en oeuvre pour réaliser une fonctionnalité étape par étape, de bout en bout. Au lieu de s’intéresser au fonctionnement correct de l’application, on s’intéresse à la logique mise en oeuvre.  
-   
  
  
  
 +====== Inclure des styles CSS dans le code HTML ======
 +<code html>
 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 +<html>
 +<head>
 +  <title>Html avec style</title>
 +  <style type="text/css">
 +  body {
 +    color: purple;
 +    background-color: #d8da3d }
 +  </style>
 +</head>
  
 +<body>
 +</code>
  
-====== Tests unitaires ====== +===== Inline styles ===== 
- +<code html> 
-===== Exemple de jeu de tests ===== +<font style="font-family: Arial,Helvetica,sans-serif; font-size:22px; color:red; text-decoration:underline; "
- +</code>
- +
-^ # ^ a ^ b  ^ c  ^ Description  ^ Résultat attendu  ^ Résutat obtenu  ^ Analyse et commentaires +
-| 1 | 0 | 0  | 0  | a,b,c = 0    | Infinité  | | | +
-| 2 | 0 | 0  | -3 | a,b=0c!=0  | Pas de solution  | | | +
-| 3 | 0 | 0  | 5  | a,b=0, c!=0  | Pas de solution  | | | +
-| 4 | 0 | 2  | 0  | 1<sup>er</sup> degré  | Une solution | | | +
-| 5 | 0 | -4 | 0  | 1<sup>er</sup> degré  |Une solution | | | +
-| 6 | 0 | 3  | 3  | 1<sup>er</sup> degré  |Une solution | | | +
-| 7 | 0 | -7 | 5  | 1<sup>er</sup> degré  |Une solution | | | +
-| 8 | 0 | 5  | -1 | 1<sup>er</sup> degré  |Une solution | | | +
-| 9 | 0 | -1 | -2 | 1<sup>er</supdegré  |Une solution | | | +
-| 0 | 0 | 1  | 4  | D < 0 | Pas de solution  | | | +
-| 1 | 5 | 0  | 1  | D < 0 | Pas de solution  | | | +
-| 2 | 1 | 1  | 0  | D > 0 | Deux solutions x=0, x=1  | | | +
-| 3 | 1 | 2  | 1  | D = 0 |Une solution | | | +
-| 4 | 4 | 12 | 9  | D = 0 |Une solution | | | +
- +
- +
-[[http://www.junit.org/]] +
- +
  
 +====== Exemples de codes ======
 +===== nofollow =====
  
 +<code html>
 +<a href="http://www.siteinternet.com/" rel="nofollow">nom du lien</a>
 +</code>
  
-Source : A. Toudeft. 
web/html3.1400028513.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)