robot de la enciclopedia para niños

HTML5 para niños

Enciclopedia para niños
Datos para niños
HTML5
(Hypertext Markup Language)
HTML5 logo and wordmark.svg
Desarrollador
W3C HTML WG, WHATWG
https://html.spec.whatwg.org/multipage/
Información general
Extensión de archivo HTML: .html, .htm
XHTML: .xhtml, .xht, .xml
Tipo de MIME HTML: text/html
XHTML: application/xhtml+xml, application/xml
Lanzamiento inicial 28 de octubre de 2014
Tipo de formato Lenguaje de marcado
Extendido de SGML
Estándar(es) http://www.w3.org/TR/html5/
Formato abierto ?

HTML5 es la quinta versión importante del lenguaje principal que se usa para crear páginas web, llamado HTML. Este lenguaje es como el esqueleto de una página web, indicando dónde va el texto, las imágenes y otros elementos.

HTML5 ofrece dos formas de escribir el código: una más tradicional, llamada HTML, y otra más estricta, conocida como XHTML5. Es la primera vez que estas dos formas se desarrollan al mismo tiempo. La versión final de HTML5 se lanzó en octubre de 2014.

Para que puedas ver todas las funciones nuevas de HTML5 en una página web, es importante que uses un navegador de internet actualizado. Los navegadores más antiguos quizás no muestren todo el contenido correctamente. El desarrollo de este lenguaje está a cargo del W3C, un consorcio que establece los estándares para la web.

HTML5: El Lenguaje de la Web Moderna

¿Qué es HTML5 y por qué es importante?

HTML5 es una versión mejorada del lenguaje HTML, que es fundamental para construir casi todas las páginas que visitas en internet. Piensa en HTML como las instrucciones que le dicen a tu navegador cómo mostrar el contenido. Con HTML5, las páginas web pueden ser más interactivas, rápidas y visualmente atractivas.

Una de las grandes ventajas de HTML5 es que permite a los desarrolladores crear sitios web que funcionan bien en diferentes dispositivos, como computadoras, tabletas y teléfonos móviles. Esto es clave en el mundo digital de hoy.

Elementos y Etiquetas: Construyendo la Web

HTML5 introdujo nuevas "etiquetas" y "atributos" que ayudan a organizar mejor el contenido de una página web. Las etiquetas son como comandos que le dicen al navegador qué tipo de contenido es. Por ejemplo, antes se usaban etiquetas genéricas como `

` para muchas cosas. Ahora, HTML5 tiene etiquetas con un significado más claro:
  • `<footer>`: Para la parte de abajo de una página, donde suele ir la información de contacto o derechos de autor.
  • `<nav>`: Para los menús de navegación, que te llevan a otras secciones del sitio.
  • `<article>`: Para el contenido principal de un artículo o una publicación.
  • `<header>`: Para la parte superior de una sección o de la página, donde puede ir el título o un logo.
  • `<section>`: Para agrupar contenido relacionado dentro de una página.

Estas nuevas etiquetas no solo hacen que el código sea más fácil de entender para los programadores, sino que también ayudan a los buscadores de internet a comprender mejor de qué trata cada parte de una página.

Cambios en las Etiquetas HTML

HTML5 no solo añadió etiquetas, sino que también cambió algunas existentes y eliminó otras que ya no eran necesarias. Por ejemplo, etiquetas que solo servían para dar estilo visual (como `` o `
`) fueron eliminadas. Ahora, el estilo se maneja con CSS3, que es otro lenguaje.

Algunas etiquetas importantes que se añadieron o cambiaron son:

  • `<audio>` y `<video>`: Permiten insertar audio y video directamente en la página sin necesidad de programas adicionales.
  • `<canvas>`: Una etiqueta especial para dibujar gráficos, animaciones y juegos directamente en el navegador.
  • `<input>`: Se mejoró para crear formularios más inteligentes, con tipos de entrada específicos para correos electrónicos, números, fechas, etc.

Novedades Multimedia y Funcionales

HTML5 trajo muchas mejoras para que las páginas web sean más dinámicas y divertidas.

Contenido Multimedia Interactivo

Gracias a etiquetas como `<canvas>`, `<audio>` y `<video>`, ahora es posible mostrar videos, reproducir música y crear gráficos complejos directamente en el navegador. Esto significa que no necesitas instalar programas especiales para ver o escuchar contenido multimedia.

Formularios Inteligentes

Los formularios en HTML5 son mucho más avanzados. Ahora pueden validar la información que introduces (por ejemplo, si un correo electrónico tiene el formato correcto) sin necesidad de código adicional. Esto hace que rellenar formularios sea más fácil y con menos errores.

Arrastrar y Soltar Elementos

Una función muy útil es la capacidad de "arrastrar y soltar" elementos en una página web. Esto permite, por ejemplo, mover imágenes o archivos con el ratón, haciendo que las interfaces sean más intuitivas.

La Web Semántica: Más Inteligente para Buscadores

HTML5 contribuye a lo que se conoce como la "Web Semántica" o Web 3.0. Esto significa que las páginas web no solo muestran información, sino que también describen el significado de esa información.

Las nuevas etiquetas semánticas (como `<article>`, `<nav>`, `<header>`, `<footer>`) ayudan a los buscadores de internet a entender mejor la estructura y el contenido de una página. Así, cuando buscas algo, los buscadores pueden ofrecerte resultados más precisos porque "entienden" mejor lo que hay en cada página, no solo las palabras clave.

Herramientas Avanzadas para Desarrolladores

HTML5 también incluye nuevas "API" (Interfaces de Programación de Aplicaciones) y funciones de Javascript que permiten a los programadores crear experiencias web más ricas.

Trabajar sin Conexión

Una API permite que las aplicaciones web funcionen incluso cuando no tienes conexión a internet. Pueden guardar la información necesaria y seguir trabajando sin problemas.

Geolocalización

Con la API de geolocalización, las páginas web pueden pedir permiso para saber tu ubicación. Esto es útil para aplicaciones de mapas o para encontrar lugares cercanos.

Almacenamiento Local

HTML5 ofrece formas de guardar información directamente en tu navegador, como si fuera una pequeña base de datos. Esto permite que las páginas recuerden tus preferencias o datos para que no tengas que introducirlos cada vez.

Tareas en Segundo Plano (WebWorkers)

Los WebWorkers permiten que una página web realice tareas complejas en segundo plano sin que la página se congele o se vuelva lenta. Es como tener varios ayudantes trabajando al mismo tiempo.

Ejemplos Prácticos de Código HTML5

Aquí te mostramos algunos ejemplos de cómo se usa HTML5 para crear funciones modernas en la web.

Código HTML5 para reproducir audio sin la necesidad de plugins


Para video es algo similar.

<!DOCTYPE HTML>
<html LANG="es">
  <head>
    <meta charset="UTF-8">
    <title>fuente de múltiples elementos</title>
  </head>
  <body>
    <audio id="audioTestElem" autobuffer controls >
      <source src="test.m4a">
      <source src="test.ogg" type="audio/ogg; codecs=vorbis">
      <source src="url">
      no audio for you
    </audio>
  </body>
</html>


Ejemplo de WebWorker (Hilo de ejecución en paralelo)
Es necesario el uso de javascript.

Para el archivo Prueba.html

<!DOCTYPE HTML>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

Para el archivo worker.js (fichero con la tarea del nuevo hilo de ejecución infinito)

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}


Ejemplo de Canvas 2D utilizando el API de dibujo
<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas example</title>
    <script>
      function drawPicture(){

        // Primero se recupera el objeto canvas a modificar
        var canvas = document.getElementById('example');

        // Luego se le indica la forma de trabajar 2D o 3D
        var context = canvas.getContext('2d');

        // Se comienza a dibujar en el lienzo utilizando objetos
        // gráficos

        context.fillStyle = "rgb(0,255,0)";
        context.fillRect (25, 25, 100, 100);

        context.fillStyle = "rgba(255,0,0, 0.6)";
        context.beginPath();
        context.arc(125,100,50,0,Math.PI*2,true);
        context.fill();

        context.fillStyle = "rgba(0,0,255,0.6)";
        context.beginPath();
        context.moveTo(125,100);
        context.lineTo(175,50);
        context.lineTo(225,150);
        context.fill();

      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="drawPicture();">

    <canvas id="example" width="260" height="200">
    There is supposed to be an example drawing here, but it's not important.
    </canvas>

  </body>
</html>


Ejemplo de un formulario con nuevos tipos de datos


Elimina muchas validaciones en Javascript. (La clave está en el atributo Type).

<!DOCTYPE HTML>
<html>
  <body>
  <form>

    <input name="form_number" id="form_number" type="number" min="1" max="10" >
    <input name="form_date" id="form_date" type="date">
    <input name="form_month" id="form_month" type="month">
    <input name="form_week" id="form_week" type="week">
    <input name="form_time" id="form_time" type="time">
    <input name="form_url" id="form_url" type="url" list="url_list">
    <datalist id="url_list">
        <option value="http://www.google.com" label="Google">
        <option value="http://net.tutsplus.com" label="NetTuts+">
    </datalist>
    <input name="form_email" id="form_email" type="email" list="email_list" multiple>
    <datalist id="email_list">
       <option value="jane.doe@test.com" label="Jane Doe">
       <option value="john.doe@test.com" label="John Doe">
    </datalist>
    <input name="form_telephone" id="form_telephone" type="tel">
    <input name="form_color" id="form_color" type="color">
    <label>
        Attachments:
        <input type="file" multiple name="att">
    </label>
    <input name="x" type="range" min="100" max="700" step="9.09090909" value="509.090909">

  </form>
  </body>
</html>


Ejemplo de geoposicionamiento
<!DOCTYPE HTML>
<html>
<head>
<title> Geo  Localizations </title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
  navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
  var latitud = position.coords.latitude;
  var longitud = position.coords.longitude;
  alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>

Véase también

Obtenido de «https://ninos.kiddle.co/index.php?title=HTML5&oldid=4709492»
kids search engine
Todo el contenido de los artículos de la Enciclopedia Kiddle (incluidas las imágenes) se puede utilizar libremente para fines personales y educativos bajo la licencia Atribución-CompartirIgual a menos que se indique lo contrario. Citar este artículo:
HTML5 para Niños. Enciclopedia Kiddle.