Cómo crear una página de inicio en HTML (En 6 Pasos)

Por tim searles
Cómo crear una página de inicio en HTML (En 6 Pasos)
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.

Paso 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).

Paso 2

Crea un formulario HTML. Entre las etiquetas y necesitarás escribir

; 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:

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

Paso 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:

Paso 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:

Paso 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:

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:

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.

Paso 6

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

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

Referencias