Java para programadores. (5.3): HTML básico para applets

LOS APPLETS NORMALMENTE APARECEN EN PAGINAS en los navegadores Web. Esas paginas se escriben en lenguaje HTML (HyperText Markup Language). Un documento HTML describe el contenido de la pagina. El programa de navegación WEB interpreta el código HTML que le indica como se ha de presentar la pagina. Del código HTML depende en gran manera el aspecto de la página que se presenta en el navegador. El documento HTML contiene todo el texto que ha de aparecer en la página, pero además, este texto esta marcado con comandos que indican la estructura y la apariencia del texto, y determinan que aparecerá en la página además del texto.

Los comandos HTML son llamados tags. Un tag HTML tiene la siguiente forma

<nombre-tag modificadores-opcionales>

Donde nombre-tag es una palabra que especifica el comando y los   modificadores-opcionales , si están presentes, se emplean para facilitar información adicional al comando.( muy semejante a los parámetros de una subrutina). Un modificador tiene la forma:

nombre-modificador = valor

Normalmente, el  valor se encierra entre comillas, y si contiene mas de una palabra o caracteres especiales, es obligatorio el hacerlo así. El HTML no distingue entre mayúsculas y minúsculas, por lo que es indistinto que use mayúsculas y minúsculas.

Un ejemplo sencillo de un tag es <HR>, que dibuja una línea, — también llamada regla horizontal — que atraviesa la pagina. El tag HR tiene varios modificadores posibles   como WIDTH y ALIGN. Por ejemplo, la línea larga justo después del titulo de esta pagina se genera con el comando HTML :

<HR>

mientras que la que viene a continuación, se genera con

<hr width=”50%>


El WIDTH aquí especifica que ha de ser del 50% del espacio disponible. También habríamos podido emplear un numero fijo de pixeles. Los valores para ALIGN pueden ser CENTER, LEFT, o RIGTH. El alineamiento LEFT hace aparecer la línea en el borde izquierdo de la pagina, y el alineamiento RIGTH, la hace aparecer en el derecho. WIDTH y ALIGN son modificadores opcionales.Si no los indica, se emplearan valores por defecto. El valor por defecto para WIDTH es 100%, mientras que para ALIGN es CENTER.

La mayoría de tags requieren una pareja para cerrar el tag, con el formato

</nombre-tag>

Por ejemplo el tag <PRE> debe tener mas adelante en el documento, siempre su pareja de cierre </PRE>. El tag se aplica a todo lo que se encuentre entre el tag de inicio y el tag de fin. El tag PRE le indica al navegador web que displaye todo lo que hay entre <PRE> y </PRE> exactamente como esta formateado en el documento HTML, incluyendo espacios y retornos de carro.(Pero los tags que puedan existir entre <PRE> y </PRE> si son interpretados por el navegador). PRE se utiliza para texto formateado.

Es muy importante que entienda que cuando no utiliza PRE, el ordenador ignora completamente el formato que pueda tener el texto en el código fuente HTML. Solo presta atención a los tags Cinco líneas en blanco en el código fuente, no tienen mas efecto que una línea en blanco o incluso un espacio en blanco.Si quiere espaciado vertical extra en su pagina web, deberá emplear el comando <BR>. para realizar el salto de línea.

De forma similar, necesitará un tag para indicar como se agrupa el texto en párrafos. Esto se realiza con el tag <P> que se debe situar al inicio de cada párrafo. El tag <P> tiene su pareja </P> que debe situarse al final de cada párrafo. (El cierre </P> técnicamente es opcional aunque se considera una buena costumbre el emplearlo).

Entonces, si tags como pueden ser <P> y <HR> tienen un significado especial en HTML, puede que se este preguntando como puedo hacer que estén apareciendo en la página. Para conseguir que determinados caracteres aparezcan en la pagina, debe emplearse un nombre de entidad en el código fuente HTML. Este nombre de entidad para < es &lt;, y el nombre de entidad para > es &gt;. Los nombres de entidad empiezan todos por &, y también & es un carácter especial y como tal tiene su nombre de entidad que es &amp;. También hay nombres de entidad para todos los caracteres no estándares como las vocales acentuadas, por ejemplo la é tienen como nombre de entidad &eacute;.

El resto de esta sección, explica varios tags básicos de HTML. Esto no significa que sea un curso completo de HTML, pero si se da la suficiente información para producir paginas interesantes mientras preparamos el curso de HTML dinámico.


Visión general de la estructura de un documento

Los documentos HTML tienen todos una estructura estándar. Empiezan con <HTML> y terminan con </HTML>. Entre estos tags, hay dos secciones, la cabecera que se identifica con <HEAD> y </HEAD> y el cuerpo que, estoy seguro que lo han adivinado, se identifica con <BODY y </BODY>. Normalmente la cabecera contienen únicamente un ítem que es el titulo del documento. Este titulo, puede ser presentado, por ejemplo en la barra de titulo de la ventana del navegador. El titulo no puede contener tags HTML. El contenido de la página esta realmente dentro del cuerpo, y es lo que el navegador presentara en pantalla. Después de esto, un documento HTML tiene esta forma:

       <HTML>

       <HEAD>
       <TITLE>titulo de la pagina</TITLE>
       </HEAD>

       <BODY>

       contenido de la pagina

       </BODY>

       </HTML>

El navegador no es demasiado exigente sobre la implementacion de esta estructura, probablemente puede no montarla completamente y todo le funcione, pero si piensa en las múltiples plataformas que pueden leer sus paginas y la colección de navegadores que hay, pienso que una buena costumbre pegarse lo mas posible a los estándares.

El tag <BODY> tiene una gran cantidad de modificadores que afectan la apariencia de la pagina cuando se presenta. Por ejemplo, el modificador llamado BGCOLOR que se puede emplear para establecer el color de fondo de la ventana. (Busque mas información si esta interesado)


Cabeceras y estilo de letras

El HTML tiene numerosos tags que afectan al tamaño y al formato de las letras con las que se presenta el texto. Para una cabecera, que es una línea que ha de destacar de por si, el HTML ofrece los tags <H1>, <H2>,…<H6>. Estos tags, se deberán emplear siempre con su pareja de cierre </H1>…</H6>. El <H1> indica que es la cabecera mas importante y genera letras de gran tamaño, mientras que las <H4> hasta <H6> resultan demasiado pequeñas para ser útiles. Puede emplear el tag <BR> en las cabeceras si quiere que sena multilinea. También se pueden emplear enlaces a imágenes, como se describe mas abajo. El tag de cabecera puede tener el modificador ALIGN con los valores LEFT, RIGHT o CENTER. Por ejemplo la cabecera

Un Ejemplo de Cabecera

esta escrita en código fuente HTML como “<H1 align=center>Un Ejemplo de Cabecera</H1>

Hay diferentes tags de estilo que se pueden aplicar al texto. Por ejemplo, se puede obtener texto remarcado encerrando el texto entre <B> y </B>. Puede utilizar <I> para    itálica, <U> para subrayado, y <TT> para maquina de escribir.( Puede ser que algunos navegadores no presenten todos los estilos de forma correcta.). Muchos navegadores soportan <SUB> para texto subíndice y <SUP> para texto elevado.

Tenga en cuenta que HTML describe la estructura lógica del documento, mas que su apariencia exacta, es por esto que hay números tags que sirven para describir la lógica del texto. Por ejemplo, el tag <EM> significa enfatizar el texto encerrado entre <EM> y </EM>, mientras que <STRONG> es para enfatizar fuertemente. Y el tag de estilo <CITE> se emplea para títulos de libros.


Listas

Hay varios tags para generar listas de elementos. Los empleados mas ampliamente son <UL> y <OL>. El tag <OL> se emplea para listas ordenadas en donde los elementos son numerados de forma consecutiva. El número de elemento lo proporciona el navegador. El tag <UL> define listas desordenadas, en donde los elementos se marcan con un mismo símbolo especial. En el código fuente HTML, cada elemento de identifica colocándole un tag <LI> al principio del elemento. El final de la lista viene marcado por el tag de cierre apropiado </OL> o </UL>. Por ejemplo el código fuente siguiente:

       <UL>
       <LI>Isaac Asimov
       <LI>Ursula Leguin
       <LI>Kim Stanley Robinson
       <LI>C. J. Cherryh
       </UL>

genera la lista:

  • Isaac Asimov
  • Ursula Leguin
  • Kim Stanley Robinson
  • C. J. Cherryh


Links (Enlaces)

La característica mas distintiva del HTML es que el documento puede contener enlaces hacia otros documentos. El usuario puede ir siguiendo enlaces de pagina a pagina y en el proceso visitar paginas sobre toda Internet.

El tag que se emplea para crear un enlace es <A>. El texto entre <A> y su pareja </A> aparece en la pagina.El usuario puede seguir el enlace (saltar a otro documento) haciendo,  con el ratón, clic  sobre este texto. El tag <A> emplea el modificador HREF para indicar con que documento está conectado. El valor de HREF debe ser un URL (Uniform Resource Locator). Un URL en un conjunto de instrucciones codificadas que permiten localizar un documento en Internet. Por ejemplo la URL de mi página principal es:

http://members.xoom.com/elcurso

Para realizar un link a esta pagina como Pagina principal de Miguel, he usado el código fuente HTML

<a href=”http://members.xoom.com/elcurso>Pagina principal de Miguel</a>

El mejor sitio para buscar direcciones URLs es en las paginas Web existentes. La mayoría de navegadores pueden presentar el URL de la pagina que esta visualizando, y también el URL del enlace cuando el puntero del ratos esta sobre el link.

Si ha escrito un documento HTML y quiere realizar un enlace a otro documento en el mismo directorio, puede utilizar un URL relativo. Un URL relativo consiste en este caso, seria únicamente el nombre del fichero. Por ejemplo, la pagina que esta viendo proviene de un directorio que también contiene otras secciones del capitulo. Para realizar un enlace a la Sección 5.1 que esta en el fichero seccion5_1.htm, la dirección URL será únicamente seccion5_1.htm y el link completo tendrá esta forma

<A HREF=”seccion5_1″>Sección 5.1</A>

También se pueden emplear direcciones relativas para enlazar ficheros que están en directorios “cercanos”. El empleo de direcciones URL relativas es una buena idea, porque si decide cambiar toda la colección de ficheros no necesitará cambiar los enlaces entre ellos (siempre que no cambie la dirección relativa de los mismos).


Imágenes

Se pueden añadir imágenes a la pagina web con el tag <IMG> (Este tag no tiene pareja de cierre). La imagen realmente debe ser archivada en un fichero separado del documento HTML. El tag <IMG> necesita un modificador llamado SRC que especifica la URL del fichero de imagen. Para la mayoría de navegadores, la imagen debe estar en formato GIF (con nombre de fichero acabado en “.gif”) o en JPEG (con nombre de fichero acabado en “.jpeg” o “.jpg”) En general, la imagen se guarda en el mismo sitio que el documento HTML por lo que solo es necesario especificar el URL relativo del fichero de imagen.

El tag <IMG> también tiene varios modificadores opcionales. Es una buena idea el incluir siempre los modificadores HEIGHT y WIDTH, que especifican el tamaño de la imagen. Algunos navegadores, incluyendo Netscape,  manejan mejor las imágenes si conocen de antemano que tamaño tendrán. Debería emplear el modificador ALT para dar un mensaje a los navegadores que no presentan las imágenes.

El modificador ALIGN puede ser empleado para indicar la colocación de la imagen. “ALIGN=RIGTH” hará que la imagen se presente en el borde derecho de la pagina y el texto, pasara por el lado izquierdo de la imagen. “ALIGN=LEFT” trabaja de forma similar. (Desafortunadamente, “ALIGN=CENTER” no tiene el comportamiento que esta esperando. Los navegadores, tratan las imágenes como si fueran enormes caracteres. Las imágenes pueden estar dentro de párrafos, enlaces y cabeceras por ejemplo. Los valores de alineación CENTER, TOP y BOTTOM se utilizan para expresar como se sitúa la imagen en relación con la línea de texto. Debe ajustarse la línea base del texto, al centro, arriba o abajo de la imagen?. Los valores de alineación RIGHT y LEFT se añadieron al HTML mas tarde, sin embargo son los valores mas útiles.

Por ejemplo, aquí tenemos el código HTML para colocar una imagen llamada figure1.gif en la pagina.fig1.gif (1920 bytes)

      <IMG SRC="figure1.gif" ALIGN=RIGHT HEIGHT=150
                        WIDTH=100 ALT="Figure 1">

La imagen tiene un ancho de 100 pixeles y un alto de 150 pixeles. Aparecerá en el lado derecho de la pagina, y si algún navegador no puede presentar la imagen, presenta el mensaje “Figure 1”.


El tag Applet y los parámetros Applet

El tag <APPLET> se emplea para añadir applets Java a una pagina Web. Este tag, debe tener su pareja </APPLET>. Es obligatorio el modificador llamado CODE para definir el nombre de la clase que contiene el applet compilado. Los modificadores HEIGHT y WIDTH son necesarios para especificar el tamaño del applet. El tag <APPLET> también dispone del parámetro ALIGN que trabaja de forma semejante al de <IMG>. Entonces, el tag applet mínimo para incluir un applet llamado HelloWorldApplet  en una pagina WEB debería ser así:

       <APPLET CODE="HelloWorldApplet.class" HEIGHT=50 WIDTH=150>
       </APPLET>

Este ejemplo asume que el fichero HelloWorldApplet.class esta en el mismo directorio que el documento HTML. Si no fuera este el caso, Debería utilizar otro modificador, CODEBASE, para definir la URL del directorio que contiene el fichero de clases. (El valor de CODE es siempre el nombre del fichero de clase, no el URL).

Los applets pueden necesitar parámetros para personalizar su funcionamiento. Los parámetros de un applet se especifican usando el tag <PARAM>, que solo pueden aparecer entre <APPLET> y el cierre </APPLET>. El tag <PARAM> requiere modificadores llamados NAME y VALUE que tienen la forma

<PARAM NAME="nombre-param" VALUE="valor-param">

El applet puede usar el método predefinido getParameter() para comprobar que parámetros se le han pasado en el tag PARAM. El método getParameter() tiene la siguiente Interface:

String getParameter(String paramName)

El parámetro paramName corresponde al nombre-param en el tag PARAM.Si el nombre especificado en paramName se había incluido en el tag PARAM, el método devuelve el valor asociado en valor-param.Si el parámetro especificado no se entró, entonces el método devuelve el valor null. (Los nombres de parámetros son sensibles a mayúsculas y minúsculas por lo que no puede definir el parámetro “Tamaño” y solicitar “tamaño”)

(Por otra parte, si escribe cualquier cosa además del tag PARAM entre <APPLET> y </APPLET>, los navegadores que soporten Java lo ignoraran, en cambio, todos los navegadores que no soporten Java, ignoraran los tags APPLET y PARAM. Esto significa que si escribe un mensaje como “Su navegador no soporta Java” entre <APPLET> y </APPLET> aparecerá únicamente en aquellos navegadores que no soporten Java.

Aquí tenemos un ejemplo de APPLET con PARAMs:

      <APPLET code="ShowMessage.class" WIDTH=200 HEIGHT=50>
         <PARAM NAME="message" VALUE="Goodby World!">
         <PARAM NAME="font" VALUE="TimesRoman">
         <PARAM NAME="size" VALUE="36">
         <p align=center>Sorry, but your browser<br>
                         doesn't support Java!</p>
      </APPLET>

El applet ShowMessage presumiblemente, leerá los parámetros en el método init() y puede ser algo semejante a esto:

String display; // instance variable: mensaje a displayard

        String fontName; // instance variable: fuente a usar para el display
        public void init() {
            String value;
            value = getParameter("message");
            if (value == null)
               display = "Hello World!";  // valor por defecto
            else
               display = value;  // valor desde el tag PARAM 
            value = getParameter("font");
            if (value == null)
               fontName = "Helvetica"
            else
               fontName = value;
             .
             .
             .

Con relación al parámetro size, deberá trabajar un poco mas, ya que el valor del parámetro es siempre una String y el valor que necesitamos es un int. Esto significa que el valor String debe ser convertido de alguna manera a int. Bueno, no se preocupe, ya hablaremos sobre ello mas adelante.

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Formacion, Java y etiquetada , , , . Guarda el enlace permanente.

Una respuesta a Java para programadores. (5.3): HTML básico para applets

  1. Pingback: Java - Un resumen organizado....o no.Recursos para formacion

Deja un comentario