HTML 5

Vídeo

2011-10-28T06:01:00.000-07:00

Para incorporar un vídeo debemos poner dos alternativas de formato. El mp4 y el ogv.
El código quedaría así:
<video controls="controls" height="366" width="650">
<source src="http://_larutadelarchivo_.mp4" type="video/mp4"></source>
<source src="http://_larutadelarchivo_.ogv" type="video/ogg"></source>
</video>
Cambiando los valores en rojo por lo que corresponda.

Audio

2011-10-26T09:57:00.000-07:00

Tenemos que proporcionar dos alternativas de formato: mp3 y ogg.
El código a colocar es éste:

Modificando lo marcado en rojo por lo que corresponda.
Tema del ejemplo: "Consejos para ciudadanos pacifistas" de Luis García Montero interpretado por Lorena.

Alternativa para navegadores que no soportan HTML 5:

03.- CSS 1: centrar una imagen

2011-01-13T13:26:00.000-08:00

Muchos de los temas de formato ya no se pueden hacer con tas tradicionales etiquetas.
Es lo que ocurre, por ejemplo, con <center> para centrar un objeto, una imagen por ejemplo.
Estos temas tienen que resolverse con CSS.
Hay tres niveles de declaración para estos estilos:

La hoja de estilos externa
La declaración para todo el documento en la cabecera del mismo
El estilo en una etiqueta al lado del elemento, en el body. El menos recomendado

Estos tres niveles de concreción es lo que da nombre a estos estilos "en cascada".
Vamos a ver cómo hemos centrado la imagen del logo del W3C para crear el vínculo al W3C Validator.
La declaración se ha hecho en la cabecera del documento.
Ver el ejemplo concreto.

Éste es el código para declarar el estilo CSS. Se ha añadido border:none; para que la imagen no se marque con el borde azul que en principio tienen las imágenes que son vínculos.

<style type="text/css">
IMG.imgcenter{
      display: block;
      margin-left: auto;
      margin-right: auto;
      border:none;
      }
</style>

Luego, en la etiqueta de la imagen, hay que escribir el atributo que llama a este estilo: class="imgcenter".

<img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter">

Éste es el código completo de la página creada:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tipo de documento</title>
<style type="text/css">
IMG.imgcenter{
      display: block;
      margin-left: auto;
      margin-right: auto;
      border:none;
      } 
</style>
</head>
<body>
<p>Esto es un documento para mostrar cómo centrar una imagen.</p>
<p>Hacemos una declaración de estilo CSS en la cabecera del documento y le ponemos un nombre para referenciarlo luego desde el atributo "class" de la etiqueta de la imagen.</p>
<p>Pulsa sobre la imagen para comprobar que la página está correctamente escrita.</p>
<hr />
<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página">

<img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter">

</a>
</body>
</html>

02.- Declaración del juego de caracteres, del "charset"

2011-01-12T14:20:00.000-08:00

La declaración del charset es obligatoria en HTML 5.
Se hace con la etiqueta <meta>
El juego de caracteres más utilizado y que es adecuado a nuestro idioma es el UTF-8.
En la página anterior creábamos una página con el charset declarado.
Ahora lo hacemos sin el charset para comprobar que al intentar validar la página en el servicio del W3C nos da un mensaje de error.
Ver el ejemplo concreto.

Este es el código que hemos escrito en esta ocasión:

<!DOCTYPE html>
<html>
<head>
<title>Tipo de documento</title>
<style type="text/css">
IMG.imgcenter{
      display: block;
      margin-left: auto;
      margin-right: auto;
      border:none;
      } 
</style>
</head>
<body>
<p>Esto es un documento para mostrar que la declaración del juego de caracteres es obligatorio en HTML 5.</p>
<p>En este documento no lo hemos declarado.</p>
<p>Comprueba que al intentar validar la página aparece el mensaje de error.</p>
<p>Pulsa con el botón derecho del ratón para comprobar el código fuente.</p>
<hr />
<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página"><img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter"></a>
</body>
</html>

01.- Declaración del tipo de documento y alguna otra idea

2011-01-11T13:36:00.000-08:00

El documento HTML tiene que empezar con una declaración del DOCTYPE (tipo de documento).
Es una declaración absolutamente sencilla.
Nada que ver con las complejidades del XHTML que también tenía la declaración del tipo de documento como obligatorio (no así en HTML 4).
Veamos un ejemplo concreto.

Este es el código que he escrito:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tipo de documento</title>
<style type="text/css">
IMG.imgcenter{
      display: block;
      margin-left: auto;
      margin-right: auto;
      border:none;
      } 
</style>
</head>
<body>
<p>Esto es un documento para mostrar el DOCTYPE del HTML 5.</p>
<p>Pulsa con el botón derecho del ratón sobre cualquier parte de este documento para ver el código fuente.</p>
<p>Pulsa sobre la imagen para comprobar que la página está correctamente escrita.</p>
<hr />
<a href="http://validator.w3.org/check/referer" title="Pulsa para comprobar la validez del código de la página">

<img src="img/validator.png" alt="W3C_validator" width="80" height="15" class="imgcenter">

</a>
</body>
</html>

¿Empezando?

2011-01-07T14:52:00.000-08:00

¿Es un blog el formato más adecuado para escribir sobre Lenguaje HTML?
La verdad es que lo dudo...