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

Páginas: [1]
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo consulta PHP MySql. SELECT. recorrer resultados query (CU00842B)
« en: 27 de Mayo 2015, 06:49 »
Aqui esta el codigo  falta arreglar el contador
una pregunta ¿por que no me imprime el contador 2?

Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>Consulas a bases de datos</title>
<meta name="description" content= description= "consultas a base de datos php y mysql, https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=613:ejemplo-consulta-php-mysql-select-bucle-while-mysqlifetcharray-recorrer-resultados-query-cu00842b&catid=70:tutorial-basico-programador-web-php-desde-cero&Itemid=193">
<meta name="keywords" name="base de datos mysql html php">
</head>
<header>
<h1>Consultas con base de datos</h1>
</header>
<body>
<?php
$contador= 0;
function mostrar_datos($a){
 if($a!=null){
$cad = $a['nombre'];
 $sub = substr($cad,0,1);
if($sub == 'm'){
echo 'Nombre : ',$a['nombre'],'<br>';
echo 'Su Nombre inicia con ',$sub,'<br>';
echo 'Apellidos : ',$a['apellido'],'<br>';
echo 'Direccion : ',$a['direccion'],'<br>';
echo 'Telefono : ',$a['telefono'],'<br>';
echo 'Edad : ',$a['edad'],'<br>';
echo 'Altura : ',$a['altura'],'<br>';
$contador = $contador+1;
 echo '<br>';
 }else{
echo 'Nombre : ',$a['nombre'],'<br>';
echo 'Apellidos : ',$a['apellido'],'<br>';
echo 'Direccion : ',$a['direccion'],'<br>';
echo 'Telefono : ',$a['telefono'],'<br>';
echo 'Edad : ',$a['edad'],'<br>';
echo 'Altura : ',$a['altura'],'<br>';
echo '<br>';}
}else{ echo 'No hay mas datos por mostrar';}

}

$db = mysqli_connect('sql204.byethost7.com','b7_16106679','acsdc120789','b7_16106679_mibasededatos') or
die('no hay conexion con la base de datos'.mysql_error);
mysqli_select_db($db, 'b7_16106679_mibasededatos');
$tildes = $db->query("SET NAMES 'utf-8'");
$tabla=mysqli_query($db,'SELECT * FROM agenda');

while($rows=mysqli_fetch_array($tabla)){
 mostrar_datos($rows);
}
echo ' personas que inicia su nombre con "M" ',$contador;
mysqli_free_result($tabla);
mysqli_close($db);
?>
<footer>
<h5>Hecho por carlos enrique gil chong</h5>
<a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=613:ejemplo-consulta-php-mysql-select-bucle-while-mysqlifetcharray-recorrer-resultados-query-cu00842b&catid=70:tutorial-basico-programador-web-php-desde-cero&Itemid=193">aprenderaprogramar</a>
</footer>
</body>
</html>

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo SELECT y mysqli_fetch_array while consulta a base datos con PHP CU00841B
« en: 27 de Mayo 2015, 01:24 »
Ejercicio CU00841B

Citar
Utilizando la tabla <<ciudades>> que se muestra en el enunciado del ejercicio, crea un archivo php donde se realice una consulta a la base de datos para extraer todos los datos de la tabla y a continuación muestra por pantalla los valores de país y ciudad de cada fila.

Ejemplo de resultados a obtener:

Los resultados de la consulta a la base de datos son los siguientes:
País: México --- Ciudad: México D.F.
País: España --- Ciudad: Barcelona
País: Argentina --- Ciudad: Buenos Aires
…
País: Cuba --- Ciudad: La Habana

Código: [Seleccionar]
<?php
$db= mysqli_connect('sql204.byethost7.com','b7_16106679','acsdc120789','b7_16106679_mibasededatos') or
die('no se establecio conexion');
echo 'conexion con exito', '<br><br>';
mysqli_select_db($db,b7_16106679_mibasededatos);
$tabla = mysqli_query($db, 'SELECT * FROM ciudades');
while($obtener_filas=mysqli_fetch_array($tabla)){
 echo 'id ', $id= $obtener_filas['id'],'<br>';
 echo 'pais :', $pais= $obtener_filas['pais'], ' --- ';
 echo 'ciudad :', $ciudad= $obtener_filas['ciudad'],'<br>';
 echo 'habitantes :', $habitantes = $obtener_filas['habitantes'],'<br>';
 echo 'superficie :', $superficie = $obtener_filas['superficie'], '<br>';
 echo 'tiene metro :', $tienemetro = $obtener_filas['tienemetro'], '<br>';
 echo '<br>';
}
mysqli_free_result($tabla);
mysqli_close($db);
?>

una duda maestros
me pueden explicar mejor el bucle los echos no hay problema solo la funcion del bucle



while($obtener_filas=mysqli_fetch_array($tabla)){
   echo 'id ', $id= $obtener_filas['id'],'<br>';
   echo 'pais :', $pais= $obtener_filas['pais'], ' --- ';
   echo 'ciudad :', $ciudad= $obtener_filas['ciudad'],'<br>';
   echo 'habitantes :', $habitantes = $obtener_filas['habitantes'],'<br>';
   echo 'superficie :', $superficie = $obtener_filas['superficie'], '<br>';
   echo 'tiene metro :', $tienemetro = $obtener_filas['tienemetro'], '<br>';
   echo '<br>';

Jose Maldonado que buena idea crear el formulario y añadir la conexion con php lo voy hacer

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo herencia PHP definir clase constructor function __construct() y métodos
« en: 25 de Mayo 2015, 09:04 »
Saludos maestros voy en el tuto de envio de formulariosen php en www.aprenderaprogramar.com apenas estoy aprendiendo sobre POO con herencias en php

Me encargó  mi profesor terminar esta tarea podrian apoyarme con este codigo por favor

Ya lo repasé varias veces y busque errores pero  no me marca nada de error.

Código: [Seleccionar]
<?php
class Automovil{
    // private solo se puede acceder desde la misma clase
    // protected  siguen siendo privados pero puedens er heredaros
    protected $color;
    protected $velocidad;
    protected $motor;


    public function Arrancar($a,$b){
        $this->velocidad =$a;
        $this->motor =$b;
    echo 'arranca ala velocidad de ', $this->velocidad,' ya que su motor es de',$this->motor;
    }
    
    public function color_carro($color){
        $this-> color =$color;
        echo 'y tiene un color',$this->color;
    } 
    
    public function frenar(){
        echo 'y ahora has frenado';       
    }
    
       
}

class Moto extends Automovil{
    private $ruedas;
    
    
    public function __construt($ruedas_cantidad,$velocidad,$cilindros,$color){
    $this->ruedas = $ruedas_cantidad;
    $this->velocidad = $velocidad;
    $this->motor = $cilindros;
    $this->color = $color;
    }
    
   
    public function Color(){
        return $this->color;
    }

    public function Todo(){
        echo 'esta es la nueva velocidad ',$this->velocidad,'este es el nuevo motor',
                $this->motor,' cantidad de ruedas ',$this->ruedas;
    }
}

echo '<h1> Moto</h1>';
$moto = new Moto(2,'120 k/h','6 cilindros','azul');
echo $moto->Color(),'<br/>';
$moto->Todo();
/* $moto->ruedas(2); no imprime sin echo
echo 'la moto tiene ',$moto->ruedas(2),' ruedas<br>';
$moto->arrancar('160 km/h', '12 cilindros');
$moto->color('azul');
$moto->frenar();*/

echo '<h1> ferrari</h1>';
$ferrari = new Automovil();// crear una instancia
$ferrari->Arrancar('200 kilometors/h' , '12 cilindros');
$ferrari->color_carro('rojo');
$ferrari->frenar();
echo '<br>';

echo '<h1> poche</h1>';
$porche = new Automovil();
$porche->Arrancar('160 kilometors/h' , '10 cilindros');
$porche->color_carro('negro');
$porche->frenar();
echo '<br>';
?>
solo me aparece esto y no me aparecen las propiedades de la clase moto cuando las mando a llamar.

Moto


esta es la nueva velocidad este es el nuevo motor cantidad de ruedas
ferrari

arranca ala velocidad de 200 kilometors/h ya que su motor es de12 cilindrosy tiene un colorrojoy ahora has frenado
poche

arranca ala velocidad de 160 kilometors/h ya que su motor es de10 cilindrosy tiene un colornegroy ahora has frenado

4
Aprender a programar desde cero / PHP formas de declarar arrays Ejercicio resuelto CU00824B del tutorial
« en: 22 de Mayo 2015, 21:36 »
Hola buenas podrian revisar mi codigo por favor y darme sugerencias para mejorar

Citar
Crea el código PHP de 3 archivos que den respuesta al siguiente planteamiento:

Queremos almacenar en una matriz el número de alumnos con el que cuenta una academia, ordenados en función del nivel y del idioma que se estudia. Tendremos 3 filas que representarán al Nivel básico, medio y de perfeccionamiento y 4 columnas en las que figurarán los idiomas (0 = Inglés, 1 = Francés, 2 = Alemán y 3 = Ruso). Se pide realizar la declaración de la matriz y asignarle los valores indicados en la siguiente imagen a cada elemento de las siguientes maneras (crea un archivo php por cada una de estas maneras):


Citar
a) Con una sintaxis basada exclusivamente en índices, y mostrar por pantalla los alumnos que existen en cada nivel e idioma.

b) Con una sintaxis basada en el uso anidado de la palabra array, y mostrar por pantalla los alumnos que existen en cada nivel e idioma.

c) Con una sintaxis que combine el uso de array y el uso de índices, y mostrar por pantalla los alumnos que existen en cada nivel e idioma.

Nota: por ejemplo, debe mostrarse por pantalla que el número de alumnos en el nivel básico, idioma inglés, hay 1 alumno; en el nivel básico, idioma francés, hay 14 alumnos, etc.

Código: [Seleccionar]
<?php
$numero_alumnos= array(
array(0, 14, 8, 3),
array(6,19,7,2),
array(3,13,4,1),
array("basico", "medio", "perfeccionamiento"),
array("ingles","frances", "aleman","ruso")
);
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[4][0];echo"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[4][1];echo"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[4][2];echo"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[4][3];echo"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<br>";
echo $numero_alumnos[3][0];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[0][0];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[0][1];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[0][2];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[0][3];echo "<br> ";
echo $numero_alumnos[3][1];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[1][0];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[1][1];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[1][2];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[1][3];echo "<br> ";
echo $numero_alumnos[3][2];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo "&nbsp&nbsp&nbsp";
echo $numero_alumnos[2][0];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[2][1];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[2][2];
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
echo $numero_alumnos[2][3];
?>

5
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo overflow CSS scroll. overflow-x, overflow-y. Ejercicio tutorial CU01038D
« en: 26 de Abril 2015, 06:33 »
Enunciado:

Citar
Crea un contenedor div con las siguientes características definidas a través de CSS: ancho y alto 200 píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho tipo sólido, un texto de tamaño 30 píxeles y con un largo suficiente para exceder la capacidad del div contenedor, y mediante la propiedad overflow haz que aparezcan scrolls horizontal y vertical que permitan visualizar todo el texto.

Respuesta:

html

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" href="css/ejercicio_visibility_overflow.css">
</head>
<div>
Crea un contenedor div con las siguientes características definidas a

través de CSS: ancho y alto 200 píxeles, color de fondo amarilo, borde

color azul de 2 píxeles de ancho tipo sólido, un texto de tamaño 30 píxeles

y con un largo suficiente para exceder la capacidad del div contenedor, y

mediante la propiedad overflow haz que aparezcan scrolls horizontal y

vertical que permitan visualizar todo el texto. Para comprobar si tu código

y respuestas son correctas puedes consultar en los foros

aprenderaprogramar.com.
</div>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

div{
width: 200px;
height: 200px;
background-color: yellow;
border: blue solid 2px;
font-size: 30px;
overflow: scroll;
}

6
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D)
« en: 26 de Abril 2015, 03:47 »
Enunciado

Citar
Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con el aspecto indicado en el enunciado del ejercicio.

Nota: los anchos de los elementos serán del 100 % disponible si es todo el ancho (por ejemplo <<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<Menú>>) y del 50 % si es una columna doble (por ejemplo <<Artículo sobre Gimp>>).


Respuesta - código html

Código: [Seleccionar]
<html> <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/diseño_columnas.css">
</head>
<body>

<body>
<div id="cuerpo">
<header id="cabecera">
Bienvenidos a aprenderaprogramar.com
</header>
<nav>
<ul>
<li>Menú</li>
<li>-Cursos</li>
<li>-Humor</li>
<li>-</li>
<li>Divulgacion</li>
</ul>
</nav>
<section>
<article id="articulo_1" class="articulo">
Conoce las últimas novedades del lenguaje JavaScript.
</article>
<article id="articulo_2" class="articulo">
Artículo sobre Gimp, un programa de software libre para el diseño gráfico.
</article>
</section>
<aside>
Espacio reservado para publicidad
</aside>
<footer>
Contacta con nosotros <a

href="https://www.aprenderaprogramar.com/">www.aprenderaprogramar.com</a>
</footer>
<div id="aviso">
Aviso legal
</div>
</div>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

#cuerpo{
text-align: center;
text-family: arial;
}

header{
border: solid black;
border-width: 5px;
background-color: #DEB887;
width: 100%;
box-sizing: border-box;
padding: 20px;
}

nav{
border-right: 5px solid black;
border-bottom: 5px solid black;
border-left: 5px solid black;
width: 25%;
float: left;
box-sizing: border-box;
}

section{
border-right: 5px solid black;
border-bottom: solid black 5px;
background-color: red;
width: 50%;
height: 95px;
float: left;
box-sizing: border-box;
}

#articulo_1{
background-color: #ADD8E6;
border-bottom: solid black 5px;
padding: 11px;
}

#articulo_2{
padding: 14px;
background-color: #90EE90;
}

aside{
width: 25%;
height: 95px;
border-bottom: solid black 5px;
border-right: solid black 5px;
float: left;
box-sizing: border-box;
}

footer{
width: 50%;
float: left;
background-color: #DDA0DD;
box-sizing: border-box;
border-right: solid black 5px;
border-bottom: solid black 5px;
border-left: solid black 5px;
padding: 10px;
}

#aviso{
width: 50%;
float: left;
border-bottom: solid black 5px;
border-right: solid black 5px;
box-sizing: border-box;
padding: 10px;
}

me podrian apoyar con este tema por favor, no me queda claro todavia lo de porcentajes.

en el ejercicio combine porcentaje con pixeles , en la altura no se como basarme en porcentaje , mi ejercicio creo esta mal podrian acesorarme para mejorar  por favor

saludos

7
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo float left y float right CSS Ejercicio resuelto CU01035D del tutorial
« en: 26 de Abril 2015, 01:29 »
Enunciado:

Citar
Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:
a) En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.
b) En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.
c) En tercer lugar se deben mostrar 3 cajas div de 200x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la derecha gracias al uso de float right.
d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el texto <<Curso CSS aprenderaprogramar.com>>

 

Nota: si es necesario, usa los div contenedores auxiliares que te sean necesarios.


Respuesta:

html

Código: [Seleccionar]
<html> <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ejercicio_clear.css">
</head>
<body>

<div id="caja1" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja2" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja3" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja4" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja5" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja6" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja7" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="caja8" class="cajas">
<div id="texto" class="texto">caja</div>
</div>
<div id="cajas_1" class="cajas_1">
uno cajas
</div>
<div id="cajas_2" class="cajas_1">
dos cajas
</div>
<div id="cajas_3" class="cajas_1">
tres cajas
</div>
<div id="cajas_1_4" class="cajas_2">
Curso CSS aprenderaprogramar.com
</div>
<footer>
hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;}

.cajas{
width: 50px;
height: 50px;
margin-right: 5px;
float: left;
}

#caja1{
background-color: red;}
#caja2{
background-color: blue;}
#caja3{
background-color: brown;
}
#caja4{
background-color: black;
}
#caja5{
background-color: yellow;
}
#caja6{
background-color: purple;
}
#caja7{
background-color: orange;
}
#caja8{
background-color: silver;
}

.texto{
text-align: center;
background-color: yellow;
}

.cajas_1{
width: 200;
height: 50px;
margin-right: 5px;
float: right;
}

#cajas_1{background-color: green;}
#cajas_2{background-color: blue;}
#cajas_3{background-color: orange;}

#cajas_1_4{
background-color: #DEB887;
font-size: 5em;
text-align: center;
}

footer{
text-align: center;
font-size: 50px;
font-family: arial;}

8
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo position fixed CSS y absolute Propiedad position CSS Ejercicio CU01032D
« en: 25 de Abril 2015, 21:52 »
Ejercicio 1

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

html

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel=stylesheet href=css/ejercicio_posicionamiento.css>
</head>

<div id="papi" class="caja">
<div id="hijo_junior" class="cajitas">
</div>
<div id="hija_mediana" class="cajitas">
</div>
<div id="hijo_mayor" class="cajitas">
</div>
</div>

<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;}

#papi{
border: solid  blue 5px }

.cajitas{
width: 300px;
height: 300px;
margin: 40px;
padding: 30px;
}

#hijo_junior{background-color: red;
position: relative;
left: 200px;
top: 100px;
}

#hija_mediana{background-color: orange;
position: relative;
right: 50px;
bottom: 50px;
}

#hijo_mayor{background-color: purple;
position: relative;
left: 450px;
bottom: 300px;
}





Ejercicio 2

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

html
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel=stylesheet href=css/ejercicio1_posicionamiento.css>
</head>


<div id="div1" class="cajitas">
</div>
<div id="div2" class="cajitas">
</div>
<div id="div3" class="cajitas">
</div>


<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;}


#div1{background-color: red;
width: 600px;
height: 600px;
background-color: yellow;
}

