Exercices
- Exercice 1 - Mise en forme d'une page en HTML
- Exercice 2 - Mise en forme du texte et des images ( image1 - image2 - image3 )
- Exercice 3 - Mise en forme des listes
- Exercice 4 - Les textes préformatés
- Exercice 5 - Les tableaux
- Exercice 6 - Mise en forme à l'aide du CSS de l'exercice 1
- Exercice 7 - Mise en forme à l'aide du CSS de l'exercice 1
- Exercice 8 - Mise en forme à l'aide du CSS de l'exercice 2
- Exercice 9 - Mise en forme à l'aide du CSS de l'exercice 3
- Exercice 10 - Mise en forme à l'aide du CSS de l'exercice 4
- Exercice 11 - Mise en forme à l'aide du CSS de l'exercice 5
- Exercice Période 4
Menu déroulant Flexbox
Menu déroulant en CSS sans javascript
http://www.css-faciles.com/menu-deroulant.php
Les transitions et animations en CSS https://openclassrooms.com/courses/animez-votre-site-avec-css3 http://www.alsacreations.com/tuto/lire/876-transitions-css3-transition-timing-function.html http://css.mammouthland.net/css3/animation-transition.php http://www.css3create.com/transition http://www.w3schools.com/css/css3_transitions.asp http://www.w3schools.com/css/css3_animations.asp http://css3.bradshawenterprises.com/cfimg/
Quelques médias à télécharger...
musique.mp3 musique.ogg video.mp4
Code de base
<!-- Nom Prénom -->
<!-- 6Bo7 -->
<!DOCTYPE html>
<html>
<head>
<title>Titre</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Références
HTML et CSS
Le site du Zéro
AlsaCréations
Divers
Pour placer une image fantôme => <img src="http://via.placeholder.com/200x200" alt="" />
Blindtext Generator
Générateur de formulaire
/* *********************************************************** */
/* *********************************************************** */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* *********************************************************** */
/* *********************************************************** */
|
