y su cierre

Este texto se alineará al centro

Este texto se alineará a la derecha

Este texto se alineará a la izquierda

Las listas no ordenadas van dentro de la etiqueta
y de su cierre
. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta
• y su cierre. Si no le indicamos nada a la etiqueta
• , ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”. Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Vamos con un pequeño ejemplo en código:
  • Esto es un tipo de punto.
  • Este es otro.
  • Y este es otro diferente.
  Cuyo resultado visual será el que veremos a continuación:
  
  o Esto es un tipo de punto. 
  
  Este es otro.
  
  
  
  Y este es otro diferente.
  
  24
  
  INTRODUCCIÓN A PROGRAMACIÓN WEB
  
  Listas ordenadas: Las listas ordenadas van enmarcadas dentro de las etiquetas . Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas:
• . Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos. En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número. Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:
  
  
• Este será el número 20.
• Este será el 21.
• Este será el 22. Y así sucesivamente.


Y el resultado será el siguiente:

1. Este será el número 20. 2. Este será el 21. 3. Este será el 22. Y así sucesivamente.

Listas de definiciones: , y . Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas , y . Vamos a explicarlas por partes: La etiqueta viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.

25

INTRODUCCIÓN A PROGRAMACIÓN WEB

La etiqueta viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de iría el título de la definición. La etiqueta viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición. Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación. Aquí podemos ver un ejemplo de código de dos listado de definición:

Aquí va el término que definiremos Y aquí dentro irá la definición propiamente dicha.

Aquí va la segunda definición Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.

Cuyo resultado será el siguiente: Aquí va el término que definiremos Y aquí dentro irá la definición propiamente dicha. Aquí va la segunda definición Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.

13. IMÁGENES Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. Vamos a mostrarte como puedes incluir una imagen y los atributos que puedes darle a la misma. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se

26

INTRODUCCIÓN A PROGRAMACIÓN WEB

escribe así: , siendo "x" la dirección o la url dónde se encuentra situada la foto. La foto podemos alinearla en la página como queramos mediante "align", utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro. También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x", siendo "x" la descripción que le gente leerá al pasar el ratón por encima. Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan. Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen. Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál quieres que sea el grosor del borde. Así las cosas, deberemos escribir este código...

...para poder ver esta preciosa fotografía

27

INTRODUCCIÓN A PROGRAMACIÓN WEB

14. MAPAS DE IMÁGENES Html nos permite la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos. Las fotos en las que queramos introducir un mapa de imágenes deberán ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos recomendables para todos los navegadores. A continuación vamos a explicarte como podemos crear este tag html y los diferentes atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa tarea. El tag map Cómo ya podemos suponer, es el tag necesario para poder crear un mapa de imágenes en html. Por supuesto, posee un cierre: . Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: Atributo area El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos al destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos que indicar al navegador para que la interprete. La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de dicha área. También podemos escribirle un texto alternativo, un “alt”, al área. Existen tres tipos de áreas. Vamos a explicártelas a continuación. Atributo shape Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas características diferentes. Vamos a profundizar un poco más en ellas. 28

INTRODUCCIÓN A PROGRAMACIÓN WEB

shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para definir la zona que incluirá ese mapa deberemos definir la esquina superior izquierda del área y la esquina inferior derecha. shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros sólo debemos indicarle el centro de la circunferencia y el radio del mismo. shape=“poly” : Este tipo de área es la más versátil de todas, la que más posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para crearla debemos indicarle los diferentes puntos del polígono que hagamos y de una forma ordenada, siguiendo el camino que nosotros hemos trazado para hacerlo. Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo. Atributo coords El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por comas. Y el dónde nos dirigirá esa área nos lo indicará el atributo “href” Atributo href Aquí deberemos indicar el destino del área. usemap Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace gracias al atributo usemap. Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del mapa de imágenes que queramos utilizar. Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo. Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un área circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de este tutorial. También hemos hecho un área poligonal en la bola negra del fondo que te llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen, que te redigirá al inicio del tutorial de php. El código nos ha quedado de la siguiente manera:

29

INTRODUCCIÓN A PROGRAMACIÓN WEB





Y el resultado lo verás si clícas en las zonas adecuadas:

30

INTRODUCCIÓN A PROGRAMACIÓN WEB

15. ENLACES Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. Así pues, vamos a ello:

La etiqueta Es dentro de esta etiqueta y de su cierre () dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así. Atributo href Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta este atributo. La etiqueta completa nos quedaría así: Pincha aquí para ir al destino del enlace Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y las urls con dirección absoluta. Vamos a explicarlas a continuación: Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente: Artículo de enlaces html Si pincháramos en el enlace iríamos directamente al artículo de mapas de imágenes del tutorial. Fijaros en lo que hablábamos: podemos apreciar todas las partes de la url. En las direcciones relativas vemos que no está la url completa. En este tipo de direcciones, las partes que faltan de la dirección el navegador las genera de la

31

INTRODUCCIÓN A PROGRAMACIÓN WEB

propia página en la que está el enlace. Por ejemplo, si dentro de la página http://html.hazunaweb.com/112.php encontráramos la siguiente url... Artículo de enlaces html …el navegador entiende que dentro de la página y de la carpeta en la que se encuntra, debe dirigirse al fichero “111.php”. Protocolos Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos a presentar los dos más importantes: http: Este es el protocolo básico de los servidores webs. https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es decir, la información que se envía y se recibe con esa url esta siendo encriptada para que nadie más pueda interceptar y usar esa información. Las páginas con este protocolo son las conocidas como “páginas seguras”. Esta encriptación de los datos produce una pequeña ralentización de la página debido a que los datos se envían cifrados. Mailto La url mailto es aquella que te lleva directamente a una dirección de correo y, más concretamente, a redactar un mensaje. Una dirección mailto sería la siguiente: correodeejemplo@correo deejemplo.com Fíjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar el enlace, hemos puesto la misma dirección que la que va a abrir la url. ¿Por qué? El programa de correo que abre el navegador es aquel que el usuario tenga como predefinido. Nosotros te aconsejamos que como texto para albergar el enlace pongas la dirección de correo electrónico. Windows por defecto tiene predeterminado el Outlook y al pinchar en el enlace lo abre directamente. Muchos usuarios prefieren copiar la dirección y pegarla en su programa de correo. La etiqueta target: La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta la escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos:

32

INTRODUCCIÓN A PROGRAMACIÓN WEB

_self: Es el valor por defecto del parámetro target. El enlace se abrirá en el mismo marco en el que está alojado. _blank: Para hacer que ese enlace se abra en una ventana a parte. _top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos. _parent : Muestra la nueva página en el que contiene al marco donde se encuentra alojado el enlace. La etiqueta la explicamos en otro artículo. Anclas Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del mismo fichero en el que estamos. Para crear un ancla debemos crear primero el lugar al que queremos acceder. Debemos escribir lo siguiente:

Y después debemos escribir un enlace con el código siguiente: Enlace para acceder al ancla Yo he situado un ancla justo al principio de este artículo. Si pinchas en el siguiente enlace acudirás a ella y verás el efecto. Ir al principio del artículo gracias al ancla Y para terminar te mostraremos como podemos hacer que un enlace nos dirige directamente a una imagen. Le hemos indicado al enlace que nos abra la imagen en una ventana diferente gracias al target:blank. El código es el siguiente: Ir a ver el ejemplo de prueba Y el resultado le verás pinchando en aquí: Ir a ver el ejemplo de prueba Y terminamos con otro tipo de enlace. Esta vez el enlace está en la imagen. Si pinchas en ella, irás al artículo dónde vimos por primera vez esa fotografía. Primero te mostramos el código:

33

INTRODUCCIÓN A PROGRAMACIÓN WEB

Y aquí tienes la imagen con el enlace. Se abrirá en una ventana nueva gracias al target blank.

rel="nofollow" para buscadores Aunque esto no es un curso sobre SEO (optimización para buscadores), es importante comentar en este artículo que los enlaces "normales" orientan a Google a la hora de saber qué páginas son importantes y cuáles no. Una páginas con muchos enlaces suele indicar que es más importante que otra que no tiene enlaces. En ocasiones podemos querer poner un enlace pero no transmitir peso, es decir, no indicar a Google que esa página es importante. Podemos querer hacerlo por muchos motivos, por ejemplo, si los usuarios de nuestra página pueden poner enlaces, tal vez no queramos que éstos nos llenen la web de spam poniendo enlaces solo para ganar fuerza. También podemos querer hacerlo internamente dentro de nuestra web porque no queramos que ciertas secciones sean leídas e indexadas por Google, o simplemente porque no las consideremos importantes para el buscador, añadiendo el atributo rel="nofollow" dentro de la etiqueta indicamos a Google, y otros buscadores, que no transmitan fuerza a dicho enlace. En esta misma página también podéis ejemplos dicho atributo. Por ejemplo, con

