Le site de Théo - [Tableaux Maths]

Le site de Théo

Théo référence ses vidéos dans un site html

Article mis en ligne le 8 avril 2016

dernière modification le 9 mai 2016

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>

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;
}