1. Mise en place du dossier : 3 points
Les points 1 à 6 doivent vous amener à avoir un résultat similaire à :
http://labodemaths.fr/snt/7_familles/index.html
Créer un dossier « 7_familles » dans votre espace personnel.
Votre dossier devra contenir :
– 1 fichier html nommé « Al-Khwarizmi »,
– 1 fichier html nommé « index »,
– 1 fichier css nommé « style »,
– 1 fichier css nommé « style-biographie ».
– 1 dossier « images »
Ces fichiers seront vides pour l’instant.
Votre dossier doit ressembler à :
2. Placer une image dans votre sous-dossier « images » : 1 pt
Télécharger l’image ci-dessous et la placer dans votre sous-dossier « images »
Vous devez avoir à présent :
3. Mise en place de la page index.html ( 2 pts )
Copier-coller le code suivant dans la page index.html et enregistrer la ( 1 pt ) :
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<header>Le jeu des 7 familles en informatique.
<br>
Inspiré de :<br>
<a href="https://interstices.info/dossier/7-familles-de-linformatique/" target="_blank">https://interstices.info/dossier/7-familles-de-linformatique/</a>
</header>
<section>
<h1>Algorithme & programmation</h1>
<article>
<img src="images/al-khwarizmi.png" style="width:100%;">
<a href="Al-Khwarizmi.html">Al-Khwarizmi</a>
</article>
<article>
<h2>Ada Lovelace</h2>
</article>
<article>
<h2>Grace Hopper</h2>
</article>
<article>
<h2>Dorothy Vaughan</h2>
</article>
<article>
<h2>Gilles Kahn</h2>
</article>
<article>
<h2>Gérard Berry</h2>
</article>
</section>
<section>
<h1>Mathématiques & Informatique </h1>
<article>
<h2>Hypatie d’Alexandrie</h2>
</article>
<article>
<h2>George Boole</h2>
</article>
<article>
<h2>Alonzo Church</h2>
</article>
<article>
<h2>Jacques-Louis Lions</h2>
</article>
<article>
<h2>Ingrid Daubechies</h2>
</article>
<article>
<h2>Jocelyne Troccaz</h2>
</article>
</section>
<section>
<h1>Sécurité & confidentialité</h1>
<article>
<h2>Jules César</h2>
</article>
<article>
<h2>Al-Kindi</h2>
</article>
<article>
<h2>Whitfield Diffie et Martin Hellman</h2>
</article>
<article>
<h2>Ron Rivest, Adi Shamir et Leonard Adleman (RSA)</h2>
</article>
<article>
<h2>Shafi Goldwasser</h2>
</article>
<article>
<h2>Cynthia Dwork</h2>
</article>
</section>
<section>
<h1>Systèmes & réseaux</h1>
<article>
<h2>Alexander Graham Bell</h2>
</article>
<article>
<h2>Claude Shannon</h2>
</article>
<article>
<h2>Vinton Cerf</h2>
</article>
<article>
<h2>Tim Berners-Lee</h2>
</article>
<article>
<h2>Pascale Vicat-Blanc</h2>
</article>
<article>
<h2>Anne-Marie Kermarrec</h2>
</article>
</section>
<footer>
Avec l'aimable autorisation de l'Inria pour la réutilisation des textes et images.
</footer>
</body>
</html>Modifier le footer pour remplacer le contenu par votre nom et prénom.
4. Mise en place de la page style.css ( 1 pt )
Copier-coller le code suivant dans votre page style.css et enregistrer la.
body {
background-color: white;
font-family: 'Roboto', sans-serif;
}
header {
color: rgb(91, 158, 226);
font-size: 30px;
padding-left: 10px;
padding-top: 10px;
border-bottom-style: solid;
border-bottom-color: red;
padding-bottom: 20px;
}
header a {
font-size: 15px;
}
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
}
h1 {
font-family: 'Roboto', sans-serif;
width: 100%;
font-size: 20px;
}
article {
width: 10%;
text-align: center;
border-style: solid;
border-color: red;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}5. Mise en place de la page Al-Khwarizmi.html ( 1 pt )
Copier-coller le code suivant dans la page Al-Khwarizmi.html et enregistrer la.
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style-biographie.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>AL-Kwarizmi</title>
</head>
<body>
<header>Al-Khwarizmi
</header>
<h1>vers 780 – vers 850</h1>
<article id="AL-Kwarizmi">
<p>
Mathématicien persan du IXe siècle. Pour aider ses contemporains, ce sage a écrit un livre regroupant des méthodes claires, à suivre pas à pas, pour résoudre des problèmes mathématiques. De plus, le titre de ce livre contient l’expression « Al Jabr » (lisez-le à haute voix) ce qui explique que son nom soit associé à l’arrivée de l’algèbre en Europe. Son nom fut traduit par Algoritmi en latin.
</br>
Bref, avec Al-Khwarizmi, on voit apparaître des algorithmes complexes !</p>
</article>
<a href="index.html">Retour</a>
</body>
</html>6. Mise en place de la page style-biographie.css ( 1 pt )
Copier-coller le code suivant dans la page style-biographie.css et enregistrer la.
body {
background-color: white;
font-family: 'Roboto', sans-serif;
}
header {
color: rgb(91, 158, 226);
font-size: 30px;
min-height: 100px;
padding-left: 10px;
padding-top: 10px;
border-bottom-style: solid;
border-bottom-color: red;
}
article {
background-image: url(images/al-khwarizmi.png);
background-repeat: no-repeat;
padding-left: 200px;
width: 80%;
border-style: solid;
border-color: skyblue;
font-size: 30px;
margin-bottom: 10px;
}
h1 {
font-family: 'Roboto', sans-serif;
width: 100%;
font-size: 30px;
}
p {
margin-left: 20%;
}
header a {
font-size: 10px;
}
a {
outline: none;
font-size: 20px;
text-decoration: none;
padding: 2px 1px 0;
}
a:link {
color: #265301;
}
a:visited {
color: #437A16;
}
a:focus {
border-bottom: 1px solid;
background: #BAE498;
}
a:hover {
border-bottom: 1px solid;
background: #CDFEAA;
}
a:active {
background: #265301;
color: #CDFEAA;
}7. Modification de la page index.html ( 4 pts )
En vous inspirant du code html relatif à Al-Khwarizmi dans la page index.html
<article id="Al-Khwarizmi">
<img src="images/al-khwarizmi.png" style="width:100%;">
<a href="Al-Khwarizmi.html">Al-Khwarizmi</a>
</article>Modifier le code de l’article, dans la page index.html, qui correspond à la carte qui vous a été distribuée ( 2 points ).
Placer dans le sous-dossier « images » l’image qui correspond à votre carte ( l’image est à retrouver et à enregistrer à partir de l’article :
https://interstices.info/dossier/7-familles-de-linformatique/
( 2 points )
8. Création de la page html correspondant à la carte qui vous a été distribuée. ( 7 pts )
- Créer un nouveau fichier html portant le nom correspondant à la carte qui vous a été distribuée,
- Insérer le code html adéquat ainsi que le contenu correspondant à votre carte ( on peut en premier lieu, y copier le code html de la page Al-Khwarizmi.html puis le modifier ),
- créer une page mon-style.css et la lier à votre page html,
- copier dans cette page css le contenu de la page style-biographie.css et la modifier pour obtenir l’image correspondant à votre carte..
- Vérifier que tout fonctionne bien à partir de la page index.html