MANUAL HTML by Diego Burguillo Algara

Manual HTML. Creación páginas Hipertexto o Web Este manual sólo pretende ser una rápida introducción al codigo HTML que permita la creación de páginas hipertexto.

Índice. • • • • • • • • • • • • • • •

Introducción Primeras etiquetas Saltos de línea Efectos de texto Tipos de letra Insertar imágenes Links, enlaces o anclas Rutas. Poner correctamente la ubicación de los recursos Crear listas Crear tablas Crear frames Fondos y colores Formularios Dónde albergar tus páginas Web Cómo hacer localizable tu página

Introducción Las páginas Web o hipertexto se diseñan utilizando un código llamado HTML, este código consiste en etiquetas que nuestro navegador o browser interpreta para dotar a la página Web o hipertexto de un determinado aspecto. Por tanto la página que estais viendo ahora mismo está hecha con estas etiquetas que hacen que tenga esta apariencia. Para crear una página Web basta usar cualquier editor de texto capaz de grabar los archivos con formato de texto (si bien ya hay una amplia gama de editores de páginas Web que posibilitan la edición de HTML). El siguiente paso será conocer algunas etiquetas HTML para comenzar el diseño de nuestras páginas.

Primeras etiquetas Las páginas Web o hipertexto comienzan con el código <html> y terminan con la etiqueta </html> . Muchas de las etiquetas de HTML funcionan de este modo, una indica el comienzo, otra el final y el texto que está entre ambas es el afectado por los atributos que indican las etiquetas.. Si queremos dar un título a la ventana que contiene nuestra página usamos los códigos: <title>Título de la página</title> . En este caso: <title>Manual HTML. Creación páginas Hipertexto o Web </title> .

El cuerpo de la página o del documento se mete entre la etiqueta <body> y </body> .

Hay comandos para el tamaño de la letra: <h1> Texto... </h1>

Para el tamaño más grande hasta <h6> Texto... </h6> Para el más pequeño

El esquema básico, por tanto, de una página Web sería el siguiente: <html> <title> Título de mi página</title> <body> <h1>Mi documento...</h1> <h1>Mi documento...</h1>

resto del documento... resto del documento... resto del documento... </body> </html>

Una vez guardado este archivo con formato de texto en el disco duro podemos

visualizarlo con Netscape pinchando en la opción: File-->Open file e indicando la dirección en la que se encuentra el archivo.

Saltos de línea Si intentamos hacer una página y la visualizamos después, nuestra primera sorpresa será ver que no se han respetado los espaciaos entre palabras, ni las tabulaciones ni los retornos de carro,... todas estas acciones tienen sus propias etiquetas, son las siguientes: • <br> provoca un retorno de carro. • <p> provoca un salto de párrafo. • <page> provoca un salto de página. • <hr> crea una línea horizontal. Estas etiquetas se caracterizan por no tener código de finalización.

Efectos de texto Veamos otros efectos que podemos crear sobre el texto: • <blockquote> Texto... </blockquote> produce un sangrado. • <center> Texto... </center> produce un centrado. A partir de la versión 2.0. de Netscape disponemos de comandos para alinear párrafos, a la izquierda, derecha y centrarlos, son los siguientes: • <p align="left"> Párrafo... </p> Alinea a la izquierda. • <p align="center"> Párrafo... </p> Realiza un centrado. • <p align="right"> Párrafo... </p> Alinea a la derecha. La siguiente etiqueta hace que el texto aparezca parpadeando: • <blink> Texto... </blink> y esto es un ejemplo. Ya tenemos unos cuantos códigos para trabajar con texto, veamos ahora que tipos de letra podemos usar.

Tipos de letra Aquí además veremos unos efectos particulares sobre la letra como el subrayado, negrita, cursiva y otros.

Las siguientes etiquetas llevan asociadas unos tipos de letra que se relacionan con una información en particular: •

<address> Texto... </address>

•

<cite> Texto... </cite>

• • • • • • •

Dirección.

Cita. <code> Texto... </code> Código. <dfn> Texto... </dfn> Definición. <em> Texto... </em> Énfasis. <kbd> Texto... </kbd> Teclado. <samp> Texto... </samp> Ejemplo. <strong> Texto... </strong> Fuerte. <var> Texto... </var> Variable.

Veamos las etiquetas para dar atributos especiales a las letras: • <b> Texto... </b> Para escribir en negrita. • <i> Texto... </i> Para escribir en cursiva. • <u> Texto... </u> Para escribir en subrayado. • <tt> Texto... </tt> Tipo máquina de escribir. • <pre> Texto... </pre> Texto preformateado, respeta los espacios.

Insertar imágenes A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif. La etiqueta que inserta una imagen es: •

Debemos tener en cuenta que hay usuarios en Internet que no disponen de visualizadores gráficos y por tanto sólo pueden ver texto. Hay una etiqueta, alt="texto" que sustituye la imagen con texto en el caso de que el visualizador o navegador que usemos no pueda presentar imágenes. Esta etiqueta es muy importante sobre todo por lo que se explicará en el siguiente capítulo, Links, enlaces o anclas. Veamos lo que puede embellecer una imagen un documento, el código usado para traer esta imagen es: • <img src="/gifs/web.gif"> y el efecto es el siguiente:

