Laboratorio Estructuras de datos

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
• Introducción
• 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.
• Estructuras de datos lineales
• SE clasifican de acuerdo a
• Su composición
• Su forma de acceso
• En cuanto a su composición pueden ser
• Secuenciales
• Indexadas
• .
• .
• .
• Pilas o Stacks
• 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 ltA con el atributo NAME
• ltA NAMEIntroducciongtIntroducciónlt/Agt
• ltA NAMEPilasgtPilas o Stackslt/Agt
• Para establecer una liga a una referencia local
  se usa el atributo
• ltA HREFIntroducciongtIntroducciónlt/Agt
• ltA HREF"Pilas"gtPilas o Stackslt/Agt

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 ltIMGgtltIMG
  src"/icons/isla.jpg"gt
• Alineado de la imagen
• ltIMG src"/icons/isla.jpg" alignTOPgt
• ltIMG src"/icons/isla.jpg" alignMIDDLEgt
• ltIMG src"/icons/isla.jpg" alignBOTTOMgt
• ltIMG src"/icons/isla.jpg" alignRIGHTgt
• ltIMG src"/icons/isla.jpg" alignLEFTgt

10
Tablas

• ltTABLEgtltTRgtltTDgt100,3lt/TDgtltTDgt1,8lt/TDgtltTDgt313,1lt/T
  Dgtlt/TRgt ltTRgtltTDgt22,7lt/TDgtltTDgt200,8lt/TDgtltTDgt23,1lt/
  TDgtlt/TRgt ltTRgtltTDgt8100,3lt/TDgtltTDgt1300,5lt/TDgtltTDgt41
  00,1lt/TDgtlt/TRgt ltTRgtltTDgt2,6lt/TDgtltTDgt81,8lt/TDgtltTDgt8
  ,1lt/TDgt lt/TABLEgt
• 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 ltTABLEgt.
  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 borderespesor
• El título de la tabla es un literal delimitado
  por la directiva ltCAPTIONgt...lt/CAPTIONgt.
• Por último, cada cabecera de columna se
  especifica con la directiva ltTHgt...lt/THgt

12
Tablas. Bordes y títulos

• ltTABLE bordergtltCAPTIONgt Ejemplo de
  tablalt/CAPTIONgtltTRgtltTHgtPrimera
  columnalt/THgtltTHgtSegunda columnalt/THgtltTHgtTercera
  columnalt/THgtlt/TRgtltTRgtltTDgt100,3lt/TDgtltTDgt1,8lt/TDgtltT
  Dgt313,1lt/TDgtlt/TRgt ltTRgtltTDgt22,7lt/TDgtltTDgt200,8lt/TDgt
  ltTDgt23,1lt/TDgtlt/TRgt ltTRgtltTDgt8100,3lt/TDgtltTDgt1300,5lt
  /TDgtltTDgt4100,1lt/TDgtlt/TRgt ltTRgtltTDgt2,6lt/TDgtltTDgt81,8
  lt/TDgtltTDgt8,1lt/TDgt lt/TABLEgt

13
Tablas. Multicolumnas. Colspan

• ltTABLE bordergtltCAPTIONgt Ejemplo de tabla con
  celdas multicolumnalt/CAPTIONgtltTRgtltTH
  colspan2gtDos columnaslt/THgtlt/TRgtltTRgtltTHgtPrimera
  columnalt/THgtltTHgtSegunda columnalt/THgtltTHgtTercera
  columnalt/THgtlt/TRgtltTRgtltTDgt100,3lt/TDgtltTDgt1,8lt/TDgtltT
  Dgt313,1lt/TDgtlt/TRgt ltTRgtltTDgt22,7lt/TDgtltTDgt200,8lt/TDgt
  ltTDgt23,1lt/TDgtlt/TRgt ltTRgtltTDgt8100,3lt/TDgtltTDgt1300,5lt
  /TDgtltTDgt4100,1lt/TDgtlt/TRgt ltTRgtltTDgt2,6lt/TDgtltTDgt81,8
  lt/TDgtltTDgt8,1lt/TDgt lt/TABLEgt

14
Tablas. Multicolumnas. Rowspan

• ltTABLE bordergtltCAPTIONgt Ejemplo de tabla con
  celdas multifilalt/CAPTIONgtltTRgtltTH colspan2gtDos
  columnaslt/THgtltTH rowspan2gtTercera
  columnalt/THgtlt/TRgtltTRgtltTHgtPrimera
  columnalt/THgtltTHgtSegunda columnalt/THgtlt/TRgtltTRgtltTDgt
  100,3lt/TDgtltTDgt1,8lt/TDgtltTDgt313,1lt/TDgtlt/TRgt
  ltTRgtltTDgt22,7lt/TDgtltTDgt200,8lt/TDgtltTDgt23,1lt/TDgtlt/TRgt
  ltTRgtltTDgt8100,3lt/TDgtltTDgt1300,5lt/TDgtltTDgt4100,1lt/TD
  gtlt/TRgt ltTRgtltTDgt2,6lt/TDgtltTDgt81,8lt/TDgtltTDgt8,1lt/TDgt
  lt/TABLEgt

15
Colores de la página

• Colores de fondo
• Se especifica con el atributo BGCOLOR de la
  directiva BODY.Ej. ltBODY BGCOLOR9933CCgt Fondo
  de color morado
• Texto de un documento
• Se especifica con el atributo TEXT de la
  directiva BODY.Ej. ltBODY TEXT00FF00gt 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 ltFONT
  COLORFF0000gtEste texto se verá rojolt/FONTgt 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 ltBODYgt
  por
• ltBODY BACKGROUND/imagen/planeta.gifgt

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, AqualtFONT color"red"gtEstoy en rojolt/FONTgt
• El modo de indicar el color RGB es el siguiente
• ltFONT COLOR"FF0000"gtDlt/FONTgt
• ltFONT COLOR"EF0000"gtElt/FONTgt
• ltFONT COLOR"DF0000"gtGlt/FONTgt
• ltFONT COLOR"CF0000"gtRlt/FONTgt
• ltFONT COLOR"BF0000"gtAlt/FONTgt
• ltFONT COLOR"AF0000"gtDlt/FONTgt
• ltFONT COLOR"9F0000"gtAlt/FONTgt
• ltFONT COLOR"8F0000"gtDlt/FONTgt
• ltFONT COLOR"7F0000"gtOlt/FONTgt
• 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
• ltHTMLgtltHEADgt...lt/HEADgtltFRAMESETgt...ltFRAMESET
  gt...ltFRAMEgtlt/FRAMESETgt...ltFRAMEgtlt/FRAMESETgt
  ltNOFRAMEgt...lt/NOFRAMEgtlt/HTMLgt

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)
Html variable
Titulo.html
Menu.html Introducción Listas Arboles Sorts
21
Frames o paneles

• Ejemplo.
• ltHEADgtltTITLEgtIntroducción a HTML
  Frameslt/TITLEgtlt/HEADgtltFRAMESET
  ROWS"10,90"gtltFRAME SRC"panel_titulo.html"
  SCROLLING"no"gtltFRAMESET COLS",3"gtltFRAME
  SRC"panel_menu.html" MARGINHEIGHT50gtltFRAME
  SRC"panel_intro.html" NAME"texto"gtlt/FRAMESETgtlt
  /FRAMESETgtltNOFRAMEgt...lt/NOFRAMEgt

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 ltFRAMESETgt 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 ltFRAMEgt.
  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
  ltNOFRAMESgt.

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
  ltFRAMEgt de cada una de los marcos contiguos al
  borde a eliminar o incluyendo el parámetro
  FRAMEBORDER0 en el ltFRAMESETgt.
• 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 FRAMESPACING0
  BORDER0.
• 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
• ltFRAMESET COLS"10,,200,2"gt
• 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 ltFRAMESETgt se pueden anidar. Esto
  se hace poniendo otro ltFRAMESETgt donde
  normalmente se colocan las etiquetas ltFRAMEgt tal
  que así
• ltFRAMESET COLS"20,80"gt
• ltFRAME NAME"indice" SRC"indice.html"gt
• ltFRAMESET ROWS",80"gt ltFRAME NAME"principal
  SRC"introduccion.html"gt
• ltFRAME NAME"ejemplos" SRC"ejemplo.html"gt
• lt/FRAMESETgt lt/FRAMESETgt

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 SCROLLINGYES y SCROLLINGNO.
• NORESIZE. Si lo especificamos el usuario no podrá
  cambiar de tamaño el marco.
• FRAMEBORDER. Al igual que su homónimo en la
  etiqueta ltFRAMESETgt, 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 ltAgt,
  ltAREAgt y ltBASEgt. 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
• ltA HREF"pagina.html" TARGET"principal"gt
• 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 ltFRAMESETgt que
  contiene al marco donde se declara el enlace.