To install click the Add extension button. That's it.

The source code for the WIKI 2 extension is being checked by specialists of the Mozilla Foundation, Google, and Apple. You could also do it yourself at any point in time.

4,5
Kelly Slayton
Congratulations on this excellent venture… what a great idea!
Alexander Grigorievskiy
I use WIKI 2 every day and almost forgot how the original Wikipedia looks like.
What we do. Every page goes through several hundred of perfecting techniques; in live mode. Quite the same Wikipedia. Just better.
.
Leo
Newton
Brights
Milds

De Wikipedia, la enciclopedia libre

HTML5
(Hypertext Markup Language)
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 Markup language
Extendido de SGML
Estándar(es) http://www.w3.org/TR/html5/
Formato abierto ?

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 específica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml).[1][2]​ Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.[3]

Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar su navegador a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML 5.

El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.

YouTube Encyclopedic

  • 1/5
    Views:
    532 622
    66 020
    45 407
    282 150
    67 049
  • HTML 5 Tutorial
  • Learn HTML5 in 15 minutes!
  • تعلم HTML5 و CSS3 خطوة بخطوة - دورة كاملة
  • Tutoriales HTML5: 1. Estructura Básica
  • Kurs HTML odc. 5: Nowe znaczniki HTML5

Transcription

Nuevos elementos

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.

Diferencias entre HTML5 y HTML4/XHTML

Etiqueta Atributos de la etiqueta Comentarios
<!-- --> Estándar o ninguno Comentarios
<!DOCTYPE> HTML Estillo
<a> href | target | rel | hreflang | media | type Atributo Añadido: media
Atributo cambiado: Target
<abbr> title
<acronym> Etiqueta Eliminada
<address> Estándar o ninguno
<applet> Etiqueta eliminada
<area> Estándar o ningunos
<article> Atributos globales Nueva etiqueta
<aside> Atributos globales Nueva etiqueta
<audio> autobuffer | autoplay | controls | loop | src Nueva etiqueta
<b> Atributos globales Etiqueta cambiada
<base> Estándar o ninguno
<basefont> Etiqueta eliminada
<bdo> Estándar o ninguno
<big> Etiqueta eliminada
<blockquote> Estándar o ninguno
<body> Estándar o ninguno
<br> Estándar o ninguno
<button> Estándar o ninguno
<canvas> height | width Nueva etiqueta
<caption> Estándar o ninguno
<center> Etiqueta eliminada
<cite> Atributos globales Etiqueta cambiada
<code> Estándar o ninguno
<col> Estándar o ninguno
<colgroup> Estándar o ninguno
<datalist> Atributos globales Nueva etiqueta
<dd> Estándar o ninguno
<del> Estándar o ninguno
<details> open Nueva etiqueta
<dialog> Atributos globales Nueva etiqueta
<dir> Etiqueta eliminada
<div> Estándar o ninguno Division
<dfn> Estándar o ninguno
<dl> Estándar o ninguno
<dt> Estándar o ninguno
<em> Estándar o ninguno
<embed> height | src | type | width Nueva etiqueta
<fieldset> Estándar o ninguno
<figure> Atributos globales Nueva etiqueta
<font> Etiqueta eliminada
<footer> Atributos globales Nueva etiqueta
<form> Estándar o ninguno
<frame> Etiqueta eliminada
<frameset> Etiqueta eliminada
<h1>... <h6> Estándar o ninguno
<head> Estándar o ninguno
<header> Atributos globales Nueva etiqueta
<hgroup> hgroup se añadió a la especificación HTML5, pero ahora está obsoleta.[4]​ Usar <header>
<hr> Ninguno Etiqueta cambiada
<html> Estándar o ninguno
<i> Ninguno Etiqueta cambiada
<iframe> Estándar o ninguno
<img> Estándar o ninguno
<input> accept | alt | auto-complete | autofocus | checked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | width Etiqueta cambiada: Añadidos 13 elementos a type
<ins> Estándar o ninguno
<isindex> Etiqueta eliminada
<kbd> Estándar o ninguno
<label> Estándar o ninguno
<legend> Estándar o ninguno
<li> Estándar o ninguno
<link> Estándar o ninguno
<mark> Atributos globales Nueva etiqueta
<map> Estándar o ninguno
<menu> Estándar o ninguno
<meta> Estándar o ninguno
<meter> high | low | max | min | optimum | value Nueva etiqueta
<nav> Atributos globales Nueva etiqueta
<noframes> Etiqueta eliminada
<noscript> Estándar o ninguno
<object> Estándar o ninguno
<ol> Estándar o ninguno
<optgroup> Estándar o ninguno
<option> Estándar o ninguno
<output> form Nueva etiqueta
<p> Estándar o ninguno
<param> Estándar o ninguno
<pre> Estándar o ninguno
<progress> max | value Nueva etiqueta
<q>
<ruby> cite Nueva etiqueta
<rp> Atributos globales Nueva etiqueta
<rt> Atributos globales Nueva etiqueta
<s> Etiqueta eliminada
<samp> Estándar o ninguno
<script> Estándar o ninguno
<section> cite Nueva etiqueta
<select> Estándar o ninguno
<small> Atributos globales Etiqueta Cambiada
<source> media | src | type Nueva etiqueta
<span> Estándar o ninguno
<strike> Etiqueta eliminada
<strong> Estándar o ninguno
<style> Estándar o ninguno
<sub> Estándar o ninguno
<sup> Estándar o ninguno
<table> Estándar o ninguno
<tbody> Estándar o ninguno
<td> Estándar o ninguno
<textarea> Estándar o ninguno
<tfoot> Estándar o ninguno
<th> Estándar o ninguno
<thead> Estándar o ninguno
<time> datetime | pubdate Nueva etiqueta
<title> Estándar o ninguno
<tr> Estándar o ninguno
<tt> Etiqueta eliminada
<u> Define texto que debe tener un estilo diferente del texto normal[5]
<ul> Estándar o ninguno
<var> Estándar o ninguno
<video> src | poster | autobuffer | autoplay | loop | controls | width | height Nueva etiqueta
<xmp> Etiqueta eliminada

Notas: En amarillo aquellas etiquetas introducidas en esta nueva versión (en rojo aquellas que fueron eliminadas de la especificación HTML5), en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta versión. Si bien en la práctica los navegadores no lo están teniendo en cuenta para evitar perder cuota de mercado.

Novedades

  • Incorpora etiquetas (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privativos (H.264/MPEG-4 AVC).
  • Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.
  • Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.
  • Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.
  • Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Web Semántica

  • Añade etiquetas para manejar la Web semántica (Web 3.0): header, footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).
  • Estas etiquetas permiten describir cuál es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualización, se orientan a buscadores.
  • Los buscadores podrán indexar e interpretar esta meta información para no buscar simplemente apariciones de palabras en el texto de la página.
  • Permite incorporar a las páginas ficheros RDF / OWL (con meta información) para describir relaciones entre los términos utilizados.
  • Además, ofrece versatilidad en el manejo y animación de objetos simples, imágenes etc.

Nuevas API y Javascript

  • API para hacer Drag & Drop. Mediante eventos.
  • API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en local.
  • API de Geolocalización para dispositivos que lo soporten.
  • API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local Storage y Global Storage). Se dispone de una Base de datos con la posibilidad de hacer consultas SQL.
  • WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
  • WebWorkers. Hilos de ejecución en paralelo.
  • Estándar futuro. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, memoria, puertos USB, cámaras, micrófonos... Muy interesante, pero con numerosas salvedades de seguridad.

Ejemplos de códigos HTML5

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="[email protected]" label="Jane Doe">
       <option value="[email protected]" 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>

Referencias

  1. W3C (6 de octubre de 2009). Ian Hickson y David Hyatt, ed. «HTML5» (en inglés). Consultado el 6 de octubre de 2009. 
  2. Jorge Franganillo (6 de septiembre de 2010). «HTML 5: el nuevo estándar básico del web». 
  3. «HTML 5 Finalized». OSNews. 29 de octubre de 2014. Consultado el 29 de octubre de 2014. 
  4. W3C (13 de junio de 2014). «HTML/Elements/hgroup» (en inglés). 
  5. W3C (2007). «Referencia de etiquetas HTML 5 del Consorcio W3C» (en inglés). Archivado desde el original el 2 de agosto de 2012. 

Véase también

Enlaces externos

Esta página se editó por última vez el 11 mar 2024 a las 00:51.
Basis of this page is in Wikipedia. Text is available under the CC BY-SA 3.0 Unported License. Non-text media are available under their specified licenses. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc. WIKI 2 is an independent company and has no affiliation with Wikimedia Foundation.