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;