HTML vs HTML5
Etiqueta:
Se expone en esta tabla con todos los elementos de HTML y HTML5, se descritos por su etiqueta de apertura y agrupados por su función.
|
Elemento
|
Descripción
|
Ejemplo
|
|
<html>
|
Representa la raíz de un documento HTML o XHTML.
Todos los demás elementos deben ser descendientes de este elemento.
|
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
|
|
<head>
|
Representa una colección de metadatos acerca del
documento, incluyendo enlaces a, o definiciones de, scripts y hojas de
estilo.
|
<head>
<title> Mi tutilo</title>
</head>
|
|
<title>
|
Define el título del documento, el cual se
muestra en la barra de título del navegador o en las pestañas de página.
Solamente puede contener texto y cualquier otra etiqueta contenida no será
interpretada.
|
<head>
<title>Ejemplo
del elemto título</title>
</head>
|
|
<base>
|
Define la URL base para las URLs relativas en la
página.
|
<head>
<base href='http://www.mozilla-europe.org/es/'>
</head>
|
|
<link>
|
Usada para enlazar JavaScript y CSS externos con
el documento HTML actual.
|
<head>
<link rel="stylesheet" href="/estilo/archivo.css"
type="text/css" media="screen">
</head>
|
|
<meta>
|
Define los metadatos que no pueden ser definidos
usando otro elemento HTML.
|
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
|
|
<style>
|
Etiqueta de estilo usada para escribir CSS en
línea.
|
<style
type="text/css">
p { color: red; }
</style>
|
|
<script>
|
Define ya sea un script interno o un enlace hacia
un script externo. El lenguaje de programación es JavaScript
|
<script
type="text/javascript">
document.write("Bienvenido a Virtualnauta.com") </script> |
|
<body>
|
Representa el contenido principal de un documento
HTML. Solo hay un elemento <body> en un documento.
|
<body>
<p>Aquí el contenido del documento</p>
</body>
|
|
<section>
Html5
|
Define una sección en un documento.
|
<section>
<article>
<p> Ejemplo de texto1
</p>
</article>
</section>
|
|
<nav>
Html5
|
Define una sección que solamente contiene enlaces
de navegación
|
<nav>
<ul>
<li><a
href="DireccionPagina"> Item de Navegación 1 </li>
</ul>
</nav>
|
|
<article>
Html5
|
Define contenido autónomo que podría existir
independientemente del resto del contenido.
|
<article>
<h1>La etiqueta Article</h1> <p>La etiqueta <b>article</b> suele usarse para fragmentos independientes de contenido</p> </article> |
|
<aside>
Html5
|
Define algunos contenidos vagamente relacionados
con el resto del contenido de la página. Si es removido, el contenido
restante seguirá teniendo sentido
|
<aside>
<h1>Publicidad<h1> (( código de la publicidad )) </aside> |
|
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
|
Los elemento 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 sección que introduce.
|
<h1>Heading
level 1</h1>
<h2>Heading
level 2</h2>
<h3>Heading
level 3</h3>
<h4>Heading
level 4</h4>
<h5>Heading
level 5</h5>
<h6>Heading
level 6</h6>
|
|
<header>
Html5
|
Define la cabecera de una página o sección.
Usualmente contiene un logotipo, el título del sitio Web y una tabla de
navegación de contenidos.
|
<header>
<h1>Blog: HTML5 Paso a paso</h1> <p>Mi nombre es Sergio Raposo Vargas</p> </header> |
|
<footer>
Html5
|
Define el pie de una página o sección. Usualmente
contiene un mensaje de derechos de autoría, algunos enlaces a información
legal o direcciones para dar información de retroalimentación.
|
<footer>Este documento fue escrito en 2011.
</footer>
|
|
<main>
Html5
|
Define el contenido principal o importante en el
documento. Solamente existe un elemento <main> en el
documento.
|
<main>
<h1>Apples</h1>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</article>
</main>
|
|
<p>
|
Define una parte que debe mostrarse como un
párrafo.
|
<p>
Esto
es un
párrafo
</p>
|
|
<hr>
|
Representa un quiebre temático entre parrafos de
una sección o articulo o cualquier contenido.
|
<p>Este es un parrafo unicamente visual
para ver el uso de
la
etiqueta hr</p>
<hr/>
<p>Este es el segundo parrafo,
separado del primero por una
linea horizontal.</p>
|
|
<pre>
|
Indica que su contenido esta preformateado y que
este formato debe ser preservado.
|
<pre>
body{
color: red;
}
a
{
color:green;
}
</pre>
|
|
<ol>
|
Define una lista ordenada de artículos.
|
<ol>
<li>punto
uno</li>
<li>punto
dos</li>
<li>punto
tres</li>
</ol>
|
|
<ul>
|
Define una lista de artículos sin orden.
|
<ul>
<li>Esto</li>
<li>Lo
otro</li>
<li>Lo
de más allá</li>
</ul>
|
|
<li>
|
Define un artículo de una lista ennumerada.
|
<ul>
<li>punto
uno</li>
<li>punto
dos</li>
<li>punto
tres</li>
</ul>
|
|
<dl>
|
Define una lista de definiciones, es decir, una
lista de términos y sus definiciones asociadas.
|
<dl>
<dt>dl</dt>
<dd>Crea la caja que
contiene los items de la lista.</dd>
<dt>dt</dt>
</dl>
|
|
<figure>
Html5
|
Representa una figura ilustrada como parte
del documento.
|
<figure>
<img
src="archivo-de-imagen.jpg" alt="texto para ayudas
visuales">
</figure>
|
|
<div>
|
Representa un contenedor genérico sin ningún
significado especial.
|
<div style="color: blue;">
<h2>
Ejemplo de div y span </h2>
<p>
Esto es un párrafo dentro de
un div,
</p>
</div>
|
|
<a>
|
Representa un hiperenlace ,
enlazando a otro recurso.
|
<a
href="http://www.mozilla.com/">
Vínculo externo
</a>
|
Cuál es la diferencia entre HTML y HTML5?
HTML es base de todo desarrollo WEB. Toda página que consultemos en Internet seguro tendrá etiquetas HTML, hasta aquellas donde su contenido está en flash, pues para cargar flash fue necesario utilizar una etiqueta HTML.
HTML5 es solamente un conjunto de nuevas etiquetas que facilitan tareas de las cuales en HTML (4) se podía tornar medio pesado o tedioso, en sí no hay diferencia, sino que HTML5 es un agregado de innovaciones para HTML.
Ventajas son:
· Permite desarrollar aplicaciones que se adaptan fácilmente a distintas resoluciones, tamaños de pantallas, relaciones de aspecto y orientaciones.
· Permite potenciar las funcionalidades avanzadas, tales como el GPS, la cámara y el acelerómetro, en dispositivos modernos y brindar una experiencia de usuario adaptada al contexto en una amplia variedad de dispositivos, incluidos los smartphones y las tabletas electrónicas.
· Las aplicaciones se pueden implementar como aplicaciones web locales y también se pueden ver en los navegadores.
· Las aplicaciones móviles pueden usar los mismos canales de monetización y distribución que las aplicaciones nativas.
Desventajas son:
· A veces, lleva tiempo tener listas las aplicaciones móviles debido a que los desarrolladores tienen que escribir código para cada plataforma.
· Los desarrolladores trabajan en lenguajes que no son nativos para las plataformas; por eso, la eficacia del código depende del motor de traducción. Sucede a menudo que las técnicas de codificación son ineficientes o que el código es redundante.
· La diferencia de tiempos de ejecución de las plataformas a menudo causa complicaciones en el desarrollo de aplicaciones móviles multiplataforma.
Preguntas?
1-¿Qué es html5?
RTA/=Es solamente un conjunto de nuevas etiquetas que facilitan tareas de las cuales en HTML. Mirando a un progreso en el futuro de la web.
2-Ventajas de utilizar html5
RTA/=Permite desarrollar aplicaciones que se adaptan fácilmente a distintas resoluciones, tamaños de pantallas.
Las aplicaciones se pueden implementar como aplicaciones web locales y también se pueden ver en los navegadores.
Tiene varios elementos más que html, que facilitan el desarrollo de aplicaciones.
3-Que etiquetas de html se siguen utilizando en html5?
RTA/=
· <html>
· <head>
· <title>
· <body>
· <div>
· <p>
· <ul>
4-Para que se utiliza la etiqueta <style>?
RTA/= Es una etiqueta de estilo usada para escribir CSS en línea.
<style type="text/css">
p { color: red; }
</style>
5- ¿Por qué usar el lenguaje HTML5 en las páginas web?
RTA/= Porque al ser más sencillo y simplificado, cargan más rápido las páginas en el navegador.
INFOGRAFIA
No hay comentarios:
Publicar un comentario