Want to create interactive content? It’s easy in Genially!

Get started free

¿Qué es y cómo funciona el HTML?

info

Created on June 26, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Practical Presentation

Smart Presentation

Essential Presentation

Akihabara Presentation

Pastel Color Presentation

Modern Presentation

Relaxing Presentation

Explore all templates

Transcript

¿Qué es y cómo funciona el HTML?

En esta Lección, conocerás la definición y el funcionamiento del lenguaje de marcado HTML; además, analizarás su arquitectura y su semántica para comprender cómo se utiliza. Al finalizar, tendrás una sólida comprensión del HTML y su importancia en el desarrollo web.

Antes de comenzar…

¿Qué es SGML y XML?

SGML (Standard Generalized Markup Language) es un estándar de marcado ampliamente utilizado en la industria editorial y documental, creado por Charles F. Goldfarb en la década de 1960; su objetivo era permitir la creación de vocabularios específicos para estructurar y marcar documentos de manera consistente.

Pulsa en los botones para conocer más sobre SGML

Origen

Relevancia

Función

SGML vs XML

1 - 8

El HTML como SGML

De acuerdo con Vértice (2009): “El HTML (HyperText Markup Language) es un lenguaje artificial que los ordenadores son capaces de interpretar y diseñado para que los programadores redacten instrucciones que los navegadores ejecutan para originar la página web”. El HTML se basa en el estándar SGML (Standard Generalized Markup Language), este lenguaje ofrece una sintaxis que define la estructura y el significado de los elementos de un documento.

Pulsa en los botones para conocer más sobre HTML

Origen

Evolución

2 - 8

Estructura de HTML

<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> <h1>Encabezado de nivel 1</h1> <p>Este es un párrafo de texto.</p> <img src= "imagen.jpg" alt= "Descripción de la imagen“ > <a href= "https://www.ejemplo.com" >Enlace a otro sitio web</a> </body> </html>

HTML es la base fundamental de la mayoría de las páginas web en Internet. Un documento HTML está compuesto por una estructura jerárquica de elementos etiquetados, también conocidos como tags. Los navegadores web interpretan estas etiquetas y muestran el contenido de la página según su estructura.

Pulsa en los botones para conocer más sobre los tags

3 - 8

Principales etiquetas

HTML ofrece una amplia variedad de etiquetas para estructurar el contenido de una página web. A continuación se presentan algunas de las etiquetas básicas de HTML. Existen muchas más etiquetas para crear listas, tablas, formularios y otros elementos específicos.

Pulsa en los botones para conocer más sobre las etiquetas

<img>

<a>

<p>

<div>

<h1> a <h6>

4 - 8

Frameworks

Los frameworks de HTML, como Bootstrap o Foundation, son conjuntos de herramientas y estilos predefinidos que facilitan la creación de diseños y la interacción con elementos HTML. Estos frameworks proporcionan componentes reutilizables, como botones, formularios y barras de navegación, y ayudan a que las páginas web sean más rápidas de desarrollar y visualmente atractivas.

Pulsa en los botones para conocer más sobre Frameworks

Ejemplos

Comunidad

Construcción

5 - 8

Tablas en HTML

Las tablas en HTML permiten organizar datos en filas y columnas. Se utilizan las etiquetas <table> para definir una tabla, <tr> para las filas, <td> para las celdas de datos y <th> para las celdas de encabezado.

Pulsa en los botones para conocer más sobre Tablas en HTML

Ejemplos

Procedimiento

6 - 8

Formularios en HTML

Los formularios en HTML permiten a los usuarios ingresar y enviar datos al servidor web. Se utilizan las etiquetas <form> para definir un formulario e <input> para crear campos de entrada, como cajas de texto, botones de opción, casillas de verificación y botones de envío.

Pulsa en los botones para conocer más sobre Formularios en HTML

Ejemplo

Características

7 - 8

Conclusiones

Conocer estas tecnologías y conceptos son fundamentales en el desarrollo de aplicaciones web. El HTML proporciona la estructura y organización del contenido, mientras que los frameworks de HTML agilizan el desarrollo al ofrecer estilos y funcionalidades predefinidos. Las tablas y los formularios son elementos clave para presentar datos y capturar información de los usuarios. Comprender estos conceptos es esencial para construir sitios web interactivos y funcionales.

8 - 8

Ejemplo

En este ejemplo, se crea un formulario que contiene tres campos: Nombre, Email y Mensaje. Cada campo tiene una etiqueta label para proporcionar una descripción. Los campos de texto se crean utilizando la etiqueta input, donde se especifica el tipo de campo (text e email en este caso), un id único y un name que se utilizará para identificar el campo en el servidor. El campo de mensaje se crea utilizando la etiqueta textarea, que permite al usuario ingresar texto de múltiples líneas. El atributo required se agrega a cada campo para indicar que es obligatorio completarlo antes de enviar el formulario. El formulario tiene un botón de envío (submit) que, al hacer clic, enviará los datos del formulario al archivo procesar.php utilizando el método POST. Puedes cambiar el valor del atributo action para que apunte a tu propio script de procesamiento de formulario.

Enviar

La sección <head> contiene metadatos y enlaces a archivos externos, como hojas de estilo CSS o scripts JavaScript.

La sección <body> contiene el contenido visible de la página, como texto, imágenes y enlaces.

<p>

La etiqueta <p> se utiliza para crear párrafos de texto.

<a>

La etiqueta <a> se utiliza para crear enlaces. Puede tener un atributo href que especifica la URL a la que se debe dirigir el enlace.

Función

De acuerdo con Cover (1991):

El SGML (Lenguaje de marcado generalizado estándar) se utiliza para describir documentos estructurados e información digital, relacionada de forma independiente de la máquina y la aplicación. El marcado se agrega a una base de datos de texto o SGML para describir sus características en lugar de especificar las instrucciones de procesamiento que se llevarán a cabo.

SGML vs XML

SGML es un estándar de marcado más antiguo y complejo, diseñado para la publicación y el intercambio de documentos estructurados en diversos dominios. XML es una simplificación de SGML, enfocada en el intercambio de datos estructurados en aplicaciones web y otros entornos. XML es más fácil de aprender y utilizar, pero sigue siendo lo suficientemente flexible para abordar una amplia gama de requisitos de estructuración de datos.

Ejemplos

En este ejemplo, se crea una tabla con tres columnas: Nombre, Edad y Estado. La primera fila dentro de la sección thead define los encabezados de columna utilizando la etiqueta th. Luego, dentro de la sección tbody, se agregan filas a la tabla empleando la etiqueta tr, y se proporciona el contenido de cada celda, utilizando la etiqueta td. En este caso, se agregan tres filas con los datos de diferentes personas. Al visualizar este código HTML en un navegador web, se mostrará una tabla con los encabezados de columna y los datos correspondientes en cada celda.

Comunidad

La comunidad activa y la documentación detallada son recursos importantes que ayudan a los desarrolladores a comprender y utilizar eficazmente el framework. En general, los frameworks ofrecen una base sólida y ahorran tiempo y esfuerzo en el proceso de desarrollo web.

<h1> a <h6>

Estas etiquetas se utilizan para crear encabezados de diferentes niveles, donde <h1> es el encabezado principal y <h6> es el menos prominente.

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

Evolución HTML

La primera especificación de HTML, llamada HTML 1.0, fue publicada en 1993, y desde entonces existen varias versiones y evoluciones del lenguaje. La evolución de HTML ha sido impulsada por organizaciones como el W3C (World Wide Web Consortium) y la comunidad web en general.

HTML 2.0 Lanzada en 1995, agregó imágenes, listas y tablas.

HTML 1.0 La primera versión con etiquetas básicas para estructurar el contenido.

HTML 3.2Publicada en 1997, incluyó formularios interactivos y elementos multimedia.

XHTMLBasado en HTML 4.01, pero siguiendo las reglas de XML, asegurando estructura rigurosa.

HTML 4.01Lanzada en 1999, introdujo nuevas etiquetas y atributos, mejoras en formularios y soporte para CSS.

HTML5 Lanzado en 2014, trajo etiquetas semánticas, soporte multimedia avanzado, gráficos vectoriales y mejoras en formularios.

Características

<!DOCTYPE html><html> <head> <title>Ejemplo de formulario en HTML</title> </head> <body> <form action="procesar.php" method="POST"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="mensaje">Mensaje:</label> <textarea id="mensaje" name="mensaje" required></textarea> <input type="submit" value="Enviar"> </form> </body> </html>

Cada campo de entrada tiene un atributo name que se utiliza para identificar los datos en el lado del servidor. Cuando se envía un formulario, los datos ingresados por el usuario se envían al servidor web para su procesamiento adicional. Además de los campos de entrada, los formularios pueden contener etiquetas como <label> para proporcionar instrucciones o descripciones para los campos, <select> y <option> para crear menús desplegables, y <textarea> para permitir la entrada de texto multilínea. Los datos enviados a través de un formulario se procesan del lado del servidor con tecnologías como PHP, Python o JavaScript. En el servidor se pueden realizar validaciones y acciones adicionales, antes de enviar una respuesta al usuario.

Construcción

Los frameworks de HTML incluyen una combinación de estilos CSS predefinidos, JavaScript predeterminado y una estructura HTML predefinida, que se pueden utilizar como punto de partida para construir páginas web.

  • CSS predefinidos: Estilos CSS listos para usar, que proporcionan una apariencia visual atractiva y coherente a los elementos de la página web.
  • JavaScript predefinido: Scripts y bibliotecas que facilitan la interacción y la funcionalidad dinámica en la página web, como validación de formularios o animaciones.
  • HTML predefinido: Una estructura HTML básica y semántica que sirve como punto de partida para construir páginas web, incluyendo etiquetas y atributos específicos para los componentes y elementos del framework.

Relevancia

SGML proporcionaba una sintaxis y un conjunto de reglas para definir la estructura y el significado de los elementos dentro de un documento. Fue un hito importante en la evolución de las tecnologías de marcado y sentó las bases para la creación de lenguajes de marcado posteriores, como HTML (HyperText Markup Language) y XML (eXtensible Markup Language).

<img>

La etiqueta <img> se utiliza para insertar imágenes en una página web. Tiene un atributo src que especifica la URL de la imagen.

Figura 3. Tim Berners-Lee at Campus Party Brasil [Fotografía], (Wikimedia Commons, 2009)

Origen

Fue creado por Tim Berners-Lee, a finales de la década de 1980 y principios de la década de 1990. Berners-Lee diseñó HTML como un medio para vincular y organizar la información de manera hipertextual, permitiendo la navegación y el acceso fácil a través de enlaces. Berners-Lee desarrolló HTML en la Organización Europea para la Investigación Nuclear (CERN). No solo creó HTML, sino que también contribuyó en gran medida al desarrollo de otros estándares y tecnologías web fundamentales, como el protocolo HTTP (Hypertext Transfer Protocol), las URL (Uniform Resource Locator) y el primer navegador web llamado World Wide Web. El trabajo pionero de Tim Berners-Lee en la creación de HTML sentó las bases para la web tal como la conocemos hoy en día, permitiendo la publicación y el acceso a información a través de la infraestructura de Internet.

Figura 4. Biểu trưng chính thức của tổ chức CERN [Logotipo], (Wikimedia Commons, 2003)

Ejemplos

Bootstrap es uno de los frameworks de HTML más populares. Proporciona una amplia gama de componentes y estilos CSS predefinidos que se pueden utilizar para crear diseños responsivos y modernos.

Figura 5. El logotipo de Bootstrap – framework para diseño web de interfaz de usuario [Logotipo], (Wikimedia Commons, 2011)

Foundation es otro framework popular que ofrece características similares.

Ambos frameworks son excelentes opciones para agilizar el desarrollo web y proporcionar una base sólida para la creación de sitios responsivos. Puedes evaluar las características, la documentación y los ejemplos de cada uno, para determinar cuál se adapta mejor a tu proyecto y estilo de trabajo.

Procedimiento

<!DOCTYPE html> <html> <head> <title>Ejemplo de tabla en HTML</title> </head> <body> <table> <thead> <tr> <th>Nombre</th> <th>Edad</th> <th>Estado</th> </tr> </thead>

Dentro de las etiquetas <tr>, se deben colocar las etiquetas <td> o <th> según corresponda. Cada etiqueta <td> representa una celda de datos, mientras que las etiquetas <th> se utilizan para las celdas de encabezado, que suelen tener un formato especial. Es posible personalizar las tablas utilizando atributos como el ancho de columna, bordes, colores de fondo, etc. Además, se pueden combinar celdas para crear estructuras más complejas. Las tablas son útiles para presentar datos tabulares, como resultados de encuestas, programaciones de eventos o información de productos.

<tbody> <tr> <td>Juan Perez</td> <td>25</td> <td>Guanajuato</td> </tr> <tr> <td>Andrea Martinez</td> <td>30</td> <td>Chiapas</td> </tr> <tr> <td>Maria Sepulveda</td> <td>35</td> <td>Tabasco</td> </tr> </tbody> </table> </body> </html>

Un documento HTML básico comienza con la etiqueta <html>, que define el inicio del documento HTML. Dentro de <html>, encontramos las secciones <head> y <body>.

<div>

La etiqueta <div> se utiliza como un contenedor genérico para agrupar y organizar elementos HTML. Es ampliamente utilizada para aplicar estilos CSS o manipular elementos a través de JavaScript.

Origen

Goldfarb desarrolló SGML mientras trabajaba en IBM, y fue publicado por primera vez como una especificación oficial en 1986 por la Organización Internacional de Normalización (ISO) bajo el estándar ISO 8879.

Figura 1. IBM Partner World [Logotipo], (Wikimedia Commons, 1911)

Figura 2. The current logo of the International Organization for Standardization (ISO) [Logotipo], (Wikimedia Commons, 2022)