CM 2 - Dev WEB

name: inverse
layout: true
class: center, middle, inverse
---

# Developpement Web - CM 2
## Inès de Courchelle

![image](../img/CY-tech.png)

---
layout: false

# Le CSS
## Définition
- **C**ascade **S**tyle **S**heet
- Contient les informations de mise en forme de la page
- Un langage de description

## HTML vs CSS
<img src="img/css_meme2.png" alt="drawing" width="350"/>

---
# Côté Client
## Le petit schéma

---
# Utilisation
## Quel extension ?
CSS
## Comment je compile ?
Je ne compile pas
## Comment j'interprête ?
Je n'interprête pas

---
# Le lien
## Comment lier le css et le html ?
Dans le head du HTML
```html
<!DOCTYPE html>
<html>
    <head>
       
      <link rel="stylesheet" type="text/css" href="monStyle.css" />
      
      <meta name="author" content="Inès de Courchelle" />
      <meta name="keywords" content="surf skate moi ines la base" />
      
      <title>Ma page</title>
    </head>
    <body>
    Le contenu
    </body>
</html>
```
## Puis je lier plusieurs css à un html ?
OUI

---
# Les Couleurs
## Illustration
.pull-left[
#### Pour un paragraphe
```css
p{
    color: blue;
}
```
#### Pour les li
```css
li{
   color:red;
}
```
#### Pour les titres
```css
h1{
   background-color:green;
}
```

<a href="exemple/colorText.html" target="_blank"> clic pour l'exemple </a>
]

.pull-right[
#### Le html
```html
<!DOCTYPE html>
<html>
 <head>
 
 <link rel="stylesheet" type="text/css" href="monStyle.css" />
 
 <meta name="author" content="Inès de Courchelle" />
 
 <title>Ma page</title>
 </head>
 <body>
  <h1> C'est beau ! </h1>
  <p> Il va être tout bleu ! </p>
  <ul>
   <li> Puce 1 </li>
   <li> Puce 2 </li>
   <li> Puce 3 </li>
   </ul>
 </body>
</html>
```
]

---
# Illustration
## Le CSS (complet)
```css
p{
    color:blue;
}
li{
   color:red;
}
h1{
    background-color: green;
}
```

---
# Les couleurs
## A quoi ça ressemble ?
- À rien
- Il y en a des prédéfinies : blue, red, green, black, white, ...
- Un code hexadécimal (base 16)
- Noir .arrow[] #000000
- Blanc .arrow[] #FFFFFF
- Bleu .arrow[] #0000FF
- Pervenche .arrow[] #CCCCFF
- Rouge bismarck .arrow[] #A5260A

## Où trouver les codes couleurs ?
- <a href="https://htmlcolorcodes.com/fr/" target="_blank"> Ici </a>
- <a href="https://www.toutes-les-couleurs.com/code-couleur-html.php" target="_blank"> Ou là </a>
- <a href="https://www.google.com/search?channel=fs&client=ubuntu&q=code+couleur" target="_blank"> Sur Internet quoi !</a>
---
# Illustration
## C'est la même
```css
p{
    color:#CCCCFF
}
```

.underR[Attention] il ne faut surtout pas oublier le **#**

---
# Diviser la page
## A quoi ça sert ?
- Appliquer des styles sur des structures différentes
- Mettre des éléments en haut, des éléments en bas, à gauche ...

## Comment ?
- Avec des div .arrow[] Du HTML
- Avec des classes .arrow[] Du CSS

---
# La base
## DIV
- Le div ou la div (c'est comme tu veux)
- Une balise HTML qui englobe tout un contenu

## Structurer une page
<img src="img/zonnage.png" alt="drawing" width="250"/>

---
# Les div en HTML
## Illustration
.pull-left[
##### Le code
```html
<!DOCTYPE html>
<html>
    <head>
      
      <link rel="stylesheet" type="text/css" href="monStyleZone.css" />
       
        <meta name="author" content="Inès de Courchelle" />
        <meta name="copyright" content="Inès de Courchelle" />
        
        <title>Ma Zone</title>
    </head>
    <body>
      <div> Zone 1 </div>
      <div> Zone 2 </div>
      <div> Zone 3 </div>
      <div> Zone 4 </div>
    </body>
</html>
```
]

.pull-right[
##### Aperçu (sans css)
<img src="img/zonnage2.png" alt="drawing" width="225"/>
<center>
<a href="exemple/zonnage.html" target="_blank">Le fichier Exemple </a>
</center>
]

---
# Les div en CSS
## Comment les faire apparaître ?
- en jouant avec des classes
- en définissant des tailles, des poids, des styles
- en utilisant des descriptions adaptatives au contenu

## Quels mots clés CSS?
```css
width:
height:
margin:
margin:
padding:
border:
float:
```

---
# Les classes
## Définition
- Attribut d'une balise html
- Cible un ou plusieurs éléments html pour lui appliquer un style

## Utilisation
.pull-left[
```html
<p class="top">ines</p>
<p class="bottom">dc</p>
<p class="top">yeah</p>

```
]

.pull-right[
```css
.top {
    color:green;
}
.bottom {
    color:blue;
}
```
]

<br>
<center>
<a href="exemple/classe.html" target="_blank">Le fichier Exemple </a>
</center>

---
# Les unités
## Les unités absolues
- Les pixels (px)
- Les pouces (in)
- Les centimètres (cm)
- Les millimètres (mm)
- Les picas (pc)
- Les points (pt)

## Les unités relatives
- Em : elle est proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1em = 16 px si aucune taille de police n’est définie.
- Rem : l’unité rem fait toujours référence à la taille de la police de l’élément racine. En d’autres termes, elle dépend du font-size définit par défaut.
- Ex : très rarement utilisée, cette unité est relative à la hauteur de la police actuelle en minuscule.
- Ch : cette unité est elle aussi peu utilisée, elle est relative à la largeur du caractère “0”.

---
# Les classes !
## La pratique
```html
<!DOCTYPE html>
<html>
    <head>
      
      <link rel="stylesheet" type="text/css" href="monStyleZone.css" />
       
        <meta name="author" content="Inès de Courchelle" />
        <meta name="copyright" content="Inès de Courchelle" />
        
        <title>Ma Zone</title>
    </head>
    <body>
      <div class="Z1"> Zone 1 </div>
      <div class="Z2"> Zone 2 </div>
      <div class="Z3"> Zone 3 </div>
      <div class="Z4"> Zone 4 </div>
    </body>
</html>
```
---
# Les classes
## Le CSS
.pull-left[
```css
.Z1{
    width:48%;
    height: 10em;
    background-color: #d5e8d4;
}
.Z2{
   width:49%;
   height: 10em;
   background-color: #d5e8d4;
}
```
]

.pull-right[
```css
.Z3{
    width:99%;
    height: 24em;
    background-color: #d5e8d4;
}
.Z4{
    width:99%;
    background-color: #d5e8d4;
    height: 12em;
}
```
]

<br>

## Si on test
- <a href="exemple/zonnage2.html" target="_blank"> leContenu.html </a>
- <a href="exemple/leStyle.css" target="_blank"> leStyle.css </a>

---
# Le margin
## Pourquoi tout est collé ?
.pull-left[
##### Le problème
<img src="img/zonnage3.png" alt="drawing" width="225"/>
]
.pull-right[
##### La solution
<img src="img/margin.png" alt="drawing" width="225"/>

<img src="img/solutionMargin.png" alt="drawing" width="225"/>
]

---
# Illustration
## Exemple
.pull-left[
##### Dans le css
```css
.Z1 {
    margin-top:10em;
    margin-bottom:10em;
    margin-left:10em;
    margin-right:10em;
}
```
]
.pull-right[
##### On est faignant
```css
.Z1{
    margin: 10em 10em 10em 10em;
    \*   ordre => top  right bottom  left */
 }
```

]

---
# Illustration
## Résultat
<img src="img/zonnage4.png" alt="drawing" width="225"/>

## Si on test
- <a href="exemple/zonnage3.html" target="_blank"> zonnage3.html </a>
- <a href="exemple/leStyle3.css" target="_blank"> leStyle3.css </a>

---
# Le code
## Illustration
.pull-left[

##### CSS
```css
.Z1{
    width:48%;
    height: 10em;
    margin: 2em 2em 2em 2em;
    background-color: #d5e8d4;
}
.Z2{
   width:49%;
   margin: 2em 2em 2em 2em;
   height: 10em;
   background-color: #d5e8d4;
}
.Z3{
    width:99%;
    margin: 2em 2em 2em 2em;
    height: 24em;
    background-color: #d5e8d4;
}
.Z4{
    width:99%;
    margin: 2em 2em 2em 2em;
    background-color: #d5e8d4;
    height: 12em;
}
```
]

.pull-right[
##### HTML
```html
<!DOCTYPE html>
<html>
    <head>
      
      <link rel="stylesheet" type="text/css" href="leStyle3.css" />
       
        <meta name="author" content="Inès de Courchelle" />
        <meta name="copyright" content="Inès de Courchelle" />
        
        <title>Ma Zone</title>
    </head>
    <body>
      <div class="Z1"> Zone 1 </div>
      <div class="Z2"> Zone 2 </div>
      <div class="Z3"> Zone 3 </div>
      <div class="Z4"> Zone 4 </div>
    </body>
</html>
```

]
---
# Le float
## Pourquoi la zone 1 et 2 ne sont pas sur la même ligne ?
<img src="img/zonnage4.png" alt="drawing" width="225"/>

---
# le float
## Solution
.pull-left[
##### Le code
```css
.Z1 {
    float:left;
    width:48%;
    height: 10em;
    margin: 2em 2em 2em 2em;
    background-color: #d5e8d4;
}
```

]

.pull-right[
##### Le résultat
<img src="img/moche.png" alt="drawing" width="180"/>

]

<br>

## Si on test
- <a href="exemple/zonnage4.html" target="_blank"> zonnage4.html </a>
- <a href="exemple/leStyle4.css" target="_blank"> leStyle4.css </a>

---
# C'est toujours moche
## La solution
.pull-left[
<img src="img/solutionFloat.png" alt="drawing" width="225"/>
]
.pull-right[
```css
.Z2{
    width:48%;
    height: 10em;
    margin: 2em 2em 2em 66em;
    background-color: #d5e8d4;
}
```

]

<br>

## Si on test
- <a href="exemple/zonnage5.html" target="_blank"> zonnage5.html </a>
- <a href="exemple/leStyle5.css" target="_blank"> leStyle5.css </a>

---
# C'est encore moche
## Mais pourquoi ?
<iframe src="https://giphy.com/embed/R3S6MfUoKvBVS" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/breaking-bad-wink-walter-white-R3S6MfUoKvBVS"></a></p>

---
# La solution
## Le clear
- Effacer les éléments .under[float] après la zone 2
- Repartir sur de bonne base pour la zone 3 et 4

## Comment ?

.pull-left[
##### On garde la même
```css
.Z1{
width:48%;
height: 10em;
float:left;
background-color: #d5e8d4;
}
.Z2{

margin: 2em 2em 2em 66em;
width:49%;
height: 10em;
background-color: #d5e8d4;
}

```

]

.pull-right[
##### Puis on rajoute
```css
.Z2::after{
 clear: both;
}
```

##### Si on test
- <a href="exemple/zonnage6.html" target="_blank"> zonnage6.html </a>
- <a href="exemple/leStyle6.css" target="_blank"> leStyle6.css </a>
]

---
# It's over
## Boom
<iframe src="https://giphy.com/embed/xThuWmdBg5KbLYLMBy" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/brooklynninenine-brooklyn-nine-nine-b99-brooklyn99-xThuWmdBg5KbLYLMBy"></a></p>

## Next
.under[on passe à la suite ]

---
# Les IDs
## Définition
<iframe src="https://giphy.com/embed/uIGHPjEfdc0Ni" width="300"  frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/reaction-fifth-element-multipass-uIGHPjEfdc0Ni"></a></p>

- C'est un identifiant que l'on place en attribut dans un html
- On y fait appel dans le css via #

## Utilisation
.pull-left[
```css
#kikou{
    color:red;
}

#theJake{
   text-align:center;
}
```

]

.pull-right[
```html
<p id="kikou">Coucou</p>
<div id="theJake">coolcoolcool</div>
```

]

---
# Les classes VS les IDs
## L'association
- On peut mettre les deux
- Les ids sont utilisable "en théorie" qu'une seul fois.
- Les ids sont unique
- Les classes peuvent être utilisées plusieurs fois

## Quelques liens sur la question
- <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Howto/CSS_FAQ" target="_blank">Developper mozilla</a>
- <a href="https://www.w3schools.com/html/html_id.asp" target="_blank">W3school 1</a>
- <a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_class" target="_blank">W3school 2</a>

---
# Padding VS Margin
## Ça c'est facile :)
<img src="img/easyPeasy.gif" alt="drawing" width="275"/>

## Illustration
<img src="img/marginvspadding.png" alt="drawing" width="275"/>

---
# Inspecter
## A quoi ça sert ?
- Débuger
- Tester des idées en direct
- Trouver des codes couleurs
- Chercher des codes interessants
*- Pirater la nasa*
-...

## Comment ?
- Faire clic droit
- Inspecter élement

.underR[Je vais vous faire la démo en LIVE]

---
# Bilan
## Technique
- Séparer la mise en forme de la structure
- Bien structurer son code
- Regarder la doc !

## Personnel
- Avoir un minimum de jugeote
- Aiguiser sa curiosité
- Être GAVÉ calme
- Ne pas oublier d'enregistrer ces fichiers
- Faire les bons liens entre les fichiers
- Ne pas oublier d'inspecter les éléments

## Travailler
- Pas de secret
- Mettre la main à la pâte
- Pas de procrastination

---
# Bonus
## À regarder en dehors des cours
<iframe width="560" height="315" src="https://www.youtube.com/embed/arj7oStGLkU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>