unidad 4 páginas web - · pdf fileunidad 4. 99 4. estructura básica de una...

94

Edición y publicación depáginas web4

n nuestra sociedad cada vez se hace más necesario, en todos los ámbitos, el uso deInternet como medio de comunicación. Esta comunicación no debe ser sólo pasiva sinotambién activa. La World Wide Web cuenta desde sus orígenes con más usuarios en el

lado de la demanda de información que en el lado de la oferta o publicación. Esto es debido a laaparente complejidad de la edición y publicación de las páginas web. Sin embargo, como se veráen esta unidad, diseñar y publicar páginas web no es más difícil que usar otros programas comoun procesador de textos o de presentaciones a un nivel de usuario intermedio.

Con el estudio de esta Unidad nos proponemos alcanzar los siguientes objetivos:

1. Diseñar y editar páginas web con un criterio estético integrando elementos multimedia,utilizando para ello un editor de texto plano y un programa de edición de documentos HTML.

2. Conocer los procedimientos para la publicación de sitios web y el uso de un programa detransferencia de ficheros a un servidor.

E

UNIDAD

95

1. QUÉ ES UN SITIO WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

2. FORMAS DE TRABAJO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

3. EL DISEÑO DEL SITIO WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

4. ESTRUCTURA BÁSICA DE UNA PÁGINA WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

5. EL TEXTO Y SUS CÓDIGOS MÁS IMPORTANTES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

6. INSERCIÓN DE ENLACES, HIPERVÍNCULOS O LINKS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

6.1. Enlace a otras páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

6.2. Enlaces a otras partes o secciones de nuestra página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

6.3. Enlaces a direcciones de correo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

6.4. Enlaces a otra página del mismo sitio web, y en el mismo servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

6.5. Color del texto de los enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

7. INSERCIÓN DE IMÁGENES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

7.1. Alineación de las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

7.2. Dimensionado de las imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

8. FONDOS DE PÁGINA Y COLORES DE OTROS ELEMENTOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

8.1. Fondo de color uniforme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

8.2. Imagen de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

9. TABLAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

10. CONTENIDOS MULTIMEDIA EN PÁGINAS WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

10.1. Sonido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

10.2. Vídeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

11. PUBLICACIÓN DE LA PÁGINA WEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Í N D I C E D E C O N T E N I D O S

Sitio web● Texto

● Gráficos

● Multimedia

Adecuados a

Objetivo: comunicar

Contenido

Diseño

96

EDICIÓN Y PUBLICACIÓN DE PÁGINAS WEB

1. Qué es un sitio webUn sitio web (del Inglés website) es un fichero o conjunto de ficheros, en principio en formato HTML,

alojados en un servidor de Internet y accesibles mediante el protocolo http (HyperText Transfer Protocol).Cada uno de estos ficheros en formato HTML se llama página web, y lo normal es que un sitio webesté compuesto de varias de estas páginas. Un sitio web puede versar sobre uno o varios contenidos.Un conjunto de páginas conforman un sitio web si a todas ellas se accede, mediante los oportunos enlaces

de hipertexto, desde una página común que actúade índice. Esta página índice también se llamaprincipal, página de inicio o home. La URL (UniformResource Locator, o Localizador Uniforme deRecursos) de esta página índice es la dirección delsitio web.

Por ejemplo, el sitio web del CIDEAD contiene unaserie de páginas. Todas ellas tienen en común queson accesibles, aunque no de forma exclusiva, ninecesariamente de forma directa, a partir de la páginaíndice, cuya URL es http://cidead.cnice.mec.es/.

Así, a la página en la que se establecen las normaspara el Bachillerato, se puede acceder desde el Índice → Novedades, y luego Normas para el alumnado→ Bachillerato, pero también se puede acceder de forma directa si se conoce la URL del archivo:http://cidead.cnice.mec.es/novedades/doc/normasbach.pdf

Esta URL da acceso, como se ve, a un documento en formato PDF. En realidad un sitio web puedealojar y dar acceso a ficheros en formatos muy diversos. Sin embargo, el tipo de ficheros que permitenla navegación y la existencia de la World Wide Web son los ficheros en formato HTML.

En esta Unidad vamos a aprender a generar, editar y publicar páginas web, centrándonos en la ediciónde ficheros en formato HTML.

2. Formas de trabajoPara editar ficheros en formato HTML no es necesaria la utilización de programas específicos,

como Microsoft FrontPage, o Dreamweaver de Adobe. Un fichero HTML no es más que un conjunto decaracteres que se pueden escribir con cualquier editor de textos. Sin embargo, los programas de edicióncomo los mencionados o cualquier otro pueden facilitar mucho determinadas labores.

En esta Unidad vamos a ver una serie de procedimientos para la edición de páginas sencillas y loharemos trabajando tanto con un editor de texto plano como con un programa de diseño web.Concretamente, mostraremos los procedimientos que se usan con el programa Kompozer, porque eslibre, gratuito y multiplataforma. Esto quiere decir que existen versiones idénticas para los sistemasoperativos Linux, Windows y Mac OS-X. El editor web Kompozer se puede descargar de forma gratuitaen la página del programa: http://kompozer.net

Debemos aclarar que esta Unidad no pretende ser un manual de uso del programa. Sólo se estudiarácómo realizar con Kompozer algunos de los procedimientos explicados. En cuanto al editor de textos,si se trabaja con Windows, se recomienda el Bloc de notas, que viene en todas las versiones como

4UNIDAD

97

accesorio. Si se trabaja con Linux, se recomienda Gedit o cualquier otro editor de texto plano. El textoplano es el que no tiene formato de ningún tipo (negrita, cursiva, subrayado, etc.).

Es preferible un editor de texto plano porque no es conveniente introducir en el documento HTMLcódigos ajenos a los del propio lenguaje HTML, para evitar eventuales conflictos o confusiones.

Para poder ver el resultado de lo realizado con el Bloc de notas (o con Gedit) necesitaremos unnavegador de Internet, que puede ser el Explorer de Microsoft, el Mozilla Firefox, o cualquier otro. Yase ha comentado que una página web es un documento de texto. Lo único que la distingue de un documentode texto, es que se guarda con extensión “.html”, o “.htm”, que es lo que permite que este texto seainterpretado y mostrado al usuario como página web por un programa navegador.

La forma de trabajar será la siguiente:

