OUTILS DE DÉVELOPPEMENT DE DIFFÉRENTS BROWSERS
Transcription
OUTILS DE DÉVELOPPEMENT DE DIFFÉRENTS BROWSERS
Petite Introduction aux Langages HTML/XHTML L’Internet a été inventé par Tim Berners-Lee, celui-là même qui a, par après fondé le World Wide Web Consortium (W3C) qui tente d’élaborer un standard commun du HTML. La structure des pages Internet (ou pages web) est souvent décrite avec le lange HTML (HyperText Markup Language). Les pages HTML sont sauvegardées avec l’extension « htm » pour les versions antérieures du MS-DOS, et avec l’extension « html » pour les systèmes récents. Bien entendu, il n’est pas nécessaire d’être connecté à l’Internet pour pouvoir consulter / viosionner une page Web, il suffit d’utiliser un navigateur (fureteur, browser). Hyper-Texte (=hyperlien) signifie un texte qui activé, déclenche une action et dans le cas de l’Internet cette action peut être l’accès ou le renvoi à un autre endroit de la page en cours ou à une autre page Web, ou le déclenchement d’une autre action (lancement d’une vidéo, d’une musique…). Mark-up signifie que le langage est descriptif, qu’il sert juste à marquer (baliser) le texte du code source (format texte normal : pur/brut) pour indiquer à l’ordinateur comment rendre un élément texte à la position où se trouve l’unité de sortie (écran [curseur de l’écran, pas celui de la souris], projecteur, imprimante, circuit vidéo, son…). Actuellement le HTML peut r intégrer des fichiers multimédias (texte et audiovisuel : image fixe, vidéo, audio…) dans une page web, bref il décrit (ou structure) la page Web. Les pages Web sont rendues (affichées) par un navigateur Web (Web Browser). L’élément de base dans le langage HTML est la BALISE ou TAG, par exemple l’élément dans la paire de balises <s></s> qui indique que le texte entre les deux doit être affiché comme strikethru (rayé = barré). Chaque balise est enfermée dans une paire <>. Deux sortes de balises : 1. Les balises inaugurales (initiant la définition d’un l’élément, donc indique le début d’un élément HTML) sont dites « ouvrantes » (parfois aussi « d’ouverture ») et sont délimitées seulement par la paire <>. 2. Les balises de clôture (terminant la définition de l’élément, donc indique la fin d’un élément HTML) sont dites « fermantes » (parfois aussi « de fermeture ») et sont délimitées par </ et >. Les balises sans le slash-bar barre oblique ( / ) sont donc dites ouvrantes pour initier une action structurale, celles comportant le / sont dites fermantes ou de fermeture, elles indiquent la fin de l’action. Par exemple le mark-up <s>Ce texte est rayé, barré</s> ou <strike>Ce texte est rayé, barré</strike> ou <del>Ce texte est rayé, barré</del> Produiront tous trois l’affichage suivant : Ce texte est rayé, barré <s></s> et <strike></strike> et <del></del> ne sont que trois éléments parmi tant d’autres. <s> est une balise et </s> une autre balise. Les balises définissent (délimitent) des éléments de la page Web. Balises, structure et contenu sémantique du document web qu’elles définissent constituent un « élément de la page ». Par exemple la description suivante indique un paragraphe : <p>Un paragraphe</p> Types de balises : 1. Certaines balises DOIVENT avoir leur paire fermante, pour délimiter l’étendue de leur action. Par exemple <a>, <b>, <div>, <span>, <s>, <ol>, <ul>, <dl>… 2. D’autres n’ont pas besoin de la paire fermante, par exemple <img>, <p>, <li>, <br>. a. La nouvelle convention notationnelle (XHTML) veut qu’on termine (ferme) les balises ouvrantes des balises vides par un « espace slash » juste devant le > de fermeture, comme ceci : <balise_ouvrante />, sans la balise fermante (mais en fait c’est une contraction d'une balise ouvrante et d'une balise fermante, avec un espace et une barre oblique à la fin : <tag></tag> donne <tag />). b. On peut tout aussi bien sans problèmes dans le HTML définir ces éléments avec la paire conventionnelle de balises, comme ceci : <li></li>. Types d’éléments HTML : Les éléments HTML peuvent intrinsèquement être de deux types « bloc » et « inline », mais on peut aussi leur affecter d’autres types « inlineblock », « inline-table », « inline-flex », « inlinegrid », « marker box », « run-in », « atomic inline », « compact »… 1. Les éléments block (block-level boxes = Éléments de bloc, par exemple : <div></div>, <p></p>, <blockquote></blockquote>…) sont automatiquement précédés d’un retour à la ligne et occupent en principe toute la largeur du contenant. Par exemple <div>contenu de div</div> s’affichera comme ceci : Éléments HTML bloc : <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>. 2. Les éléments inline (inline-level box = Éléments en ligne, par exemple : <a></a>, <span></span>, <b></b>, <em></em>…) ne sont pas repositionnés et n’occupent que l’espace nécessaire à leur affichage, l'espace associé aux balises. Par exemple <b>Texte Gras</b> affiche en gras dans sa position exacte dans la source. 3. Un élément inline-blockest un bloc qui s’affiche dans son entièreté comme un élément inline unique, c’est-à-dire qu’il se fait précéder et se fait suivre par un trait de ligne unique. 4. Un élément inline-table est une table (bloc) qui s’affiche dans son entièreté comme un élément inline unique. 5. Un élément inline-flex est un flex (bloc) qui est lui aussi inline dans son affichage. 6. Un élément inline-grid est un grid inline dans son entièreté, c’est-à-dire qu’il a le display:inline. 7. Un marker box sert de décoration : bullet, image, number. Il peut se positionner à l’intérieur ou à l’extérieur du box principal et n’affecte pas, contrairement au contenu de ::before et ::after, ne modifie pas la position du box principal quelle que soit sa propre position. 8. Un run-in box est un inline-block qui se fusionne avec (merges into) le bloc subséquent, celui qui vient après lui (RunIn Layout), tout en conservant les styles indivieuels de chacun des blocs. Ex. : les termes et leurs définitions dans un dictionnaire. 9. Un atomic inline box a un contenu remplacé pendant le chargement de la page (cfr image), ou établit un nouveau contexte de formatage (cfr inline block, inline-table) et ne peut pas s’étaler sur plusieurs lignes contrairement aux inlineboxes et conteneurs ruby qui parviennent à le faire. 10.Un anonymous box (boîte anonyme) est une boîte qui n’est associe à aucun élément. Elles sont générées dans certaines circonstances pour "colmater" l’arborescence de la « box tree » dont la structure dans le fichier HTML (présentation) n’a pas respeté l’arborescence de l’élément ("element tree"), par exemple des <td> non contenues dans <tr>, dans une <table>. Quelques Éléments HTML inline : <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> Contenu des « éléments : 1. La plupart des balises (<li />, <a></a>, <q></q>…) traitent la donnée présentée, souvent du texte brut, mais ça peut bien aussi être un autre élément (éléments imbriqués) contenant au final un texte. Par exemple <li>Entrée de liste</li><li></li> suite d'après Par exemple <li>Entrée de liste</li><li></ol> suite d'après 2. D’autres balises (<img />, <br />, <area /> …) dites balises vides ne traitent pas les données présentées dans le texte du code source. Par exemple <img border="1" title="dummy img1">Suite de la page Web</img><img border=1 alt=dummy img2>2è Suite de la page Web Dans cet exemple, la chaîne « border=1 » est dite « attribut de balise » (ici la balise <img>). L’attribut, défini seulement dans la balise ouvrante, donne des détails supplémentaires sur la façon de traiter l’élément, ici « ajouter un cadre à l’espace réservé à cette image ». En définitif, la syntaxe d’un élément HTML est la suivante : <bo a1="v1" a2="v2" … an="vn"> Texte </bf> <bo…> = Balise Ouvrante. a1 … an = Attributs. v1 … vn = Valeurs des Attributs. </bf> = Balise Fermante. Texte = Texte à afficher. La valeur finale (d’un attribut HTML ou d’une propriété CSS) se calcule en plusieurs étapes : 1. TOUTES les (0 ou plusieures) valeurs déclarées (« declared values ») sont collectées pour chaque propriété, pour chaque élément 2. Elles sont filtrées par le mécanisme de cascade qui retient aucune ou une seule gagnante « winning value » (le mécanisme de Cascade retient au plus une seule « cascaded value » par propriété et par élément). 3. la valeur spécifiée (« specified value ») = la valeur d’une propriété donnée que l’auteur de la feuille de style envisageait pour cet élément ; souvent la « cascaded value ». C’est la valeur par défaut, unique par propriété. Elle peut être celle affectée ou celle héritée du parent, ou la valeur initiale [par défaut] spécifiée dans le User Agent. 4. La résolution des valeurs spécifiées (dépendance des valeurs) produit la valeur calculée (« computed value »), unique pour chaque propriété. 5. Le formatage du document génère la valeur à utiliser (« used value »), au plus une par propriété et par élément. 6. La « used value » doit finalement être adaptée aux contraintes / restrictions / limitations de la ressource locale (canvas : dimensions, rapports H/L, résolution, réalité [0.75px n’est pas possible]…) pour donner la valeur effective (« actual value »). Quelques canvas ou média de sortie : screen (écran), print (papier – imprimante), aural (vocal stream audio). Les valeurs spécifiées relatives (à une autre valeur, et certains mots-clés (smaller, bolder, thicker…) doivent être converties en « computed values ». Les valeurs en unités relatives doivent être converties en valeurs absolues en les multiplicant par le facteur approprié de référence. Les valeurs relatives sont souvent exprimées en unités relatives : 1. auto, 2. 1em =current font-size, taille de la lettre M majuscule =16px mais dépend de la taille héritée de l’élément parent, 3. 1ex hauteur de ‘x’ minuscule, 4. 1ch largeur du nombre 0, 5. 1rem (root em) : se réfère toujours à la font-size de base par défaut, 6. 1vh =1/100 de la largeur du viewport, 7. 1vw =1/100 de la hauteur du viewport, 8. 1% [de la taille du box du contenu] Une valeur spécifiée absolue ('green', '1mm', '1cm', '1in', '1pt' = 1/72 in, '1pc' = 12pt,…) n’a pas besoin de traitement (résolution) N.B. : pas d’espace entre le nombre et l’unité. La version actuelle au mardi 7 novembre 2017 du HTML est le HTML 5. Pour ne pas faire trop court, voici une petite application pour illustrer comment utiliser le HTML, pour faire quelque chose d’utile : la création d’un tableau (données tabulaires = données en rangées et en colonnes). Rôle de différents éléments de tableau : <table></table> : Délimite un bloc rectanguilaire pour les éléments du tableau. <legend></legend> : Légende du Tableu. <summary></summary> : Résumé du Tableu. <tr></tr> : Délimite un rang du tableau (table row = rangée [horizontale] de table). table-cell (<td> et <th>) : * <td></td> : Délimite une cellule de donnés du tableau (table data = données de table). * <th></th> : Délimite une entrée (contenu) cellule d’entête (intitulé de colonne) du tableau = Table Heading. <caption></caption> (table-caption) : Délimite la description du tableau. <tbody></tbody> ou table-row-group : element groupant une ou plusieurs lignes/rangs (rows) du tableau. <thead></thead> (table-header-group) : Délimite les cellules d’entête du tableau. <tfoot></tfoot> (table-footer-group) Délimite les cellules du pied du tableau. <colgroup></colgroup > (table-column-group) : Re-Groupe des colonnes consécutives de cellules du tableau <col></col > (table-column) : Re-Groupe une pile de cellules rangées verticalement (colonne de cellules). Par exemple le code ci-dessous : <table> <tfoot> <tr> <th colspan=3> Pied du tableau </th> </tr> </tfoot> <tbody> <colgr<tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH3L1 </th> </tr> <tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C3 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C3 </td> </tr> <tr> <td> L3C1 </td> <td> L3C2 </td> <td> L3C3 </td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=3> Entête du tableau </th> </thead> </tbody> </table> Produit l’affichage suivant : Très moche. On peut l’améliorer en ajoutant des attributs à la définition de notre tableau. On ajoute donc l’attribut border à la balise ouvrante <table> pour afficher les bords de chaque élément du tableau : le tableau luimême et ses cellules. On affecte la valeur= ‘1’ à cet attribut. <table border='1'> Chaque cellule est délimitée mais le double contour entre elles et avec le tableau est un peu dégueulasse. Nous devons donc supprimer l’espacement entre les cellules pour simuler une ligne simple, en ajoutant à la balise ouvrante <table> l’attribut cellspacing auquel on attribue la valeur zéro. <table border='1' cellspacing='0'> Ceci nous donne un plus beau : Mais l’affichage « Caption: Démo Tableau » est sur deux lignes. Nous pouvons par exemple élargir le tableau pour que tout le texte se contienne dans une seule ligne. On ajoute donc l’attribut width=300em à la balise ouvrante <table>, comme ceci : <table border='1' cellspacing='0' width="300em"> L’affichage devient : Notez ceci jusqu’ici : 1. L’ordre d’affichage des « fils » de <table></table> dans le code source est : caption, colgroup, thead, tbody, tr (td & th), tfoot, quel que soit l’ordre dans lequel ils figurent dans le code source lors de la définition de <table>. 2. Ne confondez pas <th></th> et <thead></thead> 3. Le contenu d’une balise <th></th> est automatiquement mis en gras et centré dans la cellule. 4. <caption></caption> et <thead></thead> occupent automatiquement leurs places dans l’affichage, quel que soit l’endroit où elles sont définies dans le code source. a. Elles sont affichées dans l’ordre : Caption puis Entête. b. Caption, Entête, TH, Pied sont centrés c. Caption n’est pas grasse, Entête, TH, et Pied sont gras. d. Elles peuvent prendre toute la largeur du tableau. e. Elles n’ont pas d’autres formatages spéciaux. 5. Le contenu de <td></td> n’est pas automatiquement [particulièrement] formaté. Continuons : Nous pouvons vouloir que les cellules soient plus spacieuses, en ajoutant l’attribut cellpading à la balise ouvrante <table> : <table border='1' cellspacing='0' width="300em" cellpadding="10ex"> Et nous aurons : On peut vouloir une couleur d’arrière-plan pour le tableau (attribut bgcolor= ) : <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> Et finalement, ajoutons cette ligne : <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> Pour faire au final : <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> <tfoot> <tr> <th colspan=3> Pied du tableau </th> </tr> </tfoot> <tbody> <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> <tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH3L1 </th> </tr> <tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C3 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C3 </td> </tr> <tr> <td> L3C1 </td> <td> L3C2 </td> <td> L3C3 </td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=3> Entête du tableau </th> </thead> </tbody> </table> Nous aurons l’affichage suivant : On peut vouloir gérer la colonne de droite, en bloc : on ajoute la ligne suivante : <col bgcolor=#E296C6)></col> Pour faire au total : <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> <tfoot> <tr> <th colspan=3> Pied du tableau </th> </tr> </tfoot> <tbody> <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> <col bgcolor=#E296C6)></col> <tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH3L1 </th> </tr> <tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C3 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C3 </td> </tr> <tr> <td> L3C1 </td> <td> L3C2 </td> <td> L3C3 </td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=3> Entête du tableau </th> </thead> </tbody> </table> Et ça nous donne : Si nous intercalons une colonne comportant « TH2L1’ » entre celles de « TH2L1 » et « TH3L1 » nous voyons clairement l’effet (la portée) des attributs « span= » (étalement) et « colspan= » (column span = recouvrement de colonne = combien de colonnes la cellule recouvre = nombre de cellules à fusionner verticalement) ; pour ce cas-ci, il faut augmenter leurs valeurs de 1 pour prendre en compte le surplus d’une colonne : <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> <tfoot> <tr> <th colspan=3> Pied du tableau </th> </tr> </tfoot> <tbody> <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> <col></col><col bgcolor=#E296C6)></col> <tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH2L1’ </th> <th> TH3L1 </th> </tr> <tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C2’ </td> <td> L1C3 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C2’ </td> <td> L2C3 </td> </tr> <tr> <td> L3C1 </td> <td> L3C2 </td> <td> L3C2’ </td> <td> L3C3 </td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=3> Entête du tableau </th> </thead> </tbody> </table> Et ça nous affiche : Voici les correctifs : <tr> <th colspan=4> Pied du tableau </th> </tr> <thead> <th colspan=4> Entête du tableau </th> </thead> Nous avons conservé la portée de colgroup aux 2 premières colonnes : <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> Nous n’avons pas spécifié d’attribut particulier pour la nouvelle colonne (surajoutée), notamment la couleur de fond ; elle héritera les attributs de son parent <table> <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> <tfoot> <tr> <th colspan=4> Pied du tableau </th> </tr> </tfoot> <tbody> <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> <col></col><col bgcolor=#E296C6)></col> <tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH2L1’ </th> <th> TH3L1 </th> </tr> <tr> <td> L1C1 </td> <td> L1C2 </td> <td> L1C2’ </td> <td> L1C3 </td> </tr> <tr> <td> L2C1 </td> <td> L2C2 </td> <td> L2C2’ </td> <td> L2C3 </td> </tr> <tr> <td> L3C1 </td> <td> L3C2 </td> <td> L3C2’ </td> <td> L3C3 </td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=4> Entête du tableau </th> </thead> </tbody> </table> Ci-dessous, le nouvel affichage. Le rendu réel dépend en fait du browser et peut-être du système d’exploitation : Figure 1: Internet explorer 11, Edge de Windows 10, EditPlus 4.3 et codeLobster 5.12 Figure 2: Opera 12.11, Firefox 10, Xin Browser 1.1.3, Komodo 9.3.2 et SeaMonkey 2.26 Figure 3: Editplus 3.50 et Sleipnir 2.9.15 Figure 4: Baidu 43, Yandex, Opera 48, Google-Chrome 61, Maxthon 5, Sleipnir 6, Maelstrom 37, Avira Scout 2016.02.15, Epic Privacy browser 60, Comodo Dragon 55.0.2883.59, Torch 55.0.0.12137 et Vivaldi 1.3.551.38 Figure 5: Acoo Browser 1.98, Web Navigateur 2014, AceHTML 11, HotHTML 3, PSPad 4.5.4, WeBuilder 12.3, LockHTML 1.0, navigateur interne de PSPad 4.5.4 (2356), visionneur interne de HTMLEdit 1.74, visionneur d’EditPlus 3.50 (164) et Crazy Browser 3.1.0 Nous avons vu comment fusionner les cellules d’une ligne/rang, avec l’attribut colspan (nombre de colonnes traversées). Nous pouvons aussi fusionner des cellules d’une colonne avec l’attribut rowspan (combien de rangées la cellule doit recouvrir = nombre de cellules à fusionner horizontalement), par exemple les L1C2’, L2C2’, L3C2’ dans la colonne que nous venons d’ajouter. <tr><td>L1C1</td><td>L1C2</td> <td rowspan=3>L13C2’</td> <td> L1C3 </td> </tr> <tr><td>L2C1</td><td>L2C2</td> <td> L2C3 </td> </tr> <tr><td>L3C1</td><td>L3C2</td> <td> L3C3 </td> </tr> Le code complet : <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> <tfoot> <tr> <th colspan=4> Pied du tableau </th> </tr> </tfoot> <tbody> <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> <col><col bgcolor=#E296C6)> <tr> <th> TH1L1 </th> <th> TH2L1 </th> <th> TH2L1’ </th> <th> TH3L1 </th> </tr> <tr><td>L1C1</td> <td>L1C2</td> <td rowspan=3> L13C2’ </td> <td> L1C3 </td> </tr> <tr><td>L2C1</td> <td>L2C2</td> <td> L2C3 </td> </tr> <tr><td>L3C1</td> <td>L3C2</td> <td> L3C3 </td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=4> Entête du tableau </th> </thead> </tbody> </table> Dans un fichier HTML plusieurs espaces, retourchariot et tabulations entre les balises ou à l’intérieur d’une balise sont traités comme un seul espace, mais peuvent faciliter la lecture du programmeur. Nous pouvons vouloir cacher la ligne des TH, et profiter pour ajouter les éléments LEGEND et SUMMARY : <table border='1' cellspacing='0' width="300em" cellpadding="10ex" bgcolor="hsl(161 , 74% , 88%)"> <tfoot> <tr> <th colspan=4> Pied du tableau </th> </tr> </tfoot> <tbody> <colgroup span=2 bgcolor=rgb(255,106,199)></colgroup> <col><col bgcolor=#E296C6)> <tr HIDDEN><th>TH1L1</th> <th>TH2L1</th> <th>TH2L1’</th> <th>TH3L1</th> </tr> <tr><td>L1C1</td><td>L1C2</td><td rowspan=3> L13C2’ </td> <td>L1C3</td> </tr> <tr><td>L2C1</td><td>L2C2</td> <td>L2C3</td> </tr> <tr><td>L3C1</td><td>L3C2</td> <td>L3C3</td> </tr> <caption> Caption : Démonstration de Tableau </caption> <thead> <th colspan=4> Entête du tableau </th> </thead> </tbody> <legend>Légende du tableau</legend> <summary>Summary du tableau</summary> </table> Notez que l’attribut HIDDEN est en majuscules. Le HTML est casse insensible, mais dans le XHTML tags et attributs doivent obligatoirement être en minuscules, les tags doivent être fermées, et les valeurs d’attributs doivent se trouver dans des guillemets. Et voici ce que ça donne avec la dernière, très vieille version, abandonnée, de Netscape 2008 (version 9.0.0.6). OK, mais problème des couleurs car les fonctions des couleurs utilisées ici n’existaient pas en ce moment-là. Dommage qu’on l’ait fait RIP. Et avec cette version où on déplace <legend>Légende du tableau</legend> Devant </table> comme dans le code cidessous : Figure 6: Avec visionneur d'EditPlus 4.3 (b2478) Figure 7: Avec la vieille NetScape. Structure de base ou fondamentale d’une page HTML : <html> <head> <title></title> </head> <body> </body> </html> L’élément <html></html> indique au navigateur qu’il s’agit d’un document de langage HTML. L’élément <head></head> permet de décrire la page HTML (informations à propos du document). L’élément <body></body> reçoit le contenu affichable (à volonté et par défaut) de la page HTML ou page Web. L’élément <title></title> indique le titre du document à afficher dans la barre de titres du navigateur ou dans l’onglet de la page (à ne pas confondre avec l’attribut « title="" » qui affiche une info-bulle). Illustration : Affichage dans un Browser : Quelques autres attributs pour la balise <table> (s’appliquent en général à tous les contenus de la table) : Align= alignement horizontal du tableau : "left" (gauche), "center" (centré), "right" (droite). Bgcolor= Couleur du tableau Border= largeur de la bordure en pixels Cellpadding= marge interne des cellules du tableau Cellspacing= espacement entres les cellules de la table Frame= Côtés du cadre du tableau pouvant être visible : "void" (par défaut : aucun côté), "above" (top), "below" (bottom), "hsides" (top et bottom), "vsides" (right et left), "lhs" (left- hand side), "rhs" (right-hand side), "box" (tous les 4), "border" (tous les 4) Rules= lignes séparatrices pouvant être affichées : "none" (aucun), "groups" (entre groupes de colonnes ou de rangs), "rows" (entre les rangs), "cols" ‘entre les colonnes), "all" (entre tous les rangs et toutes les colonnes) Style= Propriétés de la table Summary= "texte" Title= "Texte de l'infobulle" Valign= alignement vertical : "top" (haut), "middle" (milieu), "bottom" (bas). Width= largeur du tableau Quelques autres attributs pour la balise <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> (s’appliquent au contenu de la cellule) : Align= justification du texte dans la cellule : "left" (gauche), "center" (centré), "right" (droite), "justify" (justifié [gauche et droite]), "char" (caractère d’alignement). Valign= alignement vertical du texte dans la cellule : "top" (haut de la cellule), "middle" (centré verticalement), "bottom" (bas de la cellule), "baseline" (les cellules à droite de celle dans laquelle « valign=baseline » a été défini s’aligneront verticalement selon cette dernière). Exemple : Figure 8: « valign=baseline » dans <TR> du 2è rang et C4R3. Ici, dans le visionneur d’EditPlus 4.3 (build 2478) 32 bit. Figure 9: Avec Firefox Quantum 57.0 (32 bits) et SeaMonkey 2.49.1. Figure 10: Avec Safari 5.1.7 (7354.57.2) 2012. Vous pouvez en attendant la suite, avoir la liste exhaustive des balises (éléments) HTML sur Internet dans la page Web : https://developer.mozilla.org/fr/docs/Web/HT ML/Element =========== OUTILS DE DÉVELOPPEMENT DE DIFFÉRENTS BROWSERS Partons de ce petit script qui illustre comment faire un menu vertical : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Menu Vertic - Horiz</title> <style> body { // padding: 3em 11em; font-family: Georgia, "Times New Roman", Times, serif; color: hsl(345 , 68% , 12%); padding-left: 11em; background-color: comsilk } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 1.2em; left: 1em; width: 9em; // width: 29em; } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-style: dotted solid dashed; border-width: 2px 1ex 0.1em; border-color: #E2192A } ul.navbar li:hover { background:rgb(250,244,117); } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } // li { // display: inline } </style> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="pgarde.html">Page de Garde</a> <li><a href="anthropobio.html">Anthropo Bio-Métrie</a> <li><a href="imp.html">Impédancemétrie</a> <li><a href="ta.html">Tension Artérielle</a> <li><a href="labo.html">Laboratoire</a> <li><a href="status.html">Situation Globale</a> </ul> <!-- Main content --> <h1>Global Health Assessment</h1> <p>C'est un Logiciel de gestion automatique de la Santé, asssistée par l'ordinateur. <p>Fait l'anthropologie, Évalue l'anthropométrie et l'Impédancemétrie, Analyse les résultats de Labo, Aide au suivi de la TA et à l'obstétrique... <p>Ce logiciel est entièrement gratuit sur simple demande. <address>Dévellopé au CERINFOMYO/CESTYREMYOCO.</address> </body> </html> Microsoft EDGE de Windows 10 et Internet Explorer : F12 La barre de dessus donne le menu des outils (Explorateur DOM, Console [des erreurs], Débogueur, Réseau, Performances, Mémoire, émulation, Essais, bouton à bascule pour en plus afficher/cacher le console [d’erreurs], Aide =F1 (il faut être connecté), Retirer de la station d’accueil =CTRL+P {détache ou recolle l’application Edge de la fenêtre des diagnostics}, bouton de fermeture de la fenêtre des diagnostics). Juste en-dessous, la barre de boutons : o Sélectionner l’élément HTML/DOM (Ctrl+B), o Mise en surbrillance d’un élément HTML/DOM (Ctrl+Maj+I) sélectionné o Sélecteur de couleurs (Ctrl+C) o Arborescence d’accessibilité (Ctrl+Maj+A) qui ouvre/ferme une colonne au centre, liste les valeurs des attributs des éléments HTML/DOM. Le pied de page donne la hiérarchie (tree) de l’élément sélectionné Le panneau de gauche donne le code source du programme exploré Le panneau de droite comporte les boutons suivants : Styles, Calculé, Disposition, Événements, Modifis, Accessibilité. EXPLORATEUR DOM : o Le panneau de droite comporte donc aussi son menu : Styles : Liste et décrit les règles de styles utilisés de l’élément listé dans ce panneau,et sélectionné dans le panneau de gauche (source) ou du milieu (arvorescence d’accessibilité), du plus profond au plus haut. Règle= « sélecteur { Déclaration } » Déclaration = « propriété : valeur » o Propriétés et valeurs peuvent être modifiées après avoir cliqué dessus. o Une propriété peut être désactivée en la décochant. o Le résultat est observable en temps réel (in live). Sélecteur et déclaration sont des identificateurs (identfiers). Calculé : Liste les valeurs réelles (calculées) appliquées aux propriétés des o règles de l’élément HTML/DOM sélectionné dans le panneau de gauche ou du milieu, et raye les propriétés redéfinies doc non héritées. Il indique aussi la ligne où commence effectivement la définition du style pour le sélecteur sélectionné. Dimensions du modèle de la boîte de l’élément actuel : Dimension du modèle de la boîte sélectionnée (Contenu de l’élément, Padding, Border, Margin, Outline-Offset). Chaque élément (tag) HTML/DOM a son box-model ne fut-ce qu’implicite (prédéfini). Événements Modifis : Modifications CSS effectuées pendant la session de diagnostic(rouge = ancien, cyan = en cours) Access : Propriétés d’Accessibilité avec le bouton de filtre des propriétés. Tout à droite de la barre des boutons se trouve la fenêtre de recherche. CONSOLE [D’ERREURS] : DÉBOGUEUR RÉSEAU : PERFORMANCES : OPERA 45 : Ctrl+Shift+I Opera donne aussi les valeurs par défaut du user agent stylesheetainsi que celles modifiées vs parents. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. STYLE : align-content:normal; align-items:normal; align-self:auto; alignment-baseline:auto; all:; animation-delay:0s; animation-direction:normal; animation-duration:0s; animation-fill-mode:none; animation-iteration-count:1; animation-name:none; animation-play-state:running; animation-timing-function:ease; backface-visibility:visible; background-attachment:scroll; background-blend-mode:normal; background-clip:border-box; background-color:rgba(0, 0, 0, 0); background-image:none; background-origin:padding-box; background-position-x:0%; background-position-y:0%; background-repeat-x:; background-repeat-y:; background-size:auto; baseline-shift:0px; block-size:549.875px; border-bottom-color:rgb(0, 0, 0); border-bottom-left-radius:0px; border-bottom-right-radius:0px; border-bottom-style:none; border-bottom-width:0px; 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. border-collapse:separate; border-image-outset:0px; border-image-repeat:stretch; border-image-slice:100%; border-image-source:none; border-image-width:1; border-left-color:rgb(0, 0, 0); border-left-style:none; border-left-width:0px; border-right-color:rgb(0, 0, 0); border-right-style:none; border-right-width:0px; border-top-color:rgb(0, 0, 0); border-top-left-radius:0px; border-top-right-radius:0px; border-top-style:none; border-top-width:0px; bottom:auto; box-shadow:none; box-sizing:content-box; break-after:auto; break-before:auto; break-inside:auto; buffered-rendering:auto; caption-side:top; caret-color:rgb(0, 0, 0); clear:none; clip:auto; clip-path:none; clip-rule:nonzero; color:rgb(0, 0, 0); color-interpolation:sRGB; color-interpolation-filters:linearRGB; color-rendering:auto; column-count:auto; column-fill:balance; column-gap:normal; column-rule-color:rgb(0, 0, 0); column-rule-style:none; column-rule-width:0px; column-span:none; column-width:auto; contain:none; 76. content:; 77. counter-increment:none; 78. counter-reset:none; 79. cursor:auto; 80. cx:0px; 81. cy:0px; 82. d:none; 83. direction:ltr; 84. display:block; 85. dominant-baseline:auto; 86. empty-cells:show; 87. fill:rgb(0, 0, 0); 88. fill-opacity:1; 89. fill-rule:nonzero; 90. filter:none; 91. flex-basis:auto; 92. flex-direction:row; 93. flex-grow:0; 94. flex-shrink:1; 95. flex-wrap:nowrap; 96. float:none; 97. flood-color:rgb(0, 0, 0); 98. flood-opacity:1; 99. font-family:"Times New Roman"; 100. font-feature-settings:normal; 101. font-kerning:auto; 102. font-size:16px; 103. font-stretch:normal; 104. font-style:normal; 105. font-variant-caps:normal; 106. font-variant-ligatures:normal; 107. font-variant-numeric:normal; 108. font-weight:normal; 109. grid-auto-columns:auto; 110. grid-auto-flow:row; 111. grid-auto-rows:auto; 112. grid-column-end:auto; 113. grid-column-gap:0px; 114. grid-column-start:auto; 115. grid-row-end:auto; 116. grid-row-gap:0px; 117. grid-row-start:auto; 118. grid-template-areas:none; 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154. 155. 156. 157. 158. 159. 160. 161. grid-template-columns:none; grid-template-rows:none; height:549.875px; hyphens:manual; image-rendering:auto; inline-size:350px; isolation:auto; justify-content:normal; justify-items:normal; justify-self:auto; left:auto; letter-spacing:normal; lighting-color:rgb(255, 255, 255); line-break:auto; line-height:normal; list-style-image:none; list-style-position:outside; list-style-type:disc; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; marker-end:none; marker-mid:none; marker-start:none; mask:none; mask-type:luminance; max-block-size:none; max-height:none; max-inline-size:none; max-width:none; min-block-size:0px; min-height:0px; min-inline-size:0px; min-width:0px; mix-blend-mode:normal; object-fit:fill; object-position:50% 50%; offset-distance:0px; offset-path:none; offset-rotate:auto 0deg; opacity:1; order:0; 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 182. 183. 184. 185. 186. 187. 188. 189. 190. 191. 192. 193. 194. 195. 196. 197. 198. 199. 200. 201. 202. 203. 204. orphans:2; outline-color:rgb(0, 0, 0); outline-offset:0px; outline-style:none; outline-width:0px; overflow-anchor:auto; overflow-wrap:normal; overflow-x:visible; overflow-y:visible; padding-bottom:0px; padding-left:0px; padding-right:0px; padding-top:0px; page:; paint-order:fill stroke markers; perspective:none; perspective-origin:175px 274.938px; pointer-events:auto; position:static; quotes:; r:0px; resize:none; right:auto; rx:auto; ry:auto; scroll-behavior:auto; shape-image-threshold:0; shape-margin:0px; shape-outside:none; shape-rendering:auto; size:; speak:normal; stop-color:rgb(0, 0, 0); stop-opacity:1; stroke:none; stroke-dasharray:none; stroke-dashoffset:0px; stroke-linecap:butt; stroke-linejoin:miter; stroke-miterlimit:4; stroke-opacity:1; stroke-width:1px; tab-size:8; 205. 206. 207. 208. 209. 210. 211. 212. 213. 214. 215. 216. 217. 218. 219. 220. 221. 222. 223. 224. 225. 226. 227. 228. 229. 230. 231. 232. 233. 234. 235. 236. 237. 238. 239. 240. 241. 242. 243. 244. 245. 246. 247. table-layout:auto; text-align:start; text-align-last:auto; text-anchor:start; text-combine-upright:none; text-decoration-color:rgb(0, 0, 0); text-decoration-line:none; text-decoration-skip:objects; text-decoration-style:solid; text-indent:0px; text-orientation:mixed; text-overflow:clip; text-rendering:auto; text-shadow:none; text-size-adjust:auto; text-transform:none; text-underline-position:auto; top:auto; touch-action:auto; transform:none; transform-origin:175px 274.938px; transform-style:flat; transition-delay:0s; transition-duration:0s; transition-property:all; transition-timing-function:ease; unicode-bidi:normal; user-select:text; vector-effect:none; vertical-align:baseline; visibility:visible; white-space:normal; widows:2; width:350px; will-change:auto; word-break:normal; word-spacing:0px; word-wrap:normal; writing-mode:horizontal-tb; x:0px; y:0px; z-index:auto; zoom:1; 248. 249. 250. 251. 252. 253. 254. 255. 256. 257. 258. 259. 260. 261. 262. 263. 264. 265. 266. 267. 268. 269. 270. 271. 272. 273. 274. 275. 276. 277. 278. 279. 280. 281. 282. 283. 284. 285. 286. 287. 288. 289. 290. -webkit-app-region:no-drag; -webkit-appearance:none; -webkit-border-after-color:rgb(0, 0, 0); -webkit-border-after-style:none; -webkit-border-after-width:0px; -webkit-border-before-color:rgb(0, 0, 0); -webkit-border-before-style:none; -webkit-border-before-width:0px; -webkit-border-end-color:rgb(0, 0, 0); -webkit-border-end-style:none; -webkit-border-end-width:0px; -webkit-border-horizontal-spacing:0px; -webkit-border-start-color:rgb(0, 0, 0); -webkit-border-start-style:none; -webkit-border-start-width:0px; -webkit-border-vertical-spacing:0px; -webkit-box-align:stretch; -webkit-box-decoration-break:slice; -webkit-box-direction:normal; -webkit-box-flex:0; -webkit-box-flex-group:1; -webkit-box-lines:single; -webkit-box-ordinal-group:1; -webkit-box-orient:horizontal; -webkit-box-pack:start; -webkit-box-reflect:none; -webkit-font-size-delta:; -webkit-font-smoothing:auto; -webkit-highlight:none; -webkit-hyphenate-character:auto; -webkit-line-clamp:none; -webkit-locale:auto; -webkit-logical-height:549.875px; -webkit-logical-width:350px; -webkit-margin-after:0px; -webkit-margin-after-collapse:collapse; -webkit-margin-before:0px; -webkit-margin-before-collapse:collapse; -webkit-margin-bottom-collapse:collapse; -webkit-margin-end:0px; -webkit-margin-start:0px; -webkit-margin-top-collapse:collapse; -webkit-mask-box-image-outset:0px; 291. 292. 293. 294. 295. 296. 297. 298. 299. 300. 301. 302. 303. 304. 305. 306. 307. 308. 309. 310. 311. 312. 313. 314. 315. 316. 317. 318. 319. 320. 321. 322. 323. 324. 325. 326. 327. 328. 329. 330. 331. 332. 333. -webkit-mask-box-image-repeat:stretch; -webkit-mask-box-image-slice:0 fill; -webkit-mask-box-image-source:none; -webkit-mask-box-image-width:auto; -webkit-mask-clip:border-box; -webkit-mask-composite:source-over; -webkit-mask-image:none; -webkit-mask-origin:border-box; -webkit-mask-position-x:0%; -webkit-mask-position-y:0%; -webkit-mask-repeat-x:; -webkit-mask-repeat-y:; -webkit-mask-size:auto; -webkit-max-logical-height:none; -webkit-max-logical-width:none; -webkit-min-logical-height:0px; -webkit-min-logical-width:0px; -webkit-padding-after:0px; -webkit-padding-before:0px; -webkit-padding-end:0px; -webkit-padding-start:0px; -webkit-perspective-origin-x:; -webkit-perspective-origin-y:; -webkit-print-color-adjust:economy; -webkit-rtl-ordering:logical; -webkit-ruby-position:before; -webkit-tap-highlight-color:rgba(0, 0, 0, 0.18); -webkit-text-combine:none; -webkit-text-decorations-in-effect:none; -webkit-text-emphasis-color:rgb(0, 0, 0); -webkit-text-emphasis-position:over; -webkit-text-emphasis-style:none; -webkit-text-fill-color:rgb(0, 0, 0); -webkit-text-security:none; -webkit-text-stroke-color:rgb(0, 0, 0); -webkit-text-stroke-width:0px; -webkit-transform-origin-x:; -webkit-transform-origin-y:; -webkit-transform-origin-z:; -webkit-user-drag:auto; -webkit-user-modify:read-only; -webkit-border-image:none; -webkit-text-orientation:vertical-right; BAIDU PROPERTIES BAIDU aLink: "" accessKey: "" attributes: NamedNodeMap length: 0 __proto__: NamedNodeMap constructor: NamedNodeMap() { [native code] } arguments: null caller: null name: "NamedNodeMap" prototype: NamedNodeMap toString: toString() { [native code] } name: "toString" prototype: toString __proto__: Empty() {} apply: apply() { [native code] } bind: bind() { [native code] } call: call() { [native code] } constructor: Function() { [native code] } length: 1 name: "Function" prototype: Empty() {} <function scope> No Scopes name: "Empty" __proto__: Object getNamedItem: getNamedItem() { [native code] } getNamedItemNS: getNamedItemNS() { [native code] } item: item() { [native code] } removeNamedItem: removeNamedItem() { [native code] } removeNamedItemNS: removeNamedItemNS() { [native code] } setNamedItem: setNamedItem() { [native code] } setNamedItemNS: setNamedItemNS() { [native code] } name: "getNamedItem" length: 2 name: "getNamedItemNS" background: "" baseURI: "file:///M:/DADET/PROGS/menu%20vertic_horiz.html" bgColor: "" childElementCount: 6 childNodes: NodeList[14] 0: text childNodes: NodeList[0] __proto__: NodeList constructor: NodeList() { [native code] } name: "item" data: "?" firstChild: null lastChild: null localName: null namespaceURI: null nextElementSibling: ul.navbar 0: class baseURI: null childNodes: NodeList[1] firstChild: text lastChild: text localName: "class" name: "class" nextSibling: null nodeName: "class" nodeType: 2 nodeValue: "navbar" ownerDocument: document ownerElement: ul.navbar parentElement: null parentNode: null prefix: null previousSibling: null specified: true textContent: "navbar" value: "navbar" __proto__: Attr childElementCount: 4 childNodes: NodeList[5] 1: li 2: li 3: li 4: li length: 5 children: HTMLCollection[4] 0: li length: 4 __proto__: HTMLCollection classList: DOMTokenList[1] 0: "navbar" __proto__: DOMTokenList className: "navbar" clientHeight: 155 clientLeft: 0 clientTop: 0 clientWidth: 144 compact: false contentEditable: "inherit" dataset: DOMStringMap __proto__: DOMStringMap dir: "" draggable: false nextElementSibling: li nextSibling: li nodeName: "#text" nodeType: 3 nodeValue: "?" parentElement: ul.navbar parentNode: ul.navbar previousElementSibling: null textContent: "?" wholeText: "?" __proto__: Text firstElementChild: li childElementCount: 1 childNodes: NodeList[2] children: HTMLCollection[1] classList: DOMTokenList[0] className: "" clientHeight: 29 clientWidth: 128 firstChild: a firstElementChild: a hidden: false id: "" innerHTML: "<a href="index.html">Home page</a>?" innerText: "Home page" isContentEditable: false lang: "" lastElementChild: a localName: "li" namespaceURI: "http://www.w3.org/1999/xhtml" nodeName: "LI" nodeType: 1 nodeValue: null offsetHeight: 29 offsetLeft: 0 offsetParent: ul.navbar offsetTop: 8 offsetWidth: 144 onabort: null onbeforecopy: null onbeforecut: null onbeforepaste: null onblur: null oncancel: null oncanplay: null oncanplaythrough: null onchange: null onclick: null onclose: null oncontextmenu: null oncopy: null oncuechange: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null ondurationchange: null onemptied: null onended: null onerror: null onfocus: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onloadeddata: null onloadedmetadata: null onloadstart: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onpause: null onplay: null onplaying: null onprogress: null onratechange: null onreset: null onresize: null onscroll: null onsearch: null onseeked: null onseeking: null onselect: null onselectstart: null onshow: null onstalled: null onsubmit: null onsuspend: null ontimeupdate: null ontoggle: null onvolumechange: null onwaiting: null onwebkitfullscreenchange: null onwebkitfullscreenerror: null onwheel: null outerHTML: "<li><a href="index.html">Home page</a>?</li>" outerText: "Home page" previousSibling: text scrollHeight: 29 scrollLeft: 0 scrollTop: 0 scrollWidth: 128 shadowRoot: null spellcheck: true style: CSSStyleDeclaration tabIndex: -1 tagName: "LI" textContent: "Home page?" title: "" translate: true type: "" value: 0 webkitdropzone: "" __proto__: HTMLLIElement innerHTML: "?<li><a href="index.html">Home page</a>?</li><li><a href="musings.html">Musings</a>?</li><li><a href="town.html">My town</a>?</li><li><a href="links.html">Links</a>?</li>" innerText: "Home page?Musings?My town?Links?" lastChild: li clientHeight: 28 innerHTML: "<a href="links.html">Links</a>?" innerText: "Links" nextElementSibling: null parentElement: li parentNode: li previousElementSibling: a previousSibling: a offsetHeight: 28 lastElementChild: li localName: "ul" nextElementSibling: h1 nextSibling: text nodeName: "UL" offsetHeight: 155 offsetLeft: 16 offsetParent: body offsetTop: 19 outerHTML: "<ul class="navbar">?<li><a href="index.html">Home page</a>?</li><li><a href="musings.html">Musings</a>?</li><li><a href="town.html">My town</a>?</li><li><a href="links.html">Links</a>?</li></ul>" outerText: "Home page?Musings?My town?Links?" parentElement: body parentNode: body scrollHeight: 154 scrollWidth: 144 tagName: "UL" textContent: "?Home page?Musings?My town?Links?" __proto__: HTMLUListElement offsetTop: 118 outerHTML: "<li><a href="links.html">Links</a>?</li>" outerText: "Links" URL: "file:///M:/DADET/PROGS/menu%20vertic_horiz.html" activeElement: body children: HTMLCollection[6] clientHeight: 313 clientWidth: 427 firstElementChild: ul.navbar innerHTML: "?<!-- Site navigation menu -->?<ul class="navbar">?<li><a href="index.html">Home page</a>?</li><li><a href="musings.html">Musings</a>?</li><li><a href="town.html">My town</a>?</li><li><a href="links.html">Links</a>?</li></ul>?<!-- Main content ->?<h1>My first styled page</h1>?<p>Welcome to my styled page!?</p><p>It lacks images, but at least it has style.?And it has links, even if they don't go?anywhere…?</p><p>There should be more here, but I don't know?what yet.?<!-- Sign and date the page, it's only polite! -->?</p><address>Made 5 April 2004<br>?by myself.</address>???" innerText: "Home page?Musings?My town?Links?My first styled page??Welcome to my styled page!??It lacks images, but at least it has style. And it has links, even if they don't go anywhere…??There should be more here, but I don't know what yet.??Made 5 April 2004?by myself." lastElementChild: address link: "" localName: "body" nodeName: "BODY" offsetHeight: 313 offsetParent: null offsetTop: 0 offsetWidth: 427 onbeforeunload: null onhashchange: null onlanguagechange: null onmessage: null onoffline: null ononline: null onpagehide: null onpageshow: null onpopstate: null onstorage: null onunload: null outerHTML: "<body>?<!-- Site navigation menu -->?<ul class="navbar">?<li><a href="index.html">Home page</a>?</li><li><a href="musings.html">Musings</a>?</li><li><a href="town.html">My town</a>?</li><li><a href="links.html">Links</a>?</li></ul>?<!-- Main content ->?<h1>My first styled page</h1>?<p>Welcome to my styled page!?</p><p>It lacks images, but at least it has style.?And it has links, even if they don't go?anywhere…?</p><p>There should be more here, but I don't know?what yet.?<!-- Sign and date the page, it's only polite! -->?</p><address>Made 5 April 2004<br>?by myself.</address>???</body>" outerText: "Home page?Musings?My town?Links?My first styled page??Welcome to my styled page!??It lacks images, but at least it has style. And it has links, even if they don't go anywhere…??There should be more here, but I don't know what yet.??Made 5 April 2004?by myself." parentElement: html parentNode: html previousElementSibling: head scrollHeight: 881 scrollWidth: 443 tagName: "BODY" text: "" textContent: "???Home page?Musings?My town?Links???My first styled page?Welcome to my styled page!?It lacks images, but at least it has style.?And it has links, even if they don't go?anywhere…?There should be more here, but I don't know?what yet.??Made 5 April 2004?by myself.???" vLink: "" __proto__: HTMLBodyElement alinkColor: "" all: HTMLAllCollection[21] 0: html 1: head 2: title 3: link 4: style 5: body 1: comment 2: text 3: ul.navbar 4: text 5: comment 6: text 7: h1 8: text 9: p 10: p 11: p 12: address 13: text length: 14 0: ul.navbar name: "NodeList" prototype: NodeList name: "bind" Global: Window __defineGetter__: __defineGetter__() { [native code] } name: "__defineGetter__" __defineSetter__: __defineSetter__() { [native code] } name: "__defineSetter__" __lookupGetter__: __lookupGetter__() { [native code] } name: "__lookupGetter__" __lookupSetter__: __lookupSetter__() { [native code] } name: "__lookupSetter__" constructor: Object() { [native code] } create: create() { [native code] } name: "create" defineProperties: defineProperties() { [native code] } name: "defineProperties" defineProperty: defineProperty() { [native code] } length: 3 name: "defineProperty" deliverChangeRecords: deliverChangeRecords() { [native code] } arguments: (...) get arguments: ThrowTypeError() { [native code] } name: "ThrowTypeError" prototype: ThrowTypeError set arguments: ThrowTypeError() { [native code] } caller: (...) get caller: ThrowTypeError() { [native code] } set caller: ThrowTypeError() { [native code] } name: "deliverChangeRecords" freeze: freeze() { [native code] } name: "freeze" getNotifier: getNotifier() { [native code] } name: "getNotifier" getOwnPropertyDescriptor: getOwnPropertyDescriptor() { [native code] } name: "getOwnPropertyDescriptor" getOwnPropertyNames: getOwnPropertyNames() { [native code] } name: "getOwnPropertyNames" getOwnPropertySymbols: getOwnPropertySymbols() { [native code] } name: "getOwnPropertySymbols" getPrototypeOf: getPrototypeOf() { [native code] } name: "getPrototypeOf" is: is() { [native code] } name: "is" isExtensible: isExtensible() { [native code] } name: "isExtensible" isFrozen: isFrozen() { [native code] } name: "isFrozen" isSealed: isSealed() { [native code] } name: "isSealed" keys: keys() { [native code] } name: "keys" name: "Object" observe: observe() { [native code] } name: "observe" preventExtensions: preventExtensions() { [native code] } name: "preventExtensions" prototype: Object name: "apply" name: "call" hasOwnProperty: hasOwnProperty() { [native code] } isPrototypeOf: isPrototypeOf() { [native code] } propertyIsEnumerable: propertyIsEnumerable() { [native code] } toLocaleString: toLocaleString() { [native code] } valueOf: valueOf() { [native code] } get __proto__: __proto__() { [native code] } set __proto__: __proto__() { [native code] } AnalyserNode: AnalyserNode() { [native code] } AnimationEvent: AnimationEvent() { [native code] } ApplicationCache: ApplicationCache() { [native code] } ApplicationCacheErrorEvent: ApplicationCacheErrorEvent() { [native code] } Array: Array() { [native code] } ArrayBuffer: ArrayBuffer() { [native code] } Attr: Attr() { [native code] } Audio: HTMLAudioElement() { [native code] } AudioBuffer: AudioBuffer() { [native code] } AudioBufferSourceNode: AudioBufferSourceNode() { [native code] } AudioContext: AudioContext() { [native code] } AudioDestinationNode: AudioDestinationNode() { [native code] } AudioListener: AudioListener() { [native code] } AudioNode: AudioNode() { [native code] } AudioParam: AudioParam() { [native code] } AudioProcessingEvent: AudioProcessingEvent() { [native code] } AutocompleteErrorEvent: AutocompleteErrorEvent() { [native code] } BarProp: BarProp() { [native code] } BatteryManager: BatteryManager() { [native code] } BeforeUnloadEvent: BeforeUnloadEvent() { [native code] } BiquadFilterNode: BiquadFilterNode() { [native code] } Blob: Blob() { [native code] } Boolean: Boolean() { [native code] } CDATASection: CDATASection() { [native code] } CSS: CSS CSSFontFaceRule: CSSFontFaceRule() { [native code] } CSSImportRule: CSSImportRule() { [native code] } CSSKeyframeRule: CSSKeyframeRule() { [native code] } CSSKeyframesRule: CSSKeyframesRule() { [native code] } CSSMediaRule: CSSMediaRule() { [native code] } CSSPageRule: CSSPageRule() { [native code] } CSSRule: CSSRule() { [native code] } CSSRuleList: CSSRuleList() { [native code] } CSSStyleDeclaration: CSSStyleDeclaration() { [native code] } CSSStyleRule: CSSStyleRule() { [native code] } CSSStyleSheet: CSSStyleSheet() { [native code] } CSSSupportsRule: CSSSupportsRule() { [native code] } CSSUnknownRule: CSSUnknownRule() { [native code] } CSSViewportRule: CSSViewportRule() { [native code] } Cache: Cache() { [native code] } CacheStorage: CacheStorage() { [native code] } CanvasGradient: CanvasGradient() { [native code] } CanvasPattern: CanvasPattern() { [native code] } CanvasRenderingContext2D: CanvasRenderingContext2D() { [native code] } ChannelMergerNode: ChannelMergerNode() { [native code] } ChannelSplitterNode: ChannelSplitterNode() { [native code] } CharacterData: CharacterData() { [native code] } ClientRect: ClientRect() { [native code] } ClientRectList: ClientRectList() { [native code] } ClipboardEvent: ClipboardEvent() { [native code] } CloseEvent: CloseEvent() { [native code] } Comment: Comment() { [native code] } CompositionEvent: CompositionEvent() { [native code] } ConvolverNode: ConvolverNode() { [native code] } Crypto: Crypto() { [native code] } CryptoKey: CryptoKey() { [native code] } CustomEvent: CustomEvent() { [native code] } DOMError: DOMError() { [native code] } DOMException: DOMException() { [native code] } DOMImplementation: DOMImplementation() { [native code] } DOMParser: DOMParser() { [native code] } DOMSettableTokenList: DOMSettableTokenList() { [native code] } DOMStringList: DOMStringList() { [native code] } DOMStringMap: DOMStringMap() { [native code] } DOMTokenList: DOMTokenList() { [native code] } DataTransfer: DataTransfer() { [native code] } DataTransferItem: DataTransferItem() { [native code] } DataTransferItemList: DataTransferItemList() { [native code] } DataView: DataView() { [native code] } Date: Date() { [native code] } DelayNode: DelayNode() { [native code] } DeviceMotionEvent: DeviceMotionEvent() { [native code] } DeviceOrientationEvent: DeviceOrientationEvent() { [native code] } Document: Document() { [native code] } DocumentFragment: DocumentFragment() { [native code] } DocumentType: DocumentType() { [native code] } DynamicsCompressorNode: DynamicsCompressorNode() { [native code] } Element: Element() { [native code] } Error: Error() { [native code] } ErrorEvent: ErrorEvent() { [native code] } EvalError: EvalError() { [native code] } Event: Event() { [native code] } EventSource: EventSource() { [native code] } EventTarget: EventTarget() { [native code] } File: File() { [native code] } FileError: FileError() { [native code] } FileList: FileList() { [native code] } FileReader: FileReader() { [native code] } Float32Array: Float32Array() { [native code] } Float64Array: Float64Array() { [native code] } FocusEvent: FocusEvent() { [native code] } FontFace: FontFace() { [native code] } FormData: FormData() { [native code] } Function: Function() { [native code] } GainNode: GainNode() { [native code] } Gamepad: Gamepad() { [native code] } GamepadButton: GamepadButton() { [native code] } GamepadEvent: GamepadEvent() { [native code] } HTMLAllCollection: HTMLAllCollection() { [native code] } HTMLAnchorElement: HTMLAnchorElement() { [native code] } HTMLAppletElement: HTMLAppletElement() { [native code] } HTMLAreaElement: HTMLAreaElement() { [native code] } HTMLAudioElement: HTMLAudioElement() { [native code] } HTMLBRElement: HTMLBRElement() { [native code] } HTMLBaseElement: HTMLBaseElement() { [native code] } HTMLBodyElement: HTMLBodyElement() { [native code] } HTMLButtonElement: HTMLButtonElement() { [native code] } HTMLCanvasElement: HTMLCanvasElement() { [native code] } HTMLCollection: HTMLCollection() { [native code] } HTMLContentElement: HTMLContentElement() { [native code] } HTMLDListElement: HTMLDListElement() { [native code] } HTMLDataListElement: HTMLDataListElement() { [native code] } HTMLDetailsElement: HTMLDetailsElement() { [native code] } HTMLDialogElement: HTMLDialogElement() { [native code] } HTMLDirectoryElement: HTMLDirectoryElement() { [native code] } HTMLDivElement: HTMLDivElement() { [native code] } HTMLDocument: HTMLDocument() { [native code] } HTMLElement: HTMLElement() { [native code] } HTMLEmbedElement: HTMLEmbedElement() { [native code] } HTMLFieldSetElement: HTMLFieldSetElement() { [native code] } HTMLFontElement: HTMLFontElement() { [native code] } HTMLFormControlsCollection: HTMLFormControlsCollection() { [native code] } HTMLFormElement: HTMLFormElement() { [native code] } HTMLFrameElement: HTMLFrameElement() { [native code] } HTMLFrameSetElement: HTMLFrameSetElement() { [native code] } HTMLHRElement: HTMLHRElement() { [native code] } HTMLHeadElement: HTMLHeadElement() { [native code] } HTMLHeadingElement: HTMLHeadingElement() { [native code] } HTMLHtmlElement: HTMLHtmlElement() { [native code] } HTMLIFrameElement: HTMLIFrameElement() { [native code] } HTMLImageElement: HTMLImageElement() { [native code] } HTMLInputElement: HTMLInputElement() { [native code] } HTMLKeygenElement: HTMLKeygenElement() { [native code] } HTMLLIElement: HTMLLIElement() { [native code] } HTMLLabelElement: HTMLLabelElement() { [native code] } HTMLLegendElement: HTMLLegendElement() { [native code] } HTMLLinkElement: HTMLLinkElement() { [native code] } HTMLMapElement: HTMLMapElement() { [native code] } HTMLMarqueeElement: HTMLMarqueeElement() { [native code] } HTMLMediaElement: HTMLMediaElement() { [native code] } HTMLMenuElement: HTMLMenuElement() { [native code] } HTMLMetaElement: HTMLMetaElement() { [native code] } HTMLMeterElement: HTMLMeterElement() { [native code] } HTMLModElement: HTMLModElement() { [native code] } HTMLOListElement: HTMLOListElement() { [native code] } HTMLObjectElement: HTMLObjectElement() { [native code] } HTMLOptGroupElement: HTMLOptGroupElement() { [native code] } HTMLOptionElement: HTMLOptionElement() { [native code] } HTMLOptionsCollection: HTMLOptionsCollection() { [native code] } HTMLOutputElement: HTMLOutputElement() { [native code] } HTMLParagraphElement: HTMLParagraphElement() { [native code] } HTMLParamElement: HTMLParamElement() { [native code] } HTMLPictureElement: HTMLPictureElement() { [native code] } HTMLPreElement: HTMLPreElement() { [native code] } HTMLProgressElement: HTMLProgressElement() { [native code] } HTMLQuoteElement: HTMLQuoteElement() { [native code] } HTMLScriptElement: HTMLScriptElement() { [native code] } HTMLSelectElement: HTMLSelectElement() { [native code] } HTMLShadowElement: HTMLShadowElement() { [native code] } HTMLSourceElement: HTMLSourceElement() { [native code] } HTMLSpanElement: HTMLSpanElement() { [native code] } HTMLStyleElement: HTMLStyleElement() { [native code] } HTMLTableCaptionElement: HTMLTableCaptionElement() { [native code] } HTMLTableCellElement: HTMLTableCellElement() { [native code] } HTMLTableColElement: HTMLTableColElement() { [native code] } HTMLTableElement: HTMLTableElement() { [native code] } HTMLTableRowElement: HTMLTableRowElement() { [native code] } HTMLTableSectionElement: HTMLTableSectionElement() { [native code] } HTMLTemplateElement: HTMLTemplateElement() { [native code] } HTMLTextAreaElement: HTMLTextAreaElement() { [native code] } HTMLTitleElement: HTMLTitleElement() { [native code] } HTMLTrackElement: HTMLTrackElement() { [native code] } HTMLUListElement: HTMLUListElement() { [native code] } HTMLUnknownElement: HTMLUnknownElement() { [native code] } HTMLVideoElement: HTMLVideoElement() { [native code] } HashChangeEvent: HashChangeEvent() { [native code] } Headers: Headers() { [native code] } History: History() { [native code] } IDBCursor: IDBCursor() { [native code] } IDBCursorWithValue: IDBCursorWithValue() { [native code] } IDBDatabase: IDBDatabase() { [native code] } IDBFactory: IDBFactory() { [native code] } IDBIndex: IDBIndex() { [native code] } IDBKeyRange: IDBKeyRange() { [native code] } IDBObjectStore: IDBObjectStore() { [native code] } IDBOpenDBRequest: IDBOpenDBRequest() { [native code] } IDBRequest: IDBRequest() { [native code] } IDBTransaction: IDBTransaction() { [native code] } IDBVersionChangeEvent: IDBVersionChangeEvent() { [native code] } Image: HTMLImageElement() { [native code] } ImageBitmap: ImageBitmap() { [native code] } ImageData: ImageData() { [native code] } InputMethodContext: InputMethodContext() { [native code] } Int8Array: Int8Array() { [native code] } Int16Array: Int16Array() { [native code] } Int32Array: Int32Array() { [native code] } Intl: Object JSON: JSON KeyboardEvent: KeyboardEvent() { [native code] } Location: Location() { [native code] } MIDIAccess: MIDIAccess() { [native code] } MIDIConnectionEvent: MIDIConnectionEvent() { [native code] } MIDIInput: MIDIInput() { [native code] } MIDIInputMap: MIDIInputMap() { [native code] } MIDIMessageEvent: MIDIMessageEvent() { [native code] } MIDIOutput: MIDIOutput() { [native code] } MIDIOutputMap: MIDIOutputMap() { [native code] } MIDIPort: MIDIPort() { [native code] } Map: Map() { [native code] } Math: MathConstructor MediaElementAudioSourceNode: MediaElementAudioSourceNode() { [native code] } MediaEncryptedEvent: MediaEncryptedEvent() { [native code] } MediaError: MediaError() { [native code] } MediaKeyError: MediaKeyError() { [native code] } MediaKeyEvent: MediaKeyEvent() { [native code] } MediaKeyMessageEvent: MediaKeyMessageEvent() { [native code] } MediaKeySession: MediaKeySession() { [native code] } MediaKeyStatusMap: MediaKeyStatusMap() { [native code] } MediaKeySystemAccess: MediaKeySystemAccess() { [native code] } MediaKeys: MediaKeys() { [native code] } MediaList: MediaList() { [native code] } MediaQueryList: MediaQueryList() { [native code] } MediaQueryListEvent: MediaQueryListEvent() { [native code] } MediaSource: MediaSource() { [native code] } MediaStreamAudioDestinationNode: MediaStreamAudioDestinationNode() { [native code] } MediaStreamAudioSourceNode: MediaStreamAudioSourceNode() { [native code] } MediaStreamEvent: MediaStreamEvent() { [native code] } MediaStreamTrack: MediaStreamTrack() { [native code] } MessageChannel: MessageChannel() { [native code] } MessageEvent: MessageEvent() { [native code] } MessagePort: MessagePort() { [native code] } MimeType: MimeType() { [native code] } MimeTypeArray: MimeTypeArray() { [native code] } MouseEvent: MouseEvent() { [native code] } MutationEvent: MutationEvent() { [native code] } MutationObserver: MutationObserver() { [native code] } MutationRecord: MutationRecord() { [native code] } NamedNodeMap: NamedNodeMap() { [native code] } Navigator: Navigator() { [native code] } Node: Node() { [native code] } NodeFilter: NodeFilter() { [native code] } NodeIterator: NodeIterator() { [native code] } NodeList: NodeList() { [native code] } Notification: Notification() { [native code] } Number: Number() { [native code] } Object: Object() { [native code] } OfflineAudioCompletionEvent: OfflineAudioCompletionEvent() { [native code] } OfflineAudioContext: OfflineAudioContext() { [native code] } Option: HTMLOptionElement() { [native code] } OscillatorNode: OscillatorNode() { [native code] } PageTransitionEvent: PageTransitionEvent() { [native code] } Path2D: Path2D() { [native code] } Performance: Performance() { [native code] } PerformanceEntry: PerformanceEntry() { [native code] } PerformanceMark: PerformanceMark() { [native code] } PerformanceMeasure: PerformanceMeasure() { [native code] } PerformanceNavigation: PerformanceNavigation() { [native code] } PerformanceResourceTiming: PerformanceResourceTiming() { [native code] } PerformanceTiming: PerformanceTiming() { [native code] } PeriodicWave: PeriodicWave() { [native code] } PermissionStatus: PermissionStatus() { [native code] } Permissions: Permissions() { [native code] } Plugin: Plugin() { [native code] } PluginArray: PluginArray() { [native code] } PopStateEvent: PopStateEvent() { [native code] } ProcessingInstruction: ProcessingInstruction() { [native code] } ProgressEvent: ProgressEvent() { [native code] } Promise: Promise() { [native code] } PushManager: PushManager() { [native code] } PushSubscription: PushSubscription() { [native code] } RTCIceCandidate: RTCIceCandidate() { [native code] } RTCSessionDescription: RTCSessionDescription() { [native code] } RadioNodeList: RadioNodeList() { [native code] } Range: Range() { [native code] } RangeError: RangeError() { [native code] } ReadableByteStream: ReadableByteStream() { [native code] } ReadableStream: ReadableStream() { [native code] } ReferenceError: ReferenceError() { [native code] } RegExp: RegExp() { [native code] } Request: Request() { [native code] } Response: Response() { [native code] } SVGAElement: SVGAElement() { [native code] } SVGAngle: SVGAngle() { [native code] } SVGAnimateElement: SVGAnimateElement() { [native code] } SVGAnimateMotionElement: SVGAnimateMotionElement() { [native code] } SVGAnimateTransformElement: SVGAnimateTransformElement() { [native code] } SVGAnimatedAngle: SVGAnimatedAngle() { [native code] } SVGAnimatedBoolean: SVGAnimatedBoolean() { [native code] } SVGAnimatedEnumeration: SVGAnimatedEnumeration() { [native code] } SVGAnimatedInteger: SVGAnimatedInteger() { [native code] } SVGAnimatedLength: SVGAnimatedLength() { [native code] } SVGAnimatedLengthList: SVGAnimatedLengthList() { [native code] } SVGAnimatedNumber: SVGAnimatedNumber() { [native code] } SVGAnimatedNumberList: SVGAnimatedNumberList() { [native code] } SVGAnimatedPreserveAspectRatio: SVGAnimatedPreserveAspectRatio() { [native code] } SVGAnimatedRect: SVGAnimatedRect() { [native code] } SVGAnimatedString: SVGAnimatedString() { [native code] } SVGAnimatedTransformList: SVGAnimatedTransformList() { [native code] } SVGAnimationElement: SVGAnimationElement() { [native code] } SVGCircleElement: SVGCircleElement() { [native code] } SVGClipPathElement: SVGClipPathElement() { [native code] } SVGComponentTransferFunctionElement: SVGComponentTransferFunctionElement() { [native code] } SVGCursorElement: SVGCursorElement() { [native code] } SVGDefsElement: SVGDefsElement() { [native code] } SVGDescElement: SVGDescElement() { [native code] } SVGDiscardElement: SVGDiscardElement() { [native code] } SVGElement: SVGElement() { [native code] } SVGEllipseElement: SVGEllipseElement() { [native code] } SVGFEBlendElement: SVGFEBlendElement() { [native code] } SVGFEColorMatrixElement: SVGFEColorMatrixElement() { [native code] } SVGFEComponentTransferElement: SVGFEComponentTransferElement() { [native code] } SVGFECompositeElement: SVGFECompositeElement() { [native code] } SVGFEConvolveMatrixElement: SVGFEConvolveMatrixElement() { [native code] } SVGFEDiffuseLightingElement: SVGFEDiffuseLightingElement() { [native code] } SVGFEDisplacementMapElement: SVGFEDisplacementMapElement() { [native code] } SVGFEDistantLightElement: SVGFEDistantLightElement() { [native code] } SVGFEDropShadowElement: SVGFEDropShadowElement() { [native code] } SVGFEFloodElement: SVGFEFloodElement() { [native code] } SVGFEFuncAElement: SVGFEFuncAElement() { [native code] } SVGFEFuncBElement: SVGFEFuncBElement() { [native code] } SVGFEFuncGElement: SVGFEFuncGElement() { [native code] } SVGFEFuncRElement: SVGFEFuncRElement() { [native code] } SVGFEGaussianBlurElement: SVGFEGaussianBlurElement() { [native code] } SVGFEImageElement: SVGFEImageElement() { [native code] } SVGFEMergeElement: SVGFEMergeElement() { [native code] } SVGFEMergeNodeElement: SVGFEMergeNodeElement() { [native code] } SVGFEMorphologyElement: SVGFEMorphologyElement() { [native code] } SVGFEOffsetElement: SVGFEOffsetElement() { [native code] } SVGFEPointLightElement: SVGFEPointLightElement() { [native code] } SVGFESpecularLightingElement: SVGFESpecularLightingElement() { [native code] } SVGFESpotLightElement: SVGFESpotLightElement() { [native code] } SVGFETileElement: SVGFETileElement() { [native code] } SVGFETurbulenceElement: SVGFETurbulenceElement() { [native code] } SVGFilterElement: SVGFilterElement() { [native code] } SVGForeignObjectElement: SVGForeignObjectElement() { [native code] } SVGGElement: SVGGElement() { [native code] } SVGGeometryElement: SVGGeometryElement() { [native code] } SVGGradientElement: SVGGradientElement() { [native code] } SVGGraphicsElement: SVGGraphicsElement() { [native code] } SVGImageElement: SVGImageElement() { [native code] } SVGLength: SVGLength() { [native code] } SVGLengthList: SVGLengthList() { [native code] } SVGLineElement: SVGLineElement() { [native code] } SVGLinearGradientElement: SVGLinearGradientElement() { [native code] } SVGMPathElement: SVGMPathElement() { [native code] } SVGMarkerElement: SVGMarkerElement() { [native code] } SVGMaskElement: SVGMaskElement() { [native code] } SVGMatrix: SVGMatrix() { [native code] } SVGMetadataElement: SVGMetadataElement() { [native code] } SVGNumber: SVGNumber() { [native code] } SVGNumberList: SVGNumberList() { [native code] } SVGPathElement: SVGPathElement() { [native code] } SVGPathSeg: SVGPathSeg() { [native code] } SVGPathSegArcAbs: SVGPathSegArcAbs() { [native code] } SVGPathSegArcRel: SVGPathSegArcRel() { [native code] } SVGPathSegClosePath: SVGPathSegClosePath() { [native code] } SVGPathSegCurvetoCubicAbs: SVGPathSegCurvetoCubicAbs() { [native code] } SVGPathSegCurvetoCubicRel: SVGPathSegCurvetoCubicRel() { [native code] } SVGPathSegCurvetoCubicSmoothAbs: SVGPathSegCurvetoCubicSmoothAbs() { [native code] } SVGPathSegCurvetoCubicSmoothRel: SVGPathSegCurvetoCubicSmoothRel() { [native code] } SVGPathSegCurvetoQuadraticAbs: SVGPathSegCurvetoQuadraticAbs() { [native code] } SVGPathSegCurvetoQuadraticRel: SVGPathSegCurvetoQuadraticRel() { [native code] } SVGPathSegCurvetoQuadraticSmoothAbs: SVGPathSegCurvetoQuadraticSmoothAbs() { [native code] } SVGPathSegCurvetoQuadraticSmoothRel: SVGPathSegCurvetoQuadraticSmoothRel() { [native code] } SVGPathSegLinetoAbs: SVGPathSegLinetoAbs() { [native code] } SVGPathSegLinetoHorizontalAbs: SVGPathSegLinetoHorizontalAbs() { [native code] } SVGPathSegLinetoHorizontalRel: SVGPathSegLinetoHorizontalRel() { [native code] } SVGPathSegLinetoRel: SVGPathSegLinetoRel() { [native code] } SVGPathSegLinetoVerticalAbs: SVGPathSegLinetoVerticalAbs() { [native code] } SVGPathSegLinetoVerticalRel: SVGPathSegLinetoVerticalRel() { [native code] } SVGPathSegList: SVGPathSegList() { [native code] } SVGPathSegMovetoAbs: SVGPathSegMovetoAbs() { [native code] } SVGPathSegMovetoRel: SVGPathSegMovetoRel() { [native code] } SVGPatternElement: SVGPatternElement() { [native code] } SVGPoint: SVGPoint() { [native code] } SVGPointList: SVGPointList() { [native code] } SVGPolygonElement: SVGPolygonElement() { [native code] } SVGPolylineElement: SVGPolylineElement() { [native code] } SVGPreserveAspectRatio: SVGPreserveAspectRatio() { [native code] } SVGRadialGradientElement: SVGRadialGradientElement() { [native code] } SVGRect: SVGRect() { [native code] } SVGRectElement: SVGRectElement() { [native code] } SVGRenderingIntent: SVGRenderingIntent() { [native code] } SVGSVGElement: SVGSVGElement() { [native code] } SVGScriptElement: SVGScriptElement() { [native code] } SVGSetElement: SVGSetElement() { [native code] } SVGStopElement: SVGStopElement() { [native code] } SVGStringList: SVGStringList() { [native code] } SVGStyleElement: SVGStyleElement() { [native code] } SVGSwitchElement: SVGSwitchElement() { [native code] } SVGSymbolElement: SVGSymbolElement() { [native code] } SVGTSpanElement: SVGTSpanElement() { [native code] } SVGTextContentElement: SVGTextContentElement() { [native code] } SVGTextElement: SVGTextElement() { [native code] } SVGTextPathElement: SVGTextPathElement() { [native code] } SVGTextPositioningElement: SVGTextPositioningElement() { [native code] } SVGTitleElement: SVGTitleElement() { [native code] } SVGTransform: SVGTransform() { [native code] } SVGTransformList: SVGTransformList() { [native code] } SVGUnitTypes: SVGUnitTypes() { [native code] } SVGUseElement: SVGUseElement() { [native code] } SVGViewElement: SVGViewElement() { [native code] } SVGViewSpec: SVGViewSpec() { [native code] } SVGZoomEvent: SVGZoomEvent() { [native code] } Screen: () { [native code] } ScriptProcessorNode: ScriptProcessorNode() { [native code] } SecurityPolicyViolationEvent: SecurityPolicyViolationEvent() { [native code] } Selection: Selection() { [native code] } ServiceWorker: ServiceWorker() { [native code] } ServiceWorkerContainer: ServiceWorkerContainer() { [native code] } ServiceWorkerRegistration: ServiceWorkerRegistration() { [native code] } Set: Set() { [native code] } ShadowRoot: ShadowRoot() { [native code] } SharedWorker: SharedWorker() { [native code] } SpeechSynthesisEvent: SpeechSynthesisEvent() { [native code] } SpeechSynthesisUtterance: SpeechSynthesisUtterance() { [native code] } Storage: Storage() { [native code] } StorageEvent: StorageEvent() { [native code] } String: String() { [native code] } StyleSheet: StyleSheet() { [native code] } StyleSheetList: StyleSheetList() { [native code] } SubtleCrypto: SubtleCrypto() { [native code] } Symbol: Symbol() { [native code] } SyntaxError: SyntaxError() { [native code] } Text: Text() { [native code] } TextDecoder: TextDecoder() { [native code] } TextEncoder: TextEncoder() { [native code] } TextEvent: TextEvent() { [native code] } TextMetrics: TextMetrics() { [native code] } TextTrack: TextTrack() { [native code] } TextTrackCue: TextTrackCue() { [native code] } TextTrackCueList: TextTrackCueList() { [native code] } TextTrackList: TextTrackList() { [native code] } TimeRanges: TimeRanges() { [native code] } Touch: Touch() { [native code] } TouchEvent: TouchEvent() { [native code] } TouchList: TouchList() { [native code] } TrackEvent: TrackEvent() { [native code] } TransitionEvent: TransitionEvent() { [native code] } TreeWalker: TreeWalker() { [native code] } TypeError: TypeError() { [native code] } UIEvent: UIEvent() { [native code] } URIError: URIError() { [native code] } URL: URL() { [native code] } Uint8Array: Uint8Array() { [native code] } Uint8ClampedArray: Uint8ClampedArray() { [native code] } Uint16Array: Uint16Array() { [native code] } Uint32Array: Uint32Array() { [native code] } VTTCue: VTTCue() { [native code] } ValidityState: ValidityState() { [native code] } WaveShaperNode: WaveShaperNode() { [native code] } WeakMap: WeakMap() { [native code] } WeakSet: WeakSet() { [native code] } WebGLActiveInfo: WebGLActiveInfo() { [native code] } WebGLBuffer: WebGLBuffer() { [native code] } WebGLContextEvent: WebGLContextEvent() { [native code] } WebGLFramebuffer: WebGLFramebuffer() { [native code] } WebGLProgram: WebGLProgram() { [native code] } WebGLRenderbuffer: WebGLRenderbuffer() { [native code] } WebGLRenderingContext: WebGLRenderingContext() { [native code] } WebGLShader: WebGLShader() { [native code] } WebGLShaderPrecisionFormat: WebGLShaderPrecisionFormat() { [native code] } WebGLTexture: WebGLTexture() { [native code] } WebGLUniformLocation: WebGLUniformLocation() { [native code] } WebKitAnimationEvent: AnimationEvent() { [native code] } WebKitCSSMatrix: WebKitCSSMatrix() { [native code] } WebKitMutationObserver: MutationObserver() { [native code] } WebKitTransitionEvent: TransitionEvent() { [native code] } WebSocket: WebSocket() { [native code] } WheelEvent: WheelEvent() { [native code] } Window: Window() { [native code] } Worker: Worker() { [native code] } XMLDocument: XMLDocument() { [native code] } XMLHttpRequest: XMLHttpRequest() { [native code] } XMLHttpRequestEventTarget: XMLHttpRequestEventTarget() { [native code] } XMLHttpRequestProgressEvent: XMLHttpRequestProgressEvent() { [native code] } XMLHttpRequestUpload: XMLHttpRequestUpload() { [native code] } XMLSerializer: XMLSerializer() { [native code] } XPathEvaluator: XPathEvaluator() { [native code] } XPathExpression: XPathExpression() { [native code] } XPathResult: XPathResult() { [native code] } XSLTProcessor: XSLTProcessor() { [native code] } applicationCache: ApplicationCache caches: CacheStorage chrome: Object clientInformation: Navigator console: Console crypto: Crypto decodeURI: decodeURI() { [native code] } decodeURIComponent: decodeURIComponent() { [native code] } document: document encodeURI: encodeURI() { [native code] } encodeURIComponent: encodeURIComponent() { [native code] } escape: escape() { [native code] } eval: eval() { [native code] } external: Object frames: Window history: History indexedDB: IDBFactory isFinite: isFinite() { [native code] } isNaN: isNaN() { [native code] } localStorage: Storage location: Location locationbar: BarProp menubar: BarProp navigator: Navigator parent: Window parseFloat: parseFloat() { [native code] } parseInt: parseInt() { [native code] } performance: Performance personalbar: BarProp screen: Object scrollbars: BarProp self: Window sessionStorage: Storage speechSynthesis: SpeechSynthesis statusbar: BarProp styleMedia: StyleMedia toolbar: BarProp top: Window unescape: unescape() { [native code] } webkitAudioContext: AudioContext() { [native code] } webkitIDBCursor: IDBCursor() { [native code] } webkitIDBDatabase: IDBDatabase() { [native code] } webkitIDBFactory: IDBFactory() { [native code] } webkitIDBIndex: IDBIndex() { [native code] } webkitIDBKeyRange: IDBKeyRange() { [native code] } webkitIDBObjectStore: IDBObjectStore() { [native code] } webkitIDBRequest: IDBRequest() { [native code] } webkitIDBTransaction: IDBTransaction() { [native code] } webkitIndexedDB: IDBFactory webkitMediaStream: MediaStream() { [native code] } webkitOfflineAudioContext: OfflineAudioContext() { [native code] } webkitRTCPeerConnection: RTCPeerConnection() { [native code] } webkitSpeechGrammar: SpeechGrammar() { [native code] } webkitSpeechGrammarList: SpeechGrammarList() { [native code] } webkitSpeechRecognition: SpeechRecognition() { [native code] } webkitSpeechRecognitionError: SpeechRecognitionError() { [native code] } webkitSpeechRecognitionEvent: SpeechRecognitionEvent() { [native code] } webkitStorageInfo: DeprecatedStorageInfo webkitURL: URL() { [native code] } window: Window __proto__: Window Infinity: Infinity NaN: NaN closed: false defaultStatus: "" devicePixelRatio: 1 event: undefined frameElement: null innerHeight: 881 innerWidth: 471 name: "" offscreenBuffering: true opener: null outerHeight: 881 outerWidth: 1001 pageXOffset: 0 pageYOffset: 0 screenLeft: 642 screenTop: 194 screenX: 642 screenY: 194 scrollX: 0 scrollY: 0 status: "" undefined: undefined name: "AnalyserNode" prototype: AnalyserNode __proto__: AudioNode() { [native code] } name: "AnimationEvent" prototype: AnimationEvent __proto__: Event() { [native code] } CHECKING: 2 DOWNLOADING: 3 IDLE: 1 OBSOLETE: 5 UNCACHED: 0 UPDATEREADY: 4 name: "ApplicationCache" prototype: ApplicationCache __proto__: EventTarget() { [native code] } name: "ApplicationCacheErrorEvent" prototype: ApplicationCacheErrorEvent isArray: isArray() { [native code] } name: "Array" prototype: Array[0] unobserve: unobserve() { [native code] } isView: isView() { [native code] } name: "ArrayBuffer" prototype: ArrayBuffer HTMLSourceElement: HTMLSourceElement() { [native code] } seal: seal() { [native code] } name: "seal" setPrototypeOf: setPrototypeOf() { [native code] } name: "setPrototypeOf" name: "unobserve" name: "hasOwnProperty" name: "isPrototypeOf" name: "propertyIsEnumerable" name: "toLocaleString" name: "valueOf" name: "__proto__" anchors: HTMLCollection[0] applets: HTMLCollection[0] body: body characterSet: "windows-1252" charset: "windows-1252" compatMode: "CSS1Compat" contentType: "text/html" cookie: "" currentScript: null defaultCharset: "GBK" defaultView: Window designMode: "off" doctype: <!DOCTYPE html> documentElement: html documentURI: "file:///M:/DADET/PROGS/menu%20vertic_horiz.html" domain: "" embeds: HTMLCollection[0] fgColor: "" firstChild: <!DOCTYPE html> firstElementChild: html fonts: FontFaceSet forms: HTMLCollection[0] head: head images: HTMLCollection[0] implementation: DOMImplementation inputEncoding: "windows-1252" lastChild: html lastElementChild: html lastModified: "11/07/2017 09:05:50" linkColor: "" links: HTMLCollection[4] nodeName: "#document" nodeType: 9 onpointerlockchange: null onpointerlockerror: null onreadystatechange: null onselectionchange: null origin: "null" ownerDocument: null plugins: HTMLCollection[0] pointerLockElement: null preferredStylesheetSet: null readyState: "complete" referrer: "" rootElement: null scripts: HTMLCollection[0] selectedStylesheetSet: null styleSheets: StyleSheetList textContent: null title: "My first styled page" visibilityState: "visible" vlinkColor: "" webkitCurrentFullScreenElement: null webkitFullscreenElement: null webkitFullscreenEnabled: true webkitHidden: false webkitIsFullScreen: false webkitVisibilityState: "visible" xmlEncoding: null xmlStandalone: false xmlVersion: null __proto__: HTMLDocument charset: "" childElementCount: 0 children: HTMLCollection[0] clientHeight: 0 clientWidth: 0 coords: "" download: "" draggable: true firstElementChild: null hash: "" host: "" hostname: "" href: "file:///M:/DADET/PROGS/index.html" hreflang: "" innerHTML: "Home page" lastElementChild: null localName: "a" nodeName: "A" offsetHeight: 19 offsetLeft: 5 offsetTop: 13 offsetWidth: 82 origin: "file://" outerHTML: "<a href="index.html">Home page</a>" password: "" pathname: "/M:/DADET/PROGS/index.html" ping: "" port: "" protocol: "file:" rel: "" rev: "" scrollHeight: 0 scrollWidth: 0 search: "" shape: "" tabIndex: 0 tagName: "A" target: "" text: "Home page" textContent: "Home page" username: "" __proto__: HTMLAnchorElement baseURI: (...) childNodes: (...) constructor: Text() { [native code] } data: (...) firstChild: (...) getDestinationInsertionPoints: getDestinationInsertionPoints() { [native code] } lastChild: (...) length: (...) localName: (...) namespaceURI: (...) nextElementSibling: (...) nextSibling: (...) nodeName: (...) nodeType: (...) nodeValue: (...) ownerDocument: (...) parentElement: (...) parentNode: (...) previousElementSibling: (...) previousSibling: (...) splitText: splitText() { [native code] } textContent: (...) wholeText: (...) get wholeText: () { [native code] } __proto__: CharacterData innerHTML: "<a href="musings.html">Musings</a>?" innerText: "Musings" offsetTop: 45 outerHTML: "<li><a href="musings.html">Musings</a>?</li>" outerText: "Musings" previousElementSibling: li previousSibling: li textContent: "Musings?" 0: a 1: text textContent: "Links?" 1: h1 align: "" clientHeight: 74 clientWidth: 279 innerHTML: "My first styled page" innerText: "My first styled page" localName: "h1" nextElementSibling: p nodeName: "H1" offsetHeight: 74 offsetLeft: 184 offsetTop: 21 offsetWidth: 279 outerHTML: "<h1>My first styled page</h1>" outerText: "My first styled page" previousElementSibling: ul.navbar scrollHeight: 74 scrollWidth: 279 tagName: "H1" textContent: "My first styled page" __proto__: HTMLHeadingElement 2: p clientHeight: 19 innerHTML: "Welcome to my styled page!?" innerText: "Welcome to my styled page!" localName: "p" nextSibling: p nodeName: "P" offsetTop: 117 outerHTML: "<p>Welcome to my styled page!?</p>" outerText: "Welcome to my styled page!" previousElementSibling: h1 scrollHeight: 19 tagName: "P" textContent: "Welcome to my styled page!?" __proto__: HTMLParagraphElement 3: p clientHeight: 57 innerHTML: "It lacks images, but at least it has style.?And it has links, even if they don't go?anywhere…?" innerText: "It lacks images, but at least it has style. And it has links, even if they don't go anywhere…" offsetHeight: 57 offsetTop: 152 outerHTML: "<p>It lacks images, but at least it has style.?And it has links, even if they don't go?anywhere…?</p>" outerText: "It lacks images, but at least it has style. And it has links, even if they don't go anywhere…" previousElementSibling: p previousSibling: p scrollHeight: 57 textContent: "It lacks images, but at least it has style.?And it has links, even if they don't go?anywhere…?" 4: p childNodes: NodeList[3] clientHeight: 38 innerHTML: "There should be more here, but I don't know?what yet.?<!-- Sign and date the page, it's only polite! ->?" innerText: "There should be more here, but I don't know what yet." nextElementSibling: address nextSibling: address offsetHeight: 38 offsetTop: 225 outerHTML: "<p>There should be more here, but I don't know?what yet.?<!-- Sign and date the page, it's only polite! ->?</p>" outerText: "There should be more here, but I don't know what yet." scrollHeight: 38 textContent: "There should be more here, but I don't know?what yet.??" 5: address clientHeight: 54 clientTop: 1 firstElementChild: br innerHTML: "Made 5 April 2004<br>?by myself." innerText: "Made 5 April 2004?by myself." lastElementChild: br localName: "address" nodeName: "ADDRESS" offsetHeight: 55 offsetTop: 279 outerHTML: "<address>Made 5 April 2004<br>?by myself.</address>" outerText: "Made 5 April 2004?by myself." scrollHeight: 54 tagName: "ADDRESS" textContent: "Made 5 April 2004?by myself." __proto__: HTMLElement length: 6 constructor: HTMLCollection() { [native code] } namedItem: namedItem() { [native code] } clientWidth: 455 nextSibling: comment offsetWidth: 455 scrollWidth: 471 6: ul.navbar 7: li 8: a 9: li 10: a href: "file:///M:/DADET/PROGS/musings.html" innerHTML: "Musings" offsetTop: 50 offsetWidth: 61 outerHTML: "<a href="musings.html">Musings</a>" pathname: "/M:/DADET/PROGS/musings.html" text: "Musings" textContent: "Musings" 11: li innerHTML: "<a href="town.html">My town</a>?" innerText: "My town" offsetTop: 81 outerHTML: "<li><a href="town.html">My town</a>?</li>" outerText: "My town" textContent: "My town?" 12: a href: "file:///M:/DADET/PROGS/town.html" innerHTML: "My town" offsetTop: 86 offsetWidth: 63 outerHTML: "<a href="town.html">My town</a>" pathname: "/M:/DADET/PROGS/town.html" text: "My town" textContent: "My town" 13: li 14: a href: "file:///M:/DADET/PROGS/links.html" innerHTML: "Links" offsetTop: 123 offsetWidth: 41 outerHTML: "<a href="links.html">Links</a>" pathname: "/M:/DADET/PROGS/links.html" text: "Links" textContent: "Links" 15: h1 16: p 17: p 18: p 19: address 20: br clear: "" innerHTML: "" innerText: "" localName: "br" nodeName: "BR" offsetHeight: 0 offsetWidth: 0 outerHTML: "<br>" outerText: "" parentElement: address parentNode: address tagName: "BR" textContent: "" __proto__: HTMLBRElement length: 21 __proto__: HTMLAllCollection constructor: HTMLAllCollection() { [native code] } innerWidth: 443 lastModified: "11/07/2017 08:55:55" HTMLBodyElement aLink: (...) get aLink: () { [native code] } set aLink: () { [native code] } accessKey: (...) attributes: (...) background: (...) get background: () { [native code] } set background: () { [native code] } bgColor: (...) get bgColor: () { [native code] } set bgColor: () { [native code] } childElementCount: (...) children: (...) classList: (...) className: (...) clientHeight: (...) clientLeft: (...) clientTop: (...) clientWidth: (...) constructor: HTMLBodyElement() { [native code] } contentEditable: (...) dataset: (...) dir: (...) draggable: (...) firstElementChild: (...) hidden: (...) id: (...) innerHTML: (...) innerText: (...) isContentEditable: (...) lang: (...) lastElementChild: (...) link: (...) get link: () { [native code] } set link: () { [native code] } offsetHeight: (...) offsetLeft: (...) offsetParent: (...) offsetTop: (...) offsetWidth: (...) onabort: (...) onbeforecopy: (...) onbeforecut: (...) onbeforepaste: (...) onbeforeunload: (...) get onbeforeunload: () { [native code] } set onbeforeunload: () { [native code] } onblur: (...) get onblur: () { [native code] } set onblur: () { [native code] } oncancel: (...) oncanplay: (...) oncanplaythrough: (...) onchange: (...) onclick: (...) onclose: (...) oncontextmenu: (...) oncopy: (...) oncuechange: (...) oncut: (...) ondblclick: (...) ondrag: (...) ondragend: (...) ondragenter: (...) ondragleave: (...) ondragover: (...) ondragstart: (...) ondrop: (...) ondurationchange: (...) onemptied: (...) onended: (...) onerror: (...) get onerror: () { [native code] } set onerror: () { [native code] } onfocus: (...) get onfocus: () { [native code] } set onfocus: () { [native code] } onhashchange: (...) get onhashchange: () { [native code] } set onhashchange: () { [native code] } oninput: (...) oninvalid: (...) onkeydown: (...) onkeypress: (...) onkeyup: (...) onlanguagechange: (...) get onlanguagechange: () { [native code] } set onlanguagechange: () { [native code] } onload: (...) get onload: () { [native code] } set onload: () { [native code] } onloadeddata: (...) onloadedmetadata: (...) onloadstart: (...) onmessage: (...) get onmessage: () { [native code] } set onmessage: () { [native code] } onmousedown: (...) onmouseenter: (...) onmouseleave: (...) onmousemove: (...) onmouseout: (...) onmouseover: (...) onmouseup: (...) onmousewheel: (...) onoffline: (...) get onoffline: () { [native code] } set onoffline: () { [native code] } ononline: (...) get ononline: () { [native code] } set ononline: () { [native code] } onpagehide: (...) get onpagehide: () { [native code] } set onpagehide: () { [native code] } onpageshow: (...) get onpageshow: () { [native code] } set onpageshow: () { [native code] } onpaste: (...) onpause: (...) onplay: (...) onplaying: (...) onpopstate: (...) get onpopstate: () { [native code] } set onpopstate: () { [native code] } onprogress: (...) onratechange: (...) onreset: (...) onresize: (...) get onresize: () { [native code] } set onresize: () { [native code] } onscroll: (...) get onscroll: () { [native code] } set onscroll: () { [native code] } onsearch: (...) onseeked: (...) onseeking: (...) onselect: (...) onselectstart: (...) onshow: (...) onstalled: (...) onstorage: (...) get onstorage: () { [native code] } set onstorage: () { [native code] } onsubmit: (...) onsuspend: (...) ontimeupdate: (...) ontoggle: (...) onunload: (...) get onunload: () { [native code] } set onunload: () { [native code] } onvolumechange: (...) onwaiting: (...) onwebkitfullscreenchange: (...) onwebkitfullscreenerror: (...) onwheel: (...) outerHTML: (...) outerText: (...) prefix: (...) scrollHeight: (...) scrollLeft: (...) scrollTop: (...) scrollWidth: (...) shadowRoot: (...) spellcheck: (...) style: (...) tabIndex: (...) tagName: (...) text: (...) get text: () { [native code] } set text: () { [native code] } title: (...) translate: (...) vLink: (...) get vLink: () { [native code] } set vLink: () { [native code] } webkitdropzone: (...) HTMLElement get accessKey: () { [native code] } set accessKey: () { [native code] } click: click() { [native code] } constructor: HTMLElement() { [native code] } get contentEditable: () { [native code] } set contentEditable: () { [native code] } get dir: () { [native code] } set dir: () { [native code] } get draggable: () { [native code] } set draggable: () { [native code] } get hidden: () { [native code] } set hidden: () { [native code] } get innerText: () { [native code] } set innerText: () { [native code] } get isContentEditable: () { [native code] } get lang: () { [native code] } set lang: () { [native code] } get offsetHeight: () { [native code] } get offsetLeft: () { [native code] } get offsetParent: () { [native code] } get offsetTop: () { [native code] } get offsetWidth: () { [native code] } get onabort: () { [native code] } set onabort: () { [native code] } get oncancel: () { [native code] } set oncancel: () { [native code] } get oncanplay: () { [native code] } set oncanplay: () { [native code] } get oncanplaythrough: () { [native code] } set oncanplaythrough: () { [native code] } get onchange: () { [native code] } set onchange: () { [native code] } get onclick: () { [native code] } set onclick: () { [native code] } get onclose: () { [native code] } set onclose: () { [native code] } get oncontextmenu: () { [native code] } set oncontextmenu: () { [native code] } get oncuechange: () { [native code] } set oncuechange: () { [native code] } get ondblclick: () { [native code] } set ondblclick: () { [native code] } get ondrag: () { [native code] } set ondrag: () { [native code] } get ondragend: () { [native code] } set ondragend: () { [native code] } get ondragenter: () { [native code] } set ondragenter: () { [native code] } get ondragleave: () { [native code] } set ondragleave: () { [native code] } get ondragover: () { [native code] } set ondragover: () { [native code] } get ondragstart: () { [native code] } set ondragstart: () { [native code] } get ondrop: () { [native code] } set ondrop: () { [native code] } get ondurationchange: () { [native code] } set ondurationchange: () { [native code] } get onemptied: () { [native code] } set onemptied: () { [native code] } get onended: () { [native code] } set onended: () { [native code] } get oninput: () { [native code] } set oninput: () { [native code] } get oninvalid: () { [native code] } set oninvalid: () { [native code] } get onkeydown: () { [native code] } set onkeydown: () { [native code] } get onkeypress: () { [native code] } set onkeypress: () { [native code] } get onkeyup: () { [native code] } set onkeyup: () { [native code] } get onloadeddata: () { [native code] } set onloadeddata: () { [native code] } get onloadedmetadata: () { [native code] } set onloadedmetadata: () { [native code] } get onloadstart: () { [native code] } set onloadstart: () { [native code] } get onmousedown: () { [native code] } set onmousedown: () { [native code] } get onmouseenter: () { [native code] } set onmouseenter: () { [native code] } get onmouseleave: () { [native code] } set onmouseleave: () { [native code] } get onmousemove: () { [native code] } set onmousemove: () { [native code] } get onmouseout: () { [native code] } set onmouseout: () { [native code] } get onmouseover: () { [native code] } set onmouseover: () { [native code] } get onmouseup: () { [native code] } set onmouseup: () { [native code] } get onmousewheel: () { [native code] } set onmousewheel: () { [native code] } get onpause: () { [native code] } set onpause: () { [native code] } get onplay: () { [native code] } set onplay: () { [native code] } get onplaying: () { [native code] } set onplaying: () { [native code] } get onprogress: () { [native code] } set onprogress: () { [native code] } get onratechange: () { [native code] } set onratechange: () { [native code] } get onreset: () { [native code] } set onreset: () { [native code] } get onseeked: () { [native code] } set onseeked: () { [native code] } get onseeking: () { [native code] } set onseeking: () { [native code] } get onselect: () { [native code] } set onselect: () { [native code] } get onshow: () { [native code] } set onshow: () { [native code] } get onstalled: () { [native code] } set onstalled: () { [native code] } get onsubmit: () { [native code] } set onsubmit: () { [native code] } get onsuspend: () { [native code] } set onsuspend: () { [native code] } get ontimeupdate: () { [native code] } set ontimeupdate: () { [native code] } get ontoggle: () { [native code] } set ontoggle: () { [native code] } get onvolumechange: () { [native code] } set onvolumechange: () { [native code] } get onwaiting: () { [native code] } set onwaiting: () { [native code] } get outerText: () { [native code] } set outerText: () { [native code] } get spellcheck: () { [native code] } set spellcheck: () { [native code] } get tabIndex: () { [native code] } set tabIndex: () { [native code] } get title: () { [native code] } set title: () { [native code] } get translate: () { [native code] } set translate: () { [native code] } get webkitdropzone: () { [native code] } set webkitdropzone: () { [native code] } __proto__: Element Element animate: animate() { [native code] } get attributes: () { [native code] } blur: blur() { [native code] } get childElementCount: () { [native code] } get children: () { [native code] } get classList: () { [native code] } get className: () { [native code] } set className: () { [native code] } get clientHeight: () { [native code] } get clientLeft: () { [native code] } get clientTop: () { [native code] } get clientWidth: () { [native code] } closest: closest() { [native code] } constructor: Element() { [native code] } createShadowRoot: createShadowRoot() { [native code] } get dataset: () { [native code] } get firstElementChild: () { [native code] } focus: focus() { [native code] } getAttribute: getAttribute() { [native code] } getAttributeNS: getAttributeNS() { [native code] } getAttributeNode: getAttributeNode() { [native code] } getAttributeNodeNS: getAttributeNodeNS() { [native code] } getBoundingClientRect: getBoundingClientRect() { [native code] } getClientRects: getClientRects() { [native code] } getElementsByClassName: getElementsByClassName() { [native code] } getElementsByTagName: getElementsByTagName() { [native code] } getElementsByTagNameNS: getElementsByTagNameNS() { [native code] } hasAttribute: hasAttribute() { [native code] } hasAttributeNS: hasAttributeNS() { [native code] } hasAttributes: hasAttributes() { [native code] } get id: () { [native code] } set id: () { [native code] } get innerHTML: () { [native code] } set innerHTML: () { [native code] } insertAdjacentElement: insertAdjacentElement() { [native code] } insertAdjacentHTML: insertAdjacentHTML() { [native code] } insertAdjacentText: insertAdjacentText() { [native code] } get lastElementChild: () { [native code] } get localName: () { [native code] } matches: matches() { [native code] } get namespaceURI: () { [native code] } get nextElementSibling: () { [native code] } get onbeforecopy: () { [native code] } set onbeforecopy: () { [native code] } get onbeforecut: () { [native code] } set onbeforecut: () { [native code] } get onbeforepaste: () { [native code] } set onbeforepaste: () { [native code] } get oncopy: () { [native code] } set oncopy: () { [native code] } get oncut: () { [native code] } set oncut: () { [native code] } get onpaste: () { [native code] } set onpaste: () { [native code] } get onsearch: () { [native code] } set onsearch: () { [native code] } get onselectstart: () { [native code] } set onselectstart: () { [native code] } get onwebkitfullscreenchange: () { [native code] } set onwebkitfullscreenchange: () { [native code] } get onwebkitfullscreenerror: () { [native code] } set onwebkitfullscreenerror: () { [native code] } get onwheel: () { [native code] } set onwheel: () { [native code] } get outerHTML: () { [native code] } set outerHTML: () { [native code] } get prefix: () { [native code] } get previousElementSibling: () { [native code] } querySelector: querySelector() { [native code] } querySelectorAll: querySelectorAll() { [native code] } remove: remove() { [native code] } removeAttribute: removeAttribute() { [native code] } removeAttributeNS: removeAttributeNS() { [native code] } removeAttributeNode: removeAttributeNode() { [native code] } requestPointerLock: requestPointerLock() { [native code] } get scrollHeight: () { [native code] } scrollIntoView: scrollIntoView() { [native code] } scrollIntoViewIfNeeded: scrollIntoViewIfNeeded() { [native code] } get scrollLeft: () { [native code] } set scrollLeft: () { [native code] } get scrollTop: () { [native code] } set scrollTop: () { [native code] } get scrollWidth: () { [native code] } setAttribute: setAttribute() { [native code] } setAttributeNS: setAttributeNS() { [native code] } setAttributeNode: setAttributeNode() { [native code] } setAttributeNodeNS: setAttributeNodeNS() { [native code] } get shadowRoot: () { [native code] } get style: () { [native code] } get tagName: () { [native code] } webkitMatchesSelector: webkitMatchesSelector() { [native code] } webkitRequestFullScreen: webkitRequestFullScreen() { [native code] } __proto__: Node Node ATTRIBUTE_NODE: 2 CDATA_SECTION_NODE: 4 COMMENT_NODE: 8 DOCUMENT_FRAGMENT_NODE: 11 DOCUMENT_NODE: 9 DOCUMENT_POSITION_CONTAINED_BY: 16 DOCUMENT_POSITION_CONTAINS: 8 DOCUMENT_POSITION_DISCONNECTED: 1 DOCUMENT_POSITION_FOLLOWING: 4 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32 DOCUMENT_POSITION_PRECEDING: 2 DOCUMENT_TYPE_NODE: 10 ELEMENT_NODE: 1 ENTITY_NODE: 6 ENTITY_REFERENCE_NODE: 5 NOTATION_NODE: 12 PROCESSING_INSTRUCTION_NODE: 7 TEXT_NODE: 3 appendChild: appendChild() { [native code] } get baseURI: () { [native code] } get childNodes: () { [native code] } cloneNode: cloneNode() { [native code] } compareDocumentPosition: compareDocumentPosition() { [native code] } constructor: Node() { [native code] } contains: contains() { [native code] } get firstChild: () { [native code] } hasChildNodes: hasChildNodes() { [native code] } insertBefore: insertBefore() { [native code] } isDefaultNamespace: isDefaultNamespace() { [native code] } isEqualNode: isEqualNode() { [native code] } isSameNode: isSameNode() { [native code] } get lastChild: () { [native code] } lookupNamespaceURI: lookupNamespaceURI() { [native code] } lookupPrefix: lookupPrefix() { [native code] } get nextSibling: () { [native code] } get nodeName: () { [native code] } get nodeType: () { [native code] } get nodeValue: () { [native code] } set nodeValue: () { [native code] } normalize: normalize() { [native code] } get ownerDocument: () { [native code] } get parentElement: () { [native code] } get parentNode: () { [native code] } get previousSibling: () { [native code] } removeChild: removeChild() { [native code] } replaceChild: replaceChild() { [native code] } get textContent: () { [native code] } set textContent: () { [native code] } __proto__: EventTarget EventTarget addEventListener: addEventListener() { [native code] } constructor: EventTarget() { [native code] } dispatchEvent: dispatchEvent() { [native code] } removeEventListener: removeEventListener() { [native code] } Object YANDEX 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. background-color:rgb(0, 7, 136); border-bottom-color:rgb(128, 128, 128); border-bottom-width:1px; border-collapse:separate; border-left-color:rgb(128, 128, 128); border-left-width:1px; border-right-color:rgb(128, 128, 128); border-right-width:1px; border-top-color:rgb(128, 128, 128); border-top-width:1px; color:rgb(0, 0, 0); display:table; 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. font-size:16px; font-style:normal; font-variant-caps:normal; font-variant-ligatures:normal; font-weight:normal; height:178px; line-height:normal; text-align:start; white-space:normal; width:248px; 1. 250pxelement.style 23. -webkit-border-horizontal-spacing:0px; 24. -webkit-border-vertical-spacing:0px;