Escolar Documentos
Profissional Documentos
Cultura Documentos
Todos los elementos del estndar HTML5 estn listados aqu, descritos por su etiqueta de
apertura y agrupados por su funcin. Contrariamente al ndice el cual lista todas las posibles
etiquetas, estndar, no-estndar, vlidas, obsoletas o aquellas en desuso, esta lista solamente
los elementos vlidos de HTML5. Solamente aquellos elementos listados aqu son los que
deberan ser usados en nuevos sitios Web.
Elemento raz
Elemento
Descripcin
<html>
Descripcin
<head>
<title>
<base>
<link>
<meta>
<style>
Scripting
Element
o
Descripcin
<script>
<noscript
>
Secciones
Elemento
Descripcin
<body>
<section> 5
<nav> 5
<article> 5
<aside> 5
<header> 5
<footer> 5
<address>
<main>5
Agrupacin de Contenido
Elemento
Descripcin
<p>
<hr>
<pre>
<blockquote>
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
<figure> 5
<figcaption>
5
<div>
Descripcin
<a>
<em>
<strong>
<small>
<s>
<cite>
<q>
Element
o
Descripcin
<dfn>
<abbr>
<data> 5
<time> 5
<code>
<var>
<samp>
<kbd>
<sub>,<s
up>
<i>
<b>
<u>
<mark> 5
<ruby> 5
Element
o
Descripcin
Este, donde las anotaciones actan como una gua para la
pronunciacin, como el furigana Japons.
<rt> 5
<rp> 5
<bdi> 5
<bdo>
<span>
<br>
<wbr> 5
Ediciones
Elemento
Descripcin
<ins>
<del>
Contenido incrustado
Elemen
to
Descripcin
<img>
<iframe>
<object>
Elemen
to
Descripcin
imagen, un sub-documento HTML o un recurso externo a ser
procesado por un plugin.
<param>
<video>
5
<audio>
5
<source>
5
<track>
5
<canvas>
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 la interfaz necesaria para reproducirlos.
Representa un sonido o stream de audio.
Permite a autores o autoras especificar recursos multimedia
alternativos para los elementos multimedia como
<video> o <audio>.
Permite a autores o autoras especificar una pista de
texto temporizado para elementos multimedia
como <video> o <audio>.
Representa un rea de mapa de bits en el que se pueden utilizar
scripts para rende rizar grficos como grficas, grficas de juegos
o cualquier imagen visual al vuelo.
<map>
<area>
<svg> 5
<math>
Datos tabulares
Element
o
Descripcin
<table>
<caption>
<colgroup
>
<col>
<tbody>
<thead>
Element
o
Descripcin
columna de una tabla.
<tfoot>
<tr>
<td>
<th>
Formularios
Elemento
Descripcin
<form>
<fieldset>
<legend>
<label>
<input>
<button>
Representa un botn .
<select>
<optgroup>
<option>
<textarea>
<datalist>
<keygen>
5
<output> 5
<progress>
5
<meter> 5
Elemento
Descripcin
un rango conocido.
Elementos interactivos
Element
o
Descripcin
<summary
>5
<comman
d> 5
<menu> 5
<details>
Formatos de html5
Formatos de audio y video
Las etiquetas <audio> y <video> proporcionan apoyo para la reproduccin de audio y
video sin necesidad de plug-ins. Codecs de vdeo y codecs de audio se utilizan para
manejar vdeo y audio, y los diferentes codecs ofrecen diferentes niveles de compresin y
calidad. Un formato de contenedores utiliza para almacenar y transmitir el vdeo y el
audio codificado juntos. Muchos codecs y formatos de contenedor existe, e incluso hay ms
combinaciones de ellos. Para su uso en la web, slo un puado de combinaciones son
relevantes.
Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5,
principalmente debido a problemas de patentes. El rea de formatos de medios en la web ha
sufrido mucho por la ley de patentes en muchos pases, incluyendo EE.UU y la UE (La
memoria de las patentes en este artculo se proporciona tal cual y sin ningn tipo de garanta.)
Para hacer un vdeo de HTML5, que trabaja en las nuevas versiones de los principales
navegadores, puede usar el elemento <source> para reproducir en formatos WebM o el
formato AAC MPEG H.264, usando el elemento de origen de esta manera: El
El formato WebM, especficamente el cdec de vdeo VP8, habra sido acusado de infraccin
de derechos de patente por un grupo de empresas deresponder a una llamada por
la MPEG LA para la formacin de un consorcio de patentes, pero MPEG LA se ha
comprometido a licenciar las patentes de Google bajo "transferible y de licencia gratuita". Esto
significa, efectivamente, que todas las patentes conocidas en el formato WebMtienen
licencia para todo el mundo de forma gratuita.
Gecko reconoce los siguientes tipos MIME para los archivos WebM:
video/webm
Un archivo WebM que es capaz de reproducir video (y es posible audio tambin)
audio/webm
Un archivo Ogg con el contenido especificado. Utilizando uno de los otros dos
tipos MIME es preferido, pero se puede usar esta opcin si usted no sabe lo que el
contenido del fichero es.
ESTRUCTURA DE HTML 5
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ttulo de la web</title>
</head>
<body>
Contenido de la web
</body>
</html>
CSS3
6 nuevas funciones de CSS3 que ya pueden implementarse
Cada cierto tiempo van saliendo nuevas propiedades CSS3, todas ellas muy tiles y
sencillas, pero no todas son completamente soportadas por la mayora de los
navegadores.
Hoy nos vamos a centrar en una lista de novedades para CSS3 que s pueden ser usadas
hoy, debido a su gran compatibilidad con los navegadores:
1. TRANSPARENCIA
Ya sabas que existe la forma clsica de aplicar transparencias
.opacidad{
filter:alpha(opacity=50);/* para Internet Explorer */
-moz-opacity:0.5;
/* para Firefox, Netscape, Mozilla */
-khtml-opacity:0.5; /* para Khtml, version anterior de Safari */
opacity:0.5;
/* para Opera, Safari, Google Chrome */
}
Ahora, con CSS3 todo esto es ms sencillo y estandar, y se puede especificar un doble
background para aplicar transparencia a una caja de texto. Uno nos servir para definir el
color. El otro, para aplicar la transparencia, aadiendo un nuevo valor, que puede estar
entre el 0 (transparente) y 1 (opaco).
rgba(0-255,0-255,0-255,0-1)
Para distintos navegadores, se puede incluir un simple RGB o color hex en la
transparencia:
.estilo {
color: rgb(235,235,235);
color: <strong>rgba</strong>(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: <strong>rgba</strong>(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: <strong>rgba</strong>(255,255,255,0.65);
}
(Este hack es vlido para Safari 4, Firefox 3.0.5 en adelante y Chrome 1)
2. BORDES REDONDEADOS
Muy simple, utilizando la sintaxis compatible entre varios navegadores.
.redondeado {
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
Y el HTML podra ser el siguiente
<div class="redondeado">
<a title="borde" href="#">borde</a> redondeado
</div>
3. TEXTO SOMBREADO
La propiedad text-shadow permite crear sombra sobre el texto, pudiendo variar las
posiciones de esta y el color de la sombra. Es muy til para encabezados y ttulos que
deseen resaltarse, pero no se debe abusar de ella porque puede saturar la vista del
usuario y crear una mala esttica.
Solo navegadores basados en Webkit, como Safari, Firefox 3.5+, Konqueror u Opera
pueden interpretar la propiedad text-shadow. Los otros navegadores no la soportan.
Ejemplo:
h1.test {
text-shadow: #6374AB 20px -12px 2px;
}
Los parmetros que se le dan son:
El color (#6374AB), la coordenada X de la sombra relativa al texto (20 pixeles), la
coordenada Y de la sombra relativa al texto (-12 pixeles), y la dispersin u opacidad que
tendr la sombra (2 pixeles). Si aumentamos mucho el ltimo valor, la sombra ser
ilegible.
4. SOMBREADO EN CAJAS DE TEXTO
Aadir sombra una caja de texto sigue el mismo formato que vimos en el punto anterior,
para agregar sombra en el texto. Para esto se utiliza la propiedad Box-shadow, que es
compatible con Safari 4, Firefox 3 y Chrome. Ejemplo:
.bordecaja {
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);
}
Se puede aadir mltiples sombras incluyendo mltiples valores separados por espacios:
.bordecaja {
-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px
20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px
20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 15px -20px 20px
rgba(255,0,0,.75);
}
Con esto ya tendremos nuestra propia sombra en la caja de texto, sin usar ningn tipo de
imgenes.
5. MULTIPLES FONDOS
Con CSS2 solo podamos tener una imagen de fondo por cada elemento. Pero ahora con
CSS3 podemos aplicar varias imgenes de fondo en un mismo elemento. Para ello
debemos aplicar este cdigo:
.variosfondos {
background: url(fondo1.gif) top left no-repeat,
url(fondo2.jpg) top 11px no-repeat,
url(fondo3.gif) bottom left no-repeat,
url(fondo4.gif) left repeat-y;
}
Es una nica propiedad background pero con una direccin por cada fondo, cada una
separada por una coma. Por ahora los nicos navegadores que pueden implementar esta
tcnica son WebKit (Safari) y KHTML (Konqueror). Pronto estar soportada por la
mayora de navegadores.
6. ROTAR TEXTOS
Es posible ahora rotar textos en cualquier ngulo. La clave de estas rotaciones se
encuentran en CSS Transformations, y tanto Firefox como Safari soportan esta ventaja:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
Para realizar esta transformacin, el elemento debe tener seteada la propiedad display:
block;. Hay que aadir esta declaracin al SPAN que queramos rotar. ATENCION:
Internet Explorer no es compatible con este hack, por lo que deberemos hacer uso de los
filtros. Se inserta en el cdigo CSS igualmente:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Pero en el cdigo para Internet Explorer, se inserta un valor del 0 al 3, en vez de grados:
0:
1:
2:
3:
no rotar.
rotar 90 grados
rotar 180 grados
rotar 270 grados (-90 grados).
Terminamos con un ejemplo para mostrar la fecha rotada a 90, interesante para utilizar
en blogs:
.example-date {
background-color:#123;
border:1px solid #345;
padding:45px 5px 0;
position:relative; width:60px;
}
.example-date .example-day {
font-size:45px;
left:5px;
line-height:45px;
position:absolute; top:0;
}
.example-date .example-month {
font-size:25px;
text-transform:uppercase;
}
.example-date .example-year {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: block;
position: absolute;
right: -5px;top: 15px;
}
Y en el HTML usaremos el siguiente:
<div>
<span>31</span>
<span>July</span>
<span>2009</span>
</div>
Sin duda, son una serie de funciones nuevas que te permitirn sacar mximo provecho a
tus diseos sin que debas usar imgenes para lograrlo, creando as sitios web mucho
ms livianos y veloce
SASS
Al margen de las funciones propias definidas por Sass, tambin es posible definir
funciones propias para que puedas utilizarlas en tus hojas de estilos. Ejemplo:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
Al igual que sucede con los mixins, las funciones pueden acceder a cualquier
variable global y tambin pueden aceptar argumentos. El contenido de una funcin
puede estar formado por varias lneas, pero siempre debe acabar con una
directiva de tipo @return para devolver el resultado de su ejecucin.
Las funciones propias tambin admiten el uso de argumentos con nombre. De
hecho, la funcin del ejemplo anterior tambin se puede utilizar de la siguiente
manera:
#sidebar { width: grid-width($n: 5); }
El formato: nested
Este es el estilo por defecto de Sass, que indenta y anida todos los selectores y
estilos para reflejar fielmente la estructura del archivo Sass original. Cada
propiedad se muestra en su propia lnea y cada regla se indenta tanto como sea
necesario en funcin de su anidamiento. Ejemplo:
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
El estilo nested es muy til cuando se generan hojas de estilos CSS muy
complejas, ya que de un vistazo puedes entender toda su estructura.
El formato :expanded
Este estilo es ms parecido al que utilizara un diseador/a al crear
manualmente la hoja de estilos CSS. Cada propiedad y cada regla se muestran
en una nueva lnea, pero las reglas no se indentan de ninguna manera
especial. Ejemplo:
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
El formato :compact
Este estilo ocupa menos lneas que los estilos nested o expanded y prioriza los
selectores por encima de las propiedades. De hecho, cada regla CSS solamente
ocupa una lnea, donde se definen todas las propiedades. Las reglas anidadas
se muestran seguidas unas de otras (sin ningn salto de lnea) y solamente se
aade una lnea en blanco para separar los grupos de reglas CSS. Ejemplo:
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
El formato :compressed
Este estilo es el ms conciso de todos porque no aade ningn espacio en
blanco, salvo el que sea estrictamente necesario para separar los selectores. El
nico salto de lnea que se aade es el del final del archivo. Este formato
tambin realiza otras optimizaciones y compresiones en valores como los
colores. Aunque no est pensado como formato para que lo lean los humanos,
puede ser muy til para comprimir al mximo las hojas de estilos CSS antes de
servirlas a los usuarios. Ejemplo:
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{fontsize:10em;font-weight:bold;text-decoration:underline}
FOUNDATION