Você está na página 1de 11

UNIVERSIDAD ESTATAL A DISTANCIA DIRECCIN DE EXTENSIN REA DE TECNOLOGA Y COMUNICACIN

JAVA BSICO
17 - HTML Y JSP

2011
}

Contenido
HTML ...................................................................................................................................................... 3 Estructura de un documento HTML ..................................................................................................... 3 Algunas etiquetas HTML ...................................................................................................................... 4 JSP........................................................................................................................................................... 8 Creacin de un proyecto web en NetBeans.......................................................................................... 9

HTML
Es el acrnimo de HiperText Markup Language. Es un conjunto de etiquetas (llamando etiquetas a palabras reservadas entre smbolos < >) que son traducidas por un navegador de Internet (p.e. IExplorer, Firefox, Chrome) para mostrar en pantalla una pgina web. Las pginas web son entonces, creadas por HTML el cual puede ser escrito en cualquier procesador de texto incluyendo notepad. La nica diferencia es que debemos guardarla con extensin .htm o .html.

Estructura de un documento HTML


Vamos a trabajar mediante un notepad. Algo importante que debemos conocer es que las etiquetas html tienen un inicio y un fin y afectan a lo que se encuentre en medio de ellas. Las etiquetas como vimos tienen esta estructura <etiqueta> pero las de fin no las hemos visto, las mismas tienen de estructura </etiqueta>. Nos quedar ms claro con un ejemplo. Si queremos que la frase Java Bsico se vea en una pgina html en negrita debemos utilizar la etiqueta <b> (por Bold que significa negrita en ingls). De sta manera para colocar la frase y que se vea en negrita debemos ponerla de la siguiente manera: <b>Java Bsico</b> Conociendo esta estructura de inicio y cierre de etiquetas, vamos a conocer la estructura bsca que debe tener un documento html. Los documentos html se dividen en bloques principales, todo deber ir dentro de una etiqueta que se llama HTML y dentro de ellas bloques de la siguiente manera: <HTML> <HEAD> </HEAD> 3

<BODY> </BODY> </HTML>

Dentro del bloque HEAD pueden ir otras etiquetas dentro de las que destaca <TITLE> la cual pone el valor en medio de las etiquetas de inicio y fin como el ttulo de la pgina en el navegador. En el bloque BODY va todo el cuerpo de la pgina, lo que el usuario podr ver en el navegador y puede ir cualquier conjunto de etiquetas que mejoren la visualizacin y plasmen el diseo que deseamos.

Algunas etiquetas HTML


Vamos a ver algunas etiquetas y qu hacen a nivel de lo que se muestra en pantalla. Etiqueta <H1>XXXXXX</H1> <H2>XXXXXX</H2> <H3>XXXXXX</H3> <B> XXXXXX</B> <I>XXXXXX</I> <TABLE></TABLE> <TR></TR> Resultado Pone XXXXXX como encabezado 1 Pone XXXXXX como encabezado 2 Pone XXXXXX como encabezado 3 Pone XXXXXX en negrita Pone XXXXXX en cursiva Genera una tabla vaca. Dentro de las etiquetas <TABLE> y </TABLE> crean una nueva fila en la tabla. <TD> XXXXXX </TD> Dentro de las etiquetas <TR> y </TR> crean una nueva columna en la fila y ponen XXXXXXX en la columna creada. <CENTER></CENTER> Centran todo lo que se encuentra dentro de stas etiquetas. <P> Prrafo o cambio de lnea

Veamos ste cdigo de pgina HTML:

Realicmoslo en algn procesador de texto y lo guardamos como JavaBasico.html. Al abrirlo veremos algo as

Como pueden notar el archivo adquiere un cono similar al de nuestro navegador por defecto. Al abrirlo veremos algo similar a esto:

Otras etiqueta que nos puede ayudar mucho es <Font>. La etiqueta FONT al igual que casi todas las etiquetas tienen propiedades que modifican su comportamiento y van solamente dentro de la etiqueta de apertura. Veamos algunos ejemplos de propiedades en las etiquetas FONT y TABLE.

Etiqueta <TABLE>

Propiedades BORDER

Resultado Especifica el ancho del borde de la tabla, por defecto es 0.

<TABLE> <TABLE>

SUMMARY WIDTH

Resumen descriptivo de la tabla. Anchura en porcentaje o pixeles que tendr la tabla

<TABLE>

BGCOLOR

Color

de

fondo

en

RGB

hexadecimal. <FONT> <FONT> <FONT> SIZE FACE COLOR Tamao de la fuente. Tipo de Fuente Color de la fuente

Con esto al ejecutar el siguiente cdigo

Obtendremos algo como esto:

Observemos en el cdigo que las etiquetas se cierran sin establecer las propiedades.

JSP
Las pginas HTML nos permiten crear documentos que pueden ser mostrados en el navegador no obstante la informacin que muestran es esttica. Esto quiere decir que todo tiene que ser programado en el momento de crear el documento html. Para solventar esta situacin Java ofrece unas etiquetas especiales adems de las HTML que ejecutan cdigo Java del lado del servidor. ste cdigo nos permite entre otras cosas, realizar clculos, conectarnos a bases de datos y ejecutar lgica. Un archivo JSP tiene la extensin .jsp y forma parte de un proyecto Web en NetBeans. Los JSP son archivos que contienen etiquetas HTML y cdigo Java dentro de etiquetas especiales. Existen varios tipos de etiquetas jsp. Algunas son: Etiqueta JSP <%= %> Funcin Traduce el resultado o lo qu <HTML>
<BODY>

Ejemplo

devuelve el ejecutar y lo La hora es <%= new java.util.Date() %> agrega al html. <% %> Conocidos dentro de como estas
</BODY> </HTML>

scriplets, <HTML>
<BODY>

etiquetas <%
java.util.Date date = new java.util.Date();

ponemos cdigo Java puro que

realice algn clculo y operacin. %>


La hora es

Si utilizamos out.println(String) <% lo que hacemos es escribir lo que out.println( "<BR>Su IP es " ); est dentro de los parntesis en el html de la pgina resultante.
</BODY> </HTML> out.println(String.valueOf(date)); out.println(request.getRemoteHost()); %>

Creacin de un proyecto web en NetBeans.

Primero debemos saber si nuestro NetBeans tiene la capacidad de manejar proyectis web, para ello vamos al men Archivo Nuevo Proyecto deberan de tener la siguiente opcin:

Si no la tienen, accedan a http://netbeans.org/downloads/index.html. Vern una pantalla con la siguiente informacin: 9

Descarguen la opcin 2 (Java EE) o la 5 (All) e instlenlo. Continuemos. Al crear un nuevo proyecto seleccionamos entonces Java Web y Aplicacin Web. Hacemos clic en Siguiente y ponemos el nombre de la aplicacin Web. Siguiente. Elegimos el servidor del combo y pulsamos Finalizar. Ya tenemos nuestra aplicacin web. Para hacer los jsp en NetBeans y en nuestra aplicacin recin creada expandimos la aplicacin y sobre la carpeta WebPages hacemos clic derecho y elegimos Nuevo JSP.

Ya tenemos creado nuestro JSP, pongamos cdigo:

10

Ahora solo falta ejecutarlo. Hacemos clic derecho en el jsp creado y elegimos Ejecutar archivo. Ahora se levantar el servidor y se publicar la aplicacin. Luego se abrir el jsp ejecutado.

11

Você também pode gostar