Le site de Théo

vendredi 8 avril 2016 (actualisé le 9 mai 2016) par wlaidet

Voici son site :

http://tableauxmaths.fr/productions_eleves/site_Theo/site.html

Voici son site à jour : http://technewsite.pe.hu/

Voici les codes html et css :

Le html d’une des pages :

<!DOCTYPE html>
<html>
<head>
<title> Technew site Accueil </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8"/>
</head>
<body>
<div id="ancre1"> </a>
</div>
<div id="banner1">
<p>Technew site</p>
</div>

<div id="menu">
<ul>
<li><a href="site.html">Accueil</a></li>
<li><a href="telechargement.html">Téléchargement</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="infos.html">Infos</a></li>
</ul>
</div>
<div id="banner2">
</div>
<div id="Contenu">
<br>
<br>
<div id="tableau">
<center>
<table>
<caption> Mes vidéos : </caption>
<tr>
<th colspan="2"><iframe width="560" height="315" src="https://www.youtube.com/embed/2PLV3s2cmaY?rel=0" frameborder="0" allowfullscreen></iframe></th>
</tr>
<tr>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/JYIHBBv2LmM?rel=0" frameborder="0" allowfullscreen></iframe></th>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/1NfEtxaB61Q?rel=0" frameborder="0" allowfullscreen></iframe></th>
</tr>
<tr>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/A51JLVFB338?rel=0" frameborder="0" allowfullscreen></iframe></th>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/zMElun4U1nw?rel=0" frameborder="0" allowfullscreen></iframe></th>
</tr>
<tr>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/eDODywcFoPQ?rel=0" frameborder="0" allowfullscreen></iframe></th>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/4Dkvv53w0Sw?rel=0" frameborder="0" allowfullscreen></iframe></th>
</tr>
<tr>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/TTAlM9EjyCE?rel=0" frameborder="0" allowfullscreen></iframe></th>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/1m6eE0ZLFD4?rel=0" frameborder="0" allowfullscreen></iframe></th>
</tr>
<tr>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/9l0dEA3my5o?rel=0" frameborder="0" allowfullscreen></iframe></th>
<th><iframe width="560" height="315" src="https://www.youtube.com/embed/ac2O95ZVH-k?rel=0" frameborder="0" allowfullscreen></iframe></th>
</tr>
</table>
</center>
</div>
<div id="lien">
<p>Vous trouverez toutes les autres vidéos de la chaîne <a href="https://www.youtube.com/channel/UCvDyIgsdxEDGxD4bkIU_5DA/videos">ici</a></p>
</div>
</div>
<div id="renvoi">
<a href="#ancre1"><p>Haut de la page</p></a>
</div>
<div id="footer">
<p>Technew Site</p>
</div>
</body>
</html>

Télécharger

Le css de cette page :

body {
margin: 0;
overflow-x: hidden;
}

#banner1{
display: block;
background-color: black;
height: 50px;
width: 100%;
}

#banner1 p {
margin: 0;
font-weight: bold;
font-size: 40px;
text-align: center;
color: red;
position: relative;
top: 2px;
}

#menu {
min-width: 400px;
background-color: grey;
height: 100px;
width: 100%;
position: relative;
}

#menu form {
text-align: right;
}

#menu form :hover {
color: red;
}

#menu ul {
position: relative;
padding-top: 15px;
margin-left: -60px;
float: left;
left: 50%;
}

#menu ul li {
float: left;
left: -50%;
position: relative;
list-style-type: none;
margin-left: 20px;
}

#menu ul li a {
text-align:center;
padding-top: 5px;
text-decoration: none;
color: white;
display: inline-block;
background-color: black;
height: 20px;
width: 110px;
}

#menu ul li a:hover {
color: red;
}

#banner2{
display: block;
background-color: black;
height: 50px;
width: 100%;
}

#Contenu {
display: block;
width: 90%;
margin: auto;
}

#mail p {
display: block;
width: 90%;
margin: auto;
}

#telechargement p {
display: block;
width: 90%;
margin: auto;
}

#renvoi p {
display: block;
color: blue;
text-align: right;
}

#footer {
display:block;
text-align: center;
background-color: black;
height: 50px;
}

#footer p {
color: white;
font-weight: bold;
position: relative;
top: 15px;
}

Télécharger