Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Dan_SB en 30 de Abril 2015, 20:56

Título: HTML tutorial ejercicio resuelto CU00715B encabezados head y la etiqueta <pre>
Publicado por: Dan_SB en 30 de Abril 2015, 20:56
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:

(http://i.imgur.com/Gbg8u5e.jpg)

Y el ultimo mensaje (que lio para colocarlo igual eh? xd):
(http://i.imgur.com/dO5WBIk.png)

Esperare sus comentarios!
Saludos
Título: Re:Ejercicio (CU00715B), encabezados y la etiqueta <pre>
Publicado por: Mario R. Rancel 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.

(http://i.stack.imgur.com/GHIQx.jpg)

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
Título: Re:HTML tutorial ejercicio resuelto CU00715B encabezados head y la etiqueta <pre>
Publicado por: Dan_SB en 01 de Mayo 2015, 18:11
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