Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: LuisM en 03 de Noviembre 2017, 20:53
-
Paso a dejar la respuesta al ejercicio CU01008D del tutorial de programación CSS por entregas. Desde ya muchas gracias por la atención. Un saludo,
Luis
EJERCICIO
Analiza el siguiente código HTML y crea dos esquemas. Un esquema de organización utilizando llaves como hemos visto anteriormente, y otro esquema que refleje las cajas que intervienen en el documento HTML, siguiendo el ejemplo visto anteriormente.
Primero quiero dejar el código HTML mejor indentado ;)
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
</head>
<body>
<p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>
La imagen del esquema en llaves:
(https://i.imgur.com/AOHSot2.jpg)
Y la imagen del esquema en cajas:
(https://i.imgur.com/QlvnVPT.jpg)
-
Hola Luis!!!
A tu primer esquema le falta algunas cositas, en primer párrafo tenia que abrir otra llave, para el link <a>, y tambien para el párrafo cuarto y sexto, pero en esos debias abrir otra llave para las imagenes <img>
Y en el segundo tambien te falto algunos detalles, debes tener en cuenta que en el código de muestra hay documentos que estan dentro de otro.
En el segundo es lo mismo, pero debes ponerles obviamente en una caja rectagunlar, como lo hicistes, en dicha caja del párrafo, debes abrir otra caja para el link.
Te dejo una resolución: https://www.aprenderaprogramar.com/foros/index.php?topic=6715.msg25128#msg25128 (https://www.aprenderaprogramar.com/foros/index.php?topic=6715.msg25128#msg25128)
Un saludo. ;D ;D ;D
-
Olvide decirte que en el segundo esquema te falto la caja de HTML.
-
Jorge, muchas gracias por tus correcciones !!! Uno aprende más de sus errores que de sus aciertos.
Mi error fue asociar el término "cajas" con elementos tipo "block". O sea, podemos decir que todo código y/o texto encerrado entre etiquetas es una caja con línea continua?. Corregime si me equivoco, por favor.
Otra cosa (y no es excusa), en la clase CU01008D se ejemplifica en forma detallada el esquema en cajas con el cuerpo de la página web, lo que encierra las etiquetas <body></body> de ahi la omisión del resto que hice, en mi caso fue el encabezado:<head></head>, y el total de la página:<html></html>
El siguiente esquema reflejaría el modelo de cajas del documento HTML de forma similar a como lo construye un navegador web como pueda ser Internet Explorer, Google Chrome o Mozilla Firefox, Safari, etc....
Ahora si, completé el ejercicio y pongo a continuación los esquemas que van.
Muchas gracias nuevamente !!
Un saludo,
Luis
PD: y muchas gracias por tus devoluciones en otros ejercicios que publiqué
(https://i.imgur.com/YIX7eiR.jpg)
(https://i.imgur.com/UtZB3ov.jpg)
-
Ahora si todo bien!!!
Mi error fue asociar el término "cajas" con elementos tipo "block". O sea, podemos decir que todo código y/o texto encerrado entre etiquetas es una caja con línea continua?
Sabemos que hay los elementos o modelos de cajas: inline y block, siempre, no importa si es inline o block, siempre son una cajas, si encontras un elemento block que puede ser un <div></div> y dentro de este, hay un inline, por ejemplo una imagen <img />, sabemos que la primera es una caja, dentro de ella hay otra caja, ¡cierto!.
Pero si encontras un texto suelto, por ejemplo en un formulario, ese texto no corresponde a una caja, solamente esta ocupando un espacio, y la que de verdad representa la caja es el formulario y como sabemos, dicho texto tiene que estar en una etiqueta especifica para que represente una caja, que sería <p></p>, que corresponde a un párrafo. o en una subdivisión <span></span>
Quisiste decir que solamente los elementos block son cajas, pero en realidad los elemento inline tambien son. Pero esto en realidad te muestra como es que los navegadores interpretan los elementos HTML., o como lo ven.
Un saludo.. ;D ;D ;D