¡Da tus primeros pasos en HTML5! – Formularios, Links y Referencias

Un saludo amigo lector estamos de regreso en un nuevo post de esta serie titulada ¡Da tus primeros pasos en HTML 5!, en esta ocasión para continuar con esta pequeña serie de post sobre HTML, hablaremos de lo que son los Formularios, como ligar enlaces y como referenciar un archivo css y/o javascript. ¡entremos en materia!

Formularios

Los formularios o forms en HTML, son uno de los elementos o más bien uno de los conjuntos de elementos más utilizadas en un diseño web, ya que es muy útil. En este espacio podemos agregar preguntas y espacios para adquirir la información de un usuario. Esto es más comúnmente utilizado para el registro o inicio de sesión de un usuario, y en páginas que solo son un single page o landing page se utilizan para obtener información de próximos clientes.

Veamos a continuación como estructuramos un formulario de registro sencillo en HTML 5.

<form>
  Ingresa tu nombre:<br>
  <input type="text" name="firstname">
  <br>
  Ingresa tus apellidos:<br>
  <input type="text" name="lastname">
  <br>
  Ingresa tu número de teléfono:<br>
  <input type="text" name="phonenumber">
  <br>
  Ingresa correo electrónico:<br>
  <input type="text" name="firstname">
  <br><br>
  <input type="submit" value="Presiona Aquí">
</form> 

En respuesta a la anterior estructura HTML, en pantalla obtendríamos.

En los formularios podemos agregar un atributo para hacer obligatorios a llenar ciertos campos.

<form>
  Ingresa tu nombre:<br>
  <input type="text" name="firstname" required>
  <br>
  Ingresa tus apellidos:<br>
  <input type="text" name="lastname" required>
  <br>
  Ingresa tu número de teléfono:<br>
  <input type="text" name="phonenumber" required>
  <br>
  Ingresa correo electrónico:<br>
  <input type="text" name="firstname" required>
  <br><br>
  <input type="submit" value="Presiona Aquí">
</form> 

Como podemos ver al final de cada etiqueta input de tipo texto se agrego un “required” el cual obliga a llenar el campo antes de presionar el botón por que si presionamos el botón nos mandara un mensaje como el siguiente:

Es cierto que podemos agregar mas restricciones como validar que lo que mandamos en el campo correo electrónico realmente sea un correo, pero esto ya se podrá hacer por medio de código javascript.

Links

Ahora bien como hemos visto en muchas de las paginas en la web, se puede ligar una imagen, un texto o inclusive  un botón a un link en especial, ya sea para navegar a una pagina perteneciente a misma web, o una pagina muy dista, a continuación veremos como ligar un texto a una pagina nueva dentro de nuestro mismo proyecto y también como ligar una imagen del logo de facebook a dicha pagina.

A continuación veremos como ligar una frase a una pagina dentro de nuestro mismo proyecto web.

<div>
    <ul>
        <li>
            <a href="pagina1.html">Pagina 1</a>
        </li>
        <li>
            <a href="pagina2.html">Pagina 2</a>
        </li>
        <li>
            <a href="pagina3.html">Pagina 3</a>
        </li>
    </ul>
</div>

Como podemos ver utilizamos un lista en la cual ponemos los tres links al que queremos acceder y esto se vería de la siguiente manera.

Ahora si lo que queremos hacer es ligar una imagen a una pagina el código sera el siguiente:

<div >
 <h3>Red Social</h3>
 <p>Si quieres acceder a la pagina oficial de facebook porfavor presiona en el icono siguiente:</p>
  <a href="http://www.facebook.com"><img src="Facebook_logo.png" style="height: 200px;"></a>
</div>

Y en pantalla tendríamos algo como lo siguiente:

Si nosotros presionamos la imagen esta nos mandara directamente a la pagina de inicio de facebook y en el caso de tener abierta nuestra sesión de facebook, esta imagen nos mandara al inicio en donde podremos ver nuestras noticias.

Referencias

Una vez llegado a este punto explicaremos uno de los puntos primordiales en un proyecto web, que es parte de la estructura. Con referencias hablamos de como relacionar algún documento externo al HTML que beneficiara a nuestro proyecto web con esto podemos hablar hojas de estilos CSS, scripts de javascript o inclusive algún plugin.

La manera de hacer referencias y la estructura se vera como el siguiente ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="css/styles.css"> //1er Referencia
    <link rel="stylesheet" href="css/bootstrap.min.css"> //2da Referencia
    <script src="js/count.js"></script> //3er Referencia
    
    <title>My WEB Document</title>
</head>
<body>
    <h5>Hola mundo</h5>
</body>
</html>

1er Referencia. Aquí lo que hacemos es mandar a traer un CSS de nuestra autoría.
2da Referencia. En este caso hacemos referencia una de las librerías para diseño mas utilizadas.
3er Referencia. Y por ultimo esta es la manera correcta para referenciar un archivo javascript que dará algún comportamiento a nuestra web.

Sin más que decir por el momento mi buen y querido amigo lector, espero que esta serie de publicaciones sean tanto de tu agrado como de ayuda para ti que comienzas en este mundo del desarrollo WEB, así como agradecer tu atención prestada. Y también agradecer a mi amigo Cesar Flores creador de este estupendo BLOG, por permitirme el espacio para contribuir con esta pequeña semilla. Hasta pronto!!!