Aprende Joomla con el libro "Creación y administración web con Joomla. Curso paso a paso" 2ª Edición. 168 pgs. Editorial aprenderaprogramar.com. Disponible en formato papel y ebook.
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.
a:link {color:red;}
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;}
<!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>
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;}
li a:link{......... font-weight: cursive; color:blue;}
/*Border-bottom subrayado*/
@font-face {font-family:"Bublegum"; src:url(BubblegumSans-Regular.otf);}
h1 {font-family:"Bublegum"}
@font-face {font-family:"Just"; src:url(Just-Gotta-Smile.ttf);}
h2 {font-family:"Just"}
@font-face {font-family:"Alef"; src:url(Alef-Regular.ttf);}
p {font-family:"Alef"}
<!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>
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;}
<!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>
<body>
<h1> Portal Web aprender a programar </h1>
<h2> Didáctica y divulgación de la programación </h2>
<div>Menú</div>
<div id="divisor"> </div>
<ul>
<li> <div id="uno"> </div> <a href="#"> <span class="alinear"> Inicio </span> </a> </li>
<li> <div id="dos"> </div> <a href="libros.html"> <span class="alinear"> Libros de programación </a> </li>
<li> <div id="tres"> </div> <a href="cursos.html"> <span class="alinear"> Cursos de programación </a> </li>
<li> <div id="cuatro"> </div> <a href="humor.html"> <span class="alinear"> Humor informático </a> </li>
</ul>
<p> Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan </p>
</body>
.alinear {position:relative; top:11px; right:-9px;}
p{position:relative; left:-33px;}
li {list-style-type:none; margin-left:-8px; position:relative; top:-32px; padding-top:33px;}
#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:-10px; width:40px; height:40px;
}
#dos {background-position:40px;}
#tres{background-position:80px;}
#cuatro{background-position:120px;}
<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>
.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%;}
<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>
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;}
<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>
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%;}
<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>
#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;
}
div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:30px;
display:inline;
float:right;
position:relative; bottom:33px;
background-color:#90EE90;
padding-top:2px;
}
<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>
/* 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;
}
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
RSS -
WAP2