Autor Tema: HTML tutorial ejercicio resuelto CU00715B encabezados head y la etiqueta <pre>  (Leído 3918 veces)

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Buenas tardes!!

Vengo a resolver el ejercicio 15° del curso de html desde 0, el enunciado es el siguiente:

Crea una página web que conste de lo siguiente: un encabezado h1 que ponga “Las fotos de mi viaje”. A continuación un párrafo explicando un viaje. A continuación un encabezado h2 que indique “Fotos de la primera parte del viaje” y a continuación 2 fotos. Seguidamente un encabezado h2 que indique “Fotos de la segunda parte del viaje” y a continuación 2 fotos. Finalmente usando las etiquetas pre haz que aparezca este texto en la parte inferior usando espacios y tabuladores:

Aqui mi codigo:
Código: [Seleccionar]
<html>
<body>
<head><title>Mi viaje!</title></head>
<meta charset="utf-8">
 <h1>Las fotos de mi viaje!</h1>
<p Style = "text-align: left;font-size: 14; color: black">
En el dia de ayer viaje a la provincia de chiriqui. Cuando llegamos, al bajar senti el clima muy frio.
Nos quedamos en el hotel bambito, cenamos pollo y patacones, hablamos un rato y descansamos. A la mañana
siguiente, salimos a desayunar al restaurante "las lajitas" a comer bacalao y tortillas. Al salir, exploramos chiriqui, paseamos por
cerro punta, pude comer una manzana del mismo arbol y zarzamoras. Recorrimos el volcan baru y fue una
experiencia placentera..!

Lo unico malo, es que en las mañanas al bañarnos... sentiamos el agua congelada!!!
<h2>Fotos de la primera parte del viaje</h2>
<img src="http://images.bestday.com/_lib/vimages/Chiriqui/Hotels/Hotel-Bambito-Resort/Gallery/Chiriqui-Hotel-Bambito-Resort-Entrada.jpg" width="400" height="300">
<img src="http://fotos.muchoviaje.com/images/HB/13_135890_135890a_hb_w_004.jpg" width="400" height="300">
<h2>Fotos de la segunda parte del viaje</h2>
<img src="http://thepanamaportal.com/wp-content/uploads/2012/06/Cerro-Punta.jpg" width="400" height="300">
<img src="http://media-cdn.tripadvisor.com/media/photo-s/04/c7/2a/82/hacienda-las-nubes.jpg" width="400" height="300">
<pre>

<p Style = "text-align: center; font-size: 15;">
Los viajes                     ...son libertad
                                        ...son amistad
                       ...son crecimiento personal

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

Así es como se ve desde mi pc:



Y el ultimo mensaje (que lio para colocarlo igual eh? xd):


Esperare sus comentarios!
Saludos
« Última modificación: 01 de Mayo 2015, 08:56 por Mario R. Rancel »
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Ejercicio (CU00715B), encabezados y la etiqueta <pre>
« Respuesta #1 en: 01 de Mayo 2015, 08:55 »
Hola Dan, ahora con el html :)

Te indico las cosas que deberías corregir:

<p Style , el style es con minúsculas

En este fragmento de código:

Código: [Seleccionar]
<p Style = "text-align: left;font-size: 14; color: black">
En el dia de ayer viaje a la provincia de chiriqui. Cuando llegamos, al bajar senti el clima muy frio.
Nos quedamos en el hotel bambito, cenamos pollo y patacones, hablamos un rato y descansamos. A la mañana
siguiente, salimos a desayunar al restaurante "las lajitas" a comer bacalao y tortillas. Al salir, exploramos chiriqui, paseamos por
cerro punta, pude comer una manzana del mismo arbol y zarzamoras. Recorrimos el volcan baru y fue una
experiencia placentera..!

Lo unico malo, es que en las mañanas al bañarnos... sentiamos el agua congelada!!!
<h2>Fotos de la primera parte del viaje</h2>

Te ha faltado cerrar la etiqueta p, nunca olvides cerrar todas las etiquetas. Te recomiendo que actives en tu editor la visualización de apertura y cierre de etiquetas, así cuando te colocas encima de una etiqueta de apertura te indica dónde está la etiqueta de cierre remarcándolas de distinto color. En Notepad++ esto se consigue simplemente eligiendo en el menú Lenguaje la opción HTML, o simplemente guardando el archivo con extensión html.


Otra cosa que tienes que corregir:

Código: [Seleccionar]
<pre>

<p Style = "text-align: center; font-size: 15;">
Los viajes                     ...son libertad
                                        ...son amistad
                       ...son crecimiento personal

  ¡No desaproveches una oportunidad!</pre></p>

No puedes abrir una etiqueta <p> y luego cerrar una etiqueta </pre> antes de cerrar la etiqueta <p>


Cada vez que abres una etiqueta, tienes que cerrarla antes de poder cerrar otra.

Esto es incorrecto:

<pre>
<p>
</pre>
</p>


Esto es correcto:
<pre>
<p>
</p>
</pre>


Aunque el navegador muestra todo aquello que puede, incluso si hay errores en el código, tienes que intentar escribir código libre de errores.

Saludos

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Hola mario,

Así es, quiero darle al html y al CSS lo mas que yo pueda para no perderme con el php  :)

Muchas gracias por atender mi post, ya veo que se debe tener un orden con la apertura y cierre de las etiquetas. En cuanto lo del cierre automático del note++ ya lo active, lo que sucedio es que me acorde en un instante sobre el <pre> y despues me volvi un enrredo con el <p>

Saludos
"Luchar por tus sueños y cumplirlos... eso es vivir.."

 

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