La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Laboratorio Estructuras de datos. HTML. IntroducciónMartha Reyes Villa Práctica no. 2 Introducción a HTML Enlaces Imágenes.

Presentaciones similares


Presentación del tema: "Laboratorio Estructuras de datos. HTML. IntroducciónMartha Reyes Villa Práctica no. 2 Introducción a HTML Enlaces Imágenes."— Transcripción de la presentación:

1 Laboratorio Estructuras de datos

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

3 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa Enlace. Referencia local Para especificar una referencia local se usa la directiva

6 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa Imágenes. Para insertar una imagen en un documento HTML se utiliza la directiva simple : Alineado de la imagen:

10 HTML. IntroducciónMartha Reyes Villa Tablas 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1 100,31,8313,1 22,7200,823,1 8100,31300,54100,1 2,681,88,1

11 HTML. IntroducciónMartha Reyes Villa Tablas. Bordes y títulos La presencia de bordes en la tabla se especifica con el atributo border en la directiva. 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.... Por último, cada cabecera de columna se especifica con la directiva...

12 HTML. IntroducciónMartha Reyes Villa Tablas. Bordes y títulos Ejemplo de tabla Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1

13 HTML. IntroducciónMartha Reyes Villa Tablas. Multicolumnas. Colspan Ejemplo de tabla con celdas multicolumna Dos columnas Primera columna Segunda columna Tercera columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1

14 HTML. IntroducciónMartha Reyes Villa Tablas. Multicolumnas. Rowspan Ejemplo de tabla con celdas multifila Dos columnas Tercera columna Primera columna Segunda columna 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1

15 HTML. IntroducciónMartha Reyes Villa Colores de la página Colores de fondo Se especifica con el atributo BGCOLOR de la directiva BODY. Ej. Fondo de color morado Texto de un documento: Se especifica con el atributo TEXT de la directiva BODY. Ej. 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 Este texto se verá rojo 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 por

16 HTML. IntroducciónMartha Reyes Villa 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 Estoy en rojo El modo de indicar el color RGB es el siguiente: D E G R A D A D O La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el azul (Red Green Blue, RGB).

17 HTML. IntroducciónMartha Reyes Villa 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:

18 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa 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 HTML. IntroducciónMartha Reyes Villa Frames o paneles. Documento de definición de marcos (html) Html variable Titulo.html Menu.html Introducción Listas Arboles Sorts

21 HTML. IntroducciónMartha Reyes Villa Frames o paneles Ejemplo. Introducción a HTML: Frames...

22 HTML. IntroducciónMartha Reyes Villa 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 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. 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.

23 HTML. IntroducciónMartha Reyes Villa 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 de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el. 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 HTML. IntroducciónMartha Reyes Villa Frame. Directiva Frameset Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos: 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 se pueden anidar. Esto se hace poniendo otro donde normalmente se colocan las etiquetas tal que así:

25 HTML. IntroducciónMartha Reyes Villa 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, 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 HTML. IntroducciónMartha Reyes Villa 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:, y. 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: 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 que contiene al marco donde se declara el enlace.


Descargar ppt "Laboratorio Estructuras de datos. HTML. IntroducciónMartha Reyes Villa Práctica no. 2 Introducción a HTML Enlaces Imágenes."

Presentaciones similares


Anuncios Google