Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • 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
      Los scripts
      Los scripts

      Un script es un programa insertado dentro del documento HTML y que es interpretado y ejcutado por el navegador del usuario. Por tanto estos programas se ejecutan en el ordenador del usuario bien sea directamente (al leer la página) o cuando se produce un suceso o evento particular, como puede ser el pulsar sobre un enlace o mover el ratón o cargar una imagen...

      Estos scripts permiten crear páginas dinámicas, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños efectos visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas CGI (escritos en lenguajes como Perl o PHP).

      El primer lenguaje usado para crear scripts fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado lejanamente en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.

      Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0, pero al mismo tiempo introdujo otro lenguaje con las mismas funciones: el VBScript, una derivación de BASIC. Pero este intento no llegó muy lejos, y el VBScript ha quedado para otras aplicaciones de Microsoft, como Access o Word.

      arriba


      Javascript

      Aunque este curso está enfocado a aprender HTML, vamos a detenernos un poco para mostrar la utilidad de los lenguajes de script. Para ello vamos a realizar una pequeña introducción al Javascript. Si te sientes interesado, visita Javascript Desde Cero donde ecnontrarás bastante material para aprender este lenguaje.

      Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el tradicional mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje. El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.

      holamundo.html
      <HTML>
      <HEAD>
        <SCRIPT LANGUAGE="JavaScript">
        <!---
          function HolaMundo() {
            alert("¡Hola, mundo!");
          }
        // --->
        </SCRIPT>
      </HEAD>
      <BODY>
      <FORM>
        <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
      </FORM>
      </BODY>
      </HTML>

      Y aquí está nuestro ejemplo funcionando:

      Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene la página anterior:

      <SCRIPT LANGUAGE="JavaScript">
      </SCRIPT>

      Dentro de estos elementos será donde se puedan poner funciones en JavaScript. Puedes poner cuantos quieras a lo largo del documento y en el lugar que más te guste. Si un navegador no entiende la etiqueta <SCRIPT> escribirá lo que hay entre medias de estos elementos, así que lo encerramos entre comentarios por si las moscas.

        function HolaMundo() {
          alert("¡Hola, mundo!");
        }

      Esta es nuestra primera función en JavaScript. En el código de la misma vemos una llamada al método alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales en una función: no los reconoce. Así que pondremos directamente "¡" arriesgándonos a que salga de otra manera en ordenadores con un juego de caracteres distinto al del nuestro.

      <FORM>
        <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()">
      </FORM>

      Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: onClick. Es un evento. Cuando el usuario pulsa el botón, el evento onClick se dispara y ejecuta el código que tenga entre comillas, en este caso la llamada a la función HolaMundo(), que tendremos que haber definido con anterioridad.

      Este ejemplo muestra una pequeña parte de las funcionalidades del JavaScript. De hecho, su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un vistazo a Javascript Desde Cero.

      arriba


      Comunidad Virtual. Alojamiento gratis