ajout fichiers html et css pour tp web
This commit is contained in:
BIN
sequences/.DS_Store
vendored
BIN
sequences/.DS_Store
vendored
Binary file not shown.
119
sequences/web/index.html
Normal file
119
sequences/web/index.html
Normal 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><!-- --></td>
|
||||
<td>Commentaire</td>
|
||||
<td><!-- ici un commentaire --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p></td>
|
||||
<td>Paragraphe</td>
|
||||
<td><p>Ceci est un paragraphe.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h1> à <h6></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><br /></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><ul></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><ol></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><li></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><dt></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><table></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img /></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><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
55
sequences/web/style.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user