20 abril 2009 in XHTML/CSS by dacho

Después de un tiempo inactivo con respecto al Tutor, vuelvo con todo. Para terminar en el lapso de los próximos 7 dias toda la parte de conceptos básicos, para luego comenzar con el maquetado completo de paginas.

Ahora que básicamente ya sabemos crear paginas web de texto y modificarlas en forma parcial lo que nos interesa por el momento es ¿como llamar de una pagina a otra o movernos dentro de las mismas haciendo clics?

Bueno la respuesta a ese problema son los HIPERVINCULOS.

Los hipervinculos son otros de los elementos web mas importantes dentro de una pagina, es decir ¿de que serviria la red si no podemos saltar de pagina en pagina?

La sintaxis basica de un hipervinculo es las siguiente:

 
<a href="direccionweb.html">Texto que se muestra en el enlace</a>

Bueno visto esto crearemos 3 archivos html, y ya que estoy estudiando analisis matematico utilizare la informacion basica que hay en el departamento de matematica de mi facultad para crear una mini pagina sobre la materia, donde incluiremos informacion de fechas de parciales, finales y linkearemos una pagina con el programa de la materia y otra con la bibliografia optativa:

Aquí va la pagina de el programa, la llamaremos programa-de-analisis-I.html

<!-- Archivo: "programa-de-analisis-I.html" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Analisis matematco I: Programa de la materia</title>
</head>
 
<body>
 
<h1>Programa de la materia</h1>
 
<h2>TOPOLOGÍA EN R y en Rn .</h2>
<p>Completitud de R. Existencia del supremo y equivalencias. Distancia, discos abiertos y discos cerrados. Puntos interiores. Interior de un conjunto. Conjuntos abiertos. Puntos adherentes. Clausura de un conjunto. Conjuntos cerrados. Conjuntos acotados. Límite de sucesiones de números reales. Límite de sucesiones en Rn y límite en cada coordenada.</p>
 
<h2>FUNCIONES DE Rn en Rk ( n, k = 1, 2, ... )</h2>
<p>Representación gráfica. Dominio de definición. Curvas y superficies de nivel. Límite de funciones de Rn en Rk . Límite a lo largo de rectas y de curvas. Funciones contínuas. Composición de funciones contínuas. Propiedades de las funciones contínuas.</p>
 
<h2>CÁLCULO DIFERENCIAL EN VARIAS VARIABLES</h2>
<p>Derivadas parciales. Aproximación lineal. Diferencial de una función. Matriz jacobiana. Plano tangente al gráfico de una función. Regla de la cadena. Teoremas generales de la función inversa y de la función implícita. Producto escalar en Rn . Ecuación del plano ortogonal a un vector. Derivadas direccionales. Gradiente. Relación con las superficies de nivel y la dirección de máximo crecimiento. Plano tangente a una superficie de nivel. Teorema del valor medio en varias variables. Derivadas de orden superior. Aproximación polinomial de orden 2. Matriz Hessiana ( o Hessiano ) de una función.</p>
 
<h2>EXTREMOS DE FUNCIONES DE VARIAS VARIABLES</h2>
<p>Puntos críticos y extremos de una función. Formas cuadráticas, matriz asociada. Análisis de los puntos críticos en varias variables a partir del Hessiano: máximos, mínimos, puntos de ensilladura. Extremos ligados: extremos de una función sobre un conjunto dado por una ecuación G = 0. Condición para que un punto sea punto crítico. Multiplicadores de Lagrange.</p>
 
<h2>INTEGRALES DOBLES Y TRIPLES</h2>
<p>Repaso : integral definida, sumas de Riemann, Teorema fundamental del cálculo, regla de Barrow. Integrales impropias : definiciones, propiedades, criterios de convergencia, convergencia absoluta. Aplicación : convergencia de series. La integral doble sobre rectángulos. La integral doble sobre regiones más generales. Cambio del orden de integración : Teorema de Fubini. La integral triple. El Teorema de Cambio de variables. Aplicaciones de las integrales dobles y triples.</p>
 
</body>
</html>

Ahora la pagina de la bibliografia:

<!-- Archivo: "bibliografia.html" -->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Analisis matematco I: Programa de la materia</title>
</head>
 
<body>
 
<h1>Bibliografia Optativa</h1>
 
<!-- Incluire aquí un nuevo elemento HTML, los <ul> <li> nos proveen una forma de organizar la informacion, es decir se agrupan en las famosas viñetas, mas adelante aprenderemos a utilizarlo, aunque no resulta dificil de entender su estructura. -->
 
<ul>
   <li>NORIEGA, R. : Cálculo Diferencial e Integral. Editorial Docencia</li>
   <li>LAGES LIMA, E. : Curso de análise, volúmenes 1 y 2.</li>
   <li>MARSDEN, J. y TROMBA, A. : Cálculo Vectorial. Tercera edición. Addison-Wesley.</li>
   <li>SPIVAK, M.: Calculus ( Cálculo Infinitesimal ), Vol I y II. Ed. Reverte.</li>
   <li>PISKOUNOV, N. : Cálculo diferencial e integral, tomos I y II. Ed. Mir.</li>
   <li>SPIEGEL, M. R. : Cálculo superior ( Advanced Calculus ). Serie Shaum.</li>
   <li>REY PASTOR, J. , PI CALLEJA y TREJO : Análisis Matemático, Vol. I y II. Ed. Kapelusz.</li>
   <li>APOSTOL, T. : Calculus, Vol. I y II. Editorial Reverte.</li>
   <li>COURANT, R. : Diferential and Integral Calculus. Ed. Interscience</li>
</ul>
 
 
</body>
</html>

Y por ultimo nuestra pagina principal, index.html. Este nombre es especial, porque todas las paginas webs deben o al menos deberian tener una pagina index.html. Esto le indica al servidor que mostrar cuando uno instancia una carpeta, es decir si por ejemplo alguien entra a www.blogdelaweb.com.ar/miproyecto (la web no existe es solo una suposición), siendo miproyercto una carpeta, lo que el servidor nos mostrara si existe sera en realidad www.blogdelaweb.com.ar/miproyecto/index.html o en su defecto www.blogdelaweb.com.ar/miproyecto/index.php. Por ello hice un parentesis antes de crear la pagina index.html:

<!-- Archivo: "index.html" -->
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Pagina de Analisis Matematico I para computacion</title>
</head>
 
<body>
 
<h1>Análisis I - Análisis Matemático I - Matemática 1 - Análisis II (C)</h1>
<p>Curso regular primer cuatrimestre año 2009</p>
 
<!-- Incluire aquí un nuevo elemento HTML, los <ul> <li> nos proveen una forma de organizar la informacion, es decir se agrupan en las famosas viñetas, mas adelante aprenderemos a utilizarlo, aunque no resulta dificil de entender su estructura. -->
 
<h2>Primer parcial</h2>
<p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p>
 
<h2>Segundo parcial</h2>
<p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p>
 
<h2>Primer Recuperatorio</h2>
<p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I
 
<h2>Segundo Recuperatorio</h2>
<p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II
 
 
</body>
</html>

Estamos en condiciones de probar nuestra primera pagina

¡Puedes abrir index.html!

Bueno ahora como te habras dado cuenta no existe forma de saltar de pagina en pagina a menos que habramos las paginas de una o sepamos la direccion web y la coloquemos manualemente en la barra de direcciones. Lo que habra que hacer es buscar un lugar en que cada pagina para colocar los links correspondientes a cada pagina. Utilizando el primer codigo que puse en esta leccion. Yo lo hare solo en el index, y ustedes deberan colocar un enlace de vuelta al index en las distintas paginas en el lugar que mas les guste.

Aqui va el index con los links incluidos y sin trampas xD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Pagina de Analisis Matematico I para computacion</title>
</head>
 
<body>
 
<h1>Análisis I - Análisis Matemático I - Matemática 1 - Análisis II (C)</h1>
<p>Curso regular primer cuatrimestre año 2009</p>
 
<h3><a href="programa-de-analisis-I.html">Programa de la materia</a></h3>
<h3><a href="bibliografia.html">Bibliografia Optativa</a></h3>
 
<!-- Incluire aquí un nuevo elemento HTML, los <ul> <li> nos proveen una forma de organizar la informacion, es decir se agrupan en las famosas viñetas, mas adelante aprenderemos a utilizarlo, aunque no resulta dificil de entender su estructura. -->
 
<h2>Primer parcial</h2>
<p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p>
 
<h2>Segundo parcial</h2>
<p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p>
 
<h2>Primer Recuperatorio</h2>
<p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I
 
<h2>Segundo Recuperatorio</h2>
<p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II
 
 
</body>
</html>
</html>

Y ahora si puedes probarlos

Enlaces Relativos
Una aclaracion importante con respecto a los vínculos es que generalmente si son de una misma web conviene darlos de forma relativa, como lo he hecho yo en ejemplo. Es decir cuando coloque su dirección en el href=”" no coloque toda la direccion, por el simple hecho que no tengo ni idea en que disco de su maquina ejecutan el archivo, ni en que carpatas y subcarpetas. Pero si se o al menos supongo que estan colocando todos los archivos en la misma carpetas, entonces de esa forma no hace falta llamar a ningun otro lado. Simplemente llamamos al nombre del archivo.

Llamando a un enlace que esta dentro de otra carpeta
Si nosotros tenemos por ejemplo nuestro index.html en una carpeta llamada “practico”, y dentro de esta carpeta tenemos otra carpeta llamada “programa” y queremos llamar a el archivo dentro de programa que se llama “analisis-matematico-I.html” nuestro enlace seria:

 
<a href="programa/analisis-matematico-I.html">Texto que se muestra en el enlace</a>

Eso era algo facil de suponer, y volver a la carpeta anterior se lo realiza con la instruccion .. (dos puntos). Es decir si estamos en el archivo “/practico/programa/analisis-matematico-I.html” y queremos volver a “/practico/bibliografia.html” nuestro codigo seria:

 
<a href="../bibliografia.html">Texto que se muestra en el enlace</a>
 
<!-- Esto es volver un directorio para atras con el ../ y mostrar el archivo bibliografia.html-->

Llamando a paginas externas

Las paginas externas, que no tienen alojado el vinculo dentro de el mismo servidor que nosotros, por ejemplo si estas en tu pagina y queres apuntar a www.diprox.com.ar (es donde trabajo), el codigo del vinculo es:

 
<a href="http://www.diprox.com.ar">Diseño Web</a>
 
<!-- Es necesario incluir el http:// para que el vinculo funcione correctamente, eso le dice que es una pagina externa-->

Si no colocas el http://, pasa esto: clic aquí para ver que pasa

Bueno Hemos aprendido a manejar vinculos de manera basica, existen otras opciones y cosas que nos permiten hacer los vinculos, como abrir la pagina automaticamente en una nueva ventana, vinculos dentro de una misma paginas, tambien llamados anclas, y tampoco hemos visto como cambiar ese color azul feo, pero paciencia porque todo llega.

Los espero en la proxima leccion, la cual estara seguro antes del jueves :-)

Siguiente Lección >>

>> Indice de Contenido <<

Entradas Relacionadas: