Tutorial {HTML} Creación de firma HTML

Tutorial creacion de firma.

Nivel Medio

Primero que nada empezaremos llevando la firma grafica a lo html. Comenzamos creando un div con el background imagen ya que solo utilizaremos imagenes. tratare de hacer algo paracido a esto [Tienes que estar registrado y conectado para ver este vínculo] pero con html.



Luego le añaden el width, height.



Ahora añadiremos un margin ¿Que es el margin? La propiedad margin es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. Nos ayudara para colocar el elemento en este caso el div en cualquier lugar definido.

Primero creamos el div mas pequeño y lo colocamos dentro del div del que acabamos de crear
Por ejemplo yo use esto:



Y unido queda asi:



Se ve algo rara ¿No?
Pues ahora el margin lo usaremos hay margin-left que sirve para llevarlo izquierda y el margin-right para llevarlo a la derecha , el margin-top para llevarlo arriba y el margin-bottom para llevarlo hacia arriba , esto se usa elementos negativos o positivios en pixeles como 100px o -100px , pero si los pones sin position se te vendra el html entero
Valor “position: absolute”

Las capas que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos.

La posición de las capas con “position:absolute” se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.

Nosotros hemos hecho un ejemplo en el que podrás ver una capa con “position:absolute” y su funcionamiento. No olvides observar el código fuente. Ver ejemplo de position:absolute

Valor  “position: relative”

Anteriormente hemos visto como los elementos con posición absoluta no formaban parte del flujo HTML. Pues a diferencia de éstos, los elementos con posición relativa sí forman parte de este fluir.

Para elementos con un posicionamiento relativo, el origen de sus coordenadas no es la esquina superior izquierda del elemento contenedor, sino la posición que ocuparían naturalmente, de no estar condicionados o posicionados.

Nosotros hemos hecho un ejemplo en el que podrás ver una capa con “position:relative” y su funcionamiento. No olvides observar el código fuente. Ver ejemplo de position:relative

Yo usare margin-bottom y margin-left que tambien se le puede colcoar como  left: y bottom: yo use la segunda opcion y position relative



Use:




Es cuestión de jugar con valores negativos y postivos y con pixeles. Pueden ponerle texto y lo que deseen , bordes redondos. Sean creativos no me traigan algo parecido a lo que hice sino , no lo aceptare. Cualquier duda posteenla acá .

Otros ejemplos:
[Tienes que estar registrado y conectado para ver este vínculo]