HTML 5

Basico

Prof. Mag. Mario Jimenez

¿Qué es HTML?

● HTML son las siglas de Hyper Text Markup Language

● HTML es el lenguaje de marcado estándar para crear páginas web.
● HTML describe la estructura de una página web
● HTML consta de una serie de elementos
● Los elementos HTML le dicen al navegador cómo mostrar el contenido.
● Los elementos HTML etiquetatan partes de contenido como "esto es un encabezado", "esto
es un párrafo", "esto es un enlace", etc.
HTML, siglas de "HyperText Markup Language" (Lenguaje de Marcado de Hipertexto), es el lenguaje estándar
utilizado para crear y diseñar páginas web. Es un lenguaje de marcado que define la estructura y el contenido de
una página web mediante una serie de etiquetas y elementos.

HTML proporciona un conjunto de etiquetas que permiten definir diversos elementos como encabezados, párrafos,
imágenes, enlaces, listas y tablas, entre otros. Estas etiquetas permiten dar formato al contenido de la página y
estructurarla de manera lógica y semántica.

Las páginas web creadas con HTML son interpretadas por los navegadores web, que procesan el código HTML y
muestran el contenido de la página de acuerdo con las instrucciones proporcionadas por las etiquetas HTML.

HTML es un lenguaje fundamental en el desarrollo web y es la base sobre la cual se construyen la mayoría de las
páginas y aplicaciones web modernas. Trabaja en conjunto con otros lenguajes y tecnologías web como CSS
(Cascading Style Sheets) para estilizar la presentación y JavaScript para agregar interactividad y funcionalidades
dinámicas a las páginas web.
Etiquetas
Una etiqueta en HTML es un elemento fundamental que se utiliza para
estructurar y dar formato al contenido de una página web. Una etiqueta
HTML está compuesta por texto encerrado entre corchetes angulares <
>. Las etiquetas generalmente vienen en pares: una etiqueta de
apertura y una etiqueta de cierre.
Etiqueta de apertura: Es la primera parte de la etiqueta y se encuentra
entre los corchetes angulares. Define el inicio de un elemento HTML y a
menudo contiene atributos que proporcionan información adicional
sobre el elemento.

<etiqueta>
Etiqueta de cierre: Es la segunda parte de la etiqueta y se encuentra
entre los corchetes angulares con una barra inclinada antes del nombre
de la etiqueta. Define el final de un elemento HTML.

</etiqueta>
Por ejemplo, la etiqueta <p> se utiliza para definir un párrafo de texto
y la etiqueta </p> se utiliza para cerrar el párrafo. Dentro de estas
etiquetas, puedes colocar texto, otras etiquetas HTML o contenido
multimedia, dependiendo del propósito del elemento.

Aquí hay un ejemplo de cómo se vería un párrafo con una etiqueta de

apertura <p> y una etiqueta de cierre </p>:
<p>Este es un párrafo de ejemplo.</p>
En resumen, las etiquetas en HTML son los bloques de construcción
básicos que se utilizan para crear la estructura y el contenido de una
página web, y se utilizan para definir cómo se presentará y se
comportará el contenido en un navegador web.
HTML5 es la quinta revisión del lenguaje de marcado estándar para la
creación y presentación de páginas web, conocido como HTML
(HyperText Markup Language). Fue desarrollado por el Consorcio World
Wide Web (W3C) y la Web Hypertext Application Technology Working
Group (WHATWG). HTML5 introduce una serie de nuevas
características, elementos y APIs que permiten a los desarrolladores
web crear sitios web y aplicaciones web más dinámicos, interactivos y
compatibles con los estándares modernos de la web.
Algunas de las características y mejoras clave de HTML5 incluyen:
● Nuevos elementos semánticos: Introduce elementos semánticos como
<header>, <footer>, <nav>, <section>, <article>, que proporcionan
una estructura más clara y significativa al contenido de la página.
● Soporte para multimedia: HTML5 incluye elementos como <audio> y
<video> que permiten la reproducción de contenido multimedia sin
necesidad de complementos externos como Flash.
● Gráficos y animaciones: Introduce la etiqueta <canvas> que permite
renderizar gráficos, gráficos vectoriales y animaciones directamente en el
navegador, así como la API WebGL para renderización 3D.
● APIs de interactividad y geolocalización: HTML5 incluye APIs como Drag and Drop, Web Storage,
Web Workers, Geolocation y WebSockets que permiten a los desarrolladores crear aplicaciones
web más interactivas, responsivas y orientadas al usuario.

● Mejoras en formularios: Introduce nuevos tipos de entrada como <input type="date">, <input
type="email">, <input type="url"> que facilitan la validación y captura de datos del usuario.

● Compatibilidad con dispositivos móviles: HTML5 está diseñado teniendo en cuenta la

compatibilidad con dispositivos móviles y la accesibilidad, lo que permite crear aplicaciones web
responsivas y adaptables a diferentes tamaños de pantalla y dispositivos.
Para el estudiante
En resumen, HTML5 representa una evolución significativa en la
tecnología web, brindando a los desarrolladores las herramientas y
capacidades necesarias para crear experiencias web modernas, ricas y
multimediales que funcionen en una variedad de dispositivos y
navegadores.
Ejemplo

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>
Ejemplo explicado
● La <!DOCTYPE html>declaración define que este documento es un documento HTML5
● El <html>elemento es el elemento raíz de una página HTML.
● El <head>elemento contiene metainformación sobre la página HTML.
● El <title>elemento especifica un título para la página HTML (que se muestra en la
barra de título del navegador o en la pestaña de la página)
● El <body>elemento define el cuerpo del documento y es un contenedor para todos los
contenidos visibles, como encabezados, párrafos, imágenes, hipervínculos, tablas,
listas, etc.
● El <h1>elemento define un encabezado grande
● El <p>elemento define un párrafo
¿Qué es un elemento HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido y una
etiqueta de finalización:

<nombre de etiqueta > El contenido va aquí ... < / nombre de

etiqueta >

El elemento HTML es todo, desde la etiqueta inicial hasta la etiqueta final:

<h1> Mi primer título </h1>

<p> Mi primer párrafo. </p>
Estructura de la página HTML
A continuación se muestra una visualización de la estructura de una página HTML:
Historia HTML
2012

WHATWG HTML5 Living Standard

2014

W3C Recommendation: HTML5

2016

W3C Candidate Recommendation: HTML 5.1

2017

W3C Recommendation: HTML5.1 2nd Edition

2017

W3C Recommendation: HTML5.2

RESUMEN DE ETIQUETAS
<html>: Define el comienzo y el final de un documento HTML.

<head>: Contiene información meta sobre el documento HTML.

<title>: Define el título del documento.

<body>: Contiene el contenido visible del documento.

<h1>, <h2>, ..., <h6>: Define los encabezados de nivel 1 al 6.

<p>: Define un párrafo de texto.

<a>: Define un enlace (hipervínculo).

<img>: Inserta una imagen en la página.

<ul>, <ol>, <li>: Define listas no ordenadas (viñetas) y ordenadas (números).

<table>, <tr>, <td>: Define tablas y sus filas y celdas.

<form>, <input>, <button>: Define formularios, campos de entrada y botones.

<div>, <span>: Define divisiones genéricas y elementos en línea.

<strong>, <em>, <b>, <i>: Define texto en negrita, cursiva y resaltado.

<br>: Inserta un salto de línea.

<hr>: Inserta una línea horizontal.

<iframe>: Inserta un marco en línea.

<script>: Define un script de cliente.

<style>: Define estilos CSS en línea.

<meta>: Define metadatos que no se muestran en la página.

<link>: Enlaza una hoja de estilo externa o un recurso.

<input>, <textarea>, <select>: Define elementos de formulario para entrada de datos.

<audio>, <video>: Inserta audio y video en la página.

Editores de HTML
 Documentos HTML
Todos los Documentos HTML Deben Comenzar con Una Declaración de Tipo de documento: <!DOCTYPE html>.

El documento HTML en sí comienza con <html>y termina con </html>.

La parte visible del documento HTML está entre <body>y </body>.

Ejemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
La declaración <! DOCTYPE>

La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los navegadores a mostrar las páginas web
correctamente.

Solo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).

La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.

La <!DOCTYPE>declaración para HTML5 es:

Encabezados HTML

Los encabezados HTML se definen con las etiquetas <h1>para <h6>.

<h1>define el encabezado más importante. <h6>define el encabezado menos importante:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

Ejemplo
<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>
HTML de Párrafos
Los párrafos HTML se definen con la <p>etiqueta:

Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Ejemplo
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
Enlaces HTML
Los enlaces HTML se definen con la <a>etiqueta:

<a href="https://www.google.com">This is a link</a>

Ejemplo
<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>

<a href="https://www.paginas-web-cr.com">This is a link</a>

</body>

</html>
Imágenes HTML
Las imágenes HTML se definen con la <img>etiqueta.
<img src="nuestraimagen.jpg" alt="nuestraimagen.com" width="104" height="142">
El archivo de origen ( src), el texto alternativo ( alt) widthy heightse ofrece como atributos:
Ejemplo
<!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the img tag:</p>

<img src="nuestraimagen.jpg" alt="nuestraimagen.com" width="104" height="142">

</body>

</html>