Petite synthèse
de choses vues en cours

Raccourcis généraux

• ctrl + / → commenter/décommenter la ligne ou la sélection (en html, en js, en css
  
• ctrl + shift + / → commentaire multi-lignes (en js ou en css)

Sélections multiples

• click puis ctrl maintenu puis click puis click, etc → curseur multiple, pour écrire à plusieurs endroits en même temps
• sélection (ou double-click sur un mot) puis ctrl maintenu puis sélection, etc → sélection multiple pour copier/coller multiple ou écrire à plusieurs endroits en même temps
• sélection puis ctrl+D puis ctrl+D puis ctrl+D, etc → sélection multiple auto de toutes les occurences de la sélection dans la page
• sélection puis ctrl + F → rechercher la sélection dans la page (F pour "find")

Raccourcis dans un document HTML

• p puis tab → écrit à votre place <p></p>
• img puis tab → écrit <img src="">
  (et ça marche pour toutes les balises html : img, a, h1, etc).
• p puis ctrl + espace → propose des variantes, qui deviennent le réglage par défaut associé à la touche tab
• lorem puis tab → génère du faux texte lorem ipsum...
• p.truc puis tab → écrit <p class="truc"></p>
• p#truc puis tab → écrit <p id="truc"></p>
 
• p.truc.bidule puis tab → écrit <p class="truc bidule"></p>
• p#truc.bidule puis tab → écrit <p id="truc" class="bidule"></p>
  
  
• Alt + shift + 2 → pour afficher 2 documents l'un à côté de l'autre
• Alt + shift + 1 → pour en afficher 1 seul
• Il existe d'autres options d'affichage dans le menu View > Layout > ...

Ajouter des extensions à Sublime Text

Des balises "block" qui prennent toute la largeur et créent un retour à la ligne :

<h1>Le plus gros titre - h c'est pour "header"</h1>
<h2>Un grand titre</h2>
<h3>Un moins grand titre</h3>
<h4>Un titre encore moins important</h4>
<h5>...</h5>
<h6>...</h6>

<p>Un paragraphe ordinaire.</p>

<ul><!-- ul c'est une "liste à puces" -->
<li>1er élément de la liste</li>
<li>2ème élement de la liste</li>
<li>...</li>
</ul>

<div>Une "division", l'unité visuelle pour mettre en boîte vos contenus</div>

Des balises "inline" sans retour à la ligne, qui prenne seulement la taille du contenu :

<span>comme une div, pour mettre en boîte vos contenus, mais sans retour à la ligne</span>

<!-- ceci est un commentaire html -->

<img src="img/image.png" alt="Une description"> ← c'est une image, placée dans le dossier img/ à la racine du site

<a href="http://etu.gildasp.fr/mpro2022">Ceci est un lien cliquable</a>
<a href="http://etu.gildasp.fr/mpro2022" target="_blank">Pour ouvrir le lien dans un nouvel onglet</a>
<a href="mailto:john@truc.net">Un lien pour envoyer un email</a>

<b>du texte en gras</b>
<i>du texte italique</i>
<u>du texte souligné</u>

Des balises "sémantiques"

Les balises suivantes sont exactement comme des <div>, mais elles ajoutent des indications pour les moteurs de recherche.
Par ailleurs ça vous aide aussi à rendre votre code plus lisible.

• <main> contient l'ensemble de votre page, c'est le bloc principal
• <header> c'est votre entête de page, avec le <h1> du titre principal
• <nav> c'est un menu, en général dans <header> mais pas forcément.
  en théorie dans <nav> on met un <ul> qui contient tous les liens du site dans des <li><a href="...">...</a></li>
• <section> délimite une section de votre page. Vous pouvez avoir une seule section ou plusieurs, suivant le projet.
  chaque section peut avoir un seul <h1>.
• <article> est le plus souvent dans un <section>. Pour un portfolio par exemple, on aura une série d'articles dans une même section.
• <footer> c'est le pied de page, comme le header il peut contenir une liste d'indications et de liens dans un <ul>
• <aside> permet d'indiquer qu'une partie de la page n'a rien à voir avec le reste (un menu annexe, une pub, un truc distinct, quoi)

Toutes ces balise sont optionnelles et dépendent de votre projet, mais la structure "normale" recommandée est la suivante :

Avant de décrire un style, il faut indiquer quel(s) élément(s) on veut cibler.
Plusieurs syntaxes/possibilités co-existent :

Par "balise HTML"

h1 { ... } → va cibler toutes les balises html <h1>...</h1>
p { ... } → va cibler toutes les balises html <p>...</p>
img { ... } → va cibler toutes les images <img>
body { ... } → va cibler tout le document (il n'y a qu'une balise <body>, qui contient toute la page)
etc

Par "classe", avec un . devant le mot

.titre { ... } → va cibler toutes les balises html qui ont la classe "titre"

Côté HTML :  <p class="titre">  et <h1 class="titre">  et <div class="titre">  et <a class="titre">  etc

"titre" est un mot arbitraire que vous inventez, sans espace ni caractère spécial (lettres et tirets seulement).

Par "identifiant", avec un # devant le mot

#titre { ... } → va cibler toutes les balises html qui ont l'identifiant "titre"

Côté HTML : <p id="titre"> ou <h1 id="titre"> ou <div id="titre"> ou <a id="titre"> etc

Attention, un identifiant est UNIQUE, il ne sert qu'une fois, sur une unique balise.
Pour cette raison on le garde pour des cas particuliers, comme les sections qu'on veut différencier.

A noter qu'une fois qu'on a donnée un id à une balise, on peut créer un lien vers cet élément de la page :
<a href="#titre> va mener directement à l'endroit de la page où se trouve l'élément #titre - on appelle ça une ancre HTML.

Composer des phrases avec un espace

Au final on a souvent besoin de faire des phrases pour indiquer des "chemins" vers ce qu'on veut cibler :

h1 img { ... } → cibler les balises <img> qui sont dans une balise <h1>...</h1>

Un espace entre les mots = c'est un chemin, du général vers le particulier (ça se lit à l'envers, on cible le dernier mot de la phrase)

div ul li a { ... } → cibler les balises a, qui sont dans une balise <li>...</li>, elles-mêmes dans une balise <ul>...</ul>, elles-même dans une <div>...</div>
Quelque chose du genre :

<div><ul>
<li>Blabla <a href="#">bla</a> bla bla.</li>
<li>Blabla bla <a href="#">bla</a>.</li>
</ul></div>

On peut combiner les syntaxes balise/classe (c'est pratique, et courant) :

.entete h1 { ... } → les <h1>...</h1> qui sont dans une balise avec la classe "entete" (une div ou autre)
.entete p a { ... } → les liens, dans un paragraphe, dans l'entête (mais pas le lien qui dans un h1 de l'entête, par ex)
.entete p.actif a { ... } → pareil, le lien, mais dans un paragraphe qui a la classe "actif" (dans un menu ça permet par ex de donner un style différent à la page active)

• px → facile, ce sont des pixels
• % → pourcentage de la taille du parent (sa largeur, en général)
• em → proportionnel à la taille de la typo dans la balise ciblé  Bon, cette unité pose des problèmes car elle n'est pas "stable" (1em dans un bloc en 3em, ça fait 3em... c'est proportionnel au parent.)
  Je l'utilise seulement pour les interlignages avec line-spacing, comme ça l'interlignage est proportionnel à la taille de la typo. Pour le reste, privilégiez plutôt :
  
• rem → proportionnel à la font-size indiquée sur html,body, mais stable ensuite dans le document.
  C'est l'unité que je recommande pour régler vos tailles de typo.
• vw → pourcentage de la largeur de la fenêtre (100vw = la largeur de la fenêtre du navigateur)
• vh → pourcentage de la hauteur de la fenêtre (100vh = la hauteur de la fenêtre du navigateur)

Il y en a d'autres, mais celles-ci sont les plus utiles et courantes.

On écrit toujours la valeur et l'unité sans espace, ex : 15px 100% 1.2em 1.2rem 12vw

Entre les crochets on décrit le style de l'élément ciblé :

body {
font-family: Arial;
font-size: 15px;
}

On finit chaque style par un point-virgule (sinon la ligne et la suivante ne seront pas valides).

Quelques grandes familles à connaître, qui sont très bien documentées sur le net (et quand vous tapez le premier mot sublime text vous souffle tous les membres de la famille) :

font-family: 'pix78', Helvetica, Arial;
font-size: 15px;
font-weight:bold; (ou normal, ou 400, 500, 600, 700, etc)

text-align: left; (ou right, center, justify)
text-decoration: underline; (ou none)

color: red; → rouge
color: #FF0000; → rouge (mais en hexadecimal)
color: rgb(255,0,0); → rouge (mais en RGB)
color: rgba(255,0,0,.5); → un rouge à moitié transparent

background: black;
background: url(../img/rayures.gif); → une image de fond, attention à ../ pour remonter d'un niveau par rapport au fichier css dans lequel on écrit...
(Pour caler vos images de fond il y a cet article qui creuse la question) - il y a plein d'options liées au background, cherchez sur le net !

margin (les marges extérieures, l'espace autour de l'élément)

margin-right:10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px;
qu'on peut compacter comme suit : margin:10px; → 10px des 4 côtés

margin:10px 0; → 10px en haut et en bas, 0 sur les 2 côtés
margin:10px 0 15px; → 10px en haut , 0 à droite, 15px en bas, 0 à gauche
margin:10px 0 15px 25px; → 10px en haut , 0 à droite, 15px en bas, 25px à gauche

La règle c'est "dans le sens des aiguilles d'une montre" → "haut - droite - bas - gauche"

padding c'est pareil que margin, mais c'est la marge intérieure.

