Diapositivas
Anuncio
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
