Autor Tema: Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html  (Leído 8002 veces)

emacg79

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 9
    • Ver Perfil
Ejercicio (CU00715B)

Código: [Seleccionar]
<html>
     <head>
           <title>Las fotos de mi viaje</title>
     </head>
<body>
        <p style="text-aling: center;"><h1>Las fotos de mi viaje</h1></p>
            <p style="texte-aling: left;">Nos decidimos a enprender un viaje a un lugar paradisiaco en donde la naturaleza nos impacte de tal modo que nunca se nos borre ese recuerdo</p>
<p style="texte-aling: left;"><h2>Foto de la primera parte del viaje</h2></p>
<img src="http://4.bp.blogspot.com/-coF7W2YYwXM/T_zyW5SyTaI/AAAAAAAA_2s/m0QtIyscN9c/s1600/playas-exoticas-en-el-fin-del-mundo.jpg"  alt="dentro de una caverna" border="5">
<img src="http://3.bp.blogspot.com/-A2X25M9meSI/UFEPt5hYouI/AAAAAAABHXM/Px5RnoqNoJA/s1600/postal-de-las-playas-exoticas-en-las-islas-maldivas.jpg" alt="sigo en el mismo lugar" border="5">

<p style="texte-aling: left;"><h2>Fotos de la segunda parte del viaje</h2></p>
<img src="http://yogasomostodos.org/wp-content/uploads/2012/08/cueva-playa-hawaii.jpg" alt="lindo lugar" border="5">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSpOuA5qB75j5hvnK_swU7hsOq0ODFCX69f74ZmRyntTX72aHuF" alt=lindo lugar" border="5">
<pre>
     Los viajes ...son libertad

...son amistad

...son crecimiento personal


No desaproveches una oportunidad!
            </pre>
</body>
</html>
« Última modificación: 14 de Octubre 2014, 23:11 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #1 en: 14 de Octubre 2014, 23:13 »
Hola, el ejercicio está bien resuelto, enhorabuena.

Cosas a tener en cuenta:

Escribe el código entre etiquetas [cod] ... [/cod] en lugar de ponerlo como archivo adjunto.

Estás usando imágenes con tamaños demasiado grandes para webs. Por ejemplo estás usando imágenes de 1 600px × 1066px cuando las dimensiones no deberían superar por lo general 800x600.

Para comprobar las dimensiones de una imagen, haz click con botón derecho y luego pulsa en "propiedades" o "ver información de la imagen".

Saludos

emacg79

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 9
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #2 en: 16 de Octubre 2014, 20:25 »
tengo una pregunta que hacerles, tengo un problema con un archivo que hice para un ejercicio
Código: [Seleccionar]
(CU00814B) ya que cuando hice el primero /index.php me salioi bien pero cuando hice el /curso.php y /alumno.php el navegador salio en blacon sin los texto que edite con Notepad++ voy adjuntar el archivo para que ustedes lo vea y me expliquen que hice mal
« Última modificación: 16 de Octubre 2014, 23:29 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #3 en: 16 de Octubre 2014, 23:30 »
Este hilo de conversación corresponde al ejercicio CU00715B del curso de HTML. Si tienes una consulta sobre php o sobre otra cuestión, abre un nuevo hilo. Esto lo hacemos básicamente para mantener ordenado el foro y no mezclar los temas. Saludos,
Responsable de departamento de producción aprenderaprogramar.com

