| DEPARTAMENTO DE MATEMATICA - FCEyN - UBA |
| Ejemplo 1: Página para una materia | Instalación de páginas personales y algunas sugerencias |
Al final del primer ejemplo, se mostró de manera breve la creación de enlaces o links; antes de presentar el segundo ejemplo, tal vez convenga profundizar un poco en este tema. Hacia el final del ejemplo, se encontraban las siguientes líneas:
En la línea 54, la dirección está dada simplemente por el nombre del archivo, mientras en que la línea 53 éste está precedido por una serie de . ./. En Instalación de páginas y algunas sugerencias se explica qué ubicación (y qué dirección) corresponde a estas páginas; pero aquí se puede señalar que la diferencia está en que el archivo prac1.pdf está en el mismo directorio que la página principal de la materia (que debe llamarse index.html); mientras que para llegar a normseg.html se debe retroceder (o subir) cuatro directorios (y a cada uno de ellos le corresponde un ../) y después cambiar al directorio varios donde se encuentra el archivo normseg.html
Tal vez el siguiente gráfico aclare un poco la situación, HTDOCS es el directorio donde es encuentran todos los archivos, algunos albergados en subdirectorios.
HTDOCS
|
------------------------------------------
| | |
varios materias images
| |
normseg.html analisis_Matematico_I_B
|
2003
|
2 _ index.html
prac1.pdf
prac2.pdf
De modo que para llegar a normseg.html desde donde está index.html debemos seguir el camino 2 -> 2003 -> analis... -> materias se tiene que "subir" cuatro subdirectorios y después se cambia a varios y allí está normseg.html
Otro modo de referirse a las "Normas ... " es <a href="/varios/normseg.html> Normas de ... </a>. Nótese al barra / delante de varios, esta indica que el directorio "cuelga" directamente de HTDOCS.
Por otra parte, si se desea crear un vínculo al archivo normseg.html
desde un archivo que esté en el directorio HTDOCS debemos "descender"
y para esto damos el camino completo; la
instrucción correspondiente es
<a href="varios/normseg.html> y si
desde el archivo en HTDOCS se quiere crear un link a prac2.pdf, la
instrucción correspondiente
es
<a href="materias/analisis_Matematico_I_B/2003/2/prac2.pdf>
En los casos mostrados, todos los archivos involucrados están alojados
en el mismo servidor. Si se desea crea un link a algún archivo que se
encuentra en otra máquina la forma de la instrucción es
<a href="http://la_direccion>. Por ejemplo, si se desea crear un
link que apunte al archivo xxxx.html que está en www.aaa.edu.tw
la instrucción correspondiente es
<a href="http://www.aaa.edu.tw/xxxx.html">link a xxxx</a>
También es posible apuntar a archivos locales como si fuese externos; por ejemplo, otra manera posible de crear un enlace a las normas de seguridad e higiene es
<a href="http://www.dm.uba.ar/varios/normseg.html">Normas de Seguridad e Higiene </a>Para ver el aspecto final del ejemplo que se desarrolla a continuación, se debe abrir en otra ventana este archivo.
Una diferencia que se puede apreciar con respecto al ejemplo 1, está en
la línea 5. La opción
background="ice.jpg" se encarga de poner en el fondo la imagen "ice.png".
Se debe aclarar que en este caso la imagen está en el mismo directorio
que la página que la invoca. En el ejemplo anterior si se quiere que la
página de la materia muestre el mismo fondo que las otras páginas del
Departamento, se debe poner
<body background="../../../../images/Ztile1w.gif">
Dado que las páginas personales no se encuentran en la misma
máquina que las de las materias, si se quiere usar este fondo se debe
usar la referencia externa
<body background="http://www.dm.uba.ar/images/Ztile1w.gif">
Es conveniente notar una vez más, que en el último ejemplo se debió anteponer
http:// porque el archivo no está en el mismo sitio que la
página que lo invoca.
Entre las líneas 6 y 22 aparacen las instrucciones correspendientes a una tabla, que es la que muestra la foto y a su lado texto.
Las etiquetas que abren y cierran una tabla son <table> y </table>. Para indicar el principio y fin de cada fila, se usan las intrucciones <tr> y </tr> y dentro de cada fila, para indicar el comienzo y fin de una celda se usa <td> </td> de modo que si se quiere crear una tabla de dos filas y tres colummas la instrucción correspondiente es
|
<table> <tr> (comienza la primera fila) <td>a11</td> <td>a12</td> <td>a13</td> </tr> (termina la primera fila) <tr> <td>a21</td> <td>a22</td> <td>a23</td> </tr> </table> |
Que muestra
|
(Lamentablemente el formato html no ofrece demasiadas opciones para componer fórmulas matemáticas; una de las pocas posibilidades que ofrece es la de colocar sub/supra índices con las etiquetas sub y sup por ejemplo la instrucción para a11 es a<sub> 11 </sub>.)
Respecto a las opciones que aparecen en el ejemplo; se tiene que:
En la línea 8 se muestra el modo de insertar una imagen. La estructura básica de la instrucción es <img src="direccion de la imagen">. El modo de dar la dirección es igual al que se usó para poner una imgen de fondo; en este ejemplo, la imagen está en el mismo directorio que la página donde aparace; de modo que basta con dar el nombre de la misma. La opción alt se utiliza para ofrecer un texto alternativo a la imagen. Es útil cuando el browser no está configurado para mostrar imágenes o cuando hay problemas con las mismas (por ejemplo la imagen está en un formato no soportado por el navegador)
En las líneas 26 28 se observan las etiquetas <p> </p>. Estas se utilizan para crear párrafos, y cuida de la separación entre los mismos.
En las líneas 34, 35, 39, 42 y 45 se muestran más ejemplos del uso de la etiqueta <a href= "... > </a>, en los primeros dos casos para referirse a archivos en subdirectorios del directorio donde está la página, en la línea 39 un link al sitio de la AMS, en la 45 a la página principal del Departamento. En la línea 42 se tiene una variante; la dirección comienza con mailto esto indica que el link no es una página html sino una dirección de correo electrónico. Al hacer click en este link, se abre el programa de correo electrónico si el navegador está configurado de esa manera.
| Ejemplo 1: Página para una materia | Instalación de páginas personales y algunas sugerencias |