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

Páginas: [1] 2
1
De todo un poco... / Oferta de empleo - Programador Java Senior - Buenos Aires - Argentina
« en: 29 de Mayo 2020, 21:35 »
Estimada Comunidad:

Les cuento que tengo una nueva búsqueda en una muy importante empresa. Me solicitan Desarrolladores Java Sr y un Líder en dicho lenguaje.

Se requiere un mínimo de 4 años en Desarrollo profesional comprobable.

El puesto es para estar en Relación de dependencia de manera estable. (no es un proyecto).

Los interesados se pueden comunicar a: rrhh@ltp-asociados.com o al +54911-66705635

Muchas gracias.
Alejandro Faletti

DETALLES

Desarrolladores Java Sr / Líder Java Sr

Formación académica:
– 4to año de Ingeniería en Sistemas o graduado.
– Idioma Ingles avanzado (no excluyente).

Detalle:
- Flexibilidad, trabajo en equipo, capacidad de análisis, orientado a resultados, alto nivel de
autonomía.

Metas y objetivos:
- Crecer profesionalmente y proyección a futuro. Tomar decisiones estratégicas sobre el producto.

Experiencia:
- Un mínimo de 4 años de experiencia en empresa de productos como Desarrollador Java.
- Participación de principio a fin en los proyectos.

Habilidades técnicas (poseer alguna de ellas):
- ESB
- Integracion continua (Jenkins – Sonar).
- Metodologias agiles.
- Web Service (SOAP – REST).
- Repositorios (Git – SVN).
- Patron (Grasp – MVC).
- Protocolos HTTP
- Patron de diseño OOP.

JVM
Thread (excluyente)
Struts
Spring
XML
Jason
Eclipse
Intelli J
Build Maven
Build Ant
Gradle

Microcentro / Home office: 2-3 días / Flexibilidad horaria.

Galeno - Se solicitan pretensiones requeridas (bruto).

2
Aprender a programar desde cero / HTML y Animation CSS crear efectos dinámicos y movimiento en página web CU01065D
« en: 01 de Mayo 2017, 20:19 »
Muy buenas tardes!

Adjunto mi ejercicio CU01065D del tutorial de programador web con CSS y aguardo sus correcciones o comentarios. Muchas gracias!

HTML:

Código: [Seleccionar]

<!DOCTYPE html>

<html>
    <head>
        <style>
            #contenedor {width:100%;height:80px;background-color:blue;border-radius:15px; margin:auto;}
            #Primero{width:10%; height:5%;background-color:yellow; margin:5px; border-radius:10px; position:absolute;}

         
                /* Empezamos definiendo las propiedades que va a tener el elemento en cada uno de los estados de la animación mediante el uso de la regla @keyframes.*/
                @keyframes Animacion {
                from {background-color:yellow;}
                /*Al elemento que se le aplique la animacion tendra un fondo de color amarillo*/
                25% {margin-left:24%;}
                /*Al 25% de comenzada la animacion el elemento tendra un margen izquierdo de 24%.*/
                50% {margin-left:49%;}
                /*Al 50% de comenzada la animacion el elemento tendra un margen izquierdo de 49%.*/
                75% {margin-left:74%;}
                /*Al 75% de comenzada la animacion el elemento tendra un margen izquierdo de 74%.*/
                100% {margin-left:87.5%;}
                /*Al 100% de comenzada la animacion el elemento tendra un margen izquierdo de 87.5%.*/
                to {background-color:aqua;}
                /*Al finalizar la animacion el elemento tendra el color definido en esta propiedad. La transformacion del mismo comienza en el primer paso de la animacion partiendo del color definido en "from".*/
                }
             
               
                .uno{animation-name:Animacion; /*Mediante esta propiedad indicamos el nombre de animación definida en una regla @keyframes*/
                animation-duration:2s; /* indicamos el tiempo en segundos (2) que llevará completar un ciclo de la animación. */
                animation-iteration-count:infinite; /*Numero de veces que se repite el ciclo de la animacion.*/
                animation-direction:normal; /*la animación se ejecutará hacia delante.*/
                animation-delay:1s; /*Indica el tiempo en segundos (s) que debe retrasarse el inicio de la animación.*/
                }
        </style>
 </head>

    <body>

        <p><b>Animation CSS:</b>
        Name, duration, delay, fill-mode, iteration-count, direction, timing-function,play-state (CU01065D)</p>

            <div id="contenedor">
                <div class="uno" id="Primero"> </div>
            </div>

    </body>
</html>

3
Aprender a programar desde cero / CSS Animaciones para qué sirve la propiedad perspective y origin CU01063D
« en: 29 de Abril 2017, 18:59 »
Estimados; buenas tardes. Planteo mi solución al ejercicio CU01063D del taller práctico de desarrollo web con CSS desde cero.

Mi pregunta es que función cumple :

Código: [Seleccionar]
perspective: 800px;perspective-origin: 50% 100px;
en el ejercicio final, ya que al quitarlo del código no veo ningún cambio.

Muchas gracias.

Aqui mi ejercicio:

HMTL

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="CSS(63)ejfinal.css">
</head>

<body>

        <div id="transEj1">
           
            <div id="rotateX">
                <img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
            </div>
       
            <div id="rotateY">
                <img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
            </div>
   
            <div id="rotateZ">
                <img src="http://elsitiodeale.byethost7.com/imagenchica.jpg">
            </div>
   
        </div>

</body>

</html>



y el CSS con sus explicaciones:

Código: [Seleccionar]

#transEj1 div {transition:all 2s ease-in-out;
    perspective: 800px;perspective-origin: 50% 100px;}

/* Define las propiedades que afectaran a los div con id="#transEj1"
transition:
    all: indica que se verán afectadas por la transición todas las propiedades que se pueda.
    2s: Las transiciones se realizan en 2 segundos.
    ease-in-out: La velocidad a la que transcurre la transicion (respetando la duracion establecida) sera con comienzo lento y progresion a velocidad constante
*/

#transEj1:hover #rotateX {transform:rotateX(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje X 180 grados.*/

#transEj1:hover #rotateY {transform:rotateY(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje Y 180 grados.*/

#transEj1:hover #rotateZ {transform:rotateZ(180deg);}
/*Al pasar el mouse por un elemento con id "transEj1", este elemento rotara sobre el eje Z 180 grados.*/

4
Aprender a programar desde cero / HTML y CSS con Notepad++ Rotar, escalar, sesgar, trasladar transform. CU01062D
« en: 29 de Abril 2017, 16:48 »
Buenas! Mi ejercicio CU01062D del manual de programación web con CSS y editor Notepad++

Modifiqué algunos valores para hacer mas prolijo el ejercicio.

HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="CSS-Ejfinal(62).css">
</head>

<body>

        <h2> Imagen Original </h2>
        <div>
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen Skew </h2>
        <div id="skew">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
       
        <h2> Imagen Scale </h2>
        <div id="scale">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen Rotate </h2>
        <div id="rotate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
      <h2> Imagen Translate </h2>
        <div id="translate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen con varios efectos </h2>
        <div id="rotate-skew-scale-translate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>

</body>

</html>


CSS:

Código: [Seleccionar]



#skew {transform:skew(35deg);}
/*#skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg); indica un sesgado del elemento de 35 grados sobre el eje x ya que no se menciona un segundo valor que corresponderia al eje y.*/

#scale {transform:scale(1,0.5);}
/*#scale indica el estilo que se aplicará a los elementos con atributo id=”scale”. transform:scale(1,0.5); indica un scalado del elemento de 1 sobre X (horizontal) y 0.5 sobre Y (vertical).*/

#rotate {transform:rotate(2deg);}
/*#rotate indica el estilo que se aplicará a los elementos con atributo id=”rotate”. transform:rotate(2deg); indica una rotación del elemento a 2grados.*/

#translate {transform:translate(20px, 10px);}
/*#translate indica el estilo que se aplicará a los elementos con atributo id=”translate”.
transform:translate(20px, 10px) indica una traslación de 20px (primer valor sobre eje x) y 10px sobre el eje y*/

#rotate-skew-scale-translate {transform:skew(20deg) scale(1.1,1.1) rotate(-20deg) translate(10px, 20px);}
/*#rotate-skew-scale-translate indica el estilo que se aplicará a los elementos con atributo id=”rotate-skew-scale-translate”.
transform:skew(20deg):Indica un sesgado de 20 grados sobre el eje x.
scale(1.1,1.1): Indica un escalado de 1.1 sobre el eje x (horizontal) y 1.1 sobre el eje y (vertical).
rotate(-20deg): Define una rotacion de -20 grados del elemento.
translate(10px, 20px): Indica una traslacion de 10px sobre el eje x y 20 px sobre el eje y.*/