1.- Con el Bloc de notas escribimos los códigos y creamos un fichero, llamado fichero fuente. Estefichero lo guardamos con la extensión “.htm” o “.html”. La extensión elegida no influye en lainterpretación que los navegadores hacen de la página web creada. Sin embargo, cuandoqueramos crear un enlace a dicha página, en el enlace habrá que escribir el nombre del ficherocon el nombre y la extensión exactos. De lo contrario, el navegador no lo reconocerá y apareceráel mensaje “Página no encontrada”. Se recomienda a los alumnos que siempre guarden losficheros creados con una de las extensiones, y que siempre lo hagan con la misma (cuatrocaracteres o tres) pero que nunca guarden unos ficheros con un tipo de extensión y otros conotro tipo, ya que podría conllevar problemas a la hora de crear los enlaces.

2.- El resultado de lo escrito con el Bloc de notas y guardado con extensión “.htm”, lo veremos cuandoabramos el documento con el navegador. Siempre que modifiquemos el contenido del ficherofuente deberemos guardar el trabajo y luego, para ver el resultado en el navegador, daremos albotón “Actualizar”. Para ver los códigos con los que está confeccionada una página, incluida lanuestra, vamos al menú “Ver”, del navegador, y p en la opción “Código fuente”. ulsamos

98


3. El diseño del sitio webCuando se crea un sitio web es importante prestar cierta atención al diseño del mismo antes de

empezar a escribir nada. El diseño del sitio consiste básicamente en pensar y planificar tres cosas: elobjetivo y funciones del sitio, el contenido, y el diseño en sentido estricto.

● Objetivo: se trata de establecer qué se pretende conseguir con el sitio web y qué función va arealizar el mismo. Normalmente se tratará de proporcionar información a usuarios. Por tanto, esconveniente pensar qué perfil tienen dichos usuarios y, en función de esto, adaptar los contenidosy la forma o diseño.

● Contenido: el contenido debe estar delimitado y ser concreto. Es mejor crear varios sitios concontenidos diferentes que incorporar contenidos muy diversos en un sólo sitio web.

● Diseño: incluye dos aspectos; el diseño de la estructura de los contenidos, o clasificación de losmismos, y el diseño gráfico.

Es importante organizar los contenidos de forma adecuada así como pensar una forma de presentaciónque sea fácil e intuitiva. El formato y los contenidos de las páginas que van a constituir el sitio así comolos enlaces entre las mismas deben permitir al usuario una navegación sencilla, con facilidad pararetroceder y avanzar sin perderse y tener que volver a empezar desde el principio.

Asimismo, es importante cuidar el formato o diseño gráfico, que implica elegir la tipografía, coloresy fondos, etc., de tal manera que hagan del sitio un entorno de lectura o trabajo agradable.

●Ejemplo de código fuente en HTML. (Wikipedia org. Dominio público)

4UNIDAD

99

4. Estructura básica de una página webPara que el navegador reconozca que lo que se va a abrir es una página web (y así se pueda ver lo

que el autor quiere que se vea), además de guardar el fichero con laextensión “.htm”, o “.html”, es imprescindible escribir los códigos <html>y </html> al principio y al final del texto, como se muestra en la imagen.

Estos caracteres que van entre llaves se llaman códigos o etiquetas,y son los que el navegador lee y aplica para presentar en pantalla loque vemos en una página web. Debe quedar claro que lo que se escribeno es lo que se va a ver en la pantalla.

Una página tiene dos partes diferenciadas, que no se ven en elnavegador, pero sí en los códigos: el encabezamiento y el cuerpo.

a) El encabezamiento

El encabezamiento se indica con las etiquetas <head> y </head>, de comienzo y finalrespectivamente. Dentro del encabezamiento hay contenidos diversos.

El contenido más importante del encabezamiento es el título de la página, que se escribe entre lasetiquetas <title> y </title>. El título de la página es lo que se muestra en la barra de títulos de laventana del navegador. Por ejemplo, si como título escribimos “Cómo diseñar páginas web”, severá lo siguiente:

El título de la página que va entre las etiquetas mencionadas es también el nombre con el quese archiva la página en “Favoritos” o en el historial de navegación.

Otro contenido menos importante, aunque muy útil del encabezamiento es lo que se llaman etiquetas“META”. Hay etiquetas “META” para los buscadores y otras para el servidor donde se aloja lapágina. Vamos a tratar sólo las primeras.

Las etiquetas para los buscadores indican unos atributos de la página que serán útiles para losmotores de búsqueda, como por ejemplo Google. Ayudan a la inclusión de la página en los resultadosde la búsqueda, cuando las palabras clave encuentran coincidencia con el contenido de las etiquetas.

El formato de estas etiquetas es el siguiente:

<META NAME=”nombre de la propiedad o atributo” CONTENT=”valor de la propiedad”>.

Las etiquetas META para el buscador tienen tres atributos: “author”, “description“ y “keywords”.

Por ejemplo: Imaginemos un montañero apodado “Makalu”, que hace una página personal sobremontañismo. Algunas etiquetas META útiles para el buscador serían:

Estructura básica de la página:

<html><head>

<title> Título </title></head><body>

Contenido</body></html>

100

<META NAME=”author” CONTENT=”Makalu”>

<META NAME=”description” CONTENT=” Página personal de Makalu”>

<META NAME=”keywords” CONTENT=”Montañismo, Alpinismo, Escalada, Makalu”>

b) El cuerpo de la página

A continuación del encabezamiento se escribe lo que se llama el cuerpo de la página. El contenidodel cuerpo es lo que resulta visible para el visitante, y contendrá texto, enlaces, imágenes, tablas,etc. El cuerpo va entre las etiquetas <body> y </body>.

En la imagen anterior, lo único que muestra el navegador como cuerpo de la página es la palabra“Contenido”.


4UNIDAD

1. Explica algún procedimiento para acceder al código fuente de una página web.2. Explica razonadamente si el visitante de una página web puede ver en la pantalla lo que el autor de la misma ha

escrito entre las etiquetas o códigos <title> y </title>.3. Explica razonadamente si crees que va a ser visible o no lo que escribamos entre las etiquetas <head> y </head>.4. Explica qué son las etiquetas “META”.

� Todas las páginas web se escriben mediante una serie de códigos o etiquetas que conforman lo que se denomina“lenguaje HTML”. Estos códigos se escriben con caracteres de texto, lo que, en conjunto, se denomina código fuentede la página. Sin embargo, lo que se ve con el navegador es algo bien diferente, ya que lo que hace este programaes interpretar los códigos para presentar un contenido inteligible por cualquiera y “amigable”.

