Cómo crear una página de inicio en HTML

Escrito por tim searles | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear una página de inicio en HTML
Cómo crear una página de inicio en HTML. (Thinkstock Images/Comstock/Getty Images)

Las páginas de inicio de sesión se utilizan en sitios web como pantallas iniciales para obtener acceso a información confidencial. Estas páginas requieren como mínimo un nombre de usuario y una contraseña. A veces te permite seleccionar una opción para guardar tu información de registro para un uso futuro, pero se recomienda no hacer esto a menos que estés en una computadora privada. Para los desarrolladores web, es bastante simple crear el código HTML de una página de inicio de sesión. El verdadero trabajo está en el back-end en la verificación de las credenciales de acceso. Esta guía te ayudará a crear una página de inicio de sesión en HTML para las necesidades de tu sitio web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Editor de texto

Lista completaMinimizar

Instrucciones

  1. 1

    Abre un editor de texto y crea un archivo HTML. Dreamweaver es el programa más popular que se utiliza para el desarrollo Web, pero también puedes usar programas gratuitos, tales como TextEdit (en Mac) o el Bloc de notas (en Windows).

  2. 2

    Crea un formulario HTML. Entre las etiquetas <body> y </body> necesitarás escribir <form></form>; estas son las etiquetas del formulario en HTML. En la etiqueta del formulario inicial, necesitarás una acción, método y enctype (tipo de cifrado). Para el tipo de acción en donde el formulario se procesará, el método de valor será "get" o "post", el enctype normal es "multipart/form-data", pero también puedes usar "text/plain". El valor "text/plain" implica que no hay formato cuando se presenta. Tu última etiqueta inicial del formulario será algo como esto:

    <form action=”/bin/process.php” method=”post” enctype=”multipart/form-data”>

    Reemplaza /bin/process.php" con la ubicación del archivo que procesará los datos de la página de inicio de sesión.

  3. 3

    Crea una etiqueta de nombre de usuario y un campo nombre de usuario. Las etiquetas tienen un texto descriptivo para indicar cuál campo es el siguiente. En la siguiente línea codifica una etiqueta de entrada con el tipo igual a "texto" para que un usuario pueda escribir los datos. Sigue el ejemplo siguiente:

    <label>Username:</label> <input type=”text” value=”” />

  4. 4

    Crea una etiqueta de contraseña y un campo de contraseña. Los usuarios no verán su contraseña cuando lo escriban en el campo de la contraseña, sólo asteriscos. Esto es para proteger la información del usuario. Sigue el ejemplo siguiente:

    <label>Password:</label> <input type=”text” value=”” />

  5. 5

    Crea un botón de envío. Hay dos formas de crear un botón de envío en HTML. La primera es una etiqueta de entrada con un tipo de envío que se parece a esto:

    <input type=”submit” value=”Submit This Form” />

    Coloca el texto que deseas que el botón diga dentro del atributo de valor, como se ilustra arriba. La segunda forma de crear un botón de envío es una etiqueta de entrada con un tipo de imagen que se parece a esto:

    <input type=”image” src=”/images/submit.jpg” height=”50” width=”50” />

    Esto hace una imagen de un botón de envío en lugar de un botón típico en HTML. Vuelve a colocar “/images/submit.jpg” con la ubicación de la imagen que deseas que la gente haga clic en el momento de presentar el formulario. Es una práctica general tener uno de los dos tipos de etiquetas de entrada para enviar un formulario, pero no ambos.

  6. 6

    Revisa tu código. Tu página de inicio de sesión cuando está completa debe verse algo así:

    <html> <body> <form action=”/bin/process.php” method=”post” enctype=”multipart/form-data”> <label>Username:</label> <input type=”text” value=”” /> <label>Password:</label> <input type=”password” value=”” /> <input type=”submit” value=”Submit This Form” /> </form> </body> </html>

    Guarda el código como un archivo .html cuando esté completo.

Consejos y advertencias

  • Es una buena práctica agregar atributos de nombre y/o identificaciones a cada etiqueta de entrada.
  • Es posible que desees considerar una tabla o estructura div para el espaciamiento adecuado de las etiquetas y de los rótulos de entrada adyacentes.

No dejes de ver

Referencias

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles