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.


Temas - Pandemia

Páginas: 1 ... 3 4 5 6 7 [8]
141
Aquí os dejo los ejercicios que pide esta entrega nº 30, he tenido problemas con la parte b) del 2º ejercicio, agradecería que alguien me dijera donde ve el error porque me he vuelto loco probando de todo y no hay manera de que me salga.

  b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

Esta es la pregunta.

Aquí os dejo el resto de códigos de los otros ejercicios:


Código: [Seleccionar]
EJERCICIO 1

Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.


<!DOCTYPE html>
<html lang="es">

<head>
<title>Definidion de fondo CSS. background-image y efecto fondo página con papel tapiz, background-repeat</title>
<meta name="description" content="Descripcion de fondo css. background-image y efecto fondo pagina con papel tapiz. ">
<meta name="keywords" content="Definicion de fondo css">
<meta charset="utf-8">
<style>
/*definición de fondo css.background-image y efecto fondo*/
#div1{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: yellow;background-image: url(https://i.ytimg.com/vi/6rLuO37DSUM/hqdefault.jpg)}
.div2{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: orange;background-image: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSZ1frib1PqeHmIq3nudJIHbxKrCsjkbxIfQf7T9g6Py4f3igbR")}
#div3{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: green;background-image: url("http://imagenesdebuenosdiasamor.com/wp-content/uploads/2015/09/buenosdiasregalorosa.jpg")}
.div4{width: 250px;height:250px;margin: 30px;padding: 30px;background-color: gray;background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1TPUNunORNxgvUPW_mgznqRptBkt98u7TDR_h2lOYx_7rfIpRoQ")}
</style>


</head>

<body>

<div id="div1">


</div>

<div class="div2">


</div>

<div id="div3">

</div>

<div class="div4">


</div>
</body>
</html>


EJERCICIO 2

Crea dos páginas web cumpliendo estos requisitos:

a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.



<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de gran tamaño</title>
<meta name="description" content="web con imagen unica de gran tamaño (1024*768px)">
<meta name="keywords" content="imagen de 1024*768px ">
<meta charset="utf-8">
<style>

#imagen{background-color: yellow;background-image: url("http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-1.jpg" width="1024" height="768");margin 0 auto;background-repeat: no repeat;}


</style>

</head>

<body>
2º Ejercicio a)

<div id="imagen">

<img src="http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-1.jpg" width="1024" height="768">

</div>

</body>
</html>

b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

Este es el ejercicio que no me funciona!!!!!!!


<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">

</head>

<body>



<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>




</body>


</html>

y ahora el CSS

/*background-image propiedad repeat se expanda como fondo de página web*/



body {background-color: yellow;background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ" width="300" height="300");
background-repeat: repeat;}



Saludos y gracias

142
Buenas noches saludos a todos, aquí os dejo este ejercicio que he realizado, me he liado un poco con los cálculos pero creo que al final ha salido bien, os agradecería que le echarais un vistazo.

Gracias de antemano. Saludos


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>padding y margin css</title>
<meta name="description" content="padding y margin en css. margin negativo y centrar con margin auto">
<meta name="keywords" content="padding y margin en css">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos12.css">
</head>

<body>
<div id="wrapper">
<header>
<h1>Padding y Margin CSS</h1>
</header>
</div>

<div id="div1">

Este es el div 1

</div>
<div id="div2">
Este es es el div 2
</div>
</body>
</html>
 


Y ahora el CSS

Código: [Seleccionar]
/*padding y margin en css */
#wrapper{text-align: center;}

#div1{float: left;width: 250px;margin: 20px;background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}

#div2{float: left;width: 250px;margin: 20px; background-color: #FFB6C1;border-top-style: dotted;border-top-width: 15px;
border-top-color: #DC143C;padding: 30px; border-right-style: dashed;border-right-width: 10px;border-right-color: green;
padding: 45px; border-bottom-style: double;border-bottom-width: 10px;border-bottom-color: #FF00FF;padding: 0px;
border-left-style: ridge;border-left-width: 40px;border-left-color: #2F4F4F;padding: 60px;
}




a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?

      250px ancho interior + 10px borde izquierdo + 45px relleno izquierdo + 40px borde derecho + 60px relleno derecho : total 405px

          Mas el margin: 40px            total respuesta a)445px

b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?

     El alto será variable dependiendo del contenido del div. Si no especificamos nada lo pondrá el navegador por defecto.

c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?

     El ancho total para los dos div sera de 890px


143
Buenas noches aqui dejo el ejercicio CU01028D de CSS a ver qué tal ...

Gracias por vuestro tiempo de antemano

saludos



a)CSS muestra los contenidos con tres formas básicas: rectangular, circular, elipsoidal.


RESPUESTA: La única forma en la que muestra los contenidos es en cajas RECTANGULARES


b)Al crear un documento HTML, pueden aparecer mágenes y rellenos que no hayan sido explícitamente introducidos por nosotros como programadores, si no que hayan sido introducidos por el navegador que estemos empleando.

RESPUESTA: sí. Al crear un html el navegador tiene margin o padding por defecto; o los dos


c) El reseteo CSS consiste en la recarga de la página para borrar la caché del navegador, de modo que los estilos se recarguen completamente.

RESPUESTA: no, el reseteo consta de borrar el margin y el padding, que tiene el navegador por defecto *{margin: 0px;padding: 0px;}


144
Aquí os dejo el ejercicio a ver qué os parece, yo lo he probado y funciona bien creo.


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="shortand: notacion css abreviada, border-width y thin, mediun, thick, border-color,
transparent, border">
<meta name="keywords" content="shortand: notacion css abreviada">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos11.css">
<title>shortand: notacion css abreviada</title>

</head>

<body>
<div id="wrapper">
<header>
<h1>Shortand: notación css abreviada</h1>
</header>

<br/><br/>


<div id="div1">
<br/>
<div id="imagen1">
<img src="c:/EJERCICIOS CURSO CSS/niño.jpg">
</div>

<br/>

Primera división

</div>

<br/><br/>

<div id="div2">
<br/>
<div id="imagen2">
<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">

</div>
<br/>
Segunda división

</div>
</div>

</body>
</html>




Este es el 1º html


y ahora el css

Código: [Seleccionar]

/*shortand: notación css abreviada. Ejercicio CU01027D*/

#wrapper{text-align: center;
}

h1{border: solid black 5px;background-color: rgb(71, 219, 21);}

#div1{border-top-style: dotted;border-width: 10px;border-color: green;
border-left-style: dashed;border-width: 2px;border-color: blue;
border-bottom-style: double;border-width: 10px;border-color:#A52A2A;
border-right-style: groove;border-width: 30px;border-color: #2F4F4F;}

#imagen1{display: table;margin: 0 auto;border: solid black;width: 208px;height: 242px;}

#div2{border-top-style: inset;border-width: 30px;border-color: #B22222;
border-left-style: solid; border-width: 22px;border-color: #CAA520;
border-bottom-style: double;border-width: 25px;border-color: #4B0082;
border-right-style: dotted;border-width: 17px;border-color: #808000;
}

#imagen2{display: table;margin: 0 auto;border: solid black;width: 267px;height: 189px;}




ahora el 2º html

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="shortand: notacion css abreviada, border-width y thin, mediun, thick, border-color,
transparent, border">
<meta name="keywords" content="shortand: notacion css abreviada">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos11a.css">
<title>shortand: notacion css abreviada</title>

</head>

<body>
<div id="wrapper">
<header>
<h1>Shortand: notación css abreviada</h1>
</header>

<br/><br/>


<div id="div1">
<br/>
<div id="imagen1">
<img src="c:/EJERCICIOS CURSO CSS/niño.jpg">
</div>

<br/>

Primera división

</div>

<br/><br/>

<div id="div2">
<br/>
<div id="imagen2">
<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">

</div>
<br/>
Segunda división

</div>
</div>

</body>
</html>



Y ahora el segundo CSS

Código: [Seleccionar]

/*Ejercicio 2º de la lección CU01027D shortand: notació css abreviada*/

#wrapper{text-align: center;
}

h1{border: solid black 5px;background-color: rgb(71, 219, 21);}

#div1{border-top: dotted 10px green; border-left: dashed 2px blue;border-bottom: double 10px #A52A2A;border-right: groove 30px #2F4F4F;
}
#div2{border-top: inset 30px #B22222;border-left: solid 22px #CAA520;border-bottom: double 25px #4B0082;
border-right: dotted 17px #808000;}

#imagen1{display: table;margin: 0 auto;border: solid black;width: 208px;height: 242px;}

#imagen2{display: table;margin: 0 auto;border: solid black;width: 267px;height: 189px;}


A ver que os parece... gracias por vuestro tiempo

145
Aquí os dejo el código html y  css haber que os parece; yo creo que está todo más o menos bien. Gracias de antemano por vuestro tiempo

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>

<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="tipos de borde css, border-style, none, hidden, dotted, solid...,
efectos 3d, border-top, right, bottom">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos10.css">

</head>

<header>
<h1>Tipos de bordes en css </h1>
</header>

<body>


<p>

<div id="wrapper">

<div id="div1">

Primera división

</div>

<br/>
<br/>

<div id="div2">

Segunda división

</div>

<br/>
<br/>

<div id="div3">

Tercera división

</div>
<br/>
<br/>

<div id="div4">

Cuarta división

</div>
<br/>
<br/>

<div id="div5">

<img src="c:/EJERCICIOS CURSO CSS/simson.jpg">
<div id="wrapper">
Quinta división
</div>
</div>
<br/>
<br/>

<div id="div6">

<img src="c:/EJERCICIOS CURSO CSS/niño.jpg"/>
<div id="wrapper">
Sexta división
</div>
</div>
<br/>
<br/>

<div id="div7">

Septima división

</div>
<br/>
<br/>

<div id="div8">

Octava división

</div>
<br/>
<br/>

<div id="div9">

Novena división

</div>
<br/>
<br/>


<div id="div10">

Decima división

</div>
<br/>
<br/>

</div>
</p>
</body>
</html>


Y ahora el CSS...

Código: [Seleccionar]

/*Tipos de bordes css. ejercicio CU01026D */
h1{background-color: rgb(128, 144, 188);border: solid black 4px;
 }
 
#wrapper{text-align: center;
}


#div1{border-style: dashed; border-width: 5px;
}
#div2{border-style: dotted;border-width: 4px; border-color: green;
}
#div3{border-style: solid; border-width: 4px;
}
#div4{border-style: double;border-width: 4px; border-color: red;
}
#div5{border-top-style: groove;border-right-style: solid;border-bottom-style: double;border-left-style: dotted;border-color: brown;
border-width: 5px;}
#div6{border-top-style: inset;border-right-style: dashed;border-bottom-style: outset;border-left-style: inset;border-color: gray;
border-width: 8px;}

#div7{border-top-style: hidden;border-right-style: dotted;border-bottom-style: double;border-left-style: outset;border-color: red;
border-width: 10px;}
#div8{border-top-style: inset;border-right-style: outset;border-bottom-style: groove;border-left-style: inset;border-color: green;
border-width: 10px;}
#div9{border-left-style: solid; border-bottom-style: dotted;border-right-style: double;border-top-style: dashed;border-color: blue;
border-width: 10px;}
#div10{border-bottom-style: outset;border-left-style: dashed;border-right-style: groove;border-top-style: solid;border-color: yellow;
border-width: 10px;}



146
Aquí os dejaré el html y los dos css haber que os parece.

Gracias de antemano a quien le pueda echar un vistazo.
Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css" href="estilos9b.css">


<head>
<title> Propiedades width y height de css; y por defecto auto </title>
</head>

<header id="encabezado">
<h1>Propiedades width y height de css; y por defecto auto</h1>
</header>

<h1>Portal web aprenderaprogramar.com</h1>

<h2>Didáctica y divulgación de la programación</h2>

<div>Menú</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</div>

<div>


<div>
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>


primer css expresado en % estilos9a


Código: [Seleccionar]

/*Ejercicio CU01025D expresado en %*/

#encabezado{background-color: rgb(211, 168, 50); border: 4px solid black;}

html{background-color: pink;}
body{background-color: yellow;width: 100%;}
h1{background-color: red;width: 80%;}
h2{background-color: green;width: 60%}


Segundo css expresado en pixeles estilos9b

Código: [Seleccionar]
/*Ejercicio CU01025D expresado en pixeles (mi monitor tiene una resolución de 1366 * 768 pixeles)*/

#encabezado{background-color: rgb(211, 168, 50); border: 4px solid black;}


html{background-color: pink;}
body{background-color: yellow;width: 1366px;}
h1{background-color: red;width: 1092.8px;}
h2{background-color: green;width: 819.6px;}




147
Aquí os dejo el código que ya lo he pasado por el  W3C validator  que primero me dio un error, que era una tontería que se me paso cerrar con ;} me faltó el ;. Pero lo puse lo volví a pasar y todo perfecto, os dejo el código haber que os parece.

Gracias por vuestro tiempo. Saludos

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="especificacion oficial css. w3schools y w3fools. validacion con w3c validator">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos7.css">

</head>

<body>
<header>
<h2 style="text-align: center; border: 5px solid black; background-color: red" >Especificación oficial css. W3C validator</h2>
</header>