#div2{background-color: orange;
width: 400px;
height: 400px;
background-color: green;
position: absolute;
top: 0px;
}

#div3{background-color: purple;
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0px;
}





Ejercicio 3

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

html
Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel=stylesheet href=css/ejercicio2_posicionamiento.css>
</head>


<div id="div1" class="cajitas">
Esta página web utiliza cookies. Si continúa navegando acepta el uso de

cookies.
</div>
<div id="div2" class="cajitas">
EJERCICIO 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. Para comprobar si tus respuestas son correctas puedes

consultar en los foros aprenderaprogramar.com.

 

 

EJERCICIO 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. Para comprobar si tus

respuestas son correctas puedes consultar en los foros

aprenderaprogramar.com.

 
</div>
<div id="div3" class="cajitas">
EJERCICIO 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.

Para comprobar si tus respuestas son correctas puedes consultar en los

foros aprenderaprogramar.com.

 
</div>


<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css


Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;}


#div1{background-color: red;
height: 100px;
background-color: yellow;
position: fixed;
left: 500px;
}

#div2{
font-size: 32px;
font-family: arial;
background-color: orange;
height: 600px;
}


#div3{
font-size: 32px;
font-family: arial;
background-color: purple;
height: 600px;
}

footer{
background-color: silver;
font-size: 32px;
font-family: arial;
text-align: center;}

9
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Centrar imagen de fondo CSS background-position, attachment (CU01031D)
« en: 23 de Abril 2015, 04:14 »
Enunciado:

Citar
Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).


Respuestas:

html
Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con

border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_propiedades_background.css">
</head>
<body>

<div id="caja_1" class="cajas">
caja
</div>

<div id="caja_2" class="cajas">
caja
</div>

<div id="caja_3" class="cajas">
caja
</div>

<div id="caja_4" class="cajas">
caja
</div>

<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
marigin: 0px;
padding: 0px;
}

body{
text-align: center;
background-color: silver;}

.cajas{
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid white 5px;
}

#caja_1{
background-image: url(http://coyotechronicle.net/wp-

content/uploads/2014/05/real-madrid-logos-

0424182101.jpg);
background-color: purple;
background-size: 480px 480px;
background-repeat: no-repeat;
}

#caja_2{
background-image: url(https://encrypted-

tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-

tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);
background-color: orange;
background-size: 480px 480px;
background-repeat: no-repeat;
}

#caja_3{
background-image: url(http://life-

famous.com/celebrities/jim-morrison/jim-morrison-01.jpg);
background-color: orange;
background-size: 440px 440px;
background-repeat: no-repeat;
background-position: 20px 20px;
}

#caja_4{
background-image: url(https://encrypted-

tbn3.gstatic.com/images?

q=tbn:ANd9GcRZe5AvsN7toIAt4c04Kb4NJVy8xsggf4_TmaJKC4td8A6

jtUMX7g);
background-color: black;
background-size: 440px 440px;
background-repeat: no-repeat;
background-position: 20px 20px;
}

10
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / HTML Poner imágenes de fondo y color CSS. background-image CU01030D# ejercicio
« en: 21 de Abril 2015, 03:49 »
Enunciado ejercicio CU01030D del tutorial de fundamentos de programación web con CSS usando Notepad++ como editor:

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

Respuesta:

html

Código: [Seleccionar]
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar

con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>

<div id="caja_1" class="cajas">
Caja 1
</div>
<div id="caja_2" class="cajas">
Caja 2
</div>
<div id="caja_3" class="cajas">
Caja 3
</div>
<div id="caja_4" class="cajas">
Caja 4
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

*{font-family: arial;
text-align: center;}

body{
background-color: yellow;}

.cajas{
width: 250px;
height: 250px;
margin: 30px;
padding: 30px;
color: white;
}

#caja_1{
background-color: purple;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIwlR_9cgOX0ZYaPow6HUmnSYBZsaMYFxdrUelCoMcjjFHE7eD);
}

#caja_2{
background-color: silver;
background-image: url(http://k39.kn3.net/taringa/C/C/C/3/9/D/agente867/745.jpg);
}

#caja_3{
background-color: orange;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBHmlrkbC6StIm947mrAwfnqmN0zbg55e3KuwNm3FRx0H_PB02Hw);
}


#caja_4{
background-color: red;
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRW7g3sM7R8X7cURFla1HBiGnAX7lqCXiiOsDPWyRQSpKvCBpD9jw)
}

11
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Padding, margin CSS márgenes, rellenos Top, right, bottom, left Ejercio CU01029D
« en: 18 de Abril 2015, 22:45 »
Citar
EJERCICIO

Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.

