5545 sujets

Sémantique web et HTML

Bac à sable HTML dérouté

Bonjour,
C'est mon premier post sur ce forum... Pardon pour les maladresse que je ne manquerais pas de faire...
Bon... je veux faire la synthèse de ce que je sais en HTML, pas grand chose et en profiter pour me faire une sandbox me permettant d'essayer mes codes. Donc, je fais une page mélange de php et d'HTML. La Sandbox (quand on change le texte dans textarea et qu'on le soumet) ne fonctionne que très partiellement. Il suffit par exemple de taper <style> et y'a plus personne, je suis dérouté vers une erreur 404... même chose que j'utilise GET ou POST. J'imagine qu'une partie de ce qui est posté est intérprété comme une adresse...
Voilà... J'ai tout mis, y compris le CSS sur une même page... Je voulais que vous ayez tout...
Merci d'avance pour votre aide.

<style>

body{
	margin:auto;
	width:1000px;
	background-color: #F1F1F1;
	}
div#Titre{
	text-align: center;
	font-family: Impact;
	font-size: 500%;
	color:#FF0000;
	}
div#Rectangle{
	margin-left: auto;
	margin-right: auto;
	width: 800px; 
	padding-top:20px; 
	text-align: center;
	padding-bottom:10px;
	border: none;
	background: #FFFFCE;
	font-family:Lucida console;
	}

div#RectangleBis{
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	height: auto;
	background: white;

	}

.Trait
{
	border-width:1px;
	border-style:double;
	width : 1000px;
}
a:link {color: black;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: red;}

textarea[name=Contenu] {
  width: 780px;
  height: 120px;
  resize: vertical;
  padding: 10px;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
  font-family:Lucida console;}
  
</style>
<?php if (empty($_POST["Contenu"])){$Contenu1= "<p>Bienvenue ! </p><p>Quelle est votre demande ?</p>";$Contenu2='Pas de code !';}	
 
 if (!empty($_POST["Contenu1"])){if($_POST['Contenu1'] == 'Votre code :') {$Contenu1=$_POST['Contenu1'];$Contenu2=$_POST["Contenu"];}	}

if ($_POST["Contenu"]=="TEXTE_Sans mise en forme"){
	$Contenu1="Il suffit d'écrire à l'extérieur des balises !";
	$Contenu2="Ce texte est écrit sans balises d'aucune sorte !";
	}
	
if ($_POST["Contenu"]=="TEXTE_Avec mise en forme"){
	$Contenu1="Il faut en général préciser ce que l'on veut dans une balise Font. Mais cette méthode est décriée; on lui préfèrera la mise en forme par CSS...";
	$Contenu2="<p>La police Verdana de taille 15 et de couleur bleue s'écrira...</p><font face='Verdana' size='15' color='blue'> <p>Monospace</p></font>";
	}
		
if ($_POST["Contenu"]=="TEXTE_Variable"){
	$Contenu1="<p>Pas de variable en HTML, il faudra passer par un autre langage (Javascript, php, etc.)<p>";
	$Contenu2="<p>Pas de variable en HTML, il faudra passer par un autre langage (Javascript, php, etc.)<p>";
	}
	
if ($_POST["Contenu"]=="TEXTE_Paragraphe"){
	$Contenu1="<p>Un paragraphe (c'est-à-dire un bloc de texte avec un retour à la ligne à la fin) se met entre des balises 'p'.<p>";
	$Contenu2="
	<p style = 'color:red;'><em> Voici trois paragraphes; les deux derniers étant constitués de faux texte ! On peut appliquer un style à un paragraphe; celui-ci est mis en rouge. La balise 'em', qui a pour effet de le faire passer en italique, signale son importance.'</em></p>
	
	<p>Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.<p/>
	
	<p>Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.</p>";
	}
if ($_POST["Contenu"]=="TEXTE_En gras"){
	$Contenu1="Pour écrire le texte en gras italique souligné, etc. on distinguera deux solutions selon qu'on veut seulement de la mise en forme ou également de la mise en valeur du contenu.";
	$Contenu2="
	<p>Normal</p>
	<p><b>gras</b></p>
	<p><i>italique</i></p>
	<p><u>souligné</u></p>
	</br>
	<p><strong>gras mis en valeur</strong></p>
	<p><em>italique mis en valeur</em></p>
	</br>
	<p><del>élément supprimé (apparaît en général barré)</del> </p>
	<p><sup>exposant avec sup</sup></p>
	<p><sub>indice avec sub</sub></p>
	<p><small>petit</small></p>
	<p><mark>surligné</mark></p>";
	}	
