Tablas
Las tablas son cuadrículas que uno crea por ejemplo para colocar un horario escolar o un
modelo de factura o recibo. Las tablas se crean con la etiqueta <TABLE>para indicar donde comienza y </TABLE> para
indicar donde termina.
Las tablas se construyen especificando, fila a fila, el contenido de cada celda mediante las etiquetas <TD> y </TD>. Para cambiar de fila usamos la etiqueta <TR>.
Ante de entrar en más detalles, en el siguiente ejemplo crearemos una tabla.
Ejemplo 7: en este ejemplo crearemos nuestro horario escolar de vacaciones útiles. Será una
tabla de 5 filas por 4 columnas.
El resultado se muestra a continuación.
Vemos que a nuestra tabla le falta algo de decoración. Los siguientes atributos pueden ayudarnos:
<TABLE ALIGN=“Alineación” BGCOLOR=“Color de Fondo” BORDER=“Borde”
BORDERCOLOR=“Color de Borde” CELLPADDING=“Margén Interior”
CELLSPACING=“Espacio Entre Celdas” WIDTH=“Ancho” > y </TABLE>
“Alineación” determina la alineación de la tabla (LEFT, CENTER o RIGHT).
“Color de Fondo” determina el color del fondo de la tabla.
“Borde” determina el ancho del borde exterior de la tabla.
“Color de Borde” es el color de todas las líneas de la tabla.
“Margen interior” indica el margen entre el borde de la celda y el contenido de la celda.
“Espacio Entre Celdas” indica la separación entre las celdas y WIDTH es el ancho de toda la tabla en porcentaje, donde 100% es el ancho de toda la página.
Ejemplo 8: Ahora modificaremos nuestro horario escolar creado en el ejemplo anterior.
El resultado se muestra a continuación.
Todavía podemos mejorar la tabla usando los atributos mostrados en la siguiente página:
<TH ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas”
ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TH>
Define las cabeceras de las columnas.
“Alineación” es la alineación horizontal dentro de la celda, puede ser LEFT, CENTER, RIGHT, JUSTIFY o DECIMAL.
“Alineación” es la alineación horizontal dentro de la celda, puede ser LEFT, CENTER, RIGHT, JUSTIFY o DECIMAL.
“Color de Fondo” es el color de fondo dicha celda.
“Combinar Columnas” indica cuantas celdas horizontales se van a unir.
“Combinar Filas” indica cuantas celdas verticales se van a unir.
”Alineación Vertical” determina la orientación vertical
dentro de la celda, puede ser BOTTOM, CENTER, TOP o BASELINE.
<TD ALIGN=“Alineación” BGCOLOR=“Color de Fondo” COLSPAN=“Combinar Columnas”
ROWSPAN=“Combinar Filas” VALIGN=“Alineación Vertical”> y </TD>
Define una celda de la tabla. La descripción de los atributos son iguales a la
etiqueta anterior.
Ejemplo 9: Continuemos modificando nuestro horario.
El resultado se muestra a continuación.
Fondo de la Página
En el caso que desees que el usuario pueda bajar archivos a su computadora, tal como lo hiciste tú con esta bellísima separata debes usar la siguiente etiqueta:
<BODY BACKGROUND=“Imagen de fondo” BGCOLOR=“Color de fondo”> y </BODY>
“Imagen de fondo” es el nombre del archivo que contiene la imagen, debe estar en la misma carpeta donde estas guardando todo. “Color de fondo” es el color escrito en inglés, en la página 5 te di una lista de colores.
Los archivos de imagen que soporta el HTML son de formato JPG o GIF.
JPG es de menor tamaño que un GIF.
JPG suele utilizarse para fotografías e imágenes grandes y GIF para imágenes pequeñas.
Inserción de Imágenes
La inserción de una imagen dentro del documento HTML se hace mediante la etiqueta:
<IMG SRC=“Archivo de imagen” ALT=“Nombre alternativo” ALIGN=“Alineación” BORDER=“Borde” HEIGHT=“Altura” WIDTH=“Ancho”>
“Archivo” es el nombre del archivo de imagen, debe estar en la misma carpeta donde estas guardando todo.
“Nombre alternativo” es un texto que aparecerá debajo de la imagen cuando coloque el puntero sobre la imagen.
“Nombre alternativo” es un texto que aparecerá debajo de la imagen cuando coloque el puntero sobre la imagen.
“Alineación” permite alinear la imagen en la página puede ser LEFT o RIGHT o también para alinear el texto que viene a continuación de la imagen donde puede ser TOP, MIDDLE o BOTTOM.
“Alineación” permite alinear la imagen en la página puede ser LEFT o RIGHT o también para alinear el texto que viene a continuación de la imagen donde puede ser TOP, MIDDLE o BOTTOM.
“Borde” es un número que determina el ancho del borde alrededor de la imagen. “Altura” y “Ancho” son números que permiten definir el tamaño de la imagen.
Se recomienda usar siempre los atributos HEIGHT y WIDTH ya que esto permite que el navegador reserve un espacio para la imagen y continué cargando la página mientras va cargando la imagen. Si no usa estos atributos el navegador esperará a terminar de cargar la imagen para luego continuar con la carga del resto de la página00
Para centrar una imagen en la página use las etiquetas <CENTER > y </CENTER > alrededor de la imagen. También para alinear puede usar <P> ALIGN= “Alineación” y </P> donde “Alineación” puede ser LEFT, CENTER o RIGHT.
Existen programas que pueden unir varias imágenes GIF en secuencia y formar un solo archivo GIF, lo que dará una sensación de movimiento. Este archivo GIF resultante se conoce como GIF ANIMADO y en Internet se puede conseguir muchos y gratis. En mi página www.lanzadera.com/elprofediaz has visto algunas.
Ejemplo 10: Crearemos una página con muchas imágenes. Las imágenes que usaré están en la carpeta que bajaste de mi página, búscalas y cópialas a tu carpeta.
El resultado se muestra a continuación.
Enlace con otras páginas
Los enlaces o hiperenlaces o hipervínculos más importantes son aquellos que nos permiten conectarnos con otra de nuestras páginas o con una página cualquiera de Internet.
Todo enlace tiene la siguiente forma:<A> <HREF=“Página Web”>HiperTexto o HiperImagen> </A >
Donde “Página Web” es la dirección de la página
Web a la que deseamos conectarnos y el HiperTexto o HiperImagen es cualquier texto o imagen a la que se deberá hacer clic para saltar a la página deseada.
Ejemplo 11:Ahora construiremos un documento que nos conectará con la página de Microsoft, con la página del Profe Díaz y con una de las páginas creadas en esta hermosa separata. Recuerde mi recomendación al principio del curso: Para que no tengas problemas con las rutas, guarda todo en una sola carpeta. Por ejemplo yo lo he guardado todo en la carpeta C:\Separatas del ProfeDiaz\HTML.
El resultado se muestra a continuación.
Enlace con direcciones de correo electrónico
En este caso, haciendo clic en el enlace, no se inicia una nueva página, sino más bien se abre un programa de correo electrónico como, por ejemplo, el Outlook Express.
La etiqueta utilizada es la siguiente:
<A HREF=mailto:“Dirección de correo”>HiperTexto o HiperImagen> </A>
Donde “Dirección de correo” es la dirección de correo electrónico a la que deseamos escribir y el HiperTexto o HiperImagen es cualquier texto o imagen a la que se deberá hacer clic para abrir el programa de correo electrónico.
Ejemplo 12: Ahora construiremos un documento que nos permitirá enviar un saludo al Profe Díaz.
El resultado se muestra a continuación.
Al hacer clic en el hipertexto o hiperimagen se abre el programa de correo electrónico, tal como muestra la figura de la siguiente página:
Nota: Sin embargo está utilidad sólo servirá si la computadora donde ve la página tiene un servicio de correo electrónico proporcionado por algún proveedor de Internet. Si ese no es el caso entonces esta utilidad no servirá para nada y no se podrá enviar ningún correo.
Bajar archivos desde tu página
En este caso, haciendo clic en el enlace, no se inicia una nueva página, sino más bien se abre un programa de correo electrónico como, por ejemplo, el Outlook Express.
La etiqueta utilizada es la siguiente:
<A> <HREF=“Nombre del archivo”>HiperTexto o HiperImagen> </A>
Donde “Nombre del archivo” es el nombre del archivo (con su extensión) que deseas bajar y el HiperTexto o HiperImagen es cualquier texto o imagen a la que se deberá hacer clic para bajar el archivo a la computadora.
Primero: Dibuja en Paint un autorretrato y guárdalo con el nombre de Foto en el mismo lugar donde estas guardando todo, esto es muy importante.
Segundo: Escribe el siguiente código en el bloc de notas y guárdalo con el nombre Ejemplo13.htm
Ejemplo 13:Ahora construiremos un documento que nos permitirá bajar a la computadora un lindo dibujo hecho en Paint.
El resultado se muestra a continuación.
Música y sonido
Nuestra página Web puede tener sonidos incorporados, estos sonidos deben ser archivos del tipo MIDI, WAVE o AU. Y lo más importante deben ser pequeños, un buen tamaño es 40 kb, más de 500 kb es una salvajidad super animalesca.
Desde Internet puede bajarse gratuitamente muchos archivos de sonido MIDI, WAVE o AU. Las etiquetas para Nestscape Navigator y Microsoft Internet Explorer son diferentes.
Para Nestscape Navigator tenemos:
<EMBED SRC=“Archivo de sonido” WIDTH=“Ancho” HEIGHT=“Altura” AUTOSTART= “Inicio automático” LOOP=“Repetir”>
Donde“Archivo de sonido” es el nombre del archivo de sonido, “Ancho” y “Altura” son las dimensiones de la consola que permite manejar el sonido.
“Inicio automático” indica si el sonido empieza automáticamente (toma el valor de true) o no (toma el valor de false).
“Repetir” es el número de veces que se ejecutar el archivo de sonido, si es igual a true el sonido se repetirá indefinidamente.
Ejemplo 14: Ahora construiremos un documento que nos permitirá escuchar dos famosas canciones.
El resultado se muestra a continuación.
Para Internet Explorer tenemos:
Donde“Archivo de sonido” es el nombre del archivo de sonido y “Repetir” es el número de veces que se ejecutar el archivo de sonido, si es igual a INFINITE el sonido se ejecutara indefinidamente.
Además a diferencia del ejemplo anterior, aquí no se verá ninguna consola de manejo de sonido.
Ejemplo 15: Ahora construiremos un documento que nos permitirá escuchar el tema musical de la página del Profe Díaz.
El resultado se muestra a continuación.
Como puedes observar, ya no aparece ninguna consola de manejo de sonido, pero la música si se escucha.
Texto e imagen en movimiento
Para ello usamos las marquesinas que es un cuadro donde se desplaza el texto (sólo es válido para Internet Explorer).
La etiqueta es:
<MARQUEE WIDTH=“Ancho” BGCOLOR=“Color de fondo” DIRECTION=“Dirección” SCROLLAMOUNT=“Avance” SCROLLDELAY=“Tiempo” BEHAVIOR=“Comportamiento”>Texto o Imagen</<MARQUEE>
Donde“Ancho” es el ancho en porcentaje o píxeles del cuadro que contiene la marquesina.
“Color de fondo” es el color de fondo del cuadro que contiene la marquesina.
“Dirección” es la dirección en la que se mueve la marquesina puede ser LEFT o RIGHT.
“Avance” es la cantidad de píxeles que salta el texto o imagen en cada avance, cuanto mayor es, más rápido avanza.
“Tiempo” define el tiempo en milisegundos entre cada salto del texto o imagen, cuanto mayor es, más lento avanza.
“Comportamiento” define el tipo de movimiento si toma el valor de SCROLL entonces el texto o imagen aparece por un lado y desaparece por el otro antes de volver a aparecer, si toma el valor de SLIDE entonces aparece por un lado y se detiene en el otro y si es ALTERNATE entonces rebota de un lado a otro.
Ejemplo 16 :Crearemos algunos textos e imagen en movimiento.
El resultado se muestra a continuación.
