ajout fichiers html et css pour tp web

This commit is contained in:
2024-02-05 15:25:06 +01:00
parent c1fa0b7e34
commit 11060a5d05
3 changed files with 174 additions and 0 deletions

BIN
sequences/.DS_Store vendored

Binary file not shown.

119
sequences/web/index.html Normal file
View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Découverte du HTML</title>
</head>
<body>
<!-- titre principal en tête de votre page -->
<h1 id="banniere"> WEB</h1>
<!-- Récapitulatif sur les balises HTML que j'ai découvertes durant cet exercice-->
<h2> Les balises HTML que j'ai découvertes</h2>
<p>En synthèse, compléter le tableau suivant :</p>
<!-- Présentation des informations sous la forme tabulaire-->
<table style="width:75%">
<tr>
<th style="width:15%">Balise</th>
<th style="width:30%">Description</th>
<th style="width:30%">Exemple d'utilisation</th>
</tr>
<tr>
<td>&lt;!-- --></td>
<td>Commentaire</td>
<td>&lt;!-- ici un commentaire --></td>
</tr>
<tr>
<td>&lt;p></td>
<td>Paragraphe</td>
<td>&lt;p>Ceci est un paragraphe.&lt;/p></td>
</tr>
<tr>
<td>&lt;h1> à &lt;h6></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;br /></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;ul></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;ol></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;li></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;dt></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;table></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;a></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;img /></td>
<td></td>
<td></td>
</tr>
<tr>
<td>&lt;hr /></td>
<td></td>
<td></td>
</tr>
</table>
<p>La ciel est <span style="color:blue">bleu</span> comme la <strong>mer</strong>.</p>
<!-- photos des personnages qui ont marqué l'informatique en lien avec leur page wikipedia -->
<!-- les photos sont enregistrées dans le dossier images/grandsNoms -->
<h2> Les grands noms de l'informatique</h2>
<ul>
<li><a href="#" title="Architecture des ordinateurs" >John Von Neumann 1903-1957</a></li>
<li><a href="#" title="Premier compilateur ; langage COBOL" >Grace Hopper 1906-1992</a></li>
<li><a href="#" title="Fondements théoriques de l'informatique ; Machine de Turing ; décryptage de la machine Enigma utilisée par les nazis" >Alan Turing 1912-1954</a></li>
<li><a href="#" title="Inventeur du langage C ; co-développeur du système d'exploitation Unix" >Dennis Ritchie 1941-2011</a></li>
<li><a href="#" title="Le père du logiciel libre" >Richard Stallman 1953-</a></li>
<li><a href="#" title="L'inventeur du Web" >Tim Berners-Lee 1955-</a></li>
<li><a href="#" title="Créateur du noyau du système d'exploitation Linux en 1991" >Linus Torvalds 1969-</a></li>
</ul>
<!-- pied de page. Liens vers mes sites préférés -->
<footer>
<div id="mes_liens">
<h3>Mes sites préférés</h3>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Web">HTML5, CSS3, javaScript, AJAX</a></li>
<li><a href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3">OpenClassroom</a></li>
<li><a href="https://grafikart.fr">grafikart</a></li>
<li><a href="https://www.lyc-thierry-maulnier.ac-nice.fr">Site du lycée Thierry Maulnier de Nice</a></li>
</ul>
</div>
</footer>
</body>
</html>

55
sequences/web/style.css Normal file
View File

@@ -0,0 +1,55 @@
h1
{
font-size: 32px;
text-shadow: -1px -1px #0c0, 1px 1px #060, -3px 0 4px #000;
font-family:Arial, Helvetica, sans-serif;
color: #090;
padding:16px;
font-weight:lighter;
-moz-box-shadow: 2px 2px 6px #888;
-webkit-box-shadow: 2px 2px 6px #888;
box-shadow:2px 2px 6px #888;
text-align:center;
display:block;
margin:16px;
background-color: #76d7c4;
}
#banniere
{
font-size: 48px;
text-shadow: -1px -1px #9df, 1px 1px #49d, -3px 0 4px #000;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
color:#6bf;
padding:24px 32px 32px 32px;
font-weight:lighter;
-moz-box-shadow: 2px 2px 6px #888;
-webkit-box-shadow: 2px 2px 6px #888;
box-shadow:2px 2px 6px #888;
text-align:center;
display:block;
line-height:150px;
background-image:url(images/background-h1-wide.jpg);
}
/* faire le choix de la couleur en HTML : http://htmlcolorcodes.com/fr/*/
body{
background-color: #f7f9f9;
}
table tr:nth-child(odd) td
{
background-color: #E8E8FF;
}
h2, h3 {
background-color: gray;
color: navy;
radius-border : 5px;
}
ul,ol{
background-color: #1abc9c;
display : table;
}