Curso de Boostrap PDF

SISTEMAS INFORMATICOS
Manual de páginas web completo

El código fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc de
notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas > Accesorios > Bloc de
notas. Se abrirá una ventana como ésta:
A continuación debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que ir
nuestro código fuente son <html> como etiqueta de apertura y</html> como etiqueta de cierre.
Después, todo lo que será visible al visitar la página con el navegador, debe de estar entre las
etiquetas <body> cuerpo, en inglés, como etiqueta de apertura y </body> como etiqueta de cierre.
Nota: Las etiquetas también se pueden escribir con letras mayúsculas: <HTML> <BODY>...Nosotros
vamos a optar por las minúsculas por ser lo que se está imponiendo de acuerdo con las últimas
normas.
Vamos a escribir algo en nuestra página. Por ejemplo Bienvenid@. Lo escribiremos
entre <body> y </body>. Nuestro código quedará así:
Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y ¡muy
importante! con un nombre y una extensión especial. El nombre va a ser index(ya veremos porqué
este nombre más adelante) y su extensión .html
También se podría guardar con la extensión .htm (el es exactamente el mismo).
El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en
el Escritorio: Le damos a Archivo > Guardar
@Franz Flores Callapa Página 1

Nos aparecerá la ventana de selección de directorio:
Elegimos Escritorio y le llamamos index.html

Observa que en Tipo no hemos cambiado nada. No es necesario al haber incluído la
extensión .html en el nombre del archivo.
Mi primera página.
Poner un color de fondo.
Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la
etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se

denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal que
consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y
azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.
Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la
etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bgde background ).
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los s:
Cambiar el color del texto.

Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color. Vamos a
cambiar el color negro del texto, al color blanco.
Podríamos emplear el nombre en inglés del color, igual que hemos hecho con el fondo. La etiqueta
quedaría <font color="white">. Vamos ahora, a colocar el código hexadecimal de este color que es
el ffffff. La etiqueta quedaría así: <font color="#ffffff">. La etiqueta se debe cerrar sin su atributo.

Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario:
Listas no numeradas.
Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>.
Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre.
<html>
<head>
<title>
Listas no numeradas
</title>
</head>
<body>
Mis aficiones:
<ul>
<li> El cine.
<li> La montaña.
<li> La música.
</ul>
</body>
</html>
Listas numeradas.
Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objeto
que forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre.
<html>
<head>
<title>

Listas numeradas
</title>
</head>
<body>
Mis preferencias:
<ol>
<li> Viajar.
<li> Salir con mis amigos.
<li> Dormir.
</ol>
</body>
</html>
Listas anidadas.
Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener,
simplemente, cuidado en la colocación de las etiquetas de apertura y cierre.
<html>
<head>
<title>
Listas anidadas
</title>
</head>
<body>
<h3>Animales:<h3>
<ul>
<li> VERTEBRADOS.
<ul>
<li>Anfibios
<li>Peces
<li>Reptiles
<li>Aves
<li>Mamíferos
</ul>
<li> INVERTEBRADOS.
<ul>
<li>Insectos
<li>Arácnidos
<li>Crustáceos
<li>Miriápodos
</ul>
</ul>
</body>
</html>
Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el concepto que
se va a clasificar. (Recuerda que los encabezados van del <h1> el mayor al <h6> el menor).
Listas de definiciones.
Son apropiadas, como su nombre indica, para establecer listados de términos con sus definiciones.
Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los conceptos a definir van con
la etiqueta <dt> (definition term) y las definiciones con la etiqueta <dd> (definition definition).
<html>
<head>
<title> Listas de definiciones
</title>
</head>
<body>
<dl>
<dt>Concepto 1
<dd>Definición del Concepto
1
<dt>Concepto 2
<dd>Definición del concepto
2
</dl>
</body>
</html>
Sangrados.
Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre. Aumentan,
también, el interlineado, por eso se emplean para hacer una cita textual.
<html>
<head>
<title>
Sangrados
</title>
</head>
<body>
Este texto está justificado a la izquierda.
<blockquote>
Éste está sangrado respecto del anterior
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>
Se puede utilizar más de una etiqueta si deseamos un sangrado mayor:

<html>
<head>
<title>
Sangrados múltiples
</title>
</head>
<body>
Este texto está justificado a la izquierda.

<blockquote>
<blockquote>
<blockquote>
Éste está más sangrado
</blockquote>
</blockquote>
</blockquote>
Éste vuelve a estar justificado a la izquierda.
</body>
</html>
Tablas.
Empezamos con un tema algo complejo.
Una tabla se define entre las etiquetas <table> y </table>
A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y </tr> (table
row). Un par de etiquetas para cada una de las filas.
Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (table
data).
Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje serán tres
filas, cada una de ellas con tres celdas):
<html>
<head>
<title>
Tablas 1
</title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

¿Qué ha pasado? No se ve nada. Esto ocurre porque:

1. Dentro de las celdas no hemos puesto nada.
2. La tabla no tiene bordes.
Tablas con borde y con casillas vacías.
Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una tabla con borde.
Esto se hace dentro de la etiqueta <table> con el atributo border. Así: <table border>.
Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto y
visible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para añadir
un espacio a la separación entre palabras:
<html>
<head>
<title>
Tablas 2
</title>
</head>
<body>
<table border>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Otros atributos de la tabla.

Podemos hacer que nuestra tabla esté centrada en la página con el atributo align="center".
O "left" o "right"
Que ocupe una determinada proporción del espacio en horizontal con el atributo width="50%".
O "30%" o "70%" o...
Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O ...
Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro (ver colores
html).
<html>
<head>

<title>
Tablas 3
</title>
</head>
<body>
<table border="3" align="center" width="50%"
bgcolor="#ffcccc">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Atributos de las filas y las celdas.

De manera similar a los atributos de la tabla, podemos definir todos esos parámetros a las filas o a
las celdas.
Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si a
este respecto no hago nada más en las otras celdas, lo que haga afectará a todas las columnas.
Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda prevalecerá sobre
el definido en el conjunto de la tabla
<html>
<head>
<title>
Tablas 4
</title>
</head>
<body>
<table border="3" align="center" width="50%"
bgcolor="#ffcccc">
<tr>
<td width="10%"> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#ff00cc"> </td>
<td bgcolor="#ffcc00"> </td>
<td bgcolor="#00cccc"> </td>
</tr>
</table>
</body>
</html>
Tablas con celdas de distinto tamaño.

Es bastante habitual tener que diseñar este tipo de tablas: Una celda puede ocupar dos columnas,
tres,... o dos filas, tres,...
Supongamos que tenemos que diseñar una tabla como ésta:
Para no liarse, lo primero que hay que tener claro es el número máximo de columnas y filas que
tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer 4
celdas en cada una de las 3 filas. Luego, agruparemos celdas con las etiquetas correspondientes.
Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que debemos
emplear es un atributo para la primera celda de la primera fila (debe"extenderse" sobre las cuatro
columnas) <td colspan="4">. Lógicamente la primera fila ya se ha acabado.
Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos <td
rowspan="2">. Después de esta celda siguen las otras tres que son normales.
Por último definimos la tercera fila. Como la primera celda ya ha sido definida en la fila anterior,
sólo nos queda la segunda celda, que es normal, y la tercera que se extiende sobre dos
columnas <td colspan="2">
Pondremos un para meter algo aunque no se vea y, para asegurarnos de la simetría de la
tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una
proporción del espacio total de la tabla en cada columna (25%) y lo haremos en las celdas que nos
parezca (en las "normales" de ancho).
El código podría quedar así:
<html>
<head>
<title>
Tablas 5
</title>

</head>
<body>
<table border align="center" width="30%"
bgcolor="#ffcccc">
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td rowspan="2" width="25%"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Título de la tabla.
Disponemos de una etiqueta para poner el título de la tabal. Es <caption> con su correspondiente
de cierre. Se coloca después de la etiqueta de definición de la tabla y añade un texto por encima
de la tabla y centrado con ésta.
<html>
<head>
<title>
Tablas 6
</title>
</head>
<body>
bgcolor="#ffcccc">
<caption>Éste es el título de la tabla</caption>
<tr>
</tr>
<tr>
<td rowspan="2" width="25%"> </td>
</tr>
<tr>
<td> </td>

</tr>
</table>
</body>
</html>
Celdas de cabecera.
Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto de las celdas
situadas debajo de ellas. Son las etiquetas <TH> (table header). El texto situado en ellas queda
centrado y en negrita. Lo único que hay que hacer es sustituir la etiqueta normal de celda por esta
otra.
<html>
<head>
<title>
Tablas 7
</title>
</head>
<body>
bgcolor="#ffcccc">
<caption>Ejemplo de celdas de cabecera</caption>
<tr>
<th>Nombre</th>
<th>Apellido 1</th>
<th>Apellido 2</th>
</tr>
<tr>
<td width="25%">José</td>
<td width="25%">Pérez</td>
<td width="25%">Pérez</td>
</tr>
<tr>
<td>Luis</td>
<td>Román</td>
<td>Sánchez</td>
</tr>
</table>
</body>
</html>

Alineaciones dentro de las celdas.

Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:
xxx xxx xxx
xxx
xxx
xxx
Primera fila (alineación horizontal):
 En la primera celda el texto está alineado a la izquierda. No hay que hacer nada, es la
alineación que se establece por defecto. (Podría escribirse, de todas formas: <td
align="left">).
 En la segunda celda el texto está alineado en el centro: <td align="center">.
 En la tercera celda el texto está alineado a la derecha: <td align="right">.
Segunda fila (alineación vertical):
 En la primera celda el texto está alineado en la parte superior: <td valign="top">.
 En la segunda celda el texto está alineado en la parte central. No hay que hacer nada, es la
alineación vertical establecida por defecto. (Podría escribirse, de todas formas: <td
valign="middle">) .
 En la tercera celda el texto está alineado en la parte inferior: <td valign="bottom">.
Para observar mejor los s se ha forzado la altura de las celdas a 50 píxeles. Basta escribirlo en la
primera celda de cada fila: <td height="50"> pero podría escribirse en todas ellas.
<html>
<head>
<title>
Tablas 8
</title>
</head>
<body>
<table border width="60%" align="center"
bgcolor="#ffffcc">
<caption>Alineaciones de celdas</caption>
<tr>
<td width="33%" height="50">xxx</td>
<td width="34%" align="center">xxx</td>
<td width="33%" align="right">xxx</td>
</tr>
<tr>
<td height="50" valign="top">xxx</td>
<td align="center">xxx</td>
<td align="right" valign="bottom">xxx</td>
</tr>
</table>
</body>
</html>

Separaciones entre celdas y entre borde y contenidos.

La separación por defecto entre las celdas es de 2 píxeles. Se puede modificar esta distancia con el
atributo de table cellspacing. Tabla con cellspacing de 15 píxeles:
xxxx xxxx xxxx
xxxx
xxxx
xxxx
La separación entre el borde la tabla y el contenido de las celdas es de 1 píxel. Se puede modificar
con el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 píxeles:
xxxx xxxx xxxx
xxxx
xxxx
xxxx
En la segunda tabla se ha aumentado la altura de las celdas a 70 píxeles para observar la alineación
vertical.
Veamos los códigos:
<html>
<head>
<title>
Tablas 9
</title>
</head>
<body>
bgcolor="#ffffcc" cellspacing="15">
<caption>
Tabla con espacio entre celdas de 15 píxeles
</caption>
<tr>
<td width="33%" height="50">xxxx</td>
<td width="34%" align="center">xxxx</td>
<td width="33%" align="right">xxxx</td>
</tr>

<tr>
<td height="50" valign="top">xxxx</td>
<td align="center">xxxx</td>
<td align="right" valign="bottom">xxxx</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>
Tablas 10
</title>
</head>
<body>
bgcolor="#ffffcc" cellpadding="15">
<caption>
Tabla con "cellpadding" de 15 píxeles
</caption>
<tr>
<td width="33%" height="70">xxxx</td>
<td width="34%" align="center">xxxx</td>
<td width="33%" align="right">xxxx</td>
</tr>
<tr>
<td height="70" valign="top">xxxx</td>
<td align="center">xxxx</td>
<td align="right" valign="bottom">xxxx</td>
</tr>
</table>
</body>
</html>

Imágenes.
La etiqueta para introducir una imagen en nuestra página es <img
src="nombre.gif"> (src de source en inglés fuente u origen de la imagen) y siendo nombre el
nombre que tiene la imagen y .gif su formato.
La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que se
encuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las
imágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentra
nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta
denominada imag, pues bien, la etiqueta sería <img src="imag/nombre.gif">
Veamos un ejemplo:
En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imágenes
más habituales en internet). La imagen se denomina riglos2.jpg
<html>
<head>
<title>
Imágenes 1
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg">
</center>
</body>
</html
Atributos de la imagen width y height.

Es muy importante introducir las medidas de la imagen (las podemos averiguar desde un
programa gráfico como PhotoShop) dentro de la etiqueta <img>. De esta manera cuando el
navegador va recorriendo la página reserva el espacio justo para la imagen y, el resto de la página
se va cargando sin problemas mientra se acaba de cargar la imagen. En nuestro caso la imagen
tiene 150 de ancho y 230 de alto. Escribiríamos:
<html>

<head>
<title>
Imágenes 2
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg"
width="150" height="230">
</center>
</body>
</html>
Texto alternativo.
Es otro atributo que se coloca por varios motivos, el principal es que aquellas personas que visiten
nuestra página sin descargarse las imágenes (habitual en los que tienen una mala conexión y no
desean eternas descargas) tengan, al menos, una orientación del contenido de la misma. Debe ser
una descripción corta del tema de la imagen. Se introduce con la cadena alt="descripción de la
imagen" y, al ser un atributo, se coloca como los dos anteriores, dentro de la etiqueta <img>.
<html>
<head>
<title>
Imágenes 3
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg"
width="150" height="230"
alt="Mallos de Riglos (Huesca)">
</center>
</body>
</html>
Cuando el visitante (si navega con el Internet Explorer) se acerque con el cursor a la imagen,
aparecerá un rectángulo con el texto alternativo:
Nota: El hecho de que aparezca el texto alternativo al acercarnos con el cursor a la imagen, es una
desviación del Explorer. Existe otro atributo para que esto se produzca independientemente del
navegador que empleemos. Es el atributo title.

Y cuando navegue sin bajarse las imágenes se verá así:
Colocar una imagen como fondo de la página.

Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo background con el
nombre y/o dirección de la imagen que queremos colocar. Supongamos que quiero colocar una
imagen denominada claro1.gif que está dentro de la carpeta imag. El código será el siguiente:
<html>
<head>
<title>
Imagen como fondo de página
</title>
</head>
<body background="imag/claro1.gif">
<center>
<h2>
Esta página tiene una imagen de
fondo.
</h2>
</center>
</body>
</html>
Vínculos.
Es una de las herramientas más interesantes de los documentos html. La sintaxis para establecer
un enlace es: <a href="destino">texto</a>
Donde destino es el documento con el que se enlaza y texto es la palabra o palabras que, al pulsar,
nos llevan a ese destino (también puede ser una imagen).
15.1.- Vínculos a otro documento del mismo sitio.
Nuestro sitio estará formado por varios archivos generadores de varios documentos. Los
documentos tendrán la extensión .html (o .htm). Para establecer el vínculo escribiremos

sencillamente el nombre del documento en el destino y, entre las etiquetas de apertura y cierre la
palabra o palabras que activarán el vínculo.
Como ejemplo vamos a establecer un enlace a la primera página de este sitio (primer documento)
cuyo archivo tiene como nombre index.htm
<html>
<head>
<title>
Vínculos 1
</title>
</head>
<body>
<center>
<a href="index.htm">
Ir al inicio de este curso
</a>
</center>
</body>
</html>
Vínculos a otro documento externo al sitio.

En este caso en destino deberemos escribir toda la dirección URL del sitio.
Vamos a establecer un enlace a la página del buscador Google cuya dirección URL
es http://www.google.es
<html>
<head>
<title>
Vínculos 2
</title>
</head>
<body>
<center>
<a href="http://www.google.es">
Ir a Google
</a>
</center>
</body>
</html>
Muchas veces puede resultar interesante escribir la propia dirección URL como activador del
vínculo:
<html>
<head>
<title>
Vínculos 3
</title>
</head>

<body>
<center>
Ir a Google:<br>
<a
href="http://www.google.es">
http://www.google.es</a>
</center>
</body>
</html>
Vínculos a otra parte del mismo documento.

A veces cuando el documento es muy extenso conviene establecer formas rápidas para subir o
bajar a una parte determinada del documento.
Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del documento a
los que queremos acceder de forma rápida.
La sintaxis del ancla es <a name="ancla1"></a> poniéndolo en el punto de destino. No hace fata
que haya nada entre la etiqueta de apertura y cierre.
En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>.
Como ejemplo vamos a movernos por las partes anteriores a esta línea del punto en el que
estamos.
En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los diferentes
apartados (cambiando el punto por un guión bajo) a los que vamos a desplazarnos:
código
Ir al apartado 15 <a href="#15>Ir al apartado 15</a>
Ir al apartado 15.1 <a href="#15_1>Ir al apartado 15.1</a>
Vínculos a una parte concreta de otro documento de nuestro sitio.
Se pueden combinar este último tipo de enlaces con el vínculo a otro documento de nuestro sitio.
La sintaxis sería <a href="paginax.htm#ancla"> Ir al apartado tal de tal página </a>
<html>
<head>
<title>
Vínculos 4
</title>
</head>
<body>
<center>
<a href="diez.htm#13_2">
Ir al apartado 13.2 de este
curso
</a>
</center>
</body>

</html>
Vínculos de correo electrónico.

Vamos a ver los enlaces a una dirección de correo electrónico. Cuando el navegante pinche sobre
el activador del vínculo, se abrirá el programa de correo con la dirección del destinatario ya escrita
en el mensaje.
La sintaxis es <a href="mailto:login@servidor.es"> Mándame un mensaje </a>
<html>
<head>
<title>
Vínculos 5
</title>
</head>
<body>
<center>
<a href="mailto:apuente@roble.pntic.mec.es">
Dime lo que piensas de este curso
</a>
</center>
</body>
</html>
Imagen como vínculo a otro documento.

En lugar de texto podemos utilizar una imagen como vínculo.
En primer lugar deberemos escribir la etiqueta de apertura del vínculo y luego la etiqueta de
inclusión de la imagen cerrando, posteriormente, la etiqueta del vínculo.
Para este tipo de vínculos se suelen emplear pequeñas imágenes, aunque, a veces, también se
utilizan imágenes de gran formato (sobre todo en los portales de los sitios).
<html>
<head>
<title>
Vínculos 6
</title>
</head>
<body>
<center>
Visita la página de TERRA:<P>
<a href="http://www.terra.es">
<img src="imag/logo_terra.gif">
</a>
</center>
</body>
</html>

Para eliminar este borde tan antiestético que se coloca alrededor de la imagen tenemos el
atributo border="0"
<html>
<head>
<title>
Vínculos 7
</title>
</head>
<body>
<center>
Visita la página de
TERRA:<p>
<a
href="http://www.terra.es">
<img
src="imag/logo_terra.gif"
border="0">
</a>
</center>
</body>
</html>
Estructura de marcos con tres frames.

Supongamos que queremos construir una página con tres marcos diferentes:
 Un marco horizontal superior que ocupe todo el espacio a lo ancho, donde puede ir el
título del sitio, un logotipo,...
 El resto del espacio divido en dos espacios verticales:
o El de la izquierda donde habrá un menú de enlaces.
o El más grande de la derecha donde se cargarán los enlaces pulsados en la
izquierda.
La sintaxis va a consistir en dos frameset anidados, el primero que definirá las dos filas (la superior
y el resto del espacio). El segundo que dividirá ese resto del espacio entre las dos columnas.
Código del primer frameset:
<html>
<head>
<title>Las dos filas</title>
</head>
<frameset rows="15%,*">
<frame src="titulo.html">
<frame src="resto_espacio">
</frameset>
</html>
Como el segundo frame en realidad son dos, sustituimos su definición por el código del
segundo frameset:
<frameset cols="20%,*">

<frame src="indice.html">
<frame src="saludo.html" name="principal">
</frameset>
El código quedaría así:
<html>
<head>
<title>Fila superior y dos columnas</title>
</head>
</frameset>
</frameset>
</html>
Veamos los códigos de todos los archivos:
Primero el documento titulo que se cargará en el marco superior:
<html>
<head>
<title>Marco superior</title>
</head>
<body bgcolor="#0066cc">
<font color="#ffffff">
<center>
<h1>mi sitio web</h1>
</center>
</font>
</body>
</html>
Lo guardamos como titulo.html

Veamos el documento indice que se cargará en la columna izquierda:
<html>
<head>
<title>Marco de la izquierda con enlace</title>
</head>
<body bgcolor="#dfdfdf">
<a href="enlace.html" target="principal">
enlace
</body>
</html>
Lo guardamos como indice.html

El documento saludo que se carga inicialmente en el marco principal:
<html>

<head>
<title>Marco de la derecha</title>
</head>
<body bgcolor="#ff9999">
<center>
<h1>
Bienvenido a mi página web
</h1>
</center>
</body>
</html>
Lo guardamos como saludo.html

Falta el documento enlace que se cargará en el marco principal al ser pulsado el enlace:
<html>
<head>
<title>Documento a cargar en principal</title>
</head>
<body bgcolor="#ffcccc">
<center>
<h2>
Has pulsado el enlace correctamente
</h2>
</center>
</body>
</html>
Lo guardamos como enlace.html

El documento de la estructura de marcos es el inicial. Lo guardamos como index.html:
<html>
<head>
<title>Fila superior y dos columnas</title>
</head>
</frameset>
</frameset>
</html>

Ejercicio uso de frame y sus atributos
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<frameset cols="20%, *" frameborder="0" framespacing="0" border="0">
<frame name="izquierda" src="completo.html" marginwidth="0" marginheight="0"
scrolling="auto" frameborder="no" />
<frameset rows="80%,*" frameborder="0" framespacing="0" border="0">
<frame name="principal" src="file:///D|/html/lateral.html" marginwidth="0" marginheight="0"
scrolling="auto" frameborder="no" />
<frame name="inferior" src="ejemplo.html" marginwidth="0" marginheight="0" scrolling="auto"
frameborder="no" />
</frameset>
</frameset>
<noframes>
<center>
su navegador no puede desplegar el frame
</center>
</noframes>
</html>
Iframes marcos flotantes
<iframe frameborder="0" hspace="2" vspace="2" src="index1.html" width="810"

height="100%"name="superior">
<frame width="810" src="index1.html">
</iframe></td>

Formularios
Los formularios nos permiten dentro de una página Web solicitar información al visitante y
procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales
quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el
contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda
procesar las variables. Para poder realizar este último paso de procesar las variables
necesitaremos realizar un programa externo en algun lenguaje de programación como PERL, C++ o
Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La
creación de este tipo de programas sería tema de otro manual diferente, por lo que aquí veremos
como se pueden enviar las variables a nuestra dirección de correo electrónico.
La declaración del formulario se pone entre las directivas <FORM></FORM>. En el interior de la
declaración se indican los elementos (variables) de entrada. La directiva <FORM> tiene los
parámetros action y method.
action = "programa"
Indica el programa que va a "tratar" a las variables que se envien con el formulario. En
nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa"
será "mailto: direccion_de_correo".
method = POST / GET
Indica el método según el que se transferiran las variables. POST produce la modificación
del documento de destino (como en el caso de enviar por correo las variables). GET no
produce cambios en el documento destino (como en el caso de una consulta a una base de
datos, p.ej. una página de búsqueda en Internet).
Campos de Entrada
Para la introducción de las variables se utiliza la directiva <INPUT>. Esta directiva tiene el
parámetro type que indica el tipo de variable a introducir y name que indica el nombre que se le
dará al campo. Cada tipo de variable tiene sus propios parámetros.
type= text name = campo
Indica que el campo a introducir será un texto. Sus parámetros son :
maxlenght = numero
Número máximo de caracteres a introducir en el campo.
size = numero
Tamaño en caracteres que se mostrará en pantalla.
value = "texto"
Valor inicial del campo. Normalmente sera " ", o sea, vacio.
type = password name = campo
Indica que el campo será una palabra de paso. Mostrará asteriscos (*) en lugar de las
letras escritas. Sus parámetros opcionales son los mismos que para text.
type = checkbox name = campo
El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Los valores de
las casillas serán indicados por :
value = "valor"
checked
La casilla aparecerá marcada por defecto.
type = radio name = campo
El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas. Los
valores de las casillas seran indicados por :
value = "valor"

type = image name = campo

El campo contendrá el valor de las coordenadas del punto de la imagen pinchado. Debe
indicarse la imagen con el parámetro :
src = "fichero de imagen".
type = hidden name = campo
El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre
con el valor indicado por el parámetro :
value = "valor"
type = submit
Representa un botón. Al pulsar este botón la información de todos los campos se envía al
programa indicado en <FORM>. Tiene el parámetro value = "texto" que indica el texto que
aparecerá en el boton.
type = reset
Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El
parámetro value = "texto" indica el texto que aparecerá en el botón.
Campos de Seleccion
Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias.
Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parámetros son :
name = campo
Nombre del campo
size = num
Número de opciones visibles. Si se indica 1 se presenta como un menú desplegable, se se
indica mas de uno se presenta como una lista con barra de desplazamiento.
multiple
Permite selecionar más de un valor para el campo.
Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede
incluir el parámetro selected para indicar cual es la opción por defecto. En caso de que no se
especifique, se tomará por defecto la primera opción de la lista.
Áreas de texto.
Representa un campo de texto de múltiples lineas. Normalmente se utiliza para que se incluyan en
el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parámetros :
name = campo
Nombre del campo.
cols = num.
Número de columnas de texto visibles.
rows = num.
Número de filas de texto visibles.
wrap = VIRTUAL / PHYSICAL
Justifica el texto automáticamente en el interior de la caja. La opción PHYSICAL envia las
lineas de texto separadas en líneas físicas. La opción VIRTUAL envía todo el texto seguido.
Veamos a continuación un ejemplo de formulario utilizando todas las formas de introduccion de
datos.
<FORM action = "mailto: nombre@ext.es" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:

<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value ="Mapthis" > Programa Mapthis
<INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Ole
<OPTION>Por el buscador Yahoo
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>

Ahora veamos el efecto producido en la página Web :
Tu Nombre: Tu Clave:
Archivos a Enviar:
Manual de Html Programa Mapthis Archivo de Ayuda
Tu Edad :
Menos de 20 años
Entre 20 y 40 años
Mas de 40 años
Como encontraste mi página :
Me la comentaron
Tus Comentarios:
Enviar Borrar
Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se generará
un mensaje de correo a la dirección de correo nombre@ext.es. Si pulsas el boton Borrar se
borraran los datos que hayas introducido en el Formulario.
El texto que se recibiría por correo electrónico sería parecido a este :
MUSUCA
1. <EMBED SRC="starwars.mid">
Si ponemos este código tal cual nos saldrá un control musical con sus botones de play, stop,
control de volumen,... y claro, como nosotros queremos poner música de fondo, deberemos de

ocultar dicho control. Para ello contamos con el atributo hidden, al cual deberemos de dar un
valor de true.
1. <EMBED SRC="starwars.mid" HIDDEN="true">
Y ahora, hecho esto, tenemos un ligero problema. Y es que cuando teníamos el control musical,
disponíamos del botón play para forzar el inicio de la canción y ahora, al haber ocultado el control,
no tenemos forma de hacerlo y es por ello que la canción no comenzará. Por lo tanto, deberemos
de utilizar el atributo autostart con un valor true para que se inicie la canción.
1. <EMBED SRC="starwars.mid" AUTOSTART="true">
Para permitir la apertura automática de un archivo audio también con Netscape, hay que usar la
marca <EMBED>:
<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0"

HEIGHT="0">
Los TARGET se usan sobre todo en los marcos pero pueden usarse también en otros casos. Así, por
ejemplo, si queremos que una página asociada a un enlace se cargue en una ventana distinta del
navegador, tendremos que insertar el TARGET="_new".
Pongamos que el midi para escuchar se llame "imagine.mid"; el código sería:
<A HREF="imagine.mid" TARGET="_new">Escucha el midi imagine.mid</A>
Haciendo clic se abrirá una ventana por defecto, la cual se colocará al lado de la principal (aquélla
desde la que se ha LANZADO el enlace). Aquí tienes el ejemplo práctico:
Música de fondo para paginas web

<HTML>
<HEAD>
<TITLE> Presentacion </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#0000FF">
<CENTER>
<FONT SIZE=+3><STRONG>
<P>ESTA ES LA VERSION
<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>
<BR>DE MI PAGINA
</STRONG>
<BR><FONT COLOR="#FF0000">¡Escucha la música de fondo!</FONT>
<BGSOUND src="../17 Wisin ft Prince Royce -Tu Libertad.mp3">
<EMBED src="../17 Wisin ft Prince Royce -Tu Libertad.mp3" WIDTH=2 HEIGHT=0
AUTOSTART="true">
</FONT>
</CENTER>

</BODY>
</HTML>
Css Externo
<link rel=stylesheet href="style.css" type="text/css">
<head>
…
<link rel="stylesheet" type="text/css" href="rutaDelArchivo.css">
</head>
CSS INTERNO
Vamos a ver ahora cómo podemos definir esos estilos en la cabecera del documento HTML usando
la siguiente sintaxis:
<head>
…
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad1ParaEseTipoDeElementos:valor;
…
propiedadnParaEseTipoDeElementos:valor;
}
</style>
</head>
Las diferentes propiedades y valores se pueden poner en una misma línea o en distintas líneas
según se prefiera (siempre separados mediante punto y coma).
Dentro de las etiquetas <head> … </head> incluiremos una etiqueta de apertura de declaración de
estilos <style type=”text/css”>, a continuación colocaremos la definición de tantos estilos como
deseemos y cerraremos la declaración con </style>. En HTML 5 no es necesario especificar type
=”text/css” pero de momento seguimos recomendando que se use esta sintaxis.
En nuestro código de ejemplo el cambio de los elementos del menú para que tengan el texto color
verde y el icono o símbolo de viñeta de color rojo se haría de esta forma:
<!DOCTYPE html>



<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
ul {color:red;}
a {color:green; text-decoration: none;}
</style>
</head>

<body>

<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<br />

<div>

<div>
<div>Menú</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</div>


</html>

CSS EXTERNO
Aunque el CSS interno nos permite unificar en una declaración todos los estilos para un archivo
html, seguimos teniendo el problema de tener que repetir la definición de estilos en la cabecera
de cada uno de los archivos html de nuestro desarrollo web. Si el desarrollo tiene pocos archivos
quizás sea menos problemático, pero cuando el desarrollo tiene cientos o miles de archivos sí se
convierte en un verdadero problema, ya que cada vez que introdujéramos cambios habría que
hacerlo en los cientos o miles de archivos de que constara el desarrollo.
Para solventar esta solución se ideó la declaración externa de CSS, basada en declarar los estilos
CSS en un archivo independiente que puede servir como referente para dotar de estilos a decenas,
cientos o miles de archivos html, que únicamente deberán invocar el nombre de archivo utilizando
una sintaxis específica. De este modo un cambio en los estilos habrá que hacerlo únicamente en el
archivo de estilos correspondiente, lo cual supone una gran ventaja. Incluso un cambio completo
de los estilos de una página web se puede conseguir simplemente sustituyendo el archivo
correspondiente.
Vamos a generar un archivo de estilos independiente. Para ello abre Notepad++ (o el editor de
texto que estés usando) y crea un archivo con el siguiente contenido:
/* Comentario en CSS estilos aprenderaprogramar.com*/
ul {color:red;}
a {color:green; text-decoration: none;}
Seguimos usando las mismas propiedades CSS y los mismos valores que hemos usado en la forma
CSS en línea y en la forma CSS interna.
Los contenidos que se encuentren entre los símbolos /* …. */ serán considerados comentarios y se
pueden usar para introducir información del autor del archivo, versión, etc. así como para escribir
aquellas aclaraciones sobre los estilos que se consideren necesarias. Un comentario puede
comprender una o varias líneas según se desee.
Elige Guardar Como… y guarda el archivo con un nombre y extensión css, por ejemplo estilos.css.
Asegúrate que la extensión del archivo sea css. No es válido si no tiene esta extensión.
En nuestro archivo HTML eliminaremos la definición de estilos interna y dejaremos sólo la
invocación al archivo escrita con la siguiente sintaxis:
<head>
…
<link rel="stylesheet" type="text/css" href="rutaDelArchivo.css">
</head>
link es una etiqueta que se usa en HTML para establecer vínculos entre un documento HTML y
otros recursos como una imagen de icono o una hoja de estilos CSS. En este caso se indica con la
propiedad rel (relación o relationship) que el documento HTML debe usar los estilos definidos
como texto/css en un archivo con el nombre indicado. Ten en cuenta que si como ruta de archivo

indicas simplemente el nombre del archivo, éste debe encontrarse en la misma carpeta en que se
encuentre el documento HTML. Si el archivo CSS se encuentra en otra carpeta deberás indicarlo
escribiendo una URL completa u bien una URL relativa que determine la ruta.
Nosotros ubicaremos de momento el archivo CSS en la misma carpeta que el archivo HTML. En el
archivo HTML tendremos lo siguiente:
<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>

</html>
//el html <link rel="stylesheet" href="cssexterno.css" type="text/css">
Ejercicios
body{ background:#00FF00}
h2{background:#FF0000}
h3{background:#0000FF}
p{background:#339966}
ejercicio2
p{border-style:double;color:red;font-size=x-large;font-style:italic; text-
align:center; background:url(imagen.gif); border:#00CC33;
ejercicio3
body{background:green; font-family:arial; color:orange;

scrollbar-arrow-color:lene;
scrollbar-track-color:white;
scrollbar-shadow-color:blue;
scrollbar-face-color:silver;
scrollbar-highlight-color:red;
scrollbar-darkshadow-color:black;
scrollbar-3dlight-color:gold;
scrollbar
}
Ejercicio4
body{background:url(blanco.gif);

background:repeat:no-repeat;
background:-position:50px 100px
}
EJERCICIO 1
Modifica el código HTML mostrado a continuación para cumplir con estos requisitos mediante
la aplicación de estilos internos:
a) Todas las etiquetas h1 deben mostrar su texto en color rojo.
b) Todas las etiquetas h3 deben mostrar su texto en color verde.
c) Todos los párrafos deben mostrar su texto en color brown (marrón).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion"
/></p>
</body>
</html>
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Modifica el código HTML del ejercicio anterior para cumplir con estos requisitos mediante la
aplicación de CSS externo definido en un archivo independiente, donde debes incluir al menos un
comentario:
a) Todas las etiquetas h1 deben mostrar su texto en color azul.

b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).

c) Todos los párrafos deben mostrar su texto en color brown (marrón).
NEMUS Y SUB NEMUS CON CSS