SITOAPRENDIZ

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 29
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #4 en: 12 de Febrero 2015, 22:08 »
Buenas noches a todos. Os dejo mi código del ejercicio CU00715B Encabezados HTML<h1>a<h6><p> <pre>.
En el caso del código del compañero "Emacg79" creo que no está del todo completo. Y además, he podido observar que si a la primera parte del ejercicio(Un encabezado h1 que ponga "Las fotos de mi viaje"), la ponemos entre las etiquetas de título <title>, no se diferencia el tamaño que le da <h1>.
Mi pregunta es la siguiente:Tal y como yo lo he escrito, ¿es correcto prescindir de las etiquetas <title></title> para poner el encabezado<h1>? Yo lo he escrito así porque sino, no se ve la diferencia de tamaño que adquiere este título de:"Las fotos de mi viaje". Ahí les dejo el código y espero vuestra respuesta. Gracias de antemano.
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset=utf-8>
<html>
<head>
<h1>Las fotos de mi viaje</h1>
</head>
<body>
El viaje a Formentera con mi mujer Merce fue realmente placentero. La ida y llegada muy rapidas y cómodas. Y la estancia fue agradable, con todo tipo de detalles y gran calidad.
<h2><p>Fotos de la primera parte del viaje</h2></p>
<img src="http://www.formentera.es/files/img/small/20120209141931_465853.jpg" width="200px" height="200px" title="bonito apartamento">
<img src="http://www.formentera.es/files/img/small/20120216092238_231493.jpg" width="200px" height="200px" title="y muy comodo">
<h2><p>Fotos de la segunda parte del viaje</h2></p>
<img src="http://www.disfrutalaplaya.com/es/Formentera/Formentera/Cala_en_Baster/fullsize/1.jpg" width="200px" height="200px" title="cala En Baster">
<img src="http://www.disfrutalaplaya.com/es/Formentera/Formentera/Es_Calo_des_Mort/fullsize/1.jpg" width="200px" height="200px"
title="Es Calo d'En Mort">
<pre>Los viajes                     ......son libertad
                                        ......son amistad
                                           .......son crecimiento personal

                                     ¡No desaproveches una oportunidad!
</pre>
</body>
</html>
             

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #5 en: 12 de Febrero 2015, 23:29 »
Hola, estás cometiendo un error "grave", pero para eso estamos aquí, para aprender  ;D

Tu error grave: dentro de head no debe aparecer ningún contenido "visible" de la página. Por tanto no tiene sentido escribir etiquetas <h1> dentro de head. Las etiquetas que pueden ir dentro de head las tienes en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=474:head-y-body-html-etiquetas-basicas-de-paginas-web-title-titulo-meta-tag-description-y-keywords-cu00711b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

Si quieres que aparezca un texto en la página debes ponerlo dentro de body, no dentro de head.

Lee con calma lo que ahí dice:

La cabecera del documento es la sección comprendida entre <head> y </head>. En ella se debe encontrar, obligatoriamente, el título (entre las etiquetas <title> y </title>).

Además de la etiqueta title dentro de la sección de cabecera se suelen incluir otras etiquetas. La siguiente tabla muestra un resumen de elementos que pueden ir dentro de la etiqueta head...

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.

Etc.

Salu2

SITOAPRENDIZ

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 29
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #6 en: 15 de Febrero 2015, 10:57 »
Muchas gracias por tu atención OGRAMAR, se que es un gran fallo que viene dado por querer ir demasiado deprisa. Tengo una pregunta:
¿como puedo hacer para que me salga el texto a la izquierda(este lo tengo claro con el atributo "left") PERO A LA ALTURA SUPERIOR DE LA IMAGEN, en vez de a pie de imagen como me sale. NO ENCUENTRO EL ATRIBUTO(he probado de poner "up" y "high" pero no lo consigo).
Gracias de antemano

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #7 en: 15 de Febrero 2015, 21:18 »
Hola, no comprendo a qué te refieres exactamente ni a qué código te refieres. Si quieres que un texto aparezca antes de una imagen simplemente tienes que ponerlo antes de la imagen  ???

SITOAPRENDIZ

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 29
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #8 en: 15 de Febrero 2015, 23:21 »
Hola OGRAMAR y buenas noches a todos. Para que me entiendas te dejo primero el código y luego te aclaro mis dudas.
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset=utf-8>
<html>
<head>
<title>Las fotos de mi viaje</title>
</head>
<body>
<h1><p style="text-align: center;">Las fotos de mi viaje</p></h1>
<p style="text-align: left; font-size: 18px;">El viaje a Formentera fue un viaje inolvidable, de puro placer y relax para poder desconectar con la monotonia y el estres del trabajo. Las calas que visitamos eran cuanto menos, preciosas. Y cuanto más recónditas, más bellas y exóticas eran. Y cuando vuelva a encontrar trabajo, lo celebraremos allí.</p>
<h2><p style="text-align: left;">Las fotos de la primera parte</h2></p><img src="http://q-ec.bstatic.com/images/hotel/square200/214/21480865.jpg"> <img src="http://r-ec.bstatic.com/images/hotel/square200/268/26829642.jpg">
<h2><p style="text-align: left;">Las fotos de la segunda parte</h2></p><img src="http://es.blog.hotelnights.com/wp-content/plugins/php-image-cache/image.php?path=/wp-content/uploads/2013/07/es-calo-des-mort.jpg" width="200px" height="200px"> <img src="http://es.blog.hotelnights.com/wp-content/plugins/php-image-cache/image.php?path=/wp-content/uploads/2013/07/cala-en-baster.jpg" width="200px" height="200px">