Lo siguiente que escribamos aparecerá alineado en a la izquierda en la parte inferior de la imagen, pero existen etiquetas para modificar esto, son las siguientes: • <img src="localización imagen" align=middle> para que el texto se inicie en la parte media de la imagen. • <img src="localización imagen" align=top> para comenzar a escribir en la parte superior de la imagen. El comando correcto para insertar la imagen debería haber sido el siguiente: • <img src="/gifs/web.gif" alt="aquí hay una imagen"> de este modo si la persona no tuviese un visualizador gráfico en lugar de ver la imagen vería el texto alternativo:aquí hay una imagen . Repito que esto tiene gran importancia en el siguiente capítulo. Por último comentar que podemos modificar la altura y anchura de las imágenes con las etiquetas: • width y •

height

Veamos un ejemplo: •

el siguiente:

Links, enlaces o anclas

el efecto es

Es una de las partes más importantes de las páginas Web, esto es hipertexto. Los links o enlaces nos permiten leer un documento de forma no secuencial, saltando de una parte a otra según nos interese. En este capítulo veremos como crear enlaces a un mismo documento y como crear enlaces a otros documentos y también veremos como se definen los elementos que actuan de enlace. Lo primero que vamos a realizar enlaces a otras partes dentro del mismo documento. Las etiquetas son las siguientes: •

<a href="#nombre que usaremos como enlace"> Texto que actua como enlace</a>

con esto hemos definido un ancla.

Cuando pinchemos sobre el texto que actua como enlace saltaremos a otra parte del documento, que es donde nosotros haremos una marca con otra etiqueta, que es la siguiente: • <a name="nombre que usaremos como enlace"> aqui es donde saltaríamos. Esto quedará perfectamente claro con un ejemplo: •

<a href="#capitulo1">Pincha aquí para saltar al capítulo 1</a>

este

comando tiene el siguiente efecto: Pincha aquí para saltar al capítulo 1 Después definimos la marca a donde saltaremos en caso de pinchar donde está indicado. El comando para esto es: •

Es decir que saltaremos dentro del documento hasta donde se encuentre la marca que nosotros hayamos puesto con a name. Lo que acabamos de ver son enlaces dentro de un mismo documento pero puede ocurrir que nosotros deseemos establecer enlaces con otros documentos en nuestra máquina o en cualquier otra, la forma de hacerlo es similar a lo anterior pero más fácil. El código que usamos es: •

<a href="dirección del documento"> Texto que actua como enlace</a>

Veamos de nuevo un ejemplo: •

<a href="/ejemplo.htm">Pincha aquí para saltar a otro documento"></a>

esto tiene el siguiente efecto: Pincha aquí para saltar a otro documento Pero además de poder usar texto como enlace también podemos usar imágenes, pero que pasaría si un enlace se define con una imagen y nuestro visualizador no puede ver imágenes, pues sencillamente que no podemos usar ese enlace, pero a la hora de definir enlaces con imágenes podemos definir un

texto alternativo que aparecerá en el caso en el que no se pueda ver la imagen, esto se hacía con alt , veamos otra vez un ejemplo: •

Estas etiquetas hacen que la siguiente figura actue como un enlace al documento ejemplo.htm.

Rutas. Poner correctamente la ubicación de los recursos Una de las pequeñas dificultades con las que nos podemos encontrar a la hora de utilizar los links o enlaces es la de establecer la ruta correcta en la que se encuentra el archivo al que queremos apuntar. Imaginemos que mi espacio Web estuviese estructurado del siguiente modo:

Y que mi página principal se llamase inicial.htm . Entonces para llegar hasta mi página principal habrías tenido que indicar la siguiente dirección en tu navegador: http://www3.adi.uam.es/~dcc/inicial.htm . En este caso ponemos: http porque estamos usando protocolos de trasferencia de hipertexto (Transfer Protocol HiperText). A continuación viene: www3.adi.uam.es este es el nombre (dentro de Internet) del ordenador (o servidor o host) que contiene mis páginas. Después viene la ruta de directorios que hay que seguir dentro del ordenador: /~dcc . Por último el nombre del archivo que queríamos ver. Por tanto, en el ejemplo propuesto en esta sección, para localizar mi página principal dentro de Internet tendríamos que indicar al navegador la siguiente dirección: http://www3.adi.uam.es/~dcc/inicial.htm . Ahora vamos a ver unos ejemplos de como habría que organizar los links o enlaces dentro de mi página principal inicial.htm . Siguiendo el ejemplo propuesto en esta sección yo supongo que la gente que se conecta a mi Web lo hace a través de la página

principal inicial.htm , en ese instante el ordenador se encuentra dentro del directorio /~dcc (ya que ahí se encuentra el archivo inicial.htm . Por tanto si yo quiero establecer un link o enlace que apunte a otro archivo infor.htm que se encuentra dentro del mismo directorio /~dcc el código que tendría que poner sería el siguiente: <a href="infor.htm">Texto de enlace</a>

o también

<a href="http://www3.adi.uam.es/~dcc/infor.htm">Texto de enlace</a>

Lo más razonable sería colocarlo de la primera forma pero la segunda también sería válida. Supongamos que en este nuevo documento infor.htm se hace referencia a un gifanimado (una imagen animada) que se encuentra en: /~dcc/grafico/animado y con el nombre: graf1.gif . El código que tendría que poner en el archivo para que se pudiera visualizar en pantalla sería el siguiente: <img src="grafico/animado/graf1.gif"> o también <img src="http://www3.adi.uam.es/~dcc/grafico/animado/graf1. gif">

Con este código lo que hacemos es indicarle al ordenador la ruta de directorios que debe seguir para encontrar el archivo de imagen requerido. Seguiríamos estando situados dentro del directorio: /~dcc , todavía no nos hemos movido de aquí. Imaginemos ahora que también dentro del archivo: infor.htm tenemos un link o enlace que apunta a otro documento (dentro del ordenador en que nos encontramos ahora). Digamos que apunta al archivo: manual.htm (que se encuentra en /~dcc/documen/manual) . El código que tendríamos que escribir es el siguiente: <a href="documen/manual/manual.htm">Texto de enlace</a> o también <a href="http://www3.adi.uam.es/~dcc/documen/manual/manual.ht m">

Si pinchamos sobre ese link saltaríamos al documento manual.htm y ahora estaríamos en otro directorio, concretamente en: /~dcc/documen/manual Si este documento hiciese referencia a una imagen, por ejemplo a ima1.gif que se encuentra en: /~dcc/grafico/simple tendríamos que indicar al ordenador que ruta debe seguir para encontrarla. Como estamos en /~dcc/documen/manual debemos retroceder dos directorios hasta situarnos en /~dcc una vez ahí nos metemos en el directorio grafico/simple y a continuación indicamos el nombre del archivo. El código quedaría así: <img src="../../grafico/simple/ima1.gif">

o también

En este momento no nos habríamos movido del directorio en el que nos encontramos seguiríamos en /~dcc/documen/manual y sólo habríamos indicado al ordenador la ruta que debe seguir desde donde nos encontramos para localizar la imagen que estamos pidiendo. Si ahora queremos dentro del documento manual.htm establecer un link que apunte de nuevo a la página principal incial.htm tendríamos que indicar la ruta correcta, es decir, retroceder el directorio manual , retroceder el directorio documen y ya estaríamos en el directorio /~dcc que es donde se encuentra inicial.htm . Por tanto las etiquetas son las siguientes: <a href="../../inicial.htm">Texto de enlace</a>

o también

<a href="http://www3.adi.uam.es/~dcc/inicial.htm>Texto de enlace</a>

Por último si dentro de este archivo, inicial.htm , tenemos un link que apunta a otra máquina (servidor o host de Internet) digamos por ejemplo al buscador OZU pues también hay que poner la ruta o dirección correcta, sería: <a href="http://www.ozu.es">Texto de enlace</a>

Si pinchamos sobre este link saltaríamos a otra máquina. Hay que tener todas esta cosas en cuenta a la hora de elabora un espacio Web para que no haya links o enlaces que apunten a lugares que no existen o lugares donde el archivo requerido no esta. Esto daría errores como respuesta. Por ejemplo si estando situado en la página principal inicial.htm yo programo un link que apunte a enlace.htm del siguiente modo: <a href="enlace.htm">Texto de enlace</a>

En este caso está claro que el ordenador no encontrará el archivo deseado por que estamos indicándole que lo busque en el directorio /~dcc que es en el que nos encontramos pero ahí no está el archivo buscado, el código correcto sería: <a href="documen/links/enlace.htm">Texto de enlace</a>

Crear listas Podemos definir listas numeradas o sin numerar y anidadas entre ellas de una forma muy sencilla. Si queremos usar listas numeradas usamos las etiquetas: • <ol> Indica que va a comenzar una lista numerada. • <li> Indica que lo que viene a continuación es un elemento de la lista. • </ol> Indica que la lista termina. Si queremos incluir otra listas dentro de la lista simplemente tenemos que volver a utiizar las etiquetas: <ol> y </ol> . Veamos un ejemplo: <ol> <li> Primer elemento de la lista <li> Segundo elemento de la lista

<ol> <li> Primer elemento de una lista anidada <li> Segundo elemento de una lista anidada

<li> n elemento de una lista anidada </ol> <li> Tercer elemento de la lista <li> Cuarto elemento de la lista

<li> n elemento de la lista </ol>

Todo este sencillo código tiene el siguiente efecto: 1. 2.

3. 4. 5. 6. 7. 8. 9.

Primer elemento de la lista Segundo elemento de la lista 1. Primer elemento de una lista anidada 2. Segundo elemento de una lista anidada 3. 4. 5. 6. 7. n elemento de una lista anidada Tercer elemento de la lista Cuarto elemento de la lista

n elemento de la lista

Las listas sin numerar siguen el mismo esquema pero con las etiquetas: • <ul> Indica que va a comenzar una lista sin numerar • <li> Indica que lo que viene a continuación es un elemento de la lista. • </ul> Indica que la lista termina. Los anidamientos funcionan exactamente igual que con las listas numeradas. Veremos aún un tipo de lista más, las listas de definición que tienen las siguientes etiquetas: • • • •

<dl> esto abre la lista. <dt> término a definir. <dd> definición del término. </dl> fin de la lista

En la etiqueta <dt> se pone un término del que se supone hay que dar una definición, en la etiqueta <dd> se pone la definición del término que aparecerá una línea por debajo y sangrada por la izquierda. Los anidamientos de este tipo de listas funcionan exactamente igual que lo explicado antes.

Crear tablas Para crear tablas usamos los siguientes códigos: • <table> indica el comienzo de una tabla. • <tr> indica el comienzo de una línea de la tabla. • </tr> indica el final de la línea de la tabla. • <td> indica el comienzo de una celda. • </td> indica el final de una celda. • <th> indica el comienzo de una celda que será una cabecera. • </th> indica el final de una celda que es una cabecera. • border indicamos que se pinte el borde d la tabla y de las celdas. • </table> indica el final de tabla. Vamos ha ver un ejemplo: <table border=10> <tr><th>Datos persona1</th><th>Datos persona2</th></tr> <tr><th>90</th><th>100</th></tr> <tr><th>60</th><th>62</th></tr> <tr><th>90</th><th>94</th></tr> </table>

Si introducimos este código obtendríamos el siguiente efecto: Datos persona1 Datos persona2 90

100

¿tu que prefieres? :-)), perdonadme todas por esta broma.

Crear frames Por frame entendemos la división de la pantalla en varias zonas o ventanas que pueden actuar de forma independiente las unas de las otras. Los navegadores que reconocen las etiquetas para realizar frames son Netscape y Explorer 2.0 y en adelante. A continuación vamos a ver como definir frames o ventanas y las peculiaridades que hay que tener en cuenta a la hora de cargar nuestras páginas en cada uno de ellos. • <frameset cols="30%,70%"> Esta etiqueta divide la pantalla en dos columnas que actuan como ventanas. Una de ellas ocupará el 30% de la pantalla y la otra ocupará el 70% de la pantalla. • <frameset rows="30%,70%"> Con esto dividiríamos la pantalla en filas en la misma proporción anterior. • <frameset cols="40,600"> La ventana de la izquierda ocupará 40 pixels y la de la derecha 600. • <frameset rows="80,400"> La ventana superior ocupará 80 pixels y la ventana inferior 400. • <frameset rows="20,100,*"> Habrá 3 ventanas. La primera tendrá 20 puntos, las segunda 100 y la tercera el resto de la pantalla. • <frameset cols="2*,*"> Dividiría la pantalla en tres partes y la primera columna ocuparía dos tercios de la pantalla. • <framaset rows="*,3*"> Divide la pantalla verticalmente en 2 partes. La primera fila obtendría un cuarto de espacio de la pantalla mientras que la segunda fila obtendría los otros tres cuartos restantes. • <frame src="documento.htm"> Con esta etiqueta indicamos que documento se va a cargar en cada ventana. A continuación vamos a ver un ejemplo. • name Esta etiqueta es importantísima para la definición de frames. Asigna a cada una de las ventanas definidas un nombre para poder depués referirnos a ella. • </frameset> Indica el final de la definición de los frames o ventanas. Veamos un pequeño ejemplo de como quedaria lo que hemos visto antes: <html>

Como siempre damos título a nuestra página</title> <frameset cols="30%,70%"> Con esto definimos dos columnas que actuarán como ventanas. <frame src="documen1.htm" name="ventana1"> Este será el documento que se cargue en la primera ventana que hemos llamado vetana1. <frame src="documen2.htm" name="ventana2"> Este será el documento que se cargue en la segunda ventana a la que hemos llamado ventana2. </frameset> Con esto indicamos que ya hemos terminado de definir los frames. </html> y aquí acabamos nuestro documento. <title>

Este sería un ejemplo con frames pero para que sea plenamente satisfactorio todavía necesitamos conocer más etiquetas. ¿Cómo funcionarán los enlaces dentro de las ventanas? Imaginemos que en nuestra ventana (columna) de la izquierda tenemos nuestro documento: documen1.htm que tiene varios links que apuntan a otros documentos. Lo que ocurriría si pulsamos en ellos es que esos documentos a los que apuntan los links o enlaces se cargarían en esa misma ventana lo que no suele ser el efecto deseado. Suele ser más usual que la ventana de la izquierda sirva de índice de un documento grande y que cuando pulsemos en un link de esta ventana de la izquierda el nuevo documento se cargue en la ventana de la derecha. Para hacer esto necesitamos las siguientes etiquetas: • target="ventana2" haría que el documento al que apunta el link o enlace se cargase en el frame que hemos llamado ventana2. Veamos un ejemplo. Supongamos que el documen1.htm está cargado en ventana1 y tiene un link que apunta a documen8.htm , si se pincha sobre este link queremos que documen8.htm se cargue en ventana2 entonces el enlace debería estar escrito de la siguiente forma: • <a href="documen8.htm" target="ventana2"> Pincha aquí para cargar documen8.htm</a> Esto haría que el documento se cargase en la otra ventana. Al final de esta sección veremos un ejemplo práctico de cómo queda todo esto, pero antes debemos ver más etiquetas: •

•

</noframes>

Estas dos etiquetas se utilizan para tener en cuenta a los navegadores que no soportan frames. Todo lo que vaya entre ambas etiquetas será sólo visualizado por navegadores que no soportan frames. Los atributos de los frames nos ofrecen muchas posibilidades. Estas etiquetas van colocadas dentro de la etiqueta frameset: • frameborder=0 Colocando esto dentro de la etiqueta frameset hacemos que las ventanas aparezcan sin borde. • border=0 Hace que desaparezcan los huecos de separación entre frames. Netscape. • framespacing=0 Para explorer. Realiza la misma función que border en Netscape. Estas otras van colocadas dentro de cada frame y sólo tienen efecto dentro del frame en que se definen: • marginwidth="Número" Número de pixels de los márgenes izquierdo y derecho del frame. • marginheight="Número" Número de pixels de los márgenes superior e inferior del frame. • scrolling="yes, no, auto" Si damos el valor yes el frame siempre tendrá barra deslizadora, con el valor no el frame no presentará nunca la barra deslizadora y con el valor auto aparecerá la barra deslizadora si fuese necesario para ver la

