[go: up one dir, main page]
Scribd
Cargar
19 vistas19 páginas

Módulo I - Visión General de HTML

Módulo I - Visión General de HTML

Cargado por

Sebastián Jaramillo
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
19 vistas19 páginas

Módulo I - Visión General de HTML

Módulo I - Visión General de HTML

Cargado por

Sebastián Jaramillo
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/ 19

Módulo I: Visión General de HTML

Visión General del HTML


HTML, cuyas siglas significan HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje
base sobre el cual se construyen las páginas web en Internet. Se trata de un lenguaje de marcado, no de
programación, diseñado originalmente para compartir documentos científicos.

Con el tiempo, HTML ha evolucionado para adaptarse a diferentes tipos de documentos y necesidades web. Hoy en
día, permite estructurar todo tipo de contenidos visibles en la web, como texto, listas, imágenes, tablas, formularios y
otros componentes interactivos.

Los elementos HTML son las unidades fundamentales de una página HTML. Estos se representan mediante
etiquetas, las cuales se asignan a distintos tipos de contenido. Algunos ejemplos comunes incluyen:

<p> : para párrafos.

<ul> , <ol> : para listas.

<table> : para tablas.

Es importante notar que los navegadores web no muestran estas etiquetas directamente. En su lugar, las utilizan para
interpretar y renderizar adecuadamente el contenido en pantalla.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Page</title>
</head>
<body>
<p>Example paragraph</>
<!-- this is a comment -->
</body>
<html/>

Origen y evolución de HTML


HTML fue introducido en los años 1990 a través de una colaboración entre el CERN (Organización Europea para la
Investigación Nuclear) y el IETF (Internet Engineering Task Force). A lo largo de los años, múltiples organismos han
influido en su estandarización y desarrollo.
Uno de los principales impulsores de las recomendaciones sobre HTML ha sido el Consorcio World Wide Web
(W3C), que propuso diversas actualizaciones y mejoras del lenguaje a lo largo del tiempo.
Por otro lado, el Web Hypertext Application Technology Working Group (WHATWG) también trabajó de forma
independiente en el desarrollo del lenguaje. No fue sino hasta el año 2007 que el W3C formó un grupo de trabajo
para colaborar con el WHATWG y consolidar esfuerzos en la creación de lo que hoy conocemos como HTML5.

Desde entonces, ambas organizaciones han contribuido en paralelo al mantenimiento y mejora del estándar, con
publicaciones tanto en el sitio del W3C (bajo sus derechos de autor) como en el sitio del WHATWG (con una licencia

Módulo I: Visión General de HTML 1


más abierta).

Objetivos y características de HTML5


HTML5, la versión más reciente del lenguaje, fue desarrollada para consolidar y modernizar HTML. Sus objetivos
clave incluyen:

Definir un único lenguaje de marcado, llamado LAN, que pueda ser escrito tanto en sintaxis HTML como en XML.

Establecer un modelo de procesamiento claro que sea compatible con versiones anteriores de HTML,
asegurando la interoperabilidad entre implementaciones antiguas y modernas.

Mejorar el marcado de documentos, permitiendo una estructuración más semántica y significativa del contenido.

Incluir nuevos elementos y APIs para manejar:

Almacenamiento web (web storage).

Reproducción de contenido multimedia como video y audio.

Nuevas capacidades para aplicaciones web ricas.

Aunque en muchos contextos los términos HTML y HTML5 se utilizan indistintamente, es importante hacer la
distinción cuando se discuten características específicas introducidas con HTML5. A lo largo de este curso, el
término “HTML” se referirá por defecto a HTML5, salvo que se indique lo contrario.

Características de HTML
HTML5 es la versión más reciente del lenguaje de marcado que se utiliza para estructurar el contenido en la web.
Esta versión no solo extiende las capacidades del HTML tradicional, sino que introduce nuevas herramientas
diseñadas para facilitar el desarrollo de aplicaciones modernas, ricas e interactivas, tanto para navegadores de
escritorio como para dispositivos móviles. Gracias a sus avances, HTML5 se convierte en un entorno ideal para crear
experiencias de usuario fluidas, integradas y accesibles desde múltiples plataformas.

Principales características de HTML5


Una de las aportaciones más importantes de HTML5 es su capacidad para estructurar de forma semántica los
contenidos de una página web. Proporciona medios específicos para categorizar la información mediante secciones
claras y organizadas. Además, HTML5 incluye herramientas que permiten una gestión más eficaz de diversos tipos
de contenido, como datos estructurados, gráficos vectoriales, vídeos y archivos de audio.
El desarrollo de HTML5 se centró en ofrecer mayor flexibilidad para los desarrolladores. Gracias a ello, hoy es posible
crear sitios web visualmente más atractivos e interactivos sin depender excesivamente de tecnologías externas como
Flash. Las páginas diseñadas bajo esta especificación pueden brindar una experiencia que se asemeja bastante a las
aplicaciones de escritorio, tanto en funcionalidad como en fluidez.

Módulo I: Visión General de HTML 2


Otro punto clave de HTML5 es su integración con APIs (Interfaces de Programación de Aplicaciones), lo que permite
combinar funcionalidades de forma directa desde el propio lenguaje de marcado. Esta característica es fundamental
para facilitar el desarrollo de aplicaciones web modernas y uniformes, que funcionen correctamente sin importar la
plataforma o el dispositivo desde el que se acceda.