5
Aprender a programar desde cero / HTML CSS Radial-gradient / border-image: bordes personalizados. Ejemplo CU01061D
« en: 27 de Abril 2017, 03:23 »
Queridos, buenas noches.
Adjunto mi ejercicio CU01061D del curso de fundamentos de programación web con CSS desde cero.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="CSS(61)EjercicioFinal.css">
</head>

<body>

    <div>
 
    </div>
   
</body>

</html>


CSS:

Código: [Seleccionar]


div {margin:auto;
    width:400px; height:200px;
    background: radial-gradient(yellow, blue);

    -webkit-border-image:url("http://elsitiodeale.byethost7.com/MarcoBlancoPixabay.png") 10 round }


6
Aprender a programar desde cero / Efecto CSS esquinas redondeadas, border-radius ejemplo sobre tabla HTML CU01058D
« en: 22 de Abril 2017, 14:59 »
Muy buenos dias!
Les dejo mi ejercicio correspondiente a la entrega CU01058D del tutorial de desarrollador web desde cero con CSS.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>

<body>

<div id="contenedor">
   
    <table>
    <thead>
        <tr>
            <th id="color-curva-toplila"> Standard </th>
            <th id="color-curva-toplila"> Professional </th>
            <th id="color-curva-top"> Enterprise </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <div id="x"> </div> </td>
            <td> <div id="x"> </div> </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr> 
        <tr>
            <td> <div id="x"> </div> </td>
            <td> <div id="x"> </div> </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td id="color-curva-bottomlila"> $99 </td>
            <td id="color-curva-bottomlila"> $199 </td>
            <td id="color-curva-bottom"> $399 </td>
        </tr>
    </tfoot>
   
   
</table>
    </div>   
   
</body>

</html>



CSS:

Código: [Seleccionar]

#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
#ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
#x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}

#color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}

7
Aprender a programar desde cero / HTML y CSS Diseñar una página web estructurada en columnas estilos usar CU01057D
« en: 18 de Abril 2017, 01:44 »
Respuesta al ejercicio CU01057D del tutorial de fundamentos de desarrollo web con CSS usando como editor Notepad++

HTML:

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

</head>

<body>
   
    <div class="cols3">
    <h1>en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y</h1>
    <h2>aprenderaprogramar.com</h2>
    </div>

<div class="cols3">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.

CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente.

Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
</div>

</body>
</html>

CSS y explicacion:

Código: [Seleccionar]

.cols3
{-webkit-column-count:3; /*cantidad de columnas para Chrome, Safari, Android, iOs */
-webkit-column-gap: 40px; /*espacio entre columnas para Chrome, Safari, Android, iOs */
-webkit-column-rule: 1px solid #000; /*Ancho, estilo y color de las reglas divisorias de columnas para Chrome, Safari, Android, iOs */

-moz-column-count: 3;  /*cantidad de columnas para Firefox */
-moz-column-gap: 20px;  /*espacio entre columnas para Firefox */
-moz-column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas para Firefox*/
   
column-count: 3;  /*cantidad de columnas sin especificar navegador */
column-gap: 20px;  /*espacio entre columnas sin especificar navegador */
column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas sin especificar navegador*/
 }
 
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento se mueva a lo largo de todas las columnas. Las
abarva a manera de titulo*/

8
Aprender a programar desde cero / Editor Brackets no está mostrando las imágenes al ver página web en navegador
« en: 15 de Abril 2017, 19:21 »
Buenas! les hago una consulta;

Resulta que me han aconsejado usar este editor de código BRACKETS 1.9. La verdad es muy bueno, pero no me esta pudiendo levantar las img cuando quiero ver la pagina en el navegador. El mismo código en Notepad me funciona bien (el navegador lee todas las img).

Alguien sabe que puede estar ocurriendo?

Muchas gracias.

9
Aprender a programar desde cero / Cursores CSS con editor Notepad++ tipos posibles y efectos zoom help CU01054D
« en: 15 de Abril 2017, 18:40 »
Buenas tardes! les adjunto mi ejercicio CU01054D del taller de programación web con CSS usando Notepad++ como editor:

(no tengan en cuenta las imágenes que están desprolijas)

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="Cursores54.css">
</head>

<body>
 
    <div id="Primero"> Div uno
           <ul>
               <li> <a style="cursor:help;"href="https://www.aprenderaprogramar.com" > Link 1 </a> </li>
               <li> <a style="cursor:help;"href="https://www.aprenderaprogramar.com" > Link 2 </a> </li>
               <li> <a style="cursor:help;"href="https://www.aprenderaprogramar.com" > Link 3 </a> </li>
           </ul>
     </div>
   
<div>
<a style="cursor:zoom-in;" href="http://elsitiodeale.byethost7.com/CSS(54)CursoresDOC2.html">
<img src="http://elsitiodeale.byethost7.com/Lamborghinimurcielago.jpg" width="200px" height="300px"> </a>
   </div>

</body>

</html>


HTML (DOC 2 con imagen):

Código: [Seleccionar]
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

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

<body>

Este es el documento n.2 del cursor CSS - Tipos (CU01054D) </br>
<img src="http://elsitiodeale.byethost7.com/Papel%20rustico-pixabay.jpg" width="300px" height="300px">
 
</body>

</html>
CSS:

Código: [Seleccionar]
div {margin:25px; padding:0px; width: 200px; height:300px; border:solid 5px violet;}

10
Aprender a programar desde cero / HTML y diseño tablas CSS descargar estilos o aplicar estilos existentes CU01052D
« en: 15 de Abril 2017, 15:22 »
Buen día! Ejercicio CU01052D del tutorial de programación web con CSS como si estuviera en primero, aguardo sus correcciones / mejoras.

HTML:

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

    <body>
        <table>
            <caption>Contenido nutricional por cada 100 g de alimento.</caption>
            <tr>
                <th>Alimento</th>
                <th>Calorías (kCal)</th>
                <th>Grasas (g)</th>
                <th>Proteína (g)</th>
                <th>Carbohidratos (g)</th>
            </tr>

            <tr>
                <td>Arándano</td>
                <td>49</td>
                <td>0.2</td>
                <td>0.4</td>
                <td>12.7</td>
            </tr>

            <tr>
                <td>Plátano</td>
                <td>90</td>
                <td>0.3</td>
                <td>1.0</td>
                <td>23.5</td>
            </tr>
           
            <tr>
                <td>Cereza</td>
                <td>46</td>
                <td>0.4</td>
                <td>0.9</td>
                <td>10.9</td>
            </tr>

            <tr>
                <td>Fresa</td>
                <td>37</td>
                <td>0.5</td>
                <td>0.8</td>
                <td>8.3</td>
            </tr>
</table>
</body>
</html>


