Compare commits
No commits in common. "bc268465222787aa3fed12330cb602d243afd581" and "892204931f34941ac636c70d5630430368509c2d" have entirely different histories.
bc26846522
...
892204931f
@ -20,8 +20,7 @@ de site statique sur un serveur et l'ergonomie d'interface.
|
|||||||
| -------------------- | ------------------------------------------------ | ----------------------- |
|
| -------------------- | ------------------------------------------------ | ----------------------- |
|
||||||
| 1 : 11/11 - 15/11 | [HTML](./cours/html.pdf) | |
|
| 1 : 11/11 - 15/11 | [HTML](./cours/html.pdf) | |
|
||||||
| 2 : 18/11 - 22/11 | [CSS](./cours/css.pdf) | [tp1 html](./tp/tp1) ([correction](./tp/tp1/correction))|
|
| 2 : 18/11 - 22/11 | [CSS](./cours/css.pdf) | [tp1 html](./tp/tp1) ([correction](./tp/tp1/correction))|
|
||||||
| 3 : 25/11 - 29/11 | [CSS](./cours/css.pdf) | [tp2 html/css](./tp/tp2) ([correction](./tp/tp2/correction))|
|
| 2 : 25/11 - 29/11 | [CSS](./cours/css.pdf) | [tp2 html/css](./tp/tp2) |
|
||||||
| 4 : 02/12 - 05/12 | [CSS](./cours/css.pdf) | [tp3 css](./tp/tp3) |
|
|
||||||
|
|
||||||
## Serveur http(s) de l'iut
|
## Serveur http(s) de l'iut
|
||||||
|
|
||||||
|
File diff suppressed because one or more lines are too long
@ -1,83 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>Exercice 2</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="lastname">Nom : </label>
|
|
||||||
<input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="firstname">Prénom : </label>
|
|
||||||
<input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="birthdate">Date de naissance : </label>
|
|
||||||
<input type="date" name="birthdate" id="birthdate">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email">Adresse email : </label>
|
|
||||||
<input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="postcode">Code postal : </label>
|
|
||||||
<input type="number" name="postcode" id="postcode" placeholder="ex: 75000" min="5" max="99999" required>
|
|
||||||
<!--
|
|
||||||
Validation d'un code postal avec une expression régulière
|
|
||||||
<input type="text" name="postcode" id="postcode" placeholder="ex: 75000" pattern="(?:[0-8]\d|9[0-8])\d{3}">
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phonenumber">N° Télephone portable : </label>
|
|
||||||
<input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
|
|
||||||
<!-- Il n'y a pas d'attribut pour afficher un message d'erreur personnalisé, c'est pour cela qu'il y a JavaScript -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input type="radio" name="gender" id="femme" value="Madame" required>
|
|
||||||
<label for="femme">Femme </label>
|
|
||||||
<input type="radio" name="gender" id="homme" value="Monsieur" required>
|
|
||||||
<label for="homme">Homme </label>
|
|
||||||
<input type="radio" name="gender" id="autre" value="Autre" required>
|
|
||||||
<label for="autre">Autre </label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="semester">Semestre : </label>
|
|
||||||
<select name="semester" id="semester" size="4" required>
|
|
||||||
<option value="Semestre 1">Semestre 1</option>
|
|
||||||
<option value="Semestre 2" selected>Semestre 2</option>
|
|
||||||
<option value="Semestre 3">Semestre 3</option>
|
|
||||||
<option value="Semestre 4">Semestre 4</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="niveau">Niveau en HTML (entre 0 et 10) : </label>
|
|
||||||
<input type="range" name="niveau" id="niveau" min="0" max="10" value="5">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="message">Message : </label>
|
|
||||||
<textarea name="message" id="message" required></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input type="submit" value="Envoyer">
|
|
||||||
<input type="reset" value="Remettre à zéro">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,85 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>Exercice 3</title>
|
|
||||||
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<form method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="lastname">Nom : </label>
|
|
||||||
<input type="text" name="lastname" id="lastname" placeholder="ex: Dupont" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="firstname">Prénom : </label>
|
|
||||||
<input type="text" name="firstname" id="firstname" placeholder="ex: Jean-Paul" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="birthdate">Date de naissance : </label>
|
|
||||||
<input type="date" name="birthdate" id="birthdate">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="email">Adresse email : </label>
|
|
||||||
<input type="email" name="email" id="email" placeholder="ex: jean-paul.dupont@gmail.com" required>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="postcode">Code postal : </label>
|
|
||||||
<input type="number" name="postcode" id="postcode" placeholder="ex: 75000" min="5" max="99999" required>
|
|
||||||
<!--
|
|
||||||
Validation d'un code postal avec une expression régulière
|
|
||||||
<input type="text" name="postcode" id="postcode" placeholder="ex: 75000" pattern="(?:[0-8]\d|9[0-8])\d{3}">
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="phonenumber">N° Télephone portable : </label>
|
|
||||||
<input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655664488" pattern="^(\+33|0)[6-7](\d\d){4}$" required>
|
|
||||||
<!-- Il n'y a pas d'attribut pour afficher un message d'erreur personnalisé, c'est pour cela qu'il y a JavaScript -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input type="radio" name="gender" id="femme" value="Madame" required>
|
|
||||||
<label for="femme">Femme </label>
|
|
||||||
<input type="radio" name="gender" id="homme" value="Monsieur" required>
|
|
||||||
<label for="homme">Homme </label>
|
|
||||||
<input type="radio" name="gender" id="autre" value="Autre" required>
|
|
||||||
<label for="autre">Autre </label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="semester">Semestre : </label>
|
|
||||||
<select name="semester" id="semester" size="4" required>
|
|
||||||
<option value="Semestre 1">Semestre 1</option>
|
|
||||||
<option value="Semestre 2" selected>Semestre 2</option>
|
|
||||||
<option value="Semestre 3">Semestre 3</option>
|
|
||||||
<option value="Semestre 4">Semestre 4</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="niveau">Niveau en HTML (entre 0 et 10) : </label>
|
|
||||||
<input type="range" name="niveau" id="niveau" min="0" max="10" value="5">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="message">Message : </label>
|
|
||||||
<textarea name="message" id="message" required></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input type="submit" value="Envoyer">
|
|
||||||
<input type="reset" value="Remettre à zéro">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
@ -1,53 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
<title>Exercice 4</title>
|
|
||||||
<link rel="stylesheet" href="./style4.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Emoticons</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Emoticons are textual portrayals of a writer's moods or facial
|
|
||||||
expressions in the form of icons. Originally, these icons
|
|
||||||
consisted of ASCII art.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Emoticons can generally be divided into two groups: Western (mainly
|
|
||||||
from America and Europe) or horizontal; Eastern or vertical (mainly
|
|
||||||
from east Asia).
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>Western</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Western style emoticons are mostly written from left to right as
|
|
||||||
though the head is rotated counter-clockwise 90 degrees.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>Smiley: <span>:‑) :-></span></li>
|
|
||||||
<li>Tongue-tied: <span>:‑&</span></li>
|
|
||||||
<li>Broken heart: <span><\3</span></li>
|
|
||||||
<li>Rose: <span>@}->--</span></li>
|
|
||||||
<li>Fish: <span>><(((*></span></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Eastern</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Eastern emoticons generally are not rotated sideways. They first
|
|
||||||
arose in Japan, where they are referred to as kaomoji.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>Troubled: <span>(>_<)</span></li>
|
|
||||||
<li>Sad: <span>("_")</span></li>
|
|
||||||
<li>Cat: <span>(=^·^=)</span></li>
|
|
||||||
<li>Headphones: <span>((d[-_-]b))</span></li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,85 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Exercice 5</title>
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
<link rel="stylesheet" href="./style5.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<table>
|
|
||||||
<caption>Orbites des planètes du Système solaire</caption>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Planète</th>
|
|
||||||
<th>Distance moyenne (UA)</th>
|
|
||||||
<th>Exentricité </th><th>Inclinaison (°)</th>
|
|
||||||
<th>Période de révolution (an)</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Mercure</td>
|
|
||||||
<td>0,38709893</td>
|
|
||||||
<td>0,205</td>
|
|
||||||
<td>7</td>
|
|
||||||
<td>0,241</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Venus</td>
|
|
||||||
<td>0,72333199</td>
|
|
||||||
<td>0,007</td>
|
|
||||||
<td>3,4</td>
|
|
||||||
<td>0,615</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Terre</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td>0,017</td>
|
|
||||||
<td>0</td>
|
|
||||||
<td>1</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Mars</td>
|
|
||||||
<td>1,52366231</td>
|
|
||||||
<td>0,094</td>
|
|
||||||
<td>1,9</td>
|
|
||||||
<td>1,881</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Jupiter</td>
|
|
||||||
<td>5,20336301</td>
|
|
||||||
<td>0,049</td>
|
|
||||||
<td>1,3</td>
|
|
||||||
<td>11,862</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Saturne</td>
|
|
||||||
<td>9,6</td>
|
|
||||||
<td>0,057</td>
|
|
||||||
<td>2,5</td>
|
|
||||||
<td>29,452</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Uranus</td>
|
|
||||||
<td>2872,5</td>
|
|
||||||
<td>0,8</td>
|
|
||||||
<td>97,8</td>
|
|
||||||
<td>30,589</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td>Neptune</td>
|
|
||||||
<td>4495,1</td>
|
|
||||||
<td>1,8</td>
|
|
||||||
<td>28,3</td>
|
|
||||||
<td>59,8</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,20 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
<title>Exercice 6</title>
|
|
||||||
<link rel="stylesheet" href="./style6.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr><td rowspan="5"></td><td colspan="3"></td><td rowspan="4"></td></tr>
|
|
||||||
<tr><td rowspan="3"></td><td></td><td rowspan="2"></td></tr>
|
|
||||||
<tr><td></td></tr>
|
|
||||||
<tr><td colspan="2"></td></tr>
|
|
||||||
<tr><td colspan="4"></td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,21 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family:sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-variant:small-caps;
|
|
||||||
text-decoration : underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
background-color:#aaaaaa;
|
|
||||||
padding : 10px;
|
|
||||||
font-style:italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-family: monospace;
|
|
||||||
font-weight:bold;
|
|
||||||
color : #aa4512;
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
|||||||
table {
|
|
||||||
font-family: sans-serif;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin : auto;
|
|
||||||
width:700px;
|
|
||||||
}
|
|
||||||
table caption {
|
|
||||||
|
|
||||||
font-weight: bold;
|
|
||||||
font-variant: small-caps;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
border-bottom: 3px solid black;
|
|
||||||
border-top: 3px solid black;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
font-variant: small-caps;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
border-bottom: 1px solid lightgray;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
|||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
border:1px solid black;
|
|
||||||
width:50px;
|
|
||||||
height:50px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
|||||||
# TP CSS
|
|
||||||
> Vous trouverez une correction du tp1 [ici](../tp1/correction).
|
|
||||||
> Vous trouverez une correction du tp2 [ici](../tp2/correction).
|
|
||||||
> Vous trouverez une correction du tp3 [ici](../tp3/correction).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Exercice 1 : stylisation d'une liste
|
|
||||||
|
|
||||||
Soit le code [html](src/exercice1.html) suivant
|
|
||||||
|
|
||||||
```html
|
|
||||||
<h1>Mes films préférés de Clint Eastwood</h1>
|
|
||||||
<ul>
|
|
||||||
<li>Gran Torino (2008)</li>
|
|
||||||
<li>Impitoyable (1992)</li>
|
|
||||||
<li>Mystic River (2003)</li>
|
|
||||||
<li>Sur la route de Madison (1995)</li>
|
|
||||||
<li>Lettres d'Iwo Jima (2006)</li>
|
|
||||||
<li>L'Échange (2008)</li>
|
|
||||||
<li>Josey Wales hors-la-loi (1976)</li>
|
|
||||||
<li>Breezy (1973)</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
Donnez une feuille de style pour obtenir la mise en page suivante ;
|
|
||||||
|
|
||||||
![eastwood](./img/eastwood.png)
|
|
||||||
|
|
||||||
> Propriétés css utiles :
|
|
||||||
> - `list-style-type` : contrôle l'apparence de la puce d'un élément de liste.
|
|
||||||
> - `padding`, `margin` : espace intérieur et extérieur
|
|
||||||
> - `background-color` : couleur de fond
|
|
||||||
> - `font-style` : italique, oblique ou normal
|
|
||||||
>
|
|
||||||
> Pseudo-classes utiles :
|
|
||||||
> - `nth-child` : nth-child(an+b) permet de selctionner les éléments en fonction de leur position.
|
|
||||||
|
|
||||||
## Exercice 2 : positionnement des boîtes avec la propriété `position`.
|
|
||||||
|
|
||||||
Soit le code [html](./src/exercice2.html) suivant :
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Exercice 2</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<header></header>
|
|
||||||
<section></section>
|
|
||||||
<aside></aside>
|
|
||||||
<footer></footer>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
Donnez une feuille de style pour obtenir la mise en page suivante :
|
|
||||||
![eastwood](./img/smiley.png)
|
|
||||||
|
|
||||||
> Propriétés utiles
|
|
||||||
> - `position` : static, relative, absolute, fixed, sticky
|
|
||||||
> - `top`, `bottom`, `right`, `left` : coordonnées de l'élément. Attention, pour le
|
|
||||||
> positionnement absolu, les **coordonnées s'entendent par rapport au premier ascendant en position relative,
|
|
||||||
> le body s'il n'y en a pas**.
|
|
||||||
> - `ẁidth` et `height` : largeur et hauteur.
|
|
||||||
> - `border-radius` et `border` : arrondi des coins, et bordure.
|
|
||||||
|
|
||||||
## Exercice 3 : selection à l'aide d'attributs.
|
|
||||||
Soit le code [html](src/exercice3.html) suivant
|
|
||||||
```html
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Exercice 3</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
|
|
||||||
<li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
|
|
||||||
<li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
Donnez une feuille de style pour obtenir la mise en page suivante :
|
|
||||||
![stack](./img/web_stack.png)
|
|
||||||
|
|
||||||
Vous pouvez utiliser les images suivantes :
|
|
||||||
- [html](https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg)
|
|
||||||
- [css](https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg)
|
|
||||||
- [javascript](https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg)
|
|
||||||
|
|
||||||
> On peut selectionner un élément en utilisant la valeur d'un attribut. Par exemple :
|
|
||||||
> ```css
|
|
||||||
> a[href*="toto"]
|
|
||||||
> ```
|
|
||||||
> selectionne les liens dont l'url cible contient "toto".
|
|
||||||
> Propriétés utiles :
|
|
||||||
> - `background-image` : permet de définir une image comme arrière plan.
|
|
||||||
> - `display` : permet de définir le rendu d'un élément (bloc ou en ligne)
|
|
||||||
> - `font-size` : contrôle la taille de la fonte.
|
|
||||||
> - `text-align`, `vertical-align` : contrôle l'alignement horizontal et vertical des éléments inline.
|
|
||||||
|
|
||||||
## Exercice 4 : media queries
|
|
||||||
Soit le code [html](src/exercice4.html) et sa feuille de [style](src/style4.css).
|
|
||||||
|
|
||||||
Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché.
|
|
||||||
|
|
||||||
> Utilisez une requête media `@media`.
|
|
||||||
|
|
||||||
## Exercice 5 : mise en page avec la propriété `float`
|
|
||||||
On reprend le source précédent.
|
|
||||||
|
|
||||||
À l'aide de la propriété `float`, affichez les articles sur 2 colonnes avec une bordure de 1px grise et
|
|
||||||
une marge entre les articles de 40px.
|
|
||||||
|
|
||||||
> Vous aurez besoin d'utiliser la propriété `width` que vous pouvez utiliser avec la fonction CSS `calc()` pour le calcul,
|
|
||||||
> exemple:
|
|
||||||
> ```css
|
|
||||||
> width: calc(100px + 2*20px)
|
|
||||||
> ```
|
|
||||||
> Penser quand vous cherchez la bonne largeur (+/- 50%), qu'il faut prendre en compte la taille de marge et des bordures. Vous pouvez utiliser
|
|
||||||
> la propriété `box-sizing`.
|
|
||||||
|
|
||||||
Ajoutez une requête media pour que les articles s'affichent à nouveau verticalement lorsque la taille de l'écran est en dessous de 720px.
|
|
Binary file not shown.
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
Before Width: | Height: | Size: 3.4 KiB |
@ -1,23 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
<title>CEastwood</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<h1>Mes films préférés de Clint Eastwood</h1>
|
|
||||||
<ul>
|
|
||||||
<li>Gran Torino (2008)</li>
|
|
||||||
<li>Impitoyable (1992)</li>
|
|
||||||
<li>Mystic River (2003)</li>
|
|
||||||
<li>Sur la route de Madison (1995)</li>
|
|
||||||
<li>Lettres d'Iwo Jima (2006)</li>
|
|
||||||
<li>L'Échange (2008)</li>
|
|
||||||
<li>Josey Wales hors-la-loi (1976)</li>
|
|
||||||
<li>Breezy (1973)</li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Exercice 2</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<header></header>
|
|
||||||
<section></section>
|
|
||||||
<!--aside></aside-->
|
|
||||||
<footer></footer>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,14 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Exercice 3</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
|
|
||||||
<li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
|
|
||||||
<li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
|
|
||||||
</ul>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,60 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
|
||||||
<link rel="stylesheet" href="style4.css">
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/">Home</a></li>
|
|
||||||
<li><a href="/">About</a></li>
|
|
||||||
<li><a href="/">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<article>
|
|
||||||
<header>
|
|
||||||
<h1>Article title 1</h1>
|
|
||||||
</header>
|
|
||||||
<section>
|
|
||||||
<img src="https://picsum.photos/300/200" alt="">
|
|
||||||
<p>lorem ipsum</p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<header>
|
|
||||||
<h1>Article title 2</h1>
|
|
||||||
</header>
|
|
||||||
<section>
|
|
||||||
<img src="https://picsum.photos/300/200" alt="">
|
|
||||||
<p>lorem ipsum</p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<header>
|
|
||||||
<h1>Article title 3</h1>
|
|
||||||
</header>
|
|
||||||
<section>
|
|
||||||
<img src="https://picsum.photos/300/200" alt="">
|
|
||||||
<p>lorem ipsum</p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<header>
|
|
||||||
<h1>Article title 3</h1>
|
|
||||||
</header>
|
|
||||||
<section>
|
|
||||||
<img src="https://picsum.photos/300/200" alt="">
|
|
||||||
<p>lorem ipsum</p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
@ -1,21 +0,0 @@
|
|||||||
ul {
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
list-style-position: inside;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 2em;
|
|
||||||
font-size : 2em;
|
|
||||||
}
|
|
||||||
li:last-child{
|
|
||||||
margin-right:0;
|
|
||||||
|
|
||||||
}
|
|
||||||
article {
|
|
||||||
text-align: justify;
|
|
||||||
border : 1px solid grey;
|
|
||||||
padding : 1em;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user