Laboratorio Estructuras de datos

Presentación del tema: "Laboratorio Estructuras de datos"— Transcripción de la presentación:

1 Laboratorio Estructuras de datos

2 Práctica no. 2 Introducción a HTML Enlaces Imágenes

3 Enlaces Se pueden hacer a una parte del documento (referencia local)
Se pueden hacer a otro documento Pueden ser desde un texto Pueden ser desde una imagen

4 Enlace. Referencia Local
Índice Introducción Estructuras de datos lineales Pilas o Stacks Las estructuras de datos se refieren a la forma en que se almacenan los datos en la memoria. Dependiendo del tipo de estructura es la posibilidad de acceder a la información y de grabarla. SE clasifican de acuerdo a: Su composición Su forma de acceso En cuanto a su composición pueden ser Secuenciales Indexadas . Es una estructura de datos lineal de composición secuencial, abierta A cada uno de estos elementos habrá que establecerles un enlace a una referencia local. Referencias locales

5 Enlace. Referencia local
Para especificar una referencia local se usa la directiva <A con el atributo NAME <A NAME=“Introduccion”>Introducción</A> <A NAME=“Pilas”>Pilas o Stacks</A> Para establecer una liga a una referencia local se usa el atributo # <A HREF=“#Introduccion”>Introducción</A> <A HREF="#Pilas">Pilas o Stacks</A>

6 Imágenes Imágenes inline
Algunos formatos gráficos tienen soporte en modo nativo, mientras que otros requieren de programas externos. Existen varios formatos que permiten, entre otras cosas, comprimir en distinto grado la información.

7 Imágenes. Formatos GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group bitmap) y sus variantes (JPG,BMP,XMP,XBM) TIFF (Tagged Image File Format) EPS ( Encapsulated PostScript) PCX (de Paintbrush). Solo el formato GIF es soportado directamente por todos los visualizadores, mientras que el JPEG lo es por bastantes.

8 Imágenes. Formatos El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que, por ello, no alcanza unas altas cotas de reducción. Este trabaja con un máximo de 256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering (aproximación del color por los vecinos más próximos). JPEG utiliza un algoritmo de compresión más complicado que el GIF: los archivos resultantes son más pequeños, pero necesitan más tiempo para su descompresión. A diferencia del anterior formato, JPEG trabaja con 16.7 millones de colores (24 bits). Como norma general, diremos que se utilizará el formato GIF para iconos e imágenes pequeñas y JPEG para imágenes grandes o de calidad.

9 Imágenes. Para insertar una imagen en un documento HTML se utiliza la directiva simple <IMG>: <IMG src="/icons/isla.jpg"> Alineado de la imagen: <IMG src="/icons/isla.jpg" align=TOP> <IMG src="/icons/isla.jpg" align=MIDDLE> <IMG src="/icons/isla.jpg" align=BOTTOM> <IMG src="/icons/isla.jpg" align=RIGHT> <IMG src="/icons/isla.jpg" align=LEFT>

10 Tablas <TABLE> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE> 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1

11 Tablas. Bordes y títulos
La presencia de bordes en la tabla se especifica con el atributo border en la directiva <TABLE>. Con ello, se logrará un borde de dimensión de la unidad; si desea hacer el borde más espeso debe dar un valor numérico al atributo: border=espesor El título de la tabla es un literal delimitado por la directiva <CAPTION>...</CAPTION>. Por último, cada cabecera de columna se especifica con la directiva <TH>...</TH>

12 Tablas. Bordes y títulos
<TABLE border> <CAPTION> Ejemplo de tabla</CAPTION> <TR><TH>Primera columna</TH><TH>Segunda columna</TH><TH>Tercera columna</TH></TR> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE>

13 Tablas. Multicolumnas. Colspan
<TABLE border> <CAPTION> Ejemplo de tabla con celdas multicolumna</CAPTION> <TR><TH colspan=2>Dos columnas</TH></TR> <TR><TH>Primera columna</TH><TH>Segunda columna</TH><TH>Tercera columna</TH></TR> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE>

14 Tablas. Multicolumnas. Rowspan
<TABLE border> <CAPTION> Ejemplo de tabla con celdas multifila</CAPTION> <TR><TH colspan=2>Dos columnas</TH> <TH rowspan=2>Tercera columna</TH></TR> <TR><TH>Primera columna</TH><TH>Segunda columna</TH></TR> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE>

15 Colores de la página Colores de fondo Texto de un documento:
Se especifica con el atributo BGCOLOR de la directiva BODY. Ej. <BODY BGCOLOR=#9933CC> Fondo de color morado Texto de un documento: Se especifica con el atributo TEXT de la directiva BODY. Ej. <BODY TEXT=#00FF00> Texto de color verde, por defecto Texto específico: Se especifica con el atributo COLOR de la directiva FONT. Es una extensión propuesta por Netscape a HTML 2.0. Ej. Con <FONT COLOR=#FF0000>Este texto se verá rojo</FONT> el usuario verá: Este texto se verá rojo. Imagen como fondo (marca de agua) Para esto, se utiliza el atributo BACKGROUND de la directiva BODY. Ejemplo: Si en esta misma página sustituye <BODY> por <BODY BACKGROUND=/imagen/planeta.gif>

16 Colores La manera de especificar el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando el porcentaje de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes: Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, NavyBlue, Teal, Aqua <FONT color="red">Estoy en rojo</FONT> El modo de indicar el color RGB es el siguiente: <FONT COLOR="#FF0000">D</FONT> <FONT COLOR="#EF0000">E</FONT> <FONT COLOR="#DF0000">G</FONT> <FONT COLOR="#CF0000">R</FONT> <FONT COLOR="#BF0000">A</FONT> <FONT COLOR="#AF0000">D</FONT> <FONT COLOR="#9F0000">A</FONT> <FONT COLOR="#8F0000">D</FONT> <FONT COLOR="#7F0000">O</FONT> La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el azul (Red Green Blue, RGB).

17 Frames o paneles Para poder visualizar varios documentos en el mismo browser y que un documento posterior pueda actualizar una de las zonas, se definen los paneles(frames). Con los paneles podemos dividir la pantalla en varias zonas donde cada una puede visualizar un documento diferente. Para ello, la estructura del documento HTML se verá afectada en la siguiente medida: <HTML> <HEAD> ... </HEAD> <FRAMESET> ... <FRAMESET> ... <FRAME> </FRAMESET> ... <FRAME> </FRAMESET> <NOFRAME> ... </NOFRAME> </HTML>

18 Frames o paneles Se especifican tres nuevas directivas, FRAMESET, FRAME y NOFRAME, y un atributo en la directiva A llamado TARGET. En un panel HTML se define el aspecto de las zonas de visualización y los documentos que se mostrarán en cada una de ellas.

19 Frames o paneles Cada frame tendrá sus bordes y sus propias barras de desplazamiento (opcional). Así cada página se dividirá en la práctica en varias páginas independientes. Para crearlos necesita un documento HTML específico, que se llama documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá.

20 Frames o paneles. Documento de definición de marcos (html)
Titulo.html Html variable Menu.html Introducción Listas Arboles Sorts

21 Frames o paneles Ejemplo.
<HEAD> <TITLE>Introducción a HTML: Frames</TITLE> </HEAD> <FRAMESET ROWS="10%,90%"> <FRAME SRC="panel_titulo.html" SCROLLING="no"> <FRAMESET COLS="*,3*"> <FRAME SRC="panel_menu.html" MARGINHEIGHT=50> <FRAME SRC="panel_intro.html" NAME="texto"> </FRAMESET> </FRAMESET> <NOFRAME> ... </NOFRAME>

22 Frames o paneles. BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno. Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniéndoles un nombre y especificando qué archivo HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>.

23 Frames. Directiva Frameset
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más. En general, los navegadores dibujan un borde de separación entre los marcos. Si desea eliminarlo puede hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>. Cuando elimina ese borde, podrá ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0. Los parámetros COLS y ROWS. Debe asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño: Con porcentajes: Al igual que con las tablas, podrá definir el tamaño de un marco como un porcentaje del espacio total disponible. Absolutos: Si pone un número, el marco correspondiente tendrá el tamaño especificado en pixels. Sobre el espacio sobrante: Si coloca un asterisco (*) estará indicando que desea todo el espacio sobrante para ese marco. Puede poner este símbolo en varios marcos, que se repartirán el espacio equitativamente. Si desea que uno tenga más, debe ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo.

24 Frame. Directiva Frameset
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos: <FRAMESET COLS="10%,*,200,2*"> Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco. Hay que tener cuidado cuando usa valores absolutos en la definición de marcos; debe asegurarse de tener al menos un marco con un tamaño relativo si quiere estar seguro del aspecto final de la página. Las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente se colocan las etiquetas <FRAME> tal que así: <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal“ SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html"> </FRAMESET> </FRAMESET>

25 Paneles. Directiva Frame
Define las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite: NAME. Asigna un nombre a un marco para que después se pueda referir a él. SRC. Indica la dirección del documento HTML que ocupará el marco. SCROLLING. Decide si se colocan o no barras de desplazamiento al marco para desplazarse por su contenido. Su valor es por omisión AUTO, que deja al navegador la decisión. Las otras opciones que se tienen son SCROLLING=YES y SCROLLING=NO. NORESIZE. Si lo especificamos el usuario no podrá cambiar de tamaño el marco. FRAMEBORDER. Al igual que su homónimo en la etiqueta <FRAMESET>, si se iguala a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. MARGINWIDTH. Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. MARGINHEIGHT. Igual al anterior pero con márgenes verticales.

26 Paneles. Acceso a otros marcos
Cuando da click sobre un enlace situado dentro de un marco, la nueva página a la que desea acceder, la verá encerrada en ese mismo marco. Pero si por ejemplo, tiene un marco que sirve de índice y otro donde se muestran los contenidos, sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible con el parámetro TARGET. Este se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. Las dos primeras sirven para indicar el marco en el que abrirá ese enlace en particular y el último modifica el marco en el que por omisión se muestran todos los enlaces. En los ejemplos anteriores, si en el marco llamado indice tiene un enlace: <A HREF="pagina.html" TARGET="principal"> También existen cuatro nombres reservados que se podrán utilizar en el parámetro TARGET: _top Elimina todos los marcos existentes y muestra la nueva página en la ventana original sin marcos. _blank Muestra la nueva página en una ventana nueva y sin nombre del navegador. _self Muestra la nueva página en el marco donde está declarado el enlace. _parent Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace.