Autor Tema: HTML ejemplo página principal Cabecera, menú, cuerpo y pie. Código (CU00727B) (Leído 5129 veces)

Lorenzo31 · « **en:** 24 de Enero 2016, 19:28 »

Buenas tardes, dejo mi respuesta al ejercicio CU00727B:

   <!DOCTYPE html>
<html>
    <head> <meta charset="utf-8"/> <title>Ejercicio727B</title> </head>
	
	<body style="border: 1px solid red; margin:auto;">
	     <!-- Division CABECERA -->
	     <div id="header" style="margin:5px;"> 
		     <h1 style="color:blue; text-align:center;"> <img src="http://www.ainurblog.es/wp-content/uploads/2011/11/Ainur-chiste-informatico-3.jpg"
			     alt="Imagen Mouse" width="16%"/>
			     Página dedicada al Humor
			     <a href="https://www.aprenderaprogramar.com/foros/" target="_blank" title="Ir al FORO de www.aprenderaprogramar.com"> <img src="http://www.chistes21.com/img/chistes/1101_infidelidad.jpg" 
				 alt="Imagen Mouse2" width="20%"/>
				 </a>
			 </h1>
			 
	     </div>
	   
	     <!--CONTENEDOR -->
		 <div id="wrapper">
	   
			 <!--Division CUERPO -->
			 <div id="body" style="margin:5px;">
			     <p> Menú <br/> <hr style="height:1px; color:red;"/> 
				     <ol style="list-style-type:upper-roman;">
					     <a href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=10&Itemid=48" target="_blank">
						     <li>Humor Informático</li> </a>
						 <a href="http://chistes.yavendras.com/negro.php" target="_blank">
						     <li>Humor Negro</li> </a>
	                     <a href="http://ocioaventurasitges.com/tienda/humor-amarillo/" target="_blank">
						     <li>Humor Amarillo</li> </a>
						 <a href="http://www.rincondechistes.com/sexo/chistesverdes.html#" target="_blank">
						     <li>Humor Verde</li></a>
						 <a href="http://www.1000chistes.com/chistes-malos" target="_blank">
						     <li>Chistes Malos</li></a>
					 </ol>	 
				 </p>
				 <p>   <pre>                          CHISTE
                         - ¿Tienes wifi?
                         - Sí. 
                         - ¿Y cuál es la clave? 
                         - Tener dinero y pagarlo.
					 <pre>
				 </p>
				 <img src="http://www.fotoshumor.com/carpeta/1/original/418081282116717.jpg" width="20%"/> 
				   
				 
				 <p> 
				         En la clase de Jaimito, la maestra les pide a los niños que se porten bien aquella tarde porque el director iría a visitar la clase. 
					 Les pide específicamente que no digan: "Maestra: ¿puedo ir al baño a orinar?" Sino que digan: "Maestra:¿ puedo ir a cortar una flor?"
					 Pues se escucha más bonito y eso impresionaría al director. Llega la hora, y el director entra y se sienta, los niños empiezan a llamar 
					 a la maestra... 
					 Juanito "Maestra: ¿puedo ir a cortar una flor?", María: "¿Maestra: puedo ir a cortar una flor?" , 
					 Pablito "¿Maestra: puedo ir a cortar una flor?" y sale Jaimito: "Maestra,¿ me presta papel para limpiarme el florero
                 </p>
			 </div>
	   
			 <!-- Division PIES -->
			 <div id="footer" style="margin:5px;">
				 <p> <img src="http://g.cdn.ecn.cl/humor/files/2015/09/chiste-corto-19.jpg" width="10%"/> &nbsp;&nbsp;&nbsp;&nbsp; www.aprenderaprogramar.com Copyright 2016-2076  
					&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://aprenderaprogramar.com/">Ir a APRENDERAPRORAMAR.COM</a>
				 </p>
			 </div>
	   
	   </div>
	</body>
</html>

Alex Rodríguez · « **Respuesta #1 en:** 26 de Enero 2016, 09:26 »

Hola Lorenzo todo bien, te enumero algunas cosas que recomendaría tener en cuenta.

Has incluido distintos elementos dentro de las etiquetas h1 (por ejemplo imágenes)

Código: [Seleccionar]

<h1 style="color:blue; text-align:center;"> <img src="http://www.ainurblog.es/wp-content/uploads/2011/11/Ainur-chiste-informatico-3.jpg"
			     alt="Imagen Mouse" width="16%"/>
			     Página dedicada al Humor
			     <a href="https://www.aprenderaprogramar.com/foros/" target="_blank" title="Ir al FORO de www.aprenderaprogramar.com"> <img src="http://www.chistes21.com/img/chistes/1101_infidelidad.jpg"
				alt="Imagen Mouse2" width="20%"/>
				</a>
			</h1>

Supongo que es para lograr alineado, pero en realidad diría que no es correcto aplicar un h1 sobre otros elementos que no sean los títulos en sí (o si acaso sobre una subdivisión span). El alineado se resolvería usando CSS y cada etiqueta la dejaríamos aplicada sobre lo que le corresponde (el h1 sobre el texto del título).

El uso de <pre> ... </pre> genera un formato de fuente un poco extraño, estas etiquetas no son demasiado habituales (lo normal sería controlar la forma de visualización con CSS).

A seguir, Saludos,

Lorenzo31 · « **Respuesta #2 en:** 26 de Enero 2016, 11:30 »

buenos días Alex,

Efectivamente, esa era mi intención , la de alinear visualmente.
Tomo nota de tus consejos, h1 para texto only y prescindir de pre.

Seguiré con el curso CSS, al acabar HTML, ya Mario me aconsejó que así lo hiciera y leyéndoos después , cobra más sentido en mi cabeza el porqué.

Gracias Alex como siempre por ayudar en los detalles, que marcan la diferencia.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: