top of page

Actividad de consolidación.

App Mentimeter

MENTIMETER.jpg

Tablas, Bordes y Frames en HTML

///////////////////////////////////////////////////////////////////////////////////

Progresión: representa la solución de la situación, fenómeno o problemática a través de páginas web (hosting u hospedaje, dominio, ftp, usuarios, contraseñas), con el lenguaje de Marcas –Hyper Text Markup Language o HTML.

Meta específica: organiza y presenta información, o datos, que dan solución a un problema, a través de un sitio web con el uso etiquetas de HTML.

TABLAS

 

Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.

Una tabla se declara usando el comando <TABLE> ... </TABLE>.

Dentro de la tabla, se usa

<TR></TR> para indicar una fila y dentro de una fila,

<TD></TD> para delimitar el contenido de una celda.

El elemento de cierre de fila y de celda es optativo.

 

El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiquetas vistas anteriormente.

Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más.

TABLA01.jpg

Aquí te muestro una tabla muy simple de tres por tres:

 

<TABLE>

     <TR><TD>CeldaA1</TD><TD>CeldaB1</TD><TD>CeldaC1</TD></TR>

     <TR><TD>CeldaA2</TD><TD>CeldaB2</TD><TD>CeldaC2</TD></TR>

     <TR><TD>CeldaA3</TD><TD>CeldaB3</TD><TD>CeldaC3</TD></TR>

</TABLE>

 

Título de la tabla.

 

Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Aunque ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma:

 

<TABLE>

<CAPTION> Nombre de la tabla </CAPTION>

……….

</TABLE>

Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro de la anchura de la tabla.

Bordes de la tabla.

 

Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta <TABLE>. La sintaxis es:

 

<TABLE BORDER="anchura">

………

</TABLE>

donde anchura indica la anchura en pixeles del borde exterior de la tabla.

El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica solo afecta a los bordes externos.

El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes interiores, debemos hacer BORDER=”1”.

 

Cabeceras de filas y de columnas.

 

La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.

No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado como el de las otras celdas.

 

Tamaño de la tabla.

 

Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla.

La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de la etiqueta <TABLE>. La sintaxis es:

 

<TABLE WIDTH="anchura"> ……… </TABLE>

Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla, o bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del documento del navegador.

A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una anchura mayor, la tabla tomará la anchura mínima para que el texto de las celdas pueda verse íntegramente.

 

Justificación de la tabla.  

Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es mediante la etiqueta <CENTER>.

 

Espacio dentro de las celdas.

 

Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores:

 

• CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.

• CELLSPACING: establece la anchura en pixels de los bordes de cada celda.

 

Justificación del texto de las celdas.

 

HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo es:

<TABLE>

<TR>

<TD ALIGN=”horizontal” VALIGN=”vertical”>

……

</TD>

 

</TR>

…………

</TABLE>

donde:

horizontal: puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.

• vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE.

Por defecto vale CENTER.

 

Si queremos que una determinada justificación horizontal o vertical afecte a todas las celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>.

Frames

 

Los frames (marcos) es una técnica que se utiliza para subdividir la pantalla del visualizador en diferentes ventanas, con la característica de que cada una de ellas se manipule por separado. Esto es como si cada una de ellas fuera una página Web independiente.

Esto es muy útil por si deseamos mostrar permanentemente en una ventana los diferentes contenidos de nuestra página y, en la otra mostrar el contenido seleccionado.

 

Para definir las diferentes subventanas o frames utilizamos las siguientes marcas:

 

<FRAMESET> </FRAMESET> y <FRAME>.

Con <FRAMESET> indicamos cómo se va a dividir la pantalla principal, donde podrán ir varias directivas frameset anidadas con el fin de subdividir cualquiera de las subdivisiones. Sus atributos son:

 

rows= "número o %" (Número de filas)

Se indica el número de filas en que subdividiremos la pantalla. El grupo de números que acompañan se indican en puntos o en el porcentaje de cada una de las subventanas; en este caso se entiende que el primer valor que escribimos corresponde a la ventana superior, el segundo a la ventana inmediatamente inferior y así sucesivamente.

FR01.jpg

Pongamos como ejemplo <FRAMESET rows= "25%, 50%, 25%" >, la pantalla quedaría así:

FR02.jpg

cols= "número o %" (Número de columnas) Se indica el número de columnas en que subdividiremos la pantalla. Los números también se indican en puntos o en porcentaje. Aquí los valores se aplican de izquierda a derecha.

FR03.jpg

Pongamos como ejemplo <FRAMESET cols= "120, *, 80" >, la pantalla quedaría así:

FR04.jpg

Claro que también los podemos tener anidados, como por ejemplo

 

<FRAMESET cols= "250%,*" rows= "15%, *" >

la pantalla quedaría así:

FR05.jpg

Con la marca <FRAME> indicamos las propiedades de cada subventana y necesitamos una marca <frame> para cada subventana creada; los atributos son:

 

name= "nombre" (Nombre). Indica el nombre por el que nosotros nos vamos a referir a esa ventana.

src= "URL" (Lugar de localización). Indica un fichero .html cuyo contenido se mostrará en esa ventana.

marginwidth= número (Ancho del margen). Indica el margen izquierdo y derecho de la subventana, se da en puntos.

marginheight= número   (Alto del margen). Indica el margen superior e inferior de la subventana, se da en puntos.

scrolling= "yes/no/auto" (Desplazamiento). Indica si se aplica una barra de desplazamiento (típica barra para moverse de arriba y abajo que aparece en Windows) a la subventana.

En el caso en que la página que se cargue en ella no quepa en los límites de la subventana. El valor "yes" muestra siempre esta barra de desplazamiento, el valor "no" no la mostrará nunca (es decir, la parte del frame que no quepa en la pantalla no la veremos) y, por último, "auto" la mostrará sólo en caso de que sea necesario.

noresize. Si se escribe este atributo, el usuario no podrá redimensionar las subventanas con el visor; ya que un usuario podría cambiar el tamaño de las subventanas con solo situar el cursor en un borde de la pantalla y desplazarlo.

 

Hay que tener en cuenta que todos aquellos navegadores que no soporten estas marcas de la versión HTML 3.0 no verán nada de los contenidos de nuestros frames. Es por ello que existe otra marca llamada <NOFRAMES> ... </NOFRAMES>

y todo lo que se escriba aquí dentro será lo que vean esos visualizadores, mientras que no afectará a los visualizadores más potentes.

Tarea Semana 13

Productos y actividades solicitadas en clase:

  • T13.C3 Participación activa en clase

  • T14.C3 Formularios en herramientas ofimáticas, con las especificaciones solicitadas

Productos DE TAREA A ENTREGAR:

  • T15.C3 Adjuntar al portafolio de evidencias las respuestas del Insumo6.docx

CD2_Corte3_Insumo6.docx >>

HRASSO.jpg
bottom of page