Curso HTML

download Curso HTML

of 447

Transcript of Curso HTML

  • Curso completo de HTMLpor Jorge Ferrerpor Vctor Garca

    por Rodrigo Garca

  • Curso completo de HTMLpor Jorge Ferrerpor Vctor Garcapor Rodrigo Garca

    Este es un curso tremendamente completo, guiado y con ejemplos y prcticas pensadas para convertirlo en unagua didctica para aprender a hacer pginas web. No se requieren ms que conocimientos bsicos de informticapara llevarlo a cabo y se cubren desde los aspectos ms bsicos de HTML hasta los ms avanzados. Todo elloresaltando en todo momento las partes ms importantes de este lenguaje y la mejor forma de emplearlo. Esperamosque lo disfrutes.

    Copyright Jorge Ferrer, Rodrigo Garcia y Victor Garca. Se otorga permiso para copiar, distribuir y/o modificar este documento bajolos trminos de la Licencia de Documentacin Libre GNU, Versin 1.1 o cualquier otra versin posterior publicada por la Free SoftwareFoundation. Puede consultar una copia de la licencia en: http://www.gnu.org/copyleft/fdl.html

    Para obtener la ltima versin de este documento, informar de fallos que hayas encontrado o colaborar a su mejora visitahttp://freek.jorgeferrer.com.

  • Tabla de contenidosIntroduccin al lenguaje HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

    Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Caractersticas del lenguaje HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Qu se necesita para crear una pgina web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Algunas razones para usar HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5HTML es un lenguaje descriptivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Las bases de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

    Primeros pasos con HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Estructura de una pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Los encabezados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15El ejemplo mejorado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

    Conclusin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20La primera pgina Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

    Prrafos en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Saltos de lnea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Cmo se insertan prrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Lneas horizontales para separar prrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26La etiqueta ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28La etiqueta ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29La etiqueta ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

    Cmo insertar imgenes en una pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Cmo crear enlaces hipertexto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

    La etiqueta ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Pginas en otros directorios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Enlaces externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

    PRCTICA 1: La pgina web de "La chistera" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36La propuesta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36La solucin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

    Anclas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Qu es un ancla? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Creando anclas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Enlaces a anclas de otras pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Uso de enlace y ancla en la misma etiqueta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49El atributo title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Los atributos rel y rev . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

    Formato de texto y Caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Formato de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

    Etiquetas de estilo fsico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Etiquetas de estilo lgico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

    La etiqueta FONT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Cambiando el tamao del texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63Cambiando el color del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

    Texto preformateado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Uso de otras etiquetas dentro de ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

    Acentos y otros caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Entidades de caracteres para caracteres espaoles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Entidades de caracteres para caracteres reservados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Otras entidades de caracteres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

    Listas y Comentarios en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Listas en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

    Etiquetas necesarias para crear listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

    iii

  • Curso completo de HTML

    Listas no ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80Listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82Listas de glosario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Directorios y mens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Anidamiento de listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

    Comentarios en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Creacin de comentarios en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

    Prctica 2: Un sitio web completo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Planificacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Secciones de la pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Diseo grfico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99Programacin en HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

    Imgenes y color en el WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Usando color en el WWW. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Cmo cambiar la apariencia de una pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

    Color de fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Color del texto y Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108Imgenes de fondo: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

    Imgenes en las pginas Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114Insertando Imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114Imgenes y texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115Alineamiento de imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Texto que envuelve a las imgenes o alineamiento horizontal. . . . . . . . . . . . . . . . . . . . . . . . 123Como terminar el texto envolvente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126Mrgenes alrededor de las imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Imgenes enlace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

    Cmo cambiar la apariencia de las imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Borde de las imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Modificando el tamao de las imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

    Alternativas a las imgenes inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137El atributo ALT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Imgenes externas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Imgenes mapa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

    Mejoras en las imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150Formatos GIF y JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150Transparencia, Entrelazado y GIFs animados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153

    Creacin de tablas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Cmo se crea una tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

    Borde de las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164Insertar un ttulo para la tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170Tamao de las tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173Ejercicio 7.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

    Alineamiento de tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174Alineamiento de celdas y filas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177Ancho de tablas y celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

    Tamao de las celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181EJERCICIO 7-2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181El atributo NOWRAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

    Celdas que abarcan varias filas o columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Mrgenes y separacin de celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

    Ejercicio 7.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Conclusin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

    Anidamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

    iv

  • Curso completo de HTML

    Prctica 3 - Tabla de Datos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194Paso 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Paso 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197Paso 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197Paso 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198Paso 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

    Prctica 4 - Pgina Web con una estructura creada con tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202Paso 1 - Planificacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Paso 2 - Cdigo bsico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Paso 3 - Estructura de la pgina principal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209Paso 4 - Estructura del resto de pginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211Paso 5 - Contenido de la pgina principal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Paso 6 - Contenido grfico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215Paso 7 - Cambiar el fondo y color del texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219Paso 8 - Realizacin del resto de las pginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222Paso 9 - Retoques, pruebas, revisin y mantenimiento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

    HTML avanzado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Estndares y extensiones del lenguaje HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

    El estndar HTML 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230El estndar HTML 3.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232HTML 4.0 y XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235El futuro de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

    Extensiones a las listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241Listas no ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241Listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

    Alineamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249La etiqueta META . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

    Carga automtica de pginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253Informacin para los buscadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253Otros usos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

    Otras etiquetas del lenguaje HTML 3.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Descriptor de tipo de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Otras etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

    Frames, las ventanas llegan al WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257El atributo TARGET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261La etiqueta BASE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265Creacin de pginas con frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269Creacin del documento de definicin de frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

    Divisin en columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Divisin en filas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276Combinando COLS y ROWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276La etiqueta FRAME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278

    Pgina completa con frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Atributos de la etiqueta FRAME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282Compatibilidad: NOFRAME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284Anidamiento de framesets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287Bordes de los frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

    Cambiando el color del borde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292Como quitar el borde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295Grosor del borde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

    Valores especiales del atributo TARGET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299Ejercicio con TARGET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

    v

  • Curso completo de HTML

    Prctica 5: Web de Los Alpes con frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302Documento de definicin de frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303El frame Banner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306Frame principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309ltimos retoques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

    Frames flotantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312Atributos de los frames flotantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

    Vdeos, Sonido y Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319Sonido vdeo y otros ficheros externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

    Ficheros de sonido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322Ficheros de vdeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324Otros tipos de archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

    Multimedia Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328Vdeo inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328El atributo LOWSRC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329Sonidos Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331Marquesinas animadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333Texto que parpadea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337Controles multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

    Plug-ins y objetos incrustados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339Como usar los plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342Alternativas para navegadores sin soporte para PLUG-INs . . . . . . . . . . . . . . . . . . . . . . . . . . . 342Sonido inline con la etiqueta EMBED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

    Applets de Java y Controles ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347Java en las Pginas Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347Insercin de Applets Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

    Especificando la direccin del applet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Otros atributos de la etiqueta APPLET. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353La etiqueta PARAM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356Alternativas a los applets Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357El nuevo estndar: la etiqueta OBJECT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Insercin de un applet Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

    ActiveX, la tecnologa del futuro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363Insercin de un control ActiveX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366

    Formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Formularios en HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371Controles de Formularios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

    Cajas de texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380Cajas de texto para claves. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383Botones de eleccin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385Cajas de seleccin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388Imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390Botn de borrado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Botn genrico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399Campos ocultos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402Los formularios vistos desde Lynx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403Innovaciones de Microsoft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

    OTROS CONTROLES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408Cajas de texto multilnea: TEXTAREA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408Cuadros de seleccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412

    PRCTICA 6-FORMULARIO PARA "Los Alpes" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418COMO USAR LOS DATOS DE UN FORMULARIO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

    Formularios sin CGIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

    vi

  • Curso completo de HTML

    ENVO DE FICHEROS USANDO FORMULARIOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429

    vii

  • Lista de figuras1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad las imgenes son mayora comopodemos observar en una de las principales webs del proyecto KDE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.2. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear unapgina Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3. Algunos editores WYSIWYG permiten, adems, modificar el cdigo HTML directamente. . . . . . . 41.4. Los navegadores en modo texto como Lynx tambin pueden mostrar pginas Web gracias al carcterdescriptivo de HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61.5. Uso bsico de una etiqueta HTML sin ningn tipo de parmetros. Ejemplo usando la etiqueta paracrear una lnea horizontal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemoscomo se puede cambiar el grosor de una lnea con el atributo SIZE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.1. Estructura de bloques de un documento HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.2. El ttulo de la pgina es mostrado en la parte superior de la ventana del navegador. . . . . . . . . . . . . . 122.3. Cuando los navegantes incluyan nuestra pgina a su men de favoritos en su men aparecer el ttuloque le hayamos dado a nuestra pgina con la etiqueta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarn el texto quepongamos en el cuerpo de la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer. . . . . . . . . . . . . . . . . . . . . . . . . 162.6. Distintos tipos de encabezados vistos con Netscape Navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.7. Ejemplo de pgina Web con dos tipos de encabezados y dos prrafos. . . . . . . . . . . . . . . . . . . . . . . . . 192.1. Uso bsico de una etiqueta HTML sin ningn tipo de parmetros. Ejemplo usando la etiqueta paracrear una lnea horizontal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.2. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemoscomo se puede cambiar el grosor de una lnea con el atributo size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.3. Ejemplo de un prrafo con un salto de lnea y la divisin del mismo texto en dos prrafos. . . . . . . 242.4. Con el atributo align se pueden crear prrafos alineados a la derecha, centrados o alineados a laizquierda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252.5. Con los nuevos atributos de la etiqueta podemos controlar el ancho, grosor alineamiento y sombrade la lnea horizontal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.6. La etiqueta es usada para insertar bloques de texto que citan a otro autor. Los navegadoressuelen introducir un sangrado en este texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292.7. En esta pgina se observa como al final de la pgina se han incluido datos de los autores y de la pgina.Para ello se ha usado la etiqueta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.8. Con la etiqueta es posible centrar cualquier elemento de nuestra pgina como por ejemplo elverso de Lorca de la figura 2.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.9. Al insertar una imagen esta se entremezcla con el texto. Cuando la imagen es pequea se creaninteresantes efectos como este. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.10. Al pulsar sobre un enlace hipertexto saltaremos a otra pgina de Internet. Los navegadores resaltanestos enlaces para que sea fcil identificarlos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332.11. Pgina que agrupa todos los enlaces de un sitio web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352.12. La prctica 1 propone realizar un pgina a partir de lo mostrado en esta figura. . . . . . . . . . . . . . . . 372.13. Estructura de los enlaces normales. Al pulsar sobre el texto activo no podemos elegir el lugar de lapgina al que saltamos, iremos siempre al comienzo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422.14. En la seccin superior puede verse ver una serie de enlaces (las letras maysculas) a anclas. En laseccin superior se muestra el lugar al que se ha saltado al pulsar sobre la letra S. Podemos deducir queantes de la palabra Salud hay un ancla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432.15. Estructura de un enlace a un ancla de la misma pgina. Cuando pulsamos sobre el enlace el navegadornos transporta hasta el lugar de la pgina donde est el ancla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462.16. Estructura de un enlace a un ancla de otra pgina. Cuando pulsamos sobre el enlace vamos hasta otrapgina, pero no al comienzo sino al lugar concreto donde est el ancla. . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

    viii

  • Curso completo de HTML

    2.17. Con el atributo title podemos incluir informacin adicional sobre el Link. Explorer mostrar estainformacin con un bocadillo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.1. Con el tipo de letra Times New Roman no todas las letras ocupan lo mismo. . . . . . . . . . . . . . . . . . . 533.2. Con el tipo de letra Courier todas las letras ocupan lo mismo (monoespaciadas) . . . . . . . . . . . . . . . . 553.3. Los navegadores grficos como Explorer pueden mostrar perfectamente todos los tipos de estilos lgicoscomo vemos en esta figura. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.4. El navegador Lynx slo puede mostrar texto y usa los medios a su alcance para formatear el texto quedebera ser negrita, cursiva... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583.5. En esta figura observamos los estilos lgicos con Explorer. La gran mayora de ellos son mostradoscomo letra en negrita o cursiva. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.6. Usando estilos lgicos no se nota tanto la diferencia entre Explorer y Lynx aunque los medios de estesean ms limitados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamao del texto. . . . . . . 643.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamao del texto. . . . . . . 653.8. Los tamaos del texto que hallamos modificado usando el mtodo relativo se calcularn a partir del altamao por defecto del texto normal, pero sin pasar nunca de 7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673.9. Gracias a la etiqueta FONT y a su atributo COLOR nuestras pginas tomarn un colorido totalmentediferente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693.10. Como se puede ver se pueden crear firmas muy originales usando nicamente caracteres y sinnecesidad de imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703.11. Si no usamos la etiqueta de texto preformateado la figura construida con caracteres se convertir enalgo ilegible. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703.12. Una entidad de caracter con nombre tiene tres partes: & + nombre + ; . . . . . . . . . . . . . . . . . . . 723.13. Una entidad de caracter numrica tiene cuatro partes: & + # + nmero + ; . . . . . . . . . . . . . 733.1. Entidades de caracteres numricas y nominales para caracteres acentuados, u con diresis y ee. 733.2. Entidades de caracter numricas y nominales para caracteres reservados del lenguaje HTML. . . . . 743.3. Entidades de caracteres numricas y nominales para algunos caracteres especiales de uso comn. 754.1. En esta figura podemos apreciar la presentacin de la segunda prctica del curso que realizaremos alfinal del captulo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.2. Como aperitivo mostramos una lista no numerada en la que ya se pueden apreciar las caractersticasfundamentales que tienen en HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.3. Los elementos de las listas no numeradas van precedidos de una vieta. En Explorer esta vieta eshabitualmente un punto grande. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814.4. Lista no ordenada en Lynx. Cada uno de los elementos de lista comienza con un asterisco simulando alos smbolos grfico que usan Netscape o Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814.5. En las listas ordenadas cada uno de los elementos de lista aparecen numerados y sangrados hacia laderecha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 824.6. Cuando insertamos un nuevo elemento de lista en una lista ordenada los elementos siguientes sonautomticamente renumerados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 834.7. En el caso de las listas numeradas la diferencia entre la visualizacin con Lynx y con Explorer es menor.

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 844.8. Las listas de glosario constan de dos partes la palabra de definicin y la propia de definicin que esmostrada como un nuevo prrafo con sangrado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854.9. Listas de glosario en Lynx. De nuevo las diferencias respecto a la visualizacin con Explorer sonescasas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864.10. En Explorer las listas de men () y de directorio () son mostradas de igual maneraque las listas no numeradas (). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 884.11. En Lynx las listas de men y de directorio son mostradas simplemente insertando cada elemento delista en una nueva lnea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 884.12. Gracias al anidamiento podemos crear listas muy complejas en HTML. El segundo nivel de lista nonumerada usa una vieta distinta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.13. Comparando esta figura con la 4.8 podemos ver las ligeras diferencias que existen en los distintostipos de listas entre Netscape y Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

    ix

  • Curso completo de HTML

    4.14. Al mostrar la pgina los navegadores actan como si los comentarios no existieran. Como vemosExplorer permite comentarios multilnea y con etiquetas dentro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 934.15. Pantalla de presentacin de la segunda pgina web de nuestro website. Es importante mantener unparecido entre todas las pginas que lo componen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 964.16. En la seccin Los Alpes - 20 aos a su servicio podemos apreciar el uso de la etiqueta BLOCK-QUOTE y de una lista no ordenada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 974.17. Logo de los alpes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 994.18. Letrero de Los Alpes que, junto con el logo, aparecer en todas las pginas del sitio web. . . . . 995.1. Aprovechando las capacidades del HTML para incluir colores e imgenes en un Web podemosconseguir resultados tan atractivos como el que observamos en el web de Disney. . . . . . . . . . . . . . . . . 103tabla 5.1. Colores usados ms frecuentemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1055.2. El lenguaje HTML nos permite cambiar el color de fondo de nuestras pginas. Podemos indicar el colorpor su nombre en ingls o con su nmero RGB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085.3. Tambin podemos cambiar el color del texto, de los enlaces, de los enlaces visitados y de los enlacesactivos a nuestro gusto, igual que hacamos con el fondo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1095.4. Para crear un mayor impacto visual podemos usar como fondo una imagen, esta imagen se replicar (espuesta en mosaico) por toda la pgina, luego los bordes deben coincidir. . . . . . . . . . . . . . . . . . . . . . . . . . 1115.5. En esta ocasin la imagen de fondo es un logo sobre un fondo de color slido (gris). Esta es una manerasencilla para que no se noten los bordes cuando el navegador la pone en mosaico. . . . . . . . . . . . . . . . . . 1115.6. Esta es la imagen usada como fondo en la pgina de la figura 5.4. Como vemos, es de pequeo tamao,pero al coincidir sus bordes simula una imagen que ocupa toda la pantalla. . . . . . . . . . . . . . . . . . . . . . . . 1125.7. Tambin podemos poner fotos como fondo de la pgina, pero hay que tener cuidado porque los bordesno encajan y adems la pgina queda demasiado sobrecargada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1135.8. Podemos apreciar la diferencia entre insertar una imagen dentro del encabezado o insertarla fuera, encuyo caso queda en la lnea superior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1155.9. Como veamos en el fascculo 2 (fig. 2.9) cuando la imagen es pequea puede entremezclarse con eltexto sin problema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1175.10. Cuando la imagen es grande, al insertarla en una lnea de texto sta queda muy separada de la lneaanterior en lugar de envolver la imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1175.11. Con las tcnicas de alineamiento del lenguaje HTML que estudiamos en este captulo podemos crearinteresantes efectos como texto envolviendo a una imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1195.12. Ejemplos de align=top. En el primer caso la parte superior de la imagen coincide con la del texto y enel segundo con la parte superior de la imagen azul. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1205.13. Ejemplos de align=middle. En el primer caso el centro de la imagen coincide con la base del texto, enel segundo intenta centrarse con la imagen azul. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1215.14. Ejemplos de align=bottom. En ambos casos la parte inferior de la imagen se alinea con la base deltexto, aunque la imagen azul baje por debajo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1225.15. Alineando una imagen a la izquierda con align=left conseguiremos que el texto envuelva a la imagen.

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1245.16. Usando align=right conseguimos igualmente que el texto envuelva a la imagen pero ahora sta sesituar a la derecha de la pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1255.17. Usando el atributo clear de la etiqueta br podemos terminar el texto envolvente y seguir escribiendodebajo de la imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1265.18. Usando los atributos hspace y vspace podemos controlar la separacin entre la imgen y el texto quela envuelve. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1285.19. Combinando las etiquetas img y a adecuadamente podemos crear imgenes enlace. Los navegadoresindican esto mostrando un borde azul alrededor de estas imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1305.20. Las imgenes enlace tienen un borde azul por defecto, pero podemos quitarlo o variar su grosor usandoel atributo BORDER de la etiqueta IMG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1315.21. Las imgenes enlace se usan a menudo para crear iconos de navegacin como los que aqu vemos. Enestos casos es conveniente quitar el borde usando BORDER=0. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1325.22. Las imgenes normales tambin pueden tener un borde de grosor variable, aunque en este caso el colorno es azul, sino negro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

    x

  • Curso completo de HTML

    5.23. Usando los atributos WIDTH y HEIGHT podemos variar el tamao de las imgenes. Si slo usamosuno la otra dimensin se ajusta para mantener las proporciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.24. Si incluimos junto con la imagen la informacin de sus dimensiones el navegador podr reservarespacio para ellas con slo leer el cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1365.25. Con el atributo ALT podemos especificar un texto alternativo a las imgenes. En esta figura vemoscomo lo muestran Explorer y Netscape. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1385.26. Algunos navegadores como Explorer muestran el texto de ALT como un bocadillo que aparece cuandoponemos el cursor encima de la imagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1395.2. Extensiones y breve descripcin de los principales formatos de imgenes usados en el WWW. . . 1415.27. Ejemplos de Thumnails. En el primer caso se muestra un trozo de la imagen y en el segundo la imagencompleta reducida, el efecto es similar en ambos casos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1425.28. Imagen completa que ser mostrada cuando el visitante seleccione los enlaces que acompaan a losthumbnails de la figura 5.27 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1435.29. En la pgina principal de POST-IT vemos un excelente ejemplo de la utilidad de las imgenes mapa.1455.30. En esta figura podemos ver los valores que puede tomar el atributo COORDS en funcin de si la zonaes rectangular, circular o poligonal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1485.31. Imagen mapa que puede sustituir el menu en forma de lista de la pgina de la agencia de viajes LosAlpes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1505.32. Mientras que el tamao de la imagen JPEG es mucho menor la prdida de calidad apenas es apreciable.

    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1515.33. En ocasiones, especialmente si usamos una imagen como fondo, se consigue un efecto mucho mejorhaciendo que nuestras imgenes sean transparentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1535.34. Aspecto final de la pgina de Los Alpes despus de aplicar los conocimientos sobre imgenes quehemos adquirido en este captulo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1557.1. En el web de GNOME Hispano encontramos multitud de elementos, grficos y texto, con unadisposicin muy cuidada. Cmo lo hacen? Con tablas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1577.2. Ya hemos creado nuestra primera tabla, aunque es sencilla ya podemos observar varias cosas curiosasen ella, por ejemplo que por defecto no se dibujan los bordes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1617.3. En esta segunda tabla ya podemos ver como son mostrados los encabezados de tabla. . . . . . . . . . 1637.4. Tabla con bordes. En esta tabla podemos observar lo que ocurre cuando una fila tiene ms celdas queotra o cuando insertamos una celda sin nada dentro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1657.5. Tabla con celdas vacas. Poniendo o las celdas que antes no existan ahora si son dibujadas,pero sin nada dentro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1697.6. Con la etiqueta CAPTION podemos poner un ttulo a la tabla. Este ttulo puede situarse encima(ALIGN="top") o debajo (ALIGN="bottom") de la tabla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1727.7. Con el atributo ALIGN podemos controlar el alineamiento de la tabla. Si elegimos ALIGN="left" eltexto bordear a la tabla al igual que ocurra con las imgenes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1747.8. Usando alineamiento a la derecha (ALIGN="right") conseguimos un efecto muy similar al alineamientoa la izquierda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1757.9. Con ALIGN="right" la tabla se sita en el centro de la ventana del navegador y el texto ya no laenvuelve. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1767.10. Distintas posibilidades de los alineamientos vertical y horizontal de las celdas de una tabla. . . . 1777.11. El punto azul de esta figura nos permite observar el alineamiento por defecto de los encabezados detabla (TH) y de las celdas normales (TD). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1787.12. Usando los atributos ALIGN y VALIGN en la etiqueta TR cambiamos el alineamiento por defecto delas celdas de esa fila, pero an podemos modificar ese alineamiento usando los mismos atributos en cadacelda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1807.13. Este ser el objetivo del ejercicio 7.2. Una pista: debemos usar los atributos WIDTH, HEIGHT,ALIGN y VALIGN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1827.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias lneas, sin embargo no esrecomendable usarlo en lneas muy largas como esta. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

    xi

  • Curso completo de HTML

    7.15. Los atributos COLSPAN y ROWSPAN nos permiten crear celdas que se extiendan varias columnas ovarias filas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1877.16. El atributo CELLSPACING controla el espaciado entre los bordes de cada una de las celdas de latabla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1897.17. Con el atributo CELLPADDING podemos aumentar los mrgenes entre el contenido de las celdas ysu borde. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1897.18. Ejercicio 7.3. Aunque pueda parecer que hay una sola imagen, en realidad hay cuatro cuidadosamentecolocadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1906.20. Las etiquetas anidadas son aquellas que se encuentran entre la instruccin de inicio y la instruccin defin de otra etiqueta. De esta forma conseguimos que los efectos de ambas se sumen. . . . . . . . . . . . . . . . 1926.21. En este ejemplo vemos como anidando una tabla dentro de otra podemos crear interesantes efectos enlas pginas Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1936.22. Nuestro objetivo en esta prctica 3 ser realizar esta tabla. Para su realizacin necesitaremos usar granparte de los atributos que hemos aprendido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1946.23. Una vez que sabemos como queremos que quede la tabla es muy til desglosarla en columnas y filaspara no liarnos al escribir el cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1956.24. Ya tenemos hecha una parte de la tabla, algunas de las celdas se expanden 2 filas, 2 columnas o ambas,aunque en algn caso todava no es apreciable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1976.25. Ya tenemos la tabla prcticamente terminada. Slo quedan algunos detalles para darla por concluida.1996.26. Los asistente (wizard) para la creacin de tablas como este, incluido con el editor de HTML HomeSite,son de gran ayuda en la creacin de tablas complicadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2016.27. Estructura del sitio Web de Los Alpes. La pgina principal tendr enlaces a las otras tres que ademsestarn enlazadas entre s. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2036.28. Boceto de la disposicin de los elementos en la pgina principal y las tablas que vamos a necesitarcrear para conseguir esa visualizacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2046.29. Boceto de la disposicin de los elementos del resto de pginas. Aunque conserva un parecido con lapgina principal hay algunos cambios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2066.30. Usando las opciones de cortar y pegar nos ahorraremos el proceso reescribir el cdigo de las prcticasanteriores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2086.31. La coletilla aporta un toque de profesionalidad a nuestra pgina adems de ofrecer informacininteresante a los visitantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2106.32. Pgina principal de la agencia de viajes Los Alpes. Aunque no podemos ver los bordes de las tablaspodemos intuir por donde iran. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2126.33. Visualizacin de medida.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2166.34. Resultado final de la pgina mes.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.35. Resultado final de la pgina superOFE.htm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2227.1. Usando adecuadamente las etiquetas del lenguaje HTML y con algunos conocimientos de diseo sepueden crear webs tan atractivos como este. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2257.2. En el CERN (http://www.cern.ch ), un instituto de fsica con poca relacin con Internet, se engendr laidea del World Wide Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2277.3. El World Wide Web Consortium, o W3C, fue creado para regular el World Wide Web. Esta regulacinincluye una estandarizacin del lenguaje HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2307.4. Tanto Microsoft como Netscape crearon sitios web especialmente dedicados a programadores deInternet en el que informan de las tecnologas propietarias soportadas por sus navegadores. . . . . . . . . 2327.5. En el servidor web del W3C podemos ver la especificacin del nuevo estndar HTML 4.0. La direccinconcreta es: http://www.w3c/TR/PR-html40/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2357.6. En esta figura vemos un excelente uso de los frames o marcos, que dividen la pantalla en cuatro partespara facilitar la navegacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2397.7. En HTML 3.2 existen 3 tipos de vietas para las listas no ordenadas. Con el atributo TYPE podemoselegir entre ellos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2427.8. Comparando esta figura con la anterior vemos la similitud entre las distintas vietas de los elementosde las listas usadas por Netscape Navigator e Internet Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

    xii

  • Curso completo de HTML

    7.9. Usando el atributo TYPE en una etiqueta LI podemos cambiar la vieta de un nico elemento de listasin afectar a los dems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2447.1. Los cinco tipos distintos que puede tomar el atributo TYPE para listas ordenadas . . . . . . . . . . . . . . 2457.10. Con el atributo TYPE podemos elegir entre 5 tipos distintos de numeracin en las listas de HTML. Enesta figura vemos los 4 nuevos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2467.11. Si usamos el atributo START podemos variar el nmero (o letra en estos casos) por los que se empiezana numerar los elementos de la lista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2477.12. Con el atributo VALUE podemos indicar el valor de la numeracin de cada uno de los elementos delas listas numeradas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2487.13. Con la nueva etiqueta DIV podemos cambiar el alineamiento de todo tipo de elementos HTML(imgenes, listas, prrafos, etc.) de una sola vez. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2507.14. Los buscadores permiten a los navegantes encontrar la informacin que buscan. Usando la etiquetaMETA podemos proporcionarles datos para que incluyan nuestras pginas en sus bases de datos. . . . 2538.1. Los frames nos permiten dividir la ventana del navegador en varias secciones diferentes. En este casola ventana a sido dividida en 4 frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2578.2. En el Web www.chess.com podemos ver un excelente ejemplo del uso de frames para mantener visibleslas barras de navegacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2598.3. Usando el atributo TARGET podremos lograr que pulsando el enlace de un frame el resultado semuestre en otro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2618.4. Este debe ser el resultado final tras llevar a cabo todos los pasos en el ejemplo de uso del atributoTARGET para crear varias ventanas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2648.5. Variando la direccin de base con la etiqueta BASE variar el significado de las direcciones relativas.2678.6. En este Web pulsando sobre los enlaces del frame izquierdo nos movemos por los diferentes temas delframe derecho. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2688.7. Los Webs con frames constarn de varios documentos HTML. En este ejemplo al haber tres framessern necesarios 4 documentos HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2708.8. La estructura de las pginas con frames es diferente a las que no tienen. La principal diferencia es lasustitucin de BODY por FRAMESET. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2708.9. Como vemos la ventana del navegador ha quedado dividida en dos columnas con un ancho del 20% ydel 80% del ancho total de la ventana. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2728.10. Las dos primeras columnas ocupan un ancho absoluto de 100 y 300 pixeles. La tercera al haber usadoel asterisco ocupar el resto, que en este ejemplo son 372 pixeles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2738.11. En esta ocasin vemos un ejemplo del uso de FRAMESET combinando los distintos modos de indicarel tamao y el ancho resultante de cada uno para una ventana con 800 pixeles de ancho. . . . . . . . . . . . 2758.12. Es posible usar los atributos COLS y ROWS simultneamente para dividir la ventana en varias filas ycolumnas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2778.13. Ejemplo completo de una pgina con frames formado por un frame izquierdo pequeo que puedeservir de ndice y otro derecho con el contenido principal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2818.14. Usando los diferentes atributos de la etiqueta FRAME podemos tener un mayor control sobre lasdiferentes caractersticas de los frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2838.15. El navegador NCSA Mosaic no soporta frames, con lo que los usuarios de dicho navegador no vernnada si no usamos la etiqueta NOFRAME. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2858.16. En este caso s hemos usado NOFRAMES ofreciendo al navegante un enlace para ver una versin sinframes de las pginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2868.17. Para conseguir estructuras de frames ms complejas puede anidarse la etiqueta FRAMESET. En estafigura se indica cmo hacerlo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2878.18. Nuestra primera pgina con frames. La ventana est dividida en 3 apartados (los frames) el izquierdoes el ndice, el superior el ttulo y el central el que tiene el contenido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2908.19. En general los navegadores dibujan lneas con aspecto 3-D para separar los frames. . . . . . . . . . . . 292170. Con el atributo BORDERCOLOR podemos elegir el color que queramos para los bordes de los frames.293

    xiii

  • Curso completo de HTML

    171. Usando FRAMEBORDER="0" ocultamos los bordes de los frames con lo que se consigue una granmejora en la apariencia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2958.22. An usando el atributo FRAMEBORDER si hacemos la ventana del navegador pequea aparecernbarras de desplazamiento en cada uno de los frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2978.23. Con el atributo BORDER podemos cambiar el grosor de los bordes. En este caso el borde horizontaltiene un grosor de 20 pixeles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2988.24. Representacin de los cuatro valores especiales del atributo TARGET: _self, _parent, _topy _blank.300175. Pgina Web de Los Alpes creada en la prctica 4 de este curso. Ahora la modificaremos para crear unaversin con frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302176. El frame superior ser de 163 pixeles, mientras que el inferior ocupar el resto del espacio de la ventanadel navegador. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304177. El contenido de banner.htm, el logo y encabezado de Los Alpes as como los botones de navegacin,sern mostrados en el frame superior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306178. Todos los botones tienen como destino el frame principal. Por tanto es conveniente usar la etiquetaBASE con el atributo TARGET=principal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308179. Pgina sin cabecera, lista para ser insertada en un frame. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309180. Estructura de frames mostrando la pgina main.htm en el frame central. . . . . . . . . . . . . . . . . . . . . . 311181. Los frames flotantes nos permiten insertar un documento HTML completo en una pgina Web. . 313182. Los navegadores que no soporten frames flotantes mostrarn el cdigo alternativo incluido entre lasinstrucciones y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314183. Usando FRAMBORDER=0 podemos eliminar el borde del frame. Sin embargo si el contenido no cabeen frame la barra de desplazamiento s se mostrar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316184. Con los atributos ALIGN, MARGINWIDTH y SCROLL podremos controlar las diversas caractersti-cas de los frames flotantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31710.2. Netscape Navigator permite configurar en este cuadro de dilogo las aplicaciones externas asociadasa cada navegador. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32010.3. RealAudio es un formato de sonido especificamente creado para la red el software necesario para sureproduccin puede ser obtenido a travs de su Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322tabla 10.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32410.4. La organizacin MPEG es la creadora de este estndar que permite la codificacin de audio y vdeode gran calidad en archivos de pequeo tamao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324tabla 10.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32510.5. Al pulsar sobre un enlace a un archvo que no puede mostrar l mismo, Internet Explorer muestra estecuadro de dilogo preguntando al usuario que quiere hacer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32610.6. Cuadro de dilogo para archivos externos mostrado por Netscape Navigator. Si elejimos open laaplicacin externa asociada ser ejecutada. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32710.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero impactantes como es el casodel web de Spectacle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33010.8. La marquesina animada muestra un texto que va movindose de derecha a izquierda en la ventana delnavegador. En esta figura vemos 7 momentos consecutivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33310.9. La etiqueta MARQUEE est acompaada de numerosos atributos que nos permiten controlar laapariencia de la marquesina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33610.10. Internet Explorer 4.0 incluye una serie de nuevas tecnologas entre las que destacan los nuevoscontroles multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33810.11. Macromedia distribuye a travs de su Web el plug-in necesario para visualizar en un Web animacionescreadas por su herramienta Director. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34010.12. Si el navegador tiene algn problema con el plug-in muestra un icono y un espacio en blanco quepuede estropear la apariencia de nuestra pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34210.13. Usando los atributos WIDTH y HEIGHT de la etiqueta EMBED podemos lograr que los controlesde sonido aparezcan. Internet Explorer usa los controles de Windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . 34410.14. El plug-in usado por Netscape navigator ha creado sus propios controles que tienen la capacidadaadida de poder controlar el volumen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

    xiv

  • Curso completo de HTML

    11.1. En la pgina Web de Sun Microsystems, creadora del lenguaje Java, podemos encontrar gran cantidadde documentacin y ejemplos de sus posibilidades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34711.2. Gamela es una excelente fuente de recursos Java conocida desde hace tiempo. En la actualidad sudireccin est en proceso de cambio a: www.developer.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34811.3. Este es el aspecto que muestra nuestro primer applet insertado en una pgina Web. En un navegadorcon soporte Java podemos pulsar sobre los botones para obtener diferentes sonidos. . . . . . . . . . . . . . . . . 35111.4. Usando applets Java podemos insertar juegos interactivos como en este caso. Usando el atributoCODEBASE no es necesario que el applet est en nuestro servidor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35311.5. Usando los atributos ALIGN, VSPACE y HSPACE podemos insertar un applet rodeado de texto. 35411.6. El applet Animator.class es uno de los ms conocidos y usados en las pginas Web por la facilidad queofrece para crear animaciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35711.7. El navegador Opera no soporta la tecnologa Java, por lo que mostrar el cdigo alternativo, en estecaso uno de los GIFs de la animacin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35811.8. Resumen de todos los atributos de la etiqueta APPLET y de su subetiqueta PARAM. . . . . . . . . . . 35911.9. La etiqueta OBJECT ha sido creada por los expertos del Web Consortium para englobar la inclusinde todo tipo de objetos en las pginas Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36111.10. ForecastX ofrece un servicio meteorolgico en tiempo real gracias a la tecnologa ActiveX. . . 36411.11. Usando este control ActiveX podemos crear efectos variados con texto, con lo que pueden sustituirel uso de imgenes con la consiguiente disminucin tiempo de carga de nuestras pginas. . . . . . . . . . . 36611.12. Usando el mismo control ActiveX que en la figura 11.25 pero con un cdigo algo ms complejopodemos crear este efecto tan atractivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36812.1. En la pgina principal de Tower Communications vemos un formulario que es usado para permitir alos visitantes introducir una cadena de texto que deseen buscar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37112.2. En otra seccin de la pgina de Tower Communications vemos un formulario ms complicado formadopor numerosas cajas de texto y otros elementos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37312.3. Nuestro primer formulario est compuesto por una caja de texto. Para introducirla hemos usado laetiqueta INPUT con TYPE="text". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37512.4. Pulsando sobre la caja de texto nos aparecer un cursor parpadeante que nos indica que podemosempezar a escribir texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37612.5. Usando el cdigo podemos insertar un botn de envo de manera que alpulsar sobre l se envan los datos del formulario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37812.6. Con el atributo VALUE podemos cambiar el texto por defecto del botn de envo por uno de nuestraeleccin. El ancho del botn se adaptar a la longitud del texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37812.7. El atributo SIZE nos permite variar la longitud de la caja de texto. Debemos tener en cuenta que endiferentes navegadores un mismo valor no se corresponde a una misma longitud. . . . . . . . . . . . . . . . . . . 38012.8. El atributo ALIGN de la etiqueta INPUT nos permite alinear los controles. En este caso vemos unacaja de texto alineada a la izquierda (ALIGN="left"). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38212.9. Las cajas de texto para claves muestran asteriscos en lugar del texto que escribimos para aumentar laconfidencialidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38412.10. Los botones de eleccin permiten elegir entre un conjunto de opciones, de las cuales podemos elegirslo una. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38512.11. En un mismo formulario podemos incluir varios grupos de botones de eleccin. Los visitantes podrnseleccionar una opcin en cada uno. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38612.12. Las cajas de seleccin son independientes unas de otras, por los que es posible tener variasseleccionadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38812.13. Este es el aspecto que tiene el cdigo que hemos escrito hasta ahora. En el formulario de la claveslo se podrn insertar 4 caracteres. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39112.14. Este es el resultado final del formulario del ejercicio 12.1 en el que destaca el uso de una imagenpersonalizada como botn de envo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39312.15. El botn de borrado () permite al usuario borrar los datos introducidos yrecuperar los iniciales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39612.16. Los botones genricos tienen multitud de usos, entre los ms usados nos encontramos con el botnenlace y el botn para cerrar una ventana, que, como todos, requieren hacer uso de un lenguaje de script.

    xv

  • Curso completo de HTML

    40012.17. Los navegadores en modo texto como Lynx tambin son capaces de mostrar formularios, que aunqueno sean grficos tienen la misma funcionalidad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40312.18. En esta figura podemos apreciar cajas de texto y de clave, botones de eleccin y cajas de seleccintal y como son mostradas por Lynx. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40312.19. El atributo TITLE es una extensin de Microsoft que permite dar una descripcin a los controles queser mostrada en un bocadillo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40512.20. Los atributos DISABLED y READONLY permiten deshabilitar un control de manera que slo sirvapara mostrar datos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40712.21. Las reas de texto ( ) permiten al usuario introducir texto de variaslneas como si de un sencillo editor de texto se tratara. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40912.22. Lynx muestra las reas de texto como un conjunto de lneas (tantas como hemos indicado con elatributo COLS) sobre las que el usuario podr escribir. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41012.24. Los cuadros de seleccin permiten mostrar varias opciones para que el usuario pueda elegir. En estaocasin vemos su forma de persiana desplegable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41312.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de seleccin semuestre como una lista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41412.26. Usando el atributo MULTIPLE el usuario podr seleccionar varias de las opciones que se ofrecen enla lista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41612.27. El navegador Lynx tambin es capaz de mostrar cuadros de seleccin, por lo que podremos usarlocon libertad. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41712.28. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes. . . . . . . . . . . . . . . . . . . . . . . . 41912.29. El primer paso ser modificar la plantilla, cambiando el ttulo y la fecha y escribiendo un textointroductorio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41912.30. Usando los conocimientos adquiridos en este captulo utilizamos las etiquetas INPUT y SELECTpara crear los controles del formulario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42112.31. Usando una tabla de nueve filas y tres columnas controlamos la disposicin de todos los elementosde la tabla para conseguir un diseo profesional. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42312.32. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Webcreado en la prctica 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42512.33. Como mtodo alternativo a los CGIs pueden mandarse los datos del formulario por correoelectrnico. En ese caso el navegador pedir al usuario confirmacin de la accin. . . . . . . . . . . . . . . . . 42812.33. Como mtodo alternativo a los CGIs pueden mandarse los datos del formulario por correoelectrnico. En ese caso el navegador pedir al usuario confirmacin de la accin. . . . . . . . . . . . . . . . . 430

    xvi

  • Introduccin al lenguaje HTMLJorge FerrerVictor Garca

    Versin 1.0

    Copyright Jorge Ferrer y Victor Garca. Se otorga permiso para copiar, distribuir y/o modificar este doc-umento bajo los trminos de la Licencia de Documentacin Libre GNU, Versin 1.1 o cualquier otra ver-sin posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en:http://www.gnu.org/copyleft/fdl.html

    En esta primera entrega de este Curso completo de HTML haremos un primer estudio del lenguaje HTML yanalizaremos las herramientas que son necesarias o al menos recomendables para realizar una pgina web. Ademsaprenderemos qu es y qu no es el lenguaje HTML; cual es la estructura de una pgina web; como dar un ttuloa nuestra pgina y como crear encabezados y texto en ella.

    IntroduccinEl World Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi infinita. Pero estainformacin debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidadbsica donde est almacenada esta informacin son las pginas Web. Estas pginas se caracterizan por contenertexto, imgenes, animaciones... e