Академический Документы
Профессиональный Документы
Культура Документы
A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se
utiliza para crear páginas web.
Qué es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas
web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser
visualizados en los navegadores (programas que permiten visualizar las páginas web).
Versiones de HTML
En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas web.
Se creó con objetivos divulgativos, orientado a la actividad académica, en el que el contenido
de las páginas era más importante que el diseño.
Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el
diseño de las páginas y añadir contenido multimedia, por lo que Netscape (cuyos navegadores
eran los más utilizados por aquellos años) comenzó a incluir nuevas etiquetas que no existían
en el estándar.
Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos
atributos para etiquetas ya existentes, y la creación de otras muchas etiquetas nuevas. Por
ello, no fue bien aceptado por el mercado y varias compañías se unieron para formar un nuevo
comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse W3C.
En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las mejoras
proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya habían
realizado estensiones sobre el estándar HTML 2.0.
En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos
(frames), las hojas de estilo y los scripts.
Para que te vayas haciendo una idea de cómo crear una página html a través del
Bloc de notas, vamos a crear una página web sencilla, con una línea de texto.
Mi primera página
Seguidamente introduce, en el
documento en blanco, el texto
siguiente:
<html>
<head>
<title>MI PRIMERA
PAGINA</title>
</head>
<body
bgcolor="#FFCC99">
<font color="#CC3300"
size="5">Hola, estoy
haciendo pruebas.</font>
</body>
</html>
Guarda el
documento con la
extensión htm, con el
nombre miprimpag.
htm. Puedes
guardarlo a través del
menú Archivo,
opción Guardar.
El navegador
deberá mostrar una
página como la de la
derecha.
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz
clic en el botón Resultados para ver la solución.
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
4. Los navegadores tienen que ser compatibles con la última versión HTML para
poder insertar imágenes.
a) Verdadero
b) Falso
a) Verdadero
b) Falso
b) la ignora
b) Permiten crear páginas web sin la necesidad de escribir ni una sola línea de código
HTML.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de
la página.
Por ejemplo:
<html>
...
</html>
La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser
el título.
Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo
de la etiqueta <html>.
Por ejemplo:
<html>
<head>
...
</head>
...
</html>
Para asignar un título a una página es necesario escribir el texto deseado entre las
etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las
etiquetas <head> y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
...
</html>
Objetivo.
Practicar las operaciones que hay que realizar para crear una página básica.
Si es la primera vez que realizas el ejercicio, haz clic aquí para descargarte la carpeta de
ejercicios, deberás extraer los archivos en la carpeta Mis documentos de tu disco duro, ahí
se creará una carpeta ejercicios_html.
A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una
carpeta dentro de ejercicios_html.
La carpeta animales, donde guardaremos los archivos de un sitio web de una asociación
ficticia de veterinarios que iremos creando a lo largo de los ejercicios paso a paso.
La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de
centros deportivos que iremos creando a lo largo de los ejercicios propuestos.
La carpeta flores, donde guardaremos los archivos de un sitio web de una floristería que
iremos creando a lo largo de los ejercicios propuestos.
Cada carpeta contiene a su vez una carpeta imagenes y una carpeta varios donde
iremos guardando las imágenes y ficheros varios respectivamente.
<html>
<head>
<title>Inicio</title>
</head>
<body bgcolor="#99CC99"
>
</body>
</html>
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
Ejercicio 2: Flores.
Ejercicio 1: Deportes
Apartado 1 Hacer clic sobre el menú Archivo, y elegir la opción Abrir.
Apartado 2 Hacer clic sobre el menú Archivo, y elegir la opción Guardar como.
Sustituirla
por <body bgcolor="#0099CC" leftmargin="40" topmargin="40" marginwidth="40
"marginheight="40">.
Ejercicio 2: Flores
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz
clic en el botón Resultados para ver la solución.
1. Las páginas web escritas en HTML tienen que tener la extensión html o htm.
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
b) Dentro de la cabecera.
a) la etiqueta <html>.
b) el atributo bgcolor.
c) el atributo text.
8. Los atributos leftmargin y topmargin ...
b) no funcionan en Netscape.
a) binario.
b) decimal.
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, así como
a insertar caracteres especialeso separadores.
Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si
se desea insertar estos caracteres como texto hay que escribir el nombre que los
representa:
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios
espacios en blanco seguidos sólamente se mostrará uno en el navegador. Para conseguir
que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos
por .
¡Bienvenidos, esta es
mi 1ª pági
na!
Comentarios
Para insertar comentarios dentro del código, basta con insertar el texto entre <!-- y //-->.
Todo el código que se inserte entre estos símbolos no será visualizado en los
navegadores.
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
Hola, BIENVENIDOS
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma
página es la regla horizontal. Para insertar una regla horizontal hay que insertar la
etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.
left (izquierda)
alineación de la regla dentro
align right (derecha)
de la página
center (centro)
Inicio
Bienvenidos a mi página.
Habría que escribir:
La sangría es una especie de margen que se establece a ambos lados del texto. Para
que un texto aparezca sangrado, se inserta entre las
etiquetas <blockquote> y </blockquote>.
Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría
de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para
sangrar texto se ha generalizado.
El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.
Queridos usuarios,
Queridos usuarios,
<blockquote>
<blockquote>
tengo el placer de comunicaros que hay una nueva
sección.
</blockquote>
</blockquote>
Bienvenidos a www.aulaclic.com
Habría que escribir:
También es posible definir una fuente para todo el documento. Para ello, hay que insertar
la etiqueta <basefont> después de la etiqueta <body>.
Por ejemplo:
<body>
<basefont color="#006699" size="4" face="Arial">
...
Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño
4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra
otra etiqueta <font>, la que prevalece es siempre la última que se encuentra.
Bienvenidos a www.aulaclic.com
El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los
párrafos debe insertarse entre las etiquetas <p> y </p>.
No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del
anterior, ya que las etiquetas <p>y </p> hacen que se cambie de línea automáticamente.
También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica
el valor del atributo align, cuyos valores pueden
ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
Bienvenidos a mi página.
Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>,
para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>,
se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre
ellos es menor.
Bienvenidos a mi página.
Aquí encontraréis cursos de formación muy interesantes.
También es posible insertar el texto entre las etiquetas <center> y </center> para que
aparezca centrado.
Por ejemplo, para insertar el texto:
Bienvenidos a mi página.
<center>Bienvenidos a mi página.</center>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el
cambio de línea (como en el caso de <p> y <div>), son las
etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las
hojas de estilo.
Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas
etiquetas precisan una etiqueta de cierre.
Etiqueta Ejemplo
<H1>
Título 1: HTML
<H2>
Título 2: HTML
<H3> Título 3: HTML
<H4> Título 4: HTML
<H5> Título 5: HTML
<H6> Título 6: HTML
Para todas estas etiquetas es posible especificar el valor del atributo align.
El lenguaje HTML
Marquesinas <marquee>
Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la
ventana en forma de línea.
A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los
valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de
un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).
A través del atributo direction puede modificarse la dirección en la que se moverá el texto.
Puede tomar los valores down(de arriba a abajo), up (de abajo a arriba), left (de derecha a
izquierda) o left (de izquierda a derecha).
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Insertar texto con diferentes propiedades.
Objetivo.
Practicar las operaciones que hay que realizar para insertar texto especificando sus
propiedades.
Ejercicio 1.
3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código
en ella:
Con este código estarás estableciendo el color rojo ( #FF0000) y tamaño 1 para el texto del
documento.
Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la
página no tiene texto.
Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro
(#003333) y subiremos el tamaño de las letras.
Con este código estarás estableciendo el color verde oscuro ( #003333) y tamaño 4 para
el texto del documento.
<h1>Inicio</h1>
10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.
Con esta etiqueta estarás insertando una regla horizontal.
12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código
en ella:
<blockquote>
<blockquote>
<p align="left">
<em>
Somos una asociación de veterinarios, estudiantes de
veterinaria, o simplemente amantes de los animales.
<br>
Desde esta página web intentaremos resolver tus dudas
acerca de cómo cuidar a tus mascotas.
</em>
</p>
</blockquote>
</blockquote>
Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).
Ejercicio 2.
Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando
sin cerrar el bloc de notas y visualizando la página cada vez (la primera vez abres el
explorador con la página gatos.htm y después de ver el efecto, en vez de cerrar la ventana
del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la página
podrás volver a la sesión del explorador con la página gatos.htm y después de hacer clic
en el botón Actualizar de tu navegador verás mejor el efecto producido por el cambio que
has incorporado a la página).
4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de
una etiqueta <blockquote> y además le asignamos un estilo de encabezado 3:
<blockquote>
<h3>¿COMO PREVENIR LOS PROBLEMAS DENTALES?</h3>
</blockquote>
<ul>
<li>Alimentar al gato con comida seca de buena calidad o darle algo
duro para que lo mastique</li>
<ul>
<li>Preferiblemente que coma pienso</li>
</ul>
<li>Cepillarle los dientes una vez a la semana</li>
<li>Que el veterinario examine la boca del gato por lo menos cada seis
meses</li>
</ul>
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
Ejercicio 2: Deportes.
1 Abrir el documento donde.htm, de la carpeta originales/deportes del curso.
Ejercicio 3: Deportes.
Ejercicio 4: Flores.
Ejercicio 1: Deportes
<basefont size="4">
<h1><u>¿QUIENES SOMOS?</u></h1>
<br>
<p align="justify">Somos una cadena de centros deportivos dispuestos a
ofrecerte
nuestras instalaciones a buen precio, con la posibilidad de reservarlas con
antelación a través de esta web.</p>
<br>
<p align="center">Este més, podrás hacerte socio de forma
totalmente
gratuita. <br>
Acércate a uno de nuestros centros y no pierdas esta oportunidad.</p>
Luego tenemos dos párrafos ya que tiene una alineación diferente, el primero está
justificado (<p align="justify" todas las líneas acaban sobre la misma vertical derecha), el
segundo está alineado al centro (<p align="center">).
Ejercicio 2: Deportes
Ejercicio 3: Deportes
Apartado 3 Sustituir las etiquetas <p> que aparecen delante de cada actividad por la
etiqueta <li> y encerrar la lista entre etiquetas <ul> (lista con viñetas), el código quedará
así:
<ul>
<li>Pista fútbol sala y baloncesto</li>
<li>Sala aeróbic</li>
<li>Pistas de tenis</li>
<li>Sala de musculación</li>
<li>Sauna</li>
<li>Duchas</li>
</ul>
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic
en el botón Resultados para ver la solución.
a) Verdadero
b) Falso
2. Los caracteres < y > son dos caracteres especiales que indican inicio y fin de
etiqueta.
a) Verdadero
b) Falso
a) Verdadero
b) Falso
b) Falso
a) Verdadero.
b) Falso.
a) Verdadero
b) Falso
7. Los encabezados...
c) No existen en HTML.
Hiperenlace <a>
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un
enlace han de encontrarse entre las etiquetas<a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la
página que se visualizará cuando el usuario haga clic en el enlace.
Visita www.aulaclic.com
Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través del
atributo href.
Referencia absoluta:
Visita www.aulaclic.com
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio
web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o
un objetivo común, estando todos ellos dentro de una misma carpeta, conocida
como carpeta raíz del sitio.
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra
inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por
ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz
del sitio, habría que escribir:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero
partiendo del directorio en el que se encuentra el actual.
Observa que en este caso no aparece el símbolo "/" delante del nombre del documento.
Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta
llamada tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habría
que escribir:
Punto de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente.
Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".
_blank:
_parent:
_self:
_top:
No te preocupes si no te queda del todo claro para qué sirve cada una de estas
opciones de destino, ya que se volverán a ver en el tema de Marcos. De momento
sólo te interesa retener la opción _blank y _self.
Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie
de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de
una imagen (un mapa), aparece el contorno de esa zona.
Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro
alrededor. Esto ocurre debido a que se ha establecido un borde para la imagen, como
veremos más adelante.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al
situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.
Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado
o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en
cada navegador, pero nosotros podemos cambiar esos colores.
Los colores de los vínculos pueden especificarse a través de las propiedades de la página,
en la etiqueta <body>. Estos colores se asignan a través de los
atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado
ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido
pulsados).
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.aulaclic.com" target
="_blank">www.aulaclic.com</a>
...
www.aulaclic.com
Mientras la página www.aulaclic.com sea la última visitada, el enlace será de color fucsia
(#FF0099):
www.aulaclic.com
www.aulaclic.com
Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear
índices.
Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede
tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres
especiales.
Por ejemplo, para insertar un punto de fijación delante del siguiente texto:
Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y
que sin mirar el código no hay nada que indique que delante del texto haya un ancla.
Enlace al ancla
Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero
en lugar de cargarse desde el principio, la primera línea de texto será la línea en la
que hemos insertado el ancla.
Correo electrónico:
<a href="mailto:webmaster@aulaclic.com">e-
mail para aulaclic</a>
El valor del atributo href normalmente será una página web (con
extensión htm, html, asp, php...) pero también puede ser un fichero
comprimido, una hoja de Excel, un documento Word, un documento con
extensión pdf. Cuando el enlace no es a una página Web nos aparecerá
el cuadro de diálogo que seguro habrás visto alguna vez en el que el
navegador le pide al usuario permiso para descargar el fichero en su
ordenador.
De la siguiente forma:
Vínculo vacío:
vinculo vacio
Objetivo.
Practicar las operaciones que hay que realizar para insertar un hiperenlace.
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
<p align="center">
<a href="http://www.aulaclic.com" target="_blank">
<b>
visita aulaClic
</b>
</a>
</p>
El enlace contendrá el texto visita aulaClic, que aparecerá en negrita (<b>), y centrado
(align="center"). Observa como hemos anidado las etiquetas, siempre se cierra la última
abierta.
Con este código estarás indicando que la página tiene el color de fondo verde
(#99CC99), y el color de los enlaces rojo (#CC0000).
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a
continuación.
Ejercicio 1: Deportes.
3 Rectificar la página para que la palabra E-MAIL sea un enlace de correo electrónico a tu
dirección de correo.
Ejercicio 2: Deportes.
Ejercicio 3: Flores.
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic
en el botón Resultados para ver la solución.
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
5. La ruta de acceso se especifica a través del atributo href.
a) Verdadero.
b) Falso.
a) Verdadero
b) Falso
a) target.
b) href.
c) link.
A) Los vínculos
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.
Imagen <img>
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten
mejorar su apariencia, o dotarla de una mayor información visual.
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no
necesita etiqueta de cierre.
<img src="imagenes/logo_animales.gif">
Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los
documentos html se encuentren en un mismo directorio, y que dentro de este directorio
existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada
a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.
Existen una serie de formatos de imagen más recomendables que otros para ser
introducidos en una página web. Esta información puedes consultarla aquí .
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al
especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su
lugar, junto con el nombre de la imagen.
Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que
nosotros deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto
alternativo Imagen gato, para ello insertamos el siguiente código:
El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los
invidentes ya que los programas lectores son capaces de leer el texto alternativo.
El atributo border puede tomar valores numéricos, que indican el grosor en píxeles
del borde.
Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a
no ser que la imagen contenga un enlace, en cuyo caso el color del borde será el
color establecido para los vínculos.
Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño
de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen,
sino que lo que varía es la visualización de la imagen en el navegador.
El valor que pueden tomar los atributos width y height ha de ser un número,
acompañado de % cuando se desee que sea en porcentaje con respecto a la página.
Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de
anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura:
El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con
los valores baseline y bottom, o con los valores texttop y top.
Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos
fundir con la línea de texto sin que por ello cree una separación demasiado grande entre la
línea donde se encuentra la imágen y las líneas superior y inferior. Por ejemplo para la imagen
de un icono de cualquier programa, de un botón, etc...
Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha
ni a la izaquierda sino colocarla en un bloque aparte).
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Insertar una imagen.
Objetivo.
Practicar las operaciones que hay que realizar para insertar una imagen.
Ejercicio 1.
2 Sustituye la línea
Con este código estarás asociando el enlace con la imagen aulaclic.jpg que se encuentra
en la directorio imagenes dentro de la carpeta animales (la carpeta donde se encuentra el
archivo inicio.htm.
Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este
color el definido para los enlaces de esta página.
En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se
mostrará el texto visita aulaclic(atributo alt).
Ejercicio 2.
1 Abre el documento menu.htm, de la carpeta originales/animales del curso.
Ejercicio 3.
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
1 Abrir el documento menu.htm, de la carpeta ejercicios_html/deportes.
Ejercicio 2: Deportes.
Ejercicio 3: Flores.
Con el atributo src indicamos qué imagen se tiene que visualizar y dónde se encuentra
(en el directorio imagenes), con el atributo alt indicamos el texto alternativo.
Con el atributo border indicamos que la imagen no tiene borde para que no salga el
borde ya que la imagen está dentro de un hiperenlace.
Ejercicio 2: Deportes
Con el atributo src indicamos qué imagen se tiene que visualizar y dónde se encuentra
(en el directorio imagenes), con el atributo alt indicamos el texto alternativo.
Ejercicio 3: Flores
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic
en el botón Resultados para ver la solución.
a) Verdadero
b) Falso
2. Existen una serie de formatos de imagen más recomendables que otros para ser
introducidos en una página web.
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero
b) Falso
a) Verdadero.
b) Falso.
a) Verdadero
b) Falso
7. El atributo width...
8. Si escribiéramos align="middle"...
9. Las imágenes...
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y
columnas, y modificar sus propiedades.
Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de gran
utilidad al mejorar notablemente las opciones de diseño.
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a
las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque
de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.
Tabla <table>
Las tablas están formadas por celdas, que son los recuadros que se obtienen como
resultado de la intersección entre una fila y una columna.
imagen y texto
COLUMNA
Texto dentro de
una celda
FILA CELDA
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas
etiquetas habrá que especificar las filas y columnas que formarán la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas
etiquetas deberán insertarse entre las etiqetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiríamos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos
especificar el número de celdas por fila, que equivale a especificar el número de columnas por
fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan
cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las
etiquetas <tr> y </tr>.
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas.
Por ejemplo, para insertar la siguiente tabla:
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Por ejemplo, para modificar la tabla de la página anterior para que quedase como
la siguiente:
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho
de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu
navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la
ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las
separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al
centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"),
que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).
Formato de las celdas
Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos
para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen
más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de
código <tr align="center"bgcolor="#0099CC"> se ha establecido el color azul como
color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color
naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por
el color verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que
esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la
fila.
Existe otro atributo que puede establecerse sobre las celdas. Se trata del
atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática
al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para
que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se
añade o no a las etiqueta <td>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>,
pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo
que se utiliza para definir los encabezados o títulos de las columnas.
Sábado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
Titulo de la tabla
Sábado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para
combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se extenderá
la celda, y a través del atributo rowspan se especifica el número de filas por las que se
extenderá la celda.
Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la
siguiente tabla:
Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero
intentaras entender el código comparándolo con la tabla que de él se obtiene.
En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla.
En este caso serían cuatro columnas. Para saber el número de columnas total de la tabla,
tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las
líneas verticales que separan las columnas entre sí.
Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho
cuatro columnas, por lo que como en la línea <th colspan="2">PERRO</th> el
atributo colspan vale dos, ya tenemos las cuatro celdas.
En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la
tercera fila habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se
corresponden con las definidas en la fila anterior.
El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es
cuestión de práctica.
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Trabajar con tablas.
Objetivo.
Practicar las operaciones que hay que realizar para modificar las propiedades de la
tabla.
Ejercicio 1.
Vamos a insertar en la página gatos.htm una tabla para colocar la imagen del gatito a la
izquierda de la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna
de la izquierda colocaremos el texto y en la columna de la derecha la imagen.
6 Detrás de la etiqueta <hr> añade el siguiente código para añadir una línea en blanco,
definir la tabla, empezar la definición de la primera fila y primera columna de la tabla. Hacemos
la tabla invisible (border="0") y que ocupe todo los ancho de la ventana (width="100%"), la
primera columna ocupará el 70% de la ventana (width="70%") :
<br>
<table width="100%" border="0">
<tr>
<td width="70%">
7 Detrás de la última etiqueta </ul> añade el siguiente código para cerrar la columna y
empezar la otra, ahora la segunda columna ocupará el 30% de la ventana ( width="30%"):
</td>
<td width="30%">
8 Detrás de la etiqueta <img> añade el siguiente código para cerrar la columna y cerrar la
fila y la tabla:
</td>
</tr>
</table>
10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen está a la
derecha del texto y si haces la ventana más pequeña, el ancho de las columnas cambia.
Ejercicio 2.
El atributo width nos permite definir la tabla de un tamaño fijo para que ese tamaño no
cambie según el tamaño de la ventana abierta.
Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca
más grueso.
El atributo align con el valor center nos permite indicar que la tabla estará centrada con
respecto a la ventana.
Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las
celdas de la tabla.
El atributo bordercolor nos permite definir el color del borde la tabla.
Para que no se nos olvide cerrar etiquetas es mejor añadir la etiqueta de cierre y
después entre la dos etiquetas añadir las otras.
4 Escribe:
</table>
La tabla tiene seis filas (contamos el número mayor de filas) y el texto contenido en ellas
está centrado tanto en horizontal como en vertical:
</tr>
Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cuál
es la fila con mayor número de columnas, tiene cuatro columnas.
Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que
indicar que esta se expande sobre cuatro columnas:
<td rowspan="2">DIFERENCIAS</td>
8 Escribe a continuación:
<td colspan="2">PERRO</td>
9 Escribe a continuación:
<td rowspan="2">HOMBRE</td>
Veamos el resultado.
Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios
según los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez
actualizando la página en tu navegador (como hiciste en el ejercicio paso a paso del tema
3).
Por último cambiaremos las tres primeras filas para que el texto contenido en ellas
tenga formato de cabecera de columna.
19 Sustituye td por th en las líneas que se encuentran entre los tres primeros pares de
etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser
títulos de columna, por lo que el texto aparecerá centrado y en negrita.
20 Comprueba que obtienes una página como la que aparece si pulsas aquí.
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
2 Modificar la página para colocar la lista de centros en una tabla como esta:
3 Rectificar la tabla para que las celdas de la primera fila sean títulos de columna.
Ejercicio 2: Deportes.
1 Abrir el documento instalaciones.htm, de la carpeta deportes.
Ejercicio 3: Flores.
3 Modificar la tabla para que la celda que contiene el texto 6 € se combine con la
celda que se encuentra debajo de ella.
Ejercicio 4: Flores.
2 Añadir una tabla para que cada palabra y la imagen ocupen el ancho de la
ventana y estén equidistantes.
Ejercicio 1: Deportes
Apartado 2 Tenemos que dejar dentro de una tabla texto que ya tenemos escrito,
lo podemos hacer de dos formas, o bien crear la tabla con sus filas y sus columnas y
después cortar y pegar el texto entre las etiquetas <td> de la tabla o bien intercalar
las etiquetas de la tabla dentro del texto ya escrito. De cualquiera de las formas
debemos definir una tabla de cuatro filas y cuatro columnas. El código deberá quedar
así:
<tr bgcolor="#CCFFCC">
<td><font size="4">DEPORTES 1</font></td>
<td><font size="4">C/Avenida 8</font></td>
<td><font size="4">Don Benito</font></td>
<td><font size="4">Badajoz</font></td>
</tr>
<tr bgcolor="#99CC99">
<td><font size="4">DEPORTES 2</font></td>
<td><font size="4">C/Fernando 5</font></td>
<td><font size="4">Madrid</font></td>
<td><font size="4">Madrid</font></td>
</tr>
<tr bgcolor="#CCFFCC">
<td><font size="4">DEPORTES 3 </font></td>
<td><font size="4">C/Deportiva 31</font></td>
<td><font size="4">Silla</font></td>
<td><font size="4">Valencia</font></td>
</tr>
</table>
Apartado 3 Buscar la primera línea en la que aparezca <tr.
Cambiar td por th en todas las etiquetas que se encuentren entre el primer par de
etiquetas <tr> y </tr>.
Ejercicio 2: Deportes
<tr bgcolor="#CCFFCC">
<td><font size="4">AEROBIC</font></td>
<td rowspan="2"><div align="center"><font size="4">3 €</font></div></td>
</tr>
<tr bgcolor="#CCFFCC">
<td><font size="4">STEP</font></td>
</tr>
Ejercicio 3: Flores
Cambiar <td> por <td rowspan="2">, para que la celda ocupe dos filas.
Como estamos ocupando una celda de la fila de abajo, tendremos que eliminar la
declaración de la celda corespondiente en la fila siguiente.
<tr>
<td><font size="4">Caja de golosinas</font></td>
</tr>
Ejercicio 4: Flores
Apartado 2 Para repartir nuestras opciones a lo ancho de la ventana lo mejor es colocar
cada opción en una celda de una tabla. Tenemos que definir una tabla de una fila y cinco
columnas y colocar cada palabra en una columna. El código deberá quedar así:
Para que las columnas se repartan a lo ancho de la ventana les asignamos a cada una
un ancho del 20%.
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en
el botón Resultados para ver la solución.
1. Las celdas se obtienen como resultado de la intersección entre una fila y una columna.
a) Verdadero
b) Falso
2. Para crear una tabla hay que insertar las etiquetas <table> y </table>.
a) Verdadero
b) Falso
3. Es necesario insertar las etiquetas <td> y </td> por cada una de las filas de la tabla.
a) Verdadero
b) Falso
6. El atributo colspan sirve para especificar el número de filas por las que se extenderá la
celda.
a) Verdadero
b) Falso
8. Los atributos...
a) Tienen más prioridad cuando son establecidos para una celda
b) Tienen más prioridad cuando son establecidos para una fila completa
c) Ninguna de las dos anteriores opciones
9. La etiqueta <th>...
A) Hace que el texto de la celda aparezca centrado y en negrita
B) Se utiliza para insertar reglas horizontales
C) Cualquiera de las dos primeras opciones
D) Ninguna de las opciones anteriores
En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio,
por lo que vemos solamente algunos conteptos básicos y ejemplos sencillos.
Como hemos visto si queremos utilizar marcos debemos crear una página con la
definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm).
Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las
etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas
que se carguen en cada uno de los marcos del conjunto de marcos.
Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:
Atributo Significado Posibles valores
un número
(acompañado de %
cuando se desee que
cols tamaño de cada una de las columnas en que se divide el documento
sea en porcentaje) por
cada columna,
separados por comas.
un número (acompañado de
% cuando se desee que sea
rows tamaño de cada una de las columnas en que se divide el documento
en porcentaje) por cada fila,
separados por comas.
yes
frameborder aparece o no el borde de los marcos
no
framespacing separación entre los marcos un número
un número, acompañado de
border grosor del borde % cuando se desee que sea
en porcentaje
bordercolor color del borde número hexadecimal
También es posible incluir asteriscos como valores para los atributos cols y rows. Este
valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana.
Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo
que quede de ventana.
Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el
alto de la ventana. En este caso concreto no haría falta poner el atributo rows.
Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres
columnas. La primera columna sería de 142 píxeles de ancho, la tercerá del 25% de la
ventana, y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana
menos 142 píxeles).
También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se
pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus
correspondientes etiquetas de cierre.
Marco <frame>
Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no
hemos visto cómo hacer que se carguen las distintas páginas en cada uno de los marcos.
Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la
etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre
las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre.
Por ejemplo, para crear el conjunto de marcos de la página que aparece si pulsas aquí,
tendríamos que escribir:
Y para crear el conjunto de marcos de la página que aparece si pulsas aquí, tendríamos
que escribir:
Esta última página está dividida en dos marcos horizontales ( rows="90,*"), estando el
inferior de ellos dividido en dos marcos verticales (cols="150,*").
<html>
<head>
...
</head>
<frameset cols="150,*">
<frame src="izquierdo.htm" name="marcoizquierdo">
<frame src="derecho.htm" name="marcoderecho">
</frameset>
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
</body>
</noframes>
</html>
Obtendríamos una página con dos marcos, que en el caso de intentar ser visualizada en
un navegador que no soportase marcos, mostraría una página con el texto Este
documento tiene marcos y tu navegador no los soporta.
Una buena solución para que el mayor número de usuarios pueda visitar nuestra página,
es crear nuevas páginas con el contenido de los documentos que deberían mostrarse en los
marcos, pero que permitan pasar de unos a otros dentro de la misma ventana.
De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un
enlace a una de estas páginas. Por ejemplo, si escribiéramos el siguiente código:
...
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
<a href="sinmarcos.htm">Pulsa aqui para visualizar la página sin
marcos.</a>
</body>
</noframes>
</html>
Cuando la página intentara ser visualizada en un navegador que no soportase los marcos,
aparecería el enlace Pulsa aqui para visualizar la página sin marcos. a una ventana sin
marcos.
_blank:
_parent:
_self:
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir
que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también podrás utilizar los nombres de los
distintos marcos de la página. Por ejemplo, si tuvieramos un marco con el
nombre marcoderecho, podríamos insertar el enlace:
Podemos añadir
todos estos nuevos
destinos a cualquier
elemento de la página
que contenga algún
enlace, ya sea texto,
una imágen, un mapa de
imagen, un elemento
Flash, etc.
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Crear conjunto de marcos.
Objetivo.
Practicar las operaciones que hay que realizar para crear un conjunto de marcos.
Con la segunda línea, estarás especificando las propiedades del primer marco. Este
marco se llamará marcoizquierdo, no se mostrarán sus bordes (frameborder="no"), y
el usuario no podrá modifciar su tamaño (noresize). En este marco se cargará el
documento menu.htm, y cuando éste no pueda ser mostrado en su totalidad, no
aparecerán las barras de desplazamiento (scrolling="NO").
Con la tercera línea, estarás especificando las propiedades del segundo marco. Este
marco se llamará marcoderecho, y no se mostrarán sus bordes (frameborder="no"). En
este marco se cargará el documento inicio.htm.
<noframes>
<body bgcolor="#99CC99">
Esta página tiene marcos, y tu navegador no los soporta
</body>
</noframes>
Este código será el utilizado por los navegadores que no soportan los marcos. Cuando un
navegador no soporte los marcos, mostrará una página de color verde
(<body bgcolor="#99CC99">), con el texto Esta página tiene marcos, y tu navegador
no los soporta.
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
1 Abrir el documento marcos.htm, de la carpeta originales/deportes del curso.
Ejercicio 2: Flores.
Ejercicio 1: Deportes
Ejercicio 2: Flores
<html>
<head>
<title>Marcos</title>
</head>
<frameset rows="100,*" cols="*" framespacing="0" frameborder="no" border="0"
>
<frame src="menu.htm" name="marcopadre" frameborder="no" scrolling="no" n
oresize id="marcopadre">
<frame src="inicio.htm" name="marcoinferior" frameborder="no" scrolling="auto
" id="marcoinferior">
</frameset>
<noframes>
<body>
Esta página tiene marcos, y tu navegador no los soporta
</body>
</noframes>
</html>
1. Los marcos o frames sirven para distribuir mejor los datos de las páginas.
a) Verdadero
b) Falso
3. Cada uno de los marcos de una página contiene un documento HTML individual.
a) Verdadero
b) Falso
5. Las etiquetas <body> y </body> tienen que ir entre las etiquetas <noframes> y
</noframes>.
a) Verdadero.
b) Falso.
8. El atributo noresize...
a) Se utiliza para insertar un nombre para el marco
b) Impide que el usuario modifique el tamaño del marco
c) Cualquiera de las dos anteriores opciones
9. La etiqueta <frame>...
A) Se utiliza para indicar qué documento se cargará en el marco
B) Se utiliza para indicar si aparecerá la barra de desplazamiento para ese marco
C) Cualquiera de las dos primeras opciones
D) Ninguna de las opciones anteriores
En este tema vamos a ver qué son los formularios, para qué se utilizan, y qué elementos
pueden contener.
Formulario <form>
Un formulario es un
elemento que permite recoger
datos introducidos por el
usuario.
Es muy recomendable
utilizar tablas para organizar
los elementos de los
formularios. Utilizando tablas
se consigue una mejor
distribución de los elementos
del formulario, lo que facilita su
comprensión y mejora su
apariencia.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas
etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la
etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario,
o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por
defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables del
formulario. Su valor puede ser get o post.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario
manda datos que deben ser almacenados en una base de datos.
Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen
utilizarse para que incluyan comentarios.
Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las
etiquetas <textarea> y </textarea>.
El atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes
a cada uno de los elementos de un formulario, para poder identificarlos a la hora de
procesarlos.
El atributo rows indica el número de líneas que podrán ser visualizadas en el área de
texto por lo que determina al alto del área de texto.
El atributo cols indica el número de caracteres por línea que podrán ser visualizados en
el área de texto por lo que determina al ancho del área de texto.
El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el
cual será evaluado, y el atributo type indica el tipo de elemento de entrada.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que
pueden definirse para cada uno de ellos.
Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el campo
de texto, determina el ancho de la caja.
Campo de contraseña:
Para insertar un campo de contraseña, el atributo type debe tener el valor password.
El resto de atributos son los mismos que para un campo de texto normal. La única
diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas
como asteriscos.
Botón:
Para insertar un botón, el atributo type debe tener el valor submit, restore o button.
Casilla de verificación:
Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente.
Este atributo no toma valores.
Botón de opción:
Para insertar un botón de opción, el atributo type debe tener el valor radio.
El atributo value indica el valor asociado al botón de opción. Es necesario poner este
atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá activado inicialmente.
Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario pueda
tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción
con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos
botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor
será el que tendrá la variable.
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será
igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa
que lo que ponemos como valor no aparece escrito en la página es un datos interno.
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será
igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa
que lo que ponemos como valor no aparece escrito en la página es un datos interno.
Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que
no ve el usuario, en este caso habría que incluir el atributo value para que el formulario pase
ese valor al programa que recoge los datos del formulario.
Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este
tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos
envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre
agradables.
Unidad 8. Formularios (III)
El atributo name indica el nombre del menú o lista será el nombre de la variable que
contendrá el valor seleccionado.
El atributo size indica el número de elementos de la lista que pueden ser visualizados al
mismo tiempo, determina el alto de la lista.
La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos
de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores.
La aparición del atributo disabled indica que la lista estará desactivada, por lo que el
usuario no podrá seleccionar sus elementos. Este atributo tampoco toma valores.
La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este
atributo no toma valores.
<select name="mascota">
<option selected>--- Elige animal ---</option>
<option>Perro</option>
<option>Gato</option>
</select>
---Elige animales---
Loro
Perro
Objetivo.
Practicar las operaciones que hay que realizar para insertar algunos objetos de
formulario.
<select name="animal">
<option selected>--- Elige opción ---</option>
<option>Perro</option>
<option>Gato</option>
<option>Otros</option>
</select>
Con este código estarás insertando un menú, llamado animal, que tendrá
cuatro opciones (--- Elige opción ---, Perro, Gato, Otros).
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
3 Modificar el primer botón de opción para que tenga el valor si, y esté activado
inicialmente.
Ejercicio 2: Flores.
Ejercicio 1: Deportes
Añadir value="no".
Ejercicio 2: Flores
Apartado 3 Añadir delante de la etiqueta </body> el siguiente código:
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en
el botón Resultados para ver la solución.
1. Los formularios no pueden utilizarse para conocer las opiniones, dudas, y otra serie de
datos sobre los usuarios.
a) Verdadero
b) Falso
3. El atributo method indica el metodo mediante el que se transferirán las variables del
formulario.
a) Verdadero
b) Falso
5. Las áreas de texto permiten a los usuarios insertar una sola línea de texto.
a) Verdadero.
b) Falso.
6. El atributo cols indica el número de caracteres por línea que podrán ser visualizados.
a) Verdadero
b) Falso
7. El atributo type...
a) Indica el tamaño del elemento de entrada
b) Indica el nombre del elemento de entrada
c) Indica el tipo de elemento de entrada
Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al
contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo
de sonido supone una carga que puede ralentizar la visualización de la página y además
muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet,
por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas
ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse.
Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea
de mala calidad.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido.
Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que
asignarle el valor infinite o -1.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse
la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las
etiquetas <embed> y </embed> no hay que insertar nada.
A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.
No hay que olvidar que para los archivos de audio también se mostrarán los controles de
reproducción.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su
valor estrue, se ocultan los controles de reproducción.
O también:
Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en
las páginas iniciales de los sitios web, y se utilizan a modo de presentación hacia los
usuarios. También pueden utilizarse como botones de las barras de navegación.
Las animaciones Flash se insertan del mismo modo que los archivos de audio y de
vídeo, a través de la etiqueta <embed>, pero debido a que tiene más posibilidades de
que se produzcan incompatibilidades entre los distintos navegadores, necesita
también de la etiqueta <object>.
Como el uso de la etiqueta <object> puede
resultar bastante complicado, vamos a ver
solamente un caso concreto para la inserción
de un archivo SWF.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/s
hockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="200" he
ight="100">
<param name="movie" value="graficos/pelicula.swf">
<param name="quality" value="high">
<embed src="graficos/pelicula.swf" width="200" height="100" qu
ality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>
En primer lugar vamos a analizar la etiqueta <embed>. En ella aparecen tres atributos
que no conocíamos.
A través del atributo quality se especifica la calidad con la que se reproducirá la animación
Flash. Puede valer high (alta), autolow (baja automática), o low (baja). Si no se incluye
este atributo, se considera que la calidad será automáticamente alta.
A través del atributo type se especifica el tipo de fichero, para que el navegador pueda
saber qué tipo de programa necesita ejecutar para reproducir la animación.
A través del atributo classid se identifica al objeto. Cuando el objeto es una animación
Flash, el atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.
Los atributos width y height se utilizan del mismo modo, y deben tener el mismo valor,
que en la etiqueta <embed>.
Por último, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para especificar
los valores necesarios para la inicialización de un objeto.
Por ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece
especificado por el atributo src, es necesario incluir también una etiqueta <param>, en la
que name tenga el valor movie.
Para hacer que una animación no se reproduzca automáticamente, habrá que indicarlo
mediante el atributo play, que debe incluirse dentro de la etiqueta <embed>.
El atributo play puede valer true o false. Para que la animación no se reproduzca
automáticamente, el valor de play debe ser false.
Lo mismo ocurre para hacer que la reproducción no sea continua. Habrá que insertar el
atributo loop en la etiqueta <embed>.
El atributo loop puede valer true o false. Para que la animación no se reproduzca
continuamente, el valor de loop debe ser false. De este modo, solo se reproducirá una vez.
Objetivo.
Practicar las operaciones que hay que realizar para insertar sonido de fondo.
Ahora vamos a sustituir las palabras INICIO PERROS GATOS y CONSULTAS por
botones Flash.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cab
s/flash/swflash.cab#version=6,0,29,0"width="100" height="23">
<param name="movie" value="binicio.swf">
<param name="quality" value="high">
<embed src="binicio.swf" width="100" height="23" quality="high"pluginspage="
http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" >
</embed>
</object>
Nota: se ha escrito en el color de los valores del usuario unicamente los valores que
cambian al insertar un botón Flash.
3 Sustituye la palabra PERROS por el siguiente código:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cab
s/flash/swflash.cab#version=6,0,29,0"width="100" height="23">
<param name="movie" value="bperros.swf">
<param name="quality" value="high">
<embed src="bperros.swf" width="100" height="23" quality="high"pluginspage="
http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" >
</embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cab
s/flash/swflash.cab#version=6,0,29,0"width="100" height="23">
<param name="movie" value="bgatos.swf">
<param name="quality" value="high">
<embed src="bgatos.swf" width="100" height="23" quality="high"pluginspage="
http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" base=".">
</embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cab
s/flash/swflash.cab#version=6,0,29,0"width="100" height="23">
<param name="movie" value="bconsultas.swf">
<param name="quality" value="high">
<embed src="bconsultas.swf" width="100" height="23" quality="high"pluginspag
e="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" base=".">
</embed>
</object>
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
Ejercicio 2: Deportes.
Ejercicio 3: Flores.
Ejercicio 1: Deportes
Apartado 2 Después del cierre del párrafo Somos una... añade el siguiente código:
<br>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="342" height="57">
<param name="movie" value="imagenes/deportes.swf">
<param name="quality" value="high">
<embed src="imagenes/deportes.swf" width="342" height="57" quality="high"plu
ginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" >
</embed>
</object>
</div>
<br>
Ejercicio 2: Deportes
Apartado 2 Sustituye la palabra QUIENES SOMOS por el siguiente código:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="116" height="32">
<param name="BGCOLOR" value="#0099CC">
<param name="movie" value="imagenes/bquienes.swf">
<param name="quality" value="high">
<embed src="imagenes/bquienes.swf" width="116" height="32" quality="high"plu
ginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" >
</embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="116" height="32">
<param name="BGCOLOR" value="#0099CC">
<param name="movie" value="imagenes/bdonde.swf">
<param name="quality" value="high">
<embed src="imagenes/bdonde.swf" width="116" height="32" quality="high"plugi
nspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" >
</embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="116" height="32">
<param name="BGCOLOR" value="#0099CC">
<param name="movie" value="imagenes/binstalaciones.swf">
<param name="quality" value="high">
<embed src="imagenes/binstalaciones.swf" width="116" height="32" quality="hig
h"pluginspage="http://www.macromedia.com/go/getflashplayer" type="applicatio
n/x-shockwave-flash" >
</embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="116" height="32">
<param name="BGCOLOR" value="#0099CC">
<param name="movie" value="imagenes/breservas.swf">
<param name="quality" value="high">
<embed src="imagenes/breservas.swf" width="116" height="32" quality="high"pl
uginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash" >
</embed>
</object>
Ejercicio 3: Flores
Apartado 2 Insertar la
línea <embed src="varios/audioflores.MID" autostart="true" loop="false" width="0
"height="0"></embed> debajo de la etiqueta<body>. Para que se ejecute una sola vez
hemos puesto el atributo loop="false"
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="100" height="23">
<param name="BGCOLOR" value="#FFEAEA">
<param name="movie" value="imagenes/inicio.swf">
<param name="quality" value="high">
<embed src="imagenes/inicio.swf" width="100" height="23" quality="high"plugin
spage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash"bgcolor="#FFEAEA">
</embed>
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,29,0"width="100" height="23">
<param name="BGCOLOR" value="#FFEAEA">
<param name="movie" value="imagenes/productos.swf">
<param name="quality" value="high">
<embed src="imagenes/productos.swf" width="100" height="23" quality="high"pl
uginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash"bgcolor="#FFEAEA" >
</embed>
</object>
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en
el botón Resultados para ver la solución.
2. Al incluir un archivo de audio, es preferible que no ocupe mucho espacio, aunque esto
implique una pérdida de calidad.
a) Verdadero
b) Falso
3. La etiqueta <bgsound> puede situarse en cualquier parte del documento.
a) Verdadero
b) Falso
4. Los formatos de vídeo que no deben utilizarse en Internet son el AVI, el MPEG y el
MOV.
a) Verdadero
b) Falso
7. El atributo hidden...
a) Permite reproducir un vídeo de forma infinita
b) Puede valer true o false.
c) Cualquiera de las dos opciones anteriores
8. La etiqueta <object>...
a) Puede utilizarse para insertar diferentes objetos dentro de la página
b) Intenta que no se produzcan incompatibilidades por las distintas etiquetas soportadas
por unos u otros navegadores
c) Cualquiera de las dos anteriores opciones
9. La etiqueta <param>...
A) Se utiliza para especificar los valores necesarios para la inicialización de un objeto
B) Necesita etiqueta de cierre
C) Cualquiera de las dos primeras opciones
D) Ninguna de las opciones anteriores
Vamos a ver algunas de las características básicas sobre las capas, para poder insertarlas
en nuestras páginas.
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la
página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y
solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya vimos,
sirven para agrupar bloques de texto.
A través de la propiedad clip puede establecerse el área de la capa que podrá ser
visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles.
Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la
palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior,
hasta la que no se visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el
contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el
contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que indica
que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre
comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las
propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de
las etiquetas <div> y </div>.
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es compatible con
un mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el
navegador Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos, es que
las propiedades de la capa se especifican como atributos independientes, y no como valores
dentro del atributo style.
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
2 Insertar el último párrafo Este mes... dentro de una capa de 509 por 85 píxeles,
que se llame capaoferta, que tenga como color de fondo el color #CCFF99 y que se
muestre en la posición en la que ha sido insertada dentro del código.
Ejercicio 2: Flores.
2 Cambiar el texto de la oferta y colocarlo en una capa de 182px por 62px con un
fondo color #FFFF66 y que sea visible. Incluir el argumento visibility para que cada
semana según queramos la oferta o no sólo tengamos que cambiar el valor del
argumento en vez de escribir otra vez el texto de la oferta con sus colores. La página
debería quedar así.
Ejercicio 1: Deportes
Ejercicio 2: Flores
Apartado 2 Sustituir la palabra OFERTA por el siguiente código :
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en
el botón Resultados para ver la solución.
2. Podemos insertar una capa a través de las etiquetas <div>, <span> o <layer>.
a) Verdadero
b) Falso
3. Las etiquetas <layer> y </layer> no pueden ser reconocidas por el navegador Netscape.
a) Verdadero
b) Falso
5. Las propiedades de las capas insertadas con <div> se especifican a través del atributo
style.
a) Verdadero.
b) Falso.
7. La propiedad z-index...
a) Indica el tamaño de la capa
b) Indica el índice de la capa dentro de la página
c) Indica la altura de la capa
8. Una capa...
a) Podrá ser solapada por aquellas capas cuyo índice sea mayor
b) Puede estar oculta
c) Cualquiera de las dos anteriores opciones
Unidad 11. JavaScript (I)
En este tema vamos a ver qué son los lenguajes de script y cómo hacer llamadas
a JavaScript. No se pretende enseñar Javascript ya que esto necesitaría un curso entero.
Lenguajes de script
Los lenguajes de script, también conocidos como lenguajes de macros, son lenguajes que
sólo funcionan en las aplicaciones para las que han sido creados.
Son lenguajes para ser interpretados, no para ser compilados, por lo que no generan
ningún archivo ejecutable.
Los lenguajes de script pretenden ser sencillos a la hora de programar. Al mismo tiempo,
lo normal es que los programas no sean muy extensos, ni tampoco muy complicados.
Dos de los lenguajes de script más utilizados hoy en día son JavaScript y VBScript.
El lenguaje VBScript fue creado por Microsoft, por lo que puede ser interpretado por todas
sus aplicaciones. Pero no es recomendable utilizar este lenguaje de script en nuestras
páginas, ya que solamente podría ser interpretado por el navegador Internet Explorer, y hay
muchos usuarios que utilizan navegadores diferentes.
Es más recomendable utilizar el lenguaje JavaScript, creado por Netscape, ya que puede
ser reconocido por un mayor número de navegadores.
Por ejemplo, podemos crear funciones que permitan mostrar y ocultar capas. Situa el
puntero sobre la imagen del gato para ver lo que ocurre.
Si utilizáramos un editor visual, como Dreamweaver, podríamos insertar algunos
comportamientos de este tipo sin la necesidad de escribir ni una sola línea de código
JavaScript. Esta aplicación permite insertar comportamientos a través de menús y paneles,
generando automáticamente el código JavaScript necesario.
JavaScript <script>
Para insertar funciones JavaScript en un documento, es necesario insertar las
etiquetas <script> y </script> dentro de la cabecera (entre las
etiquetas <head> y </head>) o dentro del cuerpo de la página.
A través del atributo language hay que especificar el lenguaje de script, que en este caso
será JavaScript.
Entre las etiquetas <script> y </script> habrá que insertar las funciones JavaScript.
En las funciones no hay que insertar caracteres especiales, debido a un fallo de Netscape
corremos el riesgo de que al ejecutarse la función en un ordenador con un juego de caracteres
distinto se produzcan fallos.
<script>
<!--
function Muestramensaje()
{
alert("Esto es un mensaje, activado por una función
javascript");
}
//-->
</script>
La función que hemos insertado es una función muy sencilla, que muestra un mensaje de
alerta.
Obtendríamos una imagen como la que aparece a continuación, que al ser pulsada llama
a la función. Pulsa sobre la imagen para ver lo que ocurre:
A través del atributo onClick hemos definido la función que será llamada al pulsarse sobre
el objeto.
Podemos utilizar muchos otros atributos para llamar a funciones, como pueden
ser onDblClick (al hacer doble clic), onMouseOver (mientras el cursor este encima)
o onMouseOut (cuando el cursor deje de estar encima).
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Llamadas a javascript.
Practicar las operaciones que hay que realizar para hacer llamadas a funciones
javascript.
4 Busca la
línea <a href="#"><img src="imagenes/gatito.gif" alt="gatito" border="0"></a>.
Este código hace referencia a la imagen gatito.gif, que tiene borde 0 y el texto
alternativo gatito.
6 Busca la
línea <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font
></a></p>, que se encuentra casi al final del documento.
Este código hace referencia a un vínculo vacío (<a href="#">) con el texto Cerrar.
Al igual que en el punto anterior, con este código, estarás llamando a la función
javascript MM_showHideLayers, pero para cambiar la visibilidad de la
capa gatosemana por el valor hide (ocultar).
La llamada a la función se realizará cuando hagas clic sobre el texto ( onClick). De esta
manera cuando hagas clic sobre el texto cerrar se esconderá la capa.
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
1 Abrir el documento menu.htm, de la carpeta deportes.
2 Establecer una llamada a la función mensaje, para que cuando se pulse sobre la
imagen email.gif se ejecute dicha función. La función tiene el siguiente código:
Ejercicio 2: Flores.
2 Establecer una llamada a la función mensaje, para que cuando se pulse sobre el
botón Enviar se ejecute dicha función y aparezca el mensaje Recibirás un aviso
cuando se haya realizado la entrega del pedido.
Ejercicio 1: Deportes
Escribir onClick="mensaje()" delante del símbolo > de cierre de la etiqueta img con
esto se llamará a la función cada vez que el usuario haga clic sobre la imagen.
Sólo nos falta incluir el código de la función delante de la etiqueta </head> y encerrado
entre etiquetas <script de la siguiente forma:
Ejercicio 2: Flores
Sólo nos falta incluir el código de la función delante de la etiqueta </head> y encerrado
entre etiquetas <script de la siguiente forma:
4. El lenguaje JavaScript puede ser reconocido por un mayor número de navegadores que
VBScript.
a) Verdadero
b) Falso
En este tema vamos a ver qué son las hojas de estilo, y cómo trabajar con ellas.
Introducción
Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización
automática.
Se usan principalmente para definir estilos que luego se aplicarán a las páginas de
nuestro sitio, incluso a veces permiten definir características que no permiten definir
los estilos HTML, como el color de fondo para el texto por ejemplo.
Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el
Bloc de notas, y pueden guardarse con la extensión TXT.
Para poder incluir las propiedades de una hoja de estilo en un documento, hay que
vincularla a él. Un documento puede tener varias hojas de estilo vinculadas.
A través del atributo rel se tiene que especificar que se está vinculando una hoja de
estilo, por lo que su valor ha de ser stylesheet.
A través del atributo type se tiene que especificar que el archivo es de texto, con
sintaxis CSS, por lo que su valor ha de ser text/css.
Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente
código.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >
Esto es debido a que se está especificando un estilo, pero sin vincular ninguna hoja de
estilo a la página.
Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es muy similar.
En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de
propiedades (en minúsculas) que se corresponden con dicho estilo. Cada una de estas
propiedades tiene que tener un punto y coma detrás, y los valores se asignan con el
símbolo : (dos puntos).
El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una
etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un
punto, o por el nombre de una etiqueta seguida de un punto.
En cambio, no existe ninguna etiqueta <mitexto>, por lo que para aplicar este estilo a
algún elemento de la página habría que indicarlo de algún modo.
Para aplicar este estilo a un elemento, habría que insertar el atributo class en su etiqueta.
Por ejemplo, para aplicar ese estilo al siguiente párrafo del documento:
Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta, como
podría ser en este caso una palabra del párrafo, sería necesario incluir la
etiqueta <span> (que agrupa bloques, sin producir un cambio de línea). Por ejemplo, para
aplicar el estilo únicamente a la palabra estilo, habría que escribir:
Vamos a ver algunas propiedades que pueden especificarse en los estilos, así como los
valores que pueden tomar.
Familia de la fuente:
La propiedad es font-family.
Puede tomar como valor varios nombres de fuentes, separados por comas, como pueden
ser arial, helvetica, etc. La ventana de definir una familia de fuentes es que si el ordenador
del visitante no tiene instalada la primera fuente, entonces se aplicará la segunda, así
sucesivamente hasta encontrar una de las fuentes.
La propiedad es font-weight.
Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o
un número del 100 al 900.
Tamaño de la fuente:
La propiedad es font-size.
La propiedad es line-height.
La propiedad es letter-spacing.
Estilo de la fuente:
La propiedad es font-style.
Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.
Decoración de la fuente:
La propiedad es text-decoration.
Puede tomar como valor none (ninguno), underline (subrayado), line-through (una
línea encima), overline (tachado) oblink (parpadeo).
Transformar el texto:
La propiedad es text-transform.
Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en
mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en minúsculas).
La propiedad es text-align.
Puede tomar como valor center (centrado), left (izquierda), right (derecha)
o justify (justificado).
La propiedad es text-indent.
Color:
La propiedad es color.
Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los indicados
por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo visitado) de la
etiqueta <body>.
Color de fondo:
La propiedad es background-color.
Imagen de fondo:
La propiedad es background-image.
Márgenes:
Pueden tomar como valor un número (cuatro números separados por espacios en el caso
de margin).
Ancho de bordes:
La propiedad es border-width.
La propiedad es border-color.
No hay que olvidar, en el caso de los valores numéricos, especificar la unidad de medida
a utilizar: cm (centímetros), pt(puntos), px (píxeles), o % (porcentaje).
Existen muchas otras propiedades además de éstas. En el tema de capas puedes consultar
las propiedades que se pueden definir sobre ellas en las hojas de estilo (z-index, visibility,
etc.).
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Crear hoja de estilos.
Objetivo.
Practicar las operaciones que hay que realizar para crear una hoja de estilos.
Cierra el navegador.
Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados
a continuación.
Ejercicio 1: Deportes.
Ejercicio 2: Flores.
Ejercicio 1: Deportes
Apartado 5 Para que se reconozcan los estilos debemos relacionar la página con la hoja
de estilos:
Ejercicio 2: Flores
Apartado 5 Insertar la
línea <link href="estilosf.txt" rel="stylesheet" type="text/css"> entre las
etiquetas <head> y </head>.
En este caso como no queremos aplicar el estilo a todo el párrafo, añadiremos una
etiqueta <Span>:
Sustituir la línea
Por la línea
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en
el botón Resultados para ver la solución.
1. Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización
automática.
a) Verdadero
b) Falso
2. Las hojas de estilo permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo.
a) Verdadero
b) Falso
4. Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link>.
a) Verdadero
b) Falso
7. El nombre de un estilo...
a) Puede ser un nombre inventado por nosotros
b) Puede ser el nombre de una etiqueta HTML
c) Cualquiera de las dos anteriores opciones
9. La propiedad text-decoration...
A) Hace referencia al color del texto
B) Hace referencia a la decoración del texto
C) Cualquiera de las dos primeras opciones
D) Ninguna de las opciones anteriores
Pág. ev.12
En este tema vamos a ver qué son las páginas web dinámicas, y qué lenguajes nos
permitirán crearlas.
HTML dinámico
Una página dinámica es una página que permite al usuario interactuar con ella, y que
contiene efectos especiales.
Para crear una página de este tipo no basta con programar en HTML, ya que este lenguaje
es muy limitado. Es necesario combinar HTML con otros lenguajes, como JavaScript,
VBScript, Java, ASP, PHP, etc.
También puede hacerse uso de capas, de animaciones Flash, de applets java y de hojas
de estilo CSS.
Una conocida marca, poseedora de un programa que permite "dar vida" a las páginas web,
pidió explicaciones a un webmaster tras visitar su página web. Pensaron que el webmaster
estaba utilizando su programa y habían comprobado que no figuraba como comprador en sus
archivos.
Programación web
En el tema anterior hablamos de JavaScript y VBScript, dos lenguajes de programación
web.
Estos lenguajes son interpretados y ejecutados directamente por el navegador del usuario
que visualiza la página, pero existen otros lenguajes que son interpretados por el servidor,
como es el caso de ASP, PHP o JSP (Java).
Cuando un usuario pretende visualizar una página, el servidor ejecuta los scripts y genera
otra página como resultado. Esta nueva página sólamente contiene HTML, y es la que
visualiza el navegador del usuario.
Esto evita que se puedan producir errores al interpretar el código, como ocurre con
VBScript si intenta ser interpretado por un navegador que no sea Internet Explorer.
Otras ventajas que proporciona programar con lenguajes interpretados por el servidor, es
que los usuarios no tienen acceso al código original, por lo que los programas estarán
protegidos ante plagios.
Los lenguajes de este tipo más utilizados hoy en día son ASP y PHP.
El lenguaje ASP (Active Server Pages), al igual que VBScript, fue creado por Microsoft.
Consiste en incluir instrucciones Visual Basic Script o Jscript dentro del documento HTML.
ASP tiene un gran inconveniente, ya que precisa que el servidor funcione sobre Windows
NT o 2000.
XML
El comité W3C comenzó a desarrollar nuevas versiones de HTML para permitir nuevas
posibilidades a la hora de programar, y creó el lenguaje XML (Extensible Markup
Language).
Aunque los navegadores aún no soportan toda la potencia de XML, cada vez está siendo
más utilizado, ya que aporta muchas ventajas.
XML es un lenguaje comprensible para las personas. Los documentos escritos en este
lenguaje pueden leerse, crearse y modificarse de forma sencilla, utilizando cualquier editor
de texto.
Pero no existe ninguna DTD que defina la estructura y el contenido de un documento XML.
En realidad, XML es una versión resumida del SGML, que descarta aquellas partes del
SGML que raramente se utilizan. Por ello, XML es más sencillo que SGML, y permite definir
nuestros propios tipos de documentos, con nuestras propias etiquetas.
<?xml version="1.0"?>
<cdaudio>
<grupo>No Doubt</grupo>
<titulo>Tragic Kingdom</titulo>
<publicacion>1995</publicacion>
<precio cantidad="16" moneda="euro"/>
<descuento porcentaje="20"/>
<enlacecanciones href="tragickingdom.htm"/>
</cdaudio>
A simple vista, es más sencilla la programación con XML. Cualquier programa podrá
trabajar de forma más eficiente con XML..
Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en
el botón Resultados para ver la solución.
1. Una página dinámica es una página que permite al usuario interactuar con ella.
a) Verdadero
b) Falso
2. El lenguaje ASP (Active Server Pages), al igual que VBScript, fue creado por
Microsoft.
a) Verdadero
b) Falso
5. ASP...
a) Precisa que el servidor funcione sobre Linux
b) Precisa que el servidor funcione sobre Unix
c) Precisa que el servidor funcione sobre Windows NT o 2000
7. ASP y PHP...
a) Son compilados por el servidor
b) Son interpretados por el navegador del usuario
c) Son interpretados por el servidor
8. DHTML...
a) Significa HTML dinámico
b) Es la combinación de capas, animaciones Flash, applets java, hojas de estilo CSS y
otros lenguajes de programación
c) Cualquiera de las dos primeras opciones
d) Ninguna de las opciones anteriores
9. XML...
a) Es una versión resumida del SGML
b) Permite definir nuestros propios tipos de documentos
c) Cualquiera de las dos primeras opciones
d) Ninguna de las opciones anteriores