2. lenguaje de etiquetas html

  Lenguaje de Etiquetas HTML

¡Hola, qué tal! 👋

En este vídeo vamos a ver la estructura HTML que usaremos para construir nuestro primer videojuego. Aprenderemos la estructura básica de un archivo HTML y cómo dar los primeros pasos.

🛠️ Pasos iniciales:

  1. Crear una carpeta llamada HTML.

  2. Abrirla en el editor de código (como Visual Studio Code).

  3. Dentro de la carpeta, crear un archivo llamado index.html (en minúsculas).

🌐 Estructura básica de HTML:

La primera etiqueta es <html>, la etiqueta padre que engloba todo el contenido de la página. Dentro de ella, hay etiquetas "hijo":

  • <head> (cabecera): Contiene metadatos.

    • Ejemplo: la etiqueta <title> para el título de la página (ej. "Primera página").

  • <body> (cuerpo): Aquí va todo el contenido visible.

html
<html>
  <head>
    <title>Primera página</title>
  </head>
  <body>
    <!-- Contenido visible -->
  </body>
</html>

🎮 Ejemplo práctico:

Si agregamos un botón en <body>:

html
<button id="boton1">Botón uno</button>

  • Atributo id: Identifica el elemento para manipularlo con JavaScript (ej. cambiar su color al hacer clic).

🔗 Vincular JavaScript:

  1. Crear un archivo juego.js.

  2. Enlazarlo en index.html con:

html
<script src="juego.js"></script>

  1. En juego.js, probamos un alert:

javascript
alert("¡Bienvenido al juego!");

✅ Al actualizar la página, ¡verás la ventana emergente!

📢 Conclusión:

Así es como se construye una página HTML básica. En el próximo vídeo, avanzaremos con más código para el desarrollo del videojuego. ¡No te lo pierdas!

🚀 ¿Te gustaría que profundicemos en algún tema? ¡Déjalo en los comentarios!

🔗 Recursos útiles:

#HTML #Programación #Videojuegos #WebDev #AprendeATuRitmo


Comentarios

Publicar un comentario

Entradas más populares de este blog

codigo

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicialización function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...
Leer más

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duración:  8:17 / 8:34 Introducción a las funciones en JavaScript Hola, ¿qué tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera función La sintaxis básica de una función comienza con la palabra reservada  function , seguida del nombre de la función: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta función tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta función a un botón en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este botón, se ejecutará la función y veremos nuestro nivel de vida (10...
Leer más