Crea tu Web: Indice de diseño

El manual completo HTML en formato PDF
¡ sólo
4 €!
Tras confirmar el pago recibirá
el archivo en su email
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Formularios avanzados
      Controles avanzados en formularios
      Con lo que has visto en la sección anterior de formularios podrás perfectamente incoiporar estos elementos de interaccón a tu página web, pero los navegadores modernos (MSIE 5+ y Netscape 6+) permiten el uso de algunas características extras añladidas por el estandard HTML 4.0, características que básicamente mejoran la estética y facilitan el uso de estos elementos.
      arriba


      Botones

      Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite enriquecer la etiqueta de texto que hasta ahora tenían los botones de formulario. Ahora estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con un texto. POr ejemplo el siguiente código

      <BUTTON TYPE="button">
      Inicio <img src="imgs/im_crear/bolamas.gif" width="10" height="10"> </BUTTON>

      Los parámetros de dicha etiqueta son TYPE, que podrá tomar los valores SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.

      arriba


      Etiquetas

      Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir ahora el texto que suele acompañar a los campos que debe rellenar el usuario son solo eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y podemos seleccionar éste pulsando sobre la etiqueta. Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el mismo valro que este for

      <INPUT ID="Curso" TYPE=CHECKBOX>
      <LABEL for="Curso"> Me gusta este curso
      </LABEL>
      

      Compara con este otro ejemplo aparentemente igual al anterior.

        <INPUT NAME="Curso" TYPE=CHECKBOX>
        Me gusta este curso/a
      
      Me gusta este curso

      En el primer caso el click sobre la etiqueta actua igual que sobre el control.

      arriba


      Agrupando elementos

      HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrándolos dentro de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un rectángulo con el título que le demos mediante la etiqueta LEGEND.

      <FIELDSET>
        <LEGEND>Tus datos</LEGEND>
        <LABEL>
          Nombre:
          <INPUT TYPE="text" name="nombre">
          <br>Edad:
      <INPUT TYPE="text" name="edad"> </LABEL> </FIELDSET>
      Tus datos

      La posición del título (LEGEND) puede controlarse usando el parámetro ALIGN, que por defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT (derecha) .

      arriba


      Desactivando elementos

      Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los sobreescriba. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar que no son editables. Para ello sólo tenemos que indicarle el parámetro DISABLED:

      <LABEL DISABLED>Origen:
        <INPUT TYPE=TEXT DISABLED>
      </LABEL>
      arriba


      Comunidad Virtual. Alojamiento gratis