Estructura de un documento HTML5


A continuación se presenta un ejemplo básico de un documento que cumple con la sintaxis de HTML5:

Este tipo de documentos debe tener como tipo de medio text/html . Cuando se transmite un documento con este
tipo de contenido, los navegadores web lo interpretan automáticamente como HTML.

La primera línea suele incluir una declaración de tipo de documento, escrita como <!DOCTYPE html> . Esta línea no es
obligatoria, pero se recomienda como la primera instrucción del documento. No se trata de una etiqueta HTML
propiamente dicha, sino de una indicación al navegador sobre la versión del lenguaje utilizada.

El elemento <html> es el elemento raíz del documento. A partir de este nodo se organizan jerárquicamente todos
los demás elementos del contenido.

Dentro del <html> , normalmente encontramos dos secciones principales: <head> y <body> .

La sección <head> puede contener varios elementos de inicialización y configuración del documento, entre ellos:

<title> : Establece el título de la página, que se muestra en la pestaña del navegador.

<script> : Permite enlazar o insertar scripts (normalmente JavaScript).

<style> : Incluye reglas CSS para definir el aspecto visual del contenido.

<link> : Enlaza hojas de estilo externas.

<meta> : Contiene metadatos como la codificación de caracteres, descripciones o configuraciones de

compatibilidad.

Por su parte, la sección <body> contiene todo el contenido visible de la página web: textos, imágenes, botones,
formularios, tablas, entre otros.

El Modelo de Objetos del Documento (DOM)


Cuando un navegador carga un documento HTML, no simplemente muestra el código tal como está escrito. En su
lugar, analiza (o parsea) el contenido y genera una representación en memoria del documento, conocida como DOM
(Document Object Model, o Modelo de Objetos del Documento).

El DOM es una estructura jerárquica en forma de árbol, donde cada nodo representa una parte del documento. Esta
representación permite que los lenguajes de programación, como JavaScript, puedan acceder, modificar o eliminar
elementos del documento en tiempo real.
Los árboles DOM están formados por varios tipos de nodos:

Un nodo raíz que representa el documento completo.

Nodos de elementos, como encabezados ( <h1> ), párrafos ( <p> ), listas ( <ul> ), etc.

Nodos de texto, que contienen el contenido dentro de las etiquetas.

Nodos de comentarios, que representan información no visible para el usuario.

Esta estructura es fundamental para que el contenido sea interactivo y dinámico, ya que permite manipular el
contenido de forma programática y eficiente.

HTML y XML: diferencias y aplicaciones


HTML5 también puede escribirse usando una sintaxis basada en XML. En ese caso, el documento se conoce como
XHTML. Los documentos XHTML siguen las reglas del lenguaje XML (eXtensible Markup Language), que aunque se

Módulo I: Visión General de HTML 3


parecen en apariencia al HTML, imponen restricciones más estrictas en cuanto a sintaxis.
Un documento XHTML, por ejemplo, incluye una declaración XML en la primera línea, y el tipo de contenido debe
especificarse como un tipo de medio XML, como application/xml . Cuando un navegador recibe un documento con este
tipo de contenido, lo interpreta como un documento XML y lo analiza con un procesador XML, en lugar del analizador
HTML.

La decisión entre utilizar HTML o XHTML depende principalmente de cómo se planea utilizar la aplicación. Por
ejemplo, si se tiene la intención de usar tecnologías como XSLT (Extensible Stylesheet Language Transformations)
para generar documentos o recursos a partir del contenido, XHTML podría ser una mejor opción.

Aunque HTML y XHTML comparten las mismas etiquetas y estructura semántica, existen diferencias importantes en
cuanto a las reglas de sintaxis:

En XHTML, todas las etiquetas deben estar en minúsculas. En HTML, el uso de mayúsculas o minúsculas es
indistinto.

XHTML exige que todos los elementos estén bien formados. Esto significa que:

Cada etiqueta debe cerrarse explícitamente.

Todos los atributos deben tener un valor asignado.

Los valores de los atributos deben estar encerrados entre comillas (simples o dobles).

Si el analizador XML encuentra un error de sintaxis (por ejemplo, una etiqueta sin cerrar), el procesamiento se
detiene completamente.

Por el contrario, HTML permite una mayor flexibilidad. Es común encontrar etiquetas sin cerrar, comillas omitidas o
incluso una mezcla de mayúsculas y minúsculas, y el navegador hará su mejor esfuerzo por interpretar el contenido
de forma correcta.

Laboratorio Práctico: Introducción a HTML (JSFiddle)


Objetivos de Aprendizaje
1. Familiarizarse con JSFiddle.

2. Jugar con HTML.

3. Jugar con CSS.

4. Jugar con JavaScript.

¿Qué es JSFiddle?
JSFiddle es un espacio de pruebas tanto para desarrolladores web novatos como experimentados. Es una aplicación
web en línea que permite a cualquiera experimentar con HTML, CSS y JavaScript. A medida que realizas cambios,
puedes ver el impacto de esos cambios en tiempo real.
Necesitas conocer algunas cosas antes de utilizar JSFiddle de manera efectiva.
Consulta la captura de pantalla a continuación.

Módulo I: Visión General de HTML 4


1. El área de HTML es el lugar donde escribes todas las etiquetas HTML y el texto de la página web.

2. El área de CSS es el lugar donde escribes toda la información de estilo CSS.

3. El área de JavaScript es el lugar donde escribes el código JavaScript para hacer que tu página web sea
interactiva.

4. El área de vista previa es el lugar donde se mostraría tu página web tal como lo haría en un navegador web.

5. El más importante para ti es el botón de “Run”. Siempre que realices cambios en cualquier área, debes hacer clic
en el botón “Run” para actualizar el área de vista previa.

6. Y lo mejor de JSFiddle es que, no importa lo que hagas, ¡no puedes romper nada aquí!

7. Tus ejercicios se presentan a continuación. Pruébalos.

8. Abre una nueva pestaña del navegador. Copia la URL que se muestra a continuación en la barra de direcciones de
la nueva pestaña, presiona Enter o return para abrirla y sigue el resto de las instrucciones.

https://jsfiddle.net/u7oxzgmj/13/

Ejercicio 1: Jugar con HTML.


HTML proporciona el contenido de texto y el marcado de una página web.

1. En el área de HTML, la línea número 10 tiene el encabezado principal de la página.

a. Reemplaza Tom con tu nombre.

b. Haz clic en el botón “Ejecutar”.

c. Deberías ver el nuevo encabezado con tu nombre en el área de vista previa.

2. La línea número 13 define un párrafo utilizando la etiqueta <p> . La línea número 14 tiene el texto que se muestra
dentro del párrafo.

a. Reemplaza el texto con cualquier texto de tu elección.

b. Haz clic en el botón “Ejecutar”.

c. Deberías ver el nuevo texto reflejado en el área de vista previa.

3. La línea número 16 define una división utilizando la etiqueta <div> . Las líneas número 17 y 18 tienen el texto que se
muestra dentro del div.

a. Reemplaza el texto con cualquier texto de tu elección.

b. Haz clic en el botón “Ejecutar”.

Módulo I: Visión General de HTML 5


c. Deberías ver el nuevo texto reflejado en el área de vista previa.

Ejercicio 2: Juega con CSS.


CSS proporciona información de estilo (como colores, fuentes y tamaños) al navegador. El navegador utiliza esta
información para personalizar la vista.

1. En el área de CSS, la línea número 2 controla el color de fondo de la página web.

a. Reemplaza ‘tan’ con ‘grey’.

b. Haz clic en el botón “Run”.

c. Deberías ver el nuevo color reflejado en el área de vista previa.

d. Azul, rojo, verde, azul claro y amarillo son todos colores válidos. Juega con ellos.

2. La línea número 6 controla la fuente utilizada para mostrar el texto en el elemento ( <p> ).

a. Reemplaza ‘arial’ con ‘times’.

b. Haz clic en el botón “Run”.

c. Deberías ver la nueva fuente reflejada en el área de vista previa.

3. La línea número 13 controla cuán ancho debería ser el div.

a. Cambia el ancho a 400px.

b. Haz clic en el botón “Run”.

c. Deberías ver un div más ancho.

Ejercicio 3: Juega con JavaScript.


JavaScript hace que una página web sea interactiva. Cuando haces clic en el botón “Deseo”, la página muestra una
alerta que dice “Hola, ¿cómo estás?”.

Nota: Si la alerta no aparece, por favor permite las ventanas emergentes para este sitio web
cambiando la configuración de tu navegador.

1. En el área de JavaScript, la línea número 2 define el mensaje que se muestra cada vez que se hace clic en el
botón “Deseo”.

a. Reemplaza el mensaje con "Buen Día".

b. Haz clic en el botón "Ejecutar".

c. Haz clic en el botón "Deseo" en el área de vista previa.

d. Deberías ver una alerta emergente con tu nuevo mensaje.

e. Prueba con "Hola, como estas". Por cierto, eso es “Hello, how are you doing” en español.

2. La línea número 5 tiene una función llamada showtime. Muestra la hora actual.

a. En el área de HTML, la línea número 21 tiene la palabra 'Deseo'. Reemplázala con 'Mostrar Hora'.

b. Reemplaza 'hello()' en la línea número 20 con 'showtime()'.

c. Haz clic en el botón "Ejecutar".

d. En el área de vista previa, ahora verás un botón llamado 'Mostrar Hora'.

e. Haz clic en él. Un mensaje con la hora actual debería aparecer.

Próximos Pasos

Módulo I: Visión General de HTML 6


Intenta jugar con el código. No puedes romperlo. Cuando pienses que realmente lo has estropeado, simplemente haz
clic aquí o haz clic derecho, copia el enlace y pégalo en una nueva ventana del navegador. Se abrirá una nueva
pestaña con el documento HTML original para que puedas empezar a jugar desde el principio.

Gestión y Soporte HTML


HTML5 fue diseñado con el propósito de ser compatible con versiones anteriores como HTML4 y XHTML1. La
especificación de HTML5 establece una sintaxis que facilita la transición desde estas versiones anteriores,
asegurando que el contenido existente siga funcionando en los navegadores modernos. Esto se logra mediante la
incorporación de elementos y atributos antiguos, permitiendo que los navegadores los interpreten correctamente sin
requerir modificaciones sustanciales.

Además, HTML5 distingue entre dos tipos de requisitos de conformidad: los de los agentes de usuario (navegadores)
y los de los autores (desarrolladores web). Para los agentes de usuario, HTML5 incluye soporte para muchos
elementos y atributos ya existentes en especificaciones previas. Para los autores, sin embargo, se ha optado por
simplificar el lenguaje mediante la eliminación de algunos de estos elementos y atributos obsoletos, favoreciendo una
escritura más limpia y moderna del código.

Funcionalidades y ventajas de HTML5 para aplicaciones web


HTML5 se considera una herramienta potente para el desarrollo de aplicaciones web modernas debido a varias
razones fundamentales:

Compatibilidad con múltiples dispositivos: La mayoría de los dispositivos actuales cuentan con navegadores
que admiten funciones de HTML5, facilitando el desarrollo multiplataforma.

Mejor experiencia de usuario mediante APIs: HTML5 incluye APIs para elementos avanzados como
animaciones, gráficos, audio y video, que enriquecen la interacción con el usuario.

Rendimiento optimizado: La combinación eficiente de HTML5 con CSS puede reducir la cantidad de imágenes
necesarias para la interfaz, resultando en una carga más rápida de las páginas web.

Optimización para motores de búsqueda (SEO): HTML5 permite una mejor indexación de contenido gracias al
uso de atributos y metaetiquetas, que ofrecen información clave a los buscadores sobre el contenido de la
página.

Nuevos elementos y APIs en HTML5


HTML5 introduce una serie de elementos estructurales nuevos que permiten definir de manera lógica y clara la
estructura de una página web. Estos elementos incluyen header , footer , section , article , aside , entre otros, que
reemplazan prácticas anteriores de uso excesivo de elementos div sin semántica específica.
Además, HTML5 incorpora nuevas APIs que amplían significativamente sus capacidades:

Canvas: Permite dibujar gráficos y animaciones dinámicas directamente en la página.

Audio y Video: Facilitan la inclusión y control de medios sin necesidad de complementos externos.

Nuevos tipos de entrada en formularios: Se introducen tipos como email , date , number , que permiten una
validación automática por parte del navegador, eliminando la necesidad de scripts personalizados.

Web Storage (Almacenamiento Web): Permite guardar datos directamente en el navegador, mejorando la
experiencia offline.

Web Workers: Permiten realizar tareas complejas en segundo plano sin interferir con la interacción principal del
usuario con la página, optimizando el rendimiento.

Scripting HTML

Módulo I: Visión General de HTML 7


En el contexto del desarrollo web, el scripting es una herramienta fundamental para mejorar la interactividad y
dinamismo de los sitios web. A menudo, el lenguaje utilizado para este propósito es JavaScript. Los scripts pueden
integrarse directamente en el documento HTML mediante la etiqueta <script> o pueden alojarse en archivos externos
que luego se enlazan dentro del HTML. Esta flexibilidad permite a los desarrolladores estructurar su código de
manera más limpia y mantener la separación entre contenido y lógica.

Funcionalidad de los scripts


El uso de scripts en una página web permite implementar múltiples funcionalidades que enriquecen la experiencia del
usuario. Algunas de las tareas comunes que se pueden realizar mediante scripting incluyen:

Validación de formularios antes de su envío al servidor.

Modificación dinámica del contenido mostrado en la página.

Manipulación de imágenes, por ejemplo, cambiarlas al pasar el cursor o mediante botones de navegación.

Estas funciones hacen posible la creación de aplicaciones web más reactivas y atractivas.

Consideraciones de seguridad y habilitación de scripts


Es importante entender que los scripts pueden ser deshabilitados por los usuarios o por el propio navegador. Por
tanto, se recomienda su uso, pero no depender exclusivamente de ellos para funcionalidades críticas. Para que un
navegador permita la ejecución de scripts, deben cumplirse ciertas condiciones:

El navegador debe soportar scripting.

El usuario debe tener la opción de scripts habilitada.

Además, HTML5 introduce un tipo de medio llamado "sandbox" que impone restricciones adicionales al contenido,
especialmente cuando se trata de contenido no confiable incrustado desde fuentes externas.
Cuando se incluye un objeto incrustado (como un iframe), si no se especifica el atributo sandbox , dicho contenido
adquiere los mismos permisos que el resto de la página. Esto puede otorgar permisos innecesarios a proveedores
externos, como los responsables de anuncios publicitarios. Para evitar esto, se recomienda siempre usar el atributo
sandbox en las etiquetas que contengan contenido incrustado.

El objeto document y el árbol DOM


Cada documento HTML cargado en el navegador se convierte en un objeto de tipo document . Este objeto forma parte
del Modelo de Objetos del Documento (DOM), que representa la estructura de la página y permite el acceso y
manipulación de sus elementos mediante scripting. A través del objeto document , es posible acceder a diferentes
partes del contenido HTML:

document.head : Devuelve el primer elemento <head> del documento, o null si no existe.

document.images : Devuelve una colección de todos los elementos <img> del documento.

document.scripts : Devuelve una colección de todos los elementos <script> .

Estos métodos permiten trabajar de forma eficiente con los elementos del DOM, permitiendo modificar contenido,
estilos y atributos según sea necesario.

Módulo I: Visión General de HTML 8


Métodos comunes de acceso al DOM
Existen varias funciones proporcionadas por el objeto document que permiten localizar y manipular elementos dentro
de la estructura HTML:

document.getElementById(id) : Devuelve el elemento que tiene el atributo id especificado. Es útil cuando se conoce el
identificador único de un elemento específico.

document.getElementsByTagName(nombreEtiqueta) : Devuelve una lista de nodos con todos los elementos que coincidan con el

nombre de etiqueta proporcionado. Por ejemplo, se puede utilizar para obtener todos los elementos <p> de una
página.

Estos métodos son fundamentales para implementar funcionalidades basadas en la interacción del usuario con los
elementos de la interfaz.

Ejemplo práctico: verificación de texto en un formulario

Un ejemplo práctico del uso de scripts consiste en una función que se ejecuta al hacer clic en un botón de envío. En
este caso:

1. Se accede al contenido de un campo de entrada con el ID campoTexto1 usando document.getElementById("campoTexto1") .

2. El contenido ingresado se almacena en una variable.

3. Se evalúa si la entrada está vacía.

4. Se muestra un cuadro de diálogo ( alert ) indicando el resultado de la verificación.

Este comportamiento permite validar datos en el cliente antes de enviarlos al servidor, mejorando la eficiencia del
proceso.

Compatibilidad con Navegadores HTML5

Módulo I: Visión General de HTML 9


El soporte que ofrecen los distintos navegadores para las características definidas por el estándar HTML5 varía
considerablemente. No todos los navegadores, especialmente sus versiones más antiguas, admiten completamente
todas las funciones descritas tanto en HTML5 como en CSS3. Este hecho representa un desafío importante para los
desarrolladores web, quienes deben verificar cuidadosamente qué tecnologías pueden implementar sin comprometer
la experiencia del usuario.
Los fabricantes de navegadores están en constante evolución, lanzando versiones nuevas con mejoras y mayor
soporte para estándares web. Sin embargo, las diferencias en compatibilidad persisten. Por esta razón, herramientas
como tablas de soporte y sitios como caniuse.com se han convertido en recursos fundamentales. Estas herramientas
permiten consultar de forma clara qué características están habilitadas en qué navegadores y versiones específicas.

Uno de los navegadores que ofrece un soporte más completo y actualizado para HTML5 es Google Chrome. Elegir un
navegador como este puede simplificar la implementación de tecnologías web modernas.

Diferencias en el soporte del elemento de entrada tipo "date"


Una de las formas más evidentes de visualizar las diferencias de soporte entre navegadores es mediante la
comparación del comportamiento del tipo de entrada input type="date" :

Google Chrome: muestra un calendario emergente que facilita al usuario la selección de fechas.

Microsoft Edge: utiliza controles de tipo spinner (cuadros giratorios) para la selección de fecha.

Mozilla Firefox: presenta un campo de texto simple, sin controles interactivos, lo que implica que el usuario debe
introducir la fecha manualmente, aumentando la posibilidad de errores de formato.

Estas diferencias también afectan el formato en que se presenta la fecha. Algunos navegadores usan el formato AAAA-

MM-DD , mientras que otros utilizan MM/DD/AAAA .

Tabla de soporte para input type="date"


A continuación se describe cómo interpretar una tabla de compatibilidad de navegadores para una función como input

type="date" :

Verde: Soporte total. El navegador admite completamente la funcionalidad.

Olive: Soporte parcial. La función puede estar disponible, pero con limitaciones.

Rojo: Sin soporte. El navegador ignora la funcionalidad.

Módulo I: Visión General de HTML 10


Según esta codificación:

Edge, Chrome y Opera: tienen soporte total (color verde).

Internet Explorer y Safari: no admiten esta funcionalidad (color rojo).

Estas tablas son dinámicas, ya que el nivel de soporte cambia conforme se lanzan nuevas versiones de navegadores.
Por lo tanto, es recomendable verificar periódicamente las fuentes de compatibilidad.

Uso de JavaScript para comprobar compatibilidad HTML5


Una estrategia efectiva para manejar las diferencias de compatibilidad entre navegadores es utilizar JavaScript para
verificar si una característica HTML5 es soportada antes de implementarla. Este método es particularmente útil para
proporcionar soluciones alternativas o para evitar errores en navegadores que no ofrecen soporte completo.
El proceso general consiste en:

1. Crear dinámicamente un elemento DOM utilizando document.createElement("tipoElemento") .

2. Evaluar si ese objeto DOM presenta las propiedades o métodos esperados.

Si el navegador no admite completamente ese elemento HTML5, el objeto creado carecerá de propiedades
específicas. Como resultado, se puede asumir que no existe soporte completo.

Ejemplo de código para verificar soporte de input type="date"

var input = document.createElement("input");


input.setAttribute("type", "date");
if (input.type !== "date") {
console.log("El navegador no admite input type='date'.");
} else {
console.log("El navegador admite input type='date'.");
}

En este ejemplo, el script crea un elemento de entrada y le asigna el atributo type="date" . Luego verifica si el atributo se
mantiene como "date" . Si no es así, es porque el navegador no reconoce ese tipo y lo ha degradado a un campo de
texto genérico.

Elementos HTML comunes


Configuración HTML

Módulo I: Visión General de HTML 11


Recuerda que un documento HTML siempre debe comenzar especificando el DOCTYPE. Todo el contenido se
encierra luego dentro de una etiqueta <html> . Dentro de esta etiqueta, el contenido se divide en los
elementos <head> o <body> del código. La etiqueta <head> contiene todos los metadatos sobre la página, y la
etiqueta <body> contiene el contenido que se muestra al usuario final.
Según esta configuración, un documento HTML vacío sin contenido ni metadatos debería verse de la siguiente
manera:

<!DOCTYPE html>
<html>
<head>
<!-- Metadata goes here -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>

Título de la pestaña del navegador


El título de la página aparece en la pestaña del navegador cuando abres una página web en el navegador. Por
ejemplo, si abres Google en una nueva pestaña, el título del navegador se mostrará como “Google” junto con el logo
de Google.

Puedes definir el título del navegador utilizando la etiqueta <title> , que se coloca dentro de la sección <head> de tu
marcado HTML de la siguiente manera:

<head>
<title>Sample Page Title</title>
</head>

Encabezados de Página
Puedes separar tu información en diferentes secciones utilizando encabezados, como se puede ver en esta lectura.
HTML define seis tamaños de fuente diferentes para los encabezados. Cada encabezado representa un nivel
diferente de importancia y tamaño de texto.

Los encabezados HTML se definen con las siguientes etiquetas: <h1> , <h2> , <h3> , <h4> , <h5> , y <h6> . El número en
estas etiquetas especifica la importancia, siendo <h1> el encabezado más grande y <h6> el encabezado más
pequeño.
Dado que este elemento define el contenido dentro de una página web, debe colocarse en la sección <body> de tu
marcado de la siguiente manera:

<body>
<h1>Most Important (and Largest) Heading</h1>
<h6>Least Important (and Smallest) Heading</h6>
</body>

Agregar Texto
La etiqueta <p> debe usarse para insertar texto en tu documento HTML. Este elemento significa párrafo (paragraph )
e incluye cualquier contenido de texto, ya sea una sola palabra o un ensayo de 10 páginas.

Módulo I: Visión General de HTML 12


Dado que este elemento define contenido dentro de una página web, debe colocarse en la sección <body> de tu
marcado de la siguiente manera:

<body>
<h1>Most Important (and Largest) Heading</h1>
<p>This is some text. The content within this paragraph element can be as short or as long as needed.</p>
<h6>Least Important (and Smallest) Heading</h6>
<p>This is another paragraph of text.</p>
</body>

Usando Saltos de Línea


Un salto de línea se utiliza para completar una línea y continuar el texto restante

al inicio de una nueva línea, como se hizo aquí.


Esto puede ser útil en muchos escenarios, como al escribir direcciones. Puedes usar la etiqueta <br> para insertar un
salto de línea en HTML. Esta no es una etiqueta contenedora y, por lo tanto, no tiene una etiqueta de cierre.

<body>
<p>This is some text that needs to be split up <br>here, <br>here, and <br>here.</p>
</body>

Agregar Enlaces a Otras Páginas


Las páginas web pueden enlazar a otras páginas o a otros lugares en la misma página a través de un hipervínculo. La
etiqueta <a> define un hipervínculo en HTML, seguida del atributo href para definir la dirección de destino del
hipervínculo.

Los hipervínculos se insertan normalmente en el texto de modo que al hacer clic en algún texto hipervinculado, te
lleva al destino. Por ejemplo, si deseas hipervincular la palabra “IBM” al sitio web oficial de IBM, puedes usar la
etiqueta <a> con el atributo href como se muestra a continuación:

<a href="https://www.ibm.com">IBM</a>

En el ejemplo anterior, cada vez que un usuario hace clic en el texto “IBM”, se abrirá el sitio web de IBM en la pestaña
actual.
Si deseas que un hipervínculo abra un destino determinado en una nueva pestaña, puedes hacerlo
añadiendo target="_blank" a la etiqueta <a> de la siguiente manera:

<a href="https://www.ibm.com" target="_blank">IBM</a>

Los hipervínculos también pueden enlazar a otros lugares en la misma página. Puedes enlazar a la parte superior de
la página actual de las siguientes dos maneras:

<a href="#">Top of Page</a>


<a href="#top">Top of Page</a>

Para enlazar a una sección diferente de la página, puedes usar el id de la sección a la que deseas enlazar, de la
siguiente manera:

Módulo I: Visión General de HTML 13


<a href="#section">Link to section</a>
...
<h1 id="section">Section</h1>

Crear una lista


Para crear una lista de elementos, puedes usar la etiqueta <ol> (lista ordenada) para listas numeradas y la
etiqueta <ul> (lista desordenada) para listas con viñetas.

Cada punto dentro de una lista estará encerrado por una etiqueta de apertura y cierre <li> , que representa
un elemento de lista. Esta misma etiqueta se utiliza tanto para listas ordenadas como desordenadas.

<!-- Unordered List -->


<ul>
<li>This is a bullet point </li>
<li>The items in this list have no particular order </li>
<li>Each item will appear as a bullet, rather than a number </li>
</ul>
<!-- Ordered List -->
<ol>
<li>This is an ordered list </li>
<li>The items in this list have a particular order </li>
<li>Each item will be numbered, starting from 1 </li>
<li>This is the fourth point in the list </li>
</ol>

Agregar una Tabla


Las tablas son a menudo necesarias para formatear datos, como se muestra a continuación.

Una tabla se crea con HTML utilizando la etiqueta <table> . Dentro de la tabla, cada fila de datos se representa
utilizando la etiqueta <tr> (fila de tabla). Los encabezados de columna o fila se pueden especificar mediante el
elemento <th> (encabezado de tabla). Finalmente, cada elemento de datos dentro de las celdas de la tabla se
especifica utilizando la etiqueta <td> (datos de tabla).

Módulo I: Visión General de HTML 14


<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>H1 - Data Item 1</td>
<td>H2 - Data Item 1</td>
<td>H3 - Data Item 1</td>
</tr>
<tr>
<td>H1 - Data Item 2</td>
<td>H2 - Data Item 2</td>
<td>H3 - Data Item 2</td>
</tr>
<tr>
<td>H1 - Data Item 3</td>
<td>H2 - Data Item 3</td>
<td>H3 - Data Item 3</td>
</tr>
</table>

Agregar una Imagen


Las imágenes se pueden agregar dentro de una página web utilizando la etiqueta <img> . Se pueden usar tanto
imágenes externas (por ejemplo, de internet) como imágenes locales (por ejemplo, archivos guardados en tu
computadora) en esta etiqueta.
Para agregar una imagen, necesitas conocer el nombre del archivo de imagen e incluirlo en el atributo ‘src’. El atributo
‘src’ especifica un recurso externo al que deseas vincular, como la URL de una imagen. Si estás haciendo referencia a
un archivo en línea, puedes insertar la URL de la imagen en este atributo. Si deseas insertar una imagen local, debes
insertar la ruta del archivo de la imagen en relación con la ubicación de tu archivo HTML.
La etiqueta <img> también requiere el atributo ‘alt’, que define un texto alternativo que se mostrará en caso de que la
imagen no se pueda cargar y cuando se utiliza un lector de pantalla.

El tamaño de una imagen también se puede (opcionalmente) especificar utilizando los atributos ‘width’ y ‘height’, con
los números indicados en píxeles.

<!-- External Image -->


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/440px-IBM_logo.svg.png"
alt="IBM Logo" width="300" height="300">
<!-- Local Images -->
<img src="images/IBMlogo.png" alt="IBM Logo" width="300" height="300">

Resumen Sección I:
HTML proporciona la estructura básica y el contenido de una página web mediante etiquetas.

Las etiquetas representan los elementos de una página HTML.

El árbol DOM de HTML describe cómo se estructura una página web.

Módulo I: Visión General de HTML 15


HTML utiliza API para mejorar la experiencia del usuario, proporcionando funciones para animación avanzada,
audio y vídeo.

El scripting proporciona una experiencia de usuario más interactiva al navegar por las páginas web.

Se recomienda no depender de las secuencias de comandos, ya que pueden desactivarse.

Las cajas de arena ( sandbox ) HTML5 ayudan a gestionar los iframe mashups.

Las tablas de compatibilidad con navegadores HTML5 describen qué navegadores son compatibles con qué
características HTML5.

JavaScript se utiliza para comprobar si un elemento es compatible con un navegador.

CSS proporciona un estilo y un diseño coherentes en todo el sitio web.

Existen dos tipos de CSS para diseñar sitios web: fluido y fijo.

Glosario
Término Definición

"Modelo de Objetos del Documento" es la representación de datos de los objetos que componen la estructura y
DOM Tree
el contenido de un documento en la web.

Un "Lenguaje de Marcado Extensible" diseñado para almacenar y transportar datos, permitiendo a los usuarios
XML
definir sus propios lenguajes de marcado, principalmente para mostrar documentos en la web.

XHTML Un "Lenguaje de Marcado de Hipertexto Extensible" similar a HTML pero con reglas de formato más estrictas.

Web Storage
APIs que permiten el almacenamiento de datos en un navegador.
APIs

Hoja de trucos: Visión general de HTML5


Elemento Descripción Ejemplo

Esta etiqueta denota un


comentario en HTML,
que no es mostrado por
<!-- --> un navegador pero <!-- Este es un comentario -→
puede ser útil para
ocultar y documentar el
código.

Todos los documentos <!DOCTYPE html>


HTML deben comenzar <html>
con esta declaración. <head>
Indica al navegador qué <!-- Metadatos aquí -->
<!DOCTYPE
tipo de documento </head>
html>
esperar. Ten en cuenta <body>
que este elemento no <!-- Cuerpo del documento aquí -->
tiene una etiqueta de </body>
cierre. </html>

<a href= Esta etiqueta, llamada <a href="https://www.ibm.com">IBM</a>


“ruta”>nombre "etiqueta de anclaje",
del enlace</a> crea hipervínculos
utilizando el atributo
href. En lugar de ruta,
ingresa la URL o el
nombre de la ruta a la

Módulo I: Visión General de HTML 16


Elemento Descripción Ejemplo
página a la que deseas
enlazar.

<!DOCTYPE html>
Contiene el contenido <html>
del documento HTML. <head>
Debe contener todas las <!-- Metadatos aquí -->
<body> demás etiquetas además </head>
del elemento <head> <body>
para mostrar el cuerpo <!-- Cuerpo del documento aquí -->
del documento. </body>
</html>

A menudo se utiliza para


<div>
separar secciones en el
Este elemento no tiene un significado semántico particular, pero a menudo se usa
<div> cuerpo de un documento
junto con CSS para fines de estilo.
con el fin de estilizar ese
</div>
contenido con CSS.

Agrega un encabezado
<h1> de nivel 1 al documento <h1>Thomas J. Watson</h1>
HTML.

<!DOCTYPE html>
<html>
Contiene metadatos y <head>
debe colocarse después <!-- Metadatos aquí -->
<head> de la etiqueta <html> y </head>
antes de la etiqueta <body>
<body>. <!-- Cuerpo del documento aquí -->
</body>
</html>

<!DOCTYPE html>
<html>
El elemento raíz de un
<head>
documento HTML. Todas
<!-- Metadatos aquí -->
las demás etiquetas en
<html> </head>
el documento deben
<body>
estar contenidas en esta
<!-- Cuerpo del documento aquí -->
etiqueta.
</body>
</html>

Esta etiqueta se utiliza


para colocar una
imagen. En lugar de ruta,
<img inserta una URL o una
<img
src=“ruta” ruta de archivo relativa a
src=“https://upload.wikimedia.org/wikipedia/commons/7/7e/Thomas_J_Watson_Sr.jpg”
width=“dim1” la ubicación de la
width=“300” height=“300”/>
height=“dim2”> imagen. Otros atributos
opcionales incluyen el
ancho y la altura de la
imagen en píxeles.

Elemento que crea


elementos de línea con
<ul>
viñetas en una lista
<li>Punto con viñeta 1</li>
<li> ordenada o
<li>Punto con viñeta 2</li>
desordenada. Debe
</ul>
usarse junto con las
etiquetas <ul> o <ol>.

Módulo I: Visión General de HTML 17


Elemento Descripción Ejemplo

Se utiliza para vincular


<head>
un documento externo,
<link> <link rel=“stylesheet” href=“styles.css”>
como un archivo CSS, a
</head>
un documento HTML.

Se utiliza para
<head>
proporcionar metadatos
<meta> <meta name=“author” content=“Christopher Moore”>
sobre el documento
</head>
HTML.

Elemento que crea una


<ol>
lista ordenada utilizando
<li>Punto numerado 1</li>
<ol> números. Debe usarse
<li>Punto numerado 2</li>
junto con la etiqueta
</ol>
<li>.

Esta etiqueta se utiliza


para identificar un
<p>Este es un párrafo de texto. Puede ser tan corto o tan largo como sea necesario.
<p> párrafo. Coloca un salto
</p>
de línea después del
texto que contiene.

Se utiliza para incrustar <script>


<script> JavaScript en un alert(“Hola Mundo”);
documento HTML. </script>

<table>
<tr>
Esta etiqueta se utiliza
<th>Celda de encabezado 1</th>
para denotar una tabla.
<th>Celda de encabezado 2</th>
Debe usarse con las
</tr>
etiquetas <tr> (define
<tr>
una fila de tabla) y <td>
<td>Primera fila primera celda</td>
<table> (define una celda de
<td>Primera fila segunda celda</td>
tabla dentro de una fila).
</tr>
La etiqueta <th> también
<tr>
se puede usar para
<td>Segunda fila primera celda</td>
definir la fila de
<td>Segunda fila segunda celda</td>
encabezado de la tabla.
</tr>
</table>

Denota una celda dentro


<td> de una fila, dentro de <td>Contenido de la celda</td>
una tabla.

<table>
<tr>
<th>Celda de encabezado 1</th>
<th>Celda de encabezado 2</th>
</tr>
Denota las celdas de <tr>
encabezado dentro de <td>Primera fila primera celda</td>
<th>
una fila dentro de una <td>Primera fila segunda celda</td>
tabla. </tr>
<tr>
<td>Segunda fila primera celda</td>
<td>Segunda fila segunda celda</td>
</tr>
</table>
<title> Define el título del <!DOCTYPE html>
documento HTML que se <html>

Módulo I: Visión General de HTML 18


Elemento Descripción Ejemplo
muestra en la barra de <head>
título y en las pestañas <title>Título del documento</title>
del navegador. Es </head>
obligatorio en todos los <body>
documentos HTML. <!-- Cuerpo del documento aquí -->
Debe estar contenida en </body>
la etiqueta <head>. </html>

<table>
<tr>
<th>Celda de encabezado 1</th>
<th>Celda de encabezado 2</th>
</tr>
<tr>
Denota una fila dentro de <td>Primera fila primera celda</td>
<tr>
una tabla. <td>Primera fila segunda celda</td>
</tr>
<tr>
<td>Segunda fila primera celda</td>
<td>Segunda fila segunda celda</td>
</tr>
</table>

Elemento que crea una


<ul>
lista desordenada
<li>Punto con viñeta 1</li>
<ul> utilizando viñetas. Debe
<li>Punto con viñeta 2</li>
usarse junto con la
</ul>
etiqueta.

Módulo I: Visión General de HTML 19

También podría gustarte