Pages

TD 2 : Les balises de base





Visual studio Emmet : Résumé


Editeur Visual studio code

J'aime être un fainéant !

Et, oui, mais pour cela, il me faut des outils à la hauteur de la situation !


Introduction

vidéo

Visual studio

VS tire sa force de IntelliSense, nous verrons cela plus tard.

Pour le moment découvrons quelques "fainéantise"

Emmet

Créer un nouveau fichier avec l'extension .html.

Dans la fenêtre d'édition qui s'ouvre, tapez uniquement :  !  (le point d'exclamation)
Votre curseur collé à ! tapez  la touche tab ⇆

Le corps d'un fichier HTML apparaît, allez dans la balise <body> puis écrire le code
ul>.item{ liste $}*3
Votre curseur collé à 3 tapez  la touche tab ⇆


 En action




Multi-Cursor Editing


C'est super pratique. Votre curseur clignote à un endroit, pressez la touche Alt, allez sur un autre endroit en maintenant la touche ALT pressée puis cliquez sur votre souris 🐭 ou touchpad : vous avez deux curseurs !

La documentation officielle :
To edit multiple instances of text within different sections of a document, you can use multi-cursor editing. This allows multiple cursors to be placed in different spots so text can be added, modified, or deleted.
To engage multi-cursor editing, press the Alt key (or Option key on a Mac) and use the mouse to place cursors throughout the document. Every click creates a cursor resulting in multiple cursors.

MultiCursorEditing



Emmet : A fond la forme !

 En TD, j'ai écrit une drôle de ligne de code pour créer mon HTML :

main>section*2>h2+ul>li*2>article>h3+p⭾

> signifie contient
+ signifie avec
* signe nombre
⭾ la touche tab

Nous verrons la signification très précise de ces sigles lorsque nous verrons les sélecteurs en CSS.

En action !





En savoit plus : Le TOP 5 des balises

 

Voici la liste des balises classées par semantique https://allthetags.com/

Découvrez la structure d'une page HTML dans la vidéo suivante :

Cours 2 : Semantique !

HTML est un langage. Il a donc une sémantique et une syntaxe !

https://www.w3.org/TR/html53/semantic... https://developer.mozilla.org/en-US/d... https://startbootstrap.com/previews/c...


Résumé : Vidéos

https://sites.google.com/view/duponthtml/s%C3%A9mantique

Le distanciel !

TD 1 : HTML

 

Cours un éditeur : 

"les éditeurs 👉(lien )"


 TD1 éditeur :


Emmet

Help syntaxe

Should You Learn Bootstrap in 2020 ?

Cours

Vidéo relaxing times

Les éditeurs en ligne :

Vous pourrez découvrir un autre site : http://dupontcours.free.fr/

J'ai créé un éditeur en ligne avec un outil codemirror : http://dupontcours.free.fr/codemirror-3.11/demo/editor.html


Et j'ai développé mon propre éditeur : http://duponthtml.blogspot.com/p/editeur.html



Un coin détente vous attend également :

http://dupontcours.free.fr/HTML5/




Organisation :

Nous utiliserons un grand nombre de sites hors e-campus.


Voici leur lien.

Sites

liens

Notre blog

http://dupontl1.blogspot.com/

Cours

Vidéos

Cours

HTML

CSS

DOM

Divers

TD

Quizz

Test


Mes attentes 

Autonomie

Programme

Semaine 1-3/4

Have fun ! hack google


Injecter ce code dans la console : 

const newLogo=document.createElement('img')

, oldLogo = document.querySelector(".lnXdpd");

newLogo.src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg";

oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Inscription à : Articles (Atom)