Etiquetas DIV y SPAN:
Las etiquetas HTML que permiten el uso de las capas son DIV y SPAN. Todas las etiquetas HTML comprendidas entre las correspondientes etiquetas de apertura y cierre configuran la capa.
La etiqueta DIV dispone del modificador id que permite dar un nombre a la capa. Dar un nombre a una capa es fundamental para que los programas Javascript puedan acceder a la misma.
Las características de la capa se establecen con un estilo (style) dentro de la etiqueta DIV de apertura.
El uso de la etiqueta DIV y SPAN es similar, la diferencia es que la etiqueta DIV genera un salto de línea anterior y posterior a su contenido, mientras que la etiqueta SPAN no. La etiqueta SPAN se utiliza para, por ejemplo, crear una capa que contenga algo y se alinee entre dos palabras de un párrafo.
Crear capas:
En KompoZer crearemos capas mediante el botón Capa, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho botón.
Junto a este botón aparecen dos que nos ayudaran a definir la profundidad de la capa, es decir, colocarla arriba o debajo de otra. Dentro de las capas podemos incluir otras capas, imágenes, texto formateado, tablas…etc e incluso definirlas con un color de fondo o imagen de fondo.
Desde el menú Formato podemos activar la Rejilla de posicionamiento que nos ayudara a mover las capas y colocarlas más precisamente donde deseemos.
En este apartado, KompoZer puede resultarnos bastante incompleto frente a las demás alternativas, pero aún así, veamos como crear y modificar una capa:
1) Creamos algún contenido para no crear una capa vacía:
2) Seleccionamos el mismo, y pulsamos sobre el botón “Capa”:
3) Ahora, podremos modificar el tamaño de la misma, así como el contenido, mediante la interfaz gráfica:
Como podemos ver, al arrastrarla, nos ofrece información acerca del tamaño de la misma, esto nos permitirá ajustar el tamaño de la misma.
4) Ahora, dentro de la misma, podremos insertar todo el contenido que deseemos, tal y como hemos aprendido a lo largo de este tutorial:
Yo, por ejemplo, he insertado una imagen.
Hasta Aquí, hemos aprendido a crear la capa, y a introducir el contenido deseado dentro.
Mi recomendación es continuar leyendo este tutorial, ya que para aplicarle propiedades a los distintos elementos de las mismas, es necesario crear estilos CSS, los cuales estudiaremos en los siguientes post, ya que no existe, de momento, ningún menú que nos permita definir las características de las capas ni de sus elementos de forma directa.
Las etiquetas HTML que permiten el uso de las capas son DIV y SPAN. Todas las etiquetas HTML comprendidas entre las correspondientes etiquetas de apertura y cierre configuran la capa.
La etiqueta DIV dispone del modificador id que permite dar un nombre a la capa. Dar un nombre a una capa es fundamental para que los programas Javascript puedan acceder a la misma.
Las características de la capa se establecen con un estilo (style) dentro de la etiqueta DIV de apertura.
El uso de la etiqueta DIV y SPAN es similar, la diferencia es que la etiqueta DIV genera un salto de línea anterior y posterior a su contenido, mientras que la etiqueta SPAN no. La etiqueta SPAN se utiliza para, por ejemplo, crear una capa que contenga algo y se alinee entre dos palabras de un párrafo.
Crear capas:
En KompoZer crearemos capas mediante el botón Capa, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho botón.
Junto a este botón aparecen dos que nos ayudaran a definir la profundidad de la capa, es decir, colocarla arriba o debajo de otra. Dentro de las capas podemos incluir otras capas, imágenes, texto formateado, tablas…etc e incluso definirlas con un color de fondo o imagen de fondo.
Desde el menú Formato podemos activar la Rejilla de posicionamiento que nos ayudara a mover las capas y colocarlas más precisamente donde deseemos.En este apartado, KompoZer puede resultarnos bastante incompleto frente a las demás alternativas, pero aún así, veamos como crear y modificar una capa:1) Creamos algún contenido para no crear una capa vacía:
2) Seleccionamos el mismo, y pulsamos sobre el botón “Capa”:
3) Ahora, podremos modificar el tamaño de la misma, así como el contenido, mediante la interfaz gráfica:Como podemos ver, al arrastrarla, nos ofrece información acerca del tamaño de la misma, esto nos permitirá ajustar el tamaño de la misma.4) Ahora, dentro de la misma, podremos insertar todo el contenido que deseemos, tal y como hemos aprendido a lo largo de este tutorial:
Yo, por ejemplo, he insertado una imagen.Hasta Aquí, hemos aprendido a crear la capa, y a introducir el contenido deseado dentro.
Mi recomendación es continuar leyendo este tutorial, ya que para aplicarle propiedades a los distintos elementos de las mismas, es necesario crear estilos CSS, los cuales estudiaremos en los siguientes post, ya que no existe, de momento, ningún menú que nos permita definir las características de las capas ni de sus elementos de forma directa.
0 comentarios: