escape

code

/tabs.html

https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html

VS extension : open-in-browser.

Pour installer dans VisualStudio l'extension open-in-browser à partir de la ligne de commande, utilisez le format suivant.

code --install-extension techer.open-in-browser

Rendez vous dans l'éditeur

key	command
Alt + B	open in default browser
Shift + Alt + B	open in specified browser

Directement dans le fichier .html, bouton de droite

Les éditeurs en ligne

Voici une liste d'éditeurs en ligne !

• JSFiddle
• StackBlitz
• Repl.it
• CodePen

Pour ma part, j'ai longtemps utilisé jsbin

J'ai également intégré codeMirror pour proposer un éditeur en ligne myEditor.

Microsoft

lien

Intégration d'une vidéo

Web component : sa propre balise

Est-il possible de définir nos propres balises ?

Voici un exemple :

HTML

<my-paragraph> ajouter ou supprimer des mots </my-paragraph>

js

customElements.define('my-paragraph',
  class extends HTMLElement {
    constructor() {
      super();

      this.template =`
                 <style>
  p:after {
  content: " " attr(data-words);
  color: red;
}
  </style>
   <p contenteditable data-words=""></p>`;

      //recopie le texte
      this.init();

      setInterval(_ => {
        const count = this.countWords(this.shadowRoot);
        this.shadowRoot.querySelector("p").dataset.words = count;
      }, 2000);
    }

    countWords(node) {
      const text = node.querySelector("p").textContent;
      return text.trim().split(/\s+/g).length;
    }

    init() {
        const shadowRoot = this.attachShadow({
          mode: 'open'
        })
        .innerHTML = this.template;
        this.shadowRoot.querySelector("p").innerHTML = this.innerHTML;
    }


  })

? h1

Etudier le code HTML suivant


Nous pouvons constater que la numérotation des chapitres à été faite à la main : CE QU'IL FAUT EVIDEMMENT EVITER.

Le code CSS permet de résoudre ce problème
body {
    counter-reset: h1 ;
}

h1:after {
    content: "." counter(h1);
    counter-increment: h1 ;
}

lire article

Tout semble parfait maintenant.

Cependant la lecture de l'article suivant pose un autre problème : celui de la structure du document.

Dans cet article, il est important de comprendre : the sections determines the outline, not the heading rank of the sections. 

On retiendra

Il est intéressant de comprendre l’intérêt de l'utilisation des sections (ou article) dans la strucutre du document. Comparez les deux exemples.

Subscribe to the Google Developers channel

Subscribe to the Google Developers channel here: http://goo.gl/mQyv5L

GOOGLE

 Notez que :

document.registerElement() is deprecated in favor of customElements.define().