You are on page 1of 33

HTML5

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


Ejecutar el programa BlueGriffon.
Antes que nada atenderemos a un problema que se nos podra plantear a futuro, con los caracteres
especiales del castellano y valenciano (tilde, diresis, , , , etc):
Por cuestiones relacionadas con el tipo de codificacin 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 ees y otros caracteres especiales.
Los motivos por los que esto sucede son complejos, pero no as la solucin, que pasa por indicar
en BlueGriffon que reemplace los caracteres especiales por cdigos estandarizados en HTML.
Esto se consigue seleccionando la opcin Herramientas > Preferencias y posteriormente accedemos a
la pestaa Documentos. En la parte denominada Mostrar los siguientes caracteres como
entidades seleccionaremos la opcin Todos los caracteres especiales de HTML 4.
En una pgina nueva copiar y pegar los cuatro prrafos siguientes.
Incluir dos veces al menos cada una de las etiquetas <p>, <br /> y <hr /> para acompaar y/o separar los
cuatro prrafos 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 pgina nueva el siguiente cdigo en HTML.
Hacer una modificacin para incluir en el ttulo de la pgina tu nombre y apellido.

Ejercicio incluyendo etiquetas en la seccin <head> </head>

Una vez hayas incluido ese cdigo en la seccin de la cabecera, abre la pgina 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
Diseo.
Debers abrir la ltima pgina web con la que has estado trabajando, incorporar las siguientes
Propiedades de pgina que se proponen, y observar y analizar el cdigo 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 cdigo informtico,
<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 existan tambin 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
texto de la palabra

estilos, es decir, siempre ir acompaado el formato del

style.

Los estilos se pueden aplicar en nuestro sitio web desde tres sitios diferentes:
Estilos en un archivo externo: definimos una serie de reglas CSS en un archivo, que enlazaremos
desde nuestra pgina web, en la cabecera de la misma. Este es el mtodo ms aconsejado de trabajo y
el que emplearemos en el futuro.
2. Estilos en la cabecera de la pgina web: de nuevo en la cabecera podemos indicar las reglas CSS
que necesitemos, afectando de este modo slo a la pgina web en cuestin.
3. Estilos en la pgina web: podemos aplicar estilos dentro de un elemento concreto de la pgina web,
mediante el parmetro style que se puede establecer para cualquier etiqueta, como por ejemplo:
1.

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


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

Pero, cmo podramos modificar slo una frase dentro de un prrafo o una simple palabra? La respuesta la
encontramos en el elemento HTML denominado <span>. A continuacin, un ejemplo:
<h1>Qu entendemos por un <span style="color: rgb(0, 153, 0);"> prrafo </span> </h1>

En el men Formato del BlueGriffon encontramos algunas opciones ms relacionadas con la aplicacin de
estilos especficos al texto, tanto los ms 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 importantsimas
orientadas a eliminar estilos en la pgina y a convertir enlaces en texto normal ambas opcin muy tiles si
estamos copiando texto desde otro lugar y queremos limpiar ese estilo heredado para aplicar los nuestros
propios.

La aplicacin 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 botn Establecer estilos CSS o en el
men Paneles>Propiedades de estilo.

Enlaces externos y enlaces de correo electrnico


Incluye en tu pgina web el siguiente enlace externo:

Puedes crear enlaces desde el programa BlueGriffon directamente, tal y como comentamos a
continuacin:
1. Introduciremos en la pgina web el texto, o la imagen, que queremos que se convierta en un
enlace.
2. Seleccionaremos ese texto, o esa imagen, con el ratn.
3. Haremos clic en el icono Enlace (en forma de cadena).

4. En el cuadro de dilogo que aparece, escribiremos la direccin de la pgina web o la


pegaremos, si la habamos copiado previamente desde el navegador.
5. Al hacer clic en Aceptar, nuestro enlace estar ya listo.
Aade a tu pagina web un enlace a la ma, haciendo uso de esta tcnica. Observa el cdigo fuente
que BlueGriffon ha generado por ti.
Si se ha producido algn error o queremos modificar el enlace, slo 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
tcnicas 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 presentacin
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 electrnico slo tiene sentido incluirlos si suponemos que el
visitante tiene instalado un programa gestor de correo electrnico 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 cul es tu programa gestor de correo electrnico predeterminado,
aunque si no tienes configurada en l ninguna cuenta de correo electrnico, no te servir de nada.
Fijate que adems de http:// para indicar una direccin 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 podrs indicar que el enlace es a una direccin de correo electrnico marcando la
casilla adecuada:

Modifica el cdigo 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
ests trabajando para aprender diseo web, la siguiente estructura de archivos y carpetas:

Las carpetas tienen en su interior, imgenes o archivos de pginas web. Los archivosde pginas web
que crees apenas te molestes en llenarlos de contenido.
Llegados a este punto, necesitaremos realizar varios enlaces desde la pgina principal (la
llamada index.html) hacia otras pginas 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 pginas web de un mismo sitio web nos interesa generar
referencias relativas, es decir, que los enlaces tomarn sentido dependiendo de la pgina web que se
est visualizando en ese momento. Por ejemplo, si desde la pgina index.html del ejemplo anterior
quiero enlazar con la pgina presentacin.html que se encuentra en la misma carpeta, podra hacerlo
de dos maneras:
1.

con el mtodo absoluto:


<a href = http://www.misitioweb.com/presentacion.html> Accede a la presentacin</a>

2.

o mediante un sencillo enlace relativo:


<a href=presentacion.html>Accede a la presentacin</a>
Dado que las dos pginas estn en la misma carpeta (tanto index.html como
presentacin.html), slo 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 pginas de un mismo sitio web:
a) Si utilizamos la URL absoluta, nos obligamos a indicar de antemano la direccin completa del
sitio web; algo que quizs no tengamos mientras estamos preparando las pginas y que adems nos
obligara a colocar las pginas 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 dejaran 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, segn la pgina web que se est visualizando, y hacia la que se refiere el enlace en el que
haremos clic, deberemos utilizar una de las tres tcnicas siguientes para direccionar el enlace:

Si las pginas estn en la misma carpeta: indicamos el nombre de los archivos nada ms.

Si est en una subcarpeta: indicamos la subcarpeta con una


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 llevara a un archivo
situado en dos carpetas antes).

/ como separador (por ejemplo,

Hemos de tener en cuenta que tambin podemos mezclar .. y / para obtener toda la versatilidad
necesaria. Por ejemplo (../2013/proyectos).
Si al comenzar a probar el sitio web, observamos que algn 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 ests creando, a otra carpeta de tu disco duro. De no ser todos tus enlaces
relativos, los archivos no quedarn referenciados exactamente igual que en la carpeta original y es
que cuando observars que hay imgenes que no se cargan o pginas 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 pgina principal a otra contenida
en la carpeta oferta. La direccin 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
pgina 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 direccin 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, fallarn todos los enlaces.
Por ese motivo, activaremos siempre en estos casos la casilla La URL es relativa a la ubicacin de
la pgina. Como se puede apreciar en la figura, la direccin cambia totalmente, dejando slo la
informacin necesaria para que el enlace funcione en cualquier lugar.

Destino del enlace


Junto a _blank (abrir en pestaa 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 pgina se debe abrir en el marco anterior o en el espacio principal de la pgina. Se
suelen emplear al trabajar con los marcos que se crean con el elemento iframe, que permite mostrar
pginas dentro de pginas. Lo trataremos ms adelante.
Aade a tu pgina web el siguiente cdigo HTML:

de manera que podrs observar que al hacer clic sobre la palabra buscador se abre la pagina de
Google en una nueva pestaa. Sustituye el valor del parmetro target por el valor _self y
comprueba de nuevo el comportamiento del enlace.

Imgenes, sonidos, videos y licencias de uso


Antes de empezar a incorporar materiales grficos y sonoros a nuestras pginas 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 pgina o el recurso tiene establecido un copyright (c). Esto indica que la obra no se debera 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 ceirnos a lo que se indique en la licencia: si se nos indica aspectos como que debemos citar la
autora o si no podemos hacer modificaciones. En estos casos no tendremos que pedir consentimiento,
slo 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. Sera mejor NO emplearlo, ya
que podramos encontrarnos con que su autor nos reclame su reconocimiento de autora en un futuro.

Por tanto, la mejor recomendacin 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 ms informacin 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 imgenes de mapa de bits intentaremos emplear el formato .png para
imgenes sencillas, rtulos, fondos y otros elementos de diseo, mientras que el formato .jpg se
emplea para fotografa e imgenes complejas. El formato .gif tambin es apropiado para imgenes
sencillas, como alternativa a .png.
Una imagen que se deba ver a buen tamao en una pgina web puede tener una dimensin situada
entre los 500 y los 800 pxeles de anchura, y algo similar de alto.
Para incluir imgenes en nuestras pginas 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 direccin 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 direccin de Internet, en este caso del portal Flickr. Es una
direccin absoluta, que muestra una imagen que no est en nuestro ordenador ni en nuestro espacio
web, sino directamente en Internet. Esta ltima tcnica (denominada hotlinking) entraa el riesgo de
que, si el portal de donde tomamos el recurso opta por realizar algn 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 imgenes podemos especificarlas (si no queremos que la imagen ocupe tal
cual su tamao real) de una de las dos siguientes maneras:

Descarga alguna foto con el motivo de una calle, gurdala en tu carpeta imagenes, y en tu pgina
web incluye el cdigo HTML necesario para que se muestre la imagen de cada una de las tres
maneras que se han explicado.
Aade el parmetro alt dentro de la etiqueta imagen (por ejemplo, del siguiente modo alt="Calle
con coches y tiendas") e intenta averiguar cul es su funcin.
Importantsimo: Debes tener en cuenta que con width y height podemos ajustar en un espacio de 80
pxeles, por ejemplo, una fotografa de 3000 pxeles de ancho. El inconveniente es que esa imagen
ocupa el mismo tamao si la mostramos con 3000 pxeles que con 80 pxeles, por lo que, al
enviarse al navegador de nuestros visitantes, tardar bastante ms tiempo en transferirse del que
debera.
Dicho de otra manera, antes de ubicar las imgenes 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 porcin de
una imagen, o crear rtulos artsticos.
La insercin de una imagen con un editor como BlueGriffon resulta extremadamente sencilla. En el
men Insertar seleccionamos la opcin Imagen. Si queremos cambiar la imagen o modificar el texto
alternativo, podemos hacer doble clic sobre la imagen para editarla. Tambin podemos, obviamente, hacer clic
en el botn Cdigo fuente (source) de la parte inferior y modificar el cdigo fuente HTML que incorpora la
imagen directamente.
Para modificar el tamao de la imagen, haremos clic sobre ella desde BlueGriffon y veremos que aparecen
unos pequeos cuadros alrededor de la imagen (los llamados tiradores). Arrastrando estos cuadros, podemos
modificar sus dimensiones. Al modificar el tamao de una imagen, es interesante ver cmo se reflejan esos
cambios dentro de la etiqueta img en el cdigo fuente. Accediendo a la zona de cdigo fuente podemos ver
que los cambios han provocado que se incorpore el parmetro style para recoger, mediante estilos css, los
cambios en los valores de anchura (width) y altura (height).
Ahondando algo ms en los estilos, si quisiramos modificar la ubicacin de la imagen, podramos
seleccionarla y modificar los valores del grupo Posicin y distribucin del panel Propiedades de estilo, que
se despliega haciendo clic en Paneles > Propiedades de estilo. Con esas opciones podemos modificar la
flotacin de la imagen, aadir algn desplazamiento, etc. Puedes probar a modificar algunos valores y ver
cmo va modificndose la posicin de la imagen y cmo se va modificando el cdigo fuente HTML.

Video y audio
Un apartado especial merece la insercin de video y de audio.
Cuando queramos insertar video o audio hemos de tener en cuenta que el vdeo y el audio estn codificados
con un formato concreto y, a su vez, todo ello est insertado en un formato de archivo contenedor: MPEG4 (archivos .mp4), Flash (.flv o .f4v), Ogg Vorbis (archivos .ogg), WebM (archivos .webm) o AVI (extensin
.avi).
Dentro de un mismo formato contenedor no siempre nos encontraremos la misma codificacin ya que todos
los contenedores almacenan el contenido con algn tipo de compresin, pero no siempre se habr utilizado el
mismo codec. Por diferentes cuestiones, los codec van mejorando y los ms antiguos dejan de utilizarse en
beneficio de los ms 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 nmero concreto de formatos. A da de
hoy, casi todas las nuevas versiones de los navegadores son capaces de reproducir vdeo 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 comn, podemos hacer una
transcodificacin 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.
Tambin 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 vdeo en un formato adecuado, podemos insertarlo en la pgina web mediante el
elemento HTML <video>. Su estructura es muy similar a la que emplebamos con las imgenes, aunque en
este caso s lleva etiqueta de cierre.
<video src="video/fireworks_reducido.webm"></video>
La ruta del vdeo debe ser la que corresponda (en nuestro ejemplo, el archivo de video est colocado dentro de
una carpeta llamada video).
Como suceda con las imgenes, en un vdeo 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 vdeo. Por tanto, este ejemplo es ms adecuado que el anterior:
<video src="video/fireworks_reducido.webm" width="300" height="208"></video>
En cualquier caso, los valores que emplearemos sern los que utilizamos al crear el vdeo. 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 parmetros que resultan tiles para la reproduccin del vdeo:
controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con
insertar ese trmino, sin ms valores.
autoplay: al indicar este valor, el vdeo se reproducir en cuanto est listo.
preload: hace que el vdeo se empiece a cargar en cuanto se accede a la pgina. Por el contrario,
indicando preload="none", no se cargar hasta que el usuario haga clic en el vdeo para su
reproduccin. Esta segunda opcin es muy til, si el vdeo no es el recurso fundamental de la pgina y
vamos a tener personas que no estn interesadas en verlo, ya que nos ahorrar mucho ancho de banda.

loop: indicndolo conseguiremos que el vdeo se reproduzca cclicamente. Si no indicamos nada, al


terminar su reproduccin se detendr.
muted: el vdeo no tendr sonido al comenzar.

Con esta informacin, descarga un video en formato webm, gurdalo en una carpeta a la que pondrs por
nombre videos, e incorpralo a tu pgina web haciendo uso de una sentencia HTML similar a sta:

Para insertar un vdeo con BlueGriffon, seleccionaremos la opcin Insertar > Elemento HTML 5 > Video.
Aparecer un cuadro de dilogo 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 vdeo de Youtube en una
pgina web.
1. Acceda a Youtube y seleccione un vdeo.
2. Haga clic en el botn Compartir. La direccin que aparece se puede emplear en diferentes sitios, como
blogs, herramientas sociales, etc.
3. En nuestro ejemplo haga clic en el botn Insertar que aparece ms abajo. Copia en el cdigo fuente de una
pgina de tu sitio web el pequeo fragmento de cdigo 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 gestin de audio para utilizarlo en Internet es similar a la que hacemos con el vdeo. Podemos:
insertar un archivo de audio en nuestra pgina mediante el elemento HTML <audio>,
podemos incrustar archivos de audio externos en aquellas pginas 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 vdeo se repetira aqu. Por ejemplo, para insertar un archivo
podcast en una pgina web, escribiramos 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
insercin. A veces encontraremos el trmino incrustar o embeber y embed, en ingls. Ambos modelos se
muestran en la figura:

Analiza el cdigo HTML que ha conducido a cada una de las tcnicas a la hora de incluir audio en nuestra
pgina 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 aade los controles de video, como reproduccin, pausa y volumen.
Es buena idea siempre incluir los atributos con la altura y la anchura.
El elemento <video> te permite indicar mltiples 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 aade los controles de audio, como reproduccin, pausa y volumen.
El elemento <audio> te permite indicar mltiples 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

Rtulos artsticos con GIMP


Gimp permite tambin crear pequeos rtulos, que podemos utilizar a modo de ttulos para las diferentes
partes del sitio web. Veamos cmo se consigue:
1. Abrimos Gimp y en el men Archivo seleccionamos la opcin Nuevo.
2. En el cuadro de dilogo de la figura seleccionamos las dimensiones que tendr el rtulo. 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 continuacin en la imagen. Escribiremos el
ttulo o el texto.
4. Utilizando los controles que rodean el cuadro de texto, podemos modificar su tamao 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 dilogo de edicin de texto.

6. En este momento an podemos aadir algunos efectos al rtulo, 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 opcin 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.
Adems 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 imgenes PNG o JPG no mantienen informacin sobre cmo 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 pgina web.

Lo siguiente que debemos hacer para crear rtulos atractivos es realizar muchas pruebas e investigar las
enormes posibilidades de los programas de retoque fotogrfico y de dibujo. En la figura mostramos otro
ejemplo de rtulo; en este caso, empleando una imagen como fondo a travs de una capa.

Maquetacin
El contenido de una pgina web puede ser diferenciado en zonas o bloques, que pueden estar ubicados en la
pgina de muchas formas diferentes.
La etiqueta <div> se emplea para definir un bloque de contenido o seccin de la pgina, para poder aplicarle
diferentes estilos e incluso para realizar operaciones sobre ese bloque especfico.
El uso de la etiqueta div es sencillo. Codifica en tu pgina web este ejemplo:

Prueba ahora a aplicar una modificacin a la apariencia de ese bloque, aadiendo un estilo de borde a la
etiqueta <div>; quedara as:

Eso es todo lo que necesitamos saber respecto de la etiqueta <div>: configura espacios dentro de la pgina.
Despus de un </div> se comienza con una nueva lnea. 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 prrafo. 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 acompaar de uno o dos parmetros destinados a
identificar ese bloque:
id: permite establecer un identificador nico para el bloque. As podremos referirnos al bloque de
forma inequvoca.
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 Posicin y distribucin, recogidas en la
siguiente figura:

El panel en cuestin se despliega mediante la opcin Paneles>Propiedades de estilo o mediante el icono


correspondiente en la barra de iconos.
Utilizando los valores de Flotacin 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 continuacin podemos aplicarles el estilo que queramos, o la posicin en la pgina (posicin
absoluta), mediante las opciones del panel Propiedades de estilo del editor BlueGriffon, accesibles desde el

men Paneles. Al hacer esto, aparecern unos controles alrededor del <div> que podremos modificar
para ajustar su ancho y alto, adems de su posicin, como se muestra en la figura.

Algunos de los valores que se irn incorporando como estilo (style) son los siguientes:
position: absolute: indica que vamos a establecer una posicin fija para ese <div> en la pgina. El
resto de los valores situarn el elemento de diferente forma.

left (izquierdo), right (derecho), bottom (inferior) y top (superior): estos valores, seguidos de un
nmero de pxeles, 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 opcin denominada Columnas que est muy vinculada con el
concepto de maquetacin de un bloque de texto.
Utilizando esta opcin, crea un diseo de columnas lo ms parecido posible al de la imagen:

Organizacin de la informacin: tablas y listas


En ocasiones necesitaremos generar secuencias de contenidos, ya sean en una dimensin (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 opcin, en BlueGriffon encontramos los botones de la
figura destinados a crear listas de definicin.

Para incrementar o disminuir la sangra de una parte de la lista (permitindonos generar sublistas dentro de
una lista):

Estos dos botones tambin son tiles para incrementar la sangra de un prrafo concreto respecto al texto,
remarcando as que ese texto se diferencia del resto. Este tipo de operaciones tambin 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 estticos que ya hemos visto o los que analizaremos ms adelante, contamos con
una categora denominada Listas, con algunas opciones especficas de las listas:

Tipo: es la opcin de estilos denominada list-style-type y, dependiendo del valor asignado, se


modificar la apariencia de la vieta de la lista o el tipo de numeracin, si es una lista ordenada.
Podemos aplicarlo a la lista completa o a algunos elementos concretos
Posicin: la opcin list-style-position tiene dos valores, inside y outside, que harn 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 vieta.

A la hora de crear Tablas, y tal como suceda con las listas, HTML slo cuenta con etiquetas capaces de
definir la estructura completa de la tabla, pero no su apariencia; los colores, anchuras de lnea, fondos y

otros aspectos se dejan para los estilos CSS.


Una tabla mnima se disea con tres etiquetas y sus respectivos cierres:

<table> para definir el comienzo de la tabla. A la tabla le podemos aadir el


parmetro 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 cdigo HTML disea una tabla como la de la siguiente imagen:

Una tabla semnticamente correcta suele emplear algunas etiquetas ms 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 continuacin de caption podemos destacar un nmero de columnas con una lnea similar a
sta: <colgroup style="background-color: rgb(220, 220, 200);" span="5"> </colgroup>. Se emplea el
parmetro span para indicar el nmero de columnas que se vern 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 seguirn crendose con <tr>.
<tbody>: si utilizamos thead para definir la cabecera, emplearemos tambin <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 formarn 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, adems de facilitar el trabajo de los lectores para personas con discapacidad y para los
buscadores de Internet.

Adems, cada celda de una tabla puede contar con dos parmetros, para que la celda se extienda ms 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 disears con este cdigo 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 cdigo y comprueba el resultado:

Ahora sustituye la segunda fila por este cdigo y comprueba el resultado:

Desde el editor web, la gestin de la tabla se hace desde el men Tabla:

Hay varios mtodos para modificar las dimensiones de las celdas. La forma ms inmediata es colocar el
puntero del ratn en la divisin de dos filas que aparece en el lateral izquierdo o en la divisin de dos
columnas sobre la pgina web. En ese punto arrastraremos el puntero mientras mantenemos pulsado el botn
del ratn. La fila entera o la columna se redimensionar.

An queda un ltimo conjunto de opciones destinadas a modificar la apariencia de nuestra tabla: la


opcin Tabla > Propiedades de tabla:
Desde la pestaa Tabla podemos aplicar cambios a la estructura de la tabla, a sus
dimensiones e incluso definir el borde de la misma.
En la pestaa Celda actuaremos sobre las celdas que estuviesen seleccionadas o sobre la fila
o columna completa. De nuevo podemos especificar la dimensin, la alineacin del contenido
e incluso el color de fondo.
Una vez ms 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 (Posicin de la leyenda o la propiedad caption-side)


Tipo de borde: si ser contraido (le aporta un aspecto ms 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 tambin cualquiera de los elementos que le anteceden, como la fila, la tabla, etc.

Recurso TIC: Publicacin de una pgina 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 pgina 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 direccin IP asociada, adems de un nombre fcilmente identificable asociado a esa
direccin IP (del tipo www.elservidor.com). Con esto nos aseguramos de que lo que coloquemos en
ese servidor ser fcilmente localizable mediante una URL concreta, que se compondr del nombre
del servidor ms los nombres de las carpetas que se nos asignen, generalmente.

Un servidor web est permanentemente encendido, todas las horas del da durante todo el ao.
Imaginemos que vamos a consultar nuestro peridico 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 vendrn 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 simultneas.

As, si nuestro sitio web se vuelve un xito y tenemos centenares de visitas por minuto, el servidor ser capaz
de transmitir nuestras pginas a los usuarios correctamente. Si esto lo tuvisemos que hacer con nuestro
ordenador, sera inviable y los usuarios no podran acceder al sitio.
Ya vamos vislumbrando el modelo de funcionamiento de los servidores de pginas web. Bsicamente esos

ordenadores tienen instalado una aplicacin denominada servidor de pginas


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 pgina alojada en ese
servidor, la aplicacin recibir la peticin, localizar la pgina 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 pgina en su navegador.
Hay diferentes aplicaciones (programas servidores de pginas web) para servir pginas web. Una de las ms
extendidas es Apache, que adems es software libre, por lo que podramos llegar a montar nuestro pequeo
servidor de pruebas, si fuese necesario, aunque no es el caso.

Transferencia FTP
Hasta aqu est claro, pero, cmo envo mis archivos html, mis imgenes y mis cosas al servidor de pginas
web?
El mtodo ms 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 pginas
web al ordenador servidor, normalmente emplearemos una aplicacin 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 mtodos 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 aparecern los archivos que
hayamos transferido y podremos editarlos, modificarlos, borrarlos o realizar cualquier operacin que
necesitemos.
El panel superior presenta los mensajes que emite el servidor. Es informacin administrativa, que slo
nos interesar si se produce alguna incidencia.
En el panel inferior veremos informacin sobre las transferencias de archivos, los que queden
pendientes, los que han tenido dado lugar a errores en la transmisin, etc

Para conectar con un servidor remoto previamente tenemos que tener una cuenta (un acceso permitido que
ser validado con un usuario y una contrasea) en ese servidor. Una cuenta es un nombre de usuario y
contrasea, que nos darn 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 pginas web. No pondremos ningn ejemplo,
porque resulta tan sencillo como buscar pginas web que contengan las palabras: servidor web gratuito en
Internet.
Si buscamos servidores gratuitos en Internet, tambin encontraremos muchos resultados empleando el trmino
ingls, hosting o host, que son los trminos 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:

Direccin del servidor FTP: la URL con la que accederemos al servidor de FTP.
Nombre de usuario: el nombre de nuestra cuenta.
Contrasea: 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 ms:
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 nmero, 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 nmero 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 habamos distribuido los archivos en una determinada jerarqua de carpetas, deberemos respetar dicha
jerarqua.
No debemos olvidar que nuestra pgina principal debe llamarse index.htm o index.html, ya que sa ser la que
se cargue automticamente por parte del servidor, cuando alguien acceda a nuestro espacio.
En este punto ya podemos acceder al navegador e introducir la direccin correspondiente para ver nuestro
espacio web. La direccin nos la facilita tambin el servicio de almacenamiento que estemos empleando.

You might also like