HTML5

Presentación electronica

Pantalla completa

HTML5

Un sitio web es un conjunto de páginas web relacionadas entre sí. Se entiende por página web tanto el fichero que contiene el código HTML como todos los recursos que se emplean en la página (imágenes, sonidos, código JavaScript, etc.).

A menudo, la página inicial es la más vistosa del sitio web, ya que tiene el objetivo de atraer y atrapar al visitante. La mayoría de las páginas iniciales poseen las siguientes características:

Poco texto, pero muchas imágenes, gráficos animados, sonidos o incluso vídeos.

Algunas pasan (saltan) automáticamente a la página principal, pero en otras el usuario tiene que pulsar en un enlace para cargar la página principal.

Además de usarse como tarjeta de presentación, la página inicial también se puede emplear para disminuir el tiempo necesario para cargar las páginas posteriores. Mientras el usuario está visualizando la página inicial, las imágenes que se emplearán en las siguientes páginas se pueden cargar en la memoria caché del navegador mediante un proceso en segundo plano del que el usuario no es consciente.

La página principal, conocida como home page, root page, entry page, front page o main page en inglés, es la página que funciona como índice o tabla de contenidos del sitio web. A través de esta página, el resto de documentos del sitio web es accesible de una forma directa o indirecta. Por tanto, la página principal tiene la función de guiar y dirigir al usuario a otras páginas del sitio web. La página principal tiene que ser clara y no crear confusión con infinidad de opciones (si las opciones son abundantes significa que la clasificación de la información no ha sido la correcta).

Posiblemente, el aspecto más importante (y al mismo tiempo uno de los más descuidados) de un sitio web sea su contenido (y por extensión, sus servicios): un sitio web con un buen diseño pero con un pobre contenido es poco probable que triunfe, sin embargo, un sitio web con un pobre diseño pero con un buen contenido sí que puede triunfar (por ejemplo, los buscadores Yahoo o Google o la tienda Amazon no destacan por su diseño, pero han triunfando en Internet gracias a su contenido o a los servicios que ofrecen).

El contenido de un sitio web se suele organizar en una serie de secciones que facilitan su búsqueda y localización. En general, los contenidos se pueden clasificar en dos tipos: comunes y específicos.

Los contenidos comunes son aquellos que se pueden encontrar en la mayoría de los sitios web pertenecientes a una misma categoría. Por ejemplo:

Grandes compañías:

• Quienes somos?

• Información de contacto.

• Historia de la compañía.

• Objetivos.

• Cartera de clientes.

• Productos o servicios.

• . . .

Periódicos:

• Editorial.

• Noticias internacionales.

• Noticias nacionales.

• Deportes.

• . . .

Centros educativos:

• Personal.

• Profesores.

• Estudiantes.

• Planes de estudio.

• . . .

Portal genérico:

• Noticias.

• Canales.

• Correo.

• Chat.

• . . .

La estructura física de un sitio web es la forma en que se almacenan los distintos recursos (ficheros) que forman un sitio web en el sistema de archivos del servidor web. Se almacenan todos los cheros en un único directorio (carpeta)? O están almacenados según el tipo de chero en distintos directorios? Al definir la estructura física de un sitio web hay que tener en cuenta las preguntas anteriores.

Una estructura física eficiente reduce los costes de mantenimiento: cada vez que se tenga que actualizar el sitio web, el tiempo necesario para localizar el recurso que se desea actualizar se reducirá.

La estructura física se debe de planificar antes de iniciar el desarrollo del sitio web. Modificar la estructura física una vez que se han creado muchas páginas es costoso y propenso a cometer errores, ya que para ello hay que actualizar los enlaces entre las páginas, las referencias a las imágenes, etc., para que reflejen la nueva estructura del sitio web.

Si el sitio web contiene un número pequeño de ficheros (5 o 10 cheros), quizás no suponga ningún problema tenerlos todos juntos en el mismo directorio. Pero conforme aumente el número de cheros, si se ordenan en subcategorías se simplificará su localización y su cambio.

No existe una forma perfecta de organizar físicamente un sitio web. Todo depende de la persona que tenga que mantener el sitio web: una estructura física puede tener sentido para una persona, pero no para otra. Lo importante es que en el futuro, cuando haya que realizar cambios en un sitio web, la persona que tenga que hacerlo pueda encontrar lo que quiere modificar rápidamente.

Existen diferentes alternativas de organización de un sitio web en directorios. Algunas de las más usuales son:

Por el tipo de fichero. Por ejemplo, ficheros HTML, ficheros gráficos, ficheros de vídeos, etc.

Por el nivel de acceso (visibilidad). Por ejemplo, parte pública, parte privada de los clientes, parte privada de los administradores, etc.

Por el contenido. Por ejemplo, una empresa que vende productos puede organizar los cheros según la información que contienen: los cheros de la familia de productos A en un directorio, los cheros de la familia de productos B en otro directorio, etc.

Por la fecha. Por ejemplo, el sitio web de una revista puede organizar los cheros según la fecha de publicación.

Por su propietario. Por ejemplo, una empresa puede organizar los cheros según el departamento al que pertenecen: departamento A, departamento B, etc.

Por su estructura lógica o de navegación. La estructura física puede ser una copia de la estructura lógica.

HTML

Las páginas web o páginas HTML son unos ficheros escritos en el lenguaje HTML. El desarrollo de estas páginas abarca un amplio grupo de tecnologías, desde las páginas más sencillas que sólo usan el lenguaje HTML hasta las más complejas que usan DHTML, CSS, JavaScript, applets realizados en Java o componentes ActiveX.

El lenguaje HTML se basa en SGML, un sistema mucho más completo y complicado de procesamiento de documentos que indica cómo organizar y marcar (etiquetar) un documento. HTML dene e interpreta las etiquetas de acuerdo a SGML.

Las páginas HTML se pueden diseñar usando texto con distintos tipos de letras o colores, imágenes, listas de elementos, tablas, etc. Su modo de empleo es muy sencillo: se basa en el uso de etiquetas que indican qué elementos contiene cada página, el formato que hay que aplicar a cada uno de ellos y como se tienen que distribuir por la página.

El lenguaje HTML consta de una serie de etiquetas o marcas (tags). La mayoría de las etiquetas aparecen por parejas (códigos pareados), siendo una de inicio (apertura) y otra de (cierre): delimitan la parte del documento HTML que se ve afectada por su acción. Pero también hay etiquetas que aparecen de forma individual, como <IMG> para insertar una imagen. Este último tipo de etiquetas tiene efecto en el lugar en el que se incluyen o desde el lugar en que aparecen hasta el nal de la página.

Todas las etiquetas comienzan con el símbolo < (menor que) y terminan con el símbolo > (mayor que). Entre estos dos símbolos aparece el nombre de la etiqueta. Por ejemplo, <HR> es una etiqueta válida, pero <HR o <HR< no lo son.

En el lenguaje HTML no se distinguen minúsculas/mayúsculas. Por tanto, las cadenas <HTML>, <html> y <Html> representan la misma etiqueta. De todos modos, es una buena práctica ponerlas siempre en mayúsculas, sobre todo en aras de una mayor legibilidad y claridad de los documentos HTML5.

Las etiquetas de cierre tienen el mismo nombre que las de inicio, pero van precedidas del símbolo / (barra inclinada). Por ejemplo, la etiqueta de cierre correspondiente a <HTML> es </HTML>.

Una etiqueta puede poseer varios atributos a los que hay que asignar valor. Algunos de estos atributos son obligatorios, mientras que otros suelen ser opcionales. Por otro lado, algunos aceptan un valor de cualquier tipo, otros cualquier valor de un tipo concreto (alfanumérico, numérico, etc.) y, por último, algunos necesitan un valor concreto de un conjunto de valores. Los atributos se escriben dentro de la etiqueta  y separados por espacios en blanco. Para asignar un valor a un atributo se emplea el signo igual (=). El valor que se asigna a un atributo tiene que ir encerrado entre comillas. Por ejemplo, la etiqueta <IMG>, que no tiene una etiqueta de cierre, tiene varios atributos, entre ellos SRC que espera cualquier carácter válido en una URL, WIDTH y HEIGHT que esperan un valor numérico y el atributo ALT que espera cualquier cadena de caracteres. Un ejemplo de uso de esta etiqueta es:

<IMG SRC=”fichero.gif” WIDTH=”10” HEIGHT=”10” ALT=”Algo”>

Los atributos sólo se ponen en la etiqueta de inicio: la etiqueta de cierre nunca lleva atributos.

Cuando un usuario solicita una página HTML a un servidor web, este envía la página tal cual. En el momento en que el explorador recibe la página, interpreta las etiquetas que la página contiene, mostrando al usuario el resultado final (donde no aparecen ya las etiquetas, sino el resultado de su evaluación).

Estructura

La estructura básica de una página se divide en cabecera (<HEAD> … </HEAD>) y cuerpo (<BODY> … </BODY>). El esqueleto básico de una página es:

Línea 1: Permite indicar la versión HTML que se va a utilizar para escribir la página. De este modo, el navegador puede optimizar la interpretación de la página al conocer de antemano la versión empleada. Normalmente no se incluye.

Línea 2: Junto a la línea 9, indican el comienzo y fin de la página. La etiqueta <HTML> es obligatoria.

Línea 3: Junto a la línea 5, indican el comienzo y fin de la cabecera.

Línea 4: Lo que escribamos en la cabecera no se verá en la página. Se suele usar para indicar el título de la página con <TITLE> … </TITLE>, incluir código que se ejecuta en el cliente con <SCRIPT> … </SCRIPT>, definir un estilo con <STYLE> … </STYLE> o incluir información sobre el contenido de la página con la etiqueta <META>.

Línea 6: Junto a la línea 8, indican el comienzo y n del cuerpo.

Línea 7: Lo que escribamos en el cuerpo se verá en la página. La información contenida en esta sección se puede visualizar con apariencias muy diversas: sólo hay que aplicar distintos formatos a las secciones que la componen.

Etiquetas

<meta>

Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla:

La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y simple. Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar:

<link>

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:

El cuerpo de la página

​1. Cabecera

​2. Barra de Navegación

​3. Sección de Información Principal

​4. Barra Lateral

​5. El pie o la barra Institucional

<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…

<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.

<section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…

<aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…

<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web.

Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.

<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.

<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).

<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.

<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.

<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.

<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).

<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.

<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación.

Dentro de el cuerpo de la página

Encabezados <h1>…<h6>

Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del documento web.

La etiqueta se representa mediante las etiquetas <hX></hX>, siendo X un número entre 1 y 6, que establece el nivel del encabezado.

La presentación visual de los elementos de encabezado, suele ser en letra negrita, y dependiendo de su nivel, de 1 a 3 suele ser mayor que la letra base establecida, mientras que los niveles de 4 a 6 suele ser de tamaño menor a la letra establecida como base.

Se utilizan semánticamente para establecer separaciones en el documento web, o dar más relevancia a secciones del documento.

La sintaxis para las etiquetas de encabezado es la siguiente.

<h4>Contenido de texto del encabezado</h4>
<h5>Contenido de texto del encabezado</h5>
<h6>Contenido de texto del encabezado</h6>
<h1>Contenido de texto del encabezado</h1>
<h2>Contenido de texto del encabezado</h2>
<h3>Contenido de texto del encabezado</h3>

<p>

La finalidad de la etiqueta <p>, es la de definir un párrafo, el texto encerrado entre las mismas será considerado por el navegador como un párrafo.

El navegador realiza un ajuste automático de los párrafos al ancho de pantalla determinado por la ventana del programa navegador.

Se ha de tener en cuenta que los navegadores cuando realizan la representación del lenguaje HTML5, no tienen en cuenta más de un espacio en blanco de separación entre palabras, es decir aunque deje con su editor de textos entre una palabra y otra más de un espacio en blanco, solo se visualizará uno descartando el resto.

Ocurre igual con los saltos de línea que pueda insertar dentro de un párrafo en su editor HTML5, el navegador solo interpretará como saltos de líneas aquellos que sean representados por su etiqueta equivalente.

<a>

La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles.

Por defecto los navegadores suelen visualizar los enlaces con una serie de colores predefinidos, aunque estos se pueden cambiar.

Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados con el color púrpura y por último los enlaces activos mediante el color rojo.

Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder.

Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:

href

Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un ancla “enlace” en el mismo documento.

Si se realiza un enlace en el mismo documento a un objeto concreto se ha de utilizar como identificador del objeto el nombre del mismo que se haya proporcionado mediante el atributo “id”.

Las posibles formas de sintaxis para definir esta etiqueta con el atributo href son las siguientes:

<a href=”URL Absoluta”>Texto del enlace</a>

<a href=”URL Relativa”>Texto del enlace</a>

<a href=”Marcador en el mismo documento”>Texto del enlace</a>

target

El atributo permite especificar el destino por defecto para todos los enlaces y formularios del documento web.

La sintaxis para definir la etiqueta con el atributo target es la siguiente:

<a href=”valor”” target=”valor”>Texto del enlace</a>

Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes:

Los siguientes ejemplos muestran el uso de la etiqueta <a> en conjunto con los atributos comentados anteriormente, se muestra el uso de la etiqueta realizando enlaces dentro del propio documento, a documentos externos html y a recursos externos como pueden ser archivos de imagen, pdf, email, etc. Lógicamente para que su funcionamiento sea adecuado los recursos a los cuales se enlaza han de existir.

Al definir los enlaces, se puede especificar la ruta absoluta a los mismos, o una ruta relativa teniendo en cuenta el documento actual.

En el siguiente ejemplo se muestra el uso de dichas rutas mostrando enlaces, a sitios web que se encuentran fuera del lugar donde está almacenado el documento.

Y otros enlaces que muestran rutas relativas desde la posición actual del documento a otros documentos ubicados en el mismo sitio de alojamiento.

<br> y <hr>

Aunque en su editor HTML, deje líneas en blanco o introduzca saltos de línea forzados en un párrafo, se ha comentado anteriormente que el navegador realiza la omisión de los mismos, ya que la forma de indicar un salto es mediante las etiquetas de párrafo.

Pero se puede realizar el forzado de salto de línea, utilizando para ello la etiqueta <br>, esta etiqueta permite realizar la inserción forzada de un salto de línea en el navegador.

Es una etiqueta de las denominadas “vacías”, es decir no tiene ni contenido, ni etiqueta de cierre.

El salto de línea se produce en el lugar donde se sitúe la etiqueta y se mantiene independientemente aun cuando se altere el ancho de visualización del documento en el navegador.

Como recomendación se indica que se ha de utilizar esta etiqueta solo para insertar saltos de línea forzados en el párrafo, y no utilizarla como separador de párrafos.

La sintaxis de la etiqueta es la siguiente:

<p>Este párrafo contiene un<br> salto de línea forzado</p>

<img>

La etiqueta <img>, permite definir una imagen en el documento web.

Técnicamente la imagen no es insertada dentro del documento, ya que lo que se hace es realizar un enlace a la misma, encargándose el navegador de situarla en el documento.

Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos.

Se ha de tener en cuenta que el tamaño de las imágenes influye en el proceso de carga de la página. Y por tanto se suelen preparar las imágenes para que su “peso” (“tamaño en bytes”), sea menor, observando que la imagen obtenga la menor pérdida de calidad de visualización en el proceso.

Se ha de observar que la etiqueta no tiene etiqueta de cierre.

La sintaxis de la etiqueta es la siguiente.

<img alt=”valor” height=”valor” width=”valor” src=”valor” ismap usemap=”valor”>

Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes.

src

El atributo src, permite especificar el origen de la imagen, es decir su ubicación, bien mediante una ruta absoluta o relativa.

Las posibles formas de sintaxis para definir esta etiqueta con el atributo src son las siguientes:

<img src=”URL Absoluta”>

<img src=”URL Relativa”>

height

El atributo height, permite especificar el alto de la imagen en pixeles.

Siempre que se especifique el ancho y alto de la imagen, el navegador reservará el espacio correspondiente para la imagen cuando se produzca la carga del documento.

Si no se especifican los tamaños de la imagen, el navegador no podrá realizar la reserva de espacio en el documento, hasta que se haya completado la carga de la imagen.

El especificar ancho y alto de la imagen, no significa que se realice una reducción o ampliación del tamaño en bytes de la imagen, es decir la imagen se ha de leer completa, independientemente del tamaño especificado.

Si se especifica un tamaño que no siendo el tamaño real de la imagen, se puede producir un efecto de pixelado o dientes de sierra, con la respectiva pérdida de calidad en la visualización de la imagen.

Si se quiere realizar cambios de tamaño, escalado, calidad, etc. Sobre la imagen se han de hacer sobre la misma con algún tipo de programa especial, ya que ni el navegador ni el lenguaje realizan esta función.

La sintaxis de la etiqueta con el atributo height, es la siguiente.

<img src=”valor” height=”Valor En Pixeles”>

width

El atributo width, permite especificar el ancho de visualización de la imagen, con un valor numérico en pixeles.

La sintaxis de la etiqueta con el atributo width aplicado es la siguiente.

<img src=”valor” height=”Valor En Pixeles” width=”Valor En Pixeles”>

alt

El atributo alt, permite especificar un texto alternativo para la imagen. Este texto alternativo es visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario utiliza un lector de pantalla.

Algunos navegadores visualizan el texto de este atributo como una pequeña ventana emergente, aunque no es el comportamiento correcto, para realizar la acción de visualizar la ventana emergente es preferible utilizar el atributo title.

La sintaxis de la etiqueta con el atributo alt aplicado es la siguiente.

<img src=”Valor” alt=”Texto Alternativo de la imagen”>

<ul>  <ol> y <li>

La etiqueta <ul>, permite definir una lista desordenada (“Unordered List”). Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que está compuesta la lista.

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li></li>, en la que se ha de especificar el texto que compone el elemento de la lista.

Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.

La sintaxis de la etiqueta es la siguiente.

El siguiente ejemplo muestra el uso de la etiqueta en un documento web.

La etiqueta <ol>, permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que está compuesta la lista.

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li></li>, en la que se ha de especificar el texto que compone el elemento de la lista.

Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.

La sintaxis de la etiqueta es la siguiente.

Los atributos que pueda utilizar la etiqueta, aparte de los globales, son los siguientes.

type

El atributo type, permite especificar el tipo de orden que se de aplicar a la lista, estableciendo de esta forma que la lista se represente mediante diferentes tipos de numeración.

Los diferentes valores que puede recibir este atributo son los siguientes

1 Es el valor por defecto en caso de no especificarse el atributo.

Realiza la numeración de las lista utilizando valores numéricos.

(1,2,3…)

a Establece que la numeración de la lista se realice utilizando caracteres alfabéticamente en letra minúscula. (a, b, c …)

A Establece que la numeración de la lista se realice utilizando caracteres alfabéticamente en letra mayúscula. (A, B, C …)

i Establece que la numeración de la lista se realice utilizando numeración en formato de números romanos en letraminúscula. (i, ii, iii, iv …)

I Establece que la numeración de la lista se realice utilizando numeración en formato de números romanos en letra mayúscula. (I, II, III, IV …)

<div> y <span>

Las etiquetas <div> y <span>, no tienen ningún tipo de significado especial, solo que la primera se define como un elemento de bloque y por tanto el navegador mostrara un salto de línea antes y después de la misma. Mientras que la segunda es un elemento de línea.

Cuando se utilizan actualmente en un documento web, se pueden utilizar para establecer opciones de formato mediante hojas de estilo a bloques completos o elementos individuales del documento.

Un uso muy común de las mismas era también para establecer el diseño del documento mediante hojas de estilo. Aunque actualmente con la nueva versión de HTML5 que proporciona etiquetas para establecer dicho diseño, se recomienda la utilización de las nuevas etiquetas en sustitución de div y span.

