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]

Aprender a programar desde cero / HTML y CSS Crear un Diseño con columnas para una página web CU01036D

« en: 06 de Marzo 2017, 23:34 »

Queridos; les paso el código del ejercicio CU01036D del curso de programación web con CSS.

(si alguien logra que el mismo no se "rompa" al achicar el navegador, le agradezco me diga como hace. Muchas gracias.

HTML

Código: [Seleccionar]


<html>

	<head>
		<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="CSS(37)-Float-Clear-Columnas.css">
	</head>

<body>
	
		<div id="cabecera"> Cabecera </div>
		<div id="columna1"> Columna izquierda </div>
		<div id="centro"> Espacio central </div>
		<div id="derecho"> Espacio derecho </div>

</body>

</html>

CSS

Código: [Seleccionar]


div {border-style:solid; text-align:center;}
#cabecera   {border-color:red; width:99.68%;}
#columna1   {border-color:blue; float:left; width:20.50%; height:100px; margin-top:5px;}
#centro     {border-color:green; float:left; height:100px; width:57.75%; margin: 5 1 0 1px;}
#derecho    {border-color:orange; float:right; height:100px; margin-top:5px; width:20.50%;}

Aprender a programar desde cero / Extraer pequeñas imágenes Concepto de sprite CSS y alineación vertical. CU01037D

« en: 25 de Febrero 2017, 19:20 »

Estimados; les paso mi ejercicio CU01037D del tutorial básico de programación web con CSS. Se aceptan miles y miles de correcciones. jejejej
(alguien sabe como alinear el texto de cada "li" en relación al logo de su izquierda?)

HTML:

Código: [Seleccionar]


<html>
	<head>
		<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="CSSSprite(38).css">
		<style> li {list-style-type: none;} </style>
	</head>

	<body>

		<h1> Portal Web aprenderaprogramar.com </h1>
		<h1> Didáctica y disvulgación de la programación </h2>
	
		<div id="divisor"> </div>

	<div id="items">
			<ul class="items">
				<li id="uno"> <div> </div>   <a href="#">Inicio</a> </li> </br> </br>
				<li id="dos"> <div> </div>   <a href="libros.html">Libros de programación</a> </li> </br> </br>
				<li id="tres"> <div> </div>  <a href="cursos.html">Cursos de programación</a> </li> </br> </br>
				<li id="cuatro"> <div> </div> <a href="humor.html">Humor informático</a> </li> </br> </br>
			</ul>
	</div>

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

CSS

Código: [Seleccionar]


#divisor {background-image:url(http://elsitiodeale.byethost7.com/CU01037D_5.png); width:100%; height:40px;}
#items {margin-left:-40px;}
.items li {text-align:left; padding-top:5px;}

.items #uno div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
float:left;
margin-right:8px;
width:40px; 
height:40px;
}

.items #dos div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
background-position:-33%;
margin-right:8px;
float:none; float:left;
width:40px; 
height:40px;
}

.items #tres div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
background-position:-67%;
margin-right:8px;
float:none; float:left;
width:40px; 
height:40px;
}

