Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML5

    Cargado por

    Rosa Maria Flores
    11 vistas26 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    11 vistas26 páginas

    HTML5

    Cargado por

    Rosa Maria Flores

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 26

    PROFESOR: MARCO ANTONIO ISIDRO ABRIL

    NOMBRE: ROSA MARA TEMAXTE FLORES

    MATERIA: TECNOLOGAS DE LA INVESTIGACIN

    1 SEMESTRE GRUPO A

    12 DE NOVIEMBRE DEL 2012

    HTML5 HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del lenguaje bsico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un clsico HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deber ser servida como XML (XHTML) (application/xhtml+xml).1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Todava se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por mltiples desarrolladores web por sus avances, mejoras y ventajas. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario comn actualizar a la versin ms nueva, para poder disfrutar de todo el potencial que provee HTML5. El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C. Nuevos elementos HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios web modernos. Algunos de ellos son tcnicamente similares a las etiquetas <div>y <span>, pero tienen un significado semntico, como por ejemplo <nav> (bloque de navegacin del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a travs de una interfaz estandarizada, como los elementos <audio> y <video>. Mejoras en el elemento <canvas>, capaz de renderizar en los navegadores ms importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D. Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentacin, como <font> y <center>, cuyos efectos son manejados por el CSS. Tambin hay un renovado nfasis en la importancia del scripting DOM para el comportamiento de la web. Diferencias entre HTML5 y HTML4/XHTML

    Etiqueta

    Atributos

    Comentarios

    <!-- -->

    Estndar o ninguno

    <!DOCTYPE> Estndar o ninguno Atributo Aadido:media <a> href | target | rel | hreflang | media | type Atributo cambiado: Target

    <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b>

    Estndar o ninguno Etiqueta Eliminada Estndar o ninguno Etiqueta eliminada Estndar o ninguno Atributos globales Atributos globales autobuffer | autoplay | controls | loop | src Atributos globales Nueva etiqueta Nueva etiqueta Nueva etiqueta Etiqueta cambiada

    <base> <basefont> <bb> <bdo> <big>

    Estndar o ninguno Etiqueta eliminada Estndar o ninguno Estndar o ninguno Etiqueta eliminada

    <blockquote> Estndar o ninguno <body> <br> <button> <canvas> <caption> <center> <cite> <code> Atributos globales Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno height | width Estndar o ninguno Etiqueta eliminada Etiqueta cambiada Nueva etiqueta

    <col> <colgroup> <command> <datagrid> <datalist> <dd> <del> <details> <dialog> <dir> <div> <dfn> <dl> <dt>

    Estndar o ninguno Estndar o ninguno checked | default | disabled | hidden | icon | label | radiogroup | type Estndar o ninguno Atributos globales Estndar o ninguno Estndar o ninguno open Atributos globales Nueva etiqueta Nueva etiqueta Etiqueta eliminada Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Nueva etiqueta Nueva etiqueta

    <em> <embed> <fieldset> <figure> <font> <footer> <form> <frame> <frameset> <h1> ... <h6> <head> <header> <hgroup> <hr>

    Estndar o ninguno height | src | type | width Estndar o ninguno Atributos globales Nueva etiqueta Etiqueta eliminada Atributos globales Estndar o ninguno Etiqueta eliminada Etiqueta eliminada Estndar o ninguno Estndar o ninguno Atributos globales Atributos globales Ninguno Nueva etiqueta Nueva etiqueta Etiqueta cambiada Nueva etiqueta Nueva etiqueta

    <html> <i> <iframe> <img>

    Estndar o ninguno Ninguno Estndar o ninguno Estndar o ninguno accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | Etiqueta cambiada: formenctype | formmethod | formnovalidate | formtarget | height | list | max | Aadidos 13 elementos maxlength | min | multiple | name | pattern1 placeholder | readonly | required | size a type | src | step | type | value | width Estndar o ninguno Etiqueta eliminada Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Atributos globales Nueva etiqueta Etiqueta cambiada

    <input>

    <ins> <isindex> <kbd> <label> <legend> <li> <link> <mark>

    <map> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param>

    Estndar o ninguno Estndar o ninguno Estndar o ninguno high | low | max | min | optimum | value Atributos globales Nueva etiqueta Nueva etiqueta Etiqueta eliminada Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno form Estndar o ninguno Estndar o ninguno Nueva etiqueta

    <pre> <progress> <q> <ruby> <rp> <rt> <s> <samp> <script> <section> <select> <small> <source> <span>

    Estndar o ninguno max | value Nueva etiqueta

    cite Atributos globales Atributos globales

    Nueva etiqueta Nueva etiqueta Nueva etiqueta Etiqueta eliminada

    Estndar o ninguno Estndar o ninguno cite Estndar o ninguno Atributos globales media | src | type Estndar o ninguno Etiqueta Cambiada Nueva etiqueta Nueva etiqueta

    <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno datetime | pubdate Estndar o ninguno

    Etiqueta eliminada

    Nueva etiqueta

    <tr> <tt> <u> <ul> <var> <video> <xmp> Novedades

    Estndar o ninguno Etiqueta eliminada Define texto que debe tener un estilo diferente del texto normal Estndar o ninguno Estndar o ninguno src | poster | autobuffer | autoplay | loop | controls | width | height Nueva etiqueta Etiqueta eliminada
    3

    Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC). Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. Permiten generar tablas dinmicas 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 (frmulas matemticas) y SVG (grficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML. Drag & Drop. Nueva funcionalidad para arrastrar objetos como imgenes.

    Web Semntica

    Aade etiquetas para manejar la Web Semntica (Web 3.0): header, footer, article, nav, time (fecha del contenido), link rel= (tipo de contenido que se enlaza). Estas etiquetas permiten describir cual es el significado del contenido. Por ejemplo su importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la visualizacin, se orientan a buscadores. Los buscadores podrn indexar e interpretar esta meta informacin para no buscar simplemente apariciones de palabras en el texto de la pgina. Permite incorporar a las pginas ficheros RDF / OWL (con meta informacin) para describir relaciones entre los trminos utilizados.

    ademas de ofrecer versatilidad en el manejo y animacin de objetos simples, imgenes etc. ]Nuevas APIs 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 Geoposicionamiento 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 aplicacin 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 comunicacin bidireccional entre pginas. Similar a los Sockets de C. WebWorkers. Hilos de ejecucin en paralelo. ESTNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red, ficheros, CPU, Memoria, puertos USB, cmaras, micrfonos muy interesante pero con numerosas salvedades de seguridad.

    Ejemplos de cdigos HTML5

    Cdigo HTML5 para reproducir audio sin la necesidad de plugins. Para video es algo similar. <!DOCTYPE HTML> <html> <head> <title>fuente de mltiples 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 Consulta SQL a una Base de Datos en el Navegador. // CREAR BBDD function prepareDatabase(ready, error) { return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)');

    }, error); }); } // CONSULTAR BBDD function showDocCount(db, span) { db.readTransaction(function (t) { t.executeSql('SELECT COUNT(*) AS c FROM docids', [], function (t, r) { span.textContent = r.rows[0].c; }, function (t, e) { // couldn't read database span.textContent = '(unknown: ' + e.message + ')'; }); }); } prepareDatabase(function(db) { // got database var span = document.getElementById('doc-count'); showDocCount(db, span); }, function (e) { // error getting database alert(e.message); });

    // Ejemplo de SELECT con parmetros db.readTransaction(function (t) { t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { report(data.rows[0].title, data.rows[0].author); }); }); Ejemplo de WebWorker (Hilo de ejecucin en paralelo) Es necesario el uso de javascript. // 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> // worker.js (fichero con la tarea del nuevo hilo de ejecucin 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 indicar la forma de trabajar 2D o 3D

    var context = canvas.getContext('2d'); // Se comienza a dibujar en el lienzo utilizando objetos // grficos 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></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 Posicin</a> </body> </html> Estructura de una pgina HTML Estructura bsica

    Cada pgina comienza con: < HTML > . A continuacin viene la cabecera, delimitada por < HEAD > y < /HEAD > . Despus, el comando < BODY >, que indica el comienzo del cuerpo de la pgina. Las instrucciones HTML se escribirn a continuacin, y finalizarn con < /BODY >. La pgina acabar con < /HTML > .

    Es decir: <HTML> <HEAD>

    Definiciones de la cabecera </HEAD> <BODY> Instrucciones HTML </BODY> </HTML> Cabecera La cabecera de un documento est delimitada por las etiquetas < HEAD > y </HEAD > Sus componentes son opcionales. El ms importante es <TITLE> , que permite escribir el ttulo del documento. El ttulo no se muestra en la pgina, sino en la parte superior de la ventana del visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma: <HEAD> <TITLE>Ttulo del documento HTML</TITLE> </HEAD> Cuerpo Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes atributos:

    BACKGROUND="imagen": define el fondo. Ms adelante veremos ms sobre imgenes. BGCOLOR="######": color del fondo (slo si no se define una imagen de fondo, o si sta imagen no puede obtenerse.. Ms adelante veremos ms sobre colores. Por ahora nos basta saber que para los colores bsicos se puede utilizar su nombre en ingls: white, blue, red, green ...

    TEXT="######": color del texto. Por defecto ser negro. LINK="######": color de los links. Por defecto ser azul. VLINK="######": color de los links visitados. Por defecto ser violeta.

    Ejemplos <body background= "fondo.gif"> <body bgcolor="white" text="blue" link="red" vlink="red"> El documento tendr como fondo la imagen indicada. El fondo ser blanco, el texto azul, y todos los links (visitados o no) sern rojos

    Listado de Tags html <!-- --> Inserta comentarios ocultos <!DOCTYPE> Establece el tipo de documento <a> Inserta vnculos o marcadores <abbr> Explica abreviaciones <acronym> Explica acrnimos <address> Provee informacin de contacto <applet> Inserta un applet (scripts) <area> Define sectores para mapas de imagen <b> Texto en negrita <base> URI base para resolver URIs relativas <basefont> Tamao de la fuente predeterminado

    <bdo> Suprime el algoritmo bidireccional <big> Texto en tamao "grande". <blockquote> Citar prrafos <body> Contiene los elementos a mostrar <br> Fuerza un quiebre de lnea <button> Crea un botn <caption> Establece un ttulo para una tabla <center> Centra su contenido <cite> Inserta una cita o referencia <code> Representa texto de computadora <col> Da atributos a columnas en una tabla <colgroup> Agrupa columnas en una tabla <dd> Define descripciones en una lista <del> Indica texto eliminado <dfn> Asigna una definicin a un trmino <dir> Inserta una lista de directorios (rbol) <div> Define un bloque de contenido <dl> Define una lista <dt> Inserta un trmino en una lista <em> Indica nfasis <fieldset> Agrupa controles en un formulario <font> Establece el estilo de fuente <form> Inserta un formulario <frame> Inserta un marco <frameset> Inserta un grupo de frames <h1> Encabezado de nivel 1

    <h2> Encabezado de nivel 2 <h3> Encabezado de nivel 3 <h4> Encabezado de nivel 4 <h5> Encabezado de nivel 5 <h6> Encabezado de nivel 6 <head> Define el bloque de encabezado <hr> Dibuja una lnea o regla horizontal <html> Contiene al documento <i> Muestra texto en itlica <iframe> Inserta un marco dentro del documento <img> Inserta una imagen <input> Muestra controles de entrada <ins> Indica texto insertado <isindex> Entrada de lnea simple <kbd> Indica texto a ingresarse por el usuario <label> Establece una etiqueta para un control <legend> Asigna un ttulo a un "fieldset" <li> Define un artculo en una lista <link> Ofrece informacin relacional <map> Define un mapa de imagen <menu> Lista men <meta> Da informacin sobre el documento <noframes> Contenido alternativo para marcos <noscript> Contenido alternativo para scripts <object> Ejecuta aplicaciones externas <ol> Inserta una lista ordenada

    <optgroup> Agrupa opciones en un control select <option> Define una opcin en un control select <p> Define un prrafo <param> Da un parmetro para un objeto <pre> Bloque de texto preformateado <q> Inserta una cita en una lnea <s> Muestra texto tachado <samp> Representa texto de programas <script> Contiene scripts <select> Crea un control select <small> Muestra texto en letra "pequea" <span> Asigna atributos al texto en lneas <strike> Muestra texto tachado <strong> Indica nfasis fuerte <style> Define atributos visuales (hojas estilo) <sub> Define texto en sub-ndice <sup> Define texto en super-ndice <table> Inserta una tabla <tbody> Define un cuerpo en una tabla <td> Celda regular de una tabla <textarea> Entrada de texto de lneas mltiples <tfoot> Define un pie en una tabla <th> Celda de encabezado de una tabla <thead> Define un encabezado de tabla <title> Define el ttulo del documento <tr> Inserta una fila en una tabla

    <tt> Muestra texto en "teletype" <u> Muestra texto subrayado <ul> Inserta una lista sin orden <var> Indica una instancia de una variable

    También podría gustarte