Introducción a la programación de código con HTML5

INTRODUCCIÓN

¡Hola!
Te damos la bienvenida al curso de introducción a la programación de código con HTML5.

Probablemente en este instante estés viéndome a través de una página web. La tecnología ha creado y seguirá creando
maneras para interactuar a distancia desde tu hogar, escuela, oficina, o en donde sea que te encuentres.

En este curso conoceremos desde donde nace la idea del contenido web, aprenderemos sobre su historia y conceptos claves
que nos ayudarán a entender y practicar la programación de código con HTML, en particular, con su versión más actual
HTML5.

¡Comencemos!
 Curso de programación en código con HTML5
MAPA DE CONTENIDOS
Los contenidos de este curso se tratan en 4 unidades, cuyos principales temas son los siguientes:

I. Conociendo los inicios de la web III. Elementos básicos de HTML5

● ¿Qué es HTML?
● Visual Studio Code
● Conozcamos acerca de su historia
● Herramientas del navegador
● HTML5 como un estándar
● Elementos básicos HTML
● Particularidades de HTML5
● Párrafos HTML
● Enlaces o hipervínculos
II. Primeros pasos en HTML5
● Semántica de HTML
IV. Elementos de entrada y formularios
● Elementos estructurales
● Formularios y sus usos habituales
● Etiquetas
● Elemento Form
● Estructura de un documento HTML
● Uso del elemento input
● Manos a la obra, nuestro primer HTML
● Tipos de input para cada situación
 Unidad 1
Conociendo los inicios de la web
 Unidad 1: Conociendo los inicios de la web

En esta unidad conoceremos, en general, como empezó la idea de unificar documentos en línea a través de enlaces, cómo
están definidos por su estructura, y algunas mejoras respecto a sus antecesores.

Conocer la historia del lenguaje y sus orígenes, comprender su estructura y ventajas particulares de utilizarlo.

● ¿Qué es HTML?
● Conozcamos acerca de su historia
● HTML5 como un estándar
● Particularidades de HTML5
● Cierre
 Unidad 1: Conociendo los inicios de la web
¿Qué es HTML?
HTML es un lenguaje descriptivo que especifica la estructura interna de una página
web; es como el esqueleto que define dónde se encuentra cada parte del cuerpo.

En casi todos los casos, un sitio se compone de HTML, JavaScript y CSS… ¡los
cuales podrás aprender en nuestros cursos!
 Unidad 1: Conociendo los inicios de la web
¿Qué es HTML?

Las siglas HTML en inglés significan HyperText Hipertexto significa que el documento contiene enlaces
Markup Language, lo que al español se traduce que permiten al lector saltar a otros lugares del
como lenguaje de marcado de hipertexto. documento o a otro documento distinto.

Un lenguaje de marcado es una forma en que las

computadoras se comunican entre sí para controlar cómo
se procesa y presenta el texto.

Para hacer esto, HTML usa etiquetas y atributos, las cuales

veremos más a fondo en las sesiones posteriores.
 Unidad 1: Conociendo los inicios de la web
Conozcamos acerca de su historia

El origen de HTML se remonta a 1980, cuando el físico Tim

Berners-Lee propuso un nuevo sistema de hipertexto para
compartir documentos.

El primer documento formal con la descripción de HTML se

publicó en 1991 bajo el nombre “HTML Tags” (Etiquetas
HTML) y hoy puede ser visitado en línea a modo de reliquia
e historia de la informática.

Pincha aquí Posteriormente en 1995, después de

para conocerlo
algunas versiones de prueba y mejoras
se define HTML 2.0 como un estándar
oficial de HTML.
CLICKEABLE
 Unidad 1: Conociendo los inicios de la web
HTML5 como un estándar
El 28 de octubre de 2014 se convierte en estándar la versión HTML5, el cual establece su base en 2 puntos:

- Que la especificación del lenguaje debe ser compatible con todo lo creado anteriormente en la versión anterior de
HTML
- Ir añadiendo de manera dinámica nuevas funcionalidades al lenguaje las cuales aprovechen todos los avances
tecnológicos.

Si bien se menciona HTML haciendo referencia a la tecnología en conjunto, incluyendo su última versión, HTML5 (siendo
diferente en muchos aspectos), no es más que una actualización pulida del antiguo estándar.
 Unidad 1: Conociendo los inicios de la web
Particularidades de HTML5

Compatibilidad Soporte multimedia

Mejor rendimiento y
soporte móvil

Mejores controles Almacenamiento en

en formularios la web
 Unidad 1: Conociendo los inicios de la web
Particularidades de HTML5

Al momento de estandarizarse HTML5, la compatibilidad fue una de las

grandes preocupaciones. Una de las principales razones se debió a que
muchos decidieron no actualizar sus sitios aún.

Si los navegadores no sabían cómo analizar una etiqueta HTML5 podría dar
Compatibilidad lugar a páginas rotas o incongruencias visuales.

Actualmente HTML5 y la mayoría de sus funciones son compatibles con todos

los navegadores actuales.
 Unidad 1: Conociendo los inicios de la web
Particularidades de HTML5
Una de las mayores novedades de HTML5 es la compatibilidad con elementos multimedia
como audio, vídeo, gráficos vectoriales, animaciones y juegos.

Incluso añade seguridad en este contexto dado que ya no es necesario utilizar Flash o
tecnologías similares para añadir animaciones o videos, métodos que no estaban exentos a
posibles exploits (posibles ataques informáticos).

¡Ahora tan sólo puedes hacerlo incorporando HTML y CSS!

Soporte multimedia Te invitamos a revisar el siguiente contenido de ejemplo

➔ Juegos CLICKEABLE

➔ Videos CLICKEABLE

➔ Gráficos vectoriales: Los gráficos vectoriales utilizan un sistema de líneas y curvas en un

plano cartesiano, escalado en comparación con el área total, no un solo píxel. Esto
significa que se puede ampliar infinitamente la resolución de la imagen original sin
ninguna pérdida de calidad.. Por ejemplo: CLICKEABLE
 Unidad 1: Conociendo los inicios de la web
Particularidades de HTML5
Mejor rendimiento y Otra de las mayores ventajas de HTML5 es que es mucho
más rápido y receptivo que versiones anteriores.
soporte móvil
La nueva versión ha incorporado mejores normas para
que los sitios webs funcionen de manera más fluida en
dispositivos más pequeños y menos potentes,
considerando que actualmente nuestros teléfonos y
hasta relojes tienen conexión a internet.

Si te interesas sobre este tema en particular, puedes

buscar sobre HTML5 y Multithreading.
 Unidad 1: Conociendo los inicios de la web
Particularidades de HTML5

Los nuevos controles de formularios nos permiten

añadir nuevas funcionalidades sin utilizar
herramientas externas.

Originalmente, HTML sólo admitía los tipos de

Mejores controles entrada de texto, contraseña oculta, casilla de
verificación y carga de archivos. Esto es suficiente
en formularios
para crear un formulario básico, pero ahora ¡puedes
hacer mucho más!

Lo nuevo incorpora campos específicos para correo

electrónico, números de teléfono, URL, cuadro de
búsqueda, deslizador numérico, selector de
fecha/hora y selector de color.
 Unidad 1: Conociendo los inicios de la web
Particularidades de HTML5

Las versiones anteriores a HTML5 admitían esencialmente cookies y poco más.

Almacenar cualquier información extra, además del seguimiento básico de usuario en
una diminuta cookie de 4 Kilobyte (KB), era casi imposible.

Almacenamiento en Actualmente, el almacenamiento local permite guardar entre 5 y 10 Megabytes (MB) de

la web datos (dependiendo del navegador).

Esto nos permite guardar información del cliente en sesiones anteriores, datos de acceso
sin conexión, configuraciones de personalización, etc.

¿Has visto las configuraciones de personalizar un sitio claro u oscuro?

Este es uno de los claros ejemplos de almacenamiento mejorado en HTML5. La próxima

vez que visites el sitio seguirá viéndose como tu lo seleccionaste.
 Unidad 1: Conociendo los inicios de la web
CIERRE

Cuando navegas por internet, todo lo que miras a través de tu navegador forma parte de una página web.

En esta sesión pudimos conocer un poco sobre la historia y algunas evidencias como el primer documento HTML, algunas
características que destacan notablemente en la versión HTML5 en comparación a versiones anteriores.

En la próxima sesión conoceremos la sintaxis de HTML5 y practicaremos usando algunas etiquetas para dar vida a una página
web.

¡Hasta la próxima!