if ($_POST["Contenu"]=="TEXTE_En Gros"){
	$Contenu1="Pour changer la taille d'un texte, on utilisera la balise 'FONT SIZE'...";
	$Contenu2="  
			<FONT size='1'>Texte en 8 points</FONT><Br>
			<FONT size='2'>Texte en 10 points</FONT><Br>
			<FONT size='3'>Texte en 12 points</FONT><Br>
			<FONT size='4'>Texte en 14 points</FONT><br>";
	}
if ($_POST["Contenu"]=="TEXTE_En couleur"){
	$Contenu1="Pour écrire en couleur, on utilisera 'FONT color' et le nom de la couleur ou son code en hexadécimal!";
	$Contenu2="	<FONT color=red>Texte en rouge</FONT><BR>
				<FONT color=green>Texte en vert</FONT><BR>
				<FONT color=blue>Texte en bleu</FONT><BR>
				<FONT color='#5a98f7'>Texte en couleur quelconque</FONT>";
	}	
if ($_POST["Contenu"]=="TEXTE_Polices"){
	$Contenu1="Pour modifier les caractéristiques de la police d'écriture, on utilisera Font; mais cette méthode est décriée; on préférera la mise en page et le travail des polices en CSS...";
	$Contenu2="
	<font face='New Roman'> <p>New Roman</p></font>
	<font face='Arial'> <p>Arial</p></font>
	<font face='Console'> <p>Console</p></font>
	<font face='Monospace'> <p>Monospace</p></font>

	<font face='Monospace' size='15' color='red'> <p>Monospace</p></font>";
	}	
if ($_POST["Contenu"]=="TEXTE_Listes"){
	$Contenu1="Les éléments de listes sont encadrés par des balises 'li'. S'il s'agit d'une liste à points, la liste elle-même sera encadrée par des balises 'ul'; s'il s'agit d'une liste numérotée, elle sera encadrée par des balises 'ol' ";
	$Contenu2="
	<div text align=left>
	<ul>
	<li>Premier point</li>
	<li>Deuxième point</li>
	<li>Troisième point</li>
	</ul>

	<ol>
	<li>Numéro 1</li>
	<li>Numéro 2</li>
	<li>Numéro 3</li>
	</ol>
	</div>
	";
	}	
if ($_POST["Contenu"]=="TEXTE_Titres"){
	$Contenu1="Les titres sont encadrés par des balises h numérotées selon l'importance du titre. Cela va de h1 à h6. La façon dont ces titres apparaissent pourra bien sûr être définie au préalable en html aussi bien qu'en CSS";
	$Contenu2="
	<h1>Titre de niveau 1</h1>
	<h2>Titre de niveau 2</h2>
	<h3>Titre de niveau 3</h3>
	<h4>Titre de niveau 4</h4>
	<h5>Titre de niveau 5</h5>
	<h6>Titre de niveau 6</h6>

	<h1> <FONT color=red face='Arial'> Titre rouge police Arial de niveau 1 </FONT></h1>";
	}	
if ($_POST["Contenu"]=="TEXTE_Liens"){
	$Contenu1="Pour faire des liens, on utilisera des balises 'a' et indiquera la destination du lien, sa cible par href='...' Il y a de nombreuses possibilités avec les liens textuels...";
	$Contenu2="
	<p>Il existe des liens RELATIFS...<p>
	<p><a href='/CSS.php'>Lien vers une autre page de ce même site (au même niveau) </a></p>
	<br>
	<p>Il existe des liens ABSOLUS avec l'adresse complète d'une page...</p>

	<p><a href='http://www.auguste-vertu.com'>Lien vers un site de poésie</a></p>
	<br>


	<p>Il est possible de modifer l'apparence d'un lien, mais on préfèrera pour cela se référer à la section CSS...</p>
	<a href='https://www.rouge.com/' style='color:red;'>lien rouge</a>
	<br><br><br>

	<p>Vous pouvez faire apparaitre tu texte au survol de ce lien.</p><p> On parle 'd'info bulle' :</p>
	<p><a title='Nhésitez pas, cliquez !' href='http://www.auguste-vertu.com'>Lien vers un site de poésie</a></p><br>

	Vous pouvez utiliser un lien à partir d'une même page si elle est longue.<p></p> Il faut pour cela utiliser une 'ancre' qui réfère à un Id. 
	<a href='HTML.php#BasDePage'>Bas de page</a><br />
	<br>

	<p>Il est possible de faire des liens vers un mail...<p>
	<p><a href='mailto: emmn.philippon@laposte.net'>Envoyez moi un e-mail !</a></p>
	
	
	<p>Il existe des liens de télécharment...</p>
	<p><a title='Inutile de cliquer, en fait, il n'y a pas de fichier' href='monfichier.zip'>Télécharger le fichier</a></p>
	
	<p>Il est possible de faire des liens qui ouvrent une nouvelle fenêtre...</p>
	<p>Nhésitez pas à ouvrir la première page de  <a href='http://www.auguste-vertu.com' title='Ouvrira une nouvelle fenêtre' tarPOST='_blank'>www.auguste-vertu.com</a>; c'est très bien !</p>


	<br><br><br><br><br><br><br><br><br><br><br>
	<div id='BasDePage'><p>Ceci est bien le bas de ma page</p></div>";
	}		
if ($_POST["Contenu"]=="TEXTE_Alignement"){
	$Contenu1="L'alignement (ou le 'formatage' du texte se définit grâce à la propriété 'text align' ou tout simplement 'align' qu'on précisera par exemple dans la balise d'un titre ou d'un paragraphe. ";
	$Contenu2="
	<p text align=center> Centré ! </p>
	<p text align=left>Gauche !</p>
	<p text align=right>Droite !'
	<p text align=justify>Le texte est justifié lorsque qu'il fera toujours et systématiquement le maximum de la longueur allouée. C'est donc entre les mots que se jouera la régulation des espaces comme vous pouvez le voir ici même si j'ai besoin pour cela d'utiliser du 'faux texte' ! Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.</p>
	<br>
	<p>Cela est valable pour les titres...</p>
	<h1 text align=right ><FONT color=red>  Titre rouge à droite</FONT></h1>
	<br>
	<p> On peut donner aussi l'instruction dans une blaise de bloc telle qu'une balise div:</p>
	<div align='center'>
	<h1>Chanson d'automne</h1>
	<h3><i>de Paul Verlaine</i></h3>
	<br>
	Les sanglots longs<br>
	Des violons<br>
	De l’automne<br>
	Blessent mon coeur<br>
	D’une langueur<br>
	Monotone.<br>
	</div>";
	}	
	
?>

<head>
<title>HTML</title>
<link href="Decodeur-style.css" rel="stylesheet" media="all" type="text/css"> 
</head>


<body>
<script>

</script>
</br></br>
<div style="text-align: center">

<a href="HTML.php">HTML</a>-
<a href="CSS.php">CSS</a>-
<a href="JAVASCRIPT.php">Javascript</a>-
<a href="PHP.php">PHP</a>


</div>
</br>
<div class="Trait"></div>  
<form action="" method = "POST">
<select   id="TEXTE" name="Contenu" onChange="this.form.submit();">
			<option selected>- TEXTE-</option>
			<option value="TEXTE_Sans mise en forme">Sans mise en forme</option>
			<option value="TEXTE_Avec mise en forme">Avec mise en forme</option>
			<option value="TEXTE_Variable">Variable</option>
			<option value="TEXTE_Paragraphe">Paragraphe</option>
			<option value="TEXTE_En gras">En gras, italique...</option>
			<option value="TEXTE_En Gros">En gros, petit...</option>			
		    <option value="TEXTE_En couleur">En couleur</option>		
			<option value="TEXTE_Polices">Polices différentes</option>
			<option value="TEXTE_Listes">Listes</option>	
			<option value="TEXTE_Titres">Titres</option>	
			<option value="TEXTE_Liens">Liens</option>	
			<option value="TEXTE_Alignement">Alignement</option>
			<input id="AFFICHER" name="AFFICHER" type="hidden">
		   
</select>   
<select   id="MONTRER" onChange="Hid='MONTRER'; GO();">
			<option selected>- BONJOUR -</option>
           <option value="Guten tag !">Allemand</option>
           <option value="Bonjour">lFrançais</option>
           <option value="Hello">Anglais</option>
</select>   

</form>
<div id="Titre">CSS</div>
<div id="Rectangle"><?php echo $Contenu1;?><br><br>
 
		<form action="" method="POST">
 
        <textarea name="Contenu"><? echo $Contenu2; ?></textarea>
		<input type="hidden" Value="<? echo 'Votre code :'; ?>" name="Contenu1"><br><br>
		<input type="Submit" Value="Ce qui nous donne...">
		 
		 </form>

<br>
<div id="RectangleBis"><br><br><? if(!empty($Contenu2)){echo $Contenu2;}?><br><br></div></div>
</body>

Modifié par A-V (27 Apr 2020 - 14:36)
Modérateur
Et l'eau,

Le souci est que tu veux faire du php alors que les bases ne sont pas acquises. Je te conseille fortement à maîtriser le html/css avant de passer à la vitesse supérieur (JS/PHP/Python/Ruby/Java/C#/etc.). Sinon, ce sera direction le mur obligatoirement.
Sujet clos
Aller à