HTML5

Ejercicio con etiquetas <p>, <br /> y <hr />

Ejecutar el programa BlueGriffon.

Antes que nada atenderemos a un problema que se nos podría plantear a futuro, con los caracteres
especiales del castellano y valenciano (tilde, diéresis, ç, ñ, ¿, etc):
Por cuestiones relacionadas con el tipo de codificación de los documentos y las diferencias que
puedan existir con el servidor, se nos puede dar el caso de que observemos que las tildes no se
muestran correctamente, como tampoco las eñes y otros caracteres especiales.
Los motivos por los que esto sucede son complejos, pero no así la solución, que pasa por indicar
en BlueGriffon que reemplace los caracteres especiales por códigos estandarizados en HTML.
Esto se consigue seleccionando la opción Herramientas > Preferencias y posteriormente accedemos a
la pestaña Documentos. En la parte denominada “Mostrar los siguientes caracteres como
entidades” seleccionaremos la opción “Todos los caracteres especiales de HTML 4”.

En una página nueva copiar y pegar los cuatro párrafos siguientes.

Incluir dos veces al menos cada una de las etiquetas <p>, <br /> y <hr /> para acompañar y/o separar los
cuatro párrafos siguientes:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim neque sit amet magna tempus
mollis. Duis risus arcu, egestas a bibendum eu, rutrum nec orci. Nunc condimentum imperdiet ultricies.
Phasellus tincidunt congue arcu, consequat bibendum lacus accumsan quis. Quisque a orci mi, eget placerat
magna. Phasellus rutrum porttitor blandit. Quisque vel neque in est hendrerit venenatis. Fusce nisl nisi,
ullamcorper ut blandit id, venenatis ac nunc. Sed sed purus elit. Fusce sed enim at mi aliquam tristique vitae
sed arcu. Aliquam non justo tortor. Aliquam ac lorem ipsum, sit amet pellentesque sapien. Aenean ut ligula vel
metus varius gravida tempor id nunc. Vestibulum tempus, urna vel consectetur consequat, ante lectus
commodo odio, luctus varius eros nisl at nunc. Phasellus urna sapien, lobortis ut dictum ac, feugiat non
massa. Curabitur nec justo ligula.
Donec viverra neque id eros fringilla lobortis. Nulla non quam libero. Sed pulvinar laoreet erat sit amet
lobortis. Nulla dolor augue, cursus ac tempor vitae, vestibulum nec nisl. Morbi pulvinar magna cursus dolor
pharetra porta. Etiam pharetra neque nec lacus gravida consectetur. Morbi eu neque mauris. Donec magna
neque, elementum eget fermentum ut, commodo a leo. Nam urna nunc, cursus eu cursus vel, iaculis at urna.
Praesent consectetur augue quis mi venenatis auctor. Curabitur ut purus id diam dapibus congue quis
elementum arcu. Sed dui diam, lacinia ac volutpat venenatis, ultrices condimentum dolor. Fusce dictum, tortor
et mattis ultricies, erat odio consectetur justo, vel vulputate lectus velit sed dolor. Vestibulum blandit interdum
orci sit amet tincidunt. Praesent sed eros augue. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Maecenas fermentum velit ut tellus adipiscing molestie. Proin neque tellus, sodales consequat posuere a,
ultrices at sapien. Nunc scelerisque, lectus eget iaculis pharetra, dolor libero egestas massa, non sodales
lectus magna a ligula. Pellentesque eu lectus ac mi dictum imperdiet. Proin non est ante. Vestibulum sit amet
orci enim, malesuada volutpat orci. Sed gravida rutrum orci ac vehicula. Proin ornare felis in nibh commodo
mollis. Quisque vehicula tellus scelerisque quam viverra sollicitudin. Etiam feugiat sapien quis libero aliquet in
tempus magna tristique.
Suspendisse a lectus metus. Donec vel urna neque. Vivamus lacinia tristique nibh, vitae convallis lorem
dignissim nec. Donec nibh arcu, lobortis ac aliquet in, tempus vel metus. Morbi placerat, nibh at malesuada
molestie, lorem justo fermentum diam, eu feugiat leo lectus id nisi. Nam fringilla nunc sed leo laoreet at luctus
ligula egestas. Aliquam nec faucibus mauris. Nulla consequat consectetur commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo ullamcorper odio, in bibendum lacus
ultricies a. Quisque quis mi justo, non dignissim ipsum. Praesent eget lacus nec ligula fermentum eleifend sit
amet in massa. Vivamus dictum quam non nisl cursus a bibendum ipsum ornare. In hac habitasse platea
dictumst. Etiam sem leo, pulvinar at dignissim a, tempus eget nisl. Suspendisse eget bibendum quam. Ut eu
turpis sem, vitae venenatis massa. Nam egestas laoreet felis et feugiat. Curabitur vel sem vel nibh vehicula
varius at vel dolor.
Ejercicio con etiquetas de estructura
Ejecutar el programa BlueGriffon y codificar en una página nueva el siguiente código en HTML.
Hacer una modificación para incluir en el título de la página tu nombre y apellido.
Ejercicio incluyendo etiquetas en la sección <head> </head>

Una vez hayas incluido ese código en la sección de la cabecera, abre la página con tu navegador web
para observar el resultado.
Ejercicio para incluir etiquetas <meta>
En este ejercicio, cuando se refiere al modo wysiwyg del BlueGriffon, se está refirendo al modo de
Diseño.

Deberás abrir la última página web con la que has estado trabajando, incorporar las siguientes
“Propiedades de página” que se proponen, y observar y analizar el código fuente generado.
Etiquetas empleadas comunmente para aplicar formato al texto
• <strong> y </strong>: para destacar una parte del texto.
• <em> y </em>: se emplea para enfatizar un texto; habitualmente se representa en cursiva.
• <i> e </i>: hacen que un texto se muestre en cursiva.
• <dfn> para definiciones,
• <code> para bloques de código informático,
• <samp> para ejemplos,
• <kbd> para texto de teclado,
• <var>para definir una variable y
• <cite> para una cita.