Contacto Indicamos que no transmita peso a la sección de contacto. 16. FORMULARIOS I: INTRODUCCIÓN Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones. Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento. Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es y su cierre . Todo lo que vaya dentro de estas etiquetas, serán partes del formulario. La etiqueta tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación. action El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios. Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: . Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc. Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera: . Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc. method

35

INTRODUCCIÓN A PROGRAMACIÓN WEB

Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post. El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio. “get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &. Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www............?nombre1=valor1&nombre2=valor2 El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición. enctype Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario. La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype="text/plain"). Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario estándar a un correo eléctrónico:

17. FORMULARIOS II: CAMPOS DE TEXTO Los campos de entrada de los formularios se definen mediante el tag y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas. Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características. Las cajas de texto básicas: La caja de texto básica se escribiría de la siguiente forma:

36

INTRODUCCIÓN A PROGRAMACIÓN WEB

y su apariencia sería la siguiente:

Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas. Podemos completar el estilo de esta caja gracias a los siguientes atributos: size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda. maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength. value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo. name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue. Mira el siguiente código:

Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él. El resultado sería el siguiente: Nombre

Campos de texto largo: 37

INTRODUCCIÓN A PROGRAMACIÓN WEB

Un es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc. Su etiqueta es y su correspondiente cierre . Todo lo que vaya dentro de estas etiquetas formará parte del texto. Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo. Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente: Escribe aquí tus comentarios Y se vería de la siguiente forma:

Textos con passwords En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece. El siguiente código es de un campo con datos codificados:

38

INTRODUCCIÓN A PROGRAMACIÓN WEB

Y este sería el resultado obtenido:

18. FORMULARIOS III: LISTAS DE OPCIONES Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta y a su cierre. Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el código de la lista de selección podría ser el siguiente:

Coche Avión Tren

Y el resultado quedaría de la siguiente manera. Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren.

En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente:

Coche

39

INTRODUCCIÓN A PROGRAMACIÓN WEB

Avión Tren

Para obtener el siguiente resultado: Coche Avión

También podemos definir si queremos que se pueda elegir más de una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero cómo quedaría nuestro código.

Coche Avión Tren

Y aquí comprobarás lo que nos permite hacer este atributo. Coche Avión

Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al principio no sea la primera que está en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opción que queramos que aparezca como seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción del tren.

Coche Avión Tren

40

INTRODUCCIÓN A PROGRAMACIÓN WEB

Y aquí puedes ver cual ha sido el resultado. Tren

Por último esta el atributo value. Este atributo es muy útil para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número o una letra a cada opción. El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podríamos valorar nuestras opciones de la siguiente manera:

Coche Avión Tren

Y en el supuesto de seleccionar por ejemplo la opción del avión, al programa (o al correo electrónico) le llegaría el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones. Listas de botones: radio A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con botones de tipo radio. Estos botones se escriben mediente la etiqueta type=”radio”. Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera: Coche
Avión
Tren Y el cambio de aspecto es evidente. Aquí lo tenéis:

41

INTRODUCCIÓN A PROGRAMACIÓN WEB

Coche

Avión

Tren

Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción avión: Coche
Avión
Tren Y observa el resultado que obtenemos… Coche

Avión

Tren

Listas de cajas: checkbox. Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuación. El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”. Otra diferencia es que así como las listas de botones tipo “radio” sólo permitiían elegir una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.

42

INTRODUCCIÓN A PROGRAMACIÓN WEB

Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:

Coche
Avión
Tren

Y observa a continuación el resultado: Coche

Avión

Tren

19. FORMULARIOS IV: BOTONES SUBMIT Y RESET

Botón de envío Para enviar la información, el formulario necesita de un botón que le indique que el formulario ha concluido y que pueden enviar la información. Los botones de envío se crean con la etiqueta “input” de tipo “submit”. Además, hay que definir el texto que queremos que esté escrito en el botón. Esto lo conseguimos con el atributo “value”. Así, el código de un botón sencillo de formulario sería el siguiente:

43

INTRODUCCIÓN A PROGRAMACIÓN WEB

Obteniendo el siguiente resultado en nuestra Web: Enviar información