� El código fuente de una página se estructura en dos grandes apartados: el encabezamiento y el cuerpo.

R e c u e r d a

A c t i v i d a d e s

101

5. El texto y sus códigos más importantesVamos a empezar el estudio de la edición de la página con el texto y algunos de los atributos o

características más importantes que puede presentar.

Por defecto, el tipo y tamaño de letra que van a presentar los navegadores es Times New Romande 12 puntos en color negro. Sin embargo, podemos modificar la presentación mediante una serie deetiquetas, de las que vamos a mencionar sólo algunas.

a) Encabezados o títulos. El tamaño de la letra se modifica mediante los llamados encabezados otítulos. Los encabezados tienen numeración del 1 al 6, siendo el encabezado 1 el de mayor tamaño.Para escribir un texto que tenga el tamaño 3, habrá que escribirlo entre las etiquetas <h3> y </h3>que indican el comienzo y el fin del formato respectivamente. A continuación se describen lasetiquetas que hay que escribir en el código fuente y el resultado tal como se ve en el navegador:

b) Tipo de letra o fuente. Para indicar el tipo de letra se hace mediante la etiqueta “font” y el atributo“face”:

<font face=”arial”>texto que va a ir en arial</font>

Vemos que al final del textoque va a ir con el tipo de letradel ejemplo, se cierra laetiqueta “font” mediante</font>. Si no se pone nada,el tipo de letra que va apresentar el navegador seráTimes New Roman en 12puntos.

En Kompozer, para que unaparte del texto aparezca enun formato de fuente determinado, se hace seleccionando el texto correspondiente y luego el menúFormat → Font → tipo de letra elegido (por ejemplo, “Arial”).

c) Color del texto. Podemos poner un color por defecto distinto del negro introduciendo en la etiquetadel cuerpo el siguiente código (para poner, por ejemplo, color rojo): <body text=”red”>. Si sóloqueremos modificar el color de una parte del texto, haremos: <font color=”blue”> Texto que va enazul </font>.

<h1>Título en h1</h1>






Título en h1Título en h2Título en h3

Título en h4

Título en h5

Título en h6

102

d) Tamaño del texto. Existen dos posibilidades: hacer un párrafo con tamaño diferente, de formasimultánea, con <h1> y </h1>, que puede variar entre 6 (el más pequeño) y 1 (el más grande), omodificar el tamaño en una parte del texto, sin crear un párrafo, con <font size=”7”> y </font> desde7 (el más grande) hasta –7 (el más pequeño). El tamaño por defecto o base es el 3, pero se puedecambiar para todo el cuerpo de la página con el comando <basefont size= “5”>, por ejemplo, acontinuación de <body>.

Algunos otros efectos de uso habitual sobre el texto, serían los siguientes:

En Kompozer todos los efectos vistos sobre el texto se encuentran en el menú “Format”. Los de latabla se encuentran en Format → Font → Text Style:

Otros efectos muy útiles serían los siguientes:

Centrar texto <center> texto</center>Alinear texto <p align=”right”>Texto </p> (puede ser: “right”, “center” y “left”).

Salto de línea <br>Línea en blanco <p>

Efecto y etiquetas Cómo se vería con el navegador<b>Texto en negrita</b> Texto en negrita<i>Itálica</i> Itálica<b><i>Negrita e Itálica</i></b> Negrita e Itálica<u>Subrayado</u> Subrayado<kbd>Keyboard Text</kbd> Keyboard Text

<sub>Subindice</sub> Ejemplo de subíndice

<sup>Superíndice</sup> Ejemplo de superíndice

<strike>Texto tachado</strike> Texto tachado


4UNIDAD

103

Cuando se está editando una página web con un editor de texto plano, es muy importante recordar queeste editor no es WYSIWYG. Este término es el acrónimo de “What You See Is What You Get”, o “Lo que veses lo que tienes”. En un editor que sí tenga esta característica, en pantalla se ve lo mismo que se va a vercuando el fichero lo abra el navegador. Esto no pasa cuando editamos una página con un editor de textoplano. Por ejemplo, si hacemos un salto de línea pulsando “Intro”, el cursor pasa al inicio de la línea siguiente.Sin embargo, cuando veamos la página, este salto no se ha producido, ya que el navegador sólo interpretaun salto de línea cuando ve el código <br>.

e) Las listas

En ocasiones se presenta la necesidad de elaborar listas con diferentes ítem. Existen dos tipos de listas:

Lista desordenada (sin que aparezca el ordinal al principio de la línea):

<ul> (unordered list)<li> (list item)

<li>

</ul>

Lista ordenada:

<ol> (ordered list)<li>

<li>

</ol>

Lista de definición:

<dl> (definition list)<dt> (definition term, o cosa que se va a definir)

<dd> (definition definition, o definición de la cosa anterior)

</dt>

Por ejemplo, si escribimos:

A continuación se expone el orden del día de la reunión:

<ul>

<li>Presentación del equipo directivo</li>

<li>Presentación de las cuentas anuales</li>

<li>Votación para aprobación o rechazo de las cuentas anuales</li>

<li>Ruegos y preguntas</li>

</ul>

El resultado que se verá será este:

Mientras que si lo que escribimos es lo mismo, pero con la etiqueta de lista ordenada (ordered list - ol):

A continuación se expone el orden del día de la reunión:

104

<ol>

<li>Presentación del equipo directivo</li>

<li>Presentación de las cuentas anuales</li>

<li>Votación para aprobación o rechazo de las cuentas anuales</li>

<li>Ruegos y preguntas</li>

</ol>

El resultado será:

En listas no numeradas se puede cambiar la marca delante de cada ítem. Por ejemplo:

<ul type=”square”>, pone un cuadradito en vez del círculo que aparece por defecto. Si se quieremodificar sólo la marca de un ítem concreto, se pone la etiqueta sólo en <li>, y no en <ul>.

En listas numeradas, se puede cambiar la grafía del número de orden, con el código “type”, igualque antes, variando a las formas, i, I, a, A. Además, se puede hacer que comience a ordenar porcualquier número, con el código “start”. Por ejemplo:

<ol start=”3”>

Con Kompozer el proceso es tan sencillo como seleccionar el texto con el que se quiere hacer unalista y utilizar el menú Format → List → opción a elegir. Por ejemplo, si queremos hacer unalista numerada u ordenada:


4UNIDAD

105

f) Separadores horizontales

