Descargar la presentación
La descarga está en progreso. Por favor, espere
1
INSTITUTO DE EDUCACION SUPERIOR
"4 DE JUNIO DE 1821" VANESA MARTINEZ PERES. MIGUEL ANGEL VELEZ CONTRERAS. YULY ROSMERI VALLES TELLO. DILMER IVAN CUBAS DIAZ. JHOMAYRA PALACIOS TOCTO. LUCY DAVILA SUÑIGA. WUILDER BACON RAMIREZ JAÉN-PERÚ
2
INTRODUCCION Lenguaje para crear páginas web estáticas, basado en marcas de Hipertexto: Texto estructurado que incluye híper enlaces a otros documentos, objetos multimedia. Especifica la estructura lógica del contenido (títulos, párrafos, listas, definiciones, citas, etc.) Especifica los diferentes efectos que se dan al contenido (cursiva, negrita, fuente, tamaño). El navegador web o interpretará y reproducirá la página web para que la pueda ver el usuario. Un documento HTML consta de dos elementos: Los contenidos del documento Las marcas o etiquetas HTML que darán el formato adecuado a dichos contenidos. Las etiquetas HTML son porciones de texto específicas que permiten: Definir la estructura del documento Añadir al texto formatos y estilo Incrustar contenidos. externos-hiperenlaces Insertar elementos multimedia e imágenes.
3
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Un documento escrito en HTML contendría básicamente las siguientes etiquetas: <HTML> Indica el inicio del documento. <HEAD> Inicio de la cabecera. <TITLE> Inicio del título del documento. </TITLE> Final del título del documento. </HEAD> Final de la cabecera del documento. <BODY> Inicio del cuerpo del documento. </BODY> Final del cuerpo del documento. </HTML> Final del documento.
4
CARACTERÍSTICAS DEL LENGUAJE HTML
El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí. El Web tenía que ser hipertexto y debía ser fácil navegar por él. Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...). Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.
5
QUÉ SE NECESITA PARA CREAR UNA PÁGINA WEB
Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit™ en MS-DOS, block de notas enWindows,vi™en UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.
6
EJEMPLO UN EDITOR DE TEXTO SIMPLE, COMO EL BLOCK DE NOTAS DE WINDOWS, ES TODO LO NECESARIO PARA CREAR UNA PÁGINA WEB.
7
EDITOR WYSIWYG PERMITEN, ADEMÁS, MODIFICAR EL CÓDIGO HTML DIRECTAMENTE.
8
HTML ES UN LENGUAJE DESCRIPTIVO
Probablemente el lector ha usado alguna vez un procesador de texto (Abiword, MicrosoftWordo KWord) o un programa de descripción de páginas (QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamaño". El objetivo de este lenguaje será simplemente describir cómo es una página de manera que examinando esa descripción el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible.
9
Un buen ejemplo de este carácter descriptivo es la definición de titulares, también llamados encabezados, en HTML. Vamos a adelantarnos un poco en esta introducción para mostrar este ejemplo, en él se muestra como poner el titular de una página: <h1>Bienvenido a la página de La Super Editorial</h1>
10
LAS BASES DE HTML Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún. Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura: <NOMBRE_ETIQUETA> O bien esta otra: <NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
11
Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas. Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir: <hr> Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.
12
EJEMPLO: Uso básico de una etiqueta HTML sin ningún tipo de parámetros usando la etiqueta <hr> para crear una línea horizontal. Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas.
13
Las etiquetas tienen atributos para cambiar aspectos del efecto que producen.
ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE: El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos
14
PRIMEROS PASOS CON HTML
ESTRUCTURA DE UNA PÁGINA:Todo documento HTML está formado por los bloques. Pasemos a explicar cada uno de ellos. Estructura de bloques de un documento HTML.
15
Elementos de la cabecera </head>
En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente: <html> Código de la página </html> El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo. La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera: <head> Elementos de la cabecera </head> ... Resto de código de la página ... </html>
16
LOS ENCABEZADOS Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. En la figura 2.5 se puede ver un ejemplo de cómo muestra las cabeceras Internet Explorer.
17
Distintos tipos de encabezados vistos con Microsoft Internet Explorer:
18
El código usado en este ejemplo es el siguiente:
<h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6>
19
ETIQUETAS a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tiple, tr, tt, u, ul, var.
20
ATRIBUTOS BÁSICOS Los siguientes cuatro atributos básicos se pueden aplicar prácticamente a todas las etiquetas HTML: id = "texto" Establece un identificador único a cada elemento dentro de una página HTML class = "texto" Establece la clase CSS que se aplica a los estilos del elemento style = "texto" Establece de forma directa los estilos CSS de un elemento title = "texto" Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)
21
ATRIBUTOS PARA INTERNACIONALIZACIÓN
lang = "codigo de idioma" Indica el idioma del elemento mediante un código predefinido xml:lang = "codigo de idioma" Indica el idioma del elemento mediante un código predefinido dir = Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)
22
ATRIBUTOS DE EVENTOS Onblur Deseleccionar el elemento <button>, <input>, <label>, <select>,<textarea>, <body> Onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea> Onclick Pinchar y soltar el ratón Todos los elementos Onfocus Seleccionar un elemento <button>, <input>, <label>, <select>,<textarea>, <body> Onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body> Onkeypress Pulsar una tecla Elementos de formulario y <body>
23
ATRIBUTOS DE FOCO accesskey = "letra“ Establece una tecla de acceso rápido a un elemento HTML tabindex = "numero" Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767 onfocus, onblur. Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco.
24
RESUMEN DE ETIQUETAS Y ATRIBUTOS
cierre atributo explicación <!-- --> Añadir un comentario no visible. <a> </a> Establece un vínculo. href Dirección del vínculo. name Establece un ancla. target Establece el destino del vínculo: _blank, _self, _top, _parent, o "definido" <b> </b> Texto en negrita. <blockquote> </blockquote> Sangrado. <body> </body> Parte visible en pantalla del documento. alink Modifica el color del vínculo cuando está activado. background Para colocar una imagen de fondo. bgcolor Para establecer un color de fondo.
25
link Modifica el color del vínculo antes de estar activado. vlink Modifica el color del vínculo cuando ya ha sido visitado. <br> Salto de línea. <caption> </caption> Establece el título de una tabla. Dentro de <table>. <center> Centra en horizontal. <dd> La definición del término. Dentro de <dl> <dl> </dl> Listado de términos y sus definiciones. <dt> </dt> Término para ser definido. Dentro de <dl> <font> </font> Fuente. size Tamaño de la fuente. color Color face Tipo de letra. <form> </form> Formulario action ="mailto:la_dirección_de_correo" method ="post" enctype ="text/plain" <frame> </frame> Marco.
26
name Nombre que se le da para referirse después a él. src Establece qué documento se va a cargar inicialmente en el marco. frameborder Indica si habrá o no borde entre los marcos. noresize Si se escribe, el navegante no puede redimensionar los marcos. scrolling Establece si habrá o no barra de scrolling. <frameset> </frameset> Estructura de los marcos. cols Número de columnas. rows Número de filas. <h1> </h1> Encabezado de primer orden.Hay otros 5: <h2><h3><h4><h5><h6> <head> </head> Cabecera del documento. <hr> Línea de separación horizontal. align Alineación de la línea. noshade Sin efecto tridimensional. size Grosor de la línea. width Anchura de la línea. <html> </html> Apertura y cierre del código. <i> </i> Letra cursiva. <iframe> </iframe> Marco en línea. Carga en un marco otra página. Nombre que se le da al espacio para posteriores referencias. Establece qué documento se carga inicialmente. Establece si habrá o no borde de separación. <img> Inserta una imagen. alt Texto alternativo a la imagen. border Establece si va a tener borde o no, cuando sirva de vínculo. height Altura de la imagen. Ancho de la imagen. Establece qué imagen se va a insertar. <li> Componente de una lista. Dentro de <ul> o de <ol> <ol> </ol> Lista numerada de objetos. <p> </p> Párrafo nuevo. <sub> </sub> Subíndice. <sup> </sup> Superíndice. <table> </table> Tabla. Alinea la tabla: center, right, left bgcolor Establece el color de fondo de la tabla. Establece un borde a la tabla cellpadding Separación entre el borde de la tabla y el contenido. cellspacing Separación entre las celdas. Establece el ancho de la tabla. <td> </td> Celda de una tabla. Establece la alineación del texto dentro de la celda: left, center, right. Establece el color de fondo para la celda. colspan Extiende la celda sobre varias columnas. Establece la altura de la celda. rowspan Extiende la celda sobre varias filas. valign Establece la alineación vertical: top, middle, bottom. Establece el ancho de la celda. <th> </th> Titular de la columna de una tabla. Dentro de <tr>. <title> </title> Establece el nombre del documento. Dentro de <head> <tr> </tr> Fila de una tabla. <u> </u> Subrayado. <ul> </ul> Lista no numerada de objetos.
27
CONCLUSIÓN Conocemos las principales características del lenguaje
HTML y qué es necesario para crear un Web. Hemos aprendido además las bases del lenguaje y hemos creado nuestra primera página de ejemplo, con texto y en cabezados, y la hemos puesto un título. En la siguiente entrega realizaremos la primera página web completa, con párrafos, imágenes e hiperenlaces. Aprenderemos también a alinear el texto a los dos lados de la página y a combinar esta alineación con la inclusión de imagenes. Igualmente veremos cómo es posible crear enlaces a distintos puntos de una página así como a otras páginas o puntos concretos de estas.
28
ESTRUCTURAS: Para crear una página web, normalmente se incluyen estructuras comunes como headers, footers y columnas y es común usar divs para darles un id descriptiva o clase ya que las actuales versiones de HTML4 carecen de la semántica necesaria para describir estas partes de manera específica. Por ejemplo:
29
El HTML5 soluciona esto incluyendo nuevos elementos que representan cada una de las diferentes secciones de una página web. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así DIV innecesarios. Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web.
30
El elemento input adquiere gran relevancia al ampliarse los elementos que se permitirán en el “type”. <input type="search"> para cajas de búsqueda. <input type="number"> para adicionar o restar números mediante botones. <input type="range"> para seleccionar un valor entre dos valores predeterminados. <input type="color"> seleccionar un color. <input type="tel"> números telefónicos. <input type="url"> direcciones web. <input type=" "> direcciones de . <input type="date"> para seleccionar un día en un calendario. <input type="month"> para meses. <input type="week"> para semanas. <input type="time"> para fechas. <input type="datetime"> para una fecha exacta, absoluta y tiempo. <input type="datetime-local"> para fechas locales y frecuencia.
31
OTROS ELEMENTOS: <audio> y <video> Nuevos elementos que permitirán incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más importantes e interesantes en este HTML5, ya que permite reproducir y controlas vídeos y audio sin necesidad de plugins como el de Flash. <embed> Se emplea para contenido incrustado que necesita plugins como el Flash. Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un estándar, no habrá conflicto con <object>. <canvas> Este es un elemento complejo que permite que se generen gráficos al hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitirá a los desarrolladores crear aplicaciones muyinteresantes.
32
VIDEO El HTML5 ha definido un nuevo elemento llamado <video> para incrustar video en las páginas de la web. Actualmente insertar un video en la web era imposible sin determinados plugins como el QuickTime o el Flash. El elemento <video> ha sido diseñado para utilizarlo sin la necesidad de que tenga que detectar ningún script. Se pueden especificar múltiplesficheros de video y los navegadores que soporten el video en HTML5 escogerán uno basado en el formato que soporte. FORMATOS DE VIDEO Los formatos de video son como los lenguajes escritos. Un periódico en inglés contiene la misma información que un periódico en español, aunque solo uno le será útil. Con los navegadores pasa lo mismo, necesitan saber en qué “idioma” está escrito el video. Los lenguajes de los videos se llaman “codecs” un algoritmo utilizado para compactar un video
33
NUEVOS ATRIBUTOS media: Para conseguir una mayor consistencia con el link en los elementos <a /> ping: Especificacremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a /> target: Disponible para mejorar la consistencia con el elemento <a />. autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página. form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se sococien con un simple formulario. replace: Atributo para <input /> <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio. data: Para <form />, <select /> y <datalist />. required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio. inputmode: Atributo para <input /> y <textarea />. disabled: Para <fieldset />, permite desactivar el fieldset completo. autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada. list: Para elementos <datalist /> y <select />. template: Para <input /> y <button /> podrá usarse para repetir templates. scoped: Para elemento <style />, permitirá usar hojas de estilo “scoped” ?? async: Para el elemento <script /> el ajax hecho atributo.
34
NUEVOS ATRIBUTOS media: Para conseguir una mayor consistencia con el link en los elementos <a /> ping: Especificacremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a /> target: Disponible para mejorar la consistencia con el elemento <a />. autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página. form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se sococien con un simple formulario. replace: Atributo para <input /> <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
35
data: Para <form />, <select /> y <datalist />. required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio. inputmode: Atributo para <input /> y <textarea />. disabled: Para <fieldset />, permite desactivar el fieldset completo. autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada. list: Para elementos <datalist /> y <select />. template: Para <input /> y <button /> podrá usarse para repetir templates. scoped: Para elemento <style />, permitirá usar hojas de estilo “scoped” ?? async: Para el elemento <script /> el ajax hecho atributo.
36
ELEMENTOS CAMBIADOS Estos elementos de HTML5 son imcompatibles con HTML4. El elemento <a /> sin href ahora creará un enlace al sitio. El elemento <address /> es ahora un nuevo concepto de sección. El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia. Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estandar para el interfaz utilizado en la plataforma. <menu /> ha sido redefinido para ser usado con los actuales menús. El elemento <small /> ahora representa una impresión pequeña. El elemento <strong /> definitivamente representa el enfasis puesto en trozo de nuestro
37
ELEMENTOS ELIMINADO En la nueva versión, algunos de los elementos anteriormente desaprobados pasan a ser eliminados definitivamente. acronym applet basefont big center dir font frame frameset isindex noframes noscript (solo en XHTML5) s strike tt u
38
ATRIBUTOS ELIMINADOS Al igual que los elementos los atributos también pasarán a mejor vida. rev y charset en <link /> y <a /> target en <link /> nohref en <area /> profile en <head /> version en <html /> name en <map /> scheme en <meta /> archive, classid, codetype, declare y standby en <object />
40
COMPONENTES BÁSICOS Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero cómo esa estructura es construida. Crear fundamentos fuertes nos ayudará más adelante a aplicar el resto de los componentes para aprovechar completamente estas nuevas tecnologías. Por lo tanto, empecemos por lo básico, paso a paso. En este primer capítulo aprenderá cómo construir una plantilla para futuros proyectos usando los nuevos elementos HTML introducidos en HTML5. Hágalo usted mismo: Cree un archivo de texto vacío utilizando su editor de textos favorito para probar cada código presentado en este capítulo. Esto lo ayudará a recordar las nuevas etiquetas HTML y acostumbrarse a ellas. Conceptos básicos: Un documento HTML es un archivo de texto. Si usted no posee ningún programa para desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos. El archivo debe ser grabado con la extensión html y el nombre que desee (por ejemplo, micodigo.html).
41
ESTRUCTURA GLOBAL <!DOCTYPE> <!DOCTYPE html>
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5. <!DOCTYPE> En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo: <!DOCTYPE html> IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario. Hágalo usted mismo: Puede comenzar a copiar el código en su archivo de texto y agregar los próximos a medida que los vamos estudiando.
42
<html> Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento<html>.Este elemento envolverá al resto del código: <!DOCTYPE html> <html lang=”es”> </html> Para usar HTML5 se utiliza el doctype. <!DOCTYPE HTML> Es compatible con versiones antiguas de navegadores. HTML5 <head> <meta charset="utf-8"> <title>Hello world!</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <script src="code.js"></script> </head> <body> <hgroup> <h1>Hola HTML5!</h1> <h2>Esta es mi primera web</h2> </hgroup> </body>
43
En HTML4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> En HTML5 <metacharset="utf-8"> <link rel="stylesheet" href="style.css" type="text/css" media="screen"/> <link rel="stylesheet" href="style.css"/> <script src="code.js" type="text/javascript"></script> <script src="code.js"> </script>
44
En HTML4 sólo existía un elemento contenedor sin significado semántico <div>.
En HTML5 existen Div, Section y Article que además de cumplir con una comportamiento similar a div aportan semántica. <div> Es el contenedor genérico, es un elemento a nivel de bloque sin sentido adicional semántico. <section> Es un "documento genérico o sección de aplicación" Normalmente, tiene un header y suele tener un footer. <article> Es una parte independiente del documento. También suele llevar un título y un footer. <aside> Se usa para definir la sidebar. <footer> La parte más baja, donde tenemos toda la información <header> La cabecera de la web. <nav> Se usa para definir el menú o la navegación de la página.
46
HTML5
47
HTML5 Nuevas Características
• Audio & Video • Canvas • Almacenamiento local • WebSockets • Semántica • Compatibilidad hacia atrás • Eficacia en el renderizado Audio La etiqueta <audio> define sonido o cualquier tipo de streaming de audio. Atributos: • autoplay • controls • loop • preload • src
48
La etiqueta <command> define un botón de comando o un radiobutton o un checkbox.
Atributos: • checked • disabled • icon • label • radiogroup • type <command onclick="alert('Hello World')">Haz click aquí</command> La etiqueta <mark> se usa para destacar una palabra o una parte del texto. La etiqueta <hgroup> se usa para agrupar titulares (h1,h2)
49
<span id="objprogress">25</span>% </progress>
hgroup> <h1>Bienvenidos a mi web</h1> <h2>La web de HTML5</h2> </hgroup> La etiqueta <progress> se usa para visualizar el progreso de una tarea que se esté realizando <progress> <span id="objprogress">25</span>% </progress> La etiqueta <source> se usa para definir la fuente de un archivo de audio o video. <audio controls="controls"> <source src="cancion.ogg" type="audio/ogg" /> <source src="cancion.mp3" type="audio/mpeg" /> </audio>
50
La etiqueta <source> se usa para definir la fuente de un archivo de audio o video.
<audio controls="controls"> <source src="cancion.ogg" type="audio/ogg" /> <source src="cancion.mp3" type="audio/mpeg" /> </audio> La etiqueta <summary> contiene el encabezado para el elemento details, que se usa para dar detalles sobre un documento o parte de un documento. <details> <summary>Copyright por mi persona.</summary> <p>Lorem ipsum dolor sit amet....</p> </details>
51
REPRODUCIENDO AUDIO CON HTML5 millones de vistas en sitios web como pero crear un archivo de audio que obtenga el mismo resultado es prácticamente imposible. Sin Embargo, el audio se encuentra aún disponible, ganando su propio mercado en shows de radio y podcasts en toda la red. HTML5 provee un nuevo elemento para reproducir audio en un documento HTML. El elemento, por supuesto, es <audio> y comparte casi las mismas características del elemento <video>. <!DOCTYPE html> <html lang="es"> <head> <title>Reproductor de Audio</title> </head> <body> <section id="reproductor"> <audio src=” controls> </audio> </section> </body> </html>
52
LOS EVENTOS HTML5 incorpora nuevos eventos que son específicos de cada API. Para el procesamiento de video y audio, por ejemplo, los eventos fueron incorporados con el objetivo de informar sobre la situación del medio (el progreso de la descarga, si la reproducción del medio finalizó, o si la reproducción del medio es comenzada o pausada, entre otras). No vamos a utilizarlos en nuestros ejemplos pero serán necesarios para construir aplicaciones complejas. Estos son los más relevantes: progress Este evento es disparado periódicamente para informar acerca del progreso de la descarga del medio. La información estará disponible a través del atributo buffered, como veremos más adelante. canplaythrough Este evento es disparado cuando el medio completo puede ser reproducido sin interrupción. El estado es establecido considerando la actual tasa de descarga y asumiendo que seguirá siendo la misma durante el resto del proceso. Existe otro evento más para este propósito,
Presentaciones similares
