Introducción a la Programación Web: Creando tu Primer Sitio desde Cero
¡Hola, Gente! 🚀
En nuestro primer post, te presenté InnovaJoh y mi pasión por la tech.
Hoy, vamos a sumergirnos en lo básico: la programación web. Si eres nuevo en esto, no te preocupes – es como forjar un flujo de datos en un lienzo digital. Aprenderás qué es, por qué importa y cómo crear tu primer sitio web simple. ¡Empecemos!
¿Qué es la Programación Web?
La programación web es el arte de crear páginas y aplicaciones que viven en internet. Usa lenguajes como HTML (para estructura), CSS (para estilo) y JavaScript (para interactividad). Es fundamental para apps móviles, e-commerce y hasta videojuegos web. Como estudiante autodidacta, empecé aquí y me abrió puertas a proyectos más complejos como IoT o diseño UI/UX.
Paso a Paso: Crea tu Primer Sitio Web
Instala Herramientas Básicas: Usa un editor de texto como VS Code (gratis). Crea una carpeta nueva para tu proyecto de la siguiente manera:
Abre Visual Studio Code (VS Code) de esta forma:
Puedes crear manualmente la carpeta para tu proyecto y seleccionarla desde el enlace que dice abrir carpeta o crear una dentro del IDE (Entorno de Desarrollo Integrado) seleccionando el icono de la carpeta con el símbolo de "+" y después asignándole un nombre:
Después creamos un archivo .html con el nombre que queramos, este archivo lo creamos en el icono del documento con el símbolo de "+" y escribiendo el nombre del archivo con el tipo de documento que será, ejemplo: HTML = Nombre.html, JavaScript = Nombre.js o CSS = Nombre.css
Al crear nuestro documento escribiremos html y nos aparecerán las siguientes opciones, seleccionaremos la que dice HTML:5, esa opción nos dará el cuerpo base de la pagina
Despues Escribe lo siguiente (no te limites, experimenta!):
<!DOCTYPE html>
<html>
<head>
<title>Mi Primer Sitio</title>
</head>
<body>
<h1>¡Hola, Mundo Web!</h1>
<p>Bienvenido a ForgeFlux.</p>
</body>
</html>
Ahora para poder ver como lucen los textos agregados iremos a la parte inferior derecha y presionaremos el texto que dice Go Live:
Después nos enviara a una pestana de nuestro navegador donde abrirá la pagina:
Agrega CSS para Estilo: puedes crear un archivo styles.css y enlazarlo en el HTML o escribir una etiqueta " <style> </style> " y dentro de ella escribir lo siguiente:
body { background-color: #007ACC; color: white; font-family: Arial; }
h1 { color: #FF4500; }
Se verá así:
Ahora tu sitio tiene colores ForgeFlux: azul y naranja.
Prueba y Publica: Abre el archivo en un navegador. Para compartir, sube a GitHub Pages (gratis).
¡Felicidades! Has forjado tu primer flujo web. Experimenta cambiando colores o agregando imágenes.
Enlaces a Videos Recomendados
Para visualizarlo mejor, mira estos videos gratuitos:
Curso Básico de HTML5 y CSS3 Desde Cero - deivchoi (Tutorial en español, 36:36 min).
HTML en 5 minutos | Te lo explico así nomás. - Dot Dager (Rápido y práctico).
Curso HTML para Principiantes - Fast (Introducción en español, 1hora).
¿Qué te pareció? ¡Comparte tu sitio en comentarios y suscríbete para más tutoriales! #ForgeFlux
Comentarios
Publicar un comentario