Un separador horizontal es una barra con formato de imagen para ordenar contenidos en la páginay mejorar así su presentación. Se introducen con la etiqueta <hr>. En principio ocupa de lado alado de la página, pero el ancho se puede modificar. Para tener un separador que ocupe el 75%de la anchura de la página escribiríamos <hr width=”75%”>. Para que ocupe el 35% y esté alineadoa la izquierda: <hr width=”35%” align=”left”>. También se puede modificar el espesor: <hr size=”20”>,o hacer que sea una línea sólida, no alineada sobre el fondo: <hr noshade>.

Un ejemplo de página muy sencilla con un separador con un ancho del 35% de la misma, y alineadoa la izquierda sería el siguiente:

Para insertar una barra de separación con Kompozer: Insert → Horizontal line, y para modificarsus propiedades, se p en el objeto con el botón derecho y selecciona “Horizontal line properties”,que nos lleva a un cuadro de diálogo donde podemos modificar la anchura, el grosor, etc.

Códigos HTML Resultado en el navegador

<html><head><title> Ejemplo de separador horizontal </title></head><body>

Primera parte de la página<br><br><hr width=”35%” align=”left”><br>Segunda parte de la página.</body></html>

5. Explica cómo se puede modificar el texto de todo el cuerpo de la página para que no sea de color negro sino verde.6. Explica cómo se haría para modificar el color de una parte del texto, quedando el resto como señala la etiqueta <body>.7. Explica qué es una lista ordenada y qué códigos en HTML hay que escribir para que el navegador la presente.

Algunas etiquetas importantes para dar formato al texto son:� Tipo de letra: <font face=”....”> texto que va a ir con este tipo</font>� Color del texto: <body text =”...”>, o bien, sólo para un fragmento, <font color=”...”>Texto que ha de ir en este

color</font>.� Tamaño del texto: con <h1> y </h1>, <h2> y </h2>, etc.� Negrita (<b>...</b>), itálica (<i>...</i>), subrayado (<u>...</u>), etc.� Salto de línea: <br>� Línea en blanco: <p>� Alineación: <p align=”.....”> (left, center, right).� Separador horizontal: <hr>

R e c u e r d a


ulsa

106

6. Inserción de enlaces, hipervínculos o linksverdadero soporte de Internet: el poder ir de unas páginas a otras. Para poder navegar las páginas debencontener enlaces de hipertexto que funcionen, que estén actualizados debidamente y, a ser posible, quevayan acompañados de una breve explicación acerca del contenido que nos vamos a encontrar cuandolleguemos a la página de destino. Los códigos son: <a> y </a>, y entre ambos se escribe una palabra ofrase breve que indique dónde conduce el enlace. Existen diferentes modalidades.

6.1. Enlace a otras páginasEnlazan con una página alojada en otro servidor, por ejemplo, con la Universidad Nacional de Educación

a Distancia, cuya dirección es: http://portal.uned.es

<a href=”http://portal.uned.es”>Ir a la U.N.E.D.</a>.

6.2. Enlaces a otras partes o secciones de nuestra páginaSi lo que queremos es enviar al visitante a otra parte dentro

de nuestra página, debemos colocar etiquetas en determinadospuntos de la misma, para que sirvan como puntos de enlace.Imaginemos que una página tiene diferentes secciones, una delas cuales se llama “Avisos”. En cualquier parte de la páginapodemos colocar un enlace que nos lleve, con sólo pulsar, aesta sección. Para ello, creamos una etiqueta junto a la sección”Avisos”, con el comando <a name=”Avisos”>, y luego creamosel enlace en el punto desde donde queramos acceder a dichasección, de la siguiente forma: <a href=”#Avisos”> Ir a la sección“Avisos”</a>.

6.3. Enlaces a direcciones de correoEs similar a las anteriores, pero la dirección de referencia es una dirección de correo. Por ejemplo:

<a href =”mailto: [email protected]”>Manda un e-mail a Fulanito </a>.

6.4. Enlaces a otra página del mismo sitio web, y enel mismo servidor

Ya hemos comentado que casi todos los sitios web incluyen no una sino una serie de páginasrelacionadas. Cada una de estas páginas es un documento diferente, aunque luego se enlazan unas conotras para conformar el sitio web.


4UNIDAD

●Foto de la tierra. (Wikipedia org. Dominio público)

Esta es una de las opciones fundamentales, pues permite navegar entre distintas páginas. Esto es el

107

En este caso, ponemos el nombre del fichero fuente de la página que se quiere visitar. Lo normal esque todas las páginas estén en la misma carpeta que la página inicio o home, con lo que los comandospara ir a ellas serán, por ejemplo:

<a href=”mipagina2.html”>Ir a la página 2</a>.

En el enlace hay que indicar la ruta hasta llegar al fichero fuente. Recordaremos que la ruta de unarchivo es su colocación en un sistema de directorios o carpetas.

Si la página a la que queremos ir está en una carpeta diferente (por ejemplo “pagina2”), y en un nivelinmediatamente inferior, se escribiría:

<a href=”pagina2\mipagina2.html”>Ir a la página 2</a>.

Nota: cuando demos nombres a los ficheros y a las carpetas, debemos procurar tres cosas:

● No escribir con mayúsculas.● No escribir acentos.● No dejar espacios en blanco.

Esto es debido a que los servidores donde se alojanlas páginas no suelen admitir estos formatos y puedehaber problemas a la hora de acceder a las páginascuyos nombres contengan espacios en blanco, acentos,etc. No siempre es así, pero por si acaso, mejor evitarlo.

Para crear un hipervínculo con Kompozer, lo primeroque hay que hacer es seleccionar el texto que va aservir de enlace. Luego, en el menú Insert → Link→ aparece un cuadro de diálogo en el que hay queintroducir la dirección del hipervínculo. En la imagen acontinuación se representa la creación de un enlace ala web del CIDEAD.

6.5. Color del texto de los enlacesPor defecto, el color del texto de los enlaces es el azul. Sin embargo, se puede cambiar con las

etiquetas siguientes dentro de la etiqueta <body>:

● “link”: color del texto del enlace sin haber sido pulsado● “vlink”: color de los enlaces visitados: ● “alink”: color de los enlaces cuando son pulsados:

Por ejemplo:

<body link=”#ff0000” vlink=”#00ff00”>

presentará los enlaces en rojo antes de ser visitados, y en verde, una vez se ha visitado la página a laque conducen.

108

7. Inserción de imágenesLas imágenes mejoran mucho la presentación de la página. Lo normal es que la imagen esté en la