.items #cuatro div 
{background-image:url(http://elsitiodeale.byethost7.com/4%20Iconos.png);
background-position:-100%;
margin-right:8px;
float:none; float:left;
width:40px; 
height:40px;
}

Aprender a programar desde cero / CSS y HTML Crear una o varias columnas con float uso propiedad position CU01036D

« en: 24 de Febrero 2017, 02:15 »

Ejercicio CU01036D del tutorial de programación web con CSS desde cero.

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-5(37).css">
</head>

<body>

		<div id="bienvenidos"> 
		Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)
		</div>
		
		<div id="publicidad">
		<div id="letra"> Espacio reservado para la publicidad </div>
		</div>
		
		<div id="menu">
			<div id="letras2"> 
				<ul>
					<li> <a href="https://www.aprenderaprogramar.com"> Cursos </a> </li>
					<li> <a href="https://www.aprenderaprogramar.com"> Humor <//a> </li>
					<li> <a href="https://www.aprenderaprogramar.com"> Divulgación </a> </li>
				</ul>
			</div> 
		</div>
		
		<div id="javascript"> 
		Conoce las últimas novedades del lenguaje JavaScript (color de fondo: #ADD8E6)
		</div>
		
		<div id="gimp"> 
		Artículo sobre Gimp, un programa de software libre para el diseño gráfico (color de fondo: #90EE90)
		</div>
	
		<div id="contacta"> 
		Contacta con nosotros (color de fondo: #DDA0DD)
		</div>
		
		<div id="legal"> 
		Aviso legal
		</div>
		
		</div>
</body>

</html>

CSS

Código: [Seleccionar]


/* Curso CSS estilos aprenderaprogramar.com*/

div#letra
{margin-top:25px; 
}
div#letras2
{margin-bottom:20px; 
}
div#bienvenidos
{text-align:center;
border-style:solid; border-width:1px;
width:99.88%; height:20px; 
background-color:#DEB887; 
}

div#menu
{text-align:left;
border-style:solid; border-width:0 1 1 1;
float:left;
width:10%; height:80px; 
background-color:yellow;
}

div#javascript
{text-align:center;
border-style:solid; border-width:0 1 1 1;
float:none;
width:75%; height:30px; 
background-color:#ADD8E6; 
padding-top:9px; 
}

div#publicidad
{text-align:center;
border-style:solid; border-width:0 1 1 1; 
display:inline;
float:right;
width:25%; height:80px; 
background-color:yellow; 

}

div#gimp
{text-align:center;
border-style:solid; border-width:0 0 1 0; 
float:none;
width:80%; height:31px; 
background-color:#90EE90; 
padding-top:9px; 
}

div#contacta
{text-align:center;
border-style:solid; border-width:0 0 1 1; 
float:left; display:inline;
width:50%; height:20px; 
background-color:#90EE90; 
padding-top:2px; 
}

div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:20px; 
float:right;
background-color:#90EE90; 
padding-top:2px; 
}

Si la visualización la dejo en mi monitor de 1080 x 1920 se ve correctamente. Al achicar la pantalla el diseño se rompe. Como puede solucionarse?

Muchas gracias.

Aprender a programar desde cero / CSS y HTML Float Clear ejemplo de uso texto envuelve cajas div y fondo CU01035D

« en: 17 de Febrero 2017, 01:09 »

El 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">
	<link rel="stylesheet" type="text/css" href="CSSFlotanteClearejfinal(36).css">
</head>

	<body>
		
		<div id="uno"> </div>	
		<div id="dos"> </div>
		<div id="tres"> </div>
		<div id="cuatro"> </div>
		<div id="cinco"> </div>
		<div id="seis"> </div>
		<div id="siete"> </div>
		<div id="ocho"> </div> 
	
		<div id="texto"> Con texto </div>
		
		<div id="nueve"> </div> 
		<div id="diez"> </div> 
		<div id="once"> </div> 
		
		</br>
		<div id="fondo"> Curso CSS aprenderaprogramar.com </div>
		
	</body>

</html>

y el CSS

Código: [Seleccionar]

*{font-family: calibri;}

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

#uno {background-color:green;}
#dos {background-color:blue;}
#tres {background-color:pink;}
#cuatro {background-color:red;}
#cinco {background-color:brown;}
#seis {background-color:yellow;}
#siete {background-color:orange;}
#ocho {background-color:gray;}

#texto {background-color:yellow; margin-top:20px; margin-bottom:20px; width:1920px; height:20px; clear:both;}

#nueve {margin-right:5px; width:200px; height:50px; background-color:green; float:right;}
#diez {margin-right:5px; width:200px; height:50px; background-color:red; float:right;}
#once {margin-right:5px; width:200px; height:50px; background-color:blue; float:right;}

#fondo {background-color:#DEB887; width:1920px; height:20px; clear:both;}

Aprender a programar desde cero / Cómo encontrar la solución a ejercicios de los cursos de aprender a programar

« en: 12 de Noviembre 2016, 15:52 »

Estimados; buenos días.

Alguien me podría dar los resultados del ejercicio CU01024D?

No entiendo bien que es lo que hay que hacer!

Muchas gracias.

Aprender a programar desde cero / GRACIAS! Excelente el curso de programación web con HMTL

« en: 17 de Septiembre 2016, 17:26 »

Excelente el curso de HMTL. Vamos por mas! Muchas gracias!
Espero poder mejorar y llegar a ayudar en el Foro.

Un abrazo!

Aprender a programar desde cero / Cómo poner barras separadoras en una web Codigo erroneo? - Entrega nº27 - HTML

« en: 10 de Septiembre 2016, 16:42 »

Estimados, es posible que el código que figura en la pagina, entrega 27 del curso de HTML, no esté dando como resultado la linea roja (<hr>).

Es posible que el correcto sea el siguiente? por ejemplo?

Código: [Seleccionar]

<hr style="width:20%" color="red">
Muchas gracias!!!!

Aprender a programar desde cero / Web subidas no puedo ver los archivos en el hosting

« en: 10 de Septiembre 2016, 16:37 »

Estimados buenos días. Antes que nada aprovecho para agradecerles esta pag. La verdad excelente!

va mi pregunta; al subir los archivos al Hosting que recomiendan. No puedo verlos todos de manera correcta. Cuando los bajo desde la pagina si los veo ok, pero en linea nada que ver. Incluso se me va a otras paginas cuando pongo la dirección.

Que puedo estar haciendo mal? Muchas gracias nuevamente.

Páginas: 1 [2]

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

Noticias: