Elaborar listas, crear hipervínculos, crear tablas y formularios. Insertar sonido y video
HTML
Las listas.
Existen tres tipos de listas compatibles en HTML:
Listas sin ordenar. Están formadas por elementos junto a los que aparece una viñeta. La etiqueta <ul> identifica una lista desordenada y dentro de la lista, cada elemento se identifica con la etiqueta <li>. La etiqueta <ul> es compatible con un atributo type que permite cambiar el tipo de viñeta. Los valores que se pueden asignar son: disc que muestra un circulo relleno; circle que muestra un circulo vacío y square que indica un cuadrado relleno. Si no usamos el atributo type, las listas utilizan la viñeta disc como predeterminada.
Listas ordenadas. Las listas ordenadas son similares a las listas desordenadas, pero éstas se identifican mediante números, en lugar de viñetas. La etiqueta <ol> identifica la lista ordenada y dentro de la lista cada elemento se identifica con la etiqueta <li>
Listas de definiciones que contienen términos con su correspondiente definición. Una lista de definiciones se inserta entre etiquetas <dl> de apertura y cierre y cada término de la lista se identifica mediante la etiqueta <dt>. Otra etiqueta <dd> debe seguir a la etiqueta <dt> en una lista de definiciones para proporcionar la definición del elemento anterior.
A continuación se presentan algunos ejemplos sencillos.
Código utilizado. |
Resultado |
|---|---|
Lista desordenada |
|
| <ul> <li> Primero de la lista</li> <li> Segundo de la lista </li> <li> Tercero de la lista </li> </ul> |
|
Lista ordenada (numerada) |
|
| <ol> <li> Número 1</li> <li> Número 2</li> <li> Número 3</li> </ol> |
|
Listas de definición. |
|
| <dl> <dt> Internet </dt> <dd> Conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP</dd> <dt> Correo electrónico <dt> <dd> Es un servicio de red que permite a los usuarios enviar y recibir mensajes rápidamente mediante sistemas de comunicación electrónicos.</dd </dl> |
|
Comentarios
Los comentarios HTML describen el código, es decir que identifican información que no forma parte del contenido del documento y no se procesa ni se muestra en un explorador Web. Un comentario utiliza los delimiadores especiales <!- - y - ->
Ejemplo de un comentario: <!- - Insertar el código para crear una línea - - >
Hipervínculos
Los hipervínculos son una parte importante de todas las páginas Web ya que nos permiten conectar una página con otro recurso en la Web. Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
Visita la página ithinkweb.com.mx
Habría que escribir:
<a href="http://www.ithinkweb.commx">Visita la página ithinkweb.com.mx</a>
URL
Los URL identifican páginas Web y otros recursos, como las imágenes. Cuando escribimos un Localizador de Recursos Uniformes URL (Uniform Resource Locator) en la parte superior del explorador Web podemos abrir la página Web precisamente co esa dirección. De igual manera los hipervínculos dependen de los URL para conocer exactamente la ubicación del recurso vinculado en la Web.
Los recursos residen en equipos conectados a Internet y cada uno de esos equipos se debe identificar para poder tener acceso a los recursos. Para buscar una imagen primero debemos saber en que servidor se encuentra almacenada y estos servidores se identifican mediante nombres de host, los cuales tienen su propio nombre y se identifican de manera única. Recordemos que el nombre de cada sitio Web es el nombre de un host así que www.ithinkweb.com.mx, www.google.com, www.espaciosoax.com.mx son nombres de host.
Los URL están estrechamente ligados con los hipervínculos ya que un URL es utilizado por los exploradores Web para ver páginas específicas. Si vemos un URL completo podemos identificar sus componentes.
http://www.ithinkweb.com.mx/html_2p.php
Podemos ver que está formado por tres componentes:
HTTP que es un Protocolo para el recurso
www.ithinkweb.com.mx Nombre del host del equipo donde está almacenado el recurso.
html_2p.php Recurso (en este caso una página Web)
La parte HTTP (Hypertext Transfer Protocol) especifica el protocolo del URL y un protocolo define cómo tiene lugar el intercambio de información en Internet. Existen diferentes tipos de protocolos para enviar diferente tipo de información. El protocolo cambia de acuerdo al recurso que se utilice, por ejemplo el nombre del protocolo para FTP es ftp, para el correo electrónico es mailto para grupos de noticias es news y para archivos es file.
Como vimos anteriormente la etiqueta que permite crear hipervínculos tanto a texto como a imágenes es <a>. Este hipervínculo tiene dos elementos: el nombre del contenido HTML con el hipervínculo que puede ser un texto o una imagen y está dentro de las etiquetas <a> y </a> y un recurso de destino que se especifica con el atributo href de la etiqueta <a> y está formado por un URL para identificar la ubicación del recurso. El tipo URL HTTP se utiliza para vincular a páginas Web. Por ejemplo:
<p> Se ofrecen apuntes de SQL que puedes <a href= "sql.php"> consultar </a> en esta misma dirección.</p>
Se ofrecen apuntes de SQL que puedes consultar en esta misma dirección.
En el ejemplo anterior, la palabra consultar es el texto hipervinculado que se vincula con la página Web "sql.php". Este ejemplo corresponde a un URL relativo ya que se especifica ninguna ruta de acceso ni nombre de host. Este procedimiento es válido siempre y cuando nuestra página se encuentre en la misma carpeta a la página a la que estamos haciendo referencia. El mismo código anterior pero con un URL absoluto sería:
<p> Se ofrecen apuntes de SQL que puedes <a href= "http://www.ithinkweb.com.mx/sql.php"> consultar </a> en esta misma dirección.</p>
Para crear hipervínculos a otros tipos de URL se procede de la misma manera en la que se crear los vínculos a páginas Web. Para incluir un URL de correo electrónico se hace los siguiente:
<p> Si deseas más información respecto a los apuntes de las diferentes materias, envía un correo electrónico a <a href="mailtotucorreo@hotmail.com"> mi correo </a> </p>
Si deseas más información respecto a los apuntes de las diferentes materias, envía un correo electrónico a mi correo.
Cuando el usuario de clic sobre la palabra "mi correo" el explorador Web iniciará el programa de correo electrónico e iniciará un nuevo mensaje.
Puntos de fijación llamados Anclas
Cuando se tienen documentos extensos, o se tienen apartados especiales, podemos ir directamente a cada uno de ellos o inclusive situarnos rápidamente al inicio (o final) de la misma página. Para ello se utilizan las anclas, o puntos de fijación.
Un ancla necesita que se inserten las etiquetas <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda evitar los caracteres especiales. Por ejemplo para establecer una ancla que permita ir al inicio de esta misma página utilizamos el siguiente código:
| <a name="inicio"></a> | Este código se coloca precisamente en el lugar donde queremos que se traslade el curso y notarás que no se escribe nada entre las etiquetas <a> y </a> y desde el explorador no se aprecia la presencia del ancla. |
Para crear el enlace utilizamos el signo "#". Por ejemplo si deseamos ir al inicio de ésta página podemos escribir el siguiente código:
<a href="#inicio"> Inicio de ésta página</a>
y aparecerá como : Inicio de ésta página y sl das clic sobre el enlace te lleva al inicio de esta página. El código hace referencia a "inicio" que es el nombre del ancla con el signo # y ahora si ponemos la palabra que servirá de enlace entre las etiquetas <a> y </a>. Si lo que deseamos es trasladarnos a un tema especial de otra página, entonces tenemos que crear el ancla en la página en cuestión y luego hacer el enlace de la siguiente manera:
<a href="html.html#mitema">Enlace al tema</a>
Enlace al tema que te lleva al tema marquee de la página html.html
Vínculo a archivos para descarga.
El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php...) pero también puede ser un archivo zip, una hoja de Excel, un documento Word, un documento pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo en el que el navegador muestra las opciones para descargar el archivo.
Por ejemplo, en la carpeta donde se encuentra esta página tenemos el archivo Word disposicionesgenerales.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el archivo en su disco duro, en este caso definiremos el enlace:
<a href="disposicionesgenerales.pdf" target=_blank >Haz clic aquí para descargarte el archivo</a>
Haz clic aquí para descargarte el archivo
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada y se especifica a través del atributo target. Este atributo puede tener los siguientes valores: _blank, _parent, _self, y _top.
- _blank: Abre el documento vinculado en una ventana nueva del navegador.
- _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
- _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
- _top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Imágenes
Formatos de imagen
No todos los formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria.
Formato GIF que es el acrónimo de Graphics Interchange Format utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación. Es utilizado para imágenes que no tienen calidad fotográfica y son aquellas que son creadas manualmente o con herramientas de publicidad.
Formato JPG es el acrónimo de Joint Photographic Experts Group Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores. Es utilizado en imágenes con calidad fotográfica es decir que son imagenes digitalizadas a partir de fotografías o tomadas como imágenes con una cámara digital.
Se pueden incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.
Es dificil encontrar una página Web sin encontrar algún tipo de imagen puesto que éstas comparten información visual o simplemente actúan como decoración.
Para insertar una imagen es necesario insertar la etiqueta HTML <img>. Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen y la dirección donde está ubicada se identifica a través del atributo src. Esta dirección también se conoce como URL por lo tanto debemos especificar la ruta correcta puesto que si ponemos sólo el nombre de la imagen el explorador Web asume que está dentro del mismo directorio en el que se encuentra la página es decir, utiliza una ruta de acceso relativa. Las rutas absolutas hacen referencia a direcciones externas al directorio actual: <img src="http://www.rosupo.com/images/iwebn.jpg>
Por ejemplo para insertar la siguiente imagen colocamos el siguiente código:
<img src="images/iwebn.jpg" alt="Imagen de Ithinkweb.">
Aquí podemos observar que estamos utilizando el mismo directorio pero con una carpeta diferente y también estamos haciendo uso del atributo Alt que permite colocar un texto alternativo que es mostrado cuando ponemos el cursor sobre la image. Esta opción es útil cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Con el atributo Alt aparecerá el texto que nosotros deseemos de mostrar el nombre de la imagen.
Para modificar el tamaño de la imagen utilizamos los atributos width y height que determinan el tamaño de la imagen. En forma predeterminada la imagen se inserta con las medidas originales pero éstas pueden ser modificadas con los atributos mencionados. Se debe tomar en cuenta que si reducimos el tamaño de una imagen con los atributos width y height de todas maneras el explorador descargará la imagen original. Esto es importante cuando deseamos crear una serie de imágenes miniatura, por lo que es recomendable utilizar, en estos casos, alguna herramienta de edición de imagenes para darle las dimensiones requeridas. Si lo que pretendemos es aumentar el tamaño debemos poner atensión en la distorsión que pueda sufrir la imagen.
Para controlar el espacio que rodea a una imagen utilizamos los atributos vspace y hspace. Para controlar el espacio superior e inferior utilizamos el atributo vspace y para el control de los espacios de la izquierda y de la derecha utilizamos el atributo hspace.
Bordes de una imagen.
En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo border. El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde. Por ejemplo, para insertar la siguiente imagen con borde:
<img src="images/iwebn_m.jpg" alt="Imagen de Ithinkweb" border = "6px" />
Si lo que deseamos es crear un enlace a otra página ya sea del mismo directorio o externa excribimos el siguiente código:
<a href="html.html"><img src="images/iwebn_m.jpg" alt="Da clic sobre la imagen para ir a html.php" border="6px"/></a>
Ahora esta imagen queda vinculada a la página html.html
TABLAS
La mayoría de las páginas Web basan su diseño en tablas, ya que son de gran utilidad en su diseño. En las páginas Web todos los objetos se alinean por defecto a la izquierda, pero el uso de tablas permite distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.
El HTML básico para utilizar tablas se compone de las siguientes etiquetas:
-
<table> y </table> que se utiliza para crear una tabla.
-
<tr> y </tr> que identifica el principio de una fila en una tabla.
-
<td> y </td> que identifica una celda dentro de una fila. Las celdas, son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.
Por ejemplo para crear la siguiente tabla.
|
Escribimos el siguiente código <table border="1"> |
|
La tabla anterior contiene otra etiqueta que se utliza para encabezados de columna y es <th>. Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.
Si deseamos modificar la tabla de nuestro ejemplo, aplicándolo algún color:
Para ver la tabla de esta manera.
|
Escribimos el siguiente código <table border="1"> |
Si lo que deseamos es insertar una imagen en una celda de la tabla escribimos el siguiente código:
<td> <img src="images/iwebn_m.jpg"></td>
Para colocar una imagen de fondo en una celda:
<td background="images/iwebn_m.jpg" bgcolor="#66FFFF">
Otros atributos que pueden ser utilizados en el diseño de tablas:
align - Nos sirve para alinear las tablas y tiene 3 valores: left que alinea la tabla a la izquierda; right que alinea la tabla a la derecha; center que alinea la tabla al centro.
valign - Este atributo se usa para alinear el contenido vertical de celdas y filas y acepta 4 valores: top coloca el contenido en la parte superior de celda; middle coloca el contenido en el centro de la celda; bottom coloca el contenido en la parte inferior de la celda; baseline coloca el contenido en la línea de base.
Si aplicamos los atributos anteriores en la etiqueta <tr>, en lugar de la etiqueta <td> podemos modificar toda la fila. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando se establecen para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los que se establecen para toda la tabla.
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas que serán combinadas, y a través del atributo rowspan se especifica el número de filas que se combinarán.
Se presenta un ejemplo en el que se aplican ambos atributos: colspan y rowspan
| NUMEROS REALES | POSITIVOS | RACIONALES | ENTEROS | NUMEROS NATURALES |
| FRACCIONES | COMUNES (QUEBRADOS) | |||
| DECIMALES | ||||
| IRRACIONALES | ||||
| NEGATIVOS | RACIONALES | ENTEROS | ||
| FRACCIONES | COMUNES (QUEBRADOS) | |||
| DECIMALES | ||||
| IRRACIONALES | ||||
Elementos multimedia.
Sonido de fondo y Video
Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva sin embargo la descarga del archivo de sonido puede retrazar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar sonido en cada página que visita puede resultar molesto.
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI. Existen otros formatos diferentes que también pueden utilizarse. Es preferible utlizar algún archivo de audio que no ocupe mucho espacio, y no por ello sea de mala calidad. El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Sin embargo existen algunos navegadores que es posible que no reconozcan esta etiqueta.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio. Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor -1. Por ejemplo, si utilizamos la etiqueta <bgsound> podemos insertar un sonido que se reproduce en forma indefinida al iniciar la página y el usuario no tiene ningún control sobre él.
<bgsound src="sonidos/sonido.wav" loop="-1">
Como ya se menciono existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona muy bien para insertar tanto archivos de audio como de vídeo, además esta etiqueta nos brinda dos opciones: Sonido de fondo sin control del usuario o sonido de fondo mostrando una consola de control de reproducción.
El siguiente código permite insertar un sonido de fondo con su control de reproducción tal como se muestra a la izquierda. <embed src="sonidos/sonido.wav" autostart="false" loop="true"> El sonido no se inicia con la página ya que autostart es false y las dimensiones de la consola son las predeterminadas. |
|
El siguiente código permite insertar un sonido de fondo con su control de reproducción con dimensiones específicas tal como se muestra a la izquierda. <embed src= "sonidos/sonido.wav" loop= "true" autostart= "true" volume= 100 width= 100 height= 16 controls= smallconsole > El sonido se inicia al abrir la página ya que tiene autostart como true y se dan dimensiones específicas. Por razones de diseño este sonido no se escuchará al iniciar la página, pero se puede hacer uso de la consola. |
Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero. Con el atributo hidden, se utilizan los valores true o false, y permite ocultar los controles cuando su valor es true.
Por ejemplo, para insertar sonido de fondo se podría escribir:
<embed src="varios/sonido.wav" autostart="true" loop="true" hidden="true"></embed>
O también:
<embed src="varios/sonido.wav" autostart="true" loop="true" width="0" height="0" ></embed>
Videos
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el WMV. Utilizamos la misma etiqueta <embed> insertar archivos de vídeo. A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo. Al insertar un video utilizando esta etiqueta, éste se reproduce automáticamente al cargarse la página, y solamente una vez. Esto puede modificarse con los atributos autostart y loop.
-
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.
-
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.
-
Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número expresado en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.
Para insertar un video, podemos escribir: <embed src="videos/promo123.wmv" autostart="false" loop="true" width="230" height= "200"></embed> |
Formularios
Un formulario es un elemento que permite recoger datos introducidos por un usuario. Una de las maneras más interactivas de actuar con el Web es mandando información por medio de las páginas. Estos formularios envían la información, ya sea a una dirección de correo electronico o a un servidor. Para ello es necesario tener instalado un programa del lado del servidor que procese los datos enviados .
Estructura general de un formulario. Los formularios se insertan a través de las etiquetas <form> y </form> y esta etiqueta tiene diferentes atributos. Veamos un formulario de ejemplo:
<form action="mailto:micorreo@algo.com" method="post" enctype="text/plain" >
<input type="submit" name="boton" value="Enviar"/>
</FORM>>
- El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
- El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa al enviar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
- El atributo enctype indica el modo en que será cifrada la información para su envío. "Text/Plain" permitirá que la información sea enviada sin ningún tipo de codificación.
- Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento de entrada, y el atributo type indica el tipo de elemento de entrada.
Se presenta un ejemplo de un formulario con el que podemos enviar comentarios a través de un e-mail.
| <form action="mailto:romeol@algo.com" method="post"> <br /> <input type="text" name="nombre" /> <br /> <br /> <textarea name="texto" rows="9" cols="20"> </textarea> <br /> <br /> <input type="submit" value="Enviar Datos" /> </form> |
Con <input type ="text" name="nombre"> obtendremos un campo de texto que tiene, en forma predeterminada, una longitud de de 20 caracteres. Con el atributo SIZE="num" podemos modificar el tamaño.
Existe también otro atributo para delimitar la introducción de caracteres y éste es MAXLENGHT="num" , donde "num" será la capacidad máxima de caracteres dentro del campo.
Para introducir texto en forma de password; es decir, que no sea visible el contenido y que aparezcan únicamente asteriscos, definimos la etiqueta de la siguiente manera:
<input type="password" >
Para intoducir una caja en la cual el usuario pueda escribir párrafos de texto, utilizamos la etiqueta que aparece en el formulario de ejemplo:
<textarea name="texto" rows="9" cols="20">
donde "rows" es igual al número de filas y "cols" el número de columnas.
Otras etiquetas que pueden ser utilizadas en los formularios.
Si queremos que el usuario inserte o envíe información por medio de un menú desplegable la etiqueta a utilizar es la siguiente:
<select name="nombre"> Donde "nombre" es el nombre de una variable que utilizamos.
| <form> <select name=nombre > <option>Lunes <option>Martes <option>Jueves </select> </form> |
El menú desplegable se distingue porque ofrece distintas opciones para que el usuario elija aquella que prefiera. Cada una de las opciones se define por medio de la etiqueta <option>opción donde "opción" es el nombre de la opción que queremos que aparezca en el menú. Podemos ver el ejemplo que aparece a la izquierda
¿Qué color prefieres?<form> |
¿Qué color prefieres?
|
Cuando queremos que el visitante escoja sólo una entre varias opciones, podemos utilizar la introducción de datos por medio de botones. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable name) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.
<input name="radiobutton" type="radio" value="valor inicial">
El atributo "checked" en una de las etiquetas sera la opción que aparecerá marcada en forma predeterminada. Podemos ver el ejemplo que aparece a la derecha.
Casilla de verificación
Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificación y es necesario poner este atributo ya que es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. La casilla de verificación permite seleccionar una o todas las opciones al mismo tiempo.
Por ejemplo:
<input type="checkbox" value="rojo" checked>
<input type="checkbox" value="verde">
<input type="checkbox" value="azul">
Y aqui vemos el resultado.
Con las etiquetas vistas hasta este momento es posible crear diferentes tipos de formularios, sólo queda realizar varias prácticas y probar su funcionalidad directamente en una página Web alojada en algún servidor remoto.
| Ir a Inicio |
|---|