Creación de su primer sitio web: 10 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

En este tutorial, aprenderá a crear una página web básica que tenga una hoja de estilo vinculada y un archivo javascript interactivo.

Paso 1: creación de su carpeta

Cree una carpeta para almacenar los archivos que crearemos. Siéntase libre de nombrarlo como desee, solo recuerde dónde está ubicado porque guardaremos archivos en él más adelante.

Paso 2: creación de su primer archivo

Abra su editor de texto favorito. En mi caso, simplemente usaré el bloc de notas integrado de Windows 10. Una vez que tenga un nuevo archivo, escriba lo siguiente:

¡Esta es mi primera página web, presentada por un instructable

Esto es lo que se conoce como etiqueta HTML. Significa Encabezado 1. El texto que colocamos dentro de esta etiqueta aparecerá como encabezado en la página. Se abre y se cierra así. El texto entre las dos etiquetas es lo que se mostrará en su navegador web. La parte que dice es darle a esa etiqueta un atributo al que haremos referencia en el paso x. Una vez hecho esto, continúe y guarde el archivo en la carpeta que creamos en el paso 1 como index.html.

Paso 3: abre el archivo

Ahora que hemos completado, navega hasta el archivo dentro de la carpeta que creamos, haz clic derecho en el archivo y selecciona la opción "abrir con" y selecciona el navegador web que usas. En mi caso, este es Google Chrome. ¡Ahora vea el trabajo de su arduo trabajo hasta ahora!

Paso 4: Diseña tu página

Tal como está, nuestro sitio web es bastante sencillo. Vamos a agregar lo que se conoce como una hoja de estilo en cascada para darle un poco más de sabor a las cosas. Cree un nuevo archivo de texto y escriba lo siguiente:

h1 {color: azul; alineación de texto: centro;}

Lo que le estamos diciendo al navegador aquí es que encuentre cualquier elemento en una etiqueta h1 (que aprendimos en el paso 2) y le da un color azul y lo alinea en el centro de la página. Guarde este archivo en la carpeta que creamos en el paso 1 como style.css.

Paso 5: vincule Style.css a su Index.html

En este punto, tenemos dos archivos separados que no se conocen entre sí. Necesitamos decirle a nuestro archivo index.html que tenemos un archivo style.css al que queremos que se refiera y que tome un poco de estilo. Para hacer esto vamos a abrir nuestro archivo index.html en nuestro editor de texto, y encima de nuestra etiqueta h1 vamos a agregar lo que se conoce como etiqueta de enlace. La etiqueta de enlace hace lo que su nombre indica, enlaza con algo. En nuestro caso, una hoja de estilo. Continúe y escriba. La etiqueta de enlace es una etiqueta de cierre automático, por lo que no se requiere una etiqueta de finalización. El rel significa relación y href le dice al archivo de índice dónde se encuentra nuestro archivo externo al que hacemos referencia. Ahora guarde ese archivo index.html.

Paso 6: vea su página con un nuevo estilo

Vuelva al paso 3 y vuelva a cargar su página web y observe cómo se reflejan los cambios.

Paso 7: creación de un botón

Vuelva a abrir su archivo index.html en su editor de texto y escriba lo siguiente:

¡Haz click en mi!

y guarde el archivo. Esto crea un elemento de botón en la página. Una vez guardado, vuelva a abrir el archivo como se muestra en el paso 3 y asegúrese de que el botón esté en la parte inferior izquierda de su página.

Paso 8: crea tu archivo Javascript

Por último, vamos a crear nuestro archivo javascript. Esto es lo que hará que nuestro sitio sea interactivo. Abra un editor de texto y escriba lo siguiente:

document.querySelector ("botón #"). addEventListener ("clic", función () {

document.querySelector ("# header"). innerText = "Cambiar el título sobre la marcha"

})

Lo que estamos haciendo es pedirle al documento que nos encuentre un elemento con el ID de botón, y vamos a hacer que el botón responda a un evento de clic cambiando el texto de un elemento con el ID de encabezado a "Cambiar el encabezado sobre la marcha ". Guarde el archivo como button.js en la carpeta que creamos en el Paso 1.

Paso 9: vincule sus archivos de índice y JavaScript

Como hicimos con el archivo style.css, necesitamos informar a nuestro archivo index.html sobre nuestro archivo javascript. En la parte inferior, debajo de todo lo que hemos hecho hasta ahora, escriba lo siguiente:

La etiqueta de script nos permite agregar un lenguaje de script (en nuestro caso, javascript) para brindar funcionalidad a nuestra página. Le estamos diciendo que busque un archivo llamado button.js y agregue todo el código que contiene a nuestro archivo de índice. Una vez que haya escrito eso, guarde el archivo y ábralo nuevamente como se muestra en el paso 3.

Paso 10: Pruebe el botón recién creado

¡Ahora siga adelante, haga clic en el botón y observe cómo cambia el rumbo!

¡¡Felicidades!! ¡Ya ha creado su primera página web interactiva! Me pregunto cuánto más podrías llevarlo sabiendo lo que sabes ahora.