Diseño Web con HTML, CSS y JavaScript

Insertar una imágen en un documento HTML

Para insertar una imagen, contamos con un elemento html denominado <img>, que se acompaña del parámetro src para indicar la ubicación de la imagen (source en inglés). El formato general es el siguiente:

<img src="img/estrella.jpg" />
Estrella blanca sobre fondo verde

Es un elemento que no tiene etiqueta de cierre, por lo que el cierre va incluido en la propia etiqueta.

La dirección de la imagen que indicaremos en src será normalmente una dirección relativa a la página principal, por lo que, antes de insertar una imagen, es muy importante guardar primero la página web, si estamos utilizando un editor, para evitar las temibles direcciones que comienzan por file:// y que fallarán al publicar la página en Internet.

Artículo tomado de http://www.ite.educacion.es

SVG (Scalable Vector Graphics)

Antes de la aparición del HTML5, no existía la posibilidad de trabajar con gráficos de tipo vectorial en una página web; Al menos no existía de una manera estandarizada. SVG ya existía tal y como se conoce, pero no era un estándar reconocido y sólo era soportado de manera nativa por algunos navegadores. Por un lado existía SVG, pero por otro existía el VML, una especificación de Microsoft que se propuso como estándar en el W3C. Esto provocó que tan sólo Internet Explorer reconociese este tipo de formato, mientras los navegadores de la competencia soportaban SVG; Lo cual hacía bastante dificil crear páginas web utilizando estas tecnologías, y que se pudiesen ver igual en todos los navegadores.

Su navegador no soporta imágenes SVG.

A consecuencia de esto, el programa de diseño FLASH tuvo su época dorada, ya que era lo más comunmente utilizado para tratar con imágenes de tipo vectorial. Pero FLASH es un programa 'de pago', un producto de Adobe que no es precisamente gratis. Además al ser un archivo ejecutable, requería de la instalación de un plugin para poder visualizar estos contenidos generados con FLASH.

Por fortuna apareció la nueva versión del lenguaje HTML, conocida como HTML5. En esta nueva especificación se reconoce el formato SVG como un estándar, lo cual ha obligado a todos los navegadores a implementarlo de manera nativa, incluido Internet Explorer, que soporta SVG a partir de su versión 9.

La manera de incluirlo en un documento HTML

<svg height="210" width="210">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:gray; stroke:black; stroke-width:2; fill-rule:evenodd;"/>
  Su navegador no soporta imágenes SVG.
</svg>

Artículo tomado de http://www.danidesaro.com

Inserción de un video en HTML