Diseño Web 3ra Semana

Instituto de Educacin Superior Tecnolgico Pblico - Yunguyo
Modulo Profesional: Gestin de Aplicaciones para Internet

y Produccin
Unidad Didctica: DISEO WEB
FRAMES, TABLAS Y LISTAS

REALIZADO POR: ING. AYDEE J. RIVERA GUERRA
FRAMES
Para crear una pgina dividida en marcos, es necesario crear varios archivos HTML referidos a un archivo
principal, que es el que permite su gestin.
FRAMES MARCOS HORIZONTALES
Para crear una pgina dividida en marcos, es Imaginemos que debemos crear una
ventana dividida en marcos como la de
necesario crear varios archivos HTML referidos a un
la figura, con un marco en la parte
archivo principal, que es el que permite su gestin. superior fijo (en el cual cargaremos el
As pues, antes de nada hace falta impostar este archivo "top.htm", que deberemos crear
aparte) y un marco central (en el cual
archivo "fuente", y, posteriormente, los dems
cargaremos el archivo "central.htm",
archivos que componen el marco. que deberemos, asimismo, crear aparte)
que cambiar segn cual sea la pgina
que deba mostrar. Como hemos
<FRAMESET rows="80,*">
sealado antes, la gestin de estos dos
<frame name="alto" src="top.htm">
marcos correr a cargo de un tercer
<frame name="central" src="central.htm">
archivo, el cual deber invocarlos
</FRAMESET> asignndoles una parte de la pgina.
He aqu el cdigo de esta pgina:
Como podemos ver, el cdigo del marco est encerrado entre las marcas
<FRAMESET></FRAMESET> que se comportan como las marcas usuales
<HTML></HTML>.
El tamao de los marcos, o mejor dicho, el espacio que cada uno de ellos debe ocupar en
la pgina, queda establecido mediante la marca rows="80,*, que significa que el marco
alto (que en este caso es una fila, "row") debe tener 80 pxel, mientras que "*" significa
que todo el resto debe asignarse al marco central. Asimismo, habramos podido expresar
el tamao de los marcos en tantos por ciento de esta manera:
<FRAMESET rows="20%,*">
Una vez impostados los dos parmetros <FRAMESET></FRAMESET>, dentro de ellos se
definen los nombres y los archivos que debern invocarse en los dos marcos creados. Es
necesario dar un nombre al marco (name="alto") e indicar el archivo HTML que deber
cargarse dentro del marco (SRC="top.htm"). Deben, por tanto, crearse previamente dos
archivos de nombre "top.htm" y "central.htm".
Fjate bien en lo importante que es la colocacin dentro del cdigo para una correcta
interpretacin por parte del navegador. As, si se invirtiera el orden de esta manera:
<FRAMESET rows="80,*">
<frame name="central" src="central.htm"> el navegador invertira el orden de asignacin y
<frame name="alto" src="top.htm"> cargara el archivo "central.htm" en el marco superior, y
</FRAMESET> el archivo "top.htm" en el marco central.
FRAMES - MARCOS HORIZONTALES
Obteniendo el siguiente resultado:

FRAMES MARCOS VERTICALES
Para crear dos marcos verticales basta sustituir el
trmino "rows" (filas) con el trmino "cols" (columnas):
<FRAMESET cols="100,*">
<frame name="sx" src="sx.htm">

</FRAMESET>
FRAMES - MARCOS VERTICALES

NOTA
Los antiguos navegadores no soportaban los marcos por lo cual, dada la posibilidad de que
se use uno de estos viejos programas para visualizar las pginas, es til insertar un cdigo
que advierta de la presencia de marcos y de la imposibilidad de que el navegador los
muestre. ste es el cdigo que debes incluir:
<noframe>
<HTML>
<body>
Atencin. Tu navegador no soporta la opcin de los marcos. Para ver estas pginas es
necesario descargar un navegador que soporte dicha opcin. Te aconsejo Netscape
3.0 o superior.
</body>
</html>
</noframe>
MARCOS SIMULTNEOS
Es posible adoptar simultneamente una divisin tanto en
columnas como en filas, de manera que se cree una ventana
dividida en varios marcos. Veamos cmo debemos
intervenir en el cdigo HTML del documento segn el
nmero y la posicin de los marcos que queremos crear.
<frameset rows="100,*">
<frameset cols="150,*">
<frame name="sx" src="sx.htm.htm">
</frameset>
</frameset>

MARCOS SIMULTNEOS
</frameset>
</frameset>

