martes, 7 de septiembre de 2010

Tabla y su atributos

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.
En un principio nos podría parecer que las tablas son raramente útiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada más lejos de la realidad.

oy, gran parte de los diseñadores de páginas basan su maquetación en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera más optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.
Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero, si deseamos crear una página de calidad, tarde o temprano tendremos que vérnoslas con ellas y nos daremos cuenta de las posibilidades nos ofrecen.

Para empezar, nada más sencillo que por el principio: las tablas son definidas por las etiquetas table> y /table>
Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: tr> y /tr> (Filas)

Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: td> y /td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.

table>
tr>
td>Celda 1, linea 1 /td> td> Celda 2, linea 1 /td>
/tr>

tr>
td> Celda 1, linea 2 /td>
td> Celda 2, linea 2 /td> /tr>
/table>

Atributos que tiene la Tablas y Celdas:
align = Justifica el texto de la celda del mismo modo que si fuese el de un párrafo. (Left, center, Rigth)
valign = Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor = Da color a la celda o línea elegida.
bordercolor = Define el color del borde.
Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:
background = Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height = Define la altura de la celda en pixels o porcentaje.
width = Define la anchura de la celda en pixels o porcentaje.
colspan =
Expande una celda horizontalmente.
rowspan = Expande una celda verticalmente.

Ejercicio que se dejo en Clase:

Body y sus Propiedades

Entre el Body hay propiedades /body> que debemos tomar en cuenta, la siguiente lista mostrará los códigos más su descripción:

background = de Fondo Imagen (JPG, PNG y GIF).
topmargin = Margen superior
Leftmargin = Margen Izquierdo
Rigthmargin = Margen Derecho
Bgcolor = Color del Fondo del documento

Música para tu Web.
Muchos sitios Web utilizan música para armonizar la visita del usuario, esto es bueno ya que hace más interesante nuestro sitio.
Pero también tiene sus consecuencias, cómo cuales?.... El sitio se hace más pesado y lento. Otro sería que NO TODOS LOS NAVEGADORES que hay en la red, pueden leer el código para colocar la música.
Pero hay formas de nuestro sitio tenga música per esto lo veremos en 8º semestre en Flash, será más fácil.
Pero vamos a intentarlo con este código:
bgsound src="musica.mp3" loop="1">

El loop es la bucle o la veces que quieres que se reproduzca la música. -1 es infinito.

Videos.
De igual manera sucede con los vídeos, el subir un video a nuestro sitio servidor es pesado e inclusive para subirlo tardara mucho.
Para poder visualizar un video tienes que tomar en cuenta el tipo de formato que tenga:
AVI, MP4, WMB.
embed src="video.avi" width="300" heigth="300">

Tipografía y sus Atributos



Esto se hace a partir de la etiqueta <> y su cierre < / font >correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir.
A continuación los atributos principales de esta etiqueta:

Atributo FACE
Hay que tener mucho cuidado con este atributo, ya que cada usuario dependiendo de la plataforma que utilice, puede no disponer de los mismo tipos de fuente que nosotros con el que, si nosotros elegimos un tipo del que no disp
one, el navegador se verá forzada a mostrar el texto con
la fuente que utiliza por defecto (suele ser Times New Roman).

Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra por separado por comas.
En este caso el navegador comprobará que dispone del primer tipo enumerando y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tip
o que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.

font >Más el texto que quiero que aparesca /font>

Atributo Size
Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente.

Elegiremos por tanto un valor size="1" para las letras más pequeñas o size="7" para las más grandes. Ejemplo:
font >Más el texto que quiero que aparesca /fon>

Atributo Color
El color del texto puede ser definido mediante el atributo COLOR-
Cada color es a su vez definido por un número de hexadecimal que esta compuesto a su vez de tres partes. Cada uno de estas partes representan la contribución de rojo, verde y azul al color en cuestion. (RGB).
Ejemplo:
font >Más el texto que quiero que aparesca /font>

Colores Hexadecimales
La composición de web juega un papel muy importante que son los colores. Se indican en valores RGB, es decir que para conseguir un color cualquiera mezclaremos cantidades de Rojo Verde y Azul. Los valores RGB se indican en numeraciones hexadecimales en base 16. (Los dígitos puede crecer hasta 16. Como no hay tantos dígitos numéricos se utilizan las letras de la A a la F.
Para conseguir un color, mezclaremos valores de esta manera: RRGGBB, donde cada valor puede creccer desde 00 hasta FF. Ejemplo:

Cómo se cambiaría la fuente para escribir en rojo:
font >Má el texto en rojo /font>
Al atributo del color se le agrega un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena.

Narana # ff8000
verde turquesa # 339966
Azul Oscuro # 000080