<div id="header">
<h1>Aprendizaje de la programación</h1>
</div>

<div id="wrapper">

<div id="menu">
<h2>Menú</h2>

<ul>
<ol>Progamación básica</ol>
<ol>Progamación intermedia</ol>
<ol>programación avanzada</ol>
</ul>

</div>

<div class="pie_de_pagina">
<div id="footer">
<p>Curso aprenderaprogramar.com</p>
</div>

</div>
</div>
</body>

</html>


Y ahora el CSS

Código: [Seleccionar]

/*Especificacion css, validacion con w3c validator*/

h1{color: rgb(40,10,10); background-color: rgb(79,78,153);font-size: 100%;}
h2{color: hsl(0,29%,19%); background-color: rgb(201, 169, 42); font-size: 80%;}
ol{color: black; background-color: yellow; font-size: 100%;}
#pie_de_pagina{color: rgb(30, 55, 181); background-color: rgb(93, 216, 80); font-size: 10px;}


     

148
Aquí dejo el html que he realizado haber que os parece y si los resultados os parecen buenos.

Saludos y gracias por vuestro tiempo


Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>Versiones css; historia. ¿Que es W3C? Recomendaciones</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keybords" content="versiones de css. ¿que es W3C?">
<meta charset="utf-8">

</head>

<body>
<header>
<h1 style="background-color: orange">Version de introducción en css, y si siguen estando vigentes las siguientes propiedades:</h1>
</header>

<p>
a)<b>clip:</b> versión css2 y sigue vigente.
<br/>
<br/>
B)<b>font-weight:</b> Versión css2 y sigue vigente.
<br/>
<br>
c)<b>overflow:</b> Versión css2.1 y sigue vigente.
<br/>
<br/>
d)<b>animation:</b> versión css3 y sigue vigente

</p>

</body>

</html>

149
Aquí os dejo el código para ver que tal y sobre todo la estructuración puesto que soy principiante y este es mi primer mensaje, agradecería de antemano que me dijerais que tal lo posiciono todo ya que solo he hecho el curso de html desde cero. Repito gracias ante todo por vuestro tiempo. 

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<title>Color de fondo; propiedad background-color transparent</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="propiedad background-color css. transparent.">
<meta charset="utf-8">
<link rel="stylesheet"type="text/css"href="estilos6.css">
</head>
<body>
<header>
<h2>background-color tabla de colores transparent</h2>
</header>

<div id="division1" class="divisiones en cajas">
División 1: un color expresado con notación RGB:
rgb(165,66,66)
</div>
<br/>
<div id="division2" class="divisiones en cajas">
División 2: un color expresado con notación RGBA:
rgba(165,39,39,0.5)
</div>
<br/>
<div id="division3" class="divisiones en cajas">
División 3: un color expresado con notación hexadecimal:
#AF3A3A
</div>
<br/>
<div id="division4" class="divisiones en cajas">
División 4: un color expresado con notación HSL:
hsl(116,59%,31%)
</div>
<br/>
<div id="division5" class="divisiones en cajas">
División 5: un color expresado con notación HSLA:
hsla(44,33%,60%,0.6)
</div>
<br/>
<div id="division6" class="divisiones en cajas">
División 6: un color designado con un NOMBRE:
red
</div>
</body>
</html>


Y ahora el CSS

Código: [Seleccionar]
/*color de fondo propiedad background-color css. transparent. CU01021D*/

.divisionesencajas {
text-align: center;
border: 5px solid black;
font-size: 25px;
}

#division1{background-color: rgb(165,66,66);}
#division2{background-color: rgba(165,39,39,0.5);}
#division3{background-color: #AF3A3A;}
#division4{background-color: hsl(116,59%,31%);}
#division5{background-color: hsla(44,33%,60%,0.6);}
#division6{background-color: red;}


150
Lo primero os felicito por el trabajo que hacéis y la posibilidad que le dais a la gente con pocos recursos como yo. Me inicie con el curso de html y lo acabe, y la verdad es que se me dio bastante bien, ahora le he cogido el gustillo y he empezado el de css de momento bien también, ahora que estoy por aquí si tengo dudas ya os consultaré.

Lo que no se es introducir código para preguntar sobre los ejercicios que hago me salen bien o no; si alguien me lo pudiera explicar se lo agradecería.

Bueno gracias de ante mano y os felicito por vuestro trabajo y la página que tenéis.

Saludos

   

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

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