1. Iniciación a la programación en HTML

Introducción

Aprender a confeccionar una página web desde los cimientos, hoy en día y aunque no lo parezca, facilitará enormemente la compresión de las herramientas actuales, como la de los sistemas de gestión de contenidos, conocidos como CMS, entre los que podemos destacar a WordPress, ya que actualmente representa aproximadamente el 60% de las paginas web creadas con estos sistemas.

Las páginas web son fragmentos de texto, conocidos como lenguajes de programación, redactados de cierta manera y siguiendo unas normas establecidas, para que los navegadores lo entiendan y muestren al usuario o realicen algo concreto.

Conociendo lenguajes de programación

Los lenguajes de programación, son básicamente un texto redactado de una manera concreta, para que luego los navegadores al leer dicho texto, sepan interpretarlo de una manera u otra, según sea su contenido. La base de absolutamente toda página web comienza por los siguientes lenguajes:

HTML

Hyper Text Markup Language o conocido también como HTML, es un lenguaje de programación informática, con el que podemos mediante un tipo de escritura concreta, comunicarnos con nuestro ordenador, y solicitarle que realice ciertas tareas.

Es el lenguaje base para la creación de páginas web, y es entendido por todos los navegadores o dispositivos que visualicen contenido web.

Partiendo de que se trata de la base para la creación de páginas web, para llegar a realizar tareas mas complejas, deberemos usar otros lenguajes de programación complementarios, ya sea para la realización de tareas automatizadas, manejar la interacción del usuario o mejorar el aspecto visual.

CSS

Con HTML por sí solo no podremos personalizar el aspecto del contenido de nuestra página web, para eso se crearon las Hojas de estilo o conocido ampliamente como CSS (Cascading Style Sheets), un lenguaje de programación enfocado en la personalización del contenido de una página web, gracias a él podremos manejar todas las características de los elementos visibles, tales como el color, tamaño, posición, etc.

El código escrito en CSS no sirve para nada si no va acompañado de código HTML, por lo que los hace necesariamente inseparables.

Conceptos básicos para un futuro programador web

Para el desarrollo web, necesitamos tener claros algunos conceptos, además de conocer algunas herramientas con las que llevar a cabo la elaboración de nuestras páginas.

Herramientas

Necesitarás ciertas herramientas para crear una página web, estas herramientas aunque algunas de ellas no son indispensables, si que te ayudarán mucho en el desarrollo. Otras de ellas ya las tienes instaladas en tu ordenador y son de tu uso cotidiano.

Navegadores

Algunos de estos ya se encuentran instalados en tu ordenador, incluso ya sabrás de cuales se trata, aquí te nombro algunos por si no los conoces:

  • Google Chrome: probablemente dispongas de el en tu ordenador, ya que se trata del navegador mas usado en todo el mundo, y desde el que están basados otros navegadores como por ejemplo Microsoft Edge u Opera.
  • Firefox: el principal competidor de Chrome que ofrece otro tipo de soluciones en su navegador.
  • Microsoft Edge: el actual navegador integrado en Microsoft Windows 10, esta basado en el código de Chrome por lo que algunas cosas te resultarán familiares en él.
  • Opera Browser: basado en Chrome, este navegador ofrece otros tipos interesantes de organización del contenido que visitamos, además dispone de versiones enfocadas a jugadores o creadores de contenido.

Editores o entornos de desarrollo

Los editores simplemente te dan la posibilidad de crear y modificar archivos, sin embargo un entorno de desarrollo lleva incluidas las herramientas necesarias para hacerlo todo desde dentro del mismo.

  • Visual Studio Code: creo que se trata del editor mas completo y mas usado hasta la fecha, es un entorno de trabajo completo, donde agrupar todas las herramientas. Además puede expandir sus habilidades con sus extensiones, que se pueden instalar desde el propio editor. Y por supuesto es totalmente gratis.
  • SublimeText: un buen editor completo, pensado en el desarrollo, aunque puedes usarlo gratuitamente, cada unos minutos te sale un aviso para que realices un pago, este aviso no te dificulta usarlo libremente.
  • Editor de texto o bloc de notas: aunque no lo creas, puedes programar con un simple editor de textos como los que ya vienen incluido en tu Windows, Linux o Mac OS .

Servidores web

Los servidores web son aplicaciones que se encargan de interpretar nuestro código y realizar la entrega del código ya procesado al visitante que lo ha solicitado.

Podemos disponer de un servidor web en nuestro ordenador o contratando uno remoto (a distancia).

Lo normal para realizar nuestras pruebas y durante el desarrollo es optar por la opción de instalarlo en nuestro ordenador, y una vez finalizado el trabajo *subir los archivo a un servidor en producción.

*Almacenar los archivo en un servidor contratado para que estén disponibles para el público 24/7.

Si necesitas mas detalles

  • Lenguaje de programación: https://es.wikipedia.org/wiki/Lenguaje_de_programaci%C3%B3n
  • Navegador web: https://es.wikipedia.org/wiki/Navegador_web
  • Entorno de pruebas: https://es.wikipedia.org/wiki/Entorno_de_pruebas_(inform%C3%A1tica)
  • Entorno de desarrollo: https://es.wikipedia.org/wiki/Entorno_de_desarrollo_integrado
  • Servidor web: https://es.wikipedia.org/wiki/Servidor_web