Si quieres empezar tu propio negocio o simplemente tener tu propio sitio web, este tutorial es para ti. Aquí te diremos todos los pasos para crear una página web en HTML.
Cómo creo una página Web
Escribir el código
Primero, debes abrir tu Bloc de notas, o Notepad en tu computadora si cuentas con un sistema operativo de Windows. Si usas una plataforma Mac, es el programa Textedit, que se encuentra en tu carpeta de aplicaciones.
Una vez abierto este programa, debes escribir una etiqueta (tag en inglés) donde indiques los códigos. Para iniciar el texto en código HTML debes usar la etiqueta: . Para cerrar, debes usar el tag:
Cada indicación debe estar escrita entre signos de comparación, y al terminar con una etiqueta, debe tener una diagonal después del primer símbolo de comparación.
Posteriormente, deben añadirse las etiquetas: y . Todo el código será escrito en inglés. Después de añadir la cabeza del texto, sigue el título; es decir que hay que colocar las etiquetas y .
Como todo tiene una estructura, las siguientes etiquetas son y , o sea que el esqueleto de tu código debe quedar:
Terminado esto, el archivo deberá ser guardado con el nombre “index.html”. Si te da la opción de guardar como archivo en formato .txt tendrás que cambiar en Tipo a la opción de “Todos los archivos” o “All files” para poder insertar el nuevo formato. Es importante que el título con el que lo guardes vaya entrecomillado, y si te resulta más sencillo, puedes guardarlo en el Escritorio para tener fácil acceso a éste.
Cuando abras el acceso directo, abrirá como una página web en blanco.
Nombrar tu página
Al cerrar éste, y volver a abrir el archivo que creaste en tu Bloc de notas, puedes editar el título pues ahí escribirás el nombre de tu página, puedes nombrarla “Mi primer página web”, o poner tu nombre, o el nombre de tu empresa. El código debe quedar así:
Mi primer página web
Al guardar los cambios y abrir el acceso directo como página de internet, el nombre que elegiste debe aparecer en la pestaña de tu navegador.
Contenido y diseño de la página
Para colocar el contenido, en tu archivo de Bloc de notas deberás colocar tu información entre las etiquetas del cuerpo, o body.
¡Hola! Bienvenido a mi primer página web
Y al guardar los cambios y reabrir la página de internet, el texto que introdujiste debe aparecer en tu página. Como puedes observar, la letra es de color negro y el fondo de la página es blanco.
Si quieres cambiar el diseño, debes introducirlo en tu código de esta forma:
“Bgcolor” corresponde a “background color” es decir, color del fondo. Recuerda que todo el código debe estar en inglés, por lo que si quieres que tu fondo sea de color rosa, debes introducir el término “pink”. Cuando guardes los cambios y abras tu página, todo debe verse negro (de haber introducido este código), pero como la letra también era de color negro, hay que cambiar este código. Para ello hay que escribir:
Los colores siempre deben ir entrecomillados y deben estar después de un signo de igual (=) para que la indicación corresponda al color de fondo o al color del texto.
En lugar de utilizar el nombre en inglés, puedes utilizar el código alfanumérico que le corresponde a cada color. En la página www.color-hex.com/color-wheel/ puedes seleccionar cualquier color y te dirá el código que le corresponde. Por ejemplo, el color negro corresponde al número #000000 y el blanco corresponde al código #ffffff. Así que tu código podría quedar:
para tener el fondo blanco y las letras en negro, ¡tú eliges la combinación que más te guste!
Para darle un poco más de formato a tu página, lo siguiente es añadir párrafos de texto.
Recuerda que este texto sólo es de prueba, puedes intentar crear tu página con este ejemplo para que conozcas las etiquetas y posteriormente cambiarlo por la información que requieras en tu página.
Para añadir párrafos, hay que utilizar la etiqueta al inicio del texto. Por ejemplo:
¡Hola! Bienvenido a mi primer página web. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Al guardar estos cambios deben verse dos párrafos distintos en tu página.
No olvides:
• Guardar todos los cambios que hagas en tu código para ir viendo los progresos en tu página.
• Si no dominas el idioma inglés puedes ayudarte de un diccionario para conocer los términos (como los nombres de los colores), aunque con la práctica te sabrás de memoria los más básicos.
• Ten paciencia. Si la página no se ve como tú querías, revisa de nuevo los códigos. Olvidar hasta el más pequeño símbolo puede cambiar toda la apariencia.
• Busca ayuda. Si lo necesitas, puedes revisar videos tutoriales que te guíen paso a paso y te muestren lo que debe pasar en tu computadora.
Por ejemplo, puedes usar este video para tener mejores referencias: