Embed Size (px)
Citation preview
IUTE - MÉRIDA
LENGUAJE DE PROGRAMACIÓN IV
Prof: Duberlis González
CODIGOS HTML
(Continuación)
Octubre 2007
CODIGOS HTMLPara disponer de una referencia en de una pagina y poder desplazarnos dentro de una pagina de gran tamaño, se utiliza anclas, en estos casos usamos la siguiente sintaxis.<a name="nombreancla"></a> Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo. Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente:<a href="#nombreancla">Introducción</a><br>
Vemos que en la propiedad href indicamos el nombre del ancla.
También es perfectamente válido la llamada a anclas desde otra página (no importa si se encuentra en el mismo sitio o en otro)
Debemos conocer el nombre de la página a llamar y el nombre del ancla, luego la sintaxis para la llamada al ancla es:
<a href="pagina2.html#introduccion">Introducción</a>
Tabla y combinación de celdas. En algunas situaciones se necesita que una celda ocupe el lugar dedos o más celdas en forma horizontal o vertical, para estos casosel elemento td o th dispone de dos propiedades llamadas rowspan ycolspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos lapropiedad rowspan con el valor 3:
<td colspan="3">Facturación de los últimos tres meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filasluego hacemos:
<td rowspan="3">Secciones</td>
Ejemplo de combinación de celdas en tablas<html><head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><thcolspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td></tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>
Comentarios dentro de una pagina
Otro uso muy habitual cuando estamos desarrollando la página si queremos deshabilitar una parte del código podemos encerrarla entre los caracteres de comentarios. La sintaxis para definir un comentario es:<!-- Aquí va el comentario -->
Es obligatorio luego del caracter de menor < disponer el signo de admiración y los dos guiones seguidos. Cerramos el comentario con dos guiones y el signo de mayor >
FONDOS
Fondos con un color uniforme
Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera:
<BODY BGCOLOR="#XXYYZZ">
Los colores primarios son:
#FF0000 - Rojo #00FF00 - Verde #0000FF - Azul
Otros colores son:
#FFFFFF - Blanco #000000 - Negro
#FFFF00 - Amarillo
Colores del texto y de los enlaces
Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podría ocurrir que su lectura contra un fondo oscuro fuese muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul. Para evitar esto, se pueden escoger los colores del texto y de los enlaces, añadiendo a la etiqueta (si se desea) los siguientes comandos:
TEXT - color del texto LINK - color de los enlaces VLINK - color de los enlaces visitados ALINK - color de los enlaces activos (el que adquieren en el momento de ser pulsados)
Los códigos de los colores son los mismos que los que se han visto anteriormente. La etiqueta, con todas sus posibilidades, sería:
< BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">
Cambio del color de una parte del texto
una etiqueta de color de la fuente con la que se puede cambiar sólo una parte del texto:
<FONT COLOR="#FF0000"> Este texto es de color rojo </FONT>
Fondos con una imagen
El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de una manera análoga al tapiz de Windows. La estructura de la etiqueta es:
<BODY BACKGROUND="imagen.gif">
Alineación y dimensionado de imágenes Alineación de las imágenes
Esto se consigue con las extensiones de la etiqueta ALIGN,
alineada a la derecha, se ha obtenido con la etiqueta:
<IMG SRC="doom.gif" ALIGN=RIGHT>
alineada a la izquierda, se ha obtenido con la etiqueta:
<IMG SRC="doom2.gif" ALIGN=LEFT>
Dimensionando la imagen
Estos comandos son WIDTH (ancho) y HEIGHT (alto).
Por ejemplo, para la imagen isla.gif
<IMG SRC="isla.gif" WIDTH=120 HEIGHT=94>
Frames
Se usa para dividir la pantalla en diferentes zonas o ventanas que pueden actuar independientemente de otras, como si se tratara de paginas diferentes
Definición de los frames
Es un documento parecido a los que conocíamos hasta ahora. La diferencia está en que en vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames).
En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a haber dos frames y que van a ir en columnas. Si hubiéramos querido que fueran en filas, habríamos puesto ROWS (filas, en inglés).
Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de cada frame. Esto se hace con las etiquetas:
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal">
Ejemplo:
<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE> </HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipagind.html">
<FRAME SRC="mipagpre.html" NAME="principal"> </FRAMESET>
</HTML>
