un pequeño mundo en internet
Inicio Contacto MiniWebs Perfiles Sindicación Blog del Maky Mis fotos y Postales

MANUALES DE PROGRAMACIÓN


Manuales de Programación. En la actualidad sólo se dispone de un pequeño manual de Html y uno de Fortran.

  1. Manual de HTML
  2. Manual de Fortran

Manual de HTML

Un amigo me pregunto: ¿porque hay que saber HTML si hay programas como el Netscape Composer, el FrontPage entre otros que te facilitan la labor de hacer páginas webs, y además de forma muy rápida y fácil?. No supe que contestarle, tenía razón, pero como el saber no ocupa lugar nunca es malo saber un poco de este lenguaje. Pongamos un ejemplo por el que es bueno tener ciertas nociones. Estas visitando una página que te gusta, podrás abrir el código fuente y copiar la parte interesante. En caso de no conocer HTML, al abrir el código estarás más perdido que un piojo en la cabeza del Lenny Kravitz.

Para realizar tu página necesitas en principio un editor de textos para escribir los ficheros que la compondran, como puede ser el Bloc de notas del Windows o el Edit del MS-DOS aunque hay editores que incorporan las directivas del HTML con tal de facilitarte la labor como puede ser el EditPlus, entre otros.

Una vez tengas tu página lista tendrás que publicarla a través de un servidor. Como se sale del contenido de este manual me saltaré esta parte, aunque no os será difícil encontrar en Internet webs que ofrecen hosting tanto gratuito como de pago.

A continuación paso a explicar las directivas generales del HTML.

Estructura básica
Cabecera
Cuerpo
Espaciados y saltos de linea
Cabeceras y atributos del texto
Listas de elementos
Imagenes
Hyperenlaces
Tablas
Frames

Volver al Indice de Manuales de programación.

Estructura Básica

En la actualidad no existe un estándar de HTML ya que tanto Netscape como Microsoft se empeñan en incluir directivas que solo funcionan con sus respectivos navegadores, y como siempre el que sale perdiendo es el usuario, el cual no entra ni sale en estas guerras políticas, sociales o como prefieras llamarlas. De cualquier manera existen diferentes ordenes o directivas que se podrían decir que son activas en cualquier navegador y son las que a continuación mostraré.

Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva y otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras directivas. Las directivas abiertas constan de una sola palabra clave. Para diferenciar las directivas del resto del texto del documento se encierran entre los símbolos < y >. Las directivas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma. Una directiva puede contener "parámetros". Estos parámetros se indican a continuación de la palabra clave de la directiva. Más adelante se mostrará ejemplos de los diferentes tipos de directivas

En este manual se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML:

1) Las directivas se indican en letra mayúscula y en negrilla.
2) Los parámetros de las directivas se indican en letra minúscula y negrilla.

Un documento escrito en HTML contendría básicamente las siguientes directivas :

<HTML> Inicio del documento
<HEAD> Inicio de la cabecera
<TITLE> Inicio del título del documento
</TITLE> Final del título del documento
</HEAD> Final de la cabecera del documento
<BODY> Inicio del cuerpo del documento
</BODY> Final del cuerpo del documento
</HTML> Final del documento

Volver al índice de HTML

Cabecera del documento

La directiva <HEAD> </HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Este título será; el que aparezca en la barra de nuestro visor de páginas Web. Un pequeño paréntesis en el manual, ser imaginativos, y no como yo que lo único que se me ocurrió a la hora de poner un nombre a mi página fue el de EL MAKY.

Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de la red como son Altavista, Lycos, ..., utilizan esta información a la hora de indexar el contenido de la web a sus directorios. La directiva <META> lleva generalmente dos parámetros, name y content.

Ejemplo

  • <META name = "description" content = "Descripción de la página"> Indica al visor el nombre de la página y sus contenidos principales.
  • <META name = "keywords" content = "ingenieria, musica, links"> Indica al visor las palabras clave para los buscadores de Internet.

Si los archivos gráficos, sonidos, etc... los decides colocar en un directorio diferente al que esta el fichero html, habrás de utilizar la directiva <BASE>, de la siguiente forma:

Ejemplo

  • <BASE href = "http://www.elmaky.com/archivos/">

Un pequeño paréntesis, pero que es importante. Los servidores tiene la particularidad de que diferencian las minúsculas de las mayúsculas en el nombre de los ficheros, cosa que tendrás de tener en cuenta a la hora de escribir los nombres de ficheros en las directivas en el código HTML. Para tal de no complicarte la vida mi recomendación es que escribas los nombres de tus archivos todos en minúscula y evitar así problemas.

Volver al índice de HTML

Cuerpo del documento

