Tablas e imágenes

 

Una ves que ya tenemos creado el archivo con título y guardado en la carpeta, el siguiente paso sería colocar algún texto e imagen que haga referencia al tema en el que dedicamos la página. Las tablas son muy útiles para posicionar textos e imágenes en la pagina. Previamente y teniendo un boceto de lo que queremos hacer, seleccionamos, tanto en el menú de Tablas o pinchando en icono de insertar tablas. Observa la siguiente ilustración:

Al pinchar sobre el icono podemos seleccionar la cantidad de filas y columnas que deseamos insertar en la página. Observa también que manteniendo presionado el pulsador izquierdo del ratón, podemos seleccionar tanta cantidad de filas y columnas como queramos. En este caso son 3 filas y 2 columnas.

Si seleccionamos en el menú de tabla, y escogemos insertar tablas, a parece un cuadro con mas opciones de configuración de la tablas que estamos insertando.

Como puedes ver, existen tres apartados de configuración. 

El tamaño que viene dada por filas y columnas.

El diseño que nos permite:
El orden en que se cuentan las columnas, y estos puede ser LTR (de izquierda a derecha) o RTL (de derecha a izquierda). su valor predeterminado es siempre de izquierda a derecha. . Este parámetro no tiene mucha importancia para nosotros, pues estamos iniciándonos y podemos utilizar siempre su forma predeterminada.
La alineación (izquierda, centro o derecha) en que se posiciona la tabla. Su valor predeterminado es el izquierdo.
El tamaño del borde
que separa las celdas de la tabla.
El relleno de las celdas que es el margen existente entre el borde y el objeto dentro de la celda.
El espacio entre celdas que es la distancia entre las celdas.

Todos estos valores por defecto están a cero y su unidad es el píxel.

El ancho de la tabla que se puede fijar con valores en píxel o tanto por ciento del total de la página. Esto significa que si le damos un valor en píxel, su anchura será fija. Pero si su valor esta en tantos por ciento, Cuando nuestra pagina sea visualizada por un navegador donde la resolución de la pantalla es 640x400 pixel. la tabla por consiguiente tendrá un ancho total de la pantalla, y así para todas las resoluciones.

En la siguiente ilustración podemos ver la tabla creada de 3 filas y 2 columnas con sus valores predeterminados. 

Al pinchar el menú de tablas, dado que ya tenemos insertada una tabla de 2x3 celdas, las opciones (antes deshabilitadas) se habilitan para de esta forma manipular el posicionamientos de los objetos en la página. De todas las opciones habilitadas, las que meceré la pena comentar son Propiedades de celda y Propiedades de tabla. El resto de las opciones son acción directa donde se encuentre el cursor o selección.

La propiedad de tabla también se puede obtener situando el cursor sobre la tabla y pinchando de pulsador derecho del ratón. Aquí aparece un menú que consta de dos partes.

Uno es cortar, copiar y pegar, y el otro son todas las propiedades de afectan la configuración y el aspecto de la página.

Como podemos ver, tenemos:

Propiedad de la página:

Esta ventana que a su vez posee cuatro pestañas que permiten la configuración completa de la página, precisa un apartado que será el que venga en la próxima hoja.

Propiedad de la tabla:

En el diseño es lo mismo que en el menú de insertar tablas comentado mas arriba,
Fondo personalizado nos permite modificar el aspecto de la tabla variando su color o rellenando el fondo con una imagen que se repetirá hasta alcanzar el total del área de la página.
Colores personalizado que se refiere al color del borde, si hubiésemos dado el ancho del borde en píxel en tamaño del borde. Borde Claro y borde oscuro se utilizan para dar un efecto de dimensiones visuales a la tabla.

Propiedad de las celdas

 

Dentro de cada una de las celdas podemos variar sus propiedades, esto es, que cada celda dentro de la tabla tiene su propia configuración. Así tenemos:

El diseño su alineación tanto horizontal como vertical. Activar la casilla de celda de encabezamiento que hace que el texto sea en formato de negrita y la casilla de no ajustar para que los navegadores no ajusten el texto a la celda cuando se visualice la página. 
Fondo personalizado y colores personalizados es igual que en las propiedades de la tabla, pero para una celda.
Intervalo de celdas
especifica las filas y columnas  que ocupa o están en una celda si ha sido dividida. 

Llegados a este punto vamos dar algunos valores a la tabla, poner un texto y colocar una imagen.

Ancho de la tabla = 100% , colores varios en  algunas celdas y en el fondo de la tabla.

La imagen ejemplo que podemos utilizar es un formato JPG. Este formato se utiliza para imágenes con alta calidad de imagen y alta compresión para la portabilidad por Internet. Otro formato puede se GIF que se utiliza en pequeñas imágenes o que no necesitan alta gamas de colores y su tamaño de bites es también pequeño, por lo que le hace muy práctico para la portabilidad del archivo a través de la Internet.  Este formato se utiliza también para las animaciones  (imágenes con aparente movimiento).

Imagen ejemplo: Archivo: raton.jpg. -  tamaño: 10Kb.

Puedes copiar esta imagen y colocarla en otra carpeta que puedes crear dentro de eresmas.net que habíamos creado con anterioridad, y llamarla imagen. Luego colocando el cursor en la celda donde queramos insertar la imagen y pinchando en el icono de insertar imagen desde un archivo, aparece un cuadro donde podemos cargar la imagen para insertarla. 

Con el botón de examinar localizamos la carpeta previamente creada de imagen, seleccionamos el archivo raton.jpg y aceptamos.

Una vez que la imagen está donde queremos, pinchando con el pulsador derecho del ratón, aparecerá propiedades de la imagen. Observa la siguiente ilustración.

 

Este cuadro contiene todas las propiedades que puede contener una imagen dentro de la página. Podemos variar su tamaño, vincularlo con un enlace hacía otra página y agregarle un texto para que sea visualizado al detenerse el cursor del ratón sobre ella para informar de alguna característica al ínter nauta que esté visitando nuestra pagina en ese momento.

El estado de nuestra obra tendrá hasta ahora el siguiente aspecto:


y para verla directamente en tu navegador puedes pinchar aquí.

En la próxima hoja comentaremos las propiedades de la página y de las imágenes, así como, la creación de enlaces. Los hipervínculos y sus propiedades.

 
Enlace recomendado:
"Web Maestro"

 

Crerra esta ventana