MENU EJEMPLO Nª1
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>NAVEGADOR VERDICAL </h2>

<P>MENU PRINCIPAL VERTICAL </P>
<ul>
<li><a class="active" href="#home">INICIO</a></li>
<li><a href="#news">MISION </a></li>
<li><a href="#contact">VISION</a></li>
<li><a href="#about">OBJETOVOS</a></li>
<li><a href="#about">QUIENES SOMOS </a></li>
</ul>
</body>

</html>
MENU EJEMPLO Nº2

GUARDAR CON EL NOMBRE VERTICAL2.HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" title="style css" type="text/css" media="screen"
charset="utf-8">
</style>
<title>Menu Lateral Jampudia.com</title>
</head>
<body>
<div class="container">
<div id="sidebar">
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">MISION </a></li>
<li><a href="#">VISION</a></li>
<li><a href="#">OBJETIVOS</a></li>
<li><a href="#">QUIENES SOMOS</a></li>
</ul>
</div>
<div class="main-content">
</div>
</div>
</body>
</html>
GUARDAR CON EL NOMBRE style.css
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
}
#sidebar {
position: absolute;
background: #2290c9;
width: 240px;
height: 100%;
box-sizing: border-box;

-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin: 0;
}
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: white;
display: block;
border-bottom: 1px solid #196c96;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
background: #196c96;
Menús superiores con CSS

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;

padding: 0;
overflow: hidden;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover:not(.active) {
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul a class="active">
<li><a class="active" href="#home">PRINCIPAL</a></li>
<li><a href="#news">GALERIA DE VIDEOS</a></li>
<li><a href="#contact">GALERIA DE MUSICA</a></li>
<li><a href="#contact">FORMULARIOS</a></li>
<li><a href="#contact">DESCARGAS</a></li>
<li><a href="#contact">SUBIR</a></li>
<ul>
</ul>
<li style="float:right"><a href="#about">SALIR</a></li>
</ul>
</body>
</html>
Guardar con el nombre: style.CSS

*{
margin: 0;
padding: 0;
border: o none;
position: relative;
}

#menu_gral {
font-family: verdana, sans sherif;
width: 80%;
margin: 1.5rem auto;
}
#menu_gral ul {
text-align: center;
font-size: 0;
}
#menu_gral > ul li {
display: inline-block;
width: 25%;
position: relative;
background: #4CAF50;
}
#menu_gral li a {
display: block;
font-size: 1rem;
line-height: 2.5rem;
color: #444;
}
#menu_gral li:hover a, #menu_gral li a:focus {
background: #8DA889;
color: #fff;
}
#menu_gral li ul {
position: absolute;
width: 0;
overflow: hidden;
}
#menu_gral li:hover ul, #menu_gral li:focus ul {
width: 100%;
margin: 0 -4rem -4rem -4rem;
padding: 0 4rem 4rem 4rem;
background: #bbb;
z-index: 5;
}
#menu_gral li li {
display: block;
width: 100%;
}
#menu_gral li:hover li a, #menu_gral li:focus li a {
font-family: monospace;
font-size: .9rem;
line-height: 1.7rem;
border-top: 1px solid #e5e5e5;
background: #444;
}
#menu_gral li li a:hover, #menu_gral li li a:focus {
background: #8AA9B8;
}

GUARDAR CON EL NOMBRE DE: Superior.html

<html>
<head><title></title>
<link rel="stylesheet" href="style.css" title="style css" type="text/css" media="screen" charset="utf-8">
</style>
</head>
<body>
<nav id="menu_gral">
<ul>
<li><a href="#">PRODUCTOS</a>
<ul>
<li><a href="#">Papitas</a></li>
<li><a href="#">Galletas</a></li>
<li><a href="#">come comes</a></li>
</ul>
</li>
<li><a href="#">GALERIA</a>
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Musica</a></li>
<li><a href="#">Imagenes</a></li>
</ul>
</li>
<li><a href="#">Aserca de</a></li>
<li><a href="#">VENTAS</a>
<ul>
<li><a href="#">Contado</a></li>
<li><a href="#">Credito</a></li>
<li><a href="#">Otros</a></li>
</ul>
</li>
</ul>
</nav>
</body>


El lenguaje JavaScript
Introducción JavaScript es un sencillo lenguaje de programación, que presenta una característica

especial: sus programas, llamados comúnmente scripts, se en las páginas HTML y se ejecutan en el
navegador (Mozilla Firefox, Microsoft Internet Explorer,...). Estos scripts normalmente consisten
en unas funciones que son llamadas desde el propio HTML cuando algún evento sucede. De ese
modo, podemos añadir efectos como que un botón cambie de forma al pasar el ratón por encima,
o abrir una ventana nueva al pulsar en un enlace, ... JavaScript fue desarrollado por Netscape, a
partir del lenguaje Java, el cual sigue una filosofía similar, aunque va más allá. Java es un lenguaje
de programación por sí mismo, como lo puedan ser C, Pascal o VisualBasic. Esto quiere decir, que
se puede ejecutar un programa Java fuera de un navegador. Pero, repetimos, que la diferencia
fundamental es que Java es un lenguaje completo, que puede ser utilizado para crear aplicaciones
de todo tipo, mientras que JavaScript sólo “funciona” dentro de una página HTML. Por otro lado,
también se puede incluir Java en páginas HTML, tal es el caso de los applets, que se podría traducir
como “aplicacioncitas”. JavaScript fue declarado como estándar del European Computer
Manufacturers' Association (ECMA) en 1997, y poco después también fue estandarizado por ISO.
Sin embargo, la estructura de objetos que implementaban los diferentes navegadores (Netscape y
Explorer en aquellos momentos) no se ajustaba al estándar, lo que provocaba numerosos
problemas de compatibilidad. Para solventarlos el W3C publicó un nuevo modelo de objetos, DOM
(Document Object Model), que incorporan la mayoría de navegadores actuales como Explorer o
Firefox.
Scripts y eventos
Para introducir un script JavaScript se hace dentro de las etiquetas:
<SCRIPT LANGUAGE=“JavaScript”>
código del script
</SCRIPT>
Veamos un ejemplo básico de una página HTML que contiene un script de Javascript:
<HTML>
<BODY>
Esto es HTML
<br>
<SCRIPT LANGUAGE="JavaScript">
document.write("Esto es JavaScript")
</SCRIPT>
<br>
Esto vuelve a ser HTML
</BODY>
</HTML>

Ejercicio 02
Este ejercicio nos ayuda cuando no funciona oh esta desactivado el javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Ejercicio 1 - Archivo externo y varios mensajes</title>
<script type="text/javascript" src="codigo.js"></script>
</head>
<body>
<noscript>Esta página <strong>requiere</strong> el uso de JavaScript y parece
que está desactivado</noscript>
<p>Esta página muestra 2 mensajes</p>
</body>
</html>
Ejercicio 03
Este ejercicio nos muestra un mensaje de alerta en la parte superior de la pagina web
<head>
<title>Ejercicio 2 - Mostrar mensajes complejos</title>
<script type="text/javascript">
var mensaje = "Hola Mundo! \n Qué facil es incluir \'comillas simples\' \n y \"comillas dobles\" ";
alert(mensaje);
</script>
</head>
<body>
<p>Esta página muestra un mensaje complejo</p>
</body>
</html>
Ejercicio 04
Este mensaje muestra los doce meces del año en una alerta y con un aceptar
<head>
<title>Ejercicio 3 - Arrays simples</title>

// Array que almacena los 12 meses del año
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
"Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
// Se muestra el nombre de cada mes
alert(meses[0]);
alert(meses[1]);
alert(meses[2]);
alert(meses[3]);
alert(meses[4]);
alert(meses[5]);
alert(meses[6]);
alert(meses[7]);
alert(meses[8]);
alert(meses[9]);
alert(meses[10]);
alert(meses[11]);
</script>
</head>
<body>
<p>Esta página muestra los 12 meses del año</p>
</body>
</html>
Ejercicio 05
Este ejercicio nos muestra el uso básico de los operadores básicos
<head>
<title>Ejercicio 4 - Operadores</title>
var valores = [true, 5, false, "hola", "adios", 2];
// Cual de los 2 elementos de texto es mayor
// Si el resultado es true, el primer texto es mayor
var resultado = valores[3] > valores[4];
alert(resultado);
// Combinar valores booleanos
var valor1 = valores[0];
var valor2 = valores[2];
// Obtener un resultado TRUE
var resultado = valor1 || valor2;
alert(resultado);
// Obtener un resultado FALSE
resultado = valor1 && valor2;
alert(resultado);
// Operaciones matemáticas

var num1 = valores[1];

var num2 = valores[5];
var suma = num1 + num2;
alert(suma);
var resta = num1 - num2;
alert(resta);
var multiplicacion = num1 * num2;
alert(multiplicacion);
var division = num1 / num2;
alert(division);
var modulo = num1 % num2;
alert(modulo);
</script>
</head>
<body>
<p>Esta página muestra el uso básico de los operadores</p>
</body>
</html>
Ejercicio 06
Con esta pagina podemos ver el uso de if
<head>
<title>Ejercicio 5 - Estructuras de control, IF</title>
var numero1 = 5;
var numero2 = 8;
if(numero1 <= numero2) {
alert("numero1 no es mayor que numero2");
}
if(numero2 >= 0) {
alert("numero2 es positivo");
}
if(numero1 < 0 || numero1 != 0) {
alert("numero1 es negativo o distinto de cero");
}
if(++numero1 < numero2) {
alert("Incrementar en 1 unidad el valor de numero1 no lo hace mayor o igual que numero2");
}
</script>
</head>
<body>
<p>Esta página muestra el uso básico de la estructura de control IF</p>
</body>
</html>

Ejercicio 07
Esta página calcula la letra del DNI
<head>
<title>Ejercicio 6 - Calculo de la letra del DNI</title>
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N',
'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
var numero = prompt("Introduce tu número de DNI (sin la letra)");
var letra = prompt("Introduce la letra de tu DNI (en mayúsculas)");
letra = letra.toUpperCase();
if(numero < 0 || numero > 99999999) {
alert("El número proporcionado no es válido");
}
else {
var letraCalculada = letras[numero % 23];
if(letraCalculada != letra) {
alert("La letra o el número proporcionados no son correctos");
}
else {
alert("El número de DNI y su letra son correctos");
}
}
</script>
</head>
<body>
<p>Esta página calcula la letra del DNI</p>
</body>
</html>
Ejercicio 08
Introduce un número y se mostrará su factorial
<head>
<title>Ejercicio 7 - Factorial de un número entero</title>
var numero = prompt("Introduce un número y se mostrará su factorial");
var resultado = 1;
for(var i=1; i<=numero; i++) {
resultado *= i;

}
alert(resultado);
</script>
</head>
<body>
</body>
</html>
Ejercicio 09
Este ejercicio nos permite verificar si un numero introducido es par
<head>
<title>Ejercicio 8 - Funciones básicas</title>
var numero = prompt("Introduce un número entero");
var resultado = parImpar(numero);
alert("El número "+numero+" es "+resultado);
function parImpar(numero) {
if(numero % 2 == 0) {
return "par";
}
else {
return "impar";
}
}
</script>
</head>
<body>
</body>
</html>
Ejercicio 10
Esta pagina nos permite verificar si en un texto existe mayúsculas y minúsculas
<head>
<title>Ejercicio 9 - Información sobre cadenas</title>
function info(cadena) {
var resultado = "La cadena \""+cadena+"\" ";
// Comprobar mayúsculas y minúsculas
if(cadena == cadena.toUpperCase()) {
resultado += " está formada sólo por mayúsculas";
}

else if(cadena == cadena.toLowerCase()) {

resultado += " está formada sólo por minúsculas";
}
else {
resultado += " está formada por mayúsculas y minúsculas";
}
return resultado;
}
alert(info("OVNI = OBJETO VOLADOR NO IDENTIFICADO"));
alert(info("En un lugar de la mancha..."));
</script>
</head>
<body>
</body>
</html>
Ejercicio 11
Verifica si un texto es polidromo
<head>
<title>Ejercicio 10 - Detección de palíndromos</title>
function palindromo(cadena) {
var resultado = "La cadena \""+cadena+"\" \n";
// Pasar a minusculas la cadena
var cadenaOriginal = cadena.toLowerCase();
// Convertir la cadena en un array
var letrasEspacios = cadenaOriginal.split("");
// Eliminar los espacios en blanco (este paso es demasiado largo ya que no se utiliza la funcion
"replace")
var cadenaSinEspacios = "";
for(i in letrasEspacios) {
if(letrasEspacios[i] != " ") {
cadenaSinEspacios += letrasEspacios[i];
}
}
var letras = cadenaSinEspacios.split("");
var letrasReves = cadenaSinEspacios.split("").reverse();
// Este paso tambien es muy largo porque no se utiliza la sentencia "break"
var iguales = true;
for(i in letras) {
if(letras[i] == letrasReves[i]) {
// Todo bien
}
else {

// Alguna letra es distinta, por lo que ya no es un palindromo

iguales = false;
}
}
if(iguales) {
resultado += " es un palíndromo";
}
else {
resultado += " no es un palíndromo";
}
return resultado;
}
alert(palindromo("La ruta nos aporto otro paso natural"));
alert(palindromo("Esta frase no se parece a ningun palindromo"));
</script>
</head>
<body>
</body>
</html>
Ejercicio 12
<head>
<title>Ejercicio 11 - DOM básico</title>
window.onload = function() {
var info = document.getElementById("informacion");
// Numero de enlaces de la pagina
var enlaces = document.getElementsByTagName("a");
info.innerHTML = "Numero de enlaces = "+enlaces.length;
// Direccion del penultimo enlace
var mensaje = "El penultimo enlace apunta a: "+enlaces[enlaces.length-2].href;
info.innerHTML = info.innerHTML + "<br/>" + mensaje;
// Numero de enlaces que apuntan a http://prueba
var contador = 0;
for(var i=0; i<enlaces.length; i++) {
// Es necesario comprobar los enlaces http://prueba y
// http://prueba/ por las diferencias entre navegadores
if(enlaces[i].href == "http://prueba" || enlaces[i].href == "http://prueba/") {
contador++;
}
}
info.innerHTML = info.innerHTML + "<br/>" + contador + " enlaces apuntan a http://prueba"
// Numero de enlaces del tercer párrafo

var parrafos = document.getElementsByTagName("p");

enlaces = parrafos[2].getElementsByTagName("a");
info.innerHTML = info.innerHTML + "<br/>" + "Numero de enlaces del tercer párrafo =
"+enlaces.length;
}
</script>
</head>
<body>
<div id="informacion" style="border:thin solid silver; padding:.5em"></div>
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing
elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id,
aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit
convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus
non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu
adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non
dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac,
felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan
metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu
odio. Praesent id metus.</p>
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat
auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur
vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis
porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor
felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis
eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum.
Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam
euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet,
lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed
tellus.</p>
<p>Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet
imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam
leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut
dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu
sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec
pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis
iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit,
eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi
at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a>
auctor.</p>
</body>
</html>

Ejercicio 13
Este ejercicio nos permite mostrar un mensaje y poder seguir leyendo
<head>
<title>Ejercicio 12 - DOM básico y atributos XHTML</title>
.oculto { display: none; }
.visible { display: inline; }
</style>
function muestra() {
var elemento = document.getElementById("adicional");
elemento.className = "visible";
var enlace = document.getElementById("enlace");
enlace.className = "oculto";
}
</script>
</head>
<body>
<p id="texto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue,
commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae,
rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae,
ultrices porttitor, pede. <span id="adicional" class="oculto">Nullam sit amet
nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec
lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam
sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean
vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id
metus.</span></p>
<a id="enlace" href="#" onclick="muestra(); return false;">Seguir leyendo</a>
</body>
</html>
Ejercicio 14
Este ejercicio nos permite mostrar muchos contenidos
<head>

function anade() {
var elemento = document.createElement("li");
var texto = document.createTextNode("Elemento de prueba");
elemento.appendChild(texto);
var lista = document.getElementById("lista");
lista.appendChild(elemento);
var nuevoElemento = "<li>Texto de prueba</li>";
lista.innerHTML = lista.innerHTML + nuevoElemento;
}
</script>
</head>
<body>
<ul id="lista">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed mattis enim vitae orci</li>
<li>Phasellus libero</li>
<li>Maecenas nisl arcu</li>
</ul>
<input type="button" value="Añadir elemento" onclick="anade();">
</body>
</html>
Ejercicio 15
Si se utilizan manejadores de eventos como atributos de XHTML, la solución podría ser la
siguiente:
<head>
function muestraOculta(id) {
var elemento = document.getElementById('contenidos_'+id);
var enlace = document.getElementById('enlace_'+id);
if(elemento.style.display == "" || elemento.style.display == "block") {
elemento.style.display = "none";
enlace.innerHTML = 'Mostrar contenidos';
}
else {
elemento.style.display = "block";
enlace.innerHTML = 'Ocultar contenidos';
}
}
</script>

</head>
<body>
<p id="contenidos_1">[1] Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu,
non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#" onclick="muestraOculta('1'); return false;">Ocultar
contenidos</a>
<br/>
contenidos</a>
<br/>
contenidos</a>
</body>
</html>
Ejercicio 16
<head>
<title>Ejercicio 15 - Información sobre eventos</title>

body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
function informacion(elEvento) {
var evento = elEvento || window.event;
switch(evento.type) {
case 'mousemove':
document.getElementById('info').style.backgroundColor = '#FFFFFF';
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
var coordenadaXrelativa, coordenadaYrelativa, coordenadaXabsoluta, coordenadaYabsoluta;
if(ie) {
if(document.documentElement && document.documentElement.scrollTop){
coordenadaXabsoluta = evento.clientX + document.documentElement.scrollLeft;
coordenadaYabsoluta = evento.clientY + document.documentElement.scrollTop;
}
else {
coordenadaXabsoluta = evento.clientX + document.body.scrollLeft;
coordenadaYabsoluta = evento.clientY + document.body.scrollTop;
}
}
else {
coordenadaXabsoluta = evento.pageX;
coordenadaYabsoluta = evento.pageY;
}
coordenadaXrelativa = evento.clientX;
coordenadaYrelativa = evento.clientY;
muestraInformacion(['Ratón', 'Navegador ['+coordenadaXrelativa+', '+coordenadaYrelativa+']',
'Pagina ['+coordenadaXabsoluta+','+coordenadaYabsoluta+']']);
break;
case 'keypress':
document.getElementById('info').style.backgroundColor = '#CCE6FF';
var caracter = evento.charCode || evento.keyCode;
var letra = String.fromCharCode(caracter);
var codigo = letra.charCodeAt(0);
muestraInformacion(['Teclado', 'Carácter ['+letra+']', 'Código['+codigo+']']);
break;
case 'click':
document.getElementById('info').style.backgroundColor = '#FFFFCC';
break;
}
}
function muestraInformacion(mensaje) {
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';

}
}
document.onmousemove = informacion;
document.onkeypress = informacion;
document.onclick = informacion;
</script>
</head>
<body>
<div id="info"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/
><br/>
><br/>
><br/>
</body>
</html>
Ejercicio 17
<head>
<title>Ejercicio 16 - Información sobre eventos</title>
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
function informacion(elEvento) {
var evento = elEvento || window.event;
var coordenadaX = evento.clientX;
var coordenadaY = evento.clientY;
var dimensiones = tamanoVentanaNavegador();
var tamanoX = dimensiones[0];
var tamanoY = dimensiones[1];
var posicionHorizontal = "";
var posicionVertical = "";
if(coordenadaX > tamanoX/2) {
posicionHorizontal = "derecha";
}
else {
posicionHorizontal = "izquierda";
}
if(coordenadaY > tamanoY/2) {

posicionVertical = "abajo";
}
else {
posicionVertical = "arriba";
}
muestraInformacion(['Posicion', posicionHorizontal, posicionVertical]);
}
function muestraInformacion(mensaje) {
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
}
}
function tamanoVentanaNavegador(){
// Adaptada de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var dimensiones = [];
if(typeof(window.innerWidth) == 'number') {
// No es IE
dimensiones = [window.innerWidth, window.innerHeight];
}
else if(document.documentElement && (document.documentElement.clientWidth ||
document.documentElement.clientHeight)) {
//IE 6 en modo estandar (no quirks)
dimensiones =
[document.documentElement.clientWidth,document.documentElement.clientHeight];
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE en modo quirks
dimensiones = [document.body.clientWidth, document.body.clientHeight];
}
return dimensiones;
}
document.onclick = informacion;
</script>
</head>
<body>
<div id="info"></div>
><br/>
><br/>
><br/>
</body>
</html>
El resultado es que escribe:

Esto es HTML
Esto es JavaScript
Esto vuelve a ser HTML
Realmente la funcionalidad del anterior script es nula, ya que para escribir “Esto es
JavaScript” nos basta con usar HTML. La verdadera utilidad de JavaScript es el que los
scripts se ejecuten cuando ocurra algún evento, como sea un click de ratón, que éste
pase por encima de un enlace, que se envíen los datos de un formulario, ... En el
siguiente ejemplo, se ejecuta el script cuando se pasa por encima del enlace con el
ratón:
<HTML>
<HEAD>
<BODY>
<a href="#" onmouseover="window.status='este es el texto que aparece en la barra de
status'; return true">Pasa el ratón n por aquí</a>
</BODY>
</HTML>
En este ejemplo, al pasar el ratón sobre el enlace, se llama a la acción especificada en la

cláusula onmouseover. Es decir, se ejecuta cuando ocurre un cierto evento. Se dice por
eso que es una programación orientada a eventos. En el ejemplo lo que ocurre es que se
cambia el texto de la barra de status (la de la parte inferior de la ventana).
Veamos una lista de los eventos más comunes, cuando se producen y sobre qué
etiquetas pueden actuar:
En posteriores versiones del lenguaje se han ido añadiendo nuevos eventos (aunque a

veces presentan problemas de compatibilidad entre diferentes navegadores). Ésta es una

lista más extensa de eventos:
Continuando con el ejemplo anterior, igualmente se puede hacer que al pulsar un link,
sin que cargue directamente una nueva página, se ejecute una función javascript, de la

siguiente manera:
<a href=“javascript:funcion(parametros)”>link</a>
Esto es muy útil cuando queremos hacer que al pulsar sobre una imagen se cambie la
misma, pero que no nos lleve a otra parte. También podría servir para abrir otra ventana,
pero sin cambiar el contenido de la antigua.
En un script podemos definir tanto estructuras condicionales como iterativas. Y también
podemos definir funciones. Los scripts que contienen estas funciones suelen estar en el
head del documento, de manera que se carguen cuando se carga el docuemento. Esas
funciones serán llamadas desde el body del documento, cuando ocurra cierto evento.
Veamos un ejemplo:
<html>
<head>
<script language="LiveScript">
function hola() {
alert("Hola");
}
</script>
</head>
<body>
<a href="" onMouseOver="hola()">link</a>
</body>
</html>
En este ejemplo, hemos definido una función, llamada hola. Una función se declara así:
function (parámetros)
/* los parámetros separados por comas, sin escribir su tipo (booleano, numérico, ...) */
{
instrucciones
}
En este caso, lo que hace esta función es llamar a la función de JavaScript alert, que
muestra una ventana con el texto que se le pasa como parámetro.
Y, ¿ cuando se llama a esta función ?. Pues cuando ocurre el evento OnMouseOver del
link, es decir, cuando el ratón pasa por encima del link. Eso viene marcado por la línea
<a href="" onMouseOver="hola()">link</a>
Como vemos, la filosofía de JavaScript es que en el script definimos funciones (en el
head del documento) que serán llamadas cuando ocurran ciertos eventos.
3. Variables, operadores y estructuras de control

JavaScript permite utilizar variables, de tipos numéricos, cadenas de caracteres o

booleanos. No obstante, cuando declaramos una variable no se le asigna un tipo, sino
que es el propio intérprete el que, según el valor que se le asigne, le da un tipo u otro. La
declaración es opcional, de manera que se puede hacer de dos maneras:
- Simplemente asignándole directamente un valor, por ejemplo, x = 42
- Utilizando la palabre clave var, por ejemplo, var x = 42
Por lo demás, la sintaxis del lenguaje es prácticamente igual que la de Java (es decir,
igual que la de C). Así, tanto los operadores como las estructuras de control son
exactamente iguales a C. Recordemos las estructuras de control:
Estructuras condicionales
• La estructura if ... else ... es así:
if (condición)
{
bloque de instrucciones 1
}
else
{
bloque de instrucciones 1
}
• La estructura switch es:
switch (expresión)
{
case caso1 :
instrucciones;
break;
case caso2:
instrucciones;
break;
...
default : instrucciones;
Estructuras iterativas
• La estructura while es así:
while (condición)
{
instrucciones
}
• La estructura do ... while es así:
do {
instrucciones
} while (condición)
• La estructura for es así:
for (expresión inicial; condición de cumplimiento; expresión de incremento)

{
intrucciones
}
4. Estructura de objetos
JavaScript es un lenguaje de objetos. Un objeto es un ente abstracto que agrupa por un
lado a un conjunto de propiedades que definen al propio objeto y por otro, una serie de
métodos que interactúan sobre él (funciones o procedimientos). Un ejemplo de objeto
en un entorno de gestión de una empresa podría ser un empleado. Este empleado tiene
una serie de propiedades, de datos que lo identifican: nombre y apellidos, sexo, DNI,
número de seguridad social, fecha de nacimiento, estado civil, categoría, ... Por otro
lado, hay una serie de acciones que se pueden hacer con un empleado, como contratar
un nuevo empleado, despedir a un empleado ya existente, pagarle la nómina, subirle de
categoría, ...
En JavaScript, se identifican una serie de objetos sobre los que podremos interactuar,
como las ventanas, las páginas, las imágenes, los formularios, ... Por ejemplo, El objeto
ventana tendrá, entre otras, una propiedad que sea el ancho de la ventana. Un método
(funciones en el caso de JavaScript) asociado a este objeto será la función que abre una
nueva ventana.
En los ejemplos anteriores, document es un objeto que representa a un documento
HTML y write es un método que escribe la cadena que se pasa como parámetro. En el
otro ejemplo, window es un objeto que representa la ventana del navegador, una de
cuyas propiedades es status, que al modificarse, lo que ocurre es que cambia la barra de
status de la ventana. Tanto los métodos como las propiedades siempre se representan de
la siguiente manera:
nombre_objeto.nombre_método(argumentos)
nombre_objeto.nombre_propiedad
donde argumentos son los parámetros que se pasan a la función.
Veamos cómo se referencian las propiedades: tenemos un objeto llamado profesor con
tres propiedades, que son el nombre, el año de nacimiento y el DNI:
profesor.nombre = “Toni Navarrete”
profesor.anyo_nacimiento = 1973
profesor.DNI = “12345678A”
Para crear nuestros propios objetos, lo hacemos siguiendo estos dos pasos:
1. Definir el objeto con una función constructor:
function profesor(nombre,anyo_nacimiento,DNI) {
this.nombre = nombre;
this.anyo_nacimiento = anyo_nacimiento;
this.DNI = DNI;
}
this hace siempre referencia al objeto actual.
2. Crear una instancia del objeto usando new:

profe = new profesor(“Toni Navarrete”,1973,”12345678A”)
Y veamos cómo asignar métodos a un objeto. Para ello le asignamos una función que
calcule los años del profesor. Para hacerla más simple, sólo restará el año actual menos
el año de nacimiento.
function calcula_edad( ) {
var edad = 2007 - this.anyo_nacimiento;
/* las variables se declaran explícitamente,
si bien el tipo se les asigna implícitamente */
document.write(“Su edad es: <b>“ + edad + “</b>)
}
Realmente, la función se podría escribir en una línea, pero así vemos cómo declarar una
variable local.
2. Asignamos la función al objeto, al crear el constructor:
function profesor(nombre,anyo_nacimiento,DNI) {
/* nótese que no incluimos el nombre de la función */
this.nombre = nombre;
this.anyo_nacimiento = anyo_nacimiento;
this.DNI = DNI;
this.calcula_edad = calcula_edad( );
}
Y después de declarar las instancias utilizando new, llamaremos a la función desde el

código HTML así:
profe.calcula_edad( )
Antes hemos dicho que JavaScript es un lenguaje de objetos ya que permite trabajar con
una serie de objetos. Sin embargo no es exactamente un lenguaje orientado a objetos
como lo son Java o C++, ya que JavaScript no soporta herencia. Suele decirse que
JavaScript es un lenguaje basado en prototipos, ya que las nuevas clases se generan
clonando las clases base (prototipos) y extendiendo su funcionalidad. La palabra
reservada prototype hace referencia al prototipo (clase) de un objeto. Por ejemplo,
podemos añadir nuevas propiedades y métodos a una clase de la siguiente manera:
profe.prototype.nuevaPropiedad=123;
profe.prototype.nuevoMetodo=f;
donde f es una función ya definida. Nótese que se pone f (sin paréntesis), ya que lo que
se iguala es la referencia de la función y no el valor que devuelve.
Este mecanismo es el que se utiliza para definir una cierta herencia. Por ejemplo,
podríamos definir una nueva clase Profesor2 que hereda de Profesor y añade el método
menor30, de la siguiente manera:
function menor30() {
if (this.anyo_nacimiento<1977)
return 1;

else
return 0;
}
function Profesor2() {
}
Profesor2.prototype = new Profesor();
Profesor2.prototype.menor30 = menor30;
5. Los objetos propios de JavaScript

Además de los objetos que podamos crear nosotros, JavaScript tiene una larga lista de
objetos predefinidos y que nos serán de gran utilidad a la hora de añadir funcionalidades
a nuestras páginas.
Estos objetos están agrupados formando una jerarquía que estudiamos a continuación:
En todas las páginas HTML encontraremos los objetos siguientes:
navigator: contiene propiedades como el nombre y la versión, los tipos MIME y plugins
del navegador que utilizamos.
window: contiene las propiedades referentes a toda la ventana, o a un frame. Contiene a
los siguientes tres objetos:
document: agrupa las propiedades del documento actual, tales como el título,
formularios, imágenes, colores de texto o fondo, ...
history: contiene las URLs que el cliente ha visitado anteriormente
location: propiedades de la URL de la página
Como ejemplo, el script colorfondo cambia la propiedad bgColor del objeto document,
lo cual hace que se cambie el color de fondo de la página, en función del parámetro que
se le envía:
<HTML>
<HEAD>
<TITLE>Untitled-4</TITLE>
<script language="JavaScript">
function colorfondo(color)
{
document.bgColor=color
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<a href="#" onClick=colorfondo("#000000");>Pulsa para cambiar a negro el color de
fondo</a><p>
<a href="#" onClick=colorfondo("#FFFFFF");>Pulsa para cambiar a blanco el color de
fondo</a><p>
<a href="#" onClick=colorfondo("#FF0000");>Pulsa para cambiar a rojo el color de
fondo</a><p>
<a href="#" onClick=colorfondo("#00FF00");>Pulsa para cambiar a verde el color de
fondo</a><p>

<a href="#" onClick=colorfondo("#0000FF");>Pulsa para cambiar a azul el color de

fondo</a><p>
<a href="#" onClick=colorfondo("#FFFF00");>Pulsa para cambiar a amarillo el color de
fondo</a><p>
</BODY>
</HTML>
El siguiente ejemplo incluye la función carga, que cambia la imagen (‘uno.gif’ o

‘dos.gif’) al pasar por encima el ratón, y en su lugar carga las imágenes ‘uno2.gif’ o
‘dos2.gif’, respectivamente. La función descarga hace el proceso inverso, cuando el
ratón sale de encima de la imagen. Nótese que la función carga se llama al producirse el
evento onmouseover, mientras que descarga con el evento onmouseout.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function carga(nom)
{
nombo = nom + "2.gif";
document.images[nom].src = nombo;
}
function descarga(nom)
{
nombo = nom + ".gif";
document.images[nom].src = nombo;
}
</SCRIPT>
</HEAD>
<BODY>
<a href="pagina1.html" onmouseover="carga('uno')"
onmouseout="descarga('uno')";> <img src="uno.gif" name="uno" border=0></a>
<p>
<a href="pagina2.html" onmouseover="carga('dos')"
onmouseout="descarga('dos')";> <img src="dos.gif" name="dos" border=0></a>
</BODY>
</HTML>

Curso de Boostrap PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Boostrap PDF

Cargado por

Copyright:

Formatos disponibles

SISTEMAS INFORMATICOS

Manual de páginas web completo

@Franz Flores Callapa Página 1

Nos aparecerá la ventana de selección de directorio:

Elegimos Escritorio y le llamamos index.html

@Franz Flores Callapa Página 2

Cambiar el color del texto.

@Franz Flores Callapa Página 3

Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario:

@Franz Flores Callapa Página 4

Se puede utilizar más de una etiqueta si deseamos un sangrado mayor:

@Franz Flores Callapa Página 6

@Franz Flores Callapa Página 7

¿Qué ha pasado? No se ve nada. Esto ocurre porque:

Otros atributos de la tabla.

@Franz Flores Callapa Página 8

Atributos de las filas y las celdas.

@Franz Flores Callapa Página 9

Tablas con celdas de distinto tamaño.

@Franz Flores Callapa Página 10

@Franz Flores Callapa Página 11

@Franz Flores Callapa Página 12

Alineaciones dentro de las celdas.

xxx xxx xxx

@Franz Flores Callapa Página 13

Separaciones entre celdas y entre borde y contenidos.

xxxx xxxx xxxx

xxxx xxxx xxxx

@Franz Flores Callapa Página 14

@Franz Flores Callapa Página 15

Atributos de la imagen width y height.

@Franz Flores Callapa Página 16

@Franz Flores Callapa Página 17

Y cuando navegue sin bajarse las imágenes se verá así:

Colocar una imagen como fondo de la página.

@Franz Flores Callapa Página 18

Vínculos a otro documento externo al sitio.

@Franz Flores Callapa Página 19

Vínculos a otra parte del mismo documento.

@Franz Flores Callapa Página 20

Vínculos de correo electrónico.

Imagen como vínculo a otro documento.

@Franz Flores Callapa Página 21

Estructura de marcos con tres frames.

@Franz Flores Callapa Página 22

Lo guardamos como titulo.html

Lo guardamos como indice.html

@Franz Flores Callapa Página 23

Lo guardamos como saludo.html

Lo guardamos como enlace.html

@Franz Flores Callapa Página 24

Ejercicio uso de frame y sus atributos

Iframes marcos flotantes

<iframe frameborder="0" hspace="2" vspace="2" src="index1.html" width="810"

@Franz Flores Callapa Página 25

@Franz Flores Callapa Página 26

type = image name = campo

@Franz Flores Callapa Página 27

@Franz Flores Callapa Página 28

Ahora veamos el efecto producido en la página Web :

@Franz Flores Callapa Página 29

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0"

<A HREF="imagine.mid" TARGET="_new">Escucha el midi imagine.mid</A>