MARCOS SIMULTNEOS
<frameset rows="20%,60%,20%,*">
<frame name="bajo" src="basso.htm">
</frameset>
</frameset>

MARCOS SIMULTNEOS
<frameset cols="75%,25%">
<frameset rows="20%,80%*">
</frameset>
<frame name="dx" src="dx.htm">
</frameset>

MARCOS SIMULTNEOS
<frameset cols="20%,80%*">
</frameset> </frameset>
</frameset>

MARCOS SIMULTNEOS
</frameset> <frameset rows="24%,76%">
<frame name="top" src="top2.htm"> <frame
name="dx" src="dx.htm">
</frameset> </frameset>

MARCOS SIMULTNEOS
<frameset rows="80%,20%">
</frameset>
</frameset>

MARCOS SIMULTNEOS
<frameset rows="20%,60%,20%">
</frameset>

MARCOS SIMULTNEOS
<frameset cols="20%,60%,20%">
</frameset>

MARCOS SIMULTNEOS
Para eliminar el borde gris de los marcos, se debe insertar el siguiente cdigo:
<frameset cols="20%,60%,20%" border=0>
Para impedir que los marcos sean redimensionados por el visitante:

<frame name="alto" src="top.htm" noresize>
Para eliminar siempre las barras de desplazamiento (scrollbars):

<frame name="alto" src="top.htm" scrolling="no">
Para mostrarlas siempre:

<frame name="alto" src="top.htm" scrolling="yes">
Para mostrarlas slo cuando son necesarias:

<frame name="alto" src="top.htm" scrolling="auto">
Para regular la distancia del contenido del marco al margen superior (marginheight) y a los mrgenes izquierdo y
derecho (marginwidth):
<frame name="alto" src="top.htm" marginheight=2 marginwidth=5>
ENLACES
Por lo que se refiere a los enlaces dentro de los marcos (es decir,
cmo cargar una pgina en un marco diverso de aqul en que se
encuentra el enlace) hay que hacer referencia al nombre que
hemos asignado a los diferentes marcos en la fase de
realizacin. Este nombre no se refiere al archivo sino a lo que
aparece escrito despus de "name=". Por ejemplo, en este caso:
el nombre asignado es "alto"

<frameset cols="20%,60%,20%">
Tomemos la siguiente pgina
subdividida en marcos: <frame name="central" src="central.htm">
</frameset>
ENLACES
Pongamos que de un enlace presente en "SX" tengamos
que cargar otra pgina en el marco "central".
Si el enlace presente en el marco "SX", fuera
simplemente:
<A HREF="nuova.htm">Haz clic</A>
la pgina se cargara dentro del mismo marco (es decir, "SX")

porque sin adecuadas marcas especficas el navegador
interpreta que debe cargar la nueva pgina en el mismo
marco en que est presente el enlace.
El cdigo exacto sera:
<A HREF="nuova.htm" TARGET="central">Haz clic</A>

ENLACES
Otro uso fundamental de la marca <TARGET> es el de llamar un
enlace a otra pgina, la cual se visualizar ocupando la pantalla
completa y eliminando todos los marcos preexistentes.
Aqu est el cdigo:
<A HREF="nuova.htm" TARGET="_parent">Haz clic</A>
Si insertas el cdigo:
<base target="_top">
a la cabeza del documento HTML todos los
enlaces presentes en las pginas eliminarn los
marcos existentes, sin necesidad de ir enlace por
enlace.
ENLACES
Es posible tambin que queramos cargar, con un solo clic,
dos o ms marcos (naturalmente, la ventana tiene que
estar dividida por lo menos en tres marcos).
Tomemos una pgina subdividida como en la figura:
<frame name="alto2" src="top.htm">
<frame name="centrale3" src="central.htm">
</frameset>
</frameset>
ENLACES
Lo que queremos es insertar un solo enlace en el marco de
"SX" que cargue simultneamente dos pginas diversas en los
dos marcos de la derecha: "alto" y "central". Para ello, es
mientras que la segunda parte
necesario insertar algunas lneas con cdigo JavaScript. La
deber quedar comprendida
primera parte del cdigo va insertada entre
<HEAD></HEAD>: entre <BODY></BODY>, donde
se quiere insertar el enlace:
<HEAD>
<script language="JavaScript">
 </BODY>
