Scribd
Cargar
14 vistas9 páginas

Informe Sobre HTML

HTML (Hipertexto Markup Language) es el lenguaje fundamental para la creación y estructuración de contenido en la web, evolucionando desde su creación en 1991 hasta HTML5, que introduce elementos semánticos y soporte nativo para multimedia. La estructura de un documento HTML incluye etiquetas como <html>, <head>, y <body>, y se complementa con CSS para el estilo y JavaScript para la interactividad. HTML mejora la accesibilidad y la experiencia del usuario, siendo esencial para el desarrollo web moderno.

Cargado por

luquealvaro12
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
14 vistas9 páginas

Informe Sobre HTML

HTML (Hipertexto Markup Language) es el lenguaje fundamental para la creación y estructuración de contenido en la web, evolucionando desde su creación en 1991 hasta HTML5, que introduce elementos semánticos y soporte nativo para multimedia. La estructura de un documento HTML incluye etiquetas como <html>, <head>, y <body>, y se complementa con CSS para el estilo y JavaScript para la interactividad. HTML mejora la accesibilidad y la experiencia del usuario, siendo esencial para el desarrollo web moderno.

Cargado por

luquealvaro12
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

Informe Extendido sobre HTML (Hipertexto Markup Language)

Introducción

HTML (Hipertexto Markup Language) es el estándar fundamental y el primer lenguaje que


se utiliza para la creación y estructuración de contenido en la web. Aunque HTML ha
evolucionado considerablemente desde su creación por Tim Berners-Lee en 1991, sigue
siendo un pilar esencial en el desarrollo de sitios web modernos, facilitando la creación de
páginas interactivas y dinámicas. HTML define la estructura básica de una página web,
permitiendo la integración de elementos multimedia, formularios y enlaces.

Definición

HTML es un lenguaje de marcado de texto que emplea etiquetas (o elementos) para


estructurar el contenido de una página web. Estos elementos incluyen encabezados,
párrafos, enlaces, imágenes y tablas, entre otros. HTML no es un lenguaje de programación,
ya que no tiene la capacidad de realizar cálculos o ejecutar lógica como un lenguaje de
programación tradicional, pero proporciona la base sobre la que otros lenguajes como CSS
y JavaScript trabajan para mejorar la apariencia y la interactividad de la página.

Historia y Evolución de HTML

HTML ha atravesado varias fases de evolución, adaptándose a los avances tecnológicos y


las necesidades de la web. Estas son las versiones más importantes de HTML:

HTML 1.0 (1991):

Propósito: Fue el primer intento de crear un lenguaje estándar para las páginas web.

Características: Muy básico, con soporte solo para texto, enlaces y alguna estructura
simple (como listas).

Limitaciones: No soportaba multimedia, estilos o interactividad.

HTML 2.0 (1995):

Propósito: Definir formalmente la especificación de HTML para su adopción a nivel


mundial.

Características: Introducción de formularios y tablas.

Limitaciones: No permitía gráficos ni sonidos de forma nativa.

HTML 3.2 (1997):

Propósito: Hacer más atractiva la web con el soporte para más elementos visuales.
Características: Se incluyeron las tablas y el soporte para el lenguaje de hojas de estilo
(CSS). Esto permitió diseñar las páginas de manera más avanzada.

Limitaciones: A pesar de estas mejoras, la interactividad y la multimedia seguían siendo


limitadas.

HTML 4.01 (1999):

Propósito: Mejorar la accesibilidad y la separación entre contenido y presentación.

Características: Inclusión de elementos como <div> y <span> para estructurar mejor las
páginas web. Introducción de soporte mejorado para formularios y tablas.

Limitaciones: Aunque se implementaron avances significativos, la experiencia del usuario


seguía dependiendo en gran medida de tecnologías adicionales como Flash y JavaScript.

HTML5 (2014):

Propósito: Crear un lenguaje que ofreciera soporte nativo para multimedia, mejor
accesibilidad, y mayor flexibilidad en el diseño y la interacción.

Características:

Elementos semánticos: Introducción de etiquetas como <article>, <section>, <header>,


<footer>, <nav>, <figure>, y <aside>, que ayudan a mejorar la comprensión del
contenido por parte de los motores de búsqueda y las personas con discapacidad.

Multimedia: Soporte nativo para la integración de videos y audios sin necesidad de


complementos adicionales, mediante las etiquetas <video> y <audio>.

API y funcionalidades interactivas: HTML5 facilitó la integración de APIs como Web


Storage (para almacenamiento local) y geolocalización.

Compatibilidad con dispositivos móviles: Diseño más flexible y eficiente en dispositivos


móviles y pantallas de diferentes tamaños.

Ventajas: Con HTML5, las páginas web pueden ofrecer una experiencia más rica,
interactiva y accesible sin depender de complementos como Flash.

Estructura de un Documento HTML

Un documento HTML está compuesto por una serie de elementos que ayudan a estructurar
el contenido de la página. La estructura básica incluye:

1 <!DOCTYPE html>:
o Indica que el documento está escrito en HTML5.
2 <html>:
o Etiqueta principal que envuelve todo el contenido de la página web.
3 <head>:
o Contiene metadatos sobre la página, como el título, enlaces a archivos CSS,
JavaScript, o fuentes.
4 <title>:
o Especifica el título de la página web que aparece en la pestaña del navegador.
5 <body>:
o Contiene el contenido visible de la página web, como texto, imágenes,
videos, tablas, formularios, etc.

Ejemplo de Documento HTML


html
Copiar código
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Página Web</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>Bienvenidos a mi sitio web</h1>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
</ul>
</nav>
</header>
<section>
<h2>Sobre mí</h2>
<p>Este es un párrafo sobre mi página web.</p>
</section>
<footer>
<p>&copy; 2025 Mi sitio web</p>
</footer>
</body>
</html>

Elementos y Atributos de HTML

HTML se basa en el uso de etiquetas que indican la estructura del contenido. Aquí están
algunos de los elementos y atributos más comunes:

 Etiquetas básicas:
o <h1>, <h2>, <h3>, ... <h6>: Para crear encabezados de diferentes niveles.
o <p>: Para definir párrafos de texto.
o <a href="URL">: Para crear enlaces a otras páginas o sitios web.
o <img src="ruta-imagen" alt="texto alternativo">: Para insertar
imágenes.
 Atributos: Los atributos modifican el comportamiento de las etiquetas. Algunos
ejemplos comunes incluyen:
o href: Para definir la URL en enlaces (<a>).
o src: Para definir la fuente de una imagen (<img>).
o alt: Texto alternativo para imágenes, importante para accesibilidad.
o class: Para asignar clases a los elementos y aplicarles estilos con CSS.
o id: Para identificar un elemento de forma única en la página.

HTML y CSS: Separación de Contenido y Estilo

Aunque HTML se encarga de la estructura del contenido, CSS (Cascading Style Sheets)
se utiliza para definir la apariencia de la página. Con CSS, se puede controlar el diseño, los
colores, las fuentes, el espaciado y otros aspectos visuales. HTML y CSS trabajan juntos
para crear una página web bien estructurada y visualmente atractiva.

 HTML: Define los elementos.


 CSS: Define el estilo de esos elementos.

Ejemplo de Uso de CSS con HTML:


html
Copiar código
<!DOCTYPE html>
<html>
<head>
<title>Mi página con CSS</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Este es un párrafo con texto formateado utilizando CSS.</p>
</body>
</html>

HTML y JavaScript: Interactividad

JavaScript es el lenguaje de programación que permite agregar interactividad y dinamismo


a las páginas web. Aunque HTML proporciona la estructura básica, JavaScript se utiliza
para manipular esa estructura de manera dinámica (como responder a clics, enviar
formularios sin recargar la página, etc.).

Ejemplo de HTML con JavaScript:


html
Copiar código
<!DOCTYPE html>
<html>
<head>
<title>Interactividad con JavaScript</title>
<script>
function saludo() {
alert("¡Hola, bienvenido a mi página web!");
}
</script>
</head>
<body>
<button onclick="saludo()">Haz clic aquí</button>
</body>
</html>

Accesibilidad en HTML

HTML proporciona varias maneras de hacer que las páginas sean más accesibles para
personas con discapacidades. Algunas buenas prácticas incluyen:

1. Etiquetas semánticas: Uso de etiquetas como <header>, <footer>, <article>,


<nav>, y <section> para estructurar el contenido de manera lógica.
2. Atributos alt en imágenes: Proveer una descripción alternativa de las imágenes
para usuarios con discapacidades visuales.
3. Uso de formularios accesibles: Incluir etiquetas <label> asociadas con los
campos de formulario para mejorar la experiencia de los usuarios con lectores de
pantalla.

Conclusión

HTML es la base esencial de la web moderna. Desde su invención, ha crecido para ofrecer
nuevas características que mejoran la funcionalidad, la accesibilidad y la experiencia del
usuario. Aunque HTML es fundamental para la estructuración del contenido, su integración
con CSS y JavaScript es lo que permite crear sitios web completos, interactivos y atractivos.
La evolución de HTML5 ha dado una mayor importancia a la semántica, la compatibilidad
con dispositivos móviles y el soporte de medios enriquecidos, lo que convierte a HTML en
una herramienta fundamental para cualquier desarrollador web.

Un documento HTML típico está compuesto por los siguientes elementos:


html
Copiar código
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<h1>Bienvenidos a mi página</h1>
<p>Este es un párrafo de texto.</p>
</body>
</html>

Descripción de los elementos:

 <!DOCTYPE html>: Declara el tipo de documento. Esto le dice al navegador que el


contenido es un archivo HTML5.
 <html>: Etiqueta raíz que contiene todo el contenido de la página.
 <head>: Contiene metadatos sobre el documento, como el título de la página o enlaces a
archivos CSS y scripts.
 <title>: Define el título que aparecerá en la pestaña del navegador.
 <body>: Contiene todo el contenido visible de la página web, como texto, imágenes,
formularios, etc.
 <h1>: Representa el encabezado de mayor jerarquía.
 <p>: Define un párrafo de texto.

Características Principales de HTML

Etiquetas y Atributos: Las etiquetas HTML son fundamentales en la construcción de una


página web. Estas se utilizan para definir el contenido y su estructura. Muchas etiquetas
pueden incluir atributos que modifican su comportamiento o apariencia. Por ejemplo:

<a href="https://www.ejemplo.com">Enlace a Ejemplo</a>: La etiqueta <a> crea un


enlace, y el atributo href define la URL a la que dirige.

<img src="imagen.jpg" alt="Descripción de la imagen">: La etiqueta <img> se usa


para mostrar imágenes y el atributo src define la fuente de la imagen.

Semántica: HTML5 introdujo una mejor semántica en la estructura de las páginas. Esto
significa que se utilizan etiquetas más específicas para dar un significado más claro a cada
parte del contenido:

<header>, <footer>, <article>, <section> y <nav> son ejemplos de elementos semánticos


que mejoran la accesibilidad y la comprensión del contenido tanto para usuarios como para
motores de búsqueda.

Multimedia: HTML permite integrar contenido multimedia, como imágenes, videos, y


sonidos. Esto se logra con etiquetas como:
<img> para imágenes.

<video> y <audio> para contenido multimedia.

Ejemplo:

html
Copiar código
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta el video.
</video>

Enlaces y Formularios: HTML permite incluir enlaces y formularios interactivos. Los


enlaces se definen con la etiqueta <a>, y los formularios con la etiqueta <form>, que puede
incluir varios tipos de controles como campos de texto, botones y casillas de verificación.

Evolusion de html

A lo largo de los años, HTML ha experimentado varias versiones. Algunas de las más
destacadas son:

1. HTML 1.0 (1991): La versión inicial, que solo soportaba la visualización de texto y enlaces.
2. HTML 2.0 (1995): Introducción de formularios y tablas.
3. HTML 3.2 (1997): Añadió soporte para estilos y contenido multimedia.
4. HTML 4.01 (1999): Se estandarizó la estructura, y se introdujeron nuevos elementos como
<div> y <span>.
5. HTML5 (2014): Una de las actualizaciones más importantes, que introdujo nuevas
etiquetas semánticas, soporte mejorado para multimedia, API de JavaScript y muchas
mejoras en el rendimiento.

Ventajas de HTML

1. Simplicidad: HTML es fácil de aprender y usar, especialmente para quienes se inician en el


desarrollo web.
2. Compatibilidad: Es compatible con todos los navegadores web y dispositivos.
3. Accesibilidad: Mejora la accesibilidad web, ya que es fácilmente indexable por motores de
búsqueda y accesible para personas con discapacidades.
4. Interactividad: Aunque HTML por sí solo no ofrece interactividad avanzada, se puede
combinar con JavaScript y CSS para crear experiencias ricas y dinámicas.
HTML es la base esencial de la web moderna. Desde su invención, ha crecido para
ofrecer nuevas características que mejoran la funcionalidad, la accesibilidad y la
experiencia del usuario. Aunque HTML es fundamental para la estructuración del
contenido, su integración con CSS y JavaScript es lo que permite crear sitios web
completos, interactivos y atractivos. La evolución de HTML5 ha dado una mayor
importancia a la semántica, la compatibilidad con dispositivos móviles y el soporte
de medios enriquecidos, lo que convierte a HTML en una herramienta fundamental
para cualquier desarrollador web

Ejenplo de HTML con JavaScript

Ejenplo de HTML con CSS


ejenplo de document o en HTML

También podría gustarte