La sustitución de las etiquetas div y span, por la nuevas etiquetas semánticas de HTML5, se ofrece como alternativa recomendándose la utilización de las últimas, pero muchos desarrolladores web, siguen utilizando para establecer divisiones de sección, artículos, etc., en sus documentos las etiquetas div y span. Aunque también todavía hay programadores que para maquetar el diseño del documento siguen utilizando tablas, esta última opción ya no es recomendada por el consorcio W3C.

Las dos etiquetas en esta última versión del lenguaje no disponen de atributos que aplicar a las mismas.

La sintaxis de las etiquetas es la siguiente.

El siguiente ejemplo muestra el uso de ambas etiquetas en un documento web.

<audio> y <video>

La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de audio.

Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg.

Aunque también depende del navegador que se permita su reproducción.

La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.

La sintaxis de la etiqueta es la siguiente.

Entre los atributos de la etiqueta encontramos los siguientes.

src

El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el audio a cargar en el documento web.

Se ha de especificar el archivo de audio con el formato adecuado para el navegador donde se vaya a reproducir el audio.

Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de audio, para especificar diferentes formatos, de forma que el navegador utilizado cargue la primera que sea capaz de reconocer.

autoplay

El atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el archivo cargado por el navegador.

Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el atributo en la etiqueta.

controls

El atributo es booleano, por lo que al ser especificado en la etiqueta, permite que se visualicen los controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa, búsqueda y volumen.

loop

Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle, cuando finalice el audio volverá a empezar de nuevo.

muted

Al especificar el atributo, el archivo de audio será cargado, pero se activara la opción de silenciar el audio.

Se ha de tener en cuenta que para realizar una carga correcta del formato de audio, se habría de utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.

Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se utilice la misma.

Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los siguientes:

La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de video.

Actualmente se pueden reproducir tres tipos de formato de video, mp4, WebM y ogg. Aunque también depende del navegador que se permita su reproducción.

La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.

La sintaxis de la etiqueta es la siguiente.

Texto para navegadores que no soportan video …

</audio>

Entre los atributos de la etiqueta encontramos los siguientes.

src

El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el video a cargar en el documento web.

Se ha de especificar el archivo de video con el formato adecuado para el navegador donde se vaya a reproducir el video.

Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de video, para especificar diferentes formatos, de forma que el navegador utilizado cargue la primera que sea capaz de reconocer.

autoplay

El atributo permite especificar que el archivo de video sea reproducido automáticamente, al ser el archivo cargado por el navegador.

Es un atributo booleano, por tanto para que se ejecute el video simplemente se ha de especificar el atributo en la etiqueta.

controls

El atributo es booleano, por lo que al ser especificado en la etiqueta, permite que se visualicen los controles de control de video, entre los que se encuentran, el botón de reproducción, pausa, búsqueda y volumen, pantalla completa, subtítulos y pista.

loop

Si se especifica el atributo, el archivo de video es reproducido automáticamente en modo bucle, cuando finalice el video volverá a empezar de nuevo.

muted

Al especificar el atributo, el archivo de video será cargado, pero se activara la opción de silenciar el audio.

height

El atributo permite especificar el alto del video que se quiere reproducir, expresando el valor en pixeles.

width

El atributo permite especificar el ancho del video que se quiere reproducir, expresando el valor en pixeles.

Se ha de tener en cuenta que para realizar una carga correcta del formato de video, se habría de utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de video en varios formatos, visualizando así el navegador el primer archivo compatible.

<iframe>

 La etiqueta <iframe>, permite realizar la inserción de un marco en línea, dentro del documento web. Un marco le va a permitir insertar contenido dentro de un documento como puede ser otro documento web, un mapa de google maps, etc.

La sintaxis de la etiqueta es la siguiente.

Los atributos que se pueden especificar son los siguientes:

width

El atributo width, permite especificar el ancho del marco en pixeles.

height

El atributo height, permite especificar el alto del marco en pixeles.

name

El atributo permite especificar el nombre que se quiere asignar al marco

insertado en el documento web.

src

El atributo src, permite especificar el origen del objeto que se quiere insertar en el marco, es decir su ubicación, bien mediante una ruta absoluta o relativa.