misma carpeta que la página. Si no es así, en el nombre de la imagen se escribirá la ruta hasta la misma,incluso si está en otra página fuera del sistema, lo que no es aconsejable porque se ralentizaría muchola carga. El código básico para la inserción de una imagen es: <img src=”nombre.gif”>. Entre comillashemos escrito el nombre del fichero que contiene la imagen, en este caso, “nombre.gif”.

Cuando se ponen imágenes en una página es muy frecuente, y resulta muy útil introducir lo que sedenomina “Texto alternativo”. Esto es un texto que va a aparecer en el marco creado por el navegador,y que se leerá sólo en el caso de que la imagen, por la razón que sea, no se cargue. También aparecerá,a modo de descripción, cuando se pase el puntero del ratón por encima de la imagen, una vez cargadala misma. Para que aparezca este texto alternativo, introducimos el atributo “alt” en la etiqueta de imagen:<img src=”nombre.gif” ALT=”descripción”>. Por ejemplo, en la tabla siguiente se presenta una páginasencilla que consta únicamente de una imagen. La imagen representa un conector RJ-45, para una redlocal. Hemos escrito los códigos para que aparezca la imagen y una descripción en un cuadro flotante,que se activa al pasar el puntero por encima de la foto.

Una forma muy interesante y habitual de usar las imágenes en las páginas es hacer de las mismasun enlace a otra página. En este caso el código sería:

<a href=”mipagina2”><img src=”nombre.jpg”></a>.

Lo que hacemos es poner un enlace, y dentro de las etiquetas de apertura y cierre del enlacepropiamente dicho, el código para la inserción de la imagen. Si no queremos que aparezca el borde queindica que esta imagen se trata de un enlace, lo eliminamos escribiendo border=”0” después del nombrede la imagen.

Una imagen se puede utilizar para enlazar con otra imagen:

<a href=”coche.jpg”><img src=”moto.gif></a>

De esta forma, p en la moto, vamos a ver un coche.

Código HTML Resultado en el navegador

<html><head>

<title> Ejemplo de imagen</title></head><body><IMG SRC=”rj_45.jpg” ALT=”Esto es uncorrector tipo RJ 45”> Conector RJ-45</p></body></html>


4UNIDAD

ulsando

109

Para insertar una imagen con Kompozer seleccionamos: Insert → Image, y aparece el siguientecuadro, en el que se busca la imagen que queremos insertar y se modifican sus propiedades. Vemosque hay una barra de entrada para el texto alternativo (“alternate text”) si se desea:

7.1. Alineación de las imágenesAl igual que el texto, una imagen se puede alinear mediante las etiquetas <p> y <div> y el atributo

“align”. Por ejemplo, para alinear una imagen a la derecha o la izquierda escribiríamos:

<div align=”right”><img src=”nombre.jpg”></div>, o

<p align=”left”><img src=”nombre.jpg”></p>.

Si queremos que haya texto a los lados de la imagen, usamos la etiqueta de atributo “align” dentrode la propia de llamada a la imagen, y no como característica del párrafo, como hicimos anteriormente.La imagen quedará al lado que le indiquemos con respecto al texto. Por ejemplo, si queremos que laimagen quede alineada a la izquierda, y a la izquierda de un texto:

8. Explica cómo se puede modificar el color del texto de los enlaces o hipervínculos, para que no aparezcan azules,que es el color por defecto.

9. Observa la imagen a continuación:

Supongamos que se trata de la estructura de directorios del servidor de una página web, en la cual todas las imágenesque aparecen se encuentran alojadas en la carpeta “Images”. Indica qué etiqueta o código HTML hay que escribirpara que en la página “index.htm” aparezca una imagen llamada “lion.jpg”


110

7.2. Dimensionado de las imágenesCuando el navegador encuentra una etiqueta de imagen, espera a que se cargue la imagen y no sigue

cargando otros contenidos hasta que no esté la imagen completa. Esto se puede evitar indicando en laetiqueta de imagen la información sobre su dimensión, en cuyo caso lo que hace el navegador es reservarun espacio para la imagen que se desea cargar, y va cargando de forma simultánea los otros contenidosy la imagen que va en el espacio reservado. Por ejemplo:

<img src=”nombre.gif” width=”120” height=”94”>

De esta forma indicamos el ancho (width) y el alto (height) de la imagen y así será el espacio reservado.Estos valores no tienen por qué coincidir con los originales; el navegador adapta la imagen original a losvalores deseados.

Una cosa que se puede hacer para ahorrar mucho tiempo de carga es la utilización de una miniatura,vista previa o thumbnail (literalmente “uña del pulgar”- por el tamaño que se suele dar-) en la página.Se trata de imágenes en marco pequeño, que se cargan rápidamente. Pulsando en la miniatura seaccede, mediante un enlace, a la imagen original, que puede ser, por ejemplo, de 500x600:

<a href=”nombre.jpg”><img src=”nombre.pg” width=”75” height=”85”></a>

En este caso, los números indican la longitud del ancho y alto de la miniatura en píxeles o puntos.

Para que el tiempo de carga no sea demasiado largo, también es conveniente que las imágenespresentadas no superen los 100KB de tamaño y que sus dimensiones no sean superiores a 500x400.

Si estamos usando Kompozer, al insertar una imagen podemos mantener sus dimensiones o bienmodificarlas de forma muy sencilla. Para insertar una imagen seleccionamos Insert → Image, y apareceel cuadro de diálogo en el que elegimos la imagen. En la pestaña “Dimensions”, aparece el siguientecuadro en el que podemos modificar la anchura y la altura de la imagen:

Códigos HTML Resultado en el navegador

<html><head>

<title> Ejemplo de imagen </title></head><body> <p align=”left”><IMG SRC=”rj_45.jpg” ALT=”Esto es un conectortipo RJ 45” align=”left”> Conector RJ-45</p></body></html>


4UNIDAD

111

8. Fondos de página y colores de otroselementos

Dos elementos importantes en la presentación de la página son el color y la imagen empleados comofondo de la misma.

8.1. Fondo de color uniformeSe pone un color diferente al blanco añadiendo ‘bgcolor=”#color”’ dentro de la etiqueta <body>. Los

colores rojo, verde, azul, blanco, negro y amarillo se pueden configurar con sus nombres en inglés. Parahacerlos claros se pone, por ejemplo:

<body bgcolor=”lightgreen”>, y aparecerá, lógicamente, verde claro.