Eso es todo lo que tenemos a nuestro alcance para destacar un parte de un texto mediante etiquetas.

En versiones antiguas de HTML existían también otras etiquetas muy utilizadas como <b>, <i>,<font>, etc.,
pero todas ellas han sido abandonadas en las últimas revisiones del lenguaje HTML y ahora para aplicar
formato a una web emplearemos exclusivamente estilos, es decir, siempre irá acompañado el formato del
texto de la palabra style.
Los estilos se pueden aplicar en nuestro sitio web desde tres sitios diferentes:

1. Estilos en un archivo externo: definimos una serie de reglas CSS en un archivo, que enlazaremos
desde nuestra página web, en la cabecera de la misma. Este es el método más aconsejado de trabajo y
el que emplearemos en el futuro.
2. Estilos en la cabecera de la página web: de nuevo en la cabecera podemos indicar las reglas CSS
que necesitemos, afectando de este modo sólo a la página web en cuestión.
3. Estilos en la página web: podemos aplicar estilos dentro de un elemento concreto de la página web,
mediante el parámetro style que se puede establecer para cualquier etiqueta, como por ejemplo:

<h1 style="color: rgb(200, 20, 20); font-family: Helvetica,Arial,sans-serif;">Qué entendemos

por un párrafo</h1>

<p style="font-style: italic; color: rgb(20, 20, 200);">Un párrafo de texto se compone de un
bloque de texto independiente con una apariencia concreta, delimitado por un espacio superior
y otro inferior.</p>

Pero, ¿cómo podríamos modificar sólo una frase dentro de un párrafo o una simple palabra? La respuesta la
encontramos en el elemento HTML denominado <span>. A continuación, un ejemplo:

<h1>Qué entendemos por un <span style="color: rgb(0, 153, 0);"> párrafo </span> </h1>

En el menú Formato del BlueGriffon encontramos algunas opciones más relacionadas con la aplicación de
estilos específicos al texto, tanto los más visuales, situados en la parte superior, como los que le aportan un
sentido al contenido, en la mitad del menú. El menú se completa con dos opciones importantísimas
orientadas a eliminar estilos en la página y a convertir enlaces en texto normal ambas opción muy útiles si
estamos copiando texto desde otro lugar y queremos limpiar ese estilo “heredado” para aplicar los nuestros
propios.
La aplicación de estilos con BlueGriffon se convierte en un proceso muy simple gracias al editor de estilos
(style). Este panel se despliega haciendo clic en el botón Establecer estilos CSS o en el
menú Paneles>Propiedades de estilo.
Enlaces externos y enlaces de correo electrónico
Incluye en tu página web el siguiente enlace externo:

Puedes crear enlaces desde el programa BlueGriffon directamente, tal y como comentamos a
continuación:

1. Introduciremos en la página web el texto, o la imagen, que queremos que se convierta en un

enlace.
2. Seleccionaremos ese texto, o esa imagen, con el ratón.
3. Haremos clic en el icono Enlace (en forma de cadena).

4. En el cuadro de diálogo que aparece, escribiremos la dirección de la página web o la

pegaremos, si la habíamos copiado previamente desde el navegador.
5. Al hacer clic en Aceptar, nuestro enlace estará ya listo.

Añade a tu pagina web un enlace a la mía, haciendo uso de esta técnica. Observa el código fuente
que BlueGriffon ha generado por ti.

Si se ha producido algún error o queremos modificar el enlace, sólo tenemos que hacer doble clic
sobre el texto enlazado dentro del editor o seleccionarlo de nuevo y hacer clic en el icono Enlace.

Igualmente, para eliminar un enlace y que el texto vuelva a la normalidad, debemos editar el enlace y
borrar la URL indicada.

No siempre enlazaremos con archivos que se van a mostrar en el ordenador. Podemos utilizar estas
técnicas para facilitar recursos a nuestros usuarios, para que se descarguen en su ordenador. Así, si
enlazamos con un documento de Word o Writer, un archivo zip comprimido, una presentación
en PowerPoint o Impress, etc. el navegador intentará interpretarlo; pero si no lo consigue, hará
que el archivo se descargue para que el usuario pueda trabajar con él.

Respecto a los enlaces de correo electrónico sólo tiene sentido incluirlos si suponemos que el
visitante tiene instalado un programa gestor de correo electrónico de manera que cuando haga clic en
el enlace se le abrirá su Outlook, su Thunderbird, etc.

Puedes probar con este ejemplo:

y hacer clic en el enlace para saber cuál es tu programa gestor de correo electrónico predeterminado,
aunque si no tienes configurada en él ninguna cuenta de correo electrónico, no te servirá de nada.

Fijate que además de http:// para indicar una dirección de Internet o file://para indicar un archivo
local, hay otros indicadores que se emplean para identificar un tipo concreto de URL. El que ahora
acabas de utilizar es mailto://

Desde BlueGriffon podrás indicar que el enlace es a una dirección de correo electrónico marcando la
casilla adecuada:

Modifica el código anterior, con este otro, y observa el resultado cuando lo lances desde tu
navegador web:
Referencias absolutas y relativas
Para entender el siguiente ejercicio que vamos a hacer, primero debes crear en tu carpeta en la que
estás trabajando para aprender diseño web, la siguiente estructura de archivos y carpetas:

Las carpetas tienen en su interior, imágenes o archivos de páginas web. Los archivosde páginas web
que crees apenas te molestes en llenarlos de contenido.

Llegados a este punto, necesitaremos realizar varios enlaces desde la página principal (la
llamada index.html) hacia otras páginas de nuestro propio sitio web. Y aquí es donde viene la
principal diferencia entre crear enlaces a otros sitios web (absolutos) o dentro de un mismo sitio web
(relativos).

Cuando creamos enlaces entre las páginas web de un mismo sitio web nos interesa generar
referencias relativas, es decir, que los enlaces tomarán sentido dependiendo de la página web que se
esté visualizando en ese momento. Por ejemplo, si desde la página index.html del ejemplo anterior
quiero enlazar con la página presentación.html que se encuentra en la misma carpeta, podría hacerlo
de dos maneras:

1. con el método absoluto:

<a href = ”http://www.misitioweb.com/presentacion.html”> Accede a la presentación</a>

2. o mediante un sencillo enlace relativo:

<a href=”presentacion.html”>Accede a la presentación</a>

Dado que las dos páginas están en la misma carpeta (tanto index.html como
presentación.html), sólo necesito indicar su nombre.

Prueba que lo anterior es cierto.

Hay dos motivos clave por los que debemos crear siempre los enlaces de manera
relativa entre las páginas de un mismo sitio web:
a) Si utilizamos la URL absoluta, nos obligamos a indicar de antemano la dirección completa del
sitio web; algo que quizás no tengamos mientras estamos preparando las páginas y que además nos
obligaría a colocar las páginas en Internet para poder probarlas.
b) Si en un momento determinado el sitio web cambia de dominio o lo trasladamos a otra parte,
todos los enlaces dejarían de funcionar, al hacer referencia al sitio antiguo. Por el contrario, si
mantenemos los enlaces como relativos, todo el sitio funcionará sin problema se coloque donde se
coloque.

Ahora bien, según la página web que se esté visualizando, y hacia la que se refiere el enlace en el que
haremos clic, deberemos utilizar una de las tres técnicas siguientes para direccionar el enlace:

• Si las páginas están en la misma carpeta: indicamos el nombre de los archivos nada más.
• Si está en una subcarpeta: indicamos la subcarpeta con una / como separador (por ejemplo,
documentos/2014/proyecto.html).
• Si está en una carpeta de nivel superior a la que nos encontramos: utilizamos el .. para
retroceder en la estructura (por ejemplo ../../propuestas.html nos llevaría a un archivo
situado en dos carpetas antes).

Hemos de tener en cuenta que también podemos mezclar .. y / para obtener toda la versatilidad
necesaria. Por ejemplo (../2013/proyectos).

Si al comenzar a probar el sitio web, observamos que algún enlace no funciona o alguna imagen no
se muestra, probablemente nos encontremos ante el conocido problema de las referencias relativas o
absolutas. Lo que puedes hacer para probar si todos tus enlaces son relativos es copiar la carpeta que
contiene el sitio web que estás creando, a otra carpeta de tu disco duro. De no ser todos tus enlaces
relativos, los archivos no quedarán referenciados exactamente igual que en la carpeta original y es
que cuando observarás que hay imágenes que no se cargan o páginas web a las que no se accede al
hacer clic en uno de los enlaces.
Enlaces relativos en un editor web
El concepto de enlaces relativos y absolutos se observa claramente en un editor web
como BlueGriffon. En la figura estamos creando un enlace desde la página principal a otra contenida
en la carpeta oferta. La dirección que se aprecia en un primer momento es la absoluta:

Como se puede observar, la URL que se genera no comienza por http:// para indicar que es una
página web ubicada en Internet, sino por file:// lo que nos indica que es un archivo situado en un
equipo local, que es el ordenador en el que estamos haciendo las pruebas.

Esa dirección funcionará correctamente en nuestro ordenador; pero si yo pruebo en otro sitio
o lo muevo del disco en el que está a otro diferente, dejará de funcionar. Y por
supuesto, cuando lleve todo el sitio a Internet, fallarán todos los enlaces.

Por ese motivo, activaremos siempre en estos casos la casilla La URL es relativa a la ubicación de
la página. Como se puede apreciar en la figura, la dirección cambia totalmente, dejando sólo la
información necesaria para que el enlace funcione en cualquier lugar.
Destino del enlace
Junto a _blank (abrir en pestaña nueva o ventana nueva) y _self (que no se suele emplear porque es
el valor predeterminado que indica que se abra en la misma ventana) contamos con _parent y _top,
que indican que la página se debe abrir en el marco anterior o en el espacio principal de la página. Se
suelen emplear al trabajar con los marcos que se crean con el elemento iframe, que permite mostrar
páginas dentro de páginas. Lo trataremos más adelante.

Añade a tu página web el siguiente código HTML:

de manera que podrás observar que al hacer clic sobre la palabra “buscador” se abre la pagina de
Google en una nueva pestaña. Sustituye el valor del parámetro target por el valor “_self” y
comprueba de nuevo el comportamiento del enlace.
Imágenes, sonidos, videos y licencias de uso
Antes de empezar a incorporar materiales gráficos y sonoros a nuestras páginas web debemos tener en cuenta
la licencia de uso de esos materiales.

Esto, que para un uso personal no tiene transcendencia, la tiene desde el momento en que pensamos publicar
nuestro trabajo en la Red.

Podemos encontrar varias posibilidades, al intentar incorporar un recurso de otras personas:

• La página o el recurso tiene establecido un copyright (c). Esto indica que la obra no se debería emplear, si
no es con el consentimiento expreso del autor.
• El material cuenta con una licencia abierta del tipo Creative Commons, GPL u otras tantas. En estos
casos, de forma general, el material se puede emplear, incorporar, modificar y difundir; pero siempre
debemos ceñirnos a lo que se indique en la licencia: si se nos indica aspectos como que debemos citar la
autoría o si no podemos hacer modificaciones. En estos casos no tendremos que pedir consentimiento,
sólo seguir las pautas indicadas. Este es el tipo de material que debemos emplear.
• En el material no hay nada indicado o no es posible localizar su fuente. Sería mejor NO emplearlo, ya
que podríamos encontrarnos con que su autor nos reclame su reconocimiento de autoría en un futuro.

Por tanto, la mejor recomendación para reutilizar contenidos es la de incorporar exclusivamente

materiales con licencias abiertas, como Creative Commons. En Internet encontraremos montones de
espacios donde localizar recursos que podemos emplear.

Si quieres obtener más información de esta licencia (Creative Commons) puedes buscar un video en
Internet con el nombre de “Sé creativo”.

Puedes utilizar materiales multimedia obtenidos desde http://vimeo.com/ y www.issuu.com

Entre los diferentes tipos de imágenes de mapa de bits intentaremos emplear el formato .png para
imágenes sencillas, rótulos, fondos y otros elementos de diseño, mientras que el formato .jpg se
emplea para fotografía e imágenes complejas. El formato .gif también es apropiado para imágenes
sencillas, como alternativa a .png.

Una imagen que se deba ver a buen tamaño en una página web puede tener una dimensión situada
entre los 500 y los 800 píxeles de anchura, y algo similar de alto.

Para incluir imágenes en nuestras páginas web lo podemos hacer de una de las siguientes maneras:

• Hacer referencia a una imagen almacenada en nuestro sitio web para lo cual escribiremos por
ejemplo <img src="imagenes/calle.jpg" />. En este caso se muestra una imagen que está
contenida en una carpeta llamada imagenes. Es una dirección relativa.
• Hacer referencia a una imagen que se encuentra almacenada en un sitio web independiente
del nuestro, para lo cual escribiremos por ejemplo <img
src="http://farm6.static.flickr.com/5178/5428759578_d6fb2288a4.jpg" />: Se muestra
una imagen ubicada en una dirección de Internet, en este caso del portal Flickr. Es una
dirección absoluta, que muestra una imagen que no está en nuestro ordenador ni en nuestro espacio
web, sino directamente en Internet. Esta última técnica (denominada hotlinking) entraña el riesgo de
que, si el portal de donde tomamos el recurso opta por realizar algún cambio, puede que la imagen
deje de mostrarse, pero puede ser un recurso interesante, si disponemos de poco espacio o
limitaciones de ancho de banda.
 Las dimensiones de las imágenes podemos especificarlas (si no queremos que la imagen ocupe tal
cual su tamaño real) de una de las dos siguientes maneras:

Descarga alguna foto con el motivo de una calle, guárdala en tu carpeta imagenes, y en tu página
web incluye el código HTML necesario para que se muestre la imagen de cada una de las tres
maneras que se han explicado.

Añade el parámetro alt dentro de la etiqueta imagen (por ejemplo, del siguiente modo alt="Calle
con coches y tiendas") e intenta averiguar cuál es su función.

Importantísimo: Debes tener en cuenta que con width y height podemos ajustar en un espacio de 80
píxeles, por ejemplo, una fotografía de 3000 píxeles de ancho. El inconveniente es que esa imagen
ocupa el mismo tamaño si la mostramos con 3000 píxeles que con 80 píxeles, por lo que, al
enviarse al navegador de nuestros visitantes, tardará bastante más tiempo en transferirse del que
debería.

Dicho de otra manera, antes de ubicar las imágenes en nuestro sitio web, deberemos escalarlas todas
para que tengan unas dimensiones acordes a las que necesitamos. Esto lo podemos hacer con el
GIMP. Tambien podemos aprovecharnos del GIMP para rotar una imagen, recortar una porción de
una imagen, o crear rótulos artísticos.

La inserción de una imagen con un editor como BlueGriffon resulta extremadamente sencilla. En el
menú Insertar seleccionamos la opción Imagen. Si queremos cambiar la imagen o modificar el texto
alternativo, podemos hacer doble clic sobre la imagen para editarla. También podemos, obviamente, hacer clic
en el botón “Código fuente” (source) de la parte inferior y modificar el código fuente HTML que incorpora la
imagen directamente.

Para modificar el tamaño de la imagen, haremos clic sobre ella desde BlueGriffon y veremos que aparecen
unos pequeños cuadros alrededor de la imagen (los llamados tiradores). Arrastrando estos cuadros, podemos
modificar sus dimensiones. Al modificar el tamaño de una imagen, es interesante ver cómo se reflejan esos
cambios dentro de la etiqueta img en el código fuente. Accediendo a la zona de código fuente podemos ver
que los cambios han provocado que se incorpore el parámetro style para recoger, mediante estilos css, los
cambios en los valores de anchura (width) y altura (height).

Ahondando algo más en los estilos, si quisiéramos modificar la ubicación de la imagen, podríamos
seleccionarla y modificar los valores del grupo Posición y distribución del panel Propiedades de estilo, que
se despliega haciendo clic en Paneles > Propiedades de estilo. Con esas opciones podemos modificar la
flotación de la imagen, añadir algún desplazamiento, etc. Puedes probar a modificar algunos valores y ver
cómo va modificándose la posición de la imagen y cómo se va modificando el código fuente HTML.
Video y audio

Un apartado especial merece la inserción de video y de audio.

Cuando queramos insertar video o audio hemos de tener en cuenta que el vídeo y el audio están codificados
con un formato concreto y, a su vez, todo ello está insertado en un formato de archivo contenedor: MPEG-
4 (archivos .mp4), Flash (.flv o .f4v), Ogg Vorbis (archivos .ogg), WebM (archivos .webm) o AVI (extensión
.avi).

Dentro de un mismo formato contenedor no siempre nos encontraremos la misma codificación ya que todos
los contenedores almacenan el contenido con algún tipo de compresión, pero no siempre se habrá utilizado el
mismo codec. Por diferentes cuestiones, los codec van mejorando y los más antiguos dejan de utilizarse en
beneficio de los más recientes.

Todo esto genera una combinatoria enorme de formatos a los que hay que incorporar la variable del
navegador. Cada navegador en la actualidad es capaz de reproducir un número concreto de formatos. A día de
hoy, casi todas las nuevas versiones de los navegadores son capaces de reproducir vídeo en formato WebM.
El formato Ogg Vorbis, por ejemplo, una muy buena alternativa por ser libre, aunque en la actualidad no
funciona en Internet Explorer ni en Safari.

Si el video que queremos utilizar se encuentra codificado con un codec poco común, podemos hacer una
transcodificación con programas como por ejemplo Handbrake y de este modo asegurarnos que el video va a
poder ser visto por la mayor cantidad de navegantes posibles.

También podemos hacer uso del complemento Fireogg para Firefox que podremos emplear para generar
archivos Ogg Vorbis o WebM a partir de otros formatos.

Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el
elemento HTML <video>. Su estructura es muy similar a la que empleábamos con las imágenes, aunque en
este caso sí lleva etiqueta de cierre.

<video src="video/fireworks_reducido.webm"></video>

La ruta del vídeo debe ser la que corresponda (en nuestro ejemplo, el archivo de video está colocado dentro de
una carpeta llamada video).

Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los
valores width y height. De hecho es recomendable hacerlo, para que el navegador sepa de antemano el
espacio que debe destinar al vídeo. Por tanto, este ejemplo es más adecuado que el anterior:

<video src="video/fireworks_reducido.webm" width="300" height="208"></video>

En cualquier caso, los valores que emplearemos serán los que utilizamos al crear el vídeo. No tiene sentido
tener un video almacenado en un sitio web (y que es el que va a ser transferido) de unas dimensiones mayores
(ancho y alto) que con las que posteriormente va a ser visualizado.

Hay otros parámetros que resultan útiles para la reproducción del vídeo:
• controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con
insertar ese término, sin más valores.
• autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo.
• preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario,
indicando preload="none", no se cargará hasta que el usuario haga clic en el vídeo para su
reproducción. Esta segunda opción es muy útil, si el vídeo no es el recurso fundamental de la página y
vamos a tener personas que no estén interesadas en verlo, ya que nos ahorrará mucho ancho de banda.
 • loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al
terminar su reproducción se detendrá.
• muted: el vídeo no tendrá sonido al comenzar.

Con esta información, descarga un video en formato “webm”, guárdalo en una carpeta a la que pondrás por
nombre “videos”, e incorpóralo a tu página web haciendo uso de una sentencia HTML similar a ésta:

Para insertar un vídeo con BlueGriffon, seleccionaremos la opción Insertar > Elemento HTML 5 > Video.
Aparecerá un cuadro de diálogo donde podremos especificar el archivo que vamos a insertar y algunos valores
adicionales.

Ahora que ya sabemos incorporar videos de los que disponemos en nuestro sitio web, vamos a aprender a
incorporarlos procedentes de otros sitios web. Sigue estos pasos para incrustar un vídeo de Youtube en una
página web.

1. Acceda a Youtube y seleccione un vídeo.

2. Haga clic en el botón Compartir. La dirección que aparece se puede emplear en diferentes sitios, como
blogs, herramientas sociales, etc.

3. En nuestro ejemplo haga clic en el botón Insertar que aparece más abajo. Copia en el código fuente de una
página de tu sitio web el pequeño fragmento de código HTML que se despliega; será similar a esto:

<iframe width="420" height="315" src="http://www.youtube.com/embed/aDyAdqaLSJ4" frameborder="0"

allowfullscreen></iframe>

En cuanto a la gestión de audio para utilizarlo en Internet es similar a la que hacemos con el vídeo. Podemos:
• insertar un archivo de audio en nuestra página mediante el elemento HTML <audio>,
• podemos incrustar archivos de audio externos en aquellas páginas que lo permitan y, por supuesto,
• podemos realizar enlaces a archivos mp3, ogg, wav, etc, para que se descarguen en el ordenador del
usuario y que los interprete con sus propias aplicaciones.

El mismo procedimiento que empleamos para el vídeo se repetiría aquí. Por ejemplo, para insertar un archivo
podcast en una página web, escribiríamos lo siguiente:

<audio src="podcast.mp3" controls autoplay>

Si optamos por el modelo externo, buscaremos un servidor que contenga esos archivos de audio y permita su
inserción. A veces encontraremos el término incrustar o embeber y embed, en inglés. Ambos modelos se
muestran en la figura:
Analiza el código HTML que ha conducido a cada una de las técnicas a la hora de incluir audio en nuestra
página web:
En resumen:

HTML define un nuevo elemento: <video>

Soportado por los siguientes navegadores:

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari soportan el elemento <video>.

Ejemplo:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

El atributo “control” añade los controles de video, como reproducción, pausa y volumen.

Es buena idea siempre incluir los atributos con la altura y la anchura.

El elemento <video> te permite indicar múltiples elementos <source>. Cada elemento <source>
puede enlazar con diferentes archivos de video. El navegador usará el primer formato reconocido.

En la actualidad hay 3 formatos de video soportados por el elemento <video>: MP4, WebM, and
Ogg:

Navegador MP4 WebM Ogg

Internet Explorer 9+ YES NO NO

Chrome 6+ YES YES YES

Firefox 3.6+ NO YES YES

Safari 5+ YES NO NO

Opera 10.6+ NO YES YES

• MP4 = MPEG 4 files con H264 video codec y AAC audio codec
• WebM = WebM files con VP8 video codec y Vorbis audio codec
• Ogg = Ogg files con Theora video codec y Vorbis audio codec

Tipos MIME para los formatos de video:

Formato Tipo MIME

MP4 video/mp4

WebM video/webm

Ogg video/ogg
HTML define un nuevo elemento: <audio>

Soportado por los siguientes navegadores:

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari soportan el elemento <video>.

Ejemplo:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

El atributo “control” añade los controles de audio, como reproducción, pausa y volumen.

El elemento <audio> te permite indicar múltiples elementos <source>. Cada elemento <source>
puede enlazar con diferentes archivos de video. El navegador usará el primer formato reconocido.

En la actualidad hay 3 formatos de audio soportados por el elemento <audio>: MP3, Wav, and Ogg:

Navegador MP3 Wav Ogg

Internet Explorer 9+ YES NO NO

Chrome 6+ YES YES YES

Firefox 3.6+ NO YES YES

Safari 5+ YES YES NO

Opera 10+ NO YES YES

Tipos MIME para los formatos de video:

Formato Tipo MIME

MP3 audio/mpeg

Wav audio/wav

Ogg audio/ogg
Rótulos artísticos con GIMP
Gimp permite también crear pequeños rótulos, que podemos utilizar a modo de títulos para las diferentes
partes del sitio web. Veamos cómo se consigue:

1. Abrimos Gimp y en el menú Archivo seleccionamos la opción Nuevo.

2. En el cuadro de diálogo de la figura seleccionamos las dimensiones que tendrá el rótulo. Debemos recordar
lo que hemos visto sobre dimensiones de la pantalla.

3. Haremos clic en la herramienta Texto (en forma de letra A) y a continuación en la imagen. Escribiremos el
título o el texto.

4. Utilizando los controles que rodean el cuadro de texto, podemos modificar su tamaño o desplazarlo, si
pulsas en su interior. En la barra de herramientas, en la parte inferior, encontramos los controles necesarios
para modificar tipo de letra, color y otros aspectos. Todo ello se recoge en la figura:

5. Una vez que el texto tiene el formato apropiado y hemos colocado en la imagen, haremos clic en Cerrar el
cuadro de diálogo de edición de texto.
6. En este momento aún podemos añadir algunos efectos al rótulo, mediante las opciones del menú Filtro. En
nuestro ejemplo hemos aplicado un sencillo efecto de sombra arrojada. Podemos probar un filtro y, si el
resultado no nos convence, podemos deshacer los cambios pulsando Ctrl-Z.

7. Cuando la imagen esté terminada, la guardaremos mediante la opción Archivo>Guardar. Debemos

especificar el formato de la imagen; generalmente con PNG o JPG será suficiente. PNG será especialmente
útil, si queremos mantener una transparencia del fondo.

Además de en el formato elegido para la web, suele ser una buena idea la de guardar la imagen en el formato
nativo de GIMP, conocido como XCF. De ese modo, podremos retomar la imagen y aplicarle modificaciones,
si lo necesitamos. Debemos pensar que las imágenes PNG o JPG no mantienen información sobre cómo se
creó la imagen, si llevaba filtros, etc. En cambio, el formato XCF sí lo hace.

La figura muestra el resultado final obtenido al insertar la imagen en nuestra página web.

Lo siguiente que debemos hacer para crear rótulos atractivos es realizar muchas pruebas e investigar las
enormes posibilidades de los programas de retoque fotográfico y de dibujo. En la figura mostramos otro
ejemplo de rótulo; en este caso, empleando una imagen como fondo a través de una capa.
Maquetación
El contenido de una página web puede ser diferenciado en zonas o bloques, que pueden estar ubicados en la
página de muchas formas diferentes.

La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle
diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

El uso de la etiqueta div es sencillo. Codifica en tu página web este ejemplo:

Prueba ahora a aplicar una modificación a la apariencia de ese bloque, añadiendo un estilo de borde a la
etiqueta <div>; quedaría así:

Eso es todo lo que necesitamos saber respecto de la etiqueta <div>: configura espacios dentro de la página.

Después de un </div> se comienza con una nueva línea. Esa es una de las diferencias principales con la otra
etiqueta que empleamos para diferenciar contenidos, la etiqueta <span>. Con ella conseguimos un efecto
similar, pero en el interior de un párrafo. Recordemos que span se emplea con frecuencia para aplicar estilos
en el interior de un bloque de texto.

Adicionalmente, las etiquetas div y span se suelen acompañar de uno o dos parámetros destinados a
identificar ese bloque:
• id: permite establecer un identificador único para el bloque. Así podremos referirnos al bloque de
forma inequívoca.
• class: es similar a id, pero con la ventaja de que se puede repetir; así que podemos tener
varios <div>diferentes con la misma clase.

Este proceso se vuelve muy sencillo si nos apoyamos en las opciones del panel Propiedades de estilo del
editor BlueGriffon. En concreto nos interesan las opciones de Posición y distribución, recogidas en la
siguiente figura:
El panel en cuestión se despliega mediante la opción Paneles>Propiedades de estilo o mediante el icono
correspondiente en la barra de iconos.

Utilizando los valores de Flotación podemos ubicar el bloque a la izquierda, a la derecha e incluso centrarlo
en determinados momentos.

Traducido a estilos, este cambio es tan sencillo como indicar lo siguiente:

Mediante BlueGriffon, podemos ir seleccionando cada uno de los bloques div creados. Hay que recordar que
para seleccionar un <div> concreto podemos utilizar el selector de etiquetas situado en la zona inferior del
editor. A continuación podemos aplicarles el estilo que queramos, o la posición en la página (posición
absoluta), mediante las opciones del panel Propiedades de estilo del editor BlueGriffon, accesibles desde el
menú Paneles. Al hacer esto, aparecerán unos controles alrededor del <div> que podremos modificar
para ajustar su ancho y alto, además de su posición, como se muestra en la figura.

Algunos de los valores que se irán incorporando como estilo (style) son los siguientes:
• position: absolute: indica que vamos a establecer una posición fija para ese <div> en la página. El
resto de los valores situarán el elemento de diferente forma.
 • left (izquierdo), right (derecho), bottom (inferior) y top (superior): estos valores, seguidos de un
número de píxeles, porcentaje u otros valores, establecen la distancia que habrá entre el div y el borde
respectivo.
• width (ancho) y height (alto): indican la altura o anchura que tendrá el cuadro.

En el panel de estilos encontramos una opción denominada Columnas que está muy vinculada con el
concepto de maquetación de un bloque de texto.

Utilizando esta opción, crea un diseño de columnas lo más parecido posible al de la imagen:
Organización de la información: tablas y listas
En ocasiones necesitaremos generar secuencias de contenidos, ya sean en una dimensión (listas) o en dos
dimensiones (tablas). Revisaremos en este espacio las posibilidades en este sentido.

Listas no ordenadas:

Listas ordenadas:

Las listas con el editor web BlueGriffon se generan mediante dos botones muy habituales, plasmados en la
figura:

Aunque no todos los editores cuentan con esta otra opción, en BlueGriffon encontramos los botones de la
figura destinados a crear listas de definición.

Para incrementar o disminuir la sangría de una parte de la lista (permitiéndonos generar sublistas dentro de
una lista):
Estos dos botones también son útiles para incrementar la sangría de un párrafo concreto respecto al texto,
remarcando así que ese texto se diferencia del resto. Este tipo de operaciones también se pueden realizar
mediante los estilos.

Para modificar los estilos de una lista recurriremos nuevamente al panel Propiedades de estilo. Todo lo que
desde aquí modifiquemos se verá reflejado haciendo uso de estilos.

Sin entrar en los aspectos estéticos que ya hemos visto o los que analizaremos más adelante, contamos con
una categoría denominada Listas, con algunas opciones específicas de las listas:

• Tipo: es la opción de estilos denominada list-style-type y, dependiendo del valor asignado, se

modificará la apariencia de la viñeta de la lista o el tipo de numeración, si es una lista ordenada.
Podemos aplicarlo a la lista completa o a algunos elementos concretos
• Posición: la opción list-style-position tiene dos valores, inside y outside, que harán que los
elementos de la lista salgan hacia dentro o hacia fuera.
• Imagen: el valor list-style-image se emplea para definir una imagen como viñeta.

A la hora de crear Tablas, y tal como sucedía con las listas, HTML sólo cuenta con etiquetas capaces de
definir la estructura completa de la tabla, pero no su apariencia; los colores, anchuras de línea, fondos y
otros aspectos se dejan para los estilos CSS.

Una tabla mínima se diseña con tres etiquetas y sus respectivos cierres:

• <table> para definir el comienzo de la tabla. A la tabla le podemos añadir el

parámetro border="1" para indicar si la tabla tendrá un borde.
• <tr> para indicar el comienzo de una fila.
• <td> para el comienzo de una celda.

Codifica el siguiente ejemplo de tabla:

Mediante código HTML diseña una tabla como la de la siguiente imagen:

Una tabla semánticamente correcta suele emplear algunas etiquetas más que, si bien no son necesarias, son
recomendables.

• <caption>: empleada al comienzo de la tabla, le asigna un nombre general a la tabla. En la tabla anterior utiliza
esta etiqueta para ubicar el texto “Tardes ocupadas”
• <colgroup>: a continuación de caption podemos destacar un número de columnas con una línea similar a
ésta: <colgroup style="background-color: rgb(220, 220, 200);" span="5"> </colgroup>. Se emplea el
parámetro span para indicar el número de columnas que se verán afectadas.
• <thead>: permite definir una o varias filas como cabeceras de la tabla. Al utilizarla, en lugar de definir las
celdas con <td>emplearemos <th>, mientras que las filas seguirán creándose con <tr>.
• <tbody>: si utilizamos thead para definir la cabecera, emplearemos también <tbody> para indicar en qué punto
comienzan las filas normales de la tabla.
• <tfoot>: por último, la pareja anterior se complementa con tfoot para establecer las filas que formarán parte del
final de la tabla.

Al trabajar con estilos, podremos definir apariencias muy concretas para cada parte de una tabla; ahí es donde cobra
sentido el uso de las secciones, además de facilitar el trabajo de los lectores para personas con discapacidad y para los
buscadores de Internet.
Además, cada celda de una tabla puede contar con dos parámetros, para que la celda se extienda más allá de lo normal.

• colspan: hace que la celda se extienda hacia la derecha, tantas celdas como se indique en su valor.
• rowspan: la celda se extenderá hacia abajo, tantas filas como se indique.

Crea una tabla que diseñarás con este código HTML:

<tr style="background-color: rgb(102, 255, 153);">

<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

Ahora sustituye la primera fila por este código y comprueba el resultado:

Ahora sustituye la segunda fila por este código y comprueba el resultado:

Desde el editor web, la gestión de la tabla se hace desde el menú Tabla:

Hay varios métodos para modificar las dimensiones de las celdas. La forma más inmediata es colocar el
puntero del ratón en la división de dos filas que aparece en el lateral izquierdo o en la división de dos
columnas sobre la página web. En ese punto arrastraremos el puntero mientras mantenemos pulsado el botón
del ratón. La fila entera o la columna se redimensionará.

Aún queda un último conjunto de opciones destinadas a modificar la apariencia de nuestra tabla: la
opción Tabla > Propiedades de tabla:

• Desde la pestaña Tabla podemos aplicar cambios a la estructura de la tabla, a sus

dimensiones e incluso definir el borde de la misma.

• En la pestaña Celda actuaremos sobre las celdas que estuviesen seleccionadas o sobre la fila
o columna completa. De nuevo podemos especificar la dimensión, la alineación del contenido
e incluso el color de fondo.

Una vez más el panel Propiedades de estilo nos permite modificar el aspecto de cualquier elemento que
tengamos seleccionado, tanto si es la tabla completa, como un elemento interior.

En el apartado Tablas, encontraremos algunas opciones exclusivas de las tablas, entre ellas:

• Colocar el nombre de la tabla arriba o abajo (Posición de la leyenda o la propiedad caption-side)

• Tipo de borde: si será contraido (le aporta un aspecto más actual o separado (cambiando el
valor Bordes de la tabla o la propiedad border-collapse).

Como siempre, para aplicar estilos con BlueGriffon resulta fundamental el uso del selector de etiquetas de la
barra inferior. Con él podremos seleccionar un elemento concreto y así aplicarle estilo. Podemos seleccionar
la celda, pero también cualquiera de los elementos que le anteceden, como la fila, la tabla, etc.
Recurso TIC: Publicación de una página web
El paso siguiente, una vez que nuestra web está terminada, es el de transferir los archivos a un servidor web
para que pasen a estar disponibles para cualquier persona que quiera utilizarlos.

El modelo que se sigue es sencillo; para que una página pueda ser visualizada por cualquier persona solemos
recurrir a los servidores web, por varios motivos:

• Un servidor web es un ordenador (simplificando un poco) que tiene presencia en Internet, es decir,
que tiene una dirección IP asociada, además de un nombre fácilmente identificable asociado a esa
dirección IP (del tipo www.elservidor.com). Con esto nos aseguramos de que lo que coloquemos en
ese servidor será fácilmente localizable mediante una URL concreta, que se compondrá del nombre
del servidor más los nombres de las carpetas que se nos asignen, generalmente.

• Un servidor web está permanentemente encendido, todas las horas del día durante todo el año.
Imaginemos que vamos a consultar nuestro periódico favorito y nos encontramos con que no podemos
hacerlo, porque alguien ha apagado el servidor que lo aloja. No es un modelo de funcionamiento que
tenga sentido, ya que no se sabe a qué hora vendrán nuestros usuarios. Así que los servidores de
Internet funcionan a todas horas.

• Un servidor web suele contar con un buen ancho de banda, capaz de dar respuesta a muchas
peticiones simultáneas.

Así, si nuestro sitio web se vuelve un éxito y tenemos centenares de visitas por minuto, el servidor será capaz
de transmitir nuestras páginas a los usuarios correctamente. Si esto lo tuviésemos que hacer con nuestro
ordenador, sería inviable y los usuarios no podrían acceder al sitio.

Ya vamos vislumbrando el modelo de funcionamiento de los servidores de páginas web. Básicamente esos
ordenadores tienen instalado una aplicación denominada “servidor de páginas
web”, un programa que está permanentemente escuchando para ver si le llegan
peticiones.
Cuando un usuario desde su ordenador abre el navegador e intenta acceder a una página alojada en ese
servidor, la aplicación recibirá la petición, localizará la página y los recursos asociados y se los transferirá al
usuario (esto se hace mediante una serie de normas denominadas protocolo http, por eso se suele anteceder las
direcciones web de http:// ), que a su vez verá la página en su navegador.

Hay diferentes aplicaciones (programas “servidores de páginas web”) para servir páginas web. Una de las más
extendidas es Apache, que además es software libre, por lo que podríamos llegar a montar nuestro pequeño
servidor de pruebas, si fuese necesario, aunque no es el caso.

Transferencia FTP
Hasta aquí está claro, pero, ¿cómo envío mis archivos html, mis imágenes y mis cosas al servidor de páginas
web?

El método más extendido es transferir los archivos mediante un conjunto de normas identificadas
como Protocolo de Transferencia de Ficheros (que son las siglas de FTP). Así pues, para enviar las páginas
web al ordenador servidor, normalmente emplearemos una aplicación de transferencia FTP.

En nuestro caso emplearemos Filezilla, que es software libre y multiplataforma, por lo que lo podremos
utilizar sin coste alguno desde cualquier sistema operativo.
Se puede descargar desde http://filezilla-project.org/

Una vez descargada, procederemos a instalarla con los métodos habituales. Filezilla nos mostrará su pantalla
inicial, recogida en la figura:

El espacio se distribuye de la siguiente manera:

• En la parte izquierda encontramos un explorador de archivos que nos muestra el contenido de nuestro
ordenador. Con él podremos desplazarnos hasta la carpeta que contiene el sitio web que hemos estado
creando.
• La parte derecha nos mostrará las carpetas de nuestro servidor web. Allí aparecerán los archivos que
hayamos transferido y podremos editarlos, modificarlos, borrarlos o realizar cualquier operación que
necesitemos.
• El panel superior presenta los mensajes que emite el servidor. Es información administrativa, que sólo
nos interesará si se produce alguna incidencia.
• En el panel inferior veremos información sobre las transferencias de archivos, los que queden
pendientes, los que han tenido dado lugar a errores en la transmisión, etc
Para conectar con un servidor remoto previamente tenemos que tener una cuenta (un acceso permitido que
será validado con un usuario y una contraseña) en ese servidor. Una cuenta es un nombre de usuario y
contraseña, que nos darán acceso a una carpeta concreta del servidor.

En muchos casos nuestro proveedor de Internet nos facilita espacio web en sus servidores; en otros, lo hacen
nuestras propias empresas de trabajo. Si no sucede así, siempre podremos recurrir a los servidores web
gratuitos. Hay multitud de servidores web que facilitan espacios gratuitos con ciertas limitaciones o publicidad
para las personas o empresas que quieren crear sus primeras páginas web. No pondremos ningún ejemplo,
porque resulta tan sencillo como buscar páginas web que contengan las palabras: servidor web gratuito en
Internet.

Si buscamos servidores gratuitos en Internet, también encontraremos muchos resultados empleando el término
inglés, hosting o host, que son los términos que se emplean para describir el alojamiento o el servidor web.
Independientemente del tipo de servidor por el que optemos, al final debemos contar con tres datos
imprescindibles:

• Dirección del servidor FTP: la URL con la que accederemos al servidor de FTP.
• Nombre de usuario: el nombre de nuestra cuenta.
• Contraseña: la clave para acceder a la cuenta.

Con esos tres datos seremos capaces de conectarnos a nuestro servidor de ftp en el 99% de los casos. En
ocasiones puede que nos indiquen un par de datos más:
• Carpeta del servidor: ruta en la que debemos subir los archivos. Casi nunca se indica porque el propio
servidor ya nos lleva a la carpeta apropiada.
• Puerto FTP: en algunos servidores hay que indicar este número, que es punto en el que el servidor
escucha las peticiones que le llegan para realizar transferencias FTP. Normalmente no se indica
porque es casi siempre el número 21.

Cuando transmitas tu sitio web (o parte del mismo) al servidor web, o cuando lo copies a otra carpeta (o
incluso a un pendrive) la estructura de los archivos debe mantenerse exactamente igual que la de origen, es
decir, si habíamos distribuido los archivos en una determinada jerarquía de carpetas, deberemos respetar dicha
jerarquía.

No debemos olvidar que nuestra página principal debe llamarse index.htm o index.html, ya que ésa será la que
se cargue automáticamente por parte del servidor, cuando alguien acceda a nuestro espacio.

En este punto ya podemos acceder al navegador e introducir la dirección correspondiente para ver nuestro
espacio web. La dirección nos la facilita también el servicio de almacenamiento que estemos empleando.