• •

información. Este último valor parece el más razonable y es el que tiene un frame por defecto. noresize Impide que se pueda cambiar el tamaño de la ventana o frame con el ratón. No es aconsejable. frameborder="no" Elimina el borde del frame.

La etiqueta target también posee unos atributos muy interesantes: • target="_blank" Hace que una nueva copia del navegador se abra y el enlace se cargue en esta nueva copia a pantalla completa. • target="_self" El documento al que apunta el enlace se carga en ese mismo frame. • target="_top" El documento al que apunta el enlace se carga a pantalla completa suprimiendo todos los frames. Su uso es muy recomendado sobre todo cuando el enlace apunta a páginas que no son nuestras. Antes de ver un ejemplo de esto comentar que podemos utilizar frames anidados, es decir, imaginemos dos filas una superior y otra inferior y en la fila superior necesitamos definir dos columnas pues podríamos hacerlo, el código sería el siguiente: <html>

Página con frames anidados</title> <frameset rows="20%,80%"> Definimos dos filas. <frameset cols="15%,*"> En la primera fila se crean dos columnas. <frame src="documen1.htm"> Se cargaría en la columna izquierda de la fila superior. <frame src="documen2.htm"> Se cargaría en la columna derecha de la fila superior. </frameset> Cerramos la definición de frames de la primera fila. <frame src="documen3.htm"> Se cargaría en la fila inferior. <title>

</frameset> </html>

Veamos finalmente un ejemplo prático sobre la utilización de frames, lo que haremos será lo siguiente: 1. Crearemos un documento HTML que definirá los frames, serán dos frames en columnas, el de la izquierda contendrá un índice y el de la derecha un manual que constará de un par de capítulos. Además crearemos un documento llamado inicial.htm que será el que cargaremos inicialmente en la segunda ventana. 2. Crearemos el documento HTML que irá en la primera ventana que estará conpuesto por un índice. Lo llamaremos indice.htm 3. Crearemos los domentos HTML que irán en la segunda ventana (a los que harán referencia los enlaces de la primera ventana) y que compondrán el documento. Los llamaremos capil.htm, capi2.htm y haremos uno que hará de introducción al que llamaremos inicial.htm . Definamos el primer documento:

<html> <title> En

este documento se definen los frames</title>

Lo siento pero tu navegador no soporta frames, pincha aquí para volver a ver el manual sin frames.</a> <a href="http://www3.adi.uam.es/~dcc/html/htm1.htm"> </noframes> </html>

Este sencillo código nos crea las dos ventanas, en la primera cargamos el indice y en la segunda inicial.htm . Además a la segunda ventana la hemos llamado ventana2 porque más tarde vamos a tener que referirnos a ella para cargar unos links. También hemos añadido un poco de código que será visualizará en caso de tener un navegador que no soporte frames. Vamos con el documento indice.htm , lo creamos del siguiente modo: <html> <title> Índice</title> <body> <a href="capi1.htm" target="ventana2"> Capítulo1</a> <a href="capi2.htm" target="ventana2"> Capítulo2</a> <a href="/~dcc/html/html1.htm" target="_top"> Vuelta

manual</a> </body> </html>

Nuestro índice consta de dos capítulos que están enlazados con la etiqueta correspondiente y hemos usado la etiqueta target="ventana2" para que esos capítulos se cargen en la ventana que hemos llamado ventado2 . El tercer enlace nos devulve al manual, hemos usado target="_top" para que el manual se cargue en una única ventana, sin frames. Ya hemos terminado el índice. Los documentos que irán en la segunda ventana serán documentos normales de HTML con algún contenido y no se van a detallar, serán de la forma: <html> <title> Capítulo

(número)</title>

<body>

Contenido del capítulo Contenido del capítulo Contenido del capítulo </body> </html>

Y les daremos los nombres correspondientes, es decir, capi1.htm , capi2.htm Veamos como quedaría todo esto: picha aquí para ver el ejemplo Con esto hemos terminado esta sección sobre frames.

Fondos y colores Los colores se crean mezclando los tres colores básicos: rojo, verde y azul. Cada color se especifica con números hexadecimales, es decir: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F (del 0 al 15) Los colores básicos se conseguirían del siguiente modo: • #FF0000 Este sería el color rojo. • #00FF00 Este el color verde. • #0000FF Por último el color azul. Por tanto, una cantidad de rojo (digamos #550000), mezclado con una cantidad de verde (digamos #00AA00) y una cantidad de azul (digamos #000088) nos daría el siguiente color: #55AA88. Para hacer un color más oscuro reduciríamos el número que lo indentifica, es decir, si queremos un rojo más claro en lugar de usar el número: #FF0000 podríamos usar #550000. Si lo que queremos son tonos más suaves reduciremos los números de los colores que no nos interesan, es decir, si en lugar de un rojo queremos un rosa tendrímos que hacer: #FF7070. Si queremos establecer un color de fondo para la información que estamos presentando en pantalla usamos la siguiente etiqueta: • bgcolor="#número" Esta etiqueta se introduce dentro de la etiqueta <body> . Por tanto, si hubiese decidido presentar este manual sobre un fondo rojo habría colocado la etiqueta body del siguiente modo: <body bgcolor="#FF0000">

Colocar colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los los links o enlaces si yo coloco un fondo de color azul?. Puesto que los links son

azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo. Podemos imaginar todavía un caso peor si decidimos colocar un fondo demasiado oscuro, tan oscuro que no permita distinguir con claridad la información que se presenta en pantalla. Este manual con un fondo muy oscuro sería ilegible. Podemos remediar estos eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas son las siguientes: • text="#número" Para el color del texto. • link="#número" Para el color de los enlaces. • vlink="#número" El color con que aparecerán los enlaces ya visitados. • alink="#número" Color del enlace cuando lo pulsamos. Por tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> Las etiquetas que hemos visto hasta ahora afectarí a la totalidad de nuestro documento pero podemos también cambiar los colores de forma local, quizá para resaltar algo: • <font color="#número"> Etiqueta de comienzo. • </font> Etiqueta final. Veamos un ejemplo: <font color="#0000FF"> Este texto ahora es de color azul y parece un link</font>

El resultado es el siguiente: Este texto ahora es de color azul y parece un link Hemos visto como cambiar de color el texto, enlaces, poner un color de fondo y ahora vamos a ver como poner una imagen de fondo. Es también muy sencillo basta con usar la etiqueta: • background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body> En la dirección: http://www3.adi.uam.es/~dcc he usado una imagen como fondo. Para que esta imagen aparezca simplemente he hecho: <body background="/~dcc/html/gifs/nombre">

Si pinchas en el link anterior podrás ver el ejemplo. Recordad que el color del fondo (o la imagen) puede dificultar la lectura del documento, elegidlos con cuidado.

Formularios Los formularios son elementos de nuestra página Web que permitirán a nuestro visitante interactuar con nuestra página. Los formularios interpretan las acciones que una persona realiza sobre nuestra página y obtiene en consecuencia determinada respuesta. Los programas que permiten una respuesta al usuario están escritos normalmente en Perl, C... Todo lo explicado hasta ahora sobrepasa las pretensiones de este manual en el que sólo se va a hacer referencia a la opción que permite a los formularios enviar datos a nuestra cuenta de correo, precisemos un poco más esto. Podemos definir ciertas variables dentro de nuestra página Web que pueden tomar ciertos valores predeterminados (que nosotros determinemos) o no. Estos valores de las variables pueden ser enviados a nuestra cuenta de correo por medio de una simple pulsación de un botón de nuestra página y lo que nosotros recibiremos será una especie de formulario rellenado por el lector de nuestra página. Veamos cual es la estructura de un formulario: •

<form action="mailto:dirección de correo" method="post"

Esta sería la etiqueta de inicio e indica que los datos introducidos en el formulario se enviarán a la cuenta de correo especificada.. La siguiente parte del formulario está compuesta por los diferentes elementos que pueden componerlo y que se detallan más adelante. Botones. Nos permitirán tanto dar la orden de enviar los datos a la cuenta de correo especificada como borrar los datos que hallamos introducido en el formulario. </form> Es la etiqueta que cierra el formulario. enctype="text/plain">

• •

•

Hagamos una pequeña descripción de la primera etiqueta que compone un formulario. • action Indica la acción que se realizará con los datos introducidos. En el caso del ejemplo enviarlos a la correspondiente dirección de correo. • method="post" Se enviarán (los datos) en cuanto se pulse el botón de envío. • enctype="text/plain" Los datos llegarán a la cuenta de correo con formato de texto plano. Un formato perfectamente legible por los lectores de correo. Detallemos ahora los diferentes elementos que forman un formulario y que permiten la introducción de datos por parte del lector de la página Web. Elementos de Texto Estos permitirán introducir en determinadas zonas de la página texto. Este elemento del formulario tiene la siguiente etiqueta: •

Con esta etiqueta hemos definido una variable que se llama Nombre_del_visitante y con type hemos indicado que esta variable será de tipo texto. Veamos como quedaría esto en el formulario: <form action="mailto:direccion de correo" method="post" enctype="text/plain"> Por favor, introduce tu nombre:<br> <input type="text" name="Nombre_del_visitante"> </form>

Esto tendría el siguiente efecto: Por favor, introduce tu nombre: Nuestro lector podría ahora rellenar el campo correspondiente con su nombre pero todavía no hemos definido ningún botón de envío, por tanto no podría hacernos llegar la información. Veremos más adelante como se crean estos botones. Veamos otras etiquetas que podemos incluir con este elemento de formulario: • size="número" define el número máximo de caracteres que nos llegarán. El valor por defecto es 20. • maxlength="número" define el número máximo de caracteres que podremos escribir en el campo. Además podemos sustituir type="text" por el valor type="password", esto hará que los datos introducidos aparezcan sustituidos por asteriscos impidiendo que terceras personas puedan verlos. Veamos un nuevo ejemplo de esto último: <form action="mailto:direccion de correo" method="post" enctype="text/plain"> Por favor, introduce tu nombre:<br> <input type="password" name="Nombre_del_visitante" size="7" maxlength="10"> </form>

Con el siguiente efecto: Por favor, introduce tu nombre: En el campo correspondiente al nombre del visitante podremos escribir como máximo 10 caracteres pero solo llegarán a nuestra cuenta de correo 7 caracteres. Elementos de áreas de texto Estos elementos permiten escribir varias líneas sin limitarnos a un pequeño campo como el anterior. Las etiquetas serían las siguientes:

•

La variable que contendrá el texto introducido la hemos llamado comentario. El área donde podremos escribir la hemos definido con un determinado número de columnas y filas. </textarea> Esta etiqueta cierra la definición de este elemento de formulario. <textarea name="comentario" rows="número" cols="número">

Veamos un ejemplo de esto último: <form action="mailto:direccion de correo" method="post" enctype="text/plain"> Por favor, introduce la opinión que te merece este manual:<br> <textarea name="comentario" rows="5" cols="50"> </textarea> </form>

Y el efecto sería el siguiente: Por favor, introduce la opinión que te merece este manual:

Faltaría por último definir los botones que permitirán el envío de la información a la cuenta de correo. Lo veremos más adelante, pero antes veamos otro nuevo elemento de un formulario. Elementos de menús Estos elementos permitirán a nuestro visitante elegir entre unas cuantas opciones (que compondrán un menú) predeterminadas que nosotros confeccionaremos. Las etiquetas son las siguientes: • <select name="edad"> Aquí definimos el nombre de la variable que contendrá la información. • option Con esta etiqueta definimos cuantas opciones consideremos necesarias. • </select> Esta cierra la definición de este elemento del formulario. Un nuevo ejemplo nos aclarará todo esto: <form action="mailto:direccion de correo" method="post" enctype="text/plain"> Por favor, indica tu edad:<br> <select name="edad"> <option>Menor de 20 años <option>Entre 21 y 50 años <option>Mayor de 50 años </select></form>

Y una vez más veamos el efecto que esto produce:

Por favor, indica tu edad:

Elementos de Confirmación o checkbox En este caso el lector de nuestra página pincha sobre unos recuadros que permitirán confirmar determinadas opciones. La etiqueta es: •

Veamos un ejemplo: <form action="mailto:dirección de correo" method="post" enctype="text/plain"> <input type="checkbox" name="Publicidad"> Deseo recibir publicidad. </form>

En este caso veríamos lo siguiente:     

Deseo recibir publicidad. El resultado de pulsar sobre el botón de enviar (que todavía no hemos visto) sería recibir un correo con el valor de la variable, es decir si se pulsó sobre la caja de confirmación recibiríamos: Publicidad=On Podemos introducir un atributo con el que la casilla de la opción correspondiente aparecerá confirmada, es decir seleccionada. • checked Hace que la casilla de confirmación aparezca seleccionada. Un ejemplo sería: <form action="mailto:dirección de correo" method="post" enctype="text/plain"> <input type="chekbox" name="Publicidad" checked> Deseo recibir publicidad. </form>

Con lo que obtendríamos:      

Deseo recibir publicidad.

Elementos de botones de radio Este caso es muy parecido a los elementos de menú que ya hemos visto. En esta ocasión se presentan al lector varias opciones entre las que se elige una por confirmación, es

decir, seleccionándola pinchando sobre el lugar correspondiente. La etiqueta: •

Veamos un ejemplo para aclarar esto: <form action="mailto:dirección de correo" method="post" enctype="text/plain"> Desea usted recibir información sobre: <input type="radio" name="Información" value="Medio ambiente"> Medio ambiente <input type="radio" name="Información" value="Internet"> Internet <input type="radio" name="Información" value="Desarrollo sostenido"> Desarrollo sostenido </form>

Veríamos lo siguiente: Desea usted recibir información sobre:     

Medio ambiente

    

Internet

    

Desarrollo sostenido Para que cualquiera de estas opciones apareciese ya seleccionada bastaría con incluir la etiqueta checked, por ejemplo: •

Veamos por fin los botones que se incluyen en los formularios y que permiten borrar la información que hemos escrito y dar la orden de enviar el formulario. Botonos de envío y borrado Tenemos que definir los elementos más importantes de un formulario: • <input type="submit" value="texto del botón"> Con esto creamos el botón que enviará los datos al pinchar sobre él. • <input type="reset" value="texto del botón"> Este botón borraría los datos que hallamos introducido sobre el formulario. Veamos un pequeño ejemplo: <form action="mailto:dirección de correo" method="post" enctype="text/plain">

Desea usted recibir información sobre: <input type="radio" name="Información" value="Medio ambiente"> Medio ambiente <input type="radio" name="Información" value="Internet"> Internet <input type="radio" name="Información" value="Desarrollo sostenido"> Desarrollo sostenido <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>

Que quedaría del siguiente modo: Desea usted recibir información sobre:     

Medio ambiente

    

Internet

    

Desarrollo sostenido

Enviar

Borrar

Para terminar con esta sección vamos a ver un ejemplo práctico en el que vamos a combinar varios de los elementos que hemos visto. Vamos a crear un formulario en el que el lector, en este caso tu, pueda poner unos comentarios sobre lo que le parece este manual y como mejorarlo que se me podrán enviar. Lo voy a dividir en cinco partes. En la primera definiré un elemento de texto para que introduzcas tu nombre. En la segunda un nuevo elemento de texto permitirá que introduzcas tu dirección de correo (de este modo podré contestarte). La tercera será un elemento de cajas de confirmación que nos permitirán puntuar este manual. La cuarta será un elemento de área de texto en el que podremos introducir todos los comentarios que creamos oportunos sobre este manual. El quinto elemento lo componen los botones de envío y borrado de datos. Comencemos. <form action="mailto:dcc@adi.uam.es" method="post" enctype="text/plain">

esta ocasión he introducido mi dirección de correo. Escribe tu nombre: Hemos definido el hueco donde puedes escribir tu nombre, un máximo de 20 caracteres. Introduce tu dirección de correo: <input type="text" name="Dirección_de_correo" size="20" maxlenght="20"> Esta variable de texto contendrá la dirección de tu correo para que yo pueda responderte. Este manual te parece: <input type="text" name="Nombre" size="20" maxlenght="20">

<input type="radio" name="El_manual_me_parece" value="Bastante bueno"> Bastante bueno <input type="radio" name="El_manual_me_parece" value="Bueno"> Bueno

<input type="radio" name="El_manual_me_parece" value="Malo"> Malo <input type="radio" name="El_manual_me_parece" value="Bastante malo">Bastante malo

Éstas serán todas las opciones para puntuar el manual. Por favor, introduce tus comentarios para ayudarme a mejorar este manual <textarea name="Comentarios" rows="7" cols="70">

Con esto hemos definido un área de texto de 7 filas y 70 columnas. <input type="submit" value="Enviar"> Aquí hemos definido el botón que enviará los datos del formulario en cuanto lo pinchemos. <input type="reset" value="Borrar"> Y si tenemos necesidad de borrar los datos que hemos introducido podemos pinchar este botón. </textarea>

</form>

Y ahora veamos como queda todo esto: Escribe tu nombre: Introduce tu dirección de correo: Este manual te parece:     

Bastante bueno

    

Bueno

    

Malo

    

Bastante malo

Por favor, introduce tus comentarios para ayudarme a mejorar este manual

Enviar

Borrar

Si introduces los datos pedidos en este formularios y pinchas sobre el botón enviar agradeceré tu colaboración.

Dónde albergar tus páginas Web

Una vez que hemos hecho nuestra primera página los siguientes objetivos deben ser: 1º. Guardar nuestra página en un ordenador que esté conectado siempre a la red y por tanto nuestra página estará siempre accesible. 2º. El objetivo de colocar una información en Internet es que ésta sea vista. Para hacer esto deberemos incluirnos en los buscadores más importantes de modo que la gente interesada en nuestra información pueda encontrarnos. En esta sección vamos a ver el primer punto. Hay multitud de servidores que nos brindarán espacio en su disco duro de forma gratuita. Será en estos ordenadores donde debamos dejar nuestras páginas. A cambio de permitirnos usar su espacio probablemente no tengamos que hacer nada o como mucho incluir su logotipo en nuestra página. Estos servicios subsisten gracias a la publicidad. Cuando alguien contacte con nuestra página recibirá además una franja de publicidad. A cambio nosotros no tenemos que pagar un duro. Por ejemplo un servidor que ofrece estos servicios es geocities . La dirección es: http://www.geocities.com. Aquí puedes conseguir 2 Megas de espacio en poco más de 20 minutos el único requisito es que introduzcas un poco de código HTML en todas las páginas que metas en ese servidor para que aparezca su logotipo. El único inconveniente es que toda la información que nos guía para conseguir el espacio de disco y meter tus páginas está en Ingles. Intenté conseguir espacio en servidores cuya información se ofrecía en español pero me pedían muchos datos y me daban muy poco espacio (150 K, una ridiculez comparado con los 2 Megas de geocities). Una vez introducidas tus páginas en alguno de estos servidores tendrán un URL es decir una dirección de Internet que metiéndola en el navegador aparecerá nuestra página. Os indico una dirección donde tenéis multitud de servidores que ofrecen su espacio para vuestra página de forma gratuita. Elegid el que más os convenga. http://www.ferca.net/esgratis/index.html En esta dirección encontrareis multitud de servicios gratuitos en Internet. En la sección Espacio para tus páginas Web encontraras una amplia lista de servidores donde puedes dejar tu página de forma gratuita. Una dirección más : http://www.ciudadfutura.net/webgratis/ Podréis encontrar servidores que llegan a ofreceros hasta 5 Megas de espacio gratuito.

Cómo hacer localizable tu página Una vez que un servidor alberga nuestra página y tenemos un URL es decir una dirección de Internet queremos que se nos pueda localizar, es decir que la gente pueda

visitarnos. Para movernos por Internet es inevitable el uso de Buscadores que nos lleven a documentos que contengan información que realmente nos interese. Los buscadores tiene un hueco donde colocas las palabras clave sobre las que quieres basar la búsqueda y al rato obtienes una lista de posibles documentos que tratan sobre las palabras que tu has introducido. La mayoría de los buscadores tienen una opción en la que se pueden añadir URLs . Se nos preguntará por las palabras clave que harán aparecer nuestra página. Es decir si nuestra página trata un tema de astronomía y queremos que gente que quiere información sobre este tema pueda encontrarnos sería bueno decirle al buscador que cuando alguien introduzca la palabra clave astronomía aparezca nuestra página. Hacer esto en 20 buscadores puede resultar desesperante en muchos sentidos: en el tiempo que vamos a invertir en poder realizar toda la operación, en lo mecánico de todo el proceso. Hay utilidades que harán todo este trabajo por nosotros: nos preguntarán por que palabras clave queremos ser encontrados, una descripción de nuestra página, por supuesto nuestro URL y automáticamente nos meterán en multitud de buscadores (nosotros podemos elegir en que buscadores entrar). En este sentido el mejor lugar que he visto es: http://www.enter.net.mx/xyz/atajos/autoregistralo.html. Hará que puedas ser encontrado a través de 4 palabras clave en multitud de buscadores en español e ingles. Volver a la página principal

Para hacerme llegar cualquier sugerencia, corrección o aclaración simplemente pincha aquí David Crecente Casanova.