CURSO DE H.T.M.L. Parte 3/4 Autor Autor Luis LuisMarco MarcoGiménez Giménez Agencia AgenciaTributaria Tributaria Dpto. Dpto.Informática InformáticaTributaria Tributariade deMadrid Madrid Colaboradores Colaboradores Javier JavierÁlvarez Álvarez Eloy EloyGarcía García Instituto Institutode deSalud SaludCarlos CarlosIII IIIde deMadrid Madrid Marcos (I) Definición p Los “marcos” dividen la pantalla en zonas que pueden actuar independientemente unas de otras. (mejor no usar bordes) p Las etiquetas que establecen marcos son <FRAMESET ...> ... </FRAMESET> p Los marcos pueden ser verticales y horizontales, así como estar anidados. p Esta etiqueta sustituye a <BODY> Marcos (II) Etiqueta <FRAMESET> p Un marco se define con la etiqueta <FRAMESET> con los atributos COLS (marcos verticales) o ROWS (marcos horizontales) p El formato general es: <FRAMESET COLS=“nn%, mm%,…”> ...</FRAMESET> o también <FRAMESET ROWS=“150, *,…””>...</FRAMESET> Marcos (III) Etiqueta <FRAMESET> p Los valores de COLS o ROWS pueden ser: n n n p Absolutos: n píxeles Relativos: n% Dinámicos: con * Definición: <FRAMESET COLS=“nn%, mm%> <FRAME SRC=“pagina1.html” NAME=nombre> <FRAME SRC=“pagina2.html” NAME=nombre> </FRAMESET> Marcos (IV) Ejemplo FRAMES (I) p p Definición de un FRAMESET: <HTML><HEAD> <TITLE> Frames varios </TITLE></HEAD> <FRAMESET COLS=“20%, 80%”> <FRAME SRC=“indice.html”> <FRAME SRC=“principal.html” NAME=principal> </FRAMESET> <NOFRAMES> ¡¡ Su navegador no soporta Frames. !! </NOFRAMES> </HTML> Marcos (V). Ejemplo FRAMES (II) p FRAME IZQUIERDA (indice.html): <HTML> <HEAD><TITLE> Índice </TITLE></HEAD> <BODY BGCOLOR=#e8efff> <P> <A HREF=“cap1.html” TARGET=principal>Capítulo 1</A> <P> <A HREF=“cap2.html” TARGET=principal>Capítulo 2</A> </BODY> </HTML> p FRAME DERECHA (principal.html): <HTML> <HEAD><TITLE> Página principal </TITLE></HEAD> <BODY BGCOLOR=aliceblue> PáginaPrincipal. Aquí se verá el contenido de los link izquierdos </BODY> </HTML> Marcos (VI) Atributos de <FRAMESET> p FRAMEBORDER=[nn | yes | no], especifica el tamaño del borde de separación entre los frames (nn en Internet Explorer) (IE) , o la existencia o inexistencia de borde (Netscape 3.0 y superior, valores yes o no.) (NC) p BORDER=nn, Tamaño del borde (Netscape 3.0 y superior) (NC) p FRAMESPACING=nn, especifica el hueco de separación entre frames. Marcos (VII) Atributos de <FRAMESET> p Para conseguir una definición de marcos sin bordes multinavegador se deben apilar los distintos atributos p Existen dos formas válidas: n n <FRAMESET frameborder=‘0’ framespacing=‘0’ border=‘0’> <FRAMESET frameborder=‘no’ framespacing=‘0’ border=‘0’> Marcos (VIII) Atributos de <FRAME> (I) p NAME=xxx, nombre del marco para su enlace. p SRC=xxx, URL de la página html a cargar. p FRAMEBORDER=[nn | yes | no], como en <frameset>. Marcos (IX) Atributos de <FRAME> (II) p MARGINWIDTH=nn, ancho de los márgenes dentro de un frame, píxeles p MARGINHEIGHT=nn, altura de los márgenes. p SCROLLING=[yes | no | auto], Barra de desplazamiento. p NORESIZE, no redimensión. Marcos (X) Apuntando a frames: TARGET p El atributo target pertenece a la etiqueta de enlace, <a href=“...” target=“xxx”>. p Apunta, como destino, a un frame, xxx, nombrado en el atributo name de la etiqueta frame. p Ejemplo: <A HREF=“capitulo1.html” target=“principal”>....</A> <A HREF=“capitulo2.html” target=“principal”>....</A> Marcos (XI) Nombres especiales de target p p p p target=“_blank”, hace que el documento objetivo se abra en una ventana nueva del navegador. target=“_self”, el documento apuntado se cargará en la misma ventana que se encuentre el vínculo. target=“_parent”, el documento se cargará en el frameset en el que se encuentra el vínculo, anulando sus marcos. target=“_top”, el documento se cargará en la ventana completa, anulando los marcos. Marcos (XII) Etiqueta <NOFRAMES> p Algunos navegadores, pocos en la actualidad, no soportan frames e ignoran las etiquetas FRAMESET y FRAME. p Para estos navegadores existen las etiquetas: <NOFRAMES> ... </NOFRAMES>, fuera de la etiqueta <FRAMESET>. Marcos (XIII) Etiqueta <IFRAME> (IE) p Introducida originalmente por IE 3.0 y aceptada oficialmente por el estándar HTML 4.0, aunque no implementada por Netscape. p Formato general: p Más flexibilidad: Pueden ponerse en cualquier sitio dentro de una página. <IFRAME width=nn heigth=nn src=“xxx” scrolling=[yes|no] frameborder=nn name=yyy> ... </IFRAME> Práctica 8 Hojas de Estilo en Cascada p CSS, es el término general para designar los métodos de aplicación de elementos de estilo visual a páginas HTML. p Estos estilos pueden ser: estilos de letra, fondo, texto, colores de enlace, control de los márgenes y colocación de objetos en una página. Tipos de hojas de estilo (I) p Las hojas de estilo pueden emplearse en un documento HTML básicamente de tres formas: n n n 1. INTERNA: Permite añadir un estilo a cualquier etiqueta HTML. Atributo style=xxx. 2. EMPOTRADA: Permite el control de una página HTML completa. Etiqueta <STYLE> dentro de la sección <head>. 3. VINCULADA: También conocida como hoja de estilo externa. Permite crear estilos maestros que se pueden aplicar a todo un sitio, mediante un fichero externo cuya extensión será .css. Tipos de hojas de estilo (II). Estilo interno p Se puede añadir estilo interno a una etiqueta HTML que sea adecuada: párrafos, cabeceras, líneas horizontales, enlaces y celdas de tabla. p Ejemplo: <P style=“font: 13pt verdana”> ... </P> Tipos de hojas de estilo (III) Estilo empotrado p Etiqueta <STYLE>...</STYLE> en la sección <head>. p Ejemplo: <STYLE> <!- BODY { background:#FFFFFF; color:#000000; } H1 { font:14pt verdana; color:#CCCCCC; } P { font:13pt times; } A { color:#FF0000; text-decoration:none; } -- > </STYLE> Tipos de hojas de estilo (IV) Estilo vinculado p También llamadas hojas de estilo externas. Son documentos separados con extensión .css. p El archivo que importe la hoja de estilo vinculada, deberá añadir en la sección <head> el enlace correspondiente: <LINK rel=stylesheet href=“xxxx.css” type=“text/css”> Tipos de hojas de estilo (V) Ventajas del estilo vinculado p Permite compartir un estilo de diseño para toda la web p Facilita los posibles cambios de mantenimiento. p Admite la selección del documento en función del medio: screen, tty, tv, print, braille, aural, ... p Permite asociar varias hojas. Tipos de hojas de estilo (VI) Combinando estilos p Los tres tipos de estilos pueden combinarse dentro de una página html (Cascada de estilos). p El orden de aplicación de estilos será: p p p 1. Estilos internos. 2. Estilos empotrados 3. Estilos vinculados. Propiedades CSS (I) Fuentes de hoja de estilo p p Se establece con font-family: Las CSS reconocen cinco familias de fuentes: p p p p p p 1. Serif: con trazos en los extremos, como Times, Garamond y Century Schoolbook. 2. Sans Serif: redondeados, como Helvetica, Arial y Verdana. 3. Script: manuscritas, como Park Avenue y Lucida Handwriting. 4. Monoespacio: de paso fijo, como Courier. 5. Fantasía: decorativas, como Whimsy y Party. Ejemplo: n <P style=“font-family: arial, helvetica, sans-serif”> ... </P> Propiedades CSS (II) Tamaño en tipos de fuentes p El tamaño de los tipos en hojas de estilo se establece con font-size: en puntos, píxeles, centímetros, pulgadas, milímetros y picas. p Ejemplo: <P style=“font-family: garamond; font-size: 24pt;”>...</P> Propiedades CSS (III) Color en las fuentes p La propiedad de estilo es color:. p El color se especifica de la misma manera que en la etiqueta <font>. p Ejemplo interno: p Ejemplo empotrado: <P style=“font-family: garamond, times; font-size:12pt; color:#CC9966;”> <STYLE> <!- P { font-family: garamond, times; font-size:12pt; color:#CC9966;} - - > </STYLE> Propiedades CSS (IV) Peso en las fuentes p La propiedad que permite la variación de los pesos es font-weight:. p Como peso se entiende lo ancho o estrecho que sean los tipos de fuentes. p La letra Arial, p.ej., puede adoptar los pesos black, bold, ligth ... p No todos los navegadores soportan todos los estilos. El más común es bold. Propiedades CSS (V) Estilo de fuente p La propiedad utilizada es font-style:. p Los estilos aplicables son: italic y oblique. p Ejemplo: <P style=“font-family: courier new, monoespace; font-size: 12pt; color: cfcfe0; font-style: italic;> p Para definir una fuente normal o reducida se utiliza la propiedad font-variant: p Valores posibles son: normal y small-caps Propiedades CSS (VI) Espacios entre líneas de texto p La separación entre líneas de texto por defecto coincide con el tamaño en puntos de la fuente. p La propiedad de estilo que la modifica es lineheight: nn;, donde nn es un valor numérico en la unidad de medida deseada (pt, px, in, ...). Propiedades CSS (VII) Decoración de texto y fondo p text-decoration:, permite modificar el aspecto visual de los enlaces (links). p Posibles valores son: p p p p p 1. 2. 3. 4. none, desactiva el subrayado. underline, los subraya (por defecto). italic. line-through, los tacha. background:, permite poner un color como fondo del texto al que afecta. Propiedades CSS (VIII) Otras propiedades de formato p text-align:; Alineación del texto. p text-transform:; Transformación al texto (uppercase | lowercase | capitalize). p text-ident:; Indentación del texto (sangría). p vertical-align:; Alineación vertical del texto. p letter-spacing:; Espaciamiento entre letras. Propiedades CSS (IX) Otras grupos p background:; Fondos. p Margin | Border | Padding:; Recuadros. p List:; Estilos de listas. Definición del estilo (I) Selector de clase (I) p Se utiliza el atributo class Con las clases se pueden especificar estilos distintos para una misma etiqueta HTML. p Ejemplo de definición: p <STYLE> <!- H1.izq { font:24pt Century Schoolbook; color:#FF0033; text-align:left } H1.der { font:18pt Arial; color:#FF6633; text-align:right } -- > </STYLE> p Ejemplo de uso: <H1 class=“izq”>Cabecera a la izquierda</H1> <H1 class=“der”>Cabecera a la derecha</H1> Definición del estilo(II) Selector de clase (II) p Se pueden crear clases personales no asociadas a etiqueta HTML alguna. p En estos casos se nombra la clase sin especificar etiqueta: .derecha { font-family: verdana, helvetica, sans-serif; font-size: 13pt;text-align: right; } p De esta forma se puede añadir el estilo a cualquier etiqueta HTML. Definición del estilo(III) Selector de clase (III) p Mediante las etiquetas <DIV class=...> y <SPAN class=...> <P class=… > se puede asignar estilo a secciones definidas del documento p Ejemplo: <HEAD><STYLE type=‘text/css’> DIV.mia{background-color:gray} </STYLE></HEAD> <BODY> <DIV class=mia> ....... </DIV> </BODY> Definición del estilo (IV). Agrupamiento de selectores y valores p Se pueden agrupar varias etiquetas HTML en un mismo grupo de definición de estilo: H1, H2, H3 { font-family: arial; font-size: 14pt; color: #000000; p } De la misma forma pueden agruparse propiedades y valores (sin comas): BODY { font:normal bold 13pt arial, sans-serif; } Definición del estilo (V). Selector ID p También se puede utilizar el identificador de un elemento para aplicarle estilo. p Utiliza para su definición el cualificador # : <STYLE type=‘text/css’> <!- #resalta { font:24pt Arial; color:#FF0033; font-weight:bold } -- > </STYLE> p Se asigna al identificador del elemento con ese id: <td id=‘resalta’>Trabajo</td><td>Programador</td> Capas (I) Colocación CSS p La colocación con hojas de estilo en cascada utiliza la propiedad position junto con un valor asociado: absolute o relative (al último elemento previo). p Junto a este valor asociado se fija la colocación en términos absolutos o relativos: top: nn px; left: nn px; width: mm px; height: rr px; Capas (II) Visibilidad CSS p Empleando efectos de visibilidad se puede ocultar o mostrar cualquier objeto HTML. p La propiedad que controla la visibilidad es visibility: , pudiendo tomar los valores hidden o visible. p La verdadera potencia de esta capacidad se consigue a través de JavaScript. Capas (III) Colocación con DIV p Utiliza la etiqueta <DIV id=“identificador” style=“position:,visibility: ...”> para definir secciones en el documento. p Mediante JavaScript podemos modificar las características previamente definidas para esa sección, proporcionándole dinamismo a la página. Capas (IV) Colocación en NC p Utiliza las etiquetas <LAYER> (NC) e <ILAYER> (NC) p <LAYER>, posiciona el contenido. n Atributos: top, left, width, height, visibility,... p <ILAYER>: sigue el flujo del documento. p No es fácil conseguir el control de las capas con Netscape 4. Capas (V) Ejemplos de colocación CSS p Ejemplo 1: P { position:absolute; top:200 px; width: 200 px; height: 200 px; } p Ejemplo 2: <DIV style=“position: absolute; top: 150 px; width: 200 px; heigth:300 px; backgroundcolor: #E9CCFF;”> ... </DIV> Capas (VI) Valores extremos p Si usamos un valor negativo para los valores de posición, el elemento se saldrá fuera de la página. p Un valor positivo muy grande en top o en left no provoca problemas (scroll de página o truncamiento y continuación). Capas (VII) Orden Z p Las CSS introducen un tercer eje, el Z. p La propiedad que da valor a este eje es zindex:nn (tercera dimensión), permitiendo que exista una relación dimensional entre los elementos. p A mayor número nn de z-index, menor profundidad en el eje z (más cerca). Capas (VIII) Ejemplo eje Z <html> <head><title> EJE Z </title> <style> <!- .arriba { position:absolute; top:156 px; left:320 px; z-index:2; background-color:#ff0000; } .abajo { position:absolute; top:175 px; left: 330 px; z-index:1; background-color:#00ff00; } - -> </style> </head> <body><font size=5> <div class=“arriba”>Posicionamiento principal</div> <div class=“abajo”>Posicionamiento abajo</div> </font> </body></html> Capas (IX) Ejemplo eje Z Capas (X) Problemas con las CSS p Las capas funcionan bien con IE, pero no así con Netscape 4. p Recomendación: Cuando se quiera mantener la compatibilidad visual en un rango amplio de navegadores: n n no utilizar capas, o generar versiones distintas en función del navegador detectado. Práctica 9