Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - Chompy129

Páginas: 1 2 3 4 5 [6] 7
101
Aprender a programar desde cero / HTML y CSS Interpretación de código qué significa nav-menu ul li etc CU01049D
« en: 23 de Septiembre 2016, 07:00 »
Ejercicio resuelto CU01049D del tutorial sobre fundamentos de la programación web con CSS.

Menú horizontal CSS o vertical. Crear menús con efectos a partir de listas CSS. Código ejemplos (CU01049D)

Aquí esta el código que interpretare:

Código
Código: [Seleccionar]
<html><head><title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
/*Curso CSS aprenderaprogramar.com*/
#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0; }
#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}
#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}
#nav-menu li a:hover {background-color: #FF6347; }
</style></head>
<body><div id="nav-menu">
<ul id="navlist"><li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul></div></body></html>
INTERPRETACIÓN

Se puede ver en el documento HTML que hay un divisor <div id="nav-menu">, dentro de el se encuentra una lista no ordenada <ul id="navlist">, en el varios elementos li, cada uno con un link propio <a>, el primero de ellos lleva una id con valor "active".

Luego están las hojas de estilos que lleva interno el documento HTML:

#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0; }. La lista no ordenada que este dentro de un elemento que lleve id="nav-menu" tendrá de fuente sans-serif, no tendra viñetas y no tendra relleno o margen alguno.

#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}. Aquí los elementos li que estén dentro de un elemento con id="nav-menu", flotara a la izquierda; tendrá un margen a la derecha de 0.15em; un borde de 5px de grosor, con estilo groove y sera de color #FFAA33.

#nav-menu li a { background-color: #FFC0CB; height: 2em; line-height: 2em; float: left;
width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center;}. Los vínculos que estén dentro de un elemento li que a su vez este dentro de un elemento con id="nav-menu", tendrá un color de fondo #FFC0CB; dos veces su altura normal; la linea que ocupe sera dos veces mas alto; flotara hacia la izquierda; será 9 veces mas ancho; se comportara como un elemento block; tendrá un borde con 0.1em de grosor, estilo solido y de color #DCDCE9; el color de la fuente sera #0D2474; se anulara el subrayado y el texto se alineara al centro.

#nav-menu li a:hover {background-color: #FF6347; }. A los vínculos que esten dentro de un elemento li que a su vez este dentro de un elemento con id="nav-menu", cambiara su color de fondo a #FF6347 apenas el mouse se muestre encime de el.

102
Aprender a programar desde cero / HTML y CSS. list-style. Shorthand de las listas. Ejercicio resuelto CU01048D
« en: 23 de Septiembre 2016, 04:29 »
Ejercicio CU01048D del curso de fundamentos de desarrollo web con CSS.

Listas CSS. list-style-type, list-style-position (outside, inside), list-style-image. Shorthand list-style. (CU01048D)

Aquí les dejo el ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listas</title>
<link rel="stylesheet" type="text/css" href="Listas.css">
</head>
<body>
<ul>
<li class="lipr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lipr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lipr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lise">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lise">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lise">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="litr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="litr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="litr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="licu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="licu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="licu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="liqu" value="1">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="liqu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="liqu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lisex" value="1">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisex">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisex">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lisep">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisep">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisep">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lioc">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lioc">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lioc">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lino">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lino">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lino">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
</ul>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial;}

/*Lista*/
ul{width: 400px;
   background-color: #FA0;
   border: 3px solid #000;}
/*Elementos de la lista*/

li:nth-child(odd){font-weight: bold;}

.lipr{list-style-type: disc; list-style-position: outside;}

.lise{list-style-type: circle; list-style-position: inside;}

.litr{list-style: square inside;}

.licu{list-style-type: none;}

.liqu{list-style: decimal outside;}

.lisex{list-style: decimal-leading-zero outside;}

.lisep{list-style: lower-roman inside;}

.lioc{list-style: upper-alpha inside;}

.lino{list-style: disc outside url(https://lh6.googleusercontent.com/-l7zUK30iIgw/UlfKjx_P3BI/AAAAAAAAAjI/sh8EjTxxZ3I/s38/CU01047D_2.png);}

103
Aprender a programar desde cero / HTML y CSS. font-variant, font-family, shortthand. Ejercicio resuelto CU01045D
« en: 21 de Septiembre 2016, 21:18 »
CSS font-family. tipografía (tipos de letra). Lista de tipos. font-variant (small-caps). Shorthand font (CU01045D)

Aquí esta la actividad CU01045D del curso sobre fundamentos de la programación web con CSS:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAS FUENTES</title>
<link rel="stylesheet" type="text/css" href="fuentes.css">
</head>
<body>
<div id="div1">Continuamos viendo posibilidades que ofrece CSS en relación a los textos. Un aspecto importante de los textos es el tipo de letra que usan y cómo se configura la letra.<br>
<span>Hay distintas propiedades para configurar la tipografía, entre ellas font-family, font-variant y la propiedad shorthand font.</span></div>
<div id="div2">Continuamos viendo posibilidades que ofrece CSS en relación a los textos. Un aspecto importante de los textos es el tipo de letra que usan y cómo se configura la letra.<br>
Hay distintas propiedades para configurar la tipografía, entre ellas font-family, font-variant y la propiedad shorthand font.</div>
<div id="div3">Continuamos viendo posibilidades que ofrece CSS en relación a los textos. Un aspecto importante de los textos es el tipo de letra que usan y cómo se configura la letra.<br>
Hay distintas propiedades para configurar la tipografía, entre ellas font-family, font-variant y la propiedad shorthand font.</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*Los div por id*/
div{margin: 33px; padding: 25px; width: 100%; border: 5px solid rgb(255, 0, 0);}

#div1{font-size: 18px; font-family: serif;}
#div1 span{font-variant: small-caps;}

#div2{font-size: 14px; font-family: sans-serif; color: #B22222;}

#div3{font: 2em fantasy;}

104
Aprender a programar desde cero / HTML y CSS. Font-size, small, large, Tipografia. Ejercicio resuelto CU01044D
« en: 20 de Septiembre 2016, 01:35 »
CSS font-size (uso de larger, smaller) font-weight o negrita (bolder, lighter). font-style o cursiva italic (CU01044D)

Para ver la tabla es necesario crear un documento HTML con el siguiente código:

Código HTML(CSS Interno):
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tipografía</title>
<style type="text/css">
/*DATOS GENERALES*/
*{font-family: arial;}

/*Clases*/
.tablas{border-spacing: 0; border: 1px solid #000;
width: 300px; height: auto; background-color: #DDD;
margin: 10px; float: left;}

.tablas caption{font-weight: bold; color: white; text-transform: uppercase;
    background-color: black;
    padding: 4px;}

.tablas tr:first-child{background-color: #F44; font-weight: 700;}

.tablas td{border: 1px solid #000; padding: 10px; font-size: 1em;}

.tablas tr td span{color: #973DFF; font-weight: 700}
</style>
</head>
<body>
<table class="tablas">
<caption>tipografia google ghrome</caption>
<tr>
<td>Tipo de titulo</td>
<td>Píxeles</td>
<td>em</td>
</tr>
<tr>
<td>H1</td>
<td>32<span>px</span></td>
<td>2<span>em</span></td>
</tr>
<tr>
<td>H2</td>
<td>24<span>px</span></td>
<td>1.5<span>em</span></td>
</tr>
<tr>
<td>H3</td>
<td>18.72<span>px</span></td>
<td>1.17<span>em</span></td>
</tr>
<tr>
<td>H4</td>
<td>16<span>px</span></td>
<td>1<span>em</span></td>
</tr>
<tr>
<td>H5</td>
<td>13.28<span>px</span></td>
<td>0.83<span>em</span></td>
</tr>
<tr>
<td>H6</td>
<td>10.72<span>px</span></td>
<td>0.67<span>em</span></td>
</tr>
</table>
<table class="tablas">
<caption>tipografia internet explorer</caption>
<tr>
<td>Tipo de titulo</td>
<td>Píxeles</td>
<td>em</td>
</tr>
<tr>
<td>H1</td>
<td>32<span>px</span></td>
<td>2<span>em</span></td>
</tr>
<tr>
<td>H2</td>
<td>24<span>px</span></td>
<td>1.5<span>em</span></td>
</tr>
<tr>
<td>H3</td>
<td>18.73px</td>
<td>1.17<span>em</span></td>
</tr>
<tr>
<td>H4</td>
<td>16<span>px</span></td>
<td>1<span>em</span></td>
</tr>
<tr>
<td>H5</td>
<td>13.26<span>px</span></td>
<td>0.82<span>em</span></td>
</tr>
<tr>
<td>H6</td>
<td>10.73<span>px</span></td>
<td>0.67<span>em</span></td>
</tr>
</table>
</body>
</html>

105
Aprender a programar desde cero / HTML y CSS. vertical-align, alineacion vertical en cajas. Ejercicio CU01043D
« en: 19 de Septiembre 2016, 20:27 »
CSS vertical-align middle ¿no funciona? Centrar verticalmente una imagen, texto, div, etc. Ejemplos (CU01043D)

Aquí esta el código y después estarán las preguntas y respuestas:

Código a analizar
Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left;}
#vcent { display: table;  }
#vcent span { display: table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>
Preguntas y respuestas

1) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?
   R= dos cajas contenedoras. La primera no tiene identificación pero la segunda lleva una id.

2) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?
   R= (Visualizado con Google Chrome e Internet Explorer) No hay diferencias. La razón es  que ambos aceptan los atributos mostrados en el código. (No tengo mas navegadores  :P).

3) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?
   R= Porque es interpretado como si fuese una celda de caja haciendo uso de display y se le asigno una alineación vertical centrada.

4) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.
   R= Aquí tratare de hacerlo de otra forma. El código quedaría así:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left; }
#vcent { display: table;  }
#vcent span { display: table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div style="padding-top: 105px; height: 110px"><span>Línea de texto contenedor 1</span></div>
<div id="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>
La diferencia esta en que le he aplicado estilos de linea al primer div. aumentando el relleno y alterando su altura.

106
Aprender a programar desde cero / Re:HTML y CSS text-transform, letter-spacing, word-spacing. Ejercicio CU01042D
« en: 19 de Septiembre 2016, 19:56 »
Gracias por las aclaraciones, trataré de tenerlas en cuenta la próxima vez que las necesite. ;)

107
Aprender a programar desde cero / HTML y CSS text-transform, letter-spacing, word-spacing. Ejercicio CU01042D
« en: 18 de Septiembre 2016, 23:22 »
CSS text-transform y first-letter, letter-spacing y word-spacing. Cortar palabras largas con word-wrap (CU01042D)

Aquí esta el ejercicio, sinceramente no se porque especificaron colocar tanto espacio entre letras pero de todas formas aqui esta lo que se pide:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio con TEXT-TRANSFORM</title>
<link rel="stylesheet" type="text/css" href="Ejercicio_text-transform.css">
</head>
<body>
<div id="div1"><p>Continuamos repasando propiedades que resultan de interés para darle formato a </p><p>textos como text-transform, que nos permitirá entre otras posibilidades transfomar un texto a mayúsculas o minúsculas.</p></div>

<div id="div2">Continuamos repasando <span>propiedades</span> que resultan de interés para darle formato a textos como text-transform, que nos permitirá entre otras posibilidades transfomar un texto a mayúsculas o minúsculas.</div>

<div id="div3">Continuamos repasando propiedades que resultan de interés para darle formato a textos como text-transform, que nos permitirá entre otras <span>posibilidaaaaaaaaaaaaaaades</span> transfomar un texto a mayúsculas o minúsculas.</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial;}

/*Div*/
div{float: left;
margin: 33px; padding: 0;
width: 180px; height: 300px;
border: 6px solid #F00;}

/*Div por id*/
#div1{text-transform: uppercase; letter-spacing: 0.05em;}
#div1 p::first-letter{font-size: 250%;}

#div2{text-transform: lowercase; letter-spacing: 0.1em;}
#div2 span{background-color: #FFC; word-wrap: break-word;}

#div3{text-transform: capitalize; word-spacing: 0.1em;}
#div3 span{background-color: #FFC; word-wrap: normal;}

108
Aprender a programar desde cero / CSS y HTML. text-overflow, line-height, text-shadow. Ejercicio CU01041D
« en: 18 de Septiembre 2016, 05:26 »
CSS efecto sombra con text-shadow y blur, text-overflow clip, ellipsis y line-height (interlineado) (CU01041D)

Aquí la resolución del ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Sombras en textos</title>
<link rel="stylesheet" type="text/css" href="sombras.css">
</head>
<body>
<div id="div1">Ya <span class="sombreRojo">conocemos algunas</span> propiedades para dar formato a textos, como text-align, color, text-decoration, text-indent, white-space, etc. Vamos a continuar repasando propiedades que resultan de interés para darle formato a textos como text-overflow, line-height y text-shadow. Con text-shadow podremos crear sombras con distintos efectos lo cual nos resultará útil para mejorar nuestros diseños web.</div>

<div id="div2">Ya conocemos algunas propiedades para dar formato a textos, como <span class="sombreAzul">text-align, color, text-decoration, text-indent, white-space, etc.</span> Vamos a continuar repasando propiedades que resultan de interés para darle formato a textos como text-overflow, line-height y text-shadow. Con text-shadow podremos crear sombras con distintos efectos lo cual nos resultará útil para mejorar nuestros diseños web.</div>

<div id="div3">Ya conocemos algunas <span class="sombraVerde" title="Hola, hallaste el secreto del texto.">propiedades para dar formato a textos</span>, como text-align, color, text-decoration, text-indent, white-space, etc. Vamos a continuar repasando propiedades que resultan de interés para darle formato a textos como text-overflow, line-height y text-shadow. Con text-shadow podremos crear sombras con distintos efectos lo cual nos resultará útil para mejorar nuestros diseños web.</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial; font-size: 1.05em;}

/*Clases para texto*/
.sombreRojo{font-size: 18px; text-shadow: 3px 3px 0 #F00;}
.sombreAzul{font-size: 18px; text-shadow: -5px 5px 0 #00F}
.sombraVerde{font-size: 18px; text-shadow: 0 0 5px #0F0}

/*Div*/
div{float: left; margin: 18px; padding: 8px; width: 240px; height: 300px;
border-width: 3px; border-style: solid; border-color: #0000FF;}

/*caracteristicas DIV por id*/
#div1{text-overflow: ellipsis; line-height: 105%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

#div2{overflow: hidden; line-height: 110%;}

#div3{text-align: justify; color: #8B4513; line-height: 120%;}

109
Aprender a programar desde cero / HTML y CSS white-space, text-indent y text-decoration Ejercicio CU01040D
« en: 18 de Septiembre 2016, 00:29 »
CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line (CU01040D)

Aquí esta el ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Atributos para los textos</title>
<link rel="stylesheet" type="text/css" href="textos.css">
</head>
<body>
<div id="div1">Sublime Text is a sophisticated text editor for code, markup and prose. <span class="sub">You'll love the slick user interface</span>, extraordinary features and <span class="sub">amazing performance.</span></div>

<div id="div2">Make ten changes at the same time, not one change ten times. <span class="sub-up">Multiple selections allow you to interactively</span> change many lines at once, rename variables with ease, and manipulate files faster than ever.

<span class="sub-up">Try pressing Ctrl+Shift+L to split the selection into lines and Ctrl+D to select the next occurrence of the selected word.</span>

  To make multiple selections with the mouse, take a look at the Column Selection documentation.</div>

<div id="div3">Key Bindings, Menus, Snippets, Macros, Completions and mo<span class="sub">               </span>and more - <span class="del">just about everything in</span> Sublime Text is customizable with <span class="del">simple</span> JSON files. This system gives you flexibility as settings can be specified on a <span class="del">per-file type and per-project basis.</span></div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial;}

/*Los div*/
div{margin: 20px; padding: 10px; width: 200px; height: 400px; border: 4px solid #000; float: left; background-color: #DDD;}
/*Clases para texto*/
.sub{text-decoration: underline;} /*Subrayado*/
.sub-up{text-decoration: overline;} /*Subrayado-arriba*/
.del{text-decoration: line-through;} /*Tachado*/

/*Div por id*/
#div1{text-align: center; color: #FF6347; text-indent: 10%;}

#div2{text-align: right; color: #008080; text-indent: 50px; white-space: pre-line;}

#div3{text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-wrap;}
Siendo sincero las especificaciones sobre el white-space me confundieron un poco, pero espero que sean correctas.

110
Aprender a programar desde cero / Re:CSS y HTML Z-index preguntas. Ejercicio CU01039D
« en: 18 de Septiembre 2016, 00:08 »
Gracias por revisar y gracias por enseñarme otro método para resolver la actividad.

Un saludo también. ;)

111
Aprender a programar desde cero / CSS y HTML Z-index preguntas orden en superposiciones Ejemplo Ejercicio CU01039D
« en: 15 de Septiembre 2016, 03:48 »
z-index CSS ¿no funciona? Superposición de elementos tipo capas, objetos, div o imágenes (CU01039D)

Aquí dejo el código, mas adelante dejare las preguntas con sus respuestas:

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
*{font-family: sans-serif;}
#cajaGris { width: 225px; height: 225px; border: solid 1px #ccc; background: #ddd; margin-top:20px;}
#cajaAzul {width: 225px; height: 225px; border: solid 3px #4a7497;
background: #8daac3; margin-top: -50px; margin-left: 50px;}
#cajaOcre { width: 225px; height: 225px; border: solid 2px #8b6125;
background: #ba945d; margin-top: -50px; margin-left: 100px; margin-bottom: 20px;}
</head>
</style>
<body>
<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>
</body>
</html>
1) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?
   R= Existen tres cajas contenedoras identificadas por id.

2) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?
   R= La caja azul tiene un borde  de 3 píxeles.

3) ¿Por qué se superponen unas cajas encima de otras? ¿En qué orden aparecen las cajas superpuestas (es decir, cuál está arriba, cuál está en posición intermedia y cuál está en el fondo)? ¿Por qué aparecen con ese orden y no otro?
   R= Porque su posición y tamaño hace que interfieran entre si y algunos tendrán que superponerse. La caja ocre esta encima, la caja azul esta detrás de ocre un poco para arriba, y la caja gris esta detrás de la caja azul. Aparecen en ese orden porque en ese mismo orden fue escrito el código.

4) Queremos que la caja gris se sitúe por encima del resto de cajas. ¿Qué modificaciones en el código hemos de hacer para lograr este objetivo?
   R= Se le coloca a cada caja un atributo position con el valor relative, se le coloca un z-index a las demás cajas con un valor definido y a la caja gris se le coloca un valor mayor.

5) Modifica el código para que la caja ocre quede en el fondo, la caja azul en posición intermedia y la caja gris encima.
  R= Aquí el código resultante:

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
*{font-family: sans-serif;}
#cajaGris { width: 225px; height: 225px; border: solid 1px #ccc; background: #ddd; margin-top:20px;position: relative; z-index: 2;}
#cajaAzul {width: 225px; height: 225px; border: solid 3px #4a7497;
background: #8daac3; margin-top: -50px; margin-left: 50px;position: relative; z-index: 1;}
#cajaOcre { width: 225px; height: 225px; border: solid 2px #8b6125;
background: #ba945d; margin-top: -50px; margin-left: 100px; margin-bottom: 20px;position: relative; z-index: 0;}
</head>
</style>
<body>
<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>
</body>
</html>

112
Aprender a programar desde cero / CSS y HTML Overflow uso de scroll vertical y horizontal. Ejercicio CU01038D
« en: 14 de Septiembre 2016, 22:40 »
overflow CSS. scroll. overflow-x, overflow-y. Propiedad visibility (visible, hidden, collapse). Ejemplos (CU01038D)

Aquí les dejo el código del ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Overflow y Visibility</title>
<style type="text/css">
*{font-family: arial;}
/*Para los DIV*/
div{width: 200px; height: 200px; background-color: #FF0;
border: 2px solid #00F; overflow: scroll;}
/*Texto*/
p{font-size: 30px; width: 250px;}
</style>
</head>
<body>
<div>
<p>Paaaaaaaaaaaaaaaaaaarraaaaaaaaaafooooooss deeeeeeeeeeeee Palabraaaaaaaaaaaaaaaaaaaaaaaas SUUUUUUUUUUUUUUUUUUUUUUUUPER laaaaaaaaaaaaaaaaarga pooooooooooooooooorrrrrrr queeeeeeeeeeeeeeee siiiiiiiiiiiiiiiiiii?</p>
</div>
</body>
</html>

113
Aprender a programar desde cero / HTML y CSS Elementos float, clear problema texto no envuelve imagen CU01035D
« en: 11 de Septiembre 2016, 19:32 »
Respuestas al ejercicio CU01035D del curso de programación web con CSS.

clear CSS both ¿float no funciona? ¿El texto no envuelve una imagen html? Por qué de problemas (CU01035D)

Aquí esta el ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Atributo float y clear</title>
<link rel="stylesheet" type="text/css" href="float_y_clear.css">
</head>
<body>
<div class="cubos">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<br><br><br>
<div class="Texto">
Un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.
</div>
<div class="cubos2">
<div></div>
<div></div>
<div></div>
</div>
<br><br><br>
<div class="apr">Curso CSS aprenderaprogramar.com</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial; text-align: justify;}

/*Primero*/
/*Los Div*/
.cubos div{width: 50px; height: 50px; margin-right: 5px; float: left;}
/*caracteristicas especiales div*/
.cubos div:nth-child(1){background-color: #F00;}
.cubos div:nth-child(2){background-color: #00F;}
.cubos div:nth-child(3){background-color: #0F0;}
.cubos div:nth-child(4){background-color: #FF0;}
.cubos div:nth-child(5){background-color: #F0F;}
.cubos div:nth-child(6){background-color: #0FF;}
.cubos div:nth-child(7){background-color: #555;}
.cubos div:nth-child(8){background-color: #CCC;}
/*FIN Primero*/

/*Segundo*/
.Texto{background-color: #FF0; margin: 20px 0 20px 0; width: 100%; clear: both;}
/*FIN Segundo*/

/*Tercero*/
.cubos2{clear: both;}
.cubos2 div{width: 200px; height: 50px; margin-right: 5px; float: right;}
/*caracteristicas especiales div*/
.cubos2 div:nth-child(1){background-color: #F70;}
.cubos2 div:nth-child(2){background-color: #1FA;}
.cubos2 div:nth-child(3){background-color: #B5F;}
/*FIN Tercero*/

/*Cuarta*/
.apr{background-color: #DEB887; width: 100%; clear: both; margin-top: 10px;}
/*FIN Cuarta*/

114
Aprender a programar desde cero / CSS concepto float none, left, right Por qué center no funciona ejemplo CU01034D
« en: 11 de Septiembre 2016, 08:01 »
Respuestas al ejercicio CU01034D del tutorial de desarrollo web con CSS de aprenderaprogramar.com.

Concepto float CSS. none, left, right y ¿centrar?. Colocar texto alrededor de una imagen. Ejemplos (CU01034D)

Para cada una de las siguientes afirmaciones indica si es verdadera o falsa, y justifica brevemente tu respuesta:

a) La propiedad float puede tomar cuatro valores: top, right, bottom y left.
    R= Falso. Solo usa tres que son right, left y none.

b) float es una propiedad que nos permite maquetar páginas web (documentos HTML).
    R= Verdadero.

c) Usando float: center; podemos centrar el contenido de un elemento respecto de su caja contenedora.
   R= Falso. No existe tal valor.

d) Un elemento flotante sale del flujo normal de posicionamiento de elementos en una página web.
   R= Verdadero.

e) Todos los elementos a continuación de un elemento flotante lo envuelven, a no ser que especifiquemos lo contrario usando la propiedad clear.
   R= Verdadero.

115
Aprender a programar desde cero / Re:Codigo erroneo? - Entrega nº27 - HTML
« en: 11 de Septiembre 2016, 07:50 »
Si quieres que el separador hr se muestre de color rojo usarías el atributo color="red", sin embargo ese atributo esta deprecated así que seria mejor que aprovecharas el atributo style.

Es mejor si lo colocas así.
Código: [Seleccionar]
<hr style="width: 20%; background-color: red;">
Obtendrias el mismo resultado que con el codigo que estas usando, pero no es recomendado usar el atributo "color" porque repito, esta deprecated.

Espero haber ayudado. :)

116
Aprender a programar desde cero / Re:HTML y CSS Imagenes de fondo Background-position Contenedores Ejercicio CU01031D
« en: 11 de Septiembre 2016, 07:33 »
Hola!
De vez en cuando se me olvida poner el ";" al final de una linea de codigo, pero tratare de siempre colocarla y también tratare de repetir lo menos posible el mismo valor.

Gracias por revisarlo pedro.  ;)

117
Aprender a programar desde cero / Re:HTML y CSS Background-image y Background-repeat. Imagenes de fondo. CU01030D
« en: 11 de Septiembre 2016, 07:25 »
Hola pedro!
Siii no había notado que pude simplificarlo colocando "div {...}", pero supongo que con la práctica tomare eso en cuenta.
En el segundo no vi la necesidad de crear algo diferente en el HTML y CSS ya que solo se me pedía demostrar que aprendí de la imagen y la repetición de fondo.

Gracias por revisar, saludos también.  ;)

118
Aprender a programar desde cero / HTML y CSS Propiedad position, top, right, bottom, left. Ejercicios CU01032D
« en: 10 de Septiembre 2016, 03:55 »
Propiedad position CSS: static, relative, absolute, fixed. Top, right, bottom, left. Ejemplos prácticos (CU01032D)

Aquí están las tres actividades:

1) Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:

a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.

b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.

c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Primer ejercicio de posición</title>
<link rel="stylesheet" type="text/css" href="1position.css">
</head>
<body>
<div id="padre">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*Para los div de padre*/
#padre div{width: 300px; height: 300px;
   margin: 40px; padding: 30px;
   position: relative;
   border: 2px solid #000;}
/*Caracteristicas individuales*/
#div1{background-color: #FF0000;
  left: 200px; top: 100px;}
#div2{background-color: #008000;
  right: 50px; bottom: 50px;}
#div3{background-color: #0000FF;
  left: 450px; bottom: 300px;}
2) Define un documento HTML con 3 cajas contenedoras div (div1, div2 y div3), la primera con unas dimensiones de 600x600px y un background color amarillo. La segunda con dimensiones 400x400px y un background color verde. La tercera con dimensiones 100x100px y background color azul. Usando posicionamiento absoluto establece para el div2 y el div3 el mismo origen que para el div1, de modo que el efecto generado sea ver un cuadrado amarillo dentro del cual hay un cuadrado verde dentro del cual hay un cuadrado azul.

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Segundo ejercicio de posición</title>
<link rel="stylesheet" type="text/css" href="2position.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*Caracteristicas generales para div*/
div{position: absolute;}
/*Los diferentes div*/
#div1{width: 600px; height: 600px; background-color: #FFFF00;}
#div2{width: 400px; height: 400px; background-color: #00FF00;
  left: 100px; top: 100px;}
#div3{width: 100px; height: 100px; background-color: #0000FF;
  left: 250px; top: 250px;}
3) Define un documento HTML con varios div que contengan suficiente texto como para que la página se muestre con scroll (barras de desplazamiento). El primero de los div debe contener el texto <<Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.>>, un valor height (altura) de 100 píxeles y color de fondo amarillo. Usando posicionamiento fixed, fija este div en la parte superior de la página de modo que se continúe visualizando aún cuando hagamos scroll.

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tercer ejercicio de posición</title>
<link rel="stylesheet" type="text/css" href="3position.css">
</head>
<body>
<div id="cookie">
<div><br>Esta página web utiliza cookies. Si continúa navegando acepta el uso de cookies.</div>
</div>
<div id="page">
<center><img src="http://www.hobbyconsolas.com/sites/hobbyconsolas.com/public/media/image/2015/09/520068-nintendo-126-anos-historia-traves-su-logo.png" alt="nintendo" width="45%" height="100px"></center>
<p><b>NINTENDO</b> Es una empresa multinacional dedicada al mercado de los videojuegos y a la electrónica de consumo; con sede en Kioto, Japón. Fue fundada el 23 de septiembre de 1889, por el japonés Fusajiro Yamauchi.</p>
<p>Uno de los videojuegos mas destacados son:</p>
<ul>
<li>Super Mario bros.</li>
<li>Donkey kong</li>
<li>The Legend of Zelda</li>
<li>Metroid</li>
<li>EarthBound</li>
<li>Fire Emblem</li>
<li>Pokemon</li>
<li>Animal Crossing</li>
<li>Kirby</li>
<li>Luigi's Mansion</li>
<li>Star Fox</li>
<li>F-Zero</li>
<li>Splatoon</li>
</ul>
<p>Estos fueron evolucionando al pasar de los años. Pasando de consola en consola, entre estos están:</p>
<ul>
<li>Nintendo Entreteinement System</li>
<li>Super Nintendo Entreteinement System</li>
<li>Nintendo 64</li>
<li>Game Cube</li>
<li>Wii</li>
<li>Wii U</li>
<li>NX (proximamente)</li>
</ul>
<p>Sin olvidar las multiples consolas portatiles:</p>
<ul>
<li>GameBoy</li>
<li>GameBoy Pocket</li>
<li>GameBoy Light</li>
<li>GameBoy Color</li>
<li>GameBoy Advance</li>
<li>Nintendo DS</li>
<li>Nintendo DS Lite</li>
<li>Nintendo DS<sup>i</sup></li>
<li>Nintendo DS<sup>i</sup> XL</li>
<li>Nintendo 3DS</li>
<li>Nintendo 3DS XL</li>
<li>New Nintendo 3DS</li>
<li>New Nintendo 3DS XL</li>
</ul>
<p>Nintendo también lleva un sistema online llamado Miiverse. Se trata de la primera red social de Nintendo, donde sus usuarios pueden chatear entre sí en forma de Miis, además de compartir logros en videojuegos y formar comunidades virtuales.</p>
</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial}
body{margin: 0;}
/*Aviso de Cookies*/
#cookie div{background-color: #FF0; font-weight: bold; font-size: 1.5em;
      text-align: center; height: 100px; position: fixed; left: 25%; width: 50%}
/*Tamaño de imagenes*/
img{margin: 100px 0 0 0;}
/*Caracteristicas de page*/
#page{width: 50%; background-color: #CCC; margin: auto;}
/*Parrafos dentro de page*/
#page p{margin-left: 15%; margin-right: 15%; text-align: justify;
font-size: 1.2em;}
/*Listas dentro de page*/
#page ul{list-style-type: disc; margin: 0 15% 0 15%; font-size: 1.2em}
/*FIN page*/

119
Aprender a programar desde cero / Re:CSS y HTML Calculo de acncho y largo de divisiones CU01029D
« en: 09 de Septiembre 2016, 06:23 »
Pues... vaya, creí que el margen no contaría a la hora de calcular el tamaño de los div.

En la respuesta B, se que dependería del tamaño de letra, lineas y contenido en general, por eso di un aproximado,de todas formas el resultado es relativamente incierto.

Y en la C creo que me lié un poco sumando, pero tienes razón en que es el doble de tamaño de la respuesta A.

Pues revisare los hilos sobre el tema.
Gracias por revisarlo y encontrar los fallos en el pedro. ;D

120
Aprender a programar desde cero / HTML y CSS Imagenes de fondo Background-position Contenedores Ejercicio CU01031D
« en: 08 de Septiembre 2016, 02:10 »
CSS background-position, background-attachment, clip, origin y size. Shorthand fondo. Ejemplos (CU01031D)

Aquí esta la resolución del ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio CU01031D</title>
<link rel="stylesheet" type="text/css" href="Fondo.css">
</head>
<body>
<h2>Imagenes de fondo con CSS</h2>
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>
<div id="Div4"></div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*Color de fondo principal*/
body{background-color: #CCC;}
/*Titulos H2*/
h2{margin-left: 40px; text-decoration: underline; width: 400px; text-align: center}
/*Datos generales Div*/
div{width: 400px; height: 400px;
margin: 40px; padding: 40px;
border: 6px double hsl(240, 100%, 20%);
background-position: 50%;}
/*Div Individuales*/
#Div1{background-color: purple; background-image: url(http://www.mstudio.es/wp-content/uploads/o-fotografias-atardecer-en-san-juan-400x400.jpg);
  background-repeat: no-repeat;}
#Div2{background-color: blue; background-image: url(http://jeoxphotography.com/wp-content/uploads/2015/07/q5a3610-400x400.jpg);
  background-repeat: no-repeat;}
#Div3{background-color: red; background-image: url(http://www.nortenosa.com/wp-content/uploads/2016/03/Dia-de-Naturaleza-400x400.png);
  background-repeat: no-repeat;}
#Div4{background-color: yellow; background-image: url(http://jeoxphotography.com/wp-content/uploads/2015/07/q5a3451-400x400.jpg);
  background-repeat: no-repeat;}

Páginas: 1 2 3 4 5 [6] 7

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