Investigación sobre HTML, CSS y JavaScript
Portada
Alumno: Angel Maximiliano Reyes Guerrero
Materia: TIC4
Profesor: Jennifer Vera
Grupo: 208B
Fecha:28/07/2026
Índice
• Introducción
• HTML
• CSS
• JavaScript
• Conclusión y recomendaciones
• Bibliografía
Introducción
HTML, CSS y JavaScript son las tecnologías fundamentales del desarrollo web. HTML
estructura el contenido, CSS define el diseño y JavaScript aporta interactividad.
HTML (HyperText Markup Language)
Definición
HTML (HyperText Markup Language) es un lenguaje de marcado que se utiliza para
crear y estructurar el contenido de las páginas web. No es un lenguaje de programación,
ya que no realiza operaciones lógicas ni cálculos; su función es organizar la información
mediante etiquetas que indican la estructura del contenido.
Historia
HTML fue creado por Tim Berners-Lee en 1991, mientras trabajaba en el CERN. Su
objetivo era facilitar el intercambio de información entre investigadores mediante
documentos enlazados a través de hipervínculos.
A lo largo de los años, HTML ha evolucionado para adaptarse a las nuevas necesidades
de Internet. En 2014 se publicó HTML5 como una recomendación oficial y actualmente
se mantiene como un Living Standard, es decir, un estándar que se actualiza
continuamente sin necesidad de lanzar nuevas versiones numeradas.
¿Para qué sirve?
HTML sirve para:
• Crear la estructura de una página web.
• Organizar textos, imágenes, videos y enlaces.
• Diseñar formularios para capturar información.
• Integrar contenido multimedia.
• Definir tablas, listas y secciones de una página.
• Servir como base para trabajar junto con CSS (diseño) y JavaScript (interactividad).
Características principales
• Es fácil de aprender.
• Utiliza etiquetas (tags) para definir el contenido.
• Es compatible con todos los navegadores modernos.
• Es un estándar abierto mantenido por el World Wide Web Consortium (W3C) y el
WHATWG.
• Permite crear páginas accesibles para diferentes dispositivos.
• Funciona en cualquier sistema operativo.
¿En qué programas se desarrolla?
Aunque HTML puede escribirse en cualquier editor de texto, los más utilizados son:
• Visual Studio Code
• Notepad++
• Sublime Text
• Brackets
• NetBeans
• Atom
• Adobe Dreamweaver
Los archivos HTML se guardan con la extensión .html o .htm.
Aplicaciones
HTML se utiliza para desarrollar:
• Páginas web personales.
• Sitios corporativos.
• Tiendas en línea.
• Blogs.
• Formularios web.
• Plataformas educativas.
• Aplicaciones web.
• Portafolios digitales.
• Sistemas de gestión de contenido (CMS).
Ventajas
• Es gratuito y de código abierto.
• Es sencillo de aprender.
• Compatible con todos los navegadores.
• Permite integrar CSS y JavaScript.
• Es el lenguaje base del desarrollo web.
• Favorece el posicionamiento SEO cuando se utiliza correctamente.
Desventajas
• Por sí solo no puede crear páginas dinámicas.
• Necesita CSS para mejorar la apariencia.
• Requiere JavaScript para agregar interactividad.
• En proyectos grandes puede volverse difícil de mantener sin una buena
organización.
Versiones de HTML
Versión Año Características principales
HTML 1.0 1991 Primera versión con funciones básicas.
HTML 2.0 1995 Se convirtió en un estándar oficial.
HTML 3.2 1997 Agregó tablas, scripts y estilos básicos.
HTML 4.01 1999 Mejoró la separación entre contenido y presentación.
XHTML 2000 Basado en XML con reglas más estrictas.
Incorporó audio, video, canvas, geolocalización y nuevas
HTML5 2014
etiquetas semánticas.
HTML Living
Actualidad Se actualiza continuamente con nuevas mejoras y funciones.
Standard
Estructura básica de un documento HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mi primera página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Bienvenido a mi primera página web.</p>
</body>
</html>
Explicación del código
• <!DOCTYPE html>: Indica que el documento utiliza HTML5.
• <html>: Es el elemento raíz de toda la página.
• <head>: Contiene información del documento que no se muestra al usuario.
• <meta charset="UTF-8">: Permite utilizar caracteres especiales como la ñ y las
tildes.
• <title>: Define el título que aparece en la pestaña del navegador.
• <body>: Contiene todo el contenido visible de la página.
• <h1>: Representa el encabezado principal.
• <p>: Define un párrafo de texto.
Etiquetas HTML más utilizadas
Etiqueta Función
<h1> a <h6> Encabezados o títulos.
<p> Párrafos.
<a> Enlaces o hipervínculos.
<img> Imágenes.
<video> Videos.
<audio> Audio.
<table> Tablas.
<ul> Lista desordenada.
<ol> Lista ordenada.
<li> Elemento de una lista.
<form> Formularios.
<input> Campos de entrada de datos.
<button> Botones.
<div> Contenedor genérico.
Etiqueta Función
<span> Contenedor en línea.
Relación con otras tecnologías
HTML trabaja junto con otras tecnologías fundamentales del desarrollo web:
• HTML: estructura el contenido.
• CSS: da diseño y estilo.
• JavaScript: agrega interactividad y funciones dinámicas.
Los tres forman la base de prácticamente todos los sitios web modernos.
CSS
Definición
CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es un lenguaje de estilos
utilizado para definir la apariencia y el diseño de las páginas web. Permite separar el
contenido (HTML) de la presentación, facilitando la creación de sitios web más
organizados, atractivos y fáciles de mantener.
Historia
CSS fue propuesto por Håkon Wium Lie en 1994 con el objetivo de mejorar la
presentación de los documentos web. En 1996, el W3C (World Wide Web
Consortium) publicó la primera recomendación oficial de CSS (CSS1). Desde entonces
ha evolucionado constantemente para ofrecer nuevas herramientas de diseño y adaptarse
a las necesidades del desarrollo web moderno.
¿Para qué sirve y en qué programas se desarrolla?
CSS sirve para:
• Dar formato y estilo a páginas web.
• Cambiar colores, fuentes y tamaños de texto.
• Organizar la distribución de los elementos.
• Crear animaciones y efectos visuales.
• Diseñar sitios web adaptables a computadoras, tabletas y teléfonos móviles
(Responsive Design).
Se desarrolla en editores de código como:
• Visual Studio Code (VS Code)
• Sublime Text
• Brackets
• Atom
• NetBeans
• Notepad++
Los archivos CSS generalmente tienen la extensión .css.
Aplicaciones
Las principales aplicaciones de CSS son:
• Diseño adaptable (Responsive Web Design).
• Personalización de colores y fondos.
• Modificación de tipografías y tamaños de texto.
• Creación de menús y barras de navegación.
• Animaciones y transiciones.
• Diseño de botones, formularios y tablas.
• Organización del contenido mediante Flexbox y CSS Grid.
Versiones
• CSS1 (1996): Primera versión con estilos básicos.
• CSS2 (1998): Agregó posicionamiento, tipos de medios y nuevas propiedades.
• CSS2.1 (2011): Corrigió errores y mejoró la compatibilidad entre navegadores.
• CSS3 (2011): Introdujo módulos independientes, animaciones, sombras, bordes
redondeados, gradientes, Flexbox y mucho más.
• CSS Living Standard: Es la versión actual, que se actualiza continuamente sin
lanzar nuevas versiones numeradas.
Ventajas
• Separa el diseño del contenido.
• Reduce la cantidad de código HTML.
• Facilita el mantenimiento de los sitios web.
• Permite reutilizar estilos en varias páginas.
• Mejora la experiencia del usuario con diseños modernos y adaptables.
Ejemplo de código
body{
background: lightblue;
font-family: Arial, sans-serif;
}
h1{
color: blue;
text-align: center;
}
p{
color: black;
font-size: 18px;
}
Este código cambia el color de fondo de la página a azul claro, muestra el título en color
azul y centrado, y define el estilo de los párrafos con un tamaño de letra de 18 píxeles.
JavaScript
Definición
JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a
objetos que permite añadir interactividad y dinamismo a las páginas web. Es uno de los
tres pilares del desarrollo web, junto con HTML y CSS.
Historia
JavaScript fue creado por Brendan Eich en 1995 mientras trabajaba en Netscape.
Inicialmente fue desarrollado en solo diez días con el nombre de Mocha, después cambió
a LiveScript y finalmente adoptó el nombre de JavaScript. Actualmente, su evolución
está regulada por el estándar ECMAScript, desarrollado por ECMA International.
¿Para qué sirve y en qué programas se desarrolla?
JavaScript sirve para:
• Crear páginas web dinámicas e interactivas.
• Validar formularios.
• Manipular el contenido HTML y CSS.
• Crear animaciones y efectos visuales.
• Desarrollar aplicaciones web, móviles y de escritorio.
• Programar servidores mediante [Link].
Los programas y entornos donde se desarrolla incluyen:
• Visual Studio Code (VS Code)
• WebStorm
• Sublime Text
• Atom
• Notepad++
• Navegadores web (Google Chrome, Mozilla Firefox, Microsoft Edge, entre otros)
• [Link]
Los archivos JavaScript utilizan la extensión .js.
Aplicaciones
JavaScript tiene una gran variedad de aplicaciones, entre ellas:
• Validación de formularios.
• Juegos en línea.
• Aplicaciones web interactivas.
• Aplicaciones móviles mediante frameworks como React Native.
• Desarrollo de servidores con [Link].
• Desarrollo de aplicaciones de escritorio con Electron.
• Automatización de tareas y consumo de APIs.
Versiones
• JavaScript (1995): Primera versión creada por Brendan Eich.
• ECMAScript 1 (1997): Primer estándar oficial.
• ES3 (1999): Añadió mejoras importantes al lenguaje.
• ES5 (2009): Incorporó nuevas funciones para manejo de objetos y arreglos.
• ES6 o ECMAScript 2015: Introdujo clases, módulos, funciones flecha, let,
const y promesas.
• Versiones anuales (ES2016, ES2017, ES2018… hasta la actualidad): Cada año
se agregan nuevas características y mejoras al lenguaje.
Ventajas
• Es fácil de aprender para principiantes.
• Funciona en todos los navegadores modernos.
• Permite crear aplicaciones rápidas e interactivas.
• Posee una gran comunidad de desarrolladores.
• Cuenta con miles de bibliotecas y frameworks, como React, Angular y Vue.
Ejemplo de código
function saludar() {
alert("¡Hola Mundo!");
}
saludar();
Este programa crea una función llamada saludar() que muestra una ventana emergente
con el mensaje "¡Hola Mundo!" cuando es ejecutada.
Conclusión y recomendaciones
HTML, CSS y JavaScript trabajan de manera conjunta para desarrollar sitios web
modernos, atractivos y funcionales. HTML proporciona la estructura del contenido, CSS
se encarga del diseño y la presentación, mientras que JavaScript añade interactividad y
comportamiento dinámico.
Para aprender desarrollo web de forma efectiva, se recomienda estudiar primero HTML,
después CSS y finalmente JavaScript, ya que cada uno complementa al anterior.
También es importante practicar constantemente mediante proyectos personales, resolver
ejercicios y consultar la documentación oficial para mantenerse actualizado con las
nuevas tecnologías.
Bibliografía
• MDN Web Docs.
• W3Schools.
• WHATWG HTML Living Standard.
• ECMA International – ECMAScript.
• [Link].