Para hacer combinaciones de colores, hay que tener en cuenta que los colores tienen sus propios códigos:

#FF0000 - rojo#00FF00 - verde#0000FF - azul#FFFFFF - blanco#000000 - negro#FFFF00 - amarillo

Para hacer un color más oscuro, se reduce su componente principal (por ejemplo, en el rojo, FF),dejando los demás constantes.

112

Para ello, hay que saber que la graduación de un color va como sigue (en hexadecimal):0123456789ABCDEF, de más oscuro a más puro.

Los dos primeros caracteres indican la cantidad de rojo, el segundo y el tercero la cantidad de verdey los dos últimos la cantidad de azul. Así, el rojo puro es FF0000. Si reducimos su contenido en rojo,bajando por la escala desde la F, llegaremos al negro, eliminando su contenido de rojo.

Si queremos oscurecer el rojo, haremos, porejemplo, AA0000. Si lo queremos todavía másoscuro: 550000 (a medida que elegimos caracteresmás a la izquierda, va perdiendo pureza el color yoscureciéndose). Este es el sistema llamado RGB(Red, Green, Blue). En este sistema, los colorespuros serían:

Red (rojo): FF0000

Green (verde) : 00FF00

Blue (azul): 0000FF

De esta forma, el color blanco (FFFFFF) surgecomo combinación del rojo, verde y azul puros. Siqueremos que un color tenga un tono más suave opastel, se deben variar los otros colores, haciéndolosmás claros. Por ejemplo, para convertir el rojo enrosa: FF7070. Es decir, mantenemos el rojo en sumáxima intensidad, pero luego l atenuamos dandovalores a los colores verde y azul.

Para modificar el color de fondo de la página, los colores del texto, de los enlaces y de los enlacesvisitados, seleccionamos Format → Page colors and Background, y aparece un cuadro de diálogocomo el de la imagen:

8.2. Imagen de fondoPara poner una imagen como fondo de la página se pone en la etiqueta <body> el atributo

correspondiente:

<body background=”nombre.jpg”>.

En Kompozer, desde el cuadro de diálogo que se muestra en la imagen anterior, se puede seleccionaruna imagen cualquiera mediante el navegador que se abre al p en el icono asociado a la barra“Background image”.


4UNIDAD

Partiendo de cualquier color puro (rojo, verde o azul), para oscurecerlo, le restamos intensidad. Para aclararlo, lomantenemos puro, pero damos valores a los otros colores.

R e c u e r d a

ulsar

o

113

9. TablasUna tabla es un marco que permite ordenar la información que aparece en la página. La inserción de

tablas es una de las herramientas más útiles en la confección de páginas web, porque permiten unaadecuada colocación de los contenidos.

Una tabla contiene filas y columnas. La intersección de filas y columnas configura las celdas, que sonlas que van a contener la información (texto, imágenes, etc.). El valor mínimo tanto de filas como decolumnas es 1, que se corresponde con una tabla constituida por una sola celda, es decir, un paralelogramocon información dentro.

La etiquetas que delimitan una tabla son <table> y </table>, que indican el comienzo y el final de latabla respectivamente.

Para delimitar las se utilizan las etiquetas <tr> y </tr>.

Para delimitar las columnas se utilizan las etiquetas <td> y </td> o bien <th> y </th> para las cabecerasde las columnas.

Por ejemplo, para insertar una tabla de dos filas con dos columnas (cuatro celdas, por tanto), haremos:

A la hora de escribir el código HTML no hace falta distribuirlo en distintas líneas, como acabamos de hacer.El navegador interpretará exactamente lo mismo si escribimos<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>.

Con el editor Kompozer, insertar tablas es muy similar a hacerla misma operación con un procesador de textos. SeleccionamosInsert → Table y aparece el cuadro de diálogo de la figura.

Atributos asociados a estas etiquetas:

a) Atributos de la etiqueta <table>

Border: determina el ancho del borde de la tabla. El valorpor defecto es 0, en cuyo caso la tabla no se ve aunque estéen la página. Si queremos que tenga un valor, como porejemplo 1 píxel, haremos <table border=1>.

Width: determina el ancho de la tabla. El valor por defectoviene dado en píxeles, pero se puede determinar enporcentajes respecto a la anchura de la ventana del browser(navegador).

Height: determina el alto de la tabla. El valor por defecto viene dado en píxeles, pero se puededeterminar en porcentajes respecto a la altura de la ventana del browser.

Código HTML: Significado:<table> Inicio de la tabla<tr><td></td><td></td></tr> Primera fila, con sus dos celdas<tr><td></td><td></td></tr> Segunda fila, con dos celdas más</table> Final de la tabla

filas

114

Bgcolor: determina el color del fondo de la tabla.

Cellpadding: determina el margen interno a cada celda de la tabla, de manera que los datosaparezcan separados de los bordes.

Cellspacing: determina la separación entre celdas de la tabla, es decir, el ancho del marco interiorde cada una de las celdas. Se establece en píxeles o puntos.

b) Atributos de la etiqueta <td>

Los siguientes atributos son de celda, es decir, para que tengan efecto deberán situarse dentro dela etiqueta de celda.

Align: permite alinear horizontalmente los datos dentro de una celda.

Los valores que puede tener son:

● Left: alineación a la izquierda (en el caso de “td” éste es el valor por defecto).

● Center: alineación en el centro (en el caso de “th” éste es el valor por defecto).

● Right: alineación a la derecha.

Valign (que viene de vertical align): permite alinear verticalmente los datos dentro de una celda.

Los valores que puede tener son:

● Top: alineación en la parte superior.

● Middle: alineación en el centro.

● Bottom: alineación en la parte inferior.

Colspan: sirve para expandir una columna, de manera que ocupe dentro de la tabla el anchodel número de columnas indicado por su valor (se unen columnas).

Rowspan: sirve para expandir una fila, de manera que ocupe dentro de la tabla el ancho del númerode filas indicado por su valor (se unen filas).

Bgcolor: sirve para dar un color de fondo determinado a cada celda de la tabla.

Para poner un titular que indique el contenido de la tabla, se utiliza el código <caption>texto</caption>,después de la etiqueta <table>.

Veamos un ejemplo. Escribimos los códigos siguientes:

en el Bloc de notas y guardamos el archivo con extensión “.htm”. Cuando abrimos el archivo con elnavegador, el resultado que obtenemos es el siguiente:


4UNIDAD

115

En las celdas de una tabla no sólo es posible introducir textos. También es posible introducir imágenes,textos con enlaces a otras páginas, e incluso imágenes con enlaces. El color del texto incluido en unacelda también se puede cambiar, si bien debe realizarse celda a celda.

Una característica particular de las tablas es que se pueden “anidar”, es decir, se pueden introducir tablasdentro de tablas. Para esto se crea la tabla “madre” y el resto de las tablas se introducen dentro de las celdas.

Se aconseja practicar con diferentes valores sobre el código que se ha dado anteriormente. Tambiénes aconsejable probar formatos diferentes de celdas e investigar sus posibilidades. Como ejemplo, crearla siguiente tabla anidada:

<TABLE border=”6” cellPadding=”3”><TBODY><TR><TD><TABLE border=”2” cellPadding=”3”><TBODY><TR><TD>Datos 1 </TD><TD>Datos 2 </TD></TR><TR><TD>Datos 3 </TD><TD>Datos 4 </TD></TR></TBODY></TABLE></TD><TD><TABLE border=”3” cellPadding=”3”><TBODY><TR><TD>Datos 5 </TD><TD>Datos 6 </TD></TR><TR><TD>Datos 7 </TD><TD><TABLE border=”4”><TBODY><TR><TD>Datos 8</TD><TD>Datos 9 </TD></TR><TR><TD>Datos 10 </TD><TD>Datos11</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY><

/TABLE>

116

El resultado será:


4UNIDAD

10. Explica qué es el texto alternativo en una imagen dentro de una página web.11. Explica el procedimiento que debemos seguir si estamos usando el editor web Kompozer y queremos poner una

imagen como fondo de la página. 12. Escribe los códigos necesarios para que en una página web aparezca una tabla con tres filas y dos columnas.13. Explica qué significa el atributo “bgcolor”.

Las tablas son un elemento importantísimo en las páginas web, ya que permiten mostrar de forma ordenada su contenido.Es muy frecuente que la tabla abarque todo el cuerpo de la página y podemos anidar tablas de segundo orden en lasdiferentes celdas. Un truco muy útil para lograr buenos resultados sin que se vean las tablas es hacer que el borde nosea visible mediante el atributo “border=0”: <table border=0>.......</table>.

R e c u e r d a


117

10. Contenidos multimedia en páginas webLas páginas web cada vez tienen más contenidos en formato multimedia, además del contenido en

formato de texto.

Para insertar contenidos multimedia en una página existen dos posibilidades:

a) Alojar en el servidor el fichero de audio o vídeo, y escribir los códigos necesarios para que sereproduzcan, al igual que se ha visto con la inserción de imágenes.

b) No alojar los ficheros multimedia en el servidor, y aprovechar los que ya estén en otros sitios. Lamanera de hacer que estos ficheros remotos se reproduzcan en nuestra página es mediante lainserción de enlaces a los mismos. Esto es lo que se hace cuando se inserta un código en la páginaque enlaza con un vídeo externo, alojado, por ejemplo, en Youtube. Este sistema presenta ladesventaja de que trabajamos con ficheros que nosotros no controlamos, al estar éstos alojadosen otros servidores. De hecho, el usuario que sube un fichero a un servidor puede suprimirlo encualquier momento. O la página web donde se aloja el fichero puede desaparecer.

La ventaja que tiene esta forma de trabajar es que los ficheros multimedia no ocupan espacio ennuestro servidor web, espacio que suele estar limitado si el servidor es gratuito.

10.1. SonidoLo primero que hay que tener en cuenta es que no todos los formatos de archivo de sonido son

“soportados” por las páginas web. Por ello, debemos procurar que los ficheros sean midi, wav, mp3 oReal Audio.

Existen dos modalidades de reproducción de audio: manual, en la que el usuario decide cuándo deseareproducir el archivo de sonido, y automática, en la que la reproducción se inicia de forma automáticaal abrirse la página web.

●Reproducción de vídeo en página web. (ITE. Banco de imágenes)

118

En cuanto a la primera posibilidad, basta con crear un enlace al fichero que se quiere reproducir. Por ejemplo,si tenemos un fichero con la voz de Gollum, que se llame “gollum.mp3”, podemos escribir el siguiente código enel fichero html fuente:

<a href=”gollum.mp3”>Pulsa aquí para oír a Gollum</a>

Así, al p en la frase en negrita, se reproducirá el fichero de sonido.

En cuanto a la segunda posibilidad, el sonido de fondo, desde nuestro punto de vista no es muyrecomendable, ya que puede resultar molesto para el usuario oír siempre la misma música al abrir lapágina.

Para insertar un sonido de fondo, se usa el siguiente código:

<embed src=”sonido.mp3” Hidden=”true”>

Si se desea que aparezca un panel donde el usuario pueda parar el sonido, o manipular el volumende reproducción, el código será:

<embed src=”sonido.mp3”>

Es decir, hemos eliminado el atributo que hace que desaparezca la consola o panel de manipulacióndel sonido en la página.

La etiqueta <embed> tiene multitud de atributos. Algunos de ellos son:

Autostart=“false” (por defecto) y ”true”. Hace que el archivo de sonido suene inmediatamente despuésde cargar la página sin necesidad de pulsar el botón.

Hidden=”true”. Oculta la consola y sólo tiene este valor. Como no se podría reproducir el sonidopulsando el botón de reproducir, el archivo de sonido suena automáticamente al cargar la página.

Loop= “false” / ”true” (por defecto).

Controls= “smallconsole”. Aparece una pequeña consola con los controles de audio. Con los atributos“width” y “height” (que ya conocemos, porque son los mismos que en la inserción de imágenes) tambiénse puede manipular el tamaño de la consola.


4UNIDAD

ulsar

119

10.2. VídeoComo en el caso de los archivos de sonido, no se puede usar cualquier formato. Es recomendable

que los formatos sean MOV, AVI, ASF, MPEG o RealVideo.

Podemos insertar enlaces a vídeos, para que se abran en una ventana nueva cuando el usuario hagaclic en el enlace, o bien podemos insertar el vídeo directamente en la página. En este último caso el vídeopodemos hacer que el vídeo se reproduzca de forma automática al abrir la página o forzar su reproducciónde forma manual.

En este ejemplo el vídeo, configurado con un tamaño de 300 x 400, no comenzará a reproducirse hastaque no lo desee el usuario, aunque al cargarse la página se mostrará una vista previa del primer fotograma:

<embed src=”video.avi” height=”300” width=”400” autostart=”false” loop=”false”>

