CM 1 - Dev WEB

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

# Developpement WEB

## Inès de Courchelle

## 2024-2025

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

---
layout: false

# À propos de l'UE

## Objectifs
- Présenter les concepts de langage Web
- Connaître la différence entre les langages clients/serveurs
- Augmenter la réactivité d'une page web
- Manipuler du format JSON

## Thèmes détaillés
- Cours 1 - HTML
- Cours 2 - CSS
- Cours 3 - Javascript
- Cours 4 - DOM
- Cours 5 - Les formulaires
- Cours 6 - Introduction au PHP
- Cours 7 - Le PHP avancé et les fichiers
- Cours 8 - Fetch & JSON
- PROJET
---
# Positionnement
## Le dev web dans le curcus
- ING1
  - Développement web
  - Stage
- ING2
  - JEE
- ING3
  - Cloud Front
  - Dev Ops

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

---

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

## 2024-2025

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

---
layout: false

# Le web
## Des dates Clés
- 1971 : Arpanet
- 1991 : World Wide Web
- 1993 : HTLM devient populaire
- 1996 : CSS + javascript
- 2005 : Ajax
- 2009 : HTML 5

---
# Le web
## Le mec : Tim Berners-Lee
<img src="img/TimBerners-Lee.jpeg" alt="drawing" width="400"/>

## Google - Doodles

---
# Protocole HTTP
## Définition
- Hypertext Transfer Protocol
- Communication entre un client et un serveur
- Permettre à un internaute d'accéder au contenu d'une page Web via son navigateur

## Illustration
<img src="img/protocole.png" alt="drawing" width="400"/>

---
# Côté Client VS Serveur
## La différence
#### Le client
- Effectuer des requêtes vers le serveur
- EX : Firefox

#### Le serveur
- Exécuter les requêtes et renvoyer le résultat au client
- EX : Apache

---
# HTML
## Définition
**H**yper **T**ext **M**arkup **L**angage

## À Quoi ça sert ?
- à RIEN !
- ...
- À structurer un document et son contenu
- ...

## Comment ?
- Via ta petite tête
- Tes petits doigts
- Un clavier
- Et un navigateur web

---
# Squelette d'un code html
## La base

```html
<!DOCTYPE html>
<html>
    <head>
        <title>Le Titre</title>
    </head>
    <body>
        le contenu
    </body>
</html>
```

---
# Exemple
## Quel extension ?
<img src="img/fichierHtml.png" alt="drawing" width="100"/>

## Comment je compile ?
- C'est un langage interpreté par un navigateur web
- .under[DONC] pas besoin de compiler

## Comment j'interprête ?

Avec un navigateur web

---
# Illustration
## Étape 1
#### J'ouvre un éditeur de texte
<img src="img/illustration1.png" alt="drawing" width="250"/>

## Étape 2
#### J'enregitre
<img src="img/illustration2.png" alt="drawing" width="250"/>

---
# Illustration
## Étape 3
#### Clic droit sur le fichier
<img src="img/right-button-test.gif" alt="drawing" width="100"/>

## Étape 4
#### Ouvrir avec un navigateur

---
## Étape 5
#### Magie !
<img src="img/illustration4.png" alt="drawing" width="250"/>

---
## Étape 6
#### Attention
- .underV[Si] je fais une modification
- .underV[Alors] j'enregistre et je rafraîchis la page
<iframe src="https://giphy.com/embed/mGbJmiNXqMTXbFWvCH" width="100" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/hyperxgaming-hyperx-family-gaming-mGbJmiNXqMTXbFWvCH"></a></p>

#### Après F5
<img src="img/illustration5.png" alt="drawing" width="400"/>

---
# Les balises
## La balise p
```html
<p> Je suis un paragraphe 1</p>
<p> Je suis un paragraphe 2</p>
```

## La balise img
```html
<img src="img/DD.png">
```

---
# Les balises
## La balise a
```html
<a href="http://idecourc.perso.cyu.fr/informatique4.php"> Ceci est un lien !</a>
```
## Les balises ul et li
```html
<ul>
    <li>Point 1</li>
    <li>Point 2</li>
    <li>Point 3</li>
    <li>Point 4</li>
</ul>
```

---
# Illustration
## Le complet
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Ma page</title>
    </head>
    <body>
        <p> Je suis un paragraphe 1</p>
        <p> Je suis un paragraphe 2</p>
        <img src="img/laBase.jpeg">
        <a href="http://ide.perso.eisti.fr/devWeb.phtml"> Ceci est un lien !</a>
        <ul>
            <li>Point 1</li>
            <li>Point 2</li>
            <li>Point 3</li>
            <li>Point 4</li>
        </ul>
    </body>
</html>
```
## La visualisation

<a href="monFichier.html" target="_blank"> Essaye de cliquer là par exemple !</a>

---
# Les titres !
## Plusieurs niveaux
```html
<h1> à <h6> 
<h1> 
<h6> 
```

## Exemple
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Ma page</title>
    </head>
    <body>
        <h1> Titre N°1 </h1>
        <h2> Sous titre N°1.1 </h2>
        <p> gnagnagna </p>
        <h2> Sous titre N°1.2 </h2>
        <p> gnagnagna </p>
        <h1> Titre N°2 </h1>
        <p> gnagnagna </p>
    </body>
</html>
```

---
# Les metadonnées
## A quoi ça sert ?
- À décrire les données
- À définir l'encodage des caractères
- À être dans les résultats des moteurs de recherche

## On les met où ?
<iframe src="https://giphy.com/embed/Jt4y4zi519V6asgGhA" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/AppleTV-ted-lasso-tedlasso-Jt4y4zi519V6asgGhA"></a></p>
---
# Les metadonnées
## Illustration
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Inès de Courchelle" />
        <meta name="copyright" 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>
```

---
# Holy Grail !
## W3School
<a href="https://www.w3schools.com/"><img src="img/w3school.png" width="150"></a>

---
# Un tableau
## À quoi ça ressemble ?
- À un ensemble de balise
- À un tableau quoi ?

## Les balises
- table .arrow[] pour indiquer le début et la fin du tableau
- td .arrow[] pour les colonnes
- tr .arrow[] pour les lignes
- th .arrow[] pour avoir des titres aux colonnes

## La doc
<a href="https://www.w3schools.com/html/html_tables.asp" target="_blank"> w3chool link </a>

---
# Un tableau
## Illustration
```html
<!DOCTYPE html>
<html>
 <head>
    <meta name="author" content="Inès de Courchelle" />
    <title>Ma page</title>
 </head>
 <body>
    <table> 
        <tr> 
            <th>Nom</th>
            <th>Prénom </th>
        </tr> 
        <tr>
            <td>Jones</td>
            <td>Jughead</td>
        </tr>
        <tr>
            <td>Andrew</td>
            <td>Archie</td>
        </tr>
        <tr>
            <td>Cooper</td>
            <td>Betty</td>
        </tr>
    </table> 
 </body>
</html>
```
<a href="tableau.html" target="_blank">le fichier</a>

---
# Conclusion
## Atttention :
- L'enseignant n'est pas un debbugueur
- L'enseignant ne travail pas à ta place

## Bilan
- C'est toi qui doit travailler !
- C'est toi qui doit essayer !

---
# Le Dev web
## Endless story
- À toi d'être curieux
- À toi de chercher
- À toi de tester