<pre>
Los viajes                                                    ...son libertad


                                                                    ...son amistad


                                                                             ....son crecimiento personal


                                       ¡No desaproveches una oportunidad!
</body>
</html>


Ante todo, dime si el código es correcto y si se puede mejorar. Ahora explico mis dudas:
Introduciendo este código, las frases "Fotos de la primera parte" y "Fotos de la segunda parte" me salen encima de las imágenes. ¿como puedo hacer para que las imágenes queden a la derecha y las frases queden a la izquierda a la altura de la esquina superior de las fotos?. Así:

Fotos de la primera parte                                                                    I
                                                                                                            M
                                                                                                            A
                                                                                                            G
                                                                                                            E
                                                                                                            N

Fotos de la segunda parte                                                                   I
                                                                                                            M
                                                                                                            A
                                                                                                            G
                                                                                                            E
                                                                                                            N.
Espero haberme explicado mejor. Gracias


Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #9 en: 16 de Febrero 2015, 08:18 »
Hola te indico los errores en el código:

Mal: <h2><p style="text-align: left;">Las fotos de la primera parte</h2></p>

Sería bien: <h2>Las fotos de la primera parte</h2>

No debes entremezclar etiquetas h con etiquetas p, y sobre todo cada etiqueta tiene que cerrar con la más próxima que tiene. Por ejemplo <h2><p> ... </h2></p> no está bien porque si abres una etiqueta h2 y luego una p, la p tiene que cerrar antes que la h2. Si fuera <h1><p><span> primero tendrías que cerrar span, luego p y luego h1, siempre se cierra en orden, la última que abre es la primera que cierra.

Con esto ya tendrías el ejercicio correcto. Sobre la duda de hacer que las imágenes queden a la derecha y las frases queden a la izquierda a la altura de la esquina superior de las fotos, se haría con CSS. Eso se explica en este curso http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203 que vendría después del curso de HTML.

Salu2

SITOAPRENDIZ

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 29
    • Ver Perfil
Re:Ejemplo (CU00715B) Encabezados HTML h1 a h6. Párrafos..html
« Respuesta #10 en: 17 de Febrero 2015, 10:23 »
Muchas gracias por el aporte y tus correcciones, he tomado nota de todo con el fin de no volver a repetir en próximos códigos los mismos errores.. También me he dado cuenta de que no había cerrado la etiqueta </pre>.
De todas formas te dejo el código corregido por si detectas alguna otra anomalía.
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset=utf-8>
<html>
<head>
<title>Las fotos de mi viaje</title>
</head>
<body>
<h1><p style="text-align: center;">Las fotos de mi viaje</p></h1>
<p style="text-align: left; font-size: 18px;">El viaje a Formentera fue un viaje inolvidable, de puro placer y relax para poder desconectar con la monotonia y el estres del trabajo. Las calas que visitamos eran cuanto menos, preciosas. Y cuanto más recónditas, más bellas y exóticas eran. Y cuando vuelva a encontrar trabajo, lo celebraremos allí.</p>
<h2>Las fotos de la primera parte</h2><img src="http://q-ec.bstatic.com/images/hotel/square200/214/21480865.jpg"> <img src="http://r-ec.bstatic.com/images/hotel/square200/268/26829642.jpg">
<h2>Las fotos de la segunda parte</h2><img src="http://es.blog.hotelnights.com/wp-content/plugins/php-image-cache/image.php?path=/wp-content/uploads/2013/07/es-calo-des-mort.jpg" width="200px" height="200px"> <img src="http://es.blog.hotelnights.com/wp-content/plugins/php-image-cache/image.php?path=/wp-content/uploads/2013/07/cala-en-baster.jpg" width="200px" height="200px">

<pre>
Los viajes                                                    ...son libertad


                                                                    ...son amistad


                                                                             ....son crecimiento personal


                                       ¡No desaproveches una oportunidad!
</pre>
</body>
</html>


.
A partir de aquí y de haber realizado y apuntado las correcciones pertinentes, paso al estudio del otro módulo CU00716B.
Saludos.

 

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".