CSS - Punto A:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
/* Definde el color de texto #333 (gris oscuro), la familia tipografica; en primera instancia Helvetica, si el usuario no tiene dicha fuente, se mostrará, Arial y si tampoco la tiene se visualizara cualquier familia que tenga siempre siendo "sans-serif". El largo de la tabla sera de 640px y los bordes colapsados.*/
td, th { border: 1px solid transparent; height: 30px;}
/* El borde de las columnas y filas sera de 1px, solida y transparente. La altura de 30px.*/
th { background: #D3D3D3; font-weight:bold; }
/*El fondo del titulo de cada columna con el color #d3d3d3 (tono gris) y el ancho de tipografia "bold" (negrita)*/
td { background: #FAFAFA; text-align: center;}
/*Color de fondo de cada celda (tono de gris claro) y el texto alineado en cada una de las mismas*/
tr:nth-child(even) td { background: #F1F1F1; }
/* Represanta las filas pares de la tabla  con color de tono gris claro*/
tr:nth-child(odd) td { background: #FEFEFE; }
/* Represanta las filas impares de la tabla  con color de tono gris levemente mas fuerte que el anterior*/
tr td:hover { background: #666; color: #FFF; }
/*Al pasar el mouse por cada una de las celdas, el color de fondo se hace gris oscuro y cada palabra de color blanco*/


CSS - Punto B:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: double 2px;}
td, th { border: 2px double; height: 30px;}
th { background: #D3D3D3; font-weight:bold; }
td { background: #FAFAFA; text-align: center;}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }


/* b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.


CSS - Punto C:

Código: [Seleccionar]


table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: solid 3px orange; border-collapse: collapse;}
td, th { border: 3px solid orange; height: 30px;}
th { background: #D3D3D3; font-weight:bold; }
td { background: #FAFAFA; text-align: center;}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }

11
Aprender a programar desde cero / HTML Estilos y herencia CSS en tablas aplicarles formato personalizado CU01051D
« en: 13 de Abril 2017, 19:48 »
Buenas tardes! Les adjunto mi ejercicio CU01051D del tutorial de desarrollo web con programación en CSS y como siempre aguardo sus mejoras / correcciones.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="CSSEjerciciofinale51.css">
</head>

<body>

    <table id="primera">
        <caption> Tabla numero 1 </caption>
      <tr>
        <th> Columnas </th> 
        <th> Columnas </th> 
        <th> Columnas </th> 
        <th> Columnas </th>
        <th> Columnas </th> 
      </tr>
   
      <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
      </tr>
       
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
       
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
 
       <tr>
        <td> DATO </td> 
        <td> DATO </td> 
        <td> DATO </td>
        <td> DATO </td> 
        <td> DATO </td>
       </tr>
 
        <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
 
        <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
       
       <tr>
         <td> DATO </td> 
         <td> DATO </td> 
         <td> DATO </td>
         <td> DATO </td> 
         <td> DATO </td>
       </tr>
 
     </table>
    </br>
   
   <table id="segunda">
        <caption> Tabla numero 2 </caption>
      <tr>
        <th> Columna 1 </th> 
        <th> Columna 2 </th> 
        <th> Columan 3 </th> 
        <th> Columna 4 </th>
        <th> Columna 5 </th> 
      </tr>
   
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
     </table>

    </br>
       <table id="tercera">
        <caption> Tabla numero 3 </caption>
      <tr>
        <th> Columna 1 </th> 
        <th> Columna 2 </th> 
        <th> Columan 3 </th> 
        <th> Columna 4 </th>
        <th> Columna 5 </th> 
      </tr>
   
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
          <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
        <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
       
       <tr>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
        <td> Casilla 1 </td> 
        <td> Casilla 1 </td>
       </tr>
 
     </table>
</br>

</body>

</html>


CSS

Código: [Seleccionar]

#primera    {width:600px;border-collapse:collapse;}
#primera th {width:20%;} /*columna*/
#primera td, #primera th {border:8px solid gray;} /*no funciona con #primera td,th ...lo mismo en los de abajo*/

#segunda {width:100%;}
#segunda th {width:20%;}
#segunda td, #segunda th {border:2px double brown;}

#tercera {width:500px; border-collapse: collapse;}
#tercera th {width:100px;}
#tercera td {border-bottom:6px solid blue;}

12
Aprender a programar desde cero / Problemas con Menu desplegable mostrar submenú mouse sobre link hover CU01050D
« en: 09 de Abril 2017, 03:24 »
Queridos, buenas noches. Realizando el ejercicio CU01050D del tutorial básico de programación web desde cero con CSS.

No logro comprender como el sub-menu se mantiene en pantalla una vez que el mouse deja de pasar por el link (hover).

Hice este ejemplo y no logro comprenderlo.

HTML

Código: [Seleccionar]

<!DOCTYPE html>
<!-- Código base para el curso CSS -->

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Desplegable-propio2.css">
</head>

<body>

<div id="contenedor">
<h1> CSS - Menú desplegable </h1>
<h2> aprenderaprogramar.com </h2>
<div id="menu">
<ul>
<li> <span> Libros </span>
<ul id="primero">
<li> Item </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</li>
<li> <span> Detalles </span> </li>
<li> <span> Contactos </span> </li>
<li> <span> Datos </span> </li>
</ul>
</div>



</div>


</body>

</html>


CSS

Código: [Seleccionar]


span {text-align:center;}
h1,h2 {text-align:center;}
#contenedor {border:solid 3px blue; width:500px; height:350px; margin:auto;}
#menu {width:400px; height:30px; background-color:#e1f4fb; margin:auto;}
ul {margin-left:1%}
li {width:67px; height:19px; list-style:none; float:left; background-color:#c4f3a4; margin-left:9px; margin-top:5px; text-align:center;}

#primero {display:none;}
#primero li {margin-top:5px; margin-left:-41px;}
#menu:hover ul {display:block;}

13
Aprender a programar desde cero / Menú horizontal CSS o vertical qué significa nav-menu ul color de links CU01049D
« en: 01 de Abril 2017, 19:27 »
Respuesta al ejercicio CU01049D del curso básico de desarrollo web con CSS usando Notepad++ como editor

#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0;}:
Define familia tipografica, elimina simbolo y coloca margenes en 0 (internos como externos),en cada etiqueta en la lista "ul".

#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}
Define a cada "li" como flotante posicionandose a la izquierda, margin top y bottom 0 e izquierda y derecha 0.15em (espacio vertical entre cada "li")
borde de 5px; estilo groove y color del mismo.

#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;}
Define color de fondo de cada link, la altura del mismo y la altura de linea, posiciona cada link flotante hacia la derecha, ancho de 9em;
cada link sera de tipo block; con borde 0.1em, sólido y color #dcdce9, color de texto, sin decoración y alineado al centro.

#nav-menu li a:hover {background-color: #FF6347;}
Define el color al pasar el mouse por la etiqueta

14
Aprender a programar desde cero / Pseudoclases CSS link, visited, focus, hover y active display ejercicio CU01047D
« en: 30 de Marzo 2017, 02:41 »
Ejercicio CU01047D del tutorial básico de desarrollo web con CSS y editor Notepad++.

HTML:

Código: [Seleccionar]


<!DOCTYPE html>
<!-- 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" type="text/css" href="CSS-Pseudoclases(47)-pseudoclases-final.css">
</head>

<body>

<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<br/>

<div>
<div>
<div>Menú</div>
<hr/>

<ul>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Inicio </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Libros de Computación </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Cursos de Computación </span> </a> </li>
<li> <div id="rosa"> </div> <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86"> <span> Humor informatico </span> </a> </li>
</ul>
</div>

<div>

<div>
<p id="textoinline">Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p id="textoinline">Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a> <div id="celeste"> </div> no es tarea de un día ni de una semana:
aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días
podemos estar haciendo nuestros primeros programas.</p>
<p id="textoinline">Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> <div id="celeste"> </div> entre los varios disponibles.
Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras alternativas como Crimson Editor.</p>
<a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179">
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>

<br/>

<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br />
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</form>

</div>

</div>

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

<div>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>

</body>

</html>


CSS

Código: [Seleccionar]

a:visited {color:brown;}
#rosa {margin-bottom:-14px;
width:38px; height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
#rosa:hover{background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
li {list-style-type:none; text-decoration:none;}
li a {font-weight:bold; color:#B22222; position:relative; right:-46px; top:-15px;}
p a {color:blue; font-weight:bold; text-decoration:none;}
p a:hover{color:orange;}
#celeste {
display:inline-block;
position:relative;
top:10px;
width:38px;
height:38px;
background-image:url(http://elsitiodeale.byethost7.com/I%20celeste%2038x38.png);}
#celeste:hover {background-image:url(http://elsitiodeale.byethost7.com/I%20Rosa%2038x38.png);}
p#textoinline {display:inline-block;}

15
Aprender a programar desde cero / Pregunta sobre Pseudoclases en CSS y HTML qué signfica li a:link CU01047D
« en: 28 de Marzo 2017, 00:13 »
Gente buenas tardes.

No logro comprender que resultado tiene esta parte del codigo, que se da como ejemplo en la entrega CU01047D del tutorial de programación web. Muchas gracias!

Código: [Seleccionar]

li a:link{......... font-weight: cursive; color:blue;}
/*Border-bottom subrayado*/

16
Aprender a programar desde cero / Consulta sobre: @font-face CSS y HTML cómo usar las fuentes de google CU01046D
« en: 24 de Marzo 2017, 19:31 »
Estimados; buenas tardes. Estoy siguiendo el curso de programación web de aprenderaprogramar.com entrega CU01046D

No he logrado luego de variooooooooosssssss intentos colocar una url absoluta y que me funcione desde CSS.

He bajado desde Google Fonts varias tipografias y solo me funcionaban si las colocaba en el "head".

Muchas gracias para los que me puedan ayudar.

17
Aprender a programar desde cero / link rel=stylesheet CSS HTML font-family: Tipos de letra Shorthand font CU01045D
« en: 21 de Marzo 2017, 03:07 »
Respuesta propuesta para el ejercicio CU01045D del curso de programación web con CSS de aprenderaprogramar.com:

HTML

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<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" type="text/css" href="CSS-entrega45-tipografia.css">
</head>

<body>

<div id="uno">
a) Lista de prioridad: permite definir varias posibilidades respecto
a las fuentes a emplear en una página web, de modo que la fuente que se usará es la primera
en la lista de prioridad siempre que esté disponible. En caso de no estar disponible la primera
fuente en la lista de prioridad, se pasaría a la segunda y así sucesivamente. Si no hubiera disponible
ninguna fuente dentro de las definidas en la lista de prioridad, se usaría la fuente por defecto.

b) Familia tipográfica o fuente concreta: alude a una fuente concreta y
todas sus variantes (negrita, cursiva, etc.). Una familia tipográfica es por ejemplo
“Times New Roman”, otra familia tipográfica es “Times” y otra familia tipográfica es “Arial”.
Para escribir una familia tipográfica en CSS debemos hacerlo entre comillas simples o dobles siempre que el
nombre contenga espacios en blanco.

</div>

<div id="dos">
a) Lista de prioridad: permite definir varias posibilidades respecto
a las fuentes a emplear en una página web, de modo que la fuente que se usará es la primera
en la lista de prioridad siempre que esté disponible. En caso de no estar disponible la primera
fuente en la lista de prioridad, se pasaría a la segunda y así sucesivamente. Si no hubiera disponible
ninguna fuente dentro de las definidas en la lista de prioridad, se usaría la fuente por defecto.

b) Familia tipográfica o fuente concreta: alude a una fuente concreta y
todas sus variantes (negrita, cursiva, etc.). Una familia tipográfica es por ejemplo
“Times New Roman”, otra familia tipográfica es “Times” y otra familia tipográfica es “Arial”.
Para escribir una familia tipográfica en CSS debemos hacerlo entre comillas simples o dobles siempre que el
nombre contenga espacios en blanco.

</div>

<div id="tres">
a) Lista de prioridad: permite definir varias posibilidades respecto
a las fuentes a emplear en una página web, de modo que la fuente que se usará es la primera
en la lista de prioridad siempre que esté disponible. En caso de no estar disponible la primera
fuente en la lista de prioridad, se pasaría a la segunda y así sucesivamente. Si no hubiera disponible
ninguna fuente dentro de las definidas en la lista de prioridad, se usaría la fuente por defecto.

b) Familia tipográfica o fuente concreta: alude a una fuente concreta y
todas sus variantes (negrita, cursiva, etc.). Una familia tipográfica es por ejemplo
“Times New Roman”, otra familia tipográfica es “Times” y otra familia tipográfica es “Arial”.
Para escribir una familia tipográfica en CSS debemos hacerlo entre comillas simples o dobles siempre que el
nombre contenga espacios en blanco.

</div>


</body>

</html>



CSS

Código: [Seleccionar]

div {margin:33px; padding:25px; width:100%; border-style:solid; border-color:red;}
#uno {font-family:serif;} /* tipografia generica serif*/
#dos {font-size:14px; font-family:sans-serif; color:#B22222;}
#tres {font: 200% fantasy;}


18
Aprender a programar desde cero / Ejercicio Tipografias CSS equivalencias entre tamaños pixeles em puntos CU01044D
« en: 21 de Marzo 2017, 01:24 »
Respuesta propuesta al ejercicio CU01044D del tutorial de programador web con CSS y HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<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">
<style>
body {font-family:calibri;}
td {width:100px; text-align:center;}
div {font-size:11px;}
table {float:left; margin:12px;}
#contener {border-style:solid; border-width:2px; width:70%; height:200px; margin:auto;}
</style>

</head>

<body>

<div id="contener">
<table border=1px;>
<tr style="background-color:yellow;text-align:center; font-size:24px";>
<td colspan="3"> Chrome </td>
</tr>
<tr>
<td> Tipo de título </td>
<td> Píxeles </td>
<td> Em </td>
</tr>
<tr>
<td> h1 </td>
<td> 32  </td>
<td>  2  </td>
</tr>
<tr>
<td> h2 </td>
<td> 24 </td>
<td> 1.5 </td>
</tr>
<tr>
<td> h3 </td>
<td> 18 </td>
<td> 1.12 </td>
</tr>
</tr>
<tr>
<td> h4 </td>
<td> 16 </td>
<td> 1  </td>
</tr>
</tr>
<tr>
<td> h5 </td>
<td> 13 </td>
<td> 0.81 </td>
</tr>
</tr>
<tr>
<td> h6 </td>
<td> 11 </td>
<td> 0.68 </td>
</tr>
</table>

<table border=1px;>
<tr style="background-color:yellow;text-align:center; font-size:24px";>
<td colspan="3"> Firefox </td>
</tr>
<tr>
<td> Tipo de título </td>
<td> Píxeles </td>
<td> Em </td>
</tr>
<tr>
<td> h1 </td>
<td> 32  </td>
<td>  2  </td>
</tr>
<tr>
<td> h2 </td>
<td> 24 </td>
<td> 1.5 </td>
</tr>
<tr>
<td> h3 </td>
<td> 18 </td>
<td> 1.12 </td>
</tr>
</tr>
<tr>
<td> h4 </td>
<td> 16 </td>
<td> 1  </td>
</tr>
</tr>
<tr>
<td> h5 </td>
<td> 13 </td>
<td> 0.81 </td>
</tr>
</tr>
<tr>
<td> h6 </td>
<td> 11 </td>
<td> 0.68 </td>
</tr>
</table>
</div>

</body>
</html>

19
Aprender a programar desde cero / CSS y HTML Uso de text-align, text-decoration, white-space, pre-wrap CU01040D
« en: 11 de Marzo 2017, 16:11 »
Respuesta para el ejercicio CU01040D del taller de programación web con CSS.

HTML

Código: [Seleccionar]
<body>

<div id="uno">
<span class="sub"> En la caja 1 </span> vemos el comportamiento normal, según el cual varios espacios en
blanco seguidos son ignorados y el texto se va desarrollando sobre la caja y
aprovechando un espacio en blanco para crear el salto de línea cuando es necesario
debido a que el tamaño del contenedor es insuficiente.</span>
En la caja 2 vemos el comportamiento no-wrap.
El texto no salta de línea y se mantiene en una única línea, excediendo el tamaño del contendor sin adaptarse a él.
</div>

<div id="dos">
En la caja 1 vemos el comportamiento normal,
según el cual varios espacios en blanco seguidos son ignorados
y el texto se va desarrollando
sobre la caja y aprovechando

un espacio en blanco para crear el salto de línea cuando es necesario
<span class="overline"> debido a que el tamaño </span> del contenedor es insuficiente.
En la caja 2
vemos el comportamiento no-wrap.
El texto no salta de línea y <span class="overline"> se mantiene en una única línea </span>, excediendo el tamaño del contendor sin adaptarse a él.
</div>

<div id="tres">
<span class="quinceespacios"> En la caja 1 vemos el comportamiento normal,               </span> según el cual varios espacios en
blanco seguidos son ignorados y el texto se va desarrollando sobre la caja y
aprovechando un espacio en blanco para crear el salto de línea cuando es necesario
debido a que el tamaño del contenedor es insuficiente.
En la caja 2 vemos el comportamiento no-wrap.
El texto no salta de línea y se mantiene en una única línea, excediendo el tamaño del contendor sin adaptarse a él.
</div>

</body>


CSS

Código: [Seleccionar]

.sub {text-decoration:underline;}
.overline {text-decoration:overline;}
.quinceespacios {white-space:pre-wrap;}

div
{margin:20px;
padding:10px;
width:200px;
height:400px;
border-style:solid;
border-width:4px;
float:left
}
#uno {color:#FF6347; text-align:center; text-indent:10%;}
#dos {color:#008080; white-space:pre-line;}
#tres {text-align:justify; color:#8B4513;text-indent:20%;}

20
Aprender a programar desde cero / CSS ¿Qué es, cómo crear y usar un sprite? Extraer imágnes de una mayor CU01037D
« en: 10 de Marzo 2017, 02:27 »
Respuesta al ejercicio CU01037D del tutorial básico de programador web con CSS.

HTML (sin head).

Código: [Seleccionar]

<body>
<h1> Portal Web aprender a programar </h1>
<h2> Didáctica y divulgación de la programación </h2>

<div>Menú</div>
</br>
<div id="divisor"> </div>
<ul>
<div id="uno"> </div> <li> <a href="#">Inicio</a> </li> </br> </br>
<div id="dos"> </div> <li> <a href="libros.html"> Libros de programación </a> </li> </br> </br>
<div id="tres"> </div> <li> <a href="cursos.html">Cursos de programación </a> </li> </br> </br>
<div id="cuatro"> </div> <li> <a href="humor.html">Humor informático </a> </li> </br> </br>
</ul>
<p> Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan </p>

</body>

</html>


CSS

Código: [Seleccionar]

li {list-style-type:none; margin-left:30px; position:relative; top:9px;}
#divisor{background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png); width:%100; height:40px;}
#uno, #dos, #tres, #cuatro {background-image: url(http://elsitiodeale.byethost7.com/4%20Iconos.png); float:left; margin-left:-20px;}
#uno {width:40px; height:40px; }
#dos {background-position:40px; width:40px; height:40px;}
#tres{background-position:80px; width:40px; height:40px;}
#cuatro{background-position:120px; width:40px; height:40px;}

Páginas: [1] 2

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