Cours immersion

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

# Developpement WEB

## Inès de Courchelle

## 2024-2025

---
layout: false

# Aujourd'hui
## Organisation
- un cours de 20 min
- un TP de 1h10 min

## Vous disposez
- d'un ordinateur
- d'un cours
- d'un memo
- d'un sujet de TP

---
# 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

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

---
# 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>
```

---
# 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ù ?

---
# 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>
```

---
# Le style
## un peu de couleur

---
# Le style
## MAIS comment
```css
<style>
p {
    color:blue;
}
</style>
```
Le texte des balises p seront en bleu !

---
# Le style
## MAIS comment
```css
<style>
h1{
    background-color:green;
}
</style>
```
Toutes les balises h1 auront un fond vert !

---
# Le style
## Complet !

---
# Le style
## Le code
```html
<!DOCTYPE html>
<html>
 <head>
 
 <meta name="author" content="Inès de Courchelle" />
 
 <title>Ma page</title>
 </head>
 <style>
p{
    color:blue;
}
li{
   color:red;
}
h1{
    background-color: green;
}
</style>
  <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>
```

---
# Le style
## La doc
<p><a href="https://www.w3schools.com/"><img src="img/w3school.png" width="150"></a></p>
<center><a href="https://www.w3schools.com/">W3SCHOOL</a></center>

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

---
# Le Dev Web
## On en parle
#### C'était il y a 8 ans mais bon quand même ! Çà reste de l'actu un petit peu
<iframe width="560" height="315" src="https://www.youtube.com/embed/06pj3w1c6l4?si=3Epbo9_0McsqzOgx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>