</script>
</HEAD>
ENLACES
TABLAS BSICAS
Las tablas ms sencillas de HTML se definen con tres etiquetas: <table> para crear la table, <tr> para
crear cada fila y <td> para crear una columna.
TABLAS
La etiqueta <table> encierra todas las filas y columnas de la table. Las etiquetas <tr> (del ingles table
row) define cada fila de la table y encierra todas las columas. Por ultimo, la etiqueta <tr> (del ingles
table data cell) define cada una de las columnas de las finlas, aunque realmente HTML no define columnas
sino celdas de datos.
Al definer Una tabla, se debe pensar en primer lugar en las filas que la forman
y a continuacion en las columnas. El motive es que HTML procesa primero las
filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>
TABLAS
La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla tambin lo podemos definir el fondo de la
misma. Esto lo podemos conseguir con el parmetro "bgcolor", que nos pondr un color de
fondo, o "background" para poner una imagen de fondo. Recuerda que si la imagen es ms
pequea que la tabla, sta se repetir tanto a lo ancho como a lo largo.
Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el parmetro
"border". Como en todas los parmetros que ya hemos visto escribiremos: border= "x" siendo la x
un nmero. Ese nmero indicar el grosor del borde. Si no ponemos borde o lo escribimos "0", la
tabla no mostrar borde ninguno. Por supuesto, tambin podemos darle color al borde,
escribiendo la etiqueta "bordercolor" e indicando el color que queramos para nuestro borde.
TABLAS
La tabla: <table>
El parmetro "width" indircar la anchura de la tabla. Esta anchura la podemos poner en pxeles
(width= "300") o con porcentaje (width= "100%").
Dos parmetros ms son cellspacing (que define el espacio entre las celdas de la tabla) y
cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de
una celda).
Como ejemplo, escribiremos el hipottico supuesto de querer una tabla que sea ancha al 100%,
con un borde azul de un pxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El
cdigo quedara de la siguiente forma.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10
cellpadding="10"></table>
Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las
mismas.
TABLAS
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con
su correspondiente cierre </tr>. El contenido de las columnas que estn dentro de la fila
lo podemos alnear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba
de la celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo
podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"),
a la derecha ("right") o justificado ("justify").
Por supuesto a las filas tambin les podemos definir el color de fondo ("bgcolor") y el
color del borde ("bordercolor").
TABLAS
Las celdas: <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y
su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir el la alineacin del contenido que
est dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas
columnas como indiquemos en l. Para agrupar celdas utilizaramos el atributo "colspan" y
para agrupar celdas el atributo "rowspan".
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td
colspan="2"></td>. Y para agrupar dos filas, la indicacin sera la siguiente: <td
rowspan= "2"></td>.
TABLAS
Las celdas: <th>
Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos
atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que
est dentro de una etiqueta <th> est considerado como el encabezado de la tabla, por
lo que se crear en negrita y centrado sin que nosotros se lo indiquemos.
A continuacin vamos a ponerte un pequeo ejemplo de una tabla que combina todas las
cosas que hemos ido viendo en el artculo. Estdiate primero el cdigo, visualiza cmo
quedara la tabla y luego mrala en el enlace siguiente:
TABLAS
nowrap
<table width="100%" border="1" cellpadding="0" cellspacing="0"

bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
</tr>
<tr>
<td rowspan="2" valign="middle" align="left">Este texto est alineado
al centro
verticalmente y a la izquierda horizontalmente</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
TABLAS
Las celdas: <th>
nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligar al

navegador a no romper esa lnea, o sea, a no hacer ningn salto de lnea. Con este atributo en la
celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo hubiera, y respeta
el ancho de la frase, ya que no puede partirla.
Por tanto, si la frase es ms larga que el ancho definido de la tabla, sta se estirar todo lo
necesario para albergar la frase sin saltos de lnea. El siguiente cdigo nos mostrar como escribir
este atributo en la etiqueta de la celda
<table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000">

<tr>
<td nowrap>Aunque este texto sea más ancho que los 400 píxeles
de la tabla, ésta no puede dividir mediante saltos de línea
el contenido de la misma, por lo que se estira para albergar toda la frase.</td>
</tr>
</table>
TABLAS
Las celdas: <th> Y a continuacin podemos ver el efecto del atributo:
TABLAS
Etiqueta caption
Esta etiqueta sirve para poder ponerle un ttulo o encabezado a la tabla. Puedes
poder el encabezado arriba o abajo, dnde tu prefieras, mediante la etiqueta
"align": "align=top" para ponerlo arriba y "align=bottom" para ponerlo abajo. En
el siguiente ejemplo nosotros lo hemos puesto abajo
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"

bordercolor="#000000">
<caption align="bottom">Encabezado de la tabla.</caption>
<tr>
<td align="center">Tablita de ejmplo para la etiqueta "caption"</td>
</tr>
</table>
Etiqueta caption
TABLAS
EJEMPLO DE TABLA
A continuacin vemos el cdigo HTML de una tabla Se obtiene lo siguiente:
sencilla:
Ejemplo de tabla sencilla creada

con las etiquetas table, tr y td
EJEMPLO DE TABLA
A continuacin vemos el cdigo HTML de una tabla
sencilla:
Se obtiene lo siguiente:
Ejemplo de tabla sencilla creada

con las etiquetas table, tr y td
EJEMPLO DE TABLA
A continuacin
vemos el
cdigo HTML
de una tabla
sencilla:
LISTAS
LISTAS
Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto
que queramos aadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li>, sta se generar de forma automtica. Pero si
queremos definir nosotros mismo el smbolo del punto, podemos gracias al atributo type.
As podemos hacer que la lista est definida por puntos negros (li type="disc"), por puntos
con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta
apariencia depender del navegador. Hay algunos navegadores que dan otras
apariencias a estos mismos atributos.
LISTAS
Listas no ordenadas: <ul>
Vamos con un pequeo ejemplo en cdigo:

<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Cuyo resultado visual ser el que veremos a continuacin:

LISTAS
Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de
la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas
ordenadas los smbolos sern nmeros y stos se irn generando automticamente por
orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el nmero que
nosotros queramos. Lo conseguiremos gracias al atributo value. Los siguientes puntos que
escribamos se generarn automticamente por orden, partiendo de ese nmero.
LISTAS
Listas ordenadas: <ol>
Por ejemplo, si queremos que nuestra lista empiece por el nmero 20, slo deberemos escribir lo siguiente:
<ol>
<li value="20">Este ser el nmero 20. </li>
<li>Este ser el 21. </li>
<li> Este ser el 22. Y as sucesivamente. </li>
</ol>
Y el resultado ser el siguiente:

LISTAS
Listas de definiciones: <dl>, <dt> y <dd>
Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>,
<dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> viene de los trminos ingleses Definiton list y nos indica que dentro de
ella, entre ella y su cierre, va a ir una definicin.
La etiqueta <dt> viene de los trminos Definition term y dentro de ella ir el trmino
que vamos a definir. Para entendernos mejor, dentro de <dt> ira el ttulo de la definicin.
La etiqueta <dd> viene de los trminos Definition description y nos dice que dentro de
sta ir la definicin.
Si escribimos varios listados de definicin, stas se separarn automticamente entre ellas
para facilitar su diferenciacin.
LISTAS
Listas de definiciones: <dl>, <dt> y <dd>
Aqu podemos ver un ejemplo de cdigo de dos listado de definicin:

<dl>
<dt>Aqu va el trmino que definiremos</dt>
<dd>Y aqu dentro ir la definicin propiamente dicha.</dd>
</dl>
<dl>
<dt>Aqu va la segunda definicin</dt>
<dd>Y aqu dentro ir la segunda definicin, separada automticamente
de la anterior.</dd>
</dl>
Y el resultado ser el siguiente:

Diseño Web 3ra Semana

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Diseño Web 3ra Semana

Загружено:

Авторское право:

Доступные форматы

Instituto de Educacin Superior Tecnolgico Pblico - Yunguyo

Modulo Profesional: Gestin de Aplicaciones para Internet

FRAMES, TABLAS Y LISTAS

Obteniendo el siguiente resultado:

<frame name="sx" src="sx.htm">

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Obteniendo el siguiente resultado:

Para impedir que los marcos sean redimensionados por el visitante:

Para eliminar siempre las barras de desplazamiento (scrollbars):

Para mostrarlas siempre:

Para mostrarlas slo cuando son necesarias:

<frame name="alto" src="top.htm">

el nombre asignado es "alto"

la pgina se cargara dentro del mismo marco (es decir, "SX")

El cdigo exacto sera:

<A HREF="nuova.htm" TARGET="central">Haz clic</A>

<A HREF="nuova.htm" TARGET="_parent">Haz clic</A>

<table width="100%" border="1" cellpadding="0" cellspacing="0"

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligar al

<table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000">

<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"

Ejemplo de tabla sencilla creada

Ejemplo de tabla sencilla creada

Vamos con un pequeo ejemplo en cdigo:

Cuyo resultado visual ser el que veremos a continuacin:

Y el resultado ser el siguiente:

Aqu podemos ver un ejemplo de cdigo de dos listado de definicin:

Y el resultado ser el siguiente:

Вам также может понравиться