/es/curso-basico-de-html/imagenes-y-links-en-html/content/

Elementos interactivos en HTML

Ahora que ya tienes textos, enlaces e imágenes en tu página web, añade otra pieza básica: los elementos interactivos, tales como los botones y las entradas.

Son aquellos espacios donde colocas tu nombre de usuario y contraseña para acceder a una cuenta. También, las casillas de verificación que seleccionas mientras llenas el formulario de una página o los botones que te permiten abrir un menú. 

Botones

El elemento HTML para un botón es este:

<button>Pulsa aquí</button>

En las páginas web puedes encontrar distintos tipos de botones: cuadrados, redondos, planos, con relieve y muchos colores. Sin embargo, para cambiar su apariencia necesitas trabajar con código CSS, el cual veremos en otro curso. Con HTML puedes crear botones más sencillos, como estos que ves aquí:

El texto dentro del elemento botón es el que aparecerá sobre el botón, pero también, podría ser reemplazado por una imagen. Por ejemplo, un botón que se ve en muchos sitios web es el botón de hamburguesa, que en vez de tener textos cuenta con varias líneas parecidas a las capas de comida. El HTML este botón luce así: 

<button>   
  <img src="https://media.gcflearnfree.org/global/coding/hamburger-button.png"> 
</button>

Pero en el navegador, realmente se ve así: 

Con un poco de CSS puedes ocultar los bordes para darle un aspecto diferente a los botones que has visto hasta ahora:

La mayoría de los elementos a los que puedes hacer clic son botones, no importa si se ven extremadamente diferentes. En el fondo funcionan igual, solo que su apariencia es configurada de manera distinta.

Entradas

Otro de los elementos más comunes para interactuar en los sitios web son las entradas.

Si alguna vez has escrito tu nombre de usuario y contraseña en cajas de texto, o has seleccionado una casilla de verificación que te preguntaba si aceptabas los "Términos y condiciones"; o también, si has hecho clic en un menú desplegable para elegir una opción, es porque has usado una entrada.

Cada una de estas opciones es un tipo de entrada HTML. Mira como se ven los elementos para una entrada de texto y una entrada de casilla de verificación:

<input type="text"> 
<input type="checkbox">

En realidad, utilizan el mismo elemento <input>, pero con diferentes valores en los atributos HTML, los cuales le brindan al navegador la información suficiente para mostrar dos cosas distintas cuando se carga la página:

Por otro lado, una entrada desplegable se crea usando un elemento <select>, que contiene un número de elementos para elegir. En HTML se escribe de la siguiente manera:

<select>   
  <option>Primera opción</option>
  <option>Segunda opción</option>  
  <option>Tercera opción</option>
 </select>

La estructura de este elemento es similar a la de los elementos <ol> y <ul>, que se utilizan para hacer listas. El elemento <select> no es visible, en su lugar, actúa como una instrucción que le indica al navegador cómo mostrar los elementos <option> que están en su interior. Si se mostrara el HTML anterior en el navegador, se vería esto: 

¡Prueba esto!

Escribe en la caja de texto de abajo los ejemplos anteriores. Si haces clic en la casilla "Agregar nuestros estilos (CSS)" verás que algunos de ellos cambian su apariencia, mientras que otros no. Esto pasa porque se adaptan a la configuración de nuestra página.

Si quieres puedes introducirlos todos al tiempo, pero será más fácil y notarás mejor los cambios si los introduces de uno en uno:

¿Cómo hacer que estos elementos funcionen?

Hasta el momento, has visto que puedes añadirle a los botones y las entradas algunos textos y hacer que sean seleccionables, ¡eso es todo! En HTML no se pueden añadir funciones más complejas.

Si necesitas que los textos que las personas ingresan en las entradas se guarden en un archivo especial o, si deseas cambiar el aspecto de tu contenido, necesitas dos herramientas que son los formularios HTML y JavaScript. 

Aquí te contamos un poco sobre ellos: 

• Formularios HTML: un formulario es un elemento HTML que puedes utilizar para unir entradas que se relacionan y enviar sus valores a otro sitio. Por ahora, no te preocupes por los detalles, solo ten en cuenta que un formulario es una forma de enviar la información que un usuario ha introducido a otro archivo, donde otro código trabajará con él.
• JavaScript: además de cambiar el aspecto del  HTML, el lenguaje de programación JavaScript también puede utilizarse para leer los valores de las entradas y actuar sobre ellos. Por ejemplo, al activar la casilla "Añadir nuestro CSS" en la actividad anterior, el JavaScript usa la información para darle otro color a las casillas y las cajas.

¡Hazlo tú mismo!

Abre el archivo "index.html" de tu proyecto "Tutoriales Programación GCF" para añadir un elemento interactivo. Por ahora introduce algo sencillo, como un botón. 

Paso 1: 

Busca el último párrafo, el cual tiene un enlace:

<p>Encuentra el listado completo del reparto en la página web de <a href="https://edu.gcfglobal.org">El perro basquetbolista</a></p>

Paso 2:

Justo debajo de ese párrafo, añade tu primer botón:

<button>Ver la siguiente reseña</button>

Por ahora, este botón no hará nada, pero con el tiempo te permitirá ver otras reseñas disponibles en tu página.

Paso 3:

 Una vez que hayas añadido tu botón, tu código completo será similar a este:

<html>
   <body>
    <h1>Clásicos del cine - Reseñas de películas</h1>    
    <h2>Reseña: El perro basquetbolista (2008)</h2>
    <img src="https://media.gcflearnfree.org/global/coding/html-basico/resources/img/perro-basquetbolista.png">
        <p><i>4 de 5 estrellas<i></p>
        <p>De la directora <b>Vicki Fleming</b>, llega la conmovedora historia de un niño llamado Pete (Trent Dugson) y su perro Rover (el actor Brinson Lumblebrunt es el encargado de hacer su voz). Al principio, parece la típica historia en la que un niño y su perro aprenden el verdadero valor de la amistad, pero hay un giro que hace que esta película sea diferente: Rover juega al baloncesto, ¡y lo hace muy bien!</p>
        <p>Esta película tiene todo lo que puedes pedir:</p>
            <ul>
             <li>Un deporte</li>
             <li>Un perro</li>
             <li>Suspenso para morderse las uñas</li>
           </ul>
        <p>Aunque no se incluyen los 150 minutos de un partido de campeonato completo,"El perro basquetbolista" logra captar tu atención durante las 4 horas que dura el film. Al final, cualquier amante de los perros puede llorar. Si te gusta el baloncesto o las mascotas, esta es la película para ti.</p>
        <p>Encuentra el listado completo del reparto en la página web de <a href="https://edu.gcfglobal.org">El perro basquetbolista</a></p>
    <button>Ver la siguiente reseña</button>
   </body>
</html>

Paso 4: 

Guarda los cambios.

Paso 5:

Carga tu archivo "Index.html" en tu navegador. Deberá aparecer esto.

¡Felicitaciones!, ya tienes un elemento para hacer clic.

¡Sigue conectado a nuestro Curso básico de HTML!

Continuar

Previous: Imágenes y links en HTML

Cargar:Elementos de bloque, en línea y de organización HTML

/es/curso-basico-de-html/elementos-de-bloque-en-linea-y-de-organizacion-html/content/