TECNOLGICO NACIONAL DE MXICO

Instituto Tecnolgico del Valle de Oaxaca

Seguridad Web.

Unidad 2

INVESTIGACIN

ELEMENTOS DE HTML5

Ruiz Castellanos Alex Jonathan.

INGENIERIA INFORMTICA

PROFESOR:

AMBROSIO CARDOSO JIMNEZ

Ex Hacienda de Nazareno, Xoxocotln, Oaxaca.

Octubre de 2017
INTRODUCCIN ........................................................................................................................................... 1

HTML5 ......................................................................................................................................................... 2

CARACTERSTICAS DE HTML5 ............................................................................................................................... 2

NOVEDADES DE ESTA VERSIN ............................................................................................................................... 2
ESTRUCTURA BSICA DE HTML5 ........................................................................................................................... 3
Ejemplo de estructura bsica de HTML5 ............................................................................................... 3
LISTA DE ELEMENTOS DE HTML5 .......................................................................................................................... 5

ELEMENTO RAZ ........................................................................................................................................... 5

METADATOS DEL DOCUMENTO ................................................................................................................... 5

SCRIPTING.................................................................................................................................................... 5

SECCIONES ................................................................................................................................................... 6

AGRUPACIN DE CONTENIDO ..................................................................................................................... 6

SEMNTICA A NIVEL DE TEXTO .................................................................................................................... 7

EDICIONES ................................................................................................................................................... 8

CONTENIDO INCRUSTADO ........................................................................................................................... 8

DATOS TABULARES ...................................................................................................................................... 9

FORMULARIOS ............................................................................................................................................. 9

ELEMENTOS INTERACTIVOS ....................................................................................................................... 10

CONCLUSIN ............................................................................................................................................. 11

BIBLIOGRAFA ............................................................................................................................................ 12
 Introduccin

Es importante definir que es HTML5 para que una vez definido podamos conocer
los elementos que lo componen, HTML5 Se trata de una nueva versin de HTML,
con nuevos elementos, atributos y comportamientos. (Mozilla, 2017), esta versin
contiene un conjunto ms amplio de tecnologas que permite a los sitios Web y a
las aplicaciones ser ms diversas y de gran alcance, porque debemos tener en
cuenta que da a da surgen nuevas tendencias en el diseo de pginas web,
algunas tendencias se mantienen y es en dnde este sistema de etiquetas se va
actualizando y mejorando todo con el fin de proporcionarle a sus usuarios las
herramientas necesarias para en todas sus funciones con el fin de ofrecerle a todos
sus usuario las herramientas necesarias para crear con ms facilidad estas pginas,
ahora es importante conocer cules son los elementos que conformar este sistema
de etiquetas, por lo que considerando la informacin de (Mozilla, 2017) vamos a
clasificar los diferentes elementos de HTML5 en bloques de acuerdo a su funcin,
as que bien empecemos.
 HTML5
Algunos aspectos importantes de HTML5 (HyperText Markup Language) es que
est versin define los nuevos estndares de desarrollo web, esta rediseado el
cdigo para resolver problemas y actualizndolo as a las nuevas necesidades.
(Garro, 2014) y lo ms importante es que no se limita solo a crear nuevas etiquetas
o atributos, sino que incorpora muchas caractersticas nuevas y proporciona una
plataforma de desarrollo de complejas aplicaciones web por lo que esta versin est
desarrollada para sustituir a HTML4, XHTML 1 y DOM Nivel 2.

La mayora de las pginas actuales estn orientadas a tener mayor interaccin con
sus usuarios por lo que esta versin nos permite tener mayor interaccin entre
nuestras pginas web y el contenido multimedia.

Caractersticas de HTML5
Las caractersticas de esta versin son:
o Etiquetas semnticas para estructurar los documentos HTML
o Elementos multimedia como <audio> y <video>.
o Integracin de grficos vectoriales escalables (SVG) en sustitucin de los
genricos <object>, y un nuevo elemento <canvas> que nos permite dibujar
en l.
o El cambio, redefinicin o estandarizacin de algunos elementos, como <a>,
<cite> o <menu>.
o MathML para frmulas matemticas.
o Almacenamiento local en el lado del cliente.
o Nuevos APIs.
Novedades de esta versin
1. El elemento "lienzo" o "Canvas".
Permitir el renderizado de imgenes y grficos sin ningn proceso
intermedio por lo que las posibilidades tanto de diseo como de interactividad
de los usuarios con la pgina que los usuarios visitan es mejor.

2. Cach para aplicaciones.

Aplicaciones web enteras pueden ser guardadas y utilizadas de forma local
cuando no hay una conexin a Internet, al igual que su informacin que haya
sido guardada o generada a travs de dichas aplicaciones.

3. Localizacin geogrfica.
Puede determinar con un alto grado de precisin la ubicacin geogrfica del
usuario.

4. "Operarios Web".
Habilitan la posibilidad de realizar procesamiento paralelo en segundo plano,
mientras que la pgina web mantiene su rendimiento intacto. Las pginas
 web siempre han demostrado cierta tendencia lineal a la hora de cargarse,
pero con HTML 5.

5. El elemento "Video".
Es la forma definitiva de ir en contra de todos los paradigmas pues ahora se
pueden reproducir vdeos en Internet y embeberlos en pginas sin la
necesidad de un plugin.
Estructura bsica de HTML5
HTML5 trajo nuevas etiquetas de maquetacin con las cuales se identifica de una
mejor manera cada elemento por lo que ya no es necesario utilizar tantas cajas de
contendi div por que ya existen etiquetas para cada elemento. (Sanchez, 2016),
en la siguiente imagen podemos ver a grandes rasgos la estructura de HTML5.

Figura 1. Estructura bsica de HTML5.

HTML5 aade algunas nuevas secciones, como <nav>, <artculo>, <encabezado>,

y <pie de pgina>.

La etiqueta <head> normalmente contiene informacin que ser utilizada por el

<body> HTML <etiquetas para crear la pgina HTML. Es una convencin estndar
para poner las funciones de JavaScript, en el <head>, puede haber razones para
poner algn JavaScript en el <body>. Se dar un ejemplo segn (arkaitzgarro, 2017)

Ejemplo de estructura bsica de HTML5

<!DOCTYPE html>
<html>
<body>
<header>
<a href="/"><img src=logo.png alt="home"></a>
<hgroup>
<h1>Title</h1>
<h2 class="tagline">
A lot of effort went into making this effortless.
</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
<section class="articles">
<article>
<time datetime="2009-10-22">October 22, 2009</time>
<h2>
<a href="#" title="link to this post">Travel day</a>
</h2>
<div class="content">
Content goes here...
</div>
<section class="comments">
<p><a href="#">3 comments</a></p>
</section>
</article>
</section>
<aside>
<div class="related"></div>
<div class="related"></div>
<div class="related"></div>
</aside>
<footer>
<p>&#167;</p>
<p>&#169; 2013&#8211;9 <a href="#">Arkaitz Garro</a></p>
</footer>
</body>
</html>
 Lista de elementos de HTML5
Estos elementos estn agrupados por funciones especficas segn (HTML5, 2017),
todos estn descritos por su etiqueta de apertura y agrupados por su funcin.

El smbolo indica que el elemento fue aadido en HTML5.

Elemento raz
Elemento Descripcin
<!doctype html> Define que el documento est bajo el estndar de HTML 5

Elemento Descripcin
<html> Representa la raz de un documento HTML o XHTML. Todos los dems
elementos deben ser descendientes de este elemento.

Metadatos del documento

Elemento Descripcin
<head> Representa una coleccin de metadatos acerca del documento, incluyendo
enlaces a, o definiciones de, scripts y hojas de estilo.
<title> Define el ttulo del documento, el cual se muestra en la barra de ttulo del
navegador o en las pestaas de pgina. Solamente puede contener texto y
cualquier otra etiqueta contenida no ser interpretada.
<base> Define la URL base para las URLs relativas en la pgina.
<link> Usada para enlazar JavaScript y CSS externos con el documento HTML
actual.
<meta> Define los metadatos que no pueden ser definidos usando otro elemento
HTML.
<style> Etiqueta de estilo usada para escribir CSS en lnea.

Scripting

Elemento Descripcin
<script> Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programacin es JavaScript
<noscript> Define un contenido alternativo a mostrar cuando el navegador no soporta
scripting.
 Secciones

Elemento Descripcin
<body> Representa el contenido principal de un documento
HTML. Solo hay un elemento <body> en un documento.

Define una seccin en un documento.

<section>
Define una seccin que solamente contiene enlaces de
<nav> navegacin
Define contenido autnomo que podra existir
<article> independientemente del resto del contenido.

Define algunos contenidos vagamente relacionados con

<aside> el resto del contenido de la pgina. Si es removido, el
contenido restante seguir teniendo sentido

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elementos de cabecera implementan seis niveles de

cabeceras de documentos; <h1> es la de mayor
y <h6> es la de menor impotancia. Un elemento de
cabecera describe brevemente el tema de la seccin
que introduce.

Define la cabecera de una pgina o seccin.

<header> Usualmente contiene un logotipo, el ttulo del sitio Web
y una tabla de navegacin de contenidos.

Define el pie de una pgina o seccin. Usualmente

<footer> contiene un mensaje de derechos de autora, algunos
enlaces a informacin legal o direcciones para dar
informacin de retroalimentacin.

<address> Define una seccin que contiene informacin de

contacto.
Define el contenido principal o importante en el
<main> documento. Solamente existe un elemento <main> en el
documento.

Agrupacin de Contenido

Elemento Descripcin
<p> Define una parte que debe mostrarse como un prrafo.
<hr> Representa un quiebre temtico entre prrafos de una seccin o articulo
o cualquier contenido.
<pre> Indica que su contenido esta preformateado y que este formato debe ser
preservado.
<blockquote> Representa un contenido citado desde otra fuente.
<ol> Define una lista ordenada de artculos.
<ul> Define una lista de artculos sin orden.
<li> Define un artculo de una lista ennumerada.
<dl> Define una lista de definiciones, es decir, una lista de trminos y sus
definiciones asociadas.
<dt> Representa un trmino definido por el siguiente <dd>.
<dd> Representa la definicin de los terminos listados antes que l.
Representa una figura ilustrada como parte del documento.
<figure>
Representa la leyenda de una figura.
<figcaption>
<div> Representa un contenedor genrico sin ningn significado especial.

Semntica a nivel de Texto

Elemento Descripcin
<a> Representa un hiperenlace, enlazando a otro recurso.
<em> Representa un texto enfatizado, como un acento de intensidad.
<strong> Representa un texto especialmente importante.
<small> Representa un comentario aparte, es decir, textos como un descargo de
responsabilidad o una nota de derechos de autora, que no son esenciales
para la comprensin del documento.
<s> Representa contenido que ya no es exacto o relevante .
<cite> Representa el ttulo de una obra.
<q> Representa una cita textual inline.
<dfn> Representa un trmino cuya definicin est contenida en su contenido
ancestro ms prximo.
<abbr> Representa una abreviacin o un acrnimo; la expansin de la abreviatura
puede ser representada por el atributo title.
Asocia un equivalente legible por mquina a sus contenidos. (Este elemento
<data> est solamente en la versin de la WHATWG del estndar HTML, y no en la
versin de la W3C de HTML5).
Representa un valor de fecha y hora; el equivalente legible por mquina
<time> puede ser representado en el atributo datetime.
<code> Representa un cdigo de ordenador.
<var> Representa a una variable, es decir, una expresin matemtica o contexto de
programacin, un identificador que represente a una constante, un smbolo
que identifica una cantidad fsica, un parmetro de una funcin o un marcador
de posicin en prosa.
<samp> Representa la salida de un programa o un ordenador.
<kbd> Representa la entrada de usuario, por lo general desde un teclado, pero no
necesariamente, este puede representar otras formas de entrada de usuario,
como comandos de voz transcritos.
<sub>,<sup> Representan un subndice y un superndice, respectivamente.
<i> Representa un texto en una voz o estado de nimo alterno, o por lo menos
de diferente calidad, como una designacin taxonmica, un trmino tcnico,
una frase idiomtica, un pensamiento o el nombre de un barco.
<b> Representa un texto hacia el cual se llama la atencin para propsitos
utilitaros. No confiere ninguna importancia adicional y no implica una voz
alterna.
<u> Representa una anotacin no textual sin-articular, como etiquetar un texto
como mal escrito o etiquetar un nombre propio en texto en Chino.
Representa texto resaltado con propsitos de referencia, es decir por su
<mark> relevancia en otro contexto.
Representa contenidos a ser marcados con anotaciones ruby, recorridos
<ruby> cortos de texto presentados junto al texto. Estos son utilizados con
regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones
actan como una gua para la pronunciacin, como el furigana Japons.
Representa el texto de una anotacin ruby .
<rt>
Representa los parntesis alrededor de una anotacin ruby, usada para
<rp> mostrar la anotacin de manera alterna por los navegadores que no soporten
despliegue estandar para las anotaciones.
Representa un texto que debe ser aislado de sus alrededores para el
<bdi> formateado bidireccional del texto. Permite incrustar un fragmento de texto
con una direccionalidad diferente o desconocida.
<bdo> Representa la direccionalidad de sus descendientes con el fin de anular de
forma explcita al algoritmo bidireccional Unicode.
<span> Representa texto sin un significado especfico. Este debe ser usado
cuando ningn otro elemento semntico le confiere un significado adecuado,
en cuyo caso, provendr de atributos globales como class, lang, o dir.
<br> Representa un salto de lnea.
Representa una oportunidad de salto de lnea, es decir, un punto sugerido de
<wbr> envoltura donde el texto de mltiples lneas puede ser dividido para mejorar
su legibilidad.

Ediciones

Elemento Descripcin
<ins> Define una adicin en el documento.
<del> Define una remocin del documento.

Contenido incrustado
Elemento Descripcin
<img> Representa una imagen.
<iframe> Representa un contexto anidado de navegacin, es decir, un documento
HTML embebido.
Representa un punto de integracin para una aplicacin o contenido
<embed> interactivo externo que por lo general no es HTML.
<object> Representa un recurso externo, que ser tratado como una imagen, un sub-
documento HTML o un recurso externo a ser procesado por un plugin.
<param> Define parmetros para el uso por los plugins invocados por los
elementos <object>.
Representa un video , y sus archivos de audio y capciones asociadas, con
<video> la interfaz necesaria para reproducirlos.
Representa un sonido o stream de audio.
<audio>
Permite a autores especificar recursos multimedia alternativos para los
<source> elementos multimedia como <video> o <audio>.
 Permite a autores especificar una pista de texto temporizado para
<track> elementos multimedia como <video> o <audio>.
Representa un rea de mapa de bits en el que se pueden utilizar scripts para
<canvas> renderizar grficos como grficas, grficas de juegos o cualquier imagen
visual al vuelo.
<map> En conjunto con <area>, define un mapa de imagen.
<area> En conjunto con <map>, define un mapa de imagen.
Define una imagen vectorial embebida.
<svg>
Define una frmula matemtica.
<math>

Datos tabulares
Elemento Descripcin
<table> Representa datos con ms de una dimensin.
<caption> Representa el ttulo de una tabla.
<colgroup> Representa un conjunto de una o ms columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen los datos contretos de una tabla.
<thead> Representa el bloque de filas que describen las etiquetas de columna de una
tabla.
<tfoot> Representa los bloques de filas que describen los resmenes de columna de
una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th> Representa una celda encabezado en una tabla.

Formularios
Elemento Descripcin
<form> Representa un formulario, consistiendo de controles que puede ser
enviado a un servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el ttulo de un <fieldset>.
<label> Representa el ttulo de un control de formulario.
<input> Representa un campo de datos escrito que permite al usuario editar los
datos.
<button> Representa un botn .
<select> Representa un control que permite la seleccin entre un conjunto de
opciones.
Representa un conjunto de opciones predefinidas para otros controles.
<datalist>
<optgroup> Representa un conjunto de opciones, agrupadas lgicamente.
<option> Representa una opcin en un elemento <select>, o una sugerencia de un
elemento <datalist>.
<textarea> Representa un control de edicin de texto multi-lnea.
Representa un control de par generador de llaves.
<keygen>
Representa el resultado de un clculo.
<output>
 Representa el progreso de finalizacin de una tarea.
<progress>
Representa la medida escalar (o el valor fraccionario) dentro de un rango
<meter> conocido.

Elementos interactivos

Elemento Descripcin
Representa un widget desde el que un usuario puede obtener
<details> informacin o controles adicionales.
Representa un resumen, ttulo o leyenda para un
<summary> elemento <details> dado.
Representa un comando que un usuario puede invocar.
<command>
Representa una lista de comandos.
<menu>
 Conclusin

El HTML5 ha venido a transformar nuestra forma de disear las pginas web pues
ahora nos brinda mejores herramientas para hacer nuestro diseo ms atractivo
invirtiendo menos recursos, sus beneficios son interesantes porque con la
herramienta canvas podremos generar imgenes y grficos sin ningn proceso
intermedio, al igual trae consigo el beneficio de utilizar aplicaciones incluso sin
conexin, eso permite guardar y/o trabajar en el caso de los las actividades que se
realizan en lnea sin tener el temor de que se perdern todos los datos si se pierde
la conexin y tendrs que empezar de nuevo, tambin nos podemos dar cuenta que
Google siempre que se accede a su pgina oficial te pregunta si deseas compartir
tu ubicacin, en realidad esto no lo entenda ms ahora comprendo que es para
saber algunas cosas que pueden ser de tu inters para redirigirte y mostrarte esas
cosas y unas de las cosas ms interesante es que en esta versin se rompe con
todo paradigma pues ahora ya ser posible reproducir videos en internet sin la
necesidad de un plugin, el cual consuma recursos innecesarios y todo esto se hace
para beneficiar al usuario porque aquel que no est al da en cuanto a tecnologa lo
puede perder todo.
 Bibliografa

arkaitzgarro. (2017). Obtenido de https://www.arkaitzgarro.com/html5/capitulo-

2.html
Garro, A. (2014). HTML5. easybook v5.0-DEV.
HTML5. (2017). Obtenido de
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elemento
s
Mozilla. (2017). Obtenido de https://developer.mozilla.org/es/docs/HTML/HTML5
Sanchez, A. (1 de Julio de 2016). Obtenido de https://www.azulweb.net/tutorial-
html5-estructura-basica-en-html5/