Comparer les deux écritures !
<body>
<h1>top level heading</h1>
<section>
<h1>(intended) 2nd level heading</h1>
<section>
<h1>(intended) 3nd level heading</h1>
</section>
</section>
</body>
<body>
<h1>top level heading</h1>
<section>
<h2>(intended) 2nd level heading</h2>
<section>
<h3>(intended) 3nd level heading</h3>
</section>
</section>
</body>
Les titres traduisent l'organisation du contenu d'une page Web ou d'un écran. Une bonne structure de titres permet de scanner rapidement un document Web et d'en comprendre la structure.
Les titres permettent également aux utilisateurs de lecteurs d'écran et autres utilisateurs de technologies d'assistance de naviguer dans les pages Web et les écrans.
Il existe encore une certaine confusion et une certaine ambiguïté quant à l'utilisation correcte des titres, notamment en matière d'accessibilité.
C'est un sujet délicat pour en savoir plus : https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/
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 !
Pour ma part, j'ai longtemps utilisé jsbin
J'ai également intégré codeMirror pour proposer un éditeur en ligne myEditor.
J'ai également intégré codeMirror pour proposer un éditeur en ligne myEditor.
Web component : sa propre balise
Est-il possible de définir nos propres balises ?
Voici un exemple :
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;
}
})
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.
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
DevTools !
Use workspaces to persist changes made in DevTools to your local resources.
DevTools de Chrome propose de ne pas quitter l'environnement de travail. En particulier nous pouvons enregistrer (qq limitations existent) nos modifications ; autrement dit le fichier source sera modifié sans passer par un éditeur !
lire l'article
input
- Le pattern .*[\d] vérifie les motifs
- 2ab : (* = 0 ; d = 2)
- a2b : (* = 1)
- ab2 : (* = 2)
- abc : (erreur)
- Le pattern .*[a-z] vérifie les motifs
- 2ab : (* = 1)
- a2b : (* = 0)
- ab2 : (* = 0)
- 222 : (erreur)
- Autres pattern
- (?=.{8,}) : au - 8 Entrées
- (?=.*[A-Z]) : au - 1 Majuscule
- (?=.*[\W]) : au - 1 Caractère Spécial/li>
Spécification des styles
Découvrons pourquoi la taille des H1 dépend du degré d’imbrication.
Commençons par trouver les feuilles de styles par défaut :
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
Pour Chrome :
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
Pour Chrome :
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Balise template !
Can i use : template
En 2008, J. Resig écrivait un post JavaScript Micro-Templating.
Pour résumer, on écrit un Template sous la forme
- <script type="text/html" id="user_tmpl">
- <% for ( var i = 0; i < users.length; i++ ) { %>
- <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
- <% } %>
- </script>
Inscription à :
Articles (Atom)