Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

Estos dos elementos de HTML no añaden nada al documento en sí.

Pero con CSS se pueden usar para añadir características visuales distintivas a partes específicas del documento.

Los elementos <div> y <span>, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (span) o en bloque (div)

<span> sirve para aplicarle estilo a una pequeña parte de una página HTML.

Con <div> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <span> y <div> es que con esta última podemos aplicar estilo a una parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta <div> tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificado.

Recordar que los id's se referencian con el prefijo "#" y las clases con "."

Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Dentro de estos elementos <span> y <div> podemos poner distintos contenidos a los cuales se le dara una estructura con ayuda de los atributos class e id o estilos CSS.

Veamos uno ejemplos:

Caja 1 de 200px x 100px

Código utilizado:
<div style="width: 200px; height:100px; border: 1px solid #000000; color: #ffff00; text-align: left; background: #6699FF;">Caja 1 de 200px x 100px</div>

Caja 2 de 200px x 70px





Código utilizado:
<div style="width: 200px; height:70px; border: 2px solid #0000ff; color: #ffffff; text-align: right; background: #ff0000; float: right; ">Caja 2 de 200px x 70px</div>

Caja 3 de 200px x 100px con imagen dentro

Código utilizado:
<div style="width: 200px; height:100px; border: 3px solid #0000ff; color: #ffff00; text-align: left; background: #6699FF;"><img style="float: left;padding:5px;" src="http://3.bp.blogspot.com/_WvACVGW1iPE/TC17bkitDRI/AAAAAAAABGw/fQoU-8nOOCw/s1600/vkucfsb.png"/>Caja 3 de 200px x 100px con imagen dentro</div>

Caja 4 de 200px x 150px con menú

Código utilizado:
<div style="width: 200px; height:150px; border: 3px solid #ffff00; color: #ffffff; text-align: center; background: #ccc;">Caja 4 de 200px x 150px con menú
<ul>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
</ul>
</div>

En los ejemplos anterires yo puse el estilo directo en el div, pero también se puede poner afuera con los atributos class e id.

Ejemplo:

Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.


Código utilizado:
<div class="caja5"><img id="caja5" src="http://3.bp.blogspot.com/_WvACVGW1iPE/TC17bkitDRI/AAAAAAAABGw/fQoU-8nOOCw/s1600/vkucfsb.png"/>Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.</div>

CSS:
<style>
.caja5 {
width: 250px;
height:100px;
border: 3px solid #0000ff;
color: #ffff00;
text-align: left;
background: #6699FF;
}

#caja5 {
float: left;
padding:5px;
}
</style>

Si ponemos solo <div class="caja5"></div>

Se muestra la caja vacia sin contenido, pero con los estilos puestos en la clase caja5


También utilicé dos veces la misma clase, si fuese un id, eso no lo podría hacer.

El contenido dentro de un div o span puede ser muchas cosas, hasta otro div o span.


Leer también:

Guía de referencia CSS.
Manual HTML Básico.

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Raúl dijo...

Gráficamente muy bien explicado, te felicito. Es agradable encontrar posts bien hechos y que realmente enseñan, a mi me ayudó a poner texto en el pie de las entradas. No había pensado que era algo que había que hacer directamente en la plantilla, un saludo y muy buen blog.

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?