Curso completo de HTML

Jorge Ferrer

Víctor García

Rodrigo García

Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo en una guía didáctica para aprender a hacer páginas web. No se requieren más que conocimientos básicos de informática para llevarlo a cabo y se cubren desde los aspectos más básicos de HTML hasta los más avanzados. Todo ello resaltando en todo momento las partes más importantes de este lenguaje y la mejor forma de emplearlo. Esperamos que lo disfrutes.

Aviso Legal
Tabla de contenidos
Introducción al lenguaje HTML
1. Introducción
2. Primeros pasos con HTML
3. Conclusión
La primera página Web
1. Párrafos en HTML
2. Cómo insertar imágenes en una página.
3. Cómo crear enlaces hipertexto.
4. PRÁCTICA 1: La página web de "La chistera"
5. Anclas
Formato de texto y Caracteres especiales
1. Formato de texto
2. La etiqueta FONT.
3. Texto preformateado.
4. Acentos y otros caracteres especiales
Listas y Comentarios en HTML
1. Listas en HTML
2. Comentarios en HTML
3. Práctica 2: Un sitio web completo.
Imágenes y color en el WWW
1. Usando color en el WWW.
2. Cómo cambiar la apariencia de una página.
3. Imágenes en las páginas Web.
4. Cómo cambiar la apariencia de las imágenes
5. Alternativas a las imágenes inline
6. Mejoras en las imágenes
Creación de tablas HTML
1. Cómo se crea una tabla
2. Alineamiento de tablas
3. Alineamiento de celdas y filas
4. Ancho de tablas y celdas
5. Celdas que abarcan varias filas o columnas
6. Márgenes y separación de celdas
7. Anidamiento
8. Práctica 3 - Tabla de Datos.
9. Práctica 4 - Página Web con una estructura creada con tablas.
HTML avanzado
1. Estándares y extensiones del lenguaje HTML
2. Extensiones a las listas
3. Alineamiento
4. La etiqueta META
5. Otras etiquetas del lenguaje HTML 3.2
Frames, las ventanas llegan al WWW
1. El atributo TARGET
2. La etiqueta BASE
3. Creación de páginas con frames
4. Creación del documento de definición de frames
5. Página completa con frames
6. Atributos de la etiqueta FRAME
7. Compatibilidad: NOFRAME
8. Anidamiento de framesets
9. Bordes de los frames
10. Valores especiales del atributo TARGET
11. Práctica 5: Web de Los Alpes con frames
12. Frames flotantes
Vídeos, Sonido y Multimedia
1. Sonido vídeo y otros ficheros externos
2. Multimedia Inline
3. Plug-ins y objetos incrustados
Applets de Java y Controles ActiveX
1. Java en las Páginas Web.
2. Inserción de Applets Java.
3. ActiveX, la tecnología del futuro.
Formularios.
1. Formularios en HTML.
2. Controles de Formularios.
3. OTROS CONTROLES
4. PRÁCTICA 6-FORMULARIO PARA "Los Alpes"
5. COMO USAR LOS DATOS DE UN FORMULARIO
6. ENVÍO DE FICHEROS USANDO FORMULARIOS
Tabla de figuras
1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto KDE.
1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una página Web
1.3. Algunos editores WYSIWYG permiten, además, modificar el código HTML directamente.
1.4. Los navegadores en modo texto como Lynx también pueden mostrar páginas Web gracias al carácter descriptivo de HTML.
1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.
1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.
2.1. Estructura de bloques de un documento HTML.
2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.
2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta <TITLE> .
2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer.
2.6. Distintos tipos de encabezados vistos con Netscape Navigator
2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos.
2.1. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.
2.2. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo 'size'
2.3. Ejemplo de un párrafo con un salto de línea y la división del mismo texto en dos párrafos.
2.4. Con el atributo 'align' se pueden crear párrafos alineados a la derecha, centrados o alineados a la izquierda.
2.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, grosor alineamiento y sombra de la línea horizontal.
2.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan a otro autor. Los navegadores suelen introducir un sangrado en este texto.
2.7. En esta página se observa como al final de la página se han incluido datos de los autores y de la página. Para ello se ha usado la etiqueta <address>.
2.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra página como por ejemplo el verso de Lorca de la figura 2.6.
2.9. Al insertar una imagen esta se entremezcla con el texto. Cuando la imagen es pequeña se crean interesantes efectos como este.
2.10. Al pulsar sobre un enlace hipertexto saltaremos a otra página de Internet. Los navegadores resaltan estos enlaces para que sea fácil identificarlos.
2.11. Página que agrupa todos los enlaces de un sitio web
2.12. La práctica 1 propone realizar un página a partir de lo mostrado en esta figura.
2.13. Estructura de los enlaces normales. Al pulsar sobre el texto activo no podemos elegir el lugar de la página al que saltamos, iremos siempre al comienzo.
2.14. En la sección superior puede verse ver una serie de enlaces (las letras mayúsculas) a anclas. En la sección superior se muestra el lugar al que se ha saltado al pulsar sobre la letra S. Podemos deducir que antes de la palabra Salud hay un ancla.
2.15. Estructura de un enlace a un ancla de la misma página. Cuando pulsamos sobre el enlace el navegador nos transporta hasta el lugar de la página donde está el ancla.
2.16. Estructura de un enlace a un ancla de otra página. Cuando pulsamos sobre el enlace vamos hasta otra página, pero no al comienzo sino al lugar concreto donde está el ancla.
2.17. Con el atributo 'title' podemos incluir información adicional sobre el Link. Explorer mostrará esta información con un bocadillo.
3.1. Con el tipo de letra Times New Roman no todas las letras ocupan lo mismo.
3.2. Con el tipo de letra Courier todas las letras ocupan lo mismo (monoespaciadas)
3.3. Los navegadores gráficos como Explorer pueden mostrar perfectamente todos los tipos de estilos lógicos como vemos en esta figura.
3.4. El navegador Lynx sólo puede mostrar texto y usa los medios a su alcance para formatear el texto que debería ser negrita, cursiva...
3.5. En esta figura observamos los estilos lógicos con Explorer. La gran mayoría de ellos son mostrados como letra en negrita o cursiva.
3.6. Usando estilos lógicos no se nota tanto la diferencia entre Explorer y Lynx aunque los medios de este sean más limitados.
3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del texto.
3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del texto.
3.8. Los tamaños del texto que hallamos modificado usando el método relativo se calcularán a partir del al tamaño por defecto del texto normal, pero sin pasar nunca de 7.
3.9. Gracias a la etiqueta FONT y a su atributo COLOR nuestras páginas tomarán un colorido totalmente diferente.
3.10. Como se puede ver se pueden crear firmas muy originales usando únicamente caracteres y sin necesidad de imágenes.
3.11. Si no usamos la etiqueta de texto preformateado la figura construida con caracteres se convertirá en algo ilegible.
3.12. Una entidad de caracter con nombre tiene tres partes: '& ' + 'nombre' + ';'
3.13. Una entidad de caracter numérica tiene cuatro partes: ' &' + '#' + 'número' + ';'
3.1. Entidades de caracteres numéricas y nominales para caracteres acentuados, 'u' con diéresis y eñe.
3.2. Entidades de caracter numéricas y nominales para caracteres reservados del lenguaje HTML.
3.3. Entidades de caracteres numéricas y nominales para algunos caracteres especiales de uso común.
4.1. En esta figura podemos apreciar la presentación de la segunda práctica del curso que realizaremos al final del capítulo.
4.2. Como aperitivo mostramos una lista no numerada en la que ya se pueden apreciar las características fundamentales que tienen en HTML.
4.3. Los elementos de las listas no numeradas van precedidos de una viñeta. En Explorer esta viñeta es habitualmente un punto grande.
4.4. Lista no ordenada en Lynx. Cada uno de los elementos de lista comienza con un asterisco simulando a los símbolos gráfico que usan Netscape o Explorer.
4.5. En las listas ordenadas cada uno de los elementos de lista aparecen numerados y sangrados hacia la derecha.
4.6. Cuando insertamos un nuevo elemento de lista en una lista ordenada los elementos siguientes son automáticamente renumerados.
4.7. En el caso de las listas numeradas la diferencia entre la visualización con Lynx y con Explorer es menor.
4.8. Las listas de glosario constan de dos partes la palabra de definición y la propia de definición que es mostrada como un nuevo párrafo con sangrado.
4.9. Listas de glosario en Lynx. De nuevo las diferencias respecto a la visualización con Explorer son escasas.
4.10. En Explorer las listas de menú (<MENU>) y de directorio (<DIR>) son mostradas de igual manera que las listas no numeradas (<UL>).
4.11. En Lynx las listas de menú y de directorio son mostradas simplemente insertando cada elemento de lista en una nueva línea.
4.12. Gracias al anidamiento podemos crear listas muy complejas en HTML. El segundo nivel de lista no numerada usa una viñeta distinta.
4.13. Comparando esta figura con la 4.8 podemos ver las ligeras diferencias que existen en los distintos tipos de listas entre Netscape y Explorer .
4.14. Al mostrar la página los navegadores actúan como si los comentarios no existieran. Como vemos Explorer permite comentarios multilínea y con etiquetas dentro.
4.15. Pantalla de presentación de la segunda página web de nuestro website. Es importante mantener un parecido entre todas las páginas que lo componen.
4.16. En la sección 'Los Alpes - 20 años a su servicio' podemos apreciar el uso de la etiqueta BLOCKQUOTE y de una lista no ordenada.
4.17. Logo de los alpes.
4.18. Letrero de 'Los Alpes' que, junto con el logo, aparecerá en todas las páginas del sitio web.
5.1. Aprovechando las capacidades del HTML para incluir colores e imágenes en un Web podemos conseguir resultados tan atractivos como el que observamos en el web de Disney.
tabla 5.1. Colores usados más frecuentemente
5.2. El lenguaje HTML nos permite cambiar el color de fondo de nuestras páginas. Podemos indicar el color por su nombre en inglés o con su número RGB.
5.3. También podemos cambiar el color del texto, de los enlaces, de los enlaces visitados y de los enlaces activos a nuestro gusto, igual que hacíamos con el fondo.
5.4. Para crear un mayor impacto visual podemos usar como fondo una imagen, esta imagen se replicará (es puesta en mosaico) por toda la página, luego los bordes deben coincidir.
5.5. En esta ocasión la imagen de fondo es un logo sobre un fondo de color sólido (gris). Esta es una manera sencilla para que no se noten los bordes cuando el navegador la pone en mosaico.
5.6. Esta es la imagen usada como fondo en la página de la figura 5.4. Como vemos, es de pequeño tamaño, pero al coincidir sus bordes simula una imagen que ocupa toda la pantalla.
5.7. También podemos poner fotos como fondo de la página, pero hay que tener cuidado porque los bordes no encajan y además la página queda demasiado sobrecargada.
5.8. Podemos apreciar la diferencia entre insertar una imagen dentro del encabezado o insertarla fuera, en cuyo caso queda en la línea superior.
5.9. Como veíamos en el fascículo 2 (fig. 2.9) cuando la imagen es pequeña puede entremezclarse con el texto sin problema.
5.10. Cuando la imagen es grande, al insertarla en una línea de texto ésta queda muy separada de la línea anterior en lugar de envolver la imagen.
5.11. Con las técnicas de alineamiento del lenguaje HTML que estudiamos en este capítulo podemos crear interesantes efectos como texto envolviendo a una imagen.
5.12. Ejemplos de align=top. En el primer caso la parte superior de la imagen coincide con la del texto y en el segundo con la parte superior de la imagen azul.
5.13. Ejemplos de align=middle. En el primer caso el centro de la imagen coincide con la base del texto, en el segundo intenta centrarse con la imagen azul.
5.14. Ejemplos de align=bottom. En ambos casos la parte inferior de la imagen se alinea con la base del texto, aunque la imagen azul baje por debajo.
5.15. Alineando una imagen a la izquierda con align=left conseguiremos que el texto envuelva a la imagen.
5.16. Usando align=right conseguimos igualmente que el texto envuelva a la imagen pero ahora ésta se situará a la derecha de la página.
5.17. Usando el atributo clear de la etiqueta br podemos terminar el texto envolvente y seguir escribiendo debajo de la imagen.
5.18. Usando los atributos hspace y vspace podemos controlar la separación entre la imágen y el texto que la envuelve.
5.19. Combinando las etiquetas img y a adecuadamente podemos crear imágenes enlace. Los navegadores indican esto mostrando un borde azul alrededor de estas imágenes.
5.20. Las imágenes enlace tienen un borde azul por defecto, pero podemos quitarlo o variar su grosor usando el atributo BORDER de la etiqueta IMG.
5.21. Las imágenes enlace se usan a menudo para crear iconos de navegación como los que aquí vemos. En estos casos es conveniente quitar el borde usando BORDER=0.
5.22. Las imágenes normales también pueden tener un borde de grosor variable, aunque en este caso el color no es azul, sino negro.
5.23. Usando los atributos WIDTH y HEIGHT podemos variar el tamaño de las imágenes. Si sólo usamos uno la otra dimensión se ajusta para mantener las proporciones.
5.24. Si incluimos junto con la imagen la información de sus dimensiones el navegador podrá reservar espacio para ellas con sólo leer el código.
5.25. Con el atributo ALT podemos especificar un texto alternativo a las imágenes. En esta figura vemos como lo muestran Explorer y Netscape.
5.26. Algunos navegadores como Explorer muestran el texto de ALT como un bocadillo que aparece cuando ponemos el cursor encima de la imagen.
5.2. Extensiones y breve descripción de los principales formatos de imágenes usados en el WWW.
5.27. Ejemplos de Thumnails. En el primer caso se muestra un trozo de la imagen y en el segundo la imagen completa reducida, el efecto es similar en ambos casos.
5.28. Imagen completa que será mostrada cuando el visitante seleccione los enlaces que acompañan a los thumbnails de la figura 5.27
5.29. En la página principal de POST-IT vemos un excelente ejemplo de la utilidad de las imágenes mapa.
5.30. En esta figura podemos ver los valores que puede tomar el atributo COORDS en función de si la zona es rectangular, circular o poligonal.
5.31. Imagen mapa que puede sustituir el menu en forma de lista de la página de la agencia de viajes Los Alpes.
5.32. Mientras que el tamaño de la imagen JPEG es mucho menor la pérdida de calidad apenas es apreciable.
5.33. En ocasiones, especialmente si usamos una imagen como fondo, se consigue un efecto mucho mejor haciendo que nuestras imágenes sean transparentes.
5.34. Aspecto final de la página de Los Alpes después de aplicar los conocimientos sobre imágenes que hemos adquirido en este capítulo.
7.1. En el web de GNOME Hispano encontramos multitud de elementos, gráficos y texto, con una disposición muy cuidada. ¿Cómo lo hacen? Con tablas.
7.2. Ya hemos creado nuestra primera tabla, aunque es sencilla ya podemos observar varias cosas curiosas en ella, por ejemplo que por defecto no se dibujan los bordes.
7.3. En esta segunda tabla ya podemos ver como son mostrados los encabezados de tabla.
7.4. Tabla con bordes. En esta tabla podemos observar lo que ocurre cuando una fila tiene más celdas que otra o cuando insertamos una celda sin nada dentro.
7.5. Tabla con celdas vacías. Poniendo <BR> o   las celdas que antes no existían ahora si son dibujadas, pero sin nada dentro.
7.6. Con la etiqueta CAPTION podemos poner un título a la tabla. Este título puede situarse encima (ALIGN="top") o debajo (ALIGN="bottom") de la tabla.
7.7. Con el atributo ALIGN podemos controlar el alineamiento de la tabla. Si elegimos ALIGN="left" el texto bordeará a la tabla al igual que ocurría con las imágenes.
7.8. Usando alineamiento a la derecha (ALIGN="right") conseguimos un efecto muy similar al alineamiento a la izquierda.
7.9. Con ALIGN="right" la tabla se sitúa en el centro de la ventana del navegador y el texto ya no la envuelve.
7.10. Distintas posibilidades de los alineamientos vertical y horizontal de las celdas de una tabla.
7.11. El punto azul de esta figura nos permite observar el alineamiento por defecto de los encabezados de tabla (TH) y de las celdas normales (TD).
7.12. Usando los atributos ALIGN y VALIGN en la etiqueta TR cambiamos el alineamiento por defecto de las celdas de esa fila, pero aún podemos modificar ese alineamiento usando los mismos atributos en cada celda.
7.13. Este será el objetivo del ejercicio 7.2. Una pista: debemos usar los atributos WIDTH, HEIGHT, ALIGN y VALIGN.
7.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias líneas, sin embargo no es recomendable usarlo en líneas muy largas como esta.
7.15. Los atributos COLSPAN y ROWSPAN nos permiten crear celdas que se extiendan varias columnas o varias filas.
7.16. El atributo CELLSPACING controla el espaciado entre los bordes de cada una de las celdas de la tabla.
7.17. Con el atributo CELLPADDING podemos aumentar los márgenes entre el contenido de las celdas y su borde.
7.18. Ejercicio 7.3. Aunque pueda parecer que hay una sola imagen, en realidad hay cuatro cuidadosamente colocadas.
6.20. Las etiquetas anidadas son aquellas que se encuentran entre la instrucción de inicio y la instrucción de fin de otra etiqueta. De esta forma conseguimos que los efectos de ambas se sumen.
6.21. En este ejemplo vemos como anidando una tabla dentro de otra podemos crear interesantes efectos en las páginas Web.
6.22. Nuestro objetivo en esta práctica 3 será realizar esta tabla. Para su realización necesitaremos usar gran parte de los atributos que hemos aprendido.
6.23. Una vez que sabemos como queremos que quede la tabla es muy útil desglosarla en columnas y filas para no liarnos al escribir el código.
6.24. Ya tenemos hecha una parte de la tabla, algunas de las celdas se expanden 2 filas, 2 columnas o ambas, aunque en algún caso todavía no es apreciable.
6.25. Ya tenemos la tabla prácticamente terminada. Sólo quedan algunos detalles para darla por concluida.
6.26. Los asistente (wizard) para la creación de tablas como este, incluido con el editor de HTML HomeSite, son de gran ayuda en la creación de tablas complicadas.
6.27. Estructura del sitio Web de Los Alpes. La página principal tendrá enlaces a las otras tres que además estarán enlazadas entre sí.
6.28. Boceto de la disposición de los elementos en la página principal y las tablas que vamos a necesitar crear para conseguir esa visualización.
6.29. Boceto de la disposición de los elementos del resto de páginas. Aunque conserva un parecido con la página principal hay algunos cambios.
6.30. Usando las opciones de cortar y pegar nos ahorraremos el proceso reescribir el código de las prácticas anteriores.
6.31. La coletilla aporta un toque de profesionalidad a nuestra página además de ofrecer información interesante a los visitantes.
6.32. Página principal de la agencia de viajes Los Alpes. Aunque no podemos ver los bordes de las tablas podemos intuir por donde irían.
6.33. Visualización de medida.htm
6.34. Resultado final de la página mes.htm
6.35. Resultado final de la página superOFE.htm
7.1. Usando adecuadamente las etiquetas del lenguaje HTML y con algunos conocimientos de diseño se pueden crear webs tan atractivos como este.
7.2. En el CERN (http://www.cern.ch ), un instituto de física con poca relación con Internet, se engendró la idea del World Wide Web.
7.3. El World Wide Web Consortium, o W3C, fue creado para regular el World Wide Web. Esta regulación incluye una estandarización del lenguaje HTML.
7.4. Tanto Microsoft como Netscape crearon sitios web especialmente dedicados a programadores de Internet en el que informan de las tecnologías propietarias soportadas por sus navegadores.
7.5. En el servidor web del W3C podemos ver la especificación del nuevo estándar HTML 4.0. La dirección concreta es: http://www.w3c/TR/PR-html40/
7.6. En esta figura vemos un excelente uso de los frames o marcos, que dividen la pantalla en cuatro partes para facilitar la navegación.
7.7. En HTML 3.2 existen 3 tipos de viñetas para las listas no ordenadas. Con el atributo TYPE podemos elegir entre ellos.
7.8. Comparando esta figura con la anterior vemos la similitud entre las distintas viñetas de los elementos de las listas usadas por Netscape Navigator e Internet Explorer.
7.9. Usando el atributo TYPE en una etiqueta LI podemos cambiar la viñeta de un único elemento de lista sin afectar a los demás.
7.1. Los cinco tipos distintos que puede tomar el atributo TYPE para listas ordenadas
7.10. Con el atributo TYPE podemos elegir entre 5 tipos distintos de numeración en las listas de HTML. En esta figura vemos los 4 nuevos.
7.11. Si usamos el atributo START podemos variar el número (o letra en estos casos) por los que se empiezan a numerar los elementos de la lista.
7.12. Con el atributo VALUE podemos indicar el valor de la numeración de cada uno de los elementos de las listas numeradas.
7.13. Con la nueva etiqueta DIV podemos cambiar el alineamiento de todo tipo de elementos HTML (imágenes, listas, párrafos, etc.) de una sola vez.
7.14. Los buscadores permiten a los navegantes encontrar la información que buscan. Usando la etiqueta META podemos proporcionarles datos para que incluyan nuestras páginas en sus bases de datos.
8.1. Los frames nos permiten dividir la ventana del navegador en varias secciones diferentes. En este caso la ventana a sido dividida en 4 frames.
8.2. En el Web www.chess.com podemos ver un excelente ejemplo del uso de frames para mantener visibles las barras de navegación.
8.3. Usando el atributo TARGET podremos lograr que pulsando el enlace de un frame el resultado se muestre en otro.
8.4. Este debe ser el resultado final tras llevar a cabo todos los pasos en el ejemplo de uso del atributo TARGET para crear varias ventanas.
8.5. Variando la dirección de base con la etiqueta BASE variará el significado de las direcciones relativas.
8.6. En este Web pulsando sobre los enlaces del frame izquierdo nos movemos por los diferentes temas del frame derecho.
8.7. Los Webs con frames constarán de varios documentos HTML. En este ejemplo al haber tres frames serán necesarios 4 documentos HTML.
8.8. La estructura de las páginas con frames es diferente a las que no tienen. La principal diferencia es la sustitución de BODY por FRAMESET.
8.9. Como vemos la ventana del navegador ha quedado dividida en dos columnas con un ancho del 20% y del 80% del ancho total de la ventana.
8.10. Las dos primeras columnas ocupan un ancho absoluto de 100 y 300 pixeles. La tercera al haber usado el asterisco ocupará el resto, que en este ejemplo son 372 pixeles.
8.11. En esta ocasión vemos un ejemplo del uso de FRAMESET combinando los distintos modos de indicar el tamaño y el ancho resultante de cada uno para una ventana con 800 pixeles de ancho.
8.12. Es posible usar los atributos COLS y ROWS simultáneamente para dividir la ventana en varias filas y columnas.
8.13. Ejemplo completo de una página con frames formado por un frame izquierdo pequeño que puede servir de índice y otro derecho con el contenido principal.
8.14. Usando los diferentes atributos de la etiqueta FRAME podemos tener un mayor control sobre las diferentes características de los frames.
8.15. El navegador NCSA Mosaic no soporta frames, con lo que los usuarios de dicho navegador no verán nada si no usamos la etiqueta NOFRAME.
8.16. En este caso sí hemos usado NOFRAMES ofreciendo al navegante un enlace para ver una versión sin frames de las páginas.
8.17. Para conseguir estructuras de frames más complejas puede anidarse la etiqueta FRAMESET. En esta figura se indica cómo hacerlo.
8.18. Nuestra primera página con frames. La ventana está dividida en 3 apartados (los frames) el izquierdo es el índice, el superior el título y el central el que tiene el contenido.
8.19. En general los navegadores dibujan líneas con aspecto 3-D para separar los frames.
170. Con el atributo BORDERCOLOR podemos elegir el color que queramos para los bordes de los frames.
171. Usando FRAMEBORDER="0" ocultamos los bordes de los frames con lo que se consigue una gran mejora en la apariencia.
8.22. Aún usando el atributo FRAMEBORDER si hacemos la ventana del navegador pequeña aparecerán barras de desplazamiento en cada uno de los frames.
8.23. Con el atributo BORDER podemos cambiar el grosor de los bordes. En este caso el borde horizontal tiene un grosor de 20 pixeles.
8.24. Representación de los cuatro valores especiales del atributo TARGET: _self, _parent, _topy _blank.
175. Página Web de Los Alpes creada en la práctica 4 de este curso. Ahora la modificaremos para crear una versión con frames.
176. El frame superior será de 163 pixeles, mientras que el inferior ocupará el resto del espacio de la ventana del navegador.
177. El contenido de banner.htm, el logo y encabezado de Los Alpes así como los botones de navegación, serán mostrados en el frame superior.
178. Todos los botones tienen como destino el frame principal. Por tanto es conveniente usar la etiqueta BASE con el atributo TARGET=principal.
179. Página sin cabecera, lista para ser insertada en un frame.
180. Estructura de frames mostrando la página main.htm en el frame central.
181. Los frames flotantes nos permiten insertar un documento HTML completo en una página Web.
182. Los navegadores que no soporten frames flotantes mostrarán el código alternativo incluido entre las instrucciones <<IFRAME>> y </</IFRAME>>
183. Usando FRAMBORDER=0 podemos eliminar el borde del frame. Sin embargo si el contenido no cabe en frame la barra de desplazamiento sí se mostrará.
184. Con los atributos ALIGN, MARGINWIDTH y SCROLL podremos controlar las diversas características de los frames flotantes.
10.2. Netscape Navigator permite configurar en este cuadro de diálogo las aplicaciones externas asociadas a cada navegador.
10.3. RealAudio es un formato de sonido especificamente creado para la red el software necesario para su reproducción puede ser obtenido a través de su Web.
tabla 10.1.
10.4. La organización MPEG es la creadora de este estándar que permite la codificación de audio y vídeo de gran calidad en archivos de pequeño tamaño.
tabla 10.2.
10.5. Al pulsar sobre un enlace a un archvo que no puede mostrar él mismo, Internet Explorer muestra este cuadro de diálogo preguntando al usuario que quiere hacer.
10.6. Cuadro de diálogo para archivos externos mostrado por Netscape Navigator. Si elejimos open la aplicación externa asociada será ejecutada.
10.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero impactantes como es el caso del web de Spectacle.
10.8. La marquesina animada muestra un texto que va moviéndose de derecha a izquierda en la ventana del navegador. En esta figura vemos 7 momentos consecutivos.
10.9. La etiqueta MARQUEE está acompañada de numerosos atributos que nos permiten controlar la apariencia de la marquesina.
10.10. Internet Explorer 4.0 incluye una serie de nuevas tecnologías entre las que destacan los nuevos controles multimedia.
10.11. Macromedia distribuye a través de su Web el plug-in necesario para visualizar en un Web animaciones creadas por su herramienta Director.
10.12. Si el navegador tiene algún problema con el plug-in muestra un icono y un espacio en blanco que puede estropear la apariencia de nuestra página.
10.13. Usando los atributos WIDTH y HEIGHT de la etiqueta EMBED podemos lograr que los controles de sonido aparezcan. Internet Explorer usa los controles de Windows.
10.14. El plug-in usado por Netscape navigator ha creado sus propios controles que tienen la capacidad añadida de poder controlar el volumen.
11.1. En la página Web de Sun Microsystems, creadora del lenguaje Java, podemos encontrar gran cantidad de documentación y ejemplos de sus posibilidades.
11.2. Gamela es una excelente fuente de recursos Java conocida desde hace tiempo. En la actualidad su dirección está en proceso de cambio a: www.developer.com.
11.3. Este es el aspecto que muestra nuestro primer applet insertado en una página Web. En un navegador con soporte Java podemos pulsar sobre los botones para obtener diferentes sonidos.
11.4. Usando applets Java podemos insertar juegos interactivos como en este caso. Usando el atributo CODEBASE no es necesario que el applet esté en nuestro servidor.
11.5. Usando los atributos ALIGN, VSPACE y HSPACE podemos insertar un applet rodeado de texto.
11.6. El applet Animator.class es uno de los más conocidos y usados en las páginas Web por la facilidad que ofrece para crear animaciones.
11.7. El navegador Opera no soporta la tecnología Java, por lo que mostrará el código alternativo, en este caso uno de los GIFs de la animación.
11.8. Resumen de todos los atributos de la etiqueta APPLET y de su subetiqueta PARAM.
11.9. La etiqueta OBJECT ha sido creada por los expertos del Web Consortium para englobar la inclusión de todo tipo de objetos en las páginas Web.
11.10. ForecastX ofrece un servicio meteorológico en tiempo real gracias a la tecnología ActiveX.
11.11. Usando este control ActiveX podemos crear efectos variados con texto, con lo que pueden sustituir el uso de imágenes con la consiguiente disminución tiempo de carga de nuestras páginas.
11.12. Usando el mismo control ActiveX que en la figura 11.25 pero con un código algo más complejo podemos crear este efecto tan atractivo.
12.1. En la página principal de Tower Communications vemos un formulario que es usado para permitir a los visitantes introducir una cadena de texto que deseen buscar.
12.2. En otra sección de la página de Tower Communications vemos un formulario más complicado formado por numerosas cajas de texto y otros elementos.
12.3. Nuestro primer formulario está compuesto por una caja de texto. Para introducirla hemos usado la etiqueta INPUT con TYPE="text".
12.4. Pulsando sobre la caja de texto nos aparecerá un cursor parpadeante que nos indica que podemos empezar a escribir texto.
12.5. Usando el código <INPUT TYPE="submit"> podemos insertar un botón de envío de manera que al pulsar sobre él se envían los datos del formulario.
12.6. Con el atributo VALUE podemos cambiar el texto por defecto del botón de envío por uno de nuestra elección. El ancho del botón se adaptará a la longitud del texto.
12.7. El atributo SIZE nos permite variar la longitud de la caja de texto. Debemos tener en cuenta que en diferentes navegadores un mismo valor no se corresponde a una misma longitud.
12.8. El atributo ALIGN de la etiqueta INPUT nos permite alinear los controles. En este caso vemos una caja de texto alineada a la izquierda (ALIGN="left").
12.9. Las cajas de texto para claves muestran asteriscos en lugar del texto que escribimos para aumentar la confidencialidad.
12.10. Los botones de elección permiten elegir entre un conjunto de opciones, de las cuales podemos elegir sólo una.
12.11. En un mismo formulario podemos incluir varios grupos de botones de elección. Los visitantes podrán seleccionar una opción en cada uno.
12.12. Las cajas de selección son independientes unas de otras, por los que es posible tener varias seleccionadas.
12.13. Este es el aspecto que tiene el código que hemos escrito hasta ahora. En el formulario de la clave sólo se podrán insertar 4 caracteres.
12.14. Este es el resultado final del formulario del ejercicio 12.1 en el que destaca el uso de una imagen personalizada como botón de envío.
12.15. El botón de borrado (<INPUT TYPE="reset" >) permite al usuario borrar los datos introducidos y recuperar los iniciales.
12.16. Los botones genéricos tienen multitud de usos, entre los más usados nos encontramos con el botón enlace y el botón para cerrar una ventana, que, como todos, requieren hacer uso de un lenguaje de script.
12.17. Los navegadores en modo texto como Lynx también son capaces de mostrar formularios, que aunque no sean gráficos tienen la misma funcionalidad.
12.18. En esta figura podemos apreciar cajas de texto y de clave, botones de elección y cajas de selección tal y como son mostradas por Lynx.
12.19. El atributo TITLE es una extensión de Microsoft que permite dar una descripción a los controles que será mostrada en un bocadillo.
12.20. Los atributos DISABLED y READONLY permiten deshabilitar un control de manera que sólo sirva para mostrar datos.
12.21. Las áreas de texto (<TEXTAREA> </TEXTAREA>) permiten al usuario introducir texto de varias líneas como si de un sencillo editor de texto se tratara.
12.22. Lynx muestra las áreas de texto como un conjunto de líneas (tantas como hemos indicado con el atributo COLS) sobre las que el usuario podrá escribir.
12.24. Los cuadros de selección permiten mostrar varias opciones para que el usuario pueda elegir. En esta ocasión vemos su forma de persiana desplegable.
12.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de selección se muestre como una lista.
12.26. Usando el atributo MULTIPLE el usuario podrá seleccionar varias de las opciones que se ofrecen en la lista.
12.27. El navegador Lynx también es capaz de mostrar cuadros de selección, por lo que podremos usarlo con libertad.
12.28. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes.
12.29. El primer paso será modificar la plantilla, cambiando el título y la fecha y escribiendo un texto introductorio.
12.30. Usando los conocimientos adquiridos en este capítulo utilizamos las etiquetas INPUT y SELECT para crear los controles del formulario.
12.31. Usando una tabla de nueve filas y tres columnas controlamos la disposición de todos los elementos de la tabla para conseguir un diseño profesional.
12.32. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Web creado en la práctica 5.
12.33. Como método alternativo a los CGIs pueden mandarse los datos del formulario por correo electrónico. En ese caso el navegador pedirá al usuario confirmación de la acción.
12.33. Como método alternativo a los CGIs pueden mandarse los datos del formulario por correo electrónico. En ese caso el navegador pedirá al usuario confirmación de la acción.
  Siguiente
  Introducción al lenguaje HTML