Autor Tema: Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D (Leído 3070 veces)

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

Código: [Seleccionar]

<!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:

Y la imagen del esquema en cajas:

KOFFERO · « **Respuesta #1 en:** 07 de Noviembre 2017, 22:32 »

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

Un saludo.

KOFFERO · « **Respuesta #2 en:** 08 de Noviembre 2017, 06:23 »

Olvide decirte que en el segundo esquema te falto la caja de HTML.

LuisM · « **Respuesta #3 en:** 08 de Noviembre 2017, 22:09 »

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>

Citar

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é

KOFFERO · « **Respuesta #4 en:** 09 de Noviembre 2017, 04:13 »

Ahora si todo bien!!!

Citar

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D (Leído 3070 veces)

LuisM

Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D

KOFFERO

Re:Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D

KOFFERO

Re:Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D

LuisM

Re:Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D

KOFFERO

Re:Estructura HTML y su semántica al modelo de cajas CSS. Block e inline. CU01008D

Preguntas y respuestas