MANUAL DE LISTAS ,IMAGENES Y TABLAS EN HTML

Manual de listas ,tablas e imagenes en HTML

Sebastian Castro Romero CURSO : 1103 JM MATERIA : Informatica

FORMATOS DE LISTAS .

El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando árboles más o menos complejos. Todos los tipos siguen el mismo formato: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> tipo_lista puede ser una de las siguientes: UL, OL, DL.

LISTAS DESORDENADAS

La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo como un putno o un disco. EL formato es el qeu sigue: <UL> <LI>Juan Pedro <LI>Luisa </UL> se verá como Juan Pedro Luisa

LISTAS ORDENADAS

La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un número de orden. Por ejemplo, <OL> <LI>Primer elemento <LI>Segundo elemento </OL> se verá como Primer elemento Segundo elemento

LISTAS DE DEFINICIONES

Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha: <DL> <DT>HTML<DD>Es un lenguaje de definición de páginas web. <DT>Java<DD>Es un lenguaje de programación. </DL> se verá como HTML Es un lenguaje de definición de páginas web. Java Es un lenguaje de programación. La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>.

TABLAS

La organización del texto en una página es posible gracias a las tablas. Muchas páginas web son como páginas de revistas, y la forma más simple de emular las funciones de maquetación son las tablas. Una tabla no es más que una colección de listas y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o imágenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen prácitcamente similares a las que se podrían conseguir en páginas de revistas gracias a los programas de maquetación.

DEFINIR TABLAS

Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las características de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) así: <TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> </TABLE> 1,1 1,2 1,3 2,1 2,2 2,3

Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir márgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos: Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente: El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la correspondiente a la fila 1 y la columna 2.

DEFINIENDO LAS FILAS

La definición de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos:

DEFINIENDO LAS CELDAS

Ya sólo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta última es una celda especial que se verá destacada, como un título para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:

Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo: <TABLE BORDER=1> <TR> <TD COLSPAN=2>1,1 y 1,2</TD> <TD>1,3</TD> </TR> <TR> <TD ROWSPAN=2>2,1 y 3,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD> <TD>3,3</TD> </TR> </TABLE> 1,1 y 1,2 1,3 2,1 y 3,1 2,2 2,3 3,2 3,3

INSERTAR IMAGENES

Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0> El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF, PNG y JPG. Si quieres saber más sobre imágenes e internet debes dirigirte a esta sección dedicada al tema en la guía de diseño. El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo. Su uso es además muy interesante cara a los robots buscadores que de este atributo pueden sacar información del tema tratado en la página.

Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupará la imagen y puede seguir colocando los otros elementos de la página mientras se termina de descargar la imagen. Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado.

IMAGENES Y ENLACES

Recordarás que al hablar de los enalces decíamos que en el contenido de la etiqueta <A> podía ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER. <a href="tema1.htm"> <img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45" height="30"> </a>

¡Gracias!