También se ha configurado que no se reproduzca de forma cíclica.

Para insertar en nuestra página vídeos que estén en un servidor remoto, por ejemplo, en Youtube,hay que escribir un código que aparece en la barra Insertar de la propia página que aloja el vídeo (Youtube).

En las imágenes se muestra dónde se encuentra la barra Insertar con dicho código. A la derecha dela barra donde está el código para generar el enlace, hay un botón con forma de rueda dentada. Sipulsamos sobre él, se despliega un cuadro de diálogo que permite configurar algunas opciones devisualización del vídeo. Podemos elegir, por ejemplo, el tamaño que tendrá el marco. En este caso, seofrecen cuatro posibilidades, pero siempre podemos modificarlo posteriormente de forma manual. Tambiénpodemos elegir si el marco va a tener borde o no, y en caso afirmativo, el color del mismo. Otra posibilidades desactivar la opción Incluir vídeos relacionados, que se ofrece por defecto.

120

11. Publicación de la página webAntes de publicar una web es necesario dar algunos consejos:

Si la página consta, a su vez, de varios archivos HTML enlazados entre ellos, la página de inicio sedeberá llamar “index.htm”, para que el servidor donde esté alojada lareconozca como tal.

En cuanto al resto de los nombres se los ficheros, se recomienda queno se utilicen nunca mayúsculas, acentos, espacios en blanco o símbolosque no sean el guión bajo. Esto es así porque la mayor parte de losservidores no reconocen estos formatos, y así nos evitaremos problemas.

En cuanto al lugar de publicación, existen multitud de servidores gratuitos(a cambio de insertar publicidad en nuestra página).También existenservidores de pago, que ofrecen mayores velocidades de descarga, estánlibres de publicidad y son por lo general más fiables. Algunos sitios queofrecen alojamiento gratuito son, por ejemplo:

Iespana: http://www.iespana.esMetropoli 2000: http://www.metropoli2000.comFreeservers: http://www.freeservers.comGeocities: http://www.geocities.comGaleón: http://www.galeon.com

Si optamos por un servidor de pago, puede ser interesante tener nuestropropio dominio (ejemplos de dominios son google.es y hotmail.com). Para ello habrá que registrar eldominio en una empresa registradora autorizada. El trámite cuesta algo de dinero, y por lo general laspropias empresas registradoras autorizadas ofrecen el servicio de alojamiento de páginas web. En lapágina http://www.nic.es, del órgano oficial de registros en España, que depende del Ministerio de Industria,se puede obtener más información sobre esta cuestión.

Una vez tengamos un lugar de alojamiento de la web, hay que subir (upload) los ficheros que conformanla web (documentos htm, imágenes, etc.) al directorio que nos haya asignado el servidor. Para ello seutiliza un protocolo de transferencia de archivos llamado FTP (File Transfer Protocol). Muchos servidoresponen su propia interfaz a disposición de los usuarios, con lo que no habría que utilizar ninguna aplicaciónadicional. Otros no lo hacen así, o dejan la opción de usar aplicaciones como WSFTP o Filezilla (ambosgratuitos y disponibles en Internet para su descarga). El más recomendable es Filezilla ya que esmultiplataforma (funciona con diferentes sistemas operativos).

Para enviar al directorio los ficheros mediante estos programas, el servidor nos debe dar un nombrede usuario y un acceso mediante contraseña.

En la imagen a continuación se presenta la interfaz o entorno de trabajo con Filezilla, muy similar ala del resto de programas. En la parte superior se hallan la barra de menús y las barras en las queintroducimos los datos de servidor, usuario y contraseña para la conexión.

En la parte central se encuentran dos ventanas, en ambas mitades de la pantalla. En la de la izquierdase representa el equipo local, y en la de la derecha el equipo remoto, el servidor que proporciona elalojamiento de la página.


4UNIDAD

●Servidor. (ITE. Banco de imágenes)

121

Cada uno de los lados tiene a su vez dos partes. En la parte superior se presentan todas las unidadesde almacenamiento y carpetas (dependiendo de lo desplegado que se quiera presentar) del equipo localy debajo, el detalle de la unidad o carpeta elegida. En la parte derecha aparece lo mismo pero para elequipo remoto. Se trata de una presentación a modo de explorador de dos equipos simultáneamente.En la parte derecha no aparece nada hasta que la conexión no se ha realizado con éxito. Una vez seestá conectado, se pueden manipular los archivos de ambos equipos: copiar, pegar, mover, eliminar, etc.En particular, tiene interés la opción de subir archivos al servidor. Para ello se selecciona cualquiera delos que están en el equipo local (pueden ser muchos a la vez). Una vez seleccionados, se pueden subir,por ejemplo, p con el botón derecho en la selección y eligiendo la opción “Subir”:ulsando

122

Es muy importante tener en cuenta que la estructura de directorios o carpetas y archivos debe serla misma en el ordenador o unidad de almacenamiento “local” que en el remoto o servidor web. Si estono es así, y las páginas se alojan en carpetas siguiendo una estructura diferente, no funcionarán losenlaces entre las páginas ni los enlaces a imágenes, elementos multimedia, ficheros en PDF, etc.

Una vez subidos los ficheros al directorio correspondiente, ya estará disponible la página y podremosvisitarla, tecleando la dirección que nos haya asignado el registrador del dominio o la empresa gratuitade alojamiento.


4UNIDAD

14. Explica razonadamente qué procedimiento es el más adecuado para insertar en una página web un vídeo que yaestá disponible en Internet, si no disponemos de mucho espacio en el servidor web.

15. Explica el procedimiento para subir un archivo a un servidor web en el que se tiene alojada una página.

� El objetivo de las páginas web es transmitir información, pero esto no va a ser posible si no se publican. Para ellonecesitamos un alojamiento, que puede ser gratuito o de pago (aunque no suele ser muy caro), y un programa detransferencia de ficheros para “subir” estos al servidor que nos indique la entidad que nos proporcione el servicio.

� Antes de subir los ficheros que conforman el sitio web debemos comprobar que todo funciona correctamente enel ordenador (en modo local) y luego mantener en el servidor la misma estructura de directorios y carpetas.

� Hay que tener en cuenta, no obstante, que muchas entidades de alojamiento proporcionan un servicio web detransferencia de ficheros lo que, según los conocimientos del cliente, puede simplificar el proceso.

R e c u e r d a


unidad 4 páginas web - · pdf fileunidad 4. 99 4. estructura básica de una...

Documents