5546 sujets

Sémantique web et HTML

Salut, je suis en seconde et j'ai choisi l'option ICN. On doit refaire un site à partir d'un modèle mais j'ai quelques soucis. Les ordinateurs de mon lycée fonctionne avec Microsoft Edge. Cependant, personnellement, j'utilise Chrome.
Voici le modèle
Donc le but de l'exercice est de reproduire ce modèle sans CSS, juste en créant des tableaux.
Mais voici mon problème, lorsque je lance mon "code" sous Chrome, j'obtiens le résultat souhaité. Voilà
Mais avec Edge, l'image est décalée et le texte pas aligné
Voici le code
<!doctype html>
	<html>
		<meta charset="utf-8">
		<head>
			<title> Ma page </title>
		</head>
		<body bgcolor=Darkblue>
		<table bgcolor=white align=center cellspacing=5px width=1000px>
		<tr>
			<td border=10>
				<a href="http://info.cern.ch"> <img src=CERNLogos.gif> </a>
			</td>
		</table>
		<br>
		<table bgcolor=white align=center cellspacing=5px width=1000px>
			<tr>
				<td>
					<h2> Bienvenue sur info.cern.ch</h2>
				</td>
			</tr>
			<tr align=left>
				<td>
					<hr width="50%" align=left color=black>
				</td>
			</tr>
			<tr>
				<td> 
					<h3> Le site Web du tout premier serveur Web du monde </h3>
				</td>
			</tr>
			<tr>
				<td>
					<h4>1990, une année riche en événements:</h4>
					<ul>
						<li>En février, Nelson Mandela est libéré après 27 ans de prison</li>
						<li>En avril, la navette spatiale Discovery met en orbite le télescope spatial Hubble</li>
						<li>En octobre, l'Allemagne est réunifiée</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<h4>Et à la fin de l'année se produit une révolution qui va bouleverser notre mode de vie.</h4>
				</td>
			</tr>
			<tr border=2>
				<td>
					<table align=right bgcolor=lightgray cellspacing="0%">
						<tr>
							<td>
								<figure align=center>
									<img src=TimBerners.jpg title="Tim Berners-Lee" align=center bgcolor=lightgray title="ssss">
									<br>
									  <figcaption align=center>
									  		<font size="2" align=center>Tim Berners-Lee qui cherchait un moyen simple<br>et efficace de communiquer par odrinateur à<br>l'échelle mondiale, a realisé son rêve en créant le<br>World Wide Wed.
									  		</font>
									  </figcaption>
								</figure>
							</td>
						</tr>
					</table>
					<p>C'est au <acronym title="Laboratoire Européen de Recherche Nucléaire">CERN</acronym>, Organisation européenne pour la recherche nucléaire, en mars 1989, que tout commence. Un physicien, Tim Berners-Lee, rédige une proposition de gestion de l'information, expliquant comment transférer des données sur l'Internet en toute simplicité grâce à l'hypertexte, le système, aujourd'hui familier, permettant d'aller d'une information à l'autre d'un simple clic. L'année suivante, Robert Cailliau, ingénieur systèmes, apporte son concours, et devient rapidement un partisan résolu du système.</p>
					<p>L'idée de départ était d'associer l'hypertexte à l'Internet et aux ordinateurs personnels, afin de permettre aux physiciens du CERN de disposer d'un seul et unique réseau pour mettre en commun tous les éléments d'information stockés dans les ordinateurs du Laboratoire. L'hypertexte permettrait aux utilisateurs de naviguer facilement d'un texte à l'autre sur les pages Web au moyen de liens. Les premiers prototypes sont développés sur des ordinateurs NeXT.</p>
					<p>Tim Berners-Lee crée alors un système d'édition et de navigation visant à transformer le système en espace créatif pour mettre en commun et modifier les informations et élaborer un hypertexte commun. Comment appeler ce nouveau navigateur? La Mine d'informations? Les Mailles de l'information ? En mai 1990, le système est baptisé World Wide Web - la Toile mondiale.</p>
				</td>
			</tr>
		</table>
		</body>
	</html>
	

Si quelqu'un a une explication, et peux résoudre le problème avec Edge, je suis preneur Smiley murf
Smiley cligne
Modérateur
Salut

Goztiek a écrit :
Donc le but de l'exercice est de reproduire ce modèle sans CSS, juste en créant des tableaux.
C'est violent ça... c'est pas spécialement bon pour la suite non plus, la tendance est (depuis un petit moment déjà) à la séparation du style et du contenu.

Pour ton soucis apparemment Edge n’aime pas le align=center sur un <figure>. Le align en HTML est déprécié il me semble donc possible que edge ne le supporte plus sur certaines balises...

Pourquoi tu as utilisé figure ? Et pourquoi tu pas mis un table spécial autour ? tu ne peux pas juste tout mettre dans le td ?
<td align="center" bgcolor="lightgray">
<p>C'est au <acronym title="Laboratoire Européen de Recherche Nucléaire">CERN</acronym>, Organisation européenne pour la recherche nucléaire, en mars 1989, que tout commence.(...)</p>

Rien à voir avec la question, mais, en passant, <acronym> n'existe plus en HTML5. Il doit être remplacé par <abbr>.

Sinon, ne serai-il pas plus prudent d'utiliser HTML 4.01 au lieu de HTML5 ?
Modifié par thierry (19 Sep 2018 - 16:05)
Salut

JE NE JUGERAS PAS l'utilité de l'exercice consistant à se séparer du css.....
mais sache, que les <table> sont très très mal vue dans le milieu quand on les utilises pour faire de la mise en forme. Les tables c'est pour des vrais table (style excel..) pas pour un article !

mais je ne juge pas Smiley ravi

Pour résoudre ton problème il faut donc faire ton align=center (celui de ta table avec le bgcolor lightgray) dans la cellule <td>

<td  align=center>
								<figure>
									<img src=TimBerners.jpg title="Tim Berners-Lee" align=center bgcolor=lightgray title="ssss">
									<br>
									  <figcaption align=center>
									  		<font size="2" align=center>Tim Berners-Lee qui cherchait un moyen simple<br>et efficace de communiquer par odrinateur à<br>l'échelle mondiale, a realisé son rêve en créant le<br>World Wide Wed.
									  		</font>
									  </figcaption>
								</figure>
							</td>


Mais vraiment..... j'insiste..... ce genre de code c'est comme revenir au troc. C'est très ancien de coder avec des <tables>... je ne préconise pas du tout du tout.
* Bon courage pour la suite.
Modifié par JENCAL (19 Sep 2018 - 16:20)
thierry a écrit :
Cela dit, si tu pouvais nous donner la raison d'être d'un exercice si aberrant...

Je trouve que les <table> ne sont pas responsive.