HTML5 – Mi primera página web

Bienvenidos una vez más a nuestro blog, no me cansaré nunca de daros la bienvenida, es más, me encanta. Hoy aprenderemos a desarrollar vuestra primera página web simple en HTML5, creando una estructura básica, añadiendo nuestra hoja de estilos y enlazando a un archivo JavaScript. ¡Wow, wow! ¿Qué es eso de JavaScript? No nos pongamos nerviosos, todo en su momento.

Empezando mi primera página web

Antes de escribir ninguna línea de código, diré que la estructura de un archivo HTML debe ser puramente lineal. Como si fuese la lectura de la página de un libro: de arriba a abajo y de izquierda a derecha. No necesariamente tiene que ser así, ya que con CSS podemos ajustar los elementos como queramos, pero por temas de propia estructura y mantenimiento es mejor no empezar la casa por el tejado.

Vamos a crear una página como la de la siguiente imagen

El resultado de código es el esqueleto de nuestra página. Ahora falta darle algún estilo.

Dando estilo a nuestra web

Hemos especificado que nuestro fichero style.css se encontrará en la carpeta css:

Ahora nuestra web luce algo más parecida al ejemplo:

No está mal, ¿verdad? ^^

Enlazando fichero JavaScript

Si bien hasta ahora no habíamos hablado nada sobre JavaScript, podemos hacer una breve introducción sobre él.

Es un lenguaje de programación interpretado, se define como orientado a objetos,basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor (server-side). wikipedia

En otras palabras, JS es un lenguaje que nos permitirá alterar nuestra página y añadir funcionalidad extra.

Vamos a añadir un fichero .js que salude al usuario nada más entrar a nuestra página, mediante un mensaje de alerta. Es una buena práctica añadir nuestros ficheros js justo antes del cierre de la etiqueta </body>. ¿Por qué en el pie de la página? El problema de los scripts JS es que mientras se descargan, bloquean la descarga de otros contenidos importantes de la página, como por ejemplo las imágenes, y si el script falla, fallará la carga de toda la página.

Creamos una carpeta llamada js, y dentro de ella nuestro script.js, y como hemos mencionado, añadimos la siguiente línea a nuestro código html:

El fichero script.js contiene únicamente esta línea de código:

Evidentemente no tiene mucho sentido hacer algo así, ¡pero ya sabemos cómo añadir código JavaScript a nuestra página!

¡Nos vemos en el siguiente rootie amigos, que tengáis una fantástica semana!

One Comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *