Scribd
Cargar
111 vistas

HTML5

El documento describe las principales características de HTML5, incluyendo la simplificación del código, reproducción nativa de audio y video, animaciones sin necesidad de plugins, almacenamiento local de datos y nuevos efectos y posibilidades de diseño a través de CSS3. También presenta un ejemplo básico de la estructura de una página web en HTML5 utilizando nuevas etiquetas como <header>, <section>, <article>, <aside> y <footer>.

Cargado por

Gladys JimMorxy
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
111 vistas

HTML5

El documento describe las principales características de HTML5, incluyendo la simplificación del código, reproducción nativa de audio y video, animaciones sin necesidad de plugins, almacenamiento local de datos y nuevos efectos y posibilidades de diseño a través de CSS3. También presenta un ejemplo básico de la estructura de una página web en HTML5 utilizando nuevas etiquetas como <header>, <section>, <article>, <aside> y <footer>.

Cargado por

Gladys JimMorxy
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 9

INSTITUTO TECNOLGICO SUPERIOR DE LA SIERRA NEGRA DE AJALPAN.

MATERIA: TECNOLOGAS DE LA INFORMACIN.

MAESTRO: ING. MARCO ANTONIO ISIDRO ABRIL.

ALUMNO (A): GLADIS JIMENEZ MORALES.

CARRERA: INGENIERIA EN ADMINISTRACIN.

SEMESTRE: 1GRUPO: A

AJALPAN PUEBLA A; 13 DE NOVIEMBRE DEL 2012.

QU ES HTML5?
HTML5 es una nueva versin de este lenguaje universal y, si bien an est en fase de desarrollo, ya podemos disfrutarlo en la mayora de los navegadores. Google Chrome es pionero en soporte HTML5 y es, actualmente, el navegador que brinda mayor soporte a esta versin de HTML. HTML5 (Hipertexto 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). Qu nos ofrece HTML5? Si bien representar una gran cantidad de mejoras, respecto a su versin anterior, stas son las ms importantes:

Simplificacin: El nuevo cdigo ofrece nuevas formas, ms sencillas, de especificar algunos parmetros y piezas de cdigo. Contenido multimedia: Reproduccin de audio y video sin necesidad de plug-ins Animaciones: Posibilidad de mostrar contenidos de manera similar a Adobe Flash, pero prescindiendo de este componente. HTML5 tendr soporte nativo para una tecnologa similar a Flash. Almacenamiento de datos del lado del cliente: Una diferencia fundamental entre las aplicaciones de escritorio y web era la necesidad, de stas ltimas, de procesar la informacin y consultas en bases de datos siempre en un servidor, haciendo que las aplicaciones sean ms lentas y siempre requeridas de una conexin a Internet constante. HTML5 permitir almacenar y procesar informacin en el cliente, convirtiendo a una aplicacin web a una aplicacin mucho ms parecida a una de escritorio. Efectos y nueva versin de hojas de estilo CSS: La nueva versin de HTML acompaar a una nueva versin de las hojas de estilo CSS, el CSS3. Se trata de nuevas posibilidades de formato, como por ejemplo la implementacin de sombras, bordes redondeados, etc. Muchas de las cosas que, hasta ahora, solo podran lograrse insertndolas como imgenes, podrn realizarse con cdigo. Esto no

solo se traduce en una mejora de la velocidad y performance de un sitio, sino tambin en nuevas e ilimitadas opciones de diseo. Geo-locacin: Los sitios web podrn saber la ubicacin fsica de la persona que lo visita. Tipografas no estndar: Hasta ahora, quizs la mayor limitacin que enfrentbamos los diseadores era la imposibilidad de utilizar tipografas no-estndar en nuestros sitios web.

ESTRUCTURA BASICA DE UNA PAGINA HTML5 Este lenguaje tiende a hacerse mas simple y humano al escribir el cdigo. Empecemos con el idioma del sitio. <!DOCTYPE html> <html lang="es"> <head> Ahora toca el turno del titulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento HTML, de preferencia usemos el UTF-8 que acepta nuestros acentos y con mas compatibilidad. En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido aXHTML, la cuestin es resumir el cdigo. <title>Titulo de la web</title> <meta charset="utf-8" /> Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepcin de el feed que sigue casi igual, solo que ahora usaremos algo que ya exista, atributo REL que usamos en los links para cuestiones de SEO. REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED. el DOCTYPE, es muy sencillo de escribir y ha sido recortado, despus la etiqueta HTML la cual tiene el atributo LANG para el

<link rel="stylesheet" href="estilos.css" /> href="/favicon.ico" /> <link type="application/rss+xml" href="/feed.rss" />

<link rel="shortcut icon" title="Pozolera RSS"

rel="alternate"

Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo til para lo mismo, pero a continuacin empieza algo interesante que son las etiquetas de la estructura de el sitio visual. La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripcin de la pagina web, ejemplo. Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER. <body> <header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p> </header> Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV conID=header, pero ahora tenemos una etiqueta especial para ello. Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas Pdentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones deseo que es muy recomendable tambin, ejemplo. <seccin> <article> <h2>Titilo de contenido<h2> <p> Contenido (adems de imgenes, citas, videos etc.) </p> </article> </seccin> SECTION es el equivalente a un DIV con ID=contenido y ARTICLE a un DIV conID=post o articulo Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy fcil de implementar con H3 de titulo y P de contenido dentro de ella. <aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> ASIDE es nuestro equivalente a un DIV con ID=sidebar o barra Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo.

<footer> </span> <p style="padding-left: 30px;"><span style="color: #333399;"> Creado Gladys </span></p> <span style="color: #333399;"></footer> FOOTER es nuestro equivalente a un DIV con ID=footer o pie Ahora veamos nuestro cdigo completo: <! DOCTYPE HTML> <HTML lang="es"> <head> <title>Titulo de la web</title> <meta charset="utf-8" /> <link rel="stylesheet" href="estilos.css" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="alternate" title="Pozolera RSS" href="/feed.rss" /> </head>

type="application/rss+xml"

<body> <header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p> </header> <section> <article> <h2>Titilo de contenido<h2> <p> Contenido (adems de imgenes, citas, videos etc.) </p> </article> </section> <aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> <footer> Creado por Gladys </footer> </body> </HTML>

DIFERENCIAS ENTRE HTML5 Y HTML4/XHTML Notas: En amarillo aquellas etiquetas introducidas en esta nueva versin, en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta versin. Si bien en la prctica los navegadores no lo estn teniendo en cuenta para evitar perder cuota de mercado.

Etiqueta

Atributos

<!-- --> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <rea> <article> <aside> <audio> <b> <base> <base Font> <bb> <bdo> <big> <blockquote> <body> <br> <button> <canvas>

Estndar o ninguno Estndar o ninguno href | target | rel | hreflang | media | type Estndar o ninguno Estndar o ninguno Estndar o ninguno Atributos globales Atributos globales autobuffer | autoplay | controls | loop | src Atributos globales Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno height | width

<caption> <center> <cite> <code> <col> <colgroup> <command> <datagrid> <datalist> <dd> <del> <details> <dialog> <dir> <div> <dfn> <dl> <dt> <em> <embed> <fieldset> <figure> <font> <footer> <form> <frame> <frameset> <h1> ... <h6> <head> <header> <hgroup> <hr> <html> <i>

Estndar o ninguno Atributos globales Estndar o ninguno 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 Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno height | src | type | width Estndar o ninguno Atributos globales Atributos globales Estndar o ninguno

Estndar o ninguno Estndar o ninguno Atributos globales Atributos globales Ninguno Estndar o ninguno Ninguno

<iframe> <img>

Estndar o ninguno Estndar o ninguno accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | height | list | max | maxlength | min | multiple | name | pattern1 placeholder | readonly | required | size | src | step | type | value | width Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Atributos globales Estndar o ninguno Estndar o ninguno Estndar o ninguno high | low | max | min | optimum | value Atributos globales Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno Estndar o ninguno form Estndar o ninguno Estndar o ninguno Estndar o ninguno max | value cite Atributos globales Atributos globales

<input>

<ins> <isindex> <kbd> <label> <legend> <li> <link> <mark> <map> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <ruby> <rp> <rt>

<s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <tt> <u> <ul> <var> <video> <xmp> Define texto que debe tener un estilo diferente del texto normal 3 Estndar o ninguno Estndar o ninguno src | poster | autobuffer | autoplay | loop | controls | width | height 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 Estndar o ninguno Estndar o ninguno Estndar o ninguno cite Estndar o ninguno Atributos globales media | src | type Estndar o ninguno

También podría gustarte