Responde a las siguientes preguntas:

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

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

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)?

html
Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_margin_padding.css">
</head>
<body>

<div id="caja_1" class="cajas">
caja1
</div>
<div id="caja_2" class="cajas">
caja 2
</div>

<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

body{background-color: #FA5858;}

footer{
text-align: center;
font-family: Arial;
}

.cajas{
text-align: center;
font-size: 2em;
background-color: #FFB6C1;
border-top: dotted #DC143C 15px;
border-right: dashed green 10px;
border-bottom: double #FF00FF 10px;
border-left: ridge #2F4F4F 60px;
padding-top: 30px;
padding-right: 45px;
padding-bottom: 0px;
padding-left: 60px;
}

#caja_1{
width: 250px;
margin: 20px;
display: inline-block;
}

#caja_2{
width: 250px;
margin: 20px;
display: inline-block;
}


respuestas
a) el ancho de cada caja (div) es 425px

b)es el alto total del div55

c)el total con margin padding div y borde de izquierda a derecha son : 720


este si me costo sacar las cuentas jaja ahora si necesito su sabiduria por favor.

tengo mas duda en el alto de la caja por el texto

12
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / ¿Qué es el reseteo CSS? Concepto de margen y relleno CSS. (CU01028D)
« en: 18 de Abril 2015, 20:50 »
Enunciado:

Citar
Para cada una de las siguientes afirmaciones indica si la afirmación es verdadera o falsa y justifica brevemente tu respuesta:

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

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

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.

Respuestas:

a) negativo, css muestra los contenidos por medio de cajas  en forma rectangulares.

b)si al crear un documento html el navegador tiene establecidos margenes y rellenos o ambos

c)negativo, el reseteo que explica el ejercicio (CU01028D) consta de borrar el padding y el margin que tiene el navegador por defecto
*{margin 0px; padding 0px;}

13
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Tipos de borde CSS. border-style hidden, solid... Efectos 3D. border-top right b
« en: 18 de Abril 2015, 19:27 »
Enunciado:

Citar
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2, div 3…) y aplícale un estilo de borde diferente utilizando la propiedad border-style.

Respuesta:

Código html:

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a

programar con border">
<meta name="keywords" content="border programar css

html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_border.css">
</head>
<body>

<div id="divisor_1" class="divisores">
divisor 1
</div>
<br>
<div id="divisor_2" class="divisores">
divisor 2
</div>
<br>
<div id="divisor_3" class="divisores">
divisor 3
</div>
<br>
<div id="divisor_4" class="divisores">
divisor 4
</div>
<br>
<div id="divisor_5" class="divisores">
divisor 5
</div>
<br>
<div id="divisor_6" class="divisores">
divisor 6
</div>
<br>
<div id="divisor_7" class="divisores">
divisor 7
</div>
<br>
<div id="divisor_8" class="divisores">
divisor 8
</div>
<br>
<div id="divisor_9" class="divisores">
divisor 9
</div>
<br>
<div id="divisor_10" class="divisores">
divisor 10
</div>
<br>
<footer>
Hecho por carlos enrique gil chong
</footer>
</body>
</html>

Código css externo

Código: [Seleccionar]
body{background-color: #FA5882;}
.divisores{
text-align: center;
font-size: 2em;
background-color: #F7BE81}

footer{
text-align: center;
font-family: Arial;
}

#divisor_1{
border-top: solid brown 5px;
border-right: hidden blue 5px;
border-bottom: dotted orange 5px;
border-left: solid red 5px;}

#divisor_2{
border-top: groove yellow 5px;
border-right: ridge pink 5px;
border-bottom: inset green 5px;
border-left: outset silver 5px;
}

#divisor_3{
border-top: double blue 5px;
border-right: dotted red 5px;
border-bottom: solid black 5px;
border-left: inset green 5px;
}
#divisor_4{
border-top: double blue 5px;
border-bottom: inset green 5px;
border-right: dotted red 5px;
border-left: inset green 5px;
}
#divisor_5{
border-top: solid brown 5px;
border-right: dotted red 5px;
border-left: solid yellow 5px;
border-bottom: dotted orange 5px;
}
#divisor_6{
border-top: double blue 5px;
border-right: double blue 5px;
border-bottom: double blue 5px;
border-left: double blue 5px;
}
#divisor_7{
border-top: dotted blue 5px;
border-right: dotted blue 5px;
border-bottom: dotted blue 5px;
border-left: dotted blue 5px;
}
#divisor_8{
border-top: inset green 5px;
border-right: inset green 5px;
border-bottom: inset green 5px;
border-left: inset green 5px;
}
#divisor_9{
border-top: outset silver 5px;
border-right: outset silver 5px;
border-bottom: outset silver 5px;
border-left: outset silver 5px;
}
#divisor_10{
border-top: groove yellow 5px;
border-right: groove yellow 5px;
border-bottom: groove yellow 5px;
border-left: groove yellow 5px;
}

14
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Color de fondo. Propiedad background-color CSS Ejercicio CU01021D del tutorial
« en: 18 de Abril 2015, 08:49 »
Enunciado:

Citar
Crea un documento HTML donde la ventana del navegador esté dividida en 6 partes, cada una con su borde. En cada división pon como color de fondo lo siguiente:

a) División 1: un color expresado con notación RGB.
b) División 2: un color expresado con notación RGBA.
c) División 3: un color expresado con notación hexadecimal.
d) División 3: un color expresado con notación HSL.
e) División 4: un color expresado con notación HSLA.
f) División 5: un color designado con un nombre.

En cada división incluye un texto con la notación y color empleado. Por ejemplo <<Notación RGB, color 218, 165, 32>>. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Respuesta:

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>tabla de colores</title>
<meta name="description" content="ejercicio de aprender a programar con colores">
<meta name="keywords" content="tabla colores rgb">
<meta charset="utf-8">
<link rel="stylesheet" href="css/background_color.css">
</head>
<body>
<header>
<h1>Creando divisiones de con background-color tabla</h1>
</header>

<div id="division1" class="cajas">
División 1: un color expresado con notación RGB
rgb(200,0,0)
</div>
<br>
<div id="division2" class="cajas">
2: un color expresado con notación RGBA.
rgba(0,100,50,0.5)
</div>
<br>
<div id="division3" class="cajas">
3: un color expresado con notación hexadecimal.
#F781D8
</div>
<br>
<div id="division4" class="cajas">
4: un color expresado con notación HSL.
hsl(250,10%,80%)
</div>
<br>
<div id="division5" class="cajas">
5: un color expresado con notación HSLA.
hsla(125,10%,80%,0.8)
</div>
<br>
<div id="division6" class="cajas">
6: un color designado con un nombre.
orange
</div>

</body>
</html>
css
Código: [Seleccionar]
.cajas{
text-align: center;
border: 5px solid black;
font-size: 30px;
}

#division1{background-color: rgb(200,0,0);}
#division2{background-color: rgba(0,100,50,0.5);}
#division3{background-color: #F781D8;}
#division4{background-color: hsl(250,10%,80%);}
#division5{background-color: hsla(125,10%,80%,0.8);}
#division6{background-color: orange;}

15
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo Crear transparencia en colores CSS rgba y selectores nth-child CU01020D
« en: 18 de Abril 2015, 07:19 »
Enunciado:

Citar
Crea un documento HTML con 20 divisiones. En las diez primeras divisiones introduce el color RGB 178,34,34 con grados de transparencia desde 0.1 hasta 1.0 (en cada división un punto decimal más de opacidad). En las otras diez divisiones introduce el color RGB 218,165,32 con grados de transparencia desde 1.0 hasta 0.1 (en cada división un punto decimal más de transparencia). En cada división escribe el código de color y el grado de transparencia que muestra. Por ejemplo: <<RGB 178,34,34 con transparencia 0.6>>

Respuestas:

html

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>tabla de colores</title>
<meta name="description" content="ejercicio de aprender a programar con colores">
<meta name="keywords" content="tabla colores rgb">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_tabla_colores.css">
</head>
<body>
<header>
<h1>Creando divisiones de colores tabla</h1>
</header>

<table border="5" id="tabla1">
<tr>
<th>RGB 178,34,34</th>
<td>178,34,34,con transparencia 0.1</td>
<td>178,34,34,con transparencia 0.2</td>
<td>178,34,34,con transparencia 0.3</td>
<td>178,34,34,con transparencia 0.4</td>
<td>178,34,34,con transparencia 0.5</td>
<td>178,34,34,con transparencia 0.6</td>
<td>178,34,34,con transparencia 0.7</td>
<td>178,34,34,con transparencia 0.8</td>
<td>178,34,34,con transparencia 0.9</td>
<td>178,34,34,con transparencia 1</td>
</tr>
</table>

<br>

<table border="5" id="tabla2">
<tr>
<th>RGB 218,165,32</th>
<td>218,165,32, con transparencia 1</td>
<td>218,165,32, con transparencia 0.9</td>
<td>218,165,32, con transparencia 0.8</td>
<td>218,165,32, con transparencia 0.7</td>
<td>218,165,32, con transparencia 0.6</td>
<td>218,165,32, con transparencia 0.5</td>
<td>218,165,32, con transparencia 0.4</td>
<td>218,165,32, con transparencia 0.3</td>
<td>218,165,32, con transparencia 0.2</td>
<td>218,165,32, con transparencia 0.1</td>
</tr>
</table>

</body>
</html>
css

Código: [Seleccionar]
header{
background-color: rgb(250,150,0);}

#tabla1 th{background-color: rgb(0%,40%,10%);}
#tabla1 td:nth-child(2){background-color: rgba(178,34,34,0.1);}
#tabla1 td:nth-child(3){background-color: rgba(178,34,34,0.2);}
#tabla1 td:nth-child(4){background-color: rgba(178,34,34,0.3);}
#tabla1 td:nth-child(5){background-color: rgba(178,34,34,0.4);}
#tabla1 td:nth-child(6){background-color: rgba(178,34,34,0.5);}
#tabla1 td:nth-child(7){background-color: rgba(178,34,34,0.6);}
#tabla1 td:nth-child(8){background-color: rgba(178,34,34,0.7);}
#tabla1 td:nth-child(9){background-color: rgba(178,34,34,0.8);}
#tabla1 td:nth-child(10){background-color: rgba(178,34,34,0.9);}
#tabla1 td:nth-child(11){background-color: rgba(178,34,34,1);}


#tabla2 th{background-color: rgb(200,100,0);}
#tabla2 td:nth-child(2){background-color: rgba(218,165,32,1);}
#tabla2 td:nth-child(3){background-color: rgba(218,165,32,0.9);}
#tabla2 td:nth-child(4){background-color: rgba(218,165,32,0.8);}
#tabla2 td:nth-child(5){background-color: rgba(218,165,32,0.7);}
#tabla2 td:nth-child(6){background-color: rgba(218,165,32,0.6);}
#tabla2 td:nth-child(7){background-color: rgba(218,165,32,0.5);}
#tabla2 td:nth-child(8){background-color: rgba(218,165,32,0.4);}
#tabla2 td:nth-child(9){background-color: rgba(218,165,32,0.3);}
#tabla2 td:nth-child(10){background-color: rgba(218,165,32,0.2);}
#tabla2 td:nth-child(11){background-color: rgba(218,165,32,0.1);}

16
Aprender a programar desde cero / Re:Curso CSS desde cero ejercicio CU01013D encadenar varios selectores y herencia
« en: 17 de Abril 2015, 19:59 »
Enunciado:

Citar
Analiza el código HTML del ejercicio. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.

b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.

c) Usando CSS establece como color de texto el verde y tamaño de fuente el 110% respecto de lo normal para los elementos h3 que se encuentren dentro de un elemento cuyo valor class sea <<secundario>>.

d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.

e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.


Respuesta:

Código HTML

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<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">
<link rel="stylesheet" href="css/ejercicio_herencia_selectores_class.css">
</head>
<body>

<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del

sitio.</p></div>

<div class="secundario"><h3>Lanzamos el producto <span>X-FASHION</span></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>
</div>

<div class="secundario"><h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto <span>T-MOTION</span></p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion"

alt="imagen producto tmotion" /></p>
</div>

</body>
</html>

Código css:

Código: [Seleccionar]
.principal h1{
color: red;
font-size: 130%;
}

.secundario h3{
color: green;
font-size: 110%;
}

.secundario h3 span{
background-color: yellow;
}

body{
font-family: Arial, sans-serif;;
}

17
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Seleccionar archivo en formularios CU00725B. enctype multipart/form-data HTML.
« en: 16 de Abril 2015, 18:14 »
Aqui dejo el ejercicio diganme mis errores jefes

Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<meta charset="charset="utf-8">
<meta name="description" content="tutorial html">
<meta name="keywords" content="html5 tutorial aprender">
</head>

<body>
<h1>Inscripcion al concurso java  sedal</h1>
<form method="post" action="accion.php" enctype="multipart/form-data">
<label for="nombre">Nombre :</label>
<input type="name" id="nombre" id="nombre">
<br> <br>
<label for="apellidos">apellidos :</label>
<input type="name" id="apellidos" name="apellidos">
<br> <br>
<label for="email">email :</label>
<input type="email" id="email" name="email">
<br> <br>
<input type="file" name="imagen" id="imagen">
<input type="submit" value="enviar">
</body>
</html>

Páginas: [1]

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