Tabla de Contenido
Significado de HTML #
HTML (HyperText Markup Language) ha evolucionado significativamente desde su primera versión. A lo largo de los años, se han lanzado varias versiones nuevas y se han introducido diferentes estándares y características para mejorar la estructura y la presentación de las páginas web. A continuación, se presenta una breve descripción de la evolución de HTML:
Historia del HTML #
- HTML 1.0: Fue la primera versión oficial de HTML, lanzada en 1993. Era un lenguaje muy básico con etiquetas limitadas y se utilizaba principalmente para crear enlaces hipertexto.
- HTML 2.0: Lanzada en 1995, esta versión mejoró las capacidades de HTML 1.0 al agregar soporte para formularios, imágenes y tablas básicas.
- HTML 3.2: Introducida en 1997, esta versión incluyó características como marcos (frames), hojas de estilo en línea (inline styles) y elementos adicionales para mejorar la semántica y estructura del documento.
- HTML 4.01: Publicada en 1999, esta versión ofrecía un mayor control sobre la presentación y la apariencia de las páginas web mediante la adición de estilos en cascada (CSS), scripting y soporte para multimedia.
- XHTML (HTML extensible): XHTML fue presentado en 2000 como una reformulación de HTML utilizando la sintaxis de XML. Se esforzó por combinar la potencia de HTML 4 y la estructura de XML, lo que permitió una mayor interoperabilidad entre diferentes tecnologías web.
- HTML5: Esta es la versión más reciente y ampliamente utilizada de HTML. Introducida en 2014, HTML5 trajo una serie de nuevas características y mejoras significativas. Incluye soporte nativo para elementos multimedia (audio y video), gráficos vectoriales (SVG), elementos de formulario mejorados, almacenamiento local (localStorage) y la capacidad de crear aplicaciones web interactivas.
Además de estas versiones, es importante mencionar que HTML está en constante desarrollo y evolución. La especificación actual es HTML5.2, y se continúa trabajando en futuras versiones para mejorar aún más la funcionalidad y capacidad de HTML.
Ejemplo de HTML 1.0 #
<HTML>
<HEAD><TITLE>Ejemplo de HTML 1.0</TITLE>
</HEAD><BODY>
<H1>Título de la página</H1>
<P>Este es un párrafo de ejemplo.</P>
<A HREF="https://www.ejemplo.com">Enlace a ejemplo.com</A>
</BODY>
</HTML>
En este ejemplo, se utiliza la estructura básica de HTML 1.0. El contenido se encuentra dentro de las etiquetas , , y . La etiqueta se utiliza para especificar el título de la página, que se mostrará en la barra de título del navegador. <H1> y <P> se utilizan para crear un encabezado y un párrafo respectivamente. <A> se utiliza para crear un enlace, donde HREF especifica la URL de destino.</p>
Ejemplo de HTML 2.0 #
<HTML>
<HEAD>
<TITLE>Ejemplo de HTML 2.0</TITLE>
</HEAD>
<BODY>
<H1>Título de la página</H1>
<P>Este es un párrafo de ejemplo.</P>
<IMG SRC="imagen.jpg" ALT="Descripción de la imagen">
<TABLE>
<TR>
<TH>Encabezado de la tabla</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>En este ejemplo, se utiliza la estructura básica de HTML 2.0. El contenido se encuentra dentro de las etiquetas , y . La etiqueta se utiliza para especificar el título de la página. <H1> y <P> se utilizan para crear un encabezado y un párrafo respectivamente, de manera similar a HTML 1.0.<br /> En HTML 2.0 se introdujeron nuevas características, como la etiqueta <IMG> que se utiliza para insertar imágenes en la página. La propiedad SRC especifica la URL de la imagen, y ALT proporciona una descripción alternativa para la imagen en caso de que no se pueda cargar o se utilice para fines de accesibilidad.<br /> También se incluye un ejemplo básico de <TABLE>, que se utiliza para crear tablas. La etiqueta <TR> define una fila de la tabla, mientras que <TH> y <TD> se utilizan para definir las celdas de encabezado y las celdas de datos, respectivamente.</p>
Ejemplo de HTML 3.2 #
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Ejemplo de HTML 3.2</TITLE>
</HEAD>
<BODY>
<H1>Título de la página</H1>
<P>Este es un párrafo de ejemplo.</P>
<IMG SRC="imagen.jpg" ALT="Descripción de la imagen">
<TABLE>
<TR>
<TH>Encabezado de la tabla</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
</TABLE>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="pagina1.html">
<FRAME SRC="pagina2.html">
</FRAMESET>
</BODY>
</HTML>En este ejemplo, se utiliza la estructura básica de HTML 3.2. La declaración especifica el tipo de documento HTML. El contenido se encuentra dentro de las etiquetas , y . La etiqueta se utiliza para especificar el título de la página.<br /> Las etiquetas <H1>, <P>, <IMG> y <TABLE> se utilizan de manera similar a HTML 2.0, para crear encabezados, párrafos, imágenes y tablas respectivamente.<br /> Una nueva característica introducida en HTML 3.2 es el uso de marcos (frames). En el ejemplo se utiliza <FRAMESET> para dividir el contenido de la página en dos marcos verticales. Cada <FRAME> dentro de <FRAMESET> especifica una página web diferente que se cargará en cada marco.<br /> Es importante tener en cuenta que HTML 3.2 introdujo características adicionales, como el soporte para marcos, que permitían dividir la ventana del navegador en múltiples regiones independientes. Sin embargo, HTML 3.2 todavía tenía limitaciones en comparación con las versiones posteriores en términos de estilos y funcionalidades más avanzadas.</p>
Ejemplo de HTML 4.1 #
A continuación te muestro un ejemplo básico de cómo se vería un código HTML en su versión 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Ejemplo de HTML 4.01</TITLE>
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: green;
}
</style>
</HEAD>
<BODY>
<H1>Título de la página</H1>
<P>Este es un párrafo de ejemplo.</P>
<IMG SRC="imagen.jpg" ALT="Descripción de la imagen">
<TABLE>
<TR>
<TH>Encabezado de la tabla</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>En este ejemplo, se utiliza la estructura básica de HTML 4.01. La declaración especifica el tipo de documento HTML. El contenido se encuentra dentro de las etiquetas , y . La etiqueta se utiliza para especificar el título de la página.<br /> Una diferencia notable en HTML 4.01 es la introducción del uso de hojas de estilo en cascada (CSS) para definir los estilos de la página. En este ejemplo, se utiliza la etiqueta <style> dentro de <HEAD> para definir estilos CSS para el cuerpo (body), los encabezados (h1) y los párrafos (p).<br /> El resto del código es similar a los ejemplos anteriores, donde se utilizan las etiquetas <H1>, <P>, <IMG> y <TABLE> para crear encabezados, párrafos, imágenes y tablas respectivamente.<br /> Con HTML 4.01, se introdujeron mejoras en la presentación y el control de estilos mediante el uso de CSS. También se agregaron elementos y atributos adicionales para mejorar la estructura y la semántica de las páginas web.</p>
Ejemplo de XHTML #
A continuación te muestro un ejemplo básico de cómo se vería un código XHTML (Extensible HyperText Markup Language):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de XHTML</title>
<style type="text/css">
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Título de la página</h1>
<p>Este es un párrafo de ejemplo.</p>
<img src="imagen.jpg" alt="Descripción de la imagen" />
<table>
<tr>
<th>Encabezado de la tabla</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
</body>
</html>En este ejemplo, se utiliza la sintaxis de XHTML, que sigue las reglas de XML. Se especifica la versión de XHTML (1.0 Strict) y se enlaza la definición de tipo de documento (DTD) correspondiente.
El código también incluye una estructura similar a HTML, pero con algunas diferencias en la sintaxis. Por ejemplo, los elementos se cierran con la etiqueta de cierre correspondiente () en lugar de utilizar la forma abreviada (). Además, los nombres de los elementos y atributos están en minúsculas y son sensibles a mayúsculas y minúsculas.
El uso de CSS también es compatible en XHTML, donde se utiliza la etiqueta
Ejemplo de HTML5 #
Aquí tienes un ejemplo básico de cómo se vería un código HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de HTML5</title>
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Título de la página</h1>
<p>Este es un párrafo de ejemplo.</p>
<img src="imagen.jpg" alt="Descripción de la imagen">
<table>
<tr>
<th>Encabezado de la tabla</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
<audio src="cancion.mp3" controls></audio>
</body>
</html>En este ejemplo, se utiliza la estructura básica de HTML5. Se inicia con la declaración para indicar que el documento sigue la especificación de HTML5. Luego, se utilizan las etiquetas , y para definir la estructura de la página.
Dentro de , se especifica el título de la página con la etiqueta . También se puede agregar CSS personalizado utilizando la etiqueta <style>, como se muestra en el ejemplo.<br /> Dentro de <body>, se utilizan etiquetas como <h1> y <p> para crear encabezados y párrafos respectivamente. <img> se utiliza para insertar una imagen en la página, y se especifica la ruta de la imagen en el atributo src. El atributo alt proporciona una descripción alternativa de la imagen.<br /> También se incluye un ejemplo básico de <table> para crear una tabla, similar a los ejemplos anteriores. Y en HTML5 se puede utilizar <audio> para insertar elementos de audio en la página, en este caso se especifica la ruta del archivo de audio en el atributo src, y el atributo controls agrega controles de reproducción para el elemento de audio.<br /> Este es solo un ejemplo básico de HTML5, y el lenguaje ofrece muchas más características y etiquetas para desarrollar páginas web modernas e interactivas.</p>