Vamos a lo que es propiamente el contenido principal de nuestra página web, es decir que colocaremos aquello que el mundo va a saber gracias a las palabras, imágenes, enlaces, y sonidos que magistralmente colocareis (que bien hago la pelota). Las directivas a utilizar son, <BODY></BODY>. Podéis modificar la directiva de inicio añadiéndole varios parámetros a continuación os mostraré y que ayudan a mejorar el aspecto final del documento:

  • background="nombre de fichero gráfico"
    Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario. Tener siempre presente una cosa, cuanto más grande sea el archivo más tardará en cargarse.
  • bgcolor = "código de color"
    Indica un color para el fondo de nuestro documento. Este parámetro es incompatible con el anterior, es decir no se pueden usar los dos a la vez
  • text = "código de color"
    Nos define el color que tendrá el texto que incluyamos en nuestro documento.
  • link = "código de color"
    Este código nos define el color de los textos que dan acceso a un Hyperenlace, más adelante definiré en que consiste esta palabra.
  • vlink = "código de color"
    Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor.

Ahora el kit de la cuestión que es el codigo de color. Esté es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", es decir el rojo, verde y azul. Al código de color se le coloca a su principio el símbolo siguiente #.

En la actualidad muchos editores de HTML te permiten escoger el color directamente de una paleta sin recurrir al aprenderse los números. A continuación te muestro los códigos de los colores más comúnmente utilizados. Siempre puedes ir innovando variando algún numero del código para ver que color aparece.

negro #000000
verde oscuro #008000
rojo oscuro #000080
oliva #808000
azul marino #000080
púrpura #800080
gris #808080
amarillo #FFFF00
verde #00FF00
aguamarina #00FFFF
fucsia #FF00FF
plateado #C0C0C0
rojo #FF0000
azul #0000FF
verde azulado #008080
blanco #FFFFFF

Ejemplo

  • <BODY bgcolor=#FFFF00 text=#FFFFFF link=#FF0000 vlink=#000000>
    Esta directiva mostraría el fondo amarillo, con las letras en blanco, los hyperenlaces en rojo, y un hyperenlace visitado de color negro.

El siguiente paso es describir las directivas que van a ir dentro del <BODY></BODY>, lo cual paso a realizar en los siguientes capítulos.

Volver al índice de HTML

Espaciados y saltos de línea

Todos los navegadores de páginas Web actuales soportan todos los caracteres gráficos de la especificación ISO 8859-1, que permiten escribir textos en la mayoría de los países occidentales.

De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de "entidad". Estos caracteres pueden ser representados por un código numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo ; (punto y coma).

En cualquier libro de HTML podrás encontrar una tabla con las principales entidades. Debido a que cada vez esta en más desuso esta opción he decidido no incluirla para así no complicar el manual.

Una cosa a tener en cuenta es que en HTML solo se reconoce un espacio entre palabra y palabra, es decir aunque pongáis 7 espacios (tontería ponerlos pero a lo mejor se os han escapado) el navegador los ignorará y los eliminará viéndose únicamente uno sólo. De igual forma tampoco se respetan las tabulaciones, retornos de carro, etc..., tan habituales en los editores de texto normales. Para ello existen una serie de directivas que indican estos códigos. Si por el contrario incluimos la directiva <PRE></PRE>, obligamos al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.., pudiendo de esta forma a escribir 7 espacios continuos.

Para indicar un salto únicamente de línea se utiliza la directiva <BR> y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la directiva <P>. Esta directiva puede usarse también como directiva "cerrada" <P></P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera a esta directiva puede añadirse parámetros tal como es align que indica al visor la forma de "justificar" el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER.

Ejemplos

  • A continuación se muestra la misma frase pero con los dos tipos de directivas.

    <PRE> texto </PRE> 
    Con       la       opción  PRE
    <P> texto </P> Con la opción P

  • Ahora se muestra el parámetro "align"

    <P align=left>Alineado a la izquierda<P>

    Alineado a la izquierda

    <P align=center>Alineado a l centro<P>

    Alineado al centro

    <P align=right>Alineado a la derecha<P>

    Alineado a la derecha

Otra directiva interesante es <HR>, la cual muestra una línea horizontal de tamaño determinable. Tiene los siguientes parámetros opcionales :

  • align = posición
    Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center), de igual forma que en el párrafo.
  • noshade
    No muestra sombra, evitando el efecto en tres dimensiones
  • size = numero
    Indica el grosor de la línea en pixels.
  • width = num / %
    Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor. También se puede especificar un número que indicaría el ancho de la línea en pixels.

La directiva <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página.

Ejemplos

  • <HR>

  • <HR align=center size=15 width=25%>

Volver al índice de HTML

Cabeceras y atributos del texto

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño.

