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

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Buenas tardes, dejo mi respuesta al ejercicio CU00727B:

   
Código: [Seleccionar]
   <!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>

 
« Última modificación: 26 de Enero 2016, 09:26 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Página principal. Cabecera, menú, cuerpo y pie. Código (CU00727B)
« 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

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
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.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".