Botón de resetear la información Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la información. Para ello es muy útil el botón para borrar la información. El botón se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es “reset” y cambiando el mensaje interno del botón, o sea, el “value”. El ejemplo sencillo de este botón tendría el siguiente código:

Y el resultado de ese código sería este botón: Borrar información

20. FORMULARIOS V: OTROS CAMPOS Hidden El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando al programa de gestión de datos, aparte de los datos enviados por el propio usuario, datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden ser útiles para ayudar al programa en su gestión de los datos del formulario. Lo que hacen es comunicar cierta información al servidor sobre cómo tratar los datos manteniéndose ocultos a la vista de los usuarios. Este tipo de datos ocultos no se muestran en la página, aunque sí pueden ser detectados solicitando el código fuente. El atributo hidden no se llega a usar en páginas escritas en html, sólo en las que empleen también otro tipo de lenguajes.

44

INTRODUCCIÓN A PROGRAMACIÓN WEB

Aquí podemos ver el código de un ejemplo:

image El atributo “image” sirve para personalizar un botón. Es decir, este atributo introduce un botón en una imagen, sustituyendo al formato estándar de botones que ya hemos visto en otros artículos del tutorial. La función de los botones creados de esta forma es igual que la de submit, pero nos permite personalizar este elemento. Un ejemplo de este tipo de botones sería este:



file El atributo file permite al usuario subir archivos. Por supuesto necesitaremos un programa que gestione estos archivos mediante un lenguaje diferente al html. Aquí te hemos escrito un formulario con este tipo de type (type=“file”) para que veas las diferencias con los otros que habíamos visto hasta ahora.






Fíjate como tenemos que cambiar el enctype, la forma de enviar la información, ya que ahora no vamos a enviar texto plano, sino archivos. 45

INTRODUCCIÓN A PROGRAMACIÓN WEB

Nosotros tenemos que definir el tamaño del campo y su nombre. El botón "Examinar" es creado automáticamente por el navegador. Al pinchar en él, podremos examinar nuestro disco duro para encontrar la imagen que deseemos subir. 21. FORMULARIOS VI: EJEMPLO DE FORMULARIO Como ejercicio final hemos hecho un formulario intentando reunir en él todo lo que hemos dado y, sobre todo, todas las opciones que tenemos a la hora de confeccionar un formulario. El formulario lo tienes en el siguiente enlace: Lo idóneo es que lo observes y trates de hacerlo tú, sin tener que mirar el código que nosotros hemos utilizado. Por si necesitarás hacerlo, aquí te dejamos el código:

Nombre:

Apellidos:

Correo electrónico:

Población:

Provincia:

Edad: 0-20 20-40 40-60 60-100

¿Cómo nos conociste? A través de un amigo. A través de un buscador. Navegando por la red. Otros

Opinión sobre nuestra página web
Escriba aquí su opinión...

46

INTRODUCCIÓN A PROGRAMACIÓN WEB



Tiene alguna sugerencia...
Escriba aquí sus sugerencias...

¿Cúanto navegas por intenet? (Señala la opción que más se acerque)


2 horas al día. 4 horas al día. 10 horas a la semana. 20 horas al mes.





22. FRAMES Un Frame (en castellano "marco"), es una ventana independiente dentro de la propia ventana del navegador. Cada frame tiene sus propios bordes y también sus barras de desplazamiento. Mediante un frame conseguimos dividir la ventana del navegador en varias subventanas independientes entre ellas. Cada una de estas subventanas posee un documento html propio. Vamos a ver cómo es el cuerpo de un frame y su estructura para posteriormente explicar cada parte del marco. Podemos ver como es diferente al tipo de estructura que habíamos visto hasta ahora:

Ejemplo de frame.





Si tu navegador no acepta frames, estarás viendo este mensaje.

47

INTRODUCCIÓN A PROGRAMACIÓN WEB

¡Lo sentimos!





Lo primero que salta a la vista es que no encontramos la habitual etiqueta html . Ésta es sustituida por que indica que esa ventana va a dividirse en diferentes marcos. Dentro de la etiqueta frameset debemos indicar el número de marcos que van a haber (ya sea en columnas “cols” o en filas “rows”) y el tamaño de cada uno de ellos. Este tamaño puede asignarse por porcentaje, por números absolutos o sobre el espacio sobrante. Esta forma de tamaño se indica mediante un asterisco y le estamos indicando al marco que coja el espacio sobrante que dejan los demás marcos. Podemos también colocar un frameset dentro de otro. Es decir, podemos dividir un marco de frameset en otros submarcos. Esto se hace colocando la etiqueta dentro de otra de ellas. Otra parte destacable de la estructura es . Como vemos, debemos escribir tantos como números de éstos hayamos creado en . En nuestro caso eran dos, así que hemos escrito dos . tiene dos atributos básicos y obligatorios. El primero es el atributo name, en el que debemos indicar el nombre de cada uno de los marcos. El segundo es la fuente o la dirección del documento html que ocupará dicho . Vemos que también hemos escrito la etiqueta . Esto es para el supuesto de que el navegador no acepte frames. Es muy poco probable, pues hoy en día casi todos los navegadores los aceptan, pero por si acaso debemos ponerlo. En caso de no aceptarlos, saldrá el texto que hayamos puesto para esos supuestos. La estructura de los frames poco a poco se va usando menos. De todas formas, aquí te dejamos un pequeño ejemplo de un frame para que te hagas una idea aproximada de cómo es su estructura. A continuación te vamos a presentar el código del documento del ejemplo. Primero te mostraremos el código del frame:

Ejemplo de frame.

48

INTRODUCCIÓN A PROGRAMACIÓN WEB





Si tu navegador no acepta frames, estarás viendo este mensaje. ¡Lo sentimos!





Este sería el código de frame-ejemplo-2.html:

Página indice del ejemplo de frames

Aquí puedes ver la página índice del ejemplo de frames que te estamos presentando.

Y este el código de frame-ejemplo.html:

49

INTRODUCCIÓN A PROGRAMACIÓN WEB

Documento introducción del ejemplo de frames

Y aquí iría el artículo de introducción. Nosotros hemos querido dejarte este pequeño texto a modo de ejemplo.

23. IFRAMES En otro artículo de la Web te presentamos lo que eran los frames y vimos su estructura y sus utilidades. Ahora te vamos a presentar los iframes. Éstos también nos permiten mostrar otras urls dentro de nuestra ventana principal, pero con un mayor control y con unas ventajas mayores que te mostraremos a lo largo del artículo. Los frames requerían de una página vacía para insertar allí los marcos. Esto provocaba una ralentización para el usuario, ya que primero debía cargarse la página principal y luego ya se cargaban los marcos. Con los iframes no pasa eso ya que la página principal, donde va albergado nuestro iframe, está lleno de contenido, por lo que el usuario recibe información desde el principio. El uso habitual de los iframes es para mostrar publicidad o Webs de colaboración. Vamos a mostrarte el código de la estructura básica de un iframe para poder explicarte sus partes.

Iframes

Texto alternativo para navegadores que no aceptan iframes



50

INTRODUCCIÓN A PROGRAMACIÓN WEB

Como vemos, la estructura es similar a cualquier documento html que hemos visto anteriormente, con su cabecera (), su título () y su contenido visual dentro de . Como vemos en el código anterior, debemos definir el tamaño del marco del iframe y definir si queremos que haya barra desplazadora o no. Ésta opción la especificamos gracias al atributo "scrolling". Su valor por defecto es "auto", aunque podemos definir si queremos barras desplazadoras ("yes") o si no las queremos ("no"). El iframe debe tener una fuente, que será la url que muestre en el marco que hemos creado. En nuestro caso hemos puesto la página de inicio de este tutorial html. Hemos querido presentarte un ejemplo de iframe. Podrás verlo si pinchas en el siguiente enlace: Ver ejemplo de iframe. Para ver su código selecciona en el navegador la opción de ver el código fuente de la página. 24. MARQUEE La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "" y su cierre "". El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos: align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom"). bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento. height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma. scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles por movimiento.

51

INTRODUCCIÓN A PROGRAMACIÓN WEB

scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20. loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que se repita sólo 10 veces, su loop será el siguiente: Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetirá constantemente. direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo. behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente. Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina. Y el código de nuestro marquee es el siguiente: Estás viendo el ejemplo que hemos hecho nosotros.

25. HTML5 El lenguaje básico con el que se construyen las páginas webs, el HTML (HyperText Markup Language), recibe una completa reconversión con esta quinta versión, un nuevo estándar del lenguaje HTML que nos permite englobar las nuevas tecnologías web de desarrollo de aplicaciones web (HTML5, CSS3 y Javascript) en un solo estándar. La última versión de HTML4 que conocíamos databa de 1999. El nuevo HTML5 ofrece características mejoradas (y necesarias) para la creación de aplicaciones modernas que se basan en un navegador, gracias principalmente al uso de frameworks como por ejemplo jQuery. Con esta variante del lenguaje podemos 52

INTRODUCCIÓN A PROGRAMACIÓN WEB

crear páginas web mucho más dinámicas, con un estilo más parecido a las aplicaciones web.

Novedades de HTML5 Lo mejor de las novedades de este nuevo lenguaje es que HTML5 es 100% compatible con la última versión de HTML4. O lo que es lo mismo, que cualquier código que tengamos creado funcionará sin ningún tipo de problema en HTML5, como nos explican los responsables de Yeeply, directorio de empresas de desarrollo de webs para móviles. Entre las principales novedades que encontramos en esta nueva versión de HTML vemos que:  Se ha reducido considerablemente la necesidad de plugins externos. Por ejemplo podemos reproducir o controlar audios y vídeos sin necesidad de plugins como el de Flash.  Se nos permite crear una mejor estructura de la página web.  El doctype de la web es más corto y simple.  Se puede conseguir que cualquier elemento que contenga textos pueda ser editado en el mismo navegador. Esto nos permite un mejor manejo de los formularios.  Se han mejorado los formularios, con el elemento input ampliado con nuevos datos aplicables.  Mejora de la localización geográfica del usuario, perfecto para ofrecer nuevos y mejorados servicios de ubicación.  Nuevas funcionalidades mediante una interfaz estandarizada.  Se pueden guardar aplicaciones web para utilizarlas sin conexión a internet con una caché para aplicaciones.  Elemento vídeo  Una de las novedades más celebradas es la posibilidad de poder incorporar elementos de vídeo dentro de una página web sin necesidad de usar un plugin externo. Esto mejora con creces el rendimiento y la estabilidad de la web, ya que podemos introducirlo de una forma estándar soportada por casi todos los navegadores. No todos los formatos son soportados por todos los navegadores, pero para asegurarnos que funcionan los vídeos en todos podemos codificar el vídeo en varios formatos. 26. FIELDSET Y LEGEND 53

INTRODUCCIÓN A PROGRAMACIÓN WEB

Fieldset La etiqueta “fieldset” suele usarse principalmente en formularios para poder agrupar campos que están relacionados entre sí. Aunque también podemos utilizarlo para agrupar una serie de definiciones o de textos relacionados entre sí. Fieldset se escribe con la etiqueta y su cierre (). Debemos advertir que tanto la etiqueta de apertura como la de cierre son obligatorias. El efecto que conseguimos gracias a la etiquetas fieldset es un rectángulo enmarcando el texto que esté incluido dentro de él. Hay una cosa importante que debemos tener en cuenta del fieldset: Éste se ensanchará todo lo que pueda en la página. Es decir, su ancho por naturaleza será del 100%. Si queremos darle una anchura predeterminada o limitar su expansión lo que deberemos hacer incluir la etiqueta dentro de una tabla a la que sí le indicaremos la anchura que queremos darle. A continuación vamos a ofrecerte un fieldset básico, sin limitación ninguna:

Esto es un fieldset básico

Y aquí puedes apreciar como quedará en nuestra página: Esto es un fieldset básico Y a continuación te mostramos el código de un fieldset incluido dentro de una tabla, con una anchura del 75% y alineada al centro:



Esto es un fieldset dentro de una tabla 54 INTRODUCCIÓN A PROGRAMACIÓN WEB



Obteniendo el siguiente resultado: Esto es un fieldset dentro de una tabla

Legend La etiqueta “legend” nos resulta muy útil dentro de la etiqueta fieldset. Legend nos permite titular o etiquetar el conjunto de campos que están incluidos dentro de legend. Por ejemplo, si el conjunto de datos son los datos personales de la persona, en legend escribiremos “Datos personales”. Legend se abre con la etiqueta y se cierra con . Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta . Podemos alinear el título del legend como queramos, mediante el parámetro “align”. En la siguiente muestra veremos un fieldset con su etiqueta alineada al centro:

legend alineado al centro Este es un ejemplo de un “fieldset” con el legend alineado al centro

Y la muestra es la siguiente: legend alineado al centro Este es un ejemplo de un “fieldset” con el legend alineado al centro 55

INTRODUCCIÓN A PROGRAMACIÓN WEB

27. MÁS ETIQUETAS blockquote La etiqueta blockquote se escribe gracias a la apertura y a su cierre . Todo lo que esté dentro de está etiqueta estará sujeto a su acción. El blockquote se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea unos espacios a la derecha y a la izquierda del texto, para que se diferencie de los demás. En el siguiente texto vamos a poder observar el efecto del blockquote. Es un texto sacado del primer libro del Señor de los Anillos: La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos. El código del texto es el siguiente: La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.

Podemos agrupar varias de estas etiquetas para conseguir un espacio mayor por los costados. Vamos a ver el resultado, en el siguiente texto, de dos etiquetas juntas de : La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.

56

INTRODUCCIÓN A PROGRAMACIÓN WEB

Observad como varía el resultado de un texto a otro. Y aquí veremos el código del segundo texto: La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.

nobr La etiqueta obliga al navegador a que muestre esa frase sin saltos de línea. El texto que queremos que no se parta debe ir dentro de las etiquetas de apertura () y de cierre (). Aquí os dejamos el código de una frase con “nobr” para que veáis cómo se debe escribir: Ésta sería una frase que no se puede partir center La etiqueta nos permite centrar párrafos, imágenes o tablas dentro de nuestra Web. Para centrar un elemento, éste debe estar entre las etiquetas de apertura y cierre. Este sería el código de un texto centrado: Este texto está centrado en la página. Y su resultado sería el siguiente: Este texto está centrado en la página. span La etiqueta nos permite agrupar un conjunto de elementos y así poder establecer unas reglas de estilo comunes para el conjunto. Los elementos que queramos agrupar con “span” deben ir dentro entre y , su etiqueta de apertura y cierre respectivamente.

57

INTRODUCCIÓN A PROGRAMACIÓN WEB

Como podemos comprobar la etiqueta se parece mucho a la etiqueta ya que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas características comunes para todos esos elementos. Tanto uno como el otro son etiquetas más propias de css. Hay una diferencia clara entre ambas. Con la etiqueta span podemos agrupar unos elementos, sin que éstos sufran ninguna variación respecto al resto del texto, a no ser que le indiquemos un estilo al span. En cambio con div los elementos que forman parte de un grupo sufren una variación de salto de línea con respecto a los demás elementos. crea un salto de línea al principio y otro al final. Vamos a ver el código del ejemplo del efecto del span en un grupo de elementos. Esto es un párrafo con unas letras en rojo para que veas lo que se puede hacer con la etiqueta span. Y aquí podemos ver el resultado del efecto: Esto es un párrafo con unas letras en rojo para que veas lo que se puede hacer con la etiqueta span.

28. IDIOMA Si deseas traducir y ofrecer tu página web en distintos idiomas debes tener en cuenta varios aspectos para hacerlo correctamente. A continuación te hablaremos de los principales y te mostramos como hacerlo correctamente. Meta tag Language Mediante esta etiqueta especificamos el idioma de nuestra web. La forma de utilizarla es la que veremos a continuación. En la primera línea indicamos que nuestra web es en inglés, y en la segunda mostramos que nuestro contenido es español o castellano. Aquí tienes los dos meta tag de ejemplo:

58

INTRODUCCIÓN A PROGRAMACIÓN WEB

La finalidad de esta etiqueta es doble. Por una parte le indicamos al buscador el idioma de la web para que pueda posicionarnos en la lengua elegida. Por otro lado podemos diferenciar idiomas cuando una misma web está traducida en varias lenguas. ¿Cómo separar cada idioma? Existen tres formas de gestionar los idiomas de una página. Por dominios, por subdominios y por carpetas. Existiría una cuarta forma de hacerlo, sin orden ninguno, pero desde aquí lo desaconsejamos completamente porque los buscadores no serán capaces de definir correctamente los idiomas que barajamos y el posicionamiento se verá resentido. La separación por dominios consiste en separarlo todo en diferentes dominios. El “.com” para el inglés, el “.fr” para el francés, “.es” para el español, etc. El mejor ejemplo de esta forma de separar idiomas es Google. Su buscador en español es “Google.es”, el francés es “Google.fr”, y así sucesivamente. Para la separación por subdominios encontramos un claro ejemplo en Yahoo. Anteriormente separaba por dominios como Google, pero desde hace algunos años ha cambiado a los subdominios por idiomas. Esto quiere decir que Yahoo España actualmente se escribe “es.yahoo.com”. Cada idioma se coloca en un subdominio. Otro ejemplo de ello sería Facebook. El tercer ejemplo que dábamos, el de separación por carpetas, también se ha quedado completamente obsoleto y es poco recomendable hacerlo. Lo desaconsejamos porque bajo el mismo dominio y subdominio estaremos mezclando idiomas, y los buscadores no sabrán a que idioma darle más fuerza, desvirtuándose así toda la gestión del idioma. Entre los dos tipos de separación que hemos visto, el ideal para Google es el uso de dominios distintos que cojan enteramente la fuerza. Pero normalmente no se hace por una cuestión de “marca”. Para afianzar marca se aglutina todo bajo un dominio. En este caso el marketing le gana al SEO puro. Lo importante al usar subdominios para separar idiomas es asignarle a cada uno de ellos una etiqueta meta tag única. Evitar contenido duplicado Un peligro que se corre al traducir páginas a diferentes idiomas es que contenido publicado por los usuarios puede llegar a estar duplicado en cada uno de los idiomas, y eso es penalizable por los buscadores. Para corregir esta problemática podemos hacer tres cosas:

59

INTRODUCCIÓN A PROGRAMACIÓN WEB

Traducir toda la web completamente. Algo que no siempre ocurre en páginas de contenido dinámico donde los usuarios ponen su propia información. Desindexar todo el contenido que esté duplicado. Para hacerlo utilizaremos el meta tag robots con los valores "noindex,follow", que evita la indexación pero sí permite el rastreo.

Uso de la etiqueta canonical. Esta etiqueta le indica a Google que varias urls son la misma y que las considere como una. Eso hace que toda la fuerza que llegue de enlaces a la duplicada se transfiera a la url principal. El uso óptimo de esta etiqueta no es trivial, por lo que aconsejamos informarse más antes de usarla. 29. CSS Las hojas de estilo completan Html, dándole mayores posibilidades. Nosotros te explicamos CSS en su tutorial específico, pero en este artículo queríamos mostrarte algunas de las posibilidades que nos ofrecen las hojas de estilo. Observa el siguiente texto de Gustavo Adolfo Becquer:

Volverán las oscuras golondrinas en tu balcón sus nidos a colgar, y otra vez con el ala a sus cristales jugando llamarán. Volverán las tupidas madreselvas de tu jardín las tapias a escalar, y otra vez a la tarde aún más hermosas sus flores se abrirán.

Pero aquellas, cuajadas de rocío cuyas gotas mirábamos temblar y caer como lágrimas del día... ¡esas... no volverán! Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se pueden llegar hacer. Si quieres saber cómo lo hemos hecho, aquí te dejamos el código para que lo observes.

60

INTRODUCCIÓN A PROGRAMACIÓN WEB



Volverán las oscuras golondrinas
en tu balcón sus nidos a colgar,
y otra vez con el ala a sus cristales
jugando llamarán.

Volverán las tupidas madreselvas
de tu jardín las tapias a escalar,
y otra vez a la tarde aún más hermosas
sus flores se abrirán.

Pero aquellas, cuajadas de rocío
cuyas gotas mirábamos temblar
y caer como lágrimas del día...
¡esas... no volverán!



30. JAVASCRIPT Como hemos visto a lo largo del tutorial, el html tiene una importante limitación: es un lenguaje estático, sin interactividad con el usuario. Javascript es un lenguaje que nos ayuda a salvar esa barrera y que nos ofrece un mayor dinamismo. Los programas del lenguaje Javascript se escriben dentro del html. Nosotros no vamos a enseñarte a utilizar este lenguaje, pero sí queremos mostrarte como incluirlo en tu página Web, dentro del lenguaje html. Aunque existen diferentes formas de incluir Javascript en un documento html, nosotros vamos a mostrarte la más común: mediante la etiqueta . Además deberemos indicar dentro de esa etiqueta el lenguaje (language="Javascript") y el tipo (type="text/javascript").Dentro de esta etiqueta irá el programa Javascript. En un mismo documento html podemos incluir varias etiquetas

Viendo detenidamente el código nos damos cuenta de cómo el programa Javascript está escrito dentro de las etiquetas correspondientes. Este programa en concreto es una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente.

62