| DEPARTAMENTO DE MATEMATICA - FCEyN - UBA |
| Ejemplo 2: Página Personal | Instalación de páginas de materias y algunas sugerencias |
A continuación se tiene un modelo para la página de una materia del departamento. Tal vez sea conveniente que al tiempo que se leen los distintos comentarios, se observe en un navegador el aspecto final del ejemplo; para esto alcanza con abrir en otra ventana este archivo. En este link se puede descargar un modelo para la página de una materia similar al que se describe en el ejemplo, aunque con un aspecto más parecido al de la páginas del Departamento. Este modelo es fácilmente modificable, aunque no se lea todo lo que sigue.
Todo archivo html comienza con la etiqueta <html> y termina con </html> como muestran las líneas 1 y 59 del ejemplo. Usualmente, la primera etiqueta esta acompañada de varias opciones que no se comentan en estas notas. Las dos instrucciones muestran un aspecto general del lenguage: Para indicar al navegador que cierta porción de texto debe procesarse de determinada manera, la etiqueta que da la instrucción marca el comienzo en la forma <etiqueta> y el final con </etiqueta>. Por supuesto, hay excepciones: Si se quiere cambiar de renglón no hay nada que encerrar, la instrucción correspondiente es <br>.
A continuación aparece la etiqueta <head> en la línea 2 que cierra en la 4 y un poco más abajo la etiqueta <body> que cierra en la línea 58. Todo lo que está dentro del par <body> </body> será mostrado en la página por el navegador. Por el contrario, lo que se halle entre <head> y </head> no forma parte del texto de la página en sí; en este caso, lo que figura dentro de la etiqueta correspondiente a title es lo que aparece en la barra superior del navegador. La etiqueta body suele estar acompañada de varias opciones; por ejemplo para que el color de las letras de la página sea azul, se coloca <body fgcolor="blue">. Las opciones se colocan sólo cuando comienza el bloque, en este caso igual se cierra con </body>. Algunas otras opciones se comentan en el Ejemplo 2
El título de la página aparece en este caso dentro del par h1 en la línea 6. Estas etiquetas suelen usarse para títulos de páginas, encabezados secciones etc. y van decreciendo en tamaño de h1 hasta h6. Además de mostrar el texto en negrita esta etiqueta cambia de renglón y deja cierto espacio al cerrarse. En la línea siguiente aparece otro ejemplo, en este caso de h3
A lo largo del texto aparecen distintos caracteres acentuados. estos, junto con algunos caracteres especiales, pueden introducirse directamente si se tiene el teclado configurado para el idioma español y también pueden introducirse tipeando el siguiente código:
| á | á | é | é | í | í | ó | ó | ú | ú |
| ñ | ñ | Ñ | Ñ | ¡ | ¡ | ¿ | ¿ | |
La última instrucción que aparace en la tabla, corresponde a dejar un espacio en blanco. Se utiliza cuando se quiere dejar cierto espacio entre dos palabras de un mismo renglón.
Entre la línea 8 y la 57 se tiene una lista no numerada, con algunas listas anidadas. Las listas no numeradas abren con <ul> y cierran con </ul>. Cada ítem de la lista se indica con <li> (si bien está definida </li>, en general esta etiqueta no se cierra). Notemos que cada </li>, cambia automáticamente de renglón con respecto al ítem anterior (ver líneas 47 y 48). La etiqueta para listas numeradas es <ol>, los distintos items se indican igualmente con <li>.
Observando dentro de las listas, en la línea 9 se tiene "Horarios, profesores y aulas" dentro de <b> </b> que se encarga de mostrar el texto en negrita. Para obtener el texto en itálica, la etiqueta correspondiente es <i> y <u> para subrayar texto. En la línea 12 se tiene la etiqueta <br>; esta, como ya se dijo, cambia de renglón.
Por último, en las líneas 53, 54 y 55 se muestra una nueva etiqueta que tiene la forma <a href="direccion"> texto </a>. Esta instrucción es la utilizada para crear links a otras páginas o a otros sites, en este caso, lo que figura como "texto" (en las distintas líneas son "Normas de Seguridad e Higiene", "Práctica 1" y "Práctica 2") es lo que aparece en los navegadores subrayado y que carga lo que se encuentre en la dirección "direccion" cuando se hace click sobre ellos. En el Ejemplo 2 se discute con más detalle este tema pero vale la pena aclarar que la dirección a Normas de seguridad es correcta y así debe incluirse (es un desperdicio de lugar tener una copia de lo mismo en los directorios de cada materia).
Vale la pena una aclaración importante; dado el diseño del "site" del Departamento, este archivo debe guardarse con el nombre index.html. En Instalación de páginas de materias y algunas sugerencias se muestra cómo colocar este archivo en el servidor.
| Ejemplo 2: Página Personal | Instalación de páginas de materias y algunas sugerencias |