Professional Documents
Culture Documents
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.
Una vez hayas incluido ese cdigo en la seccin de la cabecera, abre la pgina con tu navegador web
para observar el resultado.
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
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.
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.
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).
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:
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.
2.
Si las pginas estn en la misma carpeta: indicamos el nombre de los archivos nada ms.
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).
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.
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.
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.
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.
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.
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:
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
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
Tipo MIME
MP3
audio/mpeg
Wav
audio/wav
Ogg
audio/ogg
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:
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:
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:
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
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.
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.
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.
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
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.
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.