border (les bordures autour d'un élément), c'est aussi le même principe.
border:solid 1px black; pour une bordure d'1px noir des 4 côtés.
border:none; permet de supprimer la bordure du côté droit.
border-right:none; permet de supprimer la bordure du côté droit seulement.

width: 100%; pour ajuster la largeur d'un bloc
height: 250px; pour ajuster la hauteur (les % marchent mal sur height)

Pour convertir les fichiers .ttf/.otf rendez-vous sur transfonter ou font-squirrel - je recommande plutôt transfonter qui est plus performant et plus permissif (certaines typos ne passeront pas sur font-squirrel).

Glissez vos fichiers, faites convert puis download, et vous obtenez un zip que vous devez ouvrir.

Placez les fichiers .woff/.woff2 dans un dossier fonts/ de votre site.

Il faut maintenant indiquer l'endroit où se trouvent les fichiers .woff/.woff2 dans votre feuille de style, et sous quel nom vous voulez utiliser la typo - les fichiers .woff/.woff2 seuls ne suffisent pas !

Le zip contient aussi un fichier .css, qui contient le code css de déclaration de typo :
@font-face { ... }

Le bloc @font-face c'est donc une "déclaration", où on indique le nom de la typo, et à quels fichiers .woff/.woff2 elle correspond.

2 choix possibles :

• copier-coller le code de la déclaration dans votre feuille de style
• ou bien coller le fichier .css fourni à côté de vos fichiers woff
  Dans ce cas il faut déclarer la nouvelle feuille de style dans votre document HTML, entre <head> et </head> :
  

  <link rel="stylesheet" href="fonts/hk-grotesk.css">

  Attention ! Ce code ne sert à rien dans une feuille de style, c'est bien dans le document HTML que ça se passe...

Dans tous les cas vous obtenez quelque chose du genre :

@font-face {   font-family: 'hk_grotesk'; /* ce nom là est libre, vous pouvez le modifier */   
   src: url('hkgrotesk-regular-webfont.woff2') format('woff2'),
        url('hkgrotesk-regular-webfont.woff') format('woff');   
   font-weight: normal;   
   font-style: normal;
}

Attention ! Vérifiez bien que les fichiers woff sont bien là où vous indiquez qu'ils sont !

C'est l'erreur la plus courante, celle que j'explique sans arrêt !

url('hkgrotesk-regular-webfont.woff2') format('woff2')

→ ça indique au navigateur de chercher le fichier au même endroit que la feuille de style.

En gros ça veut dire que le fichier est à côté de style.css : si vous avez mis le fichier dans fonts/, alors il faut indiquer le bon dossier :

url('../fonts/hkgrotesk-regular-webfont.woff2') format('woff2')

../ sert à remonter d'1 niveau depuis la feuille de style, puis on indique le dossier fonts/.

Le chemin peut changer suivant la façon dont vous décidez d'organiser vos fichiers, mais dans tous les cas on indique le chemin vers les fichiers woff DEPUIS la feuille de style dans laquelle on écrit.

Autre erreur possible :

Si vous déclarez

@font-face { font-family: 'hk_grotesk'; ... }

Pour vous en servir il faudra utiliser exactement le même nom (et je recommande d'ajouter des alternatives pour ne pas vous retrouver avec une Times New Roman en cas de problème...) :

h1 { 
   font-family: 'hk_grotesk', Helvetica, Arial, sans-serif; 
   font-weight: normal; /* parce qu'on l'a déclaré en normal, et qu'un h1 est en bold par défaut... */
}

Et surtout pas :

@font-face { font-family: 'hkgrotesk-regular-webfont'; ... } /* ça c'est le nom du fichier */
@font-face { font-family: 'hk grotesk'; ... } /* sans le tiret */
@font-face { font-family: hk_grotesk; ... } /* sans les guillemets */

etc

(Pfiuuu)

Pour enchaîner des blocs de gauche à droite il y a display:flex
qu'on applique sur le parent :

Et ça agit sur les enfants directs (mais pas sur les enfants des enfants...).

En général display:flex ne va pas suffire, il faut aussi régler au minimum ces options :

• gérer le retour à la ligne : flex-wrap

  Par défaut flex essaye de tout passer sur 1 seule ligne, quitte à écraser les contenus (valeur nowrap).
  La valeur wrap permet de gérer ça :
  
  

• gérer l'alignement horizontal des blocs : justify-content

  Vous pouvez opter pour des marges automatiques avec les valeurs space-between, space-around, ou space-evenly.
  Ou bien choisir de gérer vous-même les marges avec les valeurs flex-start, flex-end ou center :
  
  
  
  Dans ce cas on gère les marges sur les enfants directement :
  

• gérer l'alignement vertical des blocs : align-items

  Et ça c'est vraiment super, car c'est très difficile de gérer l'alignement vertical de plusieurs blocs entre eux, autrement qu'avec flex...
  Par défaut tout est en stretch, et tous les blocs font forcément la même hauteur.
  C'est facile à contourner avec les valeurs flex-start, flex-end ou center :
  
  

En somme, à vous de choisir suivant ce que vous voulez faire !

Pour explorer les différentes options possibles il y a cette page incontournable que j'utilise aussi.

Pour avoir des explications détaillées sur tout ça il y a aussi cette page très (trop) complète.

Il existe d'autres solutions pour passer en mode "horizontal", comme display:grid, display:inline-block (qui ajoute une petite marge parfois gênante), float:left (que vous devriez éviter), et les <table> HTML (à éviter aussi autant que possible !).

Flex peut aussi vous servir à centrer horizontalement ET verticalement un bloc unique, comme ici :

Ici le parent fait la taille de la fenêtre en largeur et en hauteur, et le bloc enfant est en plein milieu de l'écran - c'est un truc compliqué à réaliser sans utiliser flex.

La propriété object-fit va vous permettre définir comment couper une image dans un format, aspect-ratio vous permet de conserver le ratio de votre image quelles que soient les circonstances, et background-image dispose lui aussi d'options intéressantes pour les images de fond.

Plus d'infos/démo avec Johnny sur cette page inoubliable !