domingo, 12 de octubre de 2025

Introducción a JavaScript y la estructura de una página web

🧩 1. ¿Qué es HTML? 

HTML (HyperText Markup Language) es el lenguaje que da estructura y contenido a una página web. Podemos pensar en él como los “huesos” de la página.

Recuerda: “index” es el nombre del archivo y “.html” es la extensión, que nos dice el tipo de archivo que es. Los sitios web pueden estar hechos por muchas, muchísimas páginas, no obstante, la página principal siempre la llamaremos:

index.html




Qué hace este archivo:

  • Define la estructura básica de la página.

  • Usa etiquetas (<h1>, <p>, <button>) para mostrar texto o botones.

  • Enlaza los otros dos archivos: uno de estilos (estilos.css) y otro de funcionalidades (script.js).

HTML está construido de elementos que tienen significados importantes.

Cada elemento tiene una etiqueta de apertura (al principio) y una de cierre (al final), con el contenido del sitio escrito entre estas dos etiquetas.

Estas etiquetas de apertura y cierre para cada elemento están escritas dentro de corchetes angulares (como estos: < >, aunque la etiqueta de cierre tiene una barra inclinada (como esta: <  /  >).

La primera pieza de HTML que escribiremos es el <!DOCTYPE html> el cual le dice al navegador “éste es un documento HTML!.

Luego, debajo de eso, necesitamos el elemento <html>:

Todo lo demás será anidado dentro de este elemento.
Por ejemplo, un elemento de párrafo anidado dentro de elemento body:


El elemento head contiene la etiqueta title de nuestra página, la cual muestra el titulo de nuestra página en la pestaña del navegador.
Cuando tengamos que crear un archivo nuevo para añadir estilos a éste, tendremos que conectar los dos documentos a través de un enlace que agregaremos en el head: 

Todo lo que veremos en nuestro sitio en el navegador será anidado dentro del elemento body
El elemento header no es lo mismo que el elemento head . El header vive dentro del elemento body y, por lo general, contiene todas las cosas que van en la parte superior de la página. 

La parte principal del sitio contiene la información más importante así que todo ese contenido podrá estar dentro de un elemento llamado main.

El footer es la parte al final del sitio (sigue estando dentro del body). Por lo general, veremos algunos enlaces aquí, tales como Facebook y Twitter, o algunos textos pequeños, sólo para dejarle saber a las personas quienes crearon el sitio.

Agregaremos una oración, orgullosamente diciendo que hicimos el sitio dentro del elemento footer.

Por último y no menos importante podemos contar con "notas o comentarios" que acompañen el código de nuestro sitio en html:  


🎨 2. ¿Qué es CSS?

CSS (Cascading Style Sheets) da estilo y diseño a la página.
Podemos pensar en él como la “ropa” o los “colores” de la web.

estilos.css



Qué hace este archivo:

  • Cambia el color de fondo, los tipos de letra, el color de los textos y el aspecto de los botones.

  • No contiene lógica, solo diseño visual.


⚙️ 3. ¿Qué es JavaScript (JS)?

JavaScript da vida y movimiento a la página.

Podemos pensar en él como la "acción" que permite interacción.

script.js



Qué hace este archivo:

  • Espera que el usuario haga clic en el botón.

  • Muestra una ventana donde se pide su nombre.

  • Luego saluda al usuario con un mensaje personalizado.


____________________________________________________________

💻 Usar Trinket

  1. Entrá a https://trinket.io

  2. Elegí "New HTML" o "Crear nuevo proyecto HTML".

  3. Pegá cada código en su pestaña correspondiente:

    • index.html → pestaña HTML

    • estilos.css → pestaña CSS

    • script.js → pestaña JavaScript

  4. Presioná ▶️ Run para ejecutar.


    _______________________________________________________

    💻Usar CodePen

Ambas son plataformas gratuitas que permiten ejecutar código web:

1. Entra a https://codepen.io/pen
2. Copiás:

  • HTML → panel HTML

  • CSS → panel CSS

  • JS → panel JS

3. Y hacés clic en “Run”.



a la/s

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)