Ejemplos

  • <H1>Texto</H1>

    • Texto

  • <H2>Texto</H2>

    • Texto

  • <H3>Texto</H3>

    • Texto

  • <H4>Texto</H4>

    • Texto

  • <H5>Texto</H5>
    • Texto
  • <H6>Texto</H6>
    • Texto
    NOTA: Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro sin necesidad de incluir la directiva <BR>

    Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que segun el visor que este vd. utilizando, verá el resultado correctamente o no.

    • Negrita: <B></B> Texto
    • Cursiva: <I></I> Texto
    • Teletype: <TT></TT> Texto
    • Subrayado: <U></U> Texto
    • Tachado: <S></S> Texto
    • Parpadeo: <BLINK></BLINK> Texto (No disponible con Explorer)
    • Superindice: <SUP></SUP> Texto
    • Subindice: <SUB></SUB> Texto

    Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face.

    • size = valor
      Da al texto un tamaño en puntos determinado.
    • size = +/- valor
      Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor.
    • color = "codigo de color"
      Escribe el texto en el color cuyo codigo se especifica.
    • face = "nombre de fuente"
      Escribe el texto en el tipo de letra especificado.

    Ejemplo

    • <FONT size = +2 color = "#FF0000 face = "Arial"> Texto </FONT>
      Texto

    Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto.

    • <STRONG></STRONG> equivale a <B></B>
    • <CITE></CITE> equivale a <I></I>
    • <STRIKE></STRIKE> equivale a <S></S>

    Como dato final, cualquier palabra o frase que vaya comprendida entre la directiva <!-- --> se entenderá como un comentario y el visor no lo tendrá en cuenta, pudiendo de esta manera introducir explicaciones para un mejor entendimiento del código fuente.

    Volver al índice de HTML

    Listas de elementos

    Existen básicamente tres tipos diferentes de listas: numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros :

    • start = num
      Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1.
    • type = tipo
      Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.

    Los tipos posibles son :

    • 1 = Numéricamente. (1,2,3,4,... etc.)
    • a = Letras minúsculas. (a,b,c,d,... etc.)
    • A = Letras mayúsculas. (A,B,C,D,... etc.)
    • i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
    • I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)

    Ejemplos

    <OL>
    <LI>España
    <LI>Francia
    <LI>Italia
    <LI>Portugal
    </OL>
    1. España
    2. Francia
    3. Italia
    4. Portugal
    <OL type = A >
    <LI>España
    <LI>Francia
    <LI>Italia
    <LI>Portugal
    </OL>
    1. España
    2. Francia
    3. Italia
    4. Portugal

    Si por lo contrario se utiliza la directiva <UL></UL> para delimitar la lista, obtendremos una lista sin numerar en que los campos irán precedidos de un punto. El parámetro que puede acompañar esta directiva es type, la cual se puede igualar a tres diferentes valores: disk, circle o square, con lo que el topo o marca puede ser un disco, un círculo o un cuadrado, respectivamente.

    El último tipo de lista es la denominada, listas de definición las cuales muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva <DD>.

    Ejemplos

    <DL>
    <DT>el
    <DD>Artículo masculno
    <DT>la
    <DD>Artículo femenino
    </DL>     		 
    el
    Artículo masculino
    la
    Artículo femenino

    Estos tipos de listas no son restrictivas entre sí, es decir que se pueden indexar unas dentro de otras para así encontrar listas lo más complejas que puedas llegar a imaginar. Aquí cierro el capítulo, retándote a que hagas pruebas tu mismo, para ver la facilidad de obtener listas grandes.

    Volver al índice de HTML

    Imágenes

    Hasta el momento hemos visto como se puede escribir texto en una pagina Web, asi como sus posibles formatos. Ahora vamos a incluir la opción de poder introducir imagenes, los cuales dan una vivez a tu página web final, ya que si sólo optáis por introducir texto la página resultaría infumable. Es bueno recordar que como en todo un exceso es malo, por tanto no abuseís de las imágenes. La directiva a utilizar es <IMG>. Hay dos formatos de imagenes, los cuales los navegadores reconocen, estos son los formatos GIF y JPG. Cualquier otro tipo no será reconocido por vuestro visor, por tanto restringiros a estos dos. Hago un pequeño paréntesis, para hacer una pequeña diferenciación entre los dos formatos. El GIF es un formato de menor calidad (256 colores), y por tanto genera archivos más pequeños, mientras que el formato JPG tiene mayor resolución y por tanto mayor grande es el archivo final, pero por lo contrario tiene la posibilidad de comprimirse, a costa de perder una cierta calidad en el archivo gráfico, obténiendose en casos ficheros de menor capacidad que incluso en el primer formato. Mi recomendación es que utilizes el formato GIF como presentación de una imagen, mientras que el JPG sea un archivo al cual llaméis mediante un hyperenlace, aunque la última decisión es vuestra.

    Continuando con el manual; como iba diciendo la directiva <IMG> puede incluir varios parámetros, siendo el primero de ellos obligatorio, mientras que los restantes opcionales:

    • src = "imagen"
      Indica el nombre del fichero gráfico a mostrar.
    • alt = "Texto"
      Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.
    • align = TOP / MIDDLE / BOTTOM
      Indica como se alineará; el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.
    • border = tamaño
      Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace. height = tamaño
      Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
    • width = tamaño
      Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
    • hspace = margen
      Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.
    • vspace = margen
      Indica el nú;mero de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

    A continuación se muesran diferentes combinaciones de estos parámetros para ver como se aplican:

    Ejemplos

    • <IMG src="maky.gif" alt= "maky" >
      maky
      		Si el visor no pudiese visualizar el gráfico se vería...
      maky
    • La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.
      <IMG src= "http://www.elmaky.com/dibujos/maky.gif">

    • <IMG src="maky.gif" width=100 >
    • <IMG src="maky.gif" height=20 >
    • <IMG src="maky.gif" align=TOP>maky
      maky
    • <IMG src="maky.gif" align=MIDDLE>maky
      maky
    • <IMG src="maky.gif" align=BOTTOM>maky
      maky
    • Hola soy<IMG src="maky.gif" hspace=20>el maky
      Hola soyel maky
    • Hola soy<IMG src="maky.gif" vspace=40>el maky
      Hola soyel maky

    Volver al índice de HTML

    Hyperenlaces

    Una de las gracia de internet, por no decir los más importante es que desde una página se pueda acceder a otras, bien sean de la misma web o de diferentes sitios. Esto se realiza mediante hyperenlaces.

    Para incluir un Hyperenlace se utiliza la directiva <A></A>. Un hyperenclace puede contener dentro texto o una imagen, resultando en cualquier de los dos casos una directiva donde se podrá pulsar con el ratón para poder navegar hacia otro lugar. Si el Hyperenlace esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola, a no ser que nosotros le especifiquemos que no aperezca el recuadro. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hyperenlace si lo pulsamos.

    Ejemplos

    También un hyperenlace sirve para llevarnos a una zona determinada de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Esta opción se realiza mediante el parámetro name.

    Ejemplo

    • <A name = "seccion1"></A>

    Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se llamará; seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :

    Ejemplo

    • <A href = "#seccion1">Primera Parte</A>

    Además podemos utilizar la directiva de Hyperenlace, como un link para enviar un correo electrónico a una dirección de correo determinada.

    Ejemplo

    • <A href = "mailto:dirección e-mail">Envíame tus sugerencias</A>

    También podemos realizar un Hyperenlace a un fichero cualquiera. En este caso el navegador intentará abrir el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador.

    Volver al índice de HTML

    Tablas

    Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imagenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta muy util para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define mediante la directiva <TABLE></TABLE>. Los parámetros opcionales de esta directiva son :

    • border = num.
      Indica el ancho del borde de la tabla en puntos.
    • cellspacing = num
      Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
    • cellpadding = num
      Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
    • width = num o %
      Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
    • height = num o %
      Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
    • bgcolor = codigo de color
      Especifica el color de fondo de toda la Tabla.
    Para definir las celdas que componen la tabla se utilizan las directivas <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas directivas son :

    • align = LEFT / CENTER / RIGHT / JUSTIFY
      Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
    • valign = TOP / MIDDLE / BOTTOM
      Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
    • rowspan = num
      Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
    • colspan = num
      Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
    • width = num o %
      Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parametro solo funciona en los navegadores modernos.
    • bgcolor = codigo de color
      Especifica el color de fondo del elemento de la Tabla.

    Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc...

    Ejemplo

    <TABLE border = 1 cellspacing = 2 cellpadding = 2 width =80%>
    <TH align = center>Deportes
    <TH align = center colspan = 2>Equipos
    <TR>
    <TD align = LEFT>Baloncesto
    <TD align = LEFT>Estudiantes
    <TD align = LEFT>Pamesa
    <TR>
    <TD align = LEFT>Fútbol
    <TD align = LEFT>Deportivo
    <TD align = LEFT>Celta
    </TABLE>
    Deportes Equipos
    Baloncesto Estudiantes Pamesa
    Fútbol Deportivo Celta

    Las directivas <TD> y <TH> son cerradas según el estandar de HTML, es decir que un elemento de tabla <TD> deberia cerrarse con un </TD>, sin embargo los visores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente.

    Las tablas a igual que las listas de elementos, se pueden insertar unas dentro de otras llegando a un nivel de complejidad elevado.

    Volver al índice de HTML

    Frames

    Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas. Para que te hagas una idea este manual se ha realizado mediante frames, ya que puedes ver una ventana a la izquierda donde aparece el índice y una segunda ventana donde muestro el contenido del capítulo seleccionado. Las ventanas en realidad son dos archivos diferentes, lo cual se pueden tratar y manipular de forma separada, permitiendo de esta manera definir diferentes coloresm tamaños, etc.

    Para definir las diferentes subventanas o frames se utilizan las directivas <FRAMESET> </FRAMESET> y <FRAME>. La directiva <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaños se aplican de izquierda a derecha.

    Ejemplos

    • <FRAMESET rows = "25%,50%,25%">
      Crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.
    • <FRAMESET cols = "120,*,100">
      Crea tres subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*).
    • <FRAMESET cols = "15%,*">
      <FRAMESET rows = 20%,*">
      En este caso añadimos dos directivas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto.

    La directiva <FRAME> indica las propiedades de cada subventana. Es necesario indicar una directiva <FRAME> para cada subventana creada. Los parámetros de <FRAME> son :

    • name = "nombre"
      Indica el nombre por el que nos referiremos a esa subventana.
    • src = "URL"
      La ventana mostrará en principio el contenido del documento HTML que se indique.
    • marginwidth = num.
      Indica el margen izquierdo y derecho de la subventana en puntos.
    • marginheight = num
      Indica el margen superior e inferior de la subventana en puntos.
    • scrolling = "yes / no / auto"
      Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en la subventana no la veremos), y "auto" la muestra solo en caso de que sea necesario para poder ver la página.
    • noresize
      Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el visor. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo.
    • border = num.
      Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores solidos.

    Los visores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas directivas. Es por ello que existe una directiva llamada <NOFRAMES> </NOFRAMES>. Todo los indicado entre esta directiva será lo que muestren los visores sin capacidad para visualizar Frames. Los visores que soporten Frames obviaran las directivas incluidas entre <NOFRAMES> </NOFRAMES>.

    Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al visor en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hyperenlace se añade un nuevo parámetro a la directiva <A href= > </A>. Este parámetro se llama target y puede tener los siguientes valores :

    • target = "nombre_ventana"
      Muestra el Hyperenlace en la ventana cuyo nombre se indica.
    • target = "_blank"
      Abre una nueva copia del visor y muestra el Hyperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).
    • target = "_self"
      Se muestra el Hyperenlace en la subventana activa.
    • target = "_parent"
      El Hyperenlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ningún <FRAMESET> anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla.
    • target = "_top"
      Suprime todas las subventanas de la pantalla y muestra el Hyperenlace a pantalla completa.

    La definición de las Frames debe ir antes de la definición del cuerpo de documento (<BODY>). Como ejemplo vea el código HTML de este manual.

    <HTML>
    <HEAD>
    <TITLE>Manuales de programación - HTML</TITLE>
    </HEAD>
    <FRAMESET cols="160,100%" border="0">
    <FRAME src="indice.htm">
    <FRAME src="intro.htm" name="principal">
    <NOFRAMES>
    <BODY bgcolor="#C0C0C0">
    <P align="center"><A href="http://home.netscape.com/">Netscape ommunicator</A></P>
    </BODY>
    </NOFRAMES>
    </FRAMESET>
    </HTML>

    Este ejemplo lo que hace es que divide el visor en dos subventanas, una de 160 pixels y la otra el restante de la pantalla. En la primera subventana muestra el archivo el cual contiene el índice, y la segunda la cual he denominado principal la introducción del manual. En los Hyperenlaces de la subventana del índice son de la siguiente manera:

    • <A href ="html.html" target=principal>

    De esta forma se abren en la subventana de la derecha, manteniendo siempre fijo la subventana del índice. En caso de que el visor no pueda mostrar Frames, el código muestra un enlace a la página de Netscape para poder bajar la última versión de este navegador y así solucionar el problema.

    Hasta aquí ha llegado esta pequeña noción de HTML, esperando que esta información te pueda haber sido útil, te recomiendo que pongas en práctica los conocimientos adquiridos en estas 10 lecciones. Si algún día poseo de más tiempo intentaré profundizar más en este lenguaje. Hasta entonces no olvides visitar las otras secciones de elmaky.com

    Volver al índice de HTML

    Maky, 15/03/2007

    Volver al índice

    Manual de Fortran

    En el presente manual intento describir de una forma sencilla y clara el último standard para el lenguaje FORTRAN: el F-90. Aunque cabe decir que las reglas generales de este lenguaje ya fueron publicadas por allá en los años 60.

    Os estaréis preguntando porque he decidido hacer un manual sobre este lenguaje, el cual puede parecer arcaico en determinados momentos. La razón es que el lenguaje FORTRAN capacita al programador para lograr una buena utilización de los grandes sistemas, particularmente en todos aquellos casos relacionados con el sistema numérico. Aunque este lenguaje permite otras más posibilidades, y el no estrictamente el relacionado con el cálculo, desaconsejo la utilización de este lenguaje para tales fines ya que toda la potencia que pueda mostrar en los cálculos lo pierde en otros aspectos. Para estos casos recomiendo la utilización de lenguajes más intuitivos, como puede ser el Visual Basic.

    Por último diré que los programas realizados en la sección de ingeniería química han sido realizados en su mayoría con este lenguaje.

    Estructura de datos
    Operadores aritméticos
    Sentencias básicas
    Sentencia GO TO
    Sentencias IF y DO

    Volver al Indice de Manuales de programación.

    Información actualizada por última vez el 30-05-2007.

    Estructura de datos

    El lenguaje FORTRAN, como cualquier otro lenguaje de programación, posee unos elementos básicos que se estudiarán a continuación y un conjunto de reglas que, combinando entre si esos elementos de base, van dando lugar a una serie de instrucciones, con las cuales el hombre llega a comunicarse con el ordenador. Antes de explicar como se construye un algoritmo, hay que mencionar los tipos de datos que puede manejar este lenguaje, los cuales vienen a ser bastante generales a cualquier sistema de programación.

    1. Constantes. Este término designa un valor específico y determinado que se define al hacer un programa y que no cambia a lo largo del mismo
    2. Variables. El concepto de variable coincide con el concepto habitual que se tiene de ella; es un nombre simbólico con el que se designa o hace referencia a un dato que puede tomar valores diversos.

    Tanto las constantes como las variables pueden ser de cuatro tipos principalmente:

    • Entera (INTEGER). Una constante entera es una sucesión de dígitos precedidos o no del signo positivo (+) o negativo (-) y sin coma decimal, es decir, el concepto de constante entera en FORTRAN coincide con el concepto habitual de número entero. El límite en la cantidad para datos enteros es de -32768 al 32767 para máquinas con memoria de 16 bits y de -2147433647 al 2147433647 para máquinas las cuales la memoria guarde hasta 32 bits. (Ej: 2435, -569, +15)
    • Reales (REAL). En cualquier caso, una constante real en FORTRAN equivale al valor de un número real habitual, es decir, una cantidad formada por una parte entera y una fraccionaria (punto decimal equivale a coma). Se define como exponente real, el carácter alfabético E seguido por in signo + o - y por una constante formada por dos dígitos como máximo (Ej: E25, 1.23E-3, -5E-02)
    • Lógicas (LOGICAL). Un dato lógico únicamente posee dos valores: cierto (.TRUE.) o falso (.FALSE.) y se guardan en memoria mediante códigos binarios especiales. Obsérvese los puntos que preceden y siguen a estas valores, los cuales son indispensables.
    • Carácteres (CHARACTER). Es un conjunto de caracteres válidos y su longitud es el número total de caracteres que contiene. Se define una constante de este tipo precedidos y seguidos por un apóstrofe ('), cuyo carácter denomina delimitador. (Ej: 'Hola que tal', 'Coste= '). No confundir el apóstrofe con las comillas, ya que son dos cosas totalmente diferentes.
    • Doble precisión (REAL*8). Se denomina exponente doble precisión en FORTRAN, al carácter alfabético D seguido opcionalmente del signo + o - y finalizando por una constante entera (Ej: D01, 14.2D+3, 12D-02). La diferencia entre este tipo de valor con el de real es que para este caso es que el compilador reserva más memoria para la doble precisión, con lo cual el número de dígitos es mayor.
    Los nombres para las constantes y variables se forman utilizando un conjunto de caracteres, los cuales hay que seguir varias reglas:
    • No pueden empezar por un carácter numérico, por ejemplo no se puede llamar una variable 8MAR.
    • Todas aquellas variables cuyo nombre comience con los caracteres alfabéticos I, J, K, L, M o N se dice que queda implícitamente definida como variable entera. Las variables enteras designan zonas de memoria cuyo contenido es una constante o valor entero.
    • Todas aquellas variables cuyo primer carácter alfabético sea una letra distinta de las mencionadas anteriormente, se dice que son variables reales definidas de forma implícita. Una variable real contiene un valor constante real.
    Como esto restringe bastante la programación, ya que por ejemplo no se podría declarar una variable distinta a entera o real, existe una forma de indicar explícitamente las constantes y variables, para ello se indica justo detrás del inicio del programa como se indica en la siguente tabla:

    INTEGER contador Variable entera denominada contador
    REAL numero Variable real denominada numero
    LOGICAL salir Variable lógica denominada salir
    CHARACTER*6 mensaje Variable de 6 caracteres denominada mensaje
    REAL*8 suma Variable doble precisión denominada suma

    Para la declaración de contantes, se realiza mediante la orden PARAMETER, de la siguiente forma:

    PARAMETER (radio=6.5) Constante real de valor 6.5

    Esto es equivalente a indicar lo siguiente:

    REAL, PARAMETER (radio=6.5) Constante real de valor 6.5

    Ya que como empieza por "r" FORTRAN entiende implicitamente que se trata de un valor real. Mi recomendación para evitaros problemas, es que declaréis siempre al principio todas las variables de esta forma, explícitamente, para menor confusión a la hora de que el programa interprete de una forma u otra una variable.

    Otro tipo de datos es el concepto denominado lista. Por ejemplo, la temperatura en 5 ciudades diferentes, puede disponerse convenientemente en secuencia de elementos, cada uno puede ser identificado según el lugar que ocupa. Así el conjunto podría ser de la siguiente forma:

    TEMPERATURA=(32,27,18,24,21)

    Lo mismo podría ocurrir con una matriz de doble entrada donde en cada posición se encontrará la ciudad y en la otra la estación del año. Las listas y tablas son estructuras de datos que vamos a designar con el nombre genérico de conjunto de datos (en inglés: array) y que se declaran mediante la instrucción DIMENSION de la siguiente forma.

    DIMENSION B(3,4) Matriz de datos reales con 3 filas y 4 columnas

    Hasta aquí llega como se declaran los diferentes tipos de datos que hya en el lenguaje FORTRAN y com o se declaran, a continuación pasaré a detallar los conceptos generales para escribir el algoritmo final.

    Volver al índice de Fortran

    Operadores aritméticos

    En matemáticas se dispone de una serie de símbolos que indican determinadas operaciones a efectuar con los datos: Así por ejemplo, el + para la suma, etcétera. De la misma forma, el lenguaje FORTRAN posee también esos signos, los cuales se denominan operadores aritméticos, y son los cinco indicados en el cuadro siguiente:

    Operador Significado
    ** Exponenciación
    / División
    * Multiplicación
    - Resta
    + Suma

    Así, las expresiones algebraicas que siguen a continuación, se escribirán en FORTRAN como se indica:

    Sumar A más B A + B
    Multiplicar A con B A * B
    Dividir A entre B A / B
    A elevado a B A ** B
    A que multipica a la suma de B más C A * (B + C)
    5 veces A al cubo 5 * A ** 3

    Cabe mencionar que cuando se opera con diferentes tipos de valores, es decir un real con un entero o cualquier otra combinación resulta un valor del tipo más dominante, el cual por orden es primero doble precisión, real, y por último entero.

    Ejemplos

  • Multiplicar un entero con un real, se obtiene un real.
  • Sumar un valor de doble precisión con un entero, se obtiene un doble precisión.

    Por último, mencionar otro tipos de operadores como pueden ser el logaritmo y la exponencial E

    Logaritmo de A log(A)
    Exponencial de a (E elevado a A) exp(A)

    Volver al índice de Fortran

    Sentencias básicas

    Antes de empezar con las sentencias de la programación en FORTRAN hay que mencionar un pequeño detalle, el compilador de FORTRAN no lee los 6 primeros caracteres de una línea, con lo cual habrá que dejar en blanco estos, para empezar a escribir a partir de la columna número 7. Anteriormente a la versión de F-90, también había una limitación en la banda derecha, exactamente al carácter número 72, el cual ha sido solventado en esta última versión. Otra mención merece el comentar que solo se puede escribir una sentencia por línea, quedando restringido el utilizar varias de ellas en una misma línea. A continuación vamos con las sentencias básicas del FORTRAN.

    Al escribir un programa FORTRAN, su primera sentencia puede ser PROGRAM, cuya sintaxis es simplemente:

    PROGRAM nombre

    siendo nombre, el nombre o denominación simbólica que quiere darse al programa que comienza a escribirse. No es obligatorio utilizar esta sentencia,; pero si figura en el programa, debe escribirse en primer lugar.

    Para indicar la terminación de la ejecución de un programa FORTRAN es necesario emplear la sentencia STOP, cuya sintaxis o forma general es:

    STOP n

    donde n es una serie de hasta cinco dígitos o bien una constante carácter (Ej: STOP 243, STOP 'final')

    Un programa FORTRAN puede contener varias sentencias STOP o lo que es lo mismo, varios puntos de parada. Por ello aunque el uso de n no es obligatorio, es conveniente para poder saber donde realmente se ha detenido un programa, ya que la constante n puede ser visualizada en una unidad de salida, cuando se produce la parada.

    La última sentencia de un programa tiene que ser:

    END

    Esta sentencia equivale al final de un programa ejecutable e indica al compilador que ya no existen más sentencias en el programa fuente para ser convertidas en programa objeto.

    Para resumir, diríamos que STOP produce una parada lógica y definitiva y sirve para detener un proceso; END sirve para indicar el final de una compilación.

    Por útlimo diré que cualquier línea precedida por el símbolo * o C se entenderá como un comenatrio, y el compilador lo obviará a la hora de codificar el programa. Esto puede resultar útil, ya que puede hacer un prorama más legible para personas que no sea el propio programador. Este símbolo se coloca en la primera columna, espacio destinado para este fin.

    Ejemplo: 
    	PROGRAM suma

*  Este programa efectúa la suma de dos números
	DIMENSION valor(2)
	valor(1)=2
	valor(2)=3
*  Se introduce los valores de los dos números en un vector de dos dimensiones
	sumavalor=valor(1) + valor(2)

	STOP
	END

    La sentencia CONTINUE es ejecutable pero no genera instrucción alguna al ser traducida a código máquina por el compilador. Su uso más corriente es el siguiente: como se mencionará después en las reglas del DO, la sentencia CONTINUE se emplea para colocar como última sentencia en este bucle. Otra aplicación es la de sustituir CONTINUE por una sentencia que anteriormente se hacia referencia. Su sintaxis es muy simple:

    CONTINUE

    Para indicar una parada temporal en la ejecución de un programa FORTRAN se utiliza la sentencia PAUSE, cuya sintaxis o forma general es:

    PAUSE n

    donde n es una serie de cinco dígitos como máximo o bien una constante carácter (Ej: PAUSE, PAUSE 234, PAUSE 'Parada en el programa').

    Volver al índice de Fortran

    Sentencia GO TO

    En los programas preparadas por un ordenador, las instrucciones se ejecutan, mientras no se disponga lo contrario, secuencialmente, es decir, acabada la realización de una de ellas, comienza la ejecución de la siguiente.

    En cambio existen situaciones donde nos interesa repetir una instrucción o ejecutar una instrucción que viene más abajo ignorando de esta manera las sentencias siguientes. Esto saltos se denominan bifurcaciones, y se realizan mediante la instrucción GO TO o GOTO. Esta sentencia puede ser de dos tipos: incondicional o calculada.

    La sintaxis para el GO TO incondicional es la siguiente:

    GO TO n

    siendo n el número o etiqueta de una sentencia ejecutable que parecerá en el mismo programa: es, por consiguiente, una constante entera positiva y distinta de cero de valor n<99999. La constante n representa el número de la siguiente instrucción a realizar, es decir, el lugar preciso donde va a efectuarse la bifurcación. Este número puede escribirse entre las columnas 1 a 5 de la hoja de codificación.

    La sintaxis para el GO TO calculada es la siguiente:

    GO TO (n1, n2, .., nh), i

    siendo i un nombre de una variable. n1, n2, .., nh son números o etiquetas de sentencias que se encuentran en el programa. La coma (,) que precede a la i es opcional. Con esta instrucción existe la posibilidad de bifurcar a diversas sentencias, según sea el valor de la variable i. Si dicha variable toma el valor 1, se bifurcará a la sentencia número n1; si 2 a la n2 y así sucesivamente. Cuando sea i <1 o bien i>h, esta instrucción no tiene ningún efecto y se ejecuta la sentencia siguiente en consecuencia.

    Ejemplo: 
    	PROGRAM descuentos

	...
	...
*  Este programa dependiendo del estado efectúa un descuento o otro
	GO TO (10, 20, 30), estado
*  Estado es una variable que puede optar tres valores: 1, 2 o 3
*  soltero
10	paga=sueldo - 200.0
	GO TO 50
*  casado
20	paga=sueldo - 300.0
		GO TO 50
*  viudo
30	paga=sueldo - 400.0
	GO TO 50

50	STOP
	END

    Volver al índice de Fortran

    Sentencias IF y DO

    Otra sentencia que se emplea para realizar bifurcaciones, según ciertas condiciones, es la sentencia IF. Responde a la sintaxis siguiente.

    IF (e), n1, n2, n3

    siendo e una expresión aritmética entera o real y n1, n2 y n3 son números o etiquetas se sentencias ejecutables, que se encuentran en el mismo programa. El significado de esta instrucción es: si el valor de la expresión e es menor, igual o mayor de cero, el control se transfiere, respectivamente, a la sentencia n1, n2 o n3 respectivamente.

    Ejemplo: 
    	PROGRAM pares

*  Suma de los números pares menores de 102
	I=2
	suma=0
10	suma=suma + I
	I=I+2
	IF (I-100)10,10,20
20	STOP
	END

    Para ejecutar repetidamente una serie de sentencias en bucle, tiene mucha utilidad en el lenguaje FORTRAN el uso de una sentencia especial: la sentencia DO. Su sintaxis es:

    DO n, i = m1, m2, m3

    siendo n una constante entera que indica el número de una sentencia posterior a la DO, que se denomina sentencia terminal del bucle DO. i es una variable entera y m1, m2, m3 son constantes o variables enteras, reales, o de doble precisión e indican un valor inicial, un valor final y un incremento. La variable m3 puede omitirse si su valor es igual a 1. Se pueden introducir tantos DO dentro de otros (DO en nido).

    Reglas sobre el uso del DO

    • El valor de la variable o constante m3 de una sentencia DO no puede ser nunca cero.
    • La ultima sentencia del rango de un DO ha de terminar con la sentencia CONTINUE.
    • No esta permitido bifurcar desde fuera hacia dentro del rango de un DO, si de forma inversa.
    • El valor de la variable del DO, i, es usado automáticamente dentro del rango; pero no está permitido redefinirla.
    • Está permitido todo tipo de bifurcación dentro del propio rango.
    • Tratándose de un nido de DO, debe tenerse en cuenta que todas las instrucciones del más interno deben estar contenidas en el rango del externo.

    Ejemplo: 
    	PROGRAM cuadrados

*  Suma de los cuadrados de los números impares comprendidos entre 1 y 10
	DO 10 I=1, 10, 2
	SUMA=SUMA + I*I
10	CONTINUE
	STOP
	END

    Volver al índice de Fortran

    Maky, 15/03/2007

    Volver al índice


    		•
    © EL MAKY. Versión 8.0 | TARRAGONA 2.000-2.008. RSS - SiteMap - Versiones de la Web - Hazte fan