View
0
Download
0
Category
Preview:
Citation preview
Modulo 2. Creación de paginas Web con HTML.
2.1 Estructura de un documento HTML.
Las páginas Web pueden crearse de diferentes maneras y pueden contener una amplia variedad de tipos
de contenido. Una de las maneras es utilizando el lenguaje HTML.
HTML (HyperText Markup Language) es el acrónimo inglés de Lenguaje de marcado de hipertexto. Es un
estándar empleado en todo el mundo para utilizar código incrustado, “etiquetas o tags”, con el fin de
indicar el formato que debe aplicarse al texto. Los documentos escritos en HTML constan del texto mismo
del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:
<tag> texto afectado </tag>
La tag del principio activa la orden y la última (precedida del signo /) la desactiva.
HTML es el lenguaje con el que se construyen las páginas Web. La idea inicial de HTML era describir la
estructura y el contenido de un documento, sin embargo la tendencia actual es utilizarlo también como un
lenguaje de descripción, controlando el aspecto de documento (tipografía, posicionado, etc.).
El programa encargado de interpretar el texto HTML es el navegador o browser.
La estructura de un documento HTML es la siguiente:
<HTML>
<HEAD >
<TITLE>Título del documento </TITLE>
</HEAD >
<BODY>
Cuerpo del documento
</BODY >
</HTML >
Entre <html> y </html> se encuentra la definición de la página propiamente dicha.
En el bloque delimitado por <head> y </head> se establecen ciertas características de la página,
tales como el título, quien las construyó, etc. De estas características de la página, la única que es
obligatoria declarar es el título. Esto se hace mediante el par de tags <title> y </title>.
Por último está <body> y </body>, entre los cuales se encierra toda la información que el
navegador debe mostrar.
Ejemplo 1: Ejemplo que muestra la estructura de un archivo HTML.
<HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Bienvenidos al curso de Desarrollo de Aplicaciones Web. </BODY> </HTML>
El archivo html, se crea como cualquier documento de texto, el cual puede ser creado con el Bloc de
Notas de Windows y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto más potentes
debe guardar sus documentos como "solo texto" ya que HTML ignora todos los espacios en blanco. Una
vez guardado convierta la extensión de texto por la extensión html.
Para visualizar el archivo basta hacer doble clic sobre el y el navegador lo ejecutara. El archivo anterior
será: Ver ejemplo
2.1.1 Atributos o propiedades de las Etiquetas HTML
Algunas etiquetas o tags contienen atributos que las definen. Por ejemplo los atributos de la etiqueta body
pueden ser: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK y ALINK.
La descripción de cada etiqueta se muestra en la siguiente tabla.
Propiedad Descripción
Background Establece una imagen de fondo en la página.
Bgcolor Color de fondo de la página.
Text Establece el color del texto de la página.
Bgsound Sonido que se escuchara al mostrar la página.
Link Color del vínculo.
Vlink Color del vínculo al estar el mouse encima.
Alink Color del vínculo al ser visitado.
Ejemplo 2. Modificación del ejemplo anterior, añadiendo atributos a la etiqueta body.
<HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <body bgcolor=white text=red link=yellow vlink=maroon alink=fuchsia> Bienvenidos al curso de Desarrollo de Aplicaciones Web. </BODY> </HTML>
Ver Ejemplo.
No todos los atributos se tienen que declarar, solo aquellos que se requieran.
2.2 Etiquetas de texto.
Existen etiquetas qué afectan a la distribución y aspecto del texto. Los más importantes agrupados en las
categorías Tamaño, Estilos, Tipo de letra y posición.
Tamaño
<H1>, <H2>, <H3> Son llamados Titulares y sirven para dividir el texto en secciones, con diferente
tamaño cada uno. Se pueden definir seis niveles de titulares. Se definen mediante las tags
<H1>.....</H1> hasta <H6>.....</H6>
Estilos de texto.
La siguiente tabla muestra las principales etiquetas que afecta al aspecto del texto.
Atributo Sintaxis Resultado
Énfasis (cursiva) Quiero <I>destacar </I> esto. Quiero destacar esto.
Fuerte (negrita) Quiero <B>recalcar </B> esto. Quiero recalcar esto.
Subrayado Quiero <S>recalcar </S> esto. Quiero recalcar esto.
Tipo de letra
Para cambiar el tipo de letra o fuente se utiliza la etiqueta Font.
<FONT FACE= "Arial"> Ejemplo </FONT>
El tipo de letra puede ser: "Arial", "Courier", "Comic Sans MS", "Impact", "Lucida Console", "MS Serif",
"Modern", "Monotype Corsiva", "System", "Tahoma", "Times New Roman", entre otras.
Posición
Las diferentes etiquetas que determinan la posición del testo son:
<P> y </P> Párrafos. Este tag, en un principio, señala el inicio de un párrafo y provoca un salto de línea precedido por un renglón en blanco
<BR> Saltos de línea. Este tag sirve para realizar un salto de línea sin renglón en blanco.
<center> y </center> Centran el texto entre los márgenes.
Ejemplo 3. Aplicación de las diferentes etiquetas de texto. Considerando el Ejemplo 2, del tema
anterior.
<HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY bgcolor=white text=red link=yellow vlink=maroon alink=fuchsia> <H1>Bienvenidos al curso de Desarrollo de Aplicaciones Web.</H1> <P>Te encuentras el módulo 2. En este tema aprenderás a:</P> <font face="Courier">Cambiar el tipo de letra</font><br> <b>Establecer estilos como negrita</b><br> <center>Establecer diferentes posiciones</center><br> </BODY> </HTML>
Ver ejemplo 3.
La etiqueta Font tiene diferentes propiedades que permite modificar l contenido de la página.
Otras propiedades de fuente son:
Propiedad Definición
Color Color del texto
Size Permite cambiar el tamaño del texto, valores entre 1 y 7.
Style= "Background-color :color" Color de fondo donde esta el texto
Ejemplo 4: Modificación del ejemplo 3, añadiendo propiedades de la etiqueta Font.
<HTML> <HEAD> <TITLE>Ejemplo 4</TITLE> </HEAD> <BODY bgcolor=white text=red link=yellow vlink=maroon alink=fuchsia> <H1>Bienvenidos al curso de Desarrollo de Aplicaciones Web.</H1> <P><font Style= "Background-color :yellow">Te encuentras el módulo 2. En este tema aprenderás a:</font></P> <font face="Courier">Cambiar el tipo de letra</font><br> <b>Establecer estilos como negrita</b><br> <center>Establecer diferentes posiciones</center><br> <font size= 5 color=greeen>Texto con tamaño 5 color verde </font> </BODY> </HTML>
Ver ejemplo 4.
NOTA:
Se puede utilizar las propiedades FACE, SIZE, COLOR juntas dentro de la misma etiqueta FONT.
2.3 Etiquetas Graficas.
Se puede incorporar imágenes a una página Web, la estructura de la etiqueta es:
<IMG SRC="imagen.gif">
Las propiedades o atributos de la etiqueta img.
SRC (image source, fuente de la imagen). indica que se
quiere cargar una imagen llamada imagen.gif (o el
nombre que tenga). Al programa navegador se le
indica el nombre y la localización de un archivo que
contiene una imagen.
ALT Se introduce una descripción (una palabra o una frase breve)
indicativa de la imagen. Este comando, que en principio se
puede omitir, es en beneficio de los que accedan a la página con
un programa navegador en forma de texto solamente. Ya que no
son capaces de ver la imagen, por lo menos pueden hacerse
una idea sobre ella. Pero no es sólo por esto. Hay casos, en los
que se utiliza una imagen como enlace a otra página. Si se
omitiera este comando, los que utilizan dichos navegadores no
podrían de ninguna manera acceder a esas páginas.
WIDTH y HEIGHT Alto y el ancho de la imagen. Por defecto, HTML toma las
dimensiones reales de la imagen. Pero si se incluye estos
valores la página HTML se presentará mucho más rápido en
pantalla (el texto) mientras se acaban de transmitir las
imágenes.
ALIGN Específica como se va a alinear la imagen con respecto a la
página (horizontalmente) puede ser: center, left o right.
VALIGN Específica como se va a alinear la imagen con respecto a la
página (verticalmente) puede ser: top, bottom o middle.
BORDER Define un borde en píxeles alrededor de la imagen.
Ejemplo:
<IMG SRC="imagen.gif" ALT="descripción">
Con respecto a la localización del archivo de esa imagen, si no se indica nada especial, como en el caso
que se ha expuesto, quiere decir que el archivo imagen.gif está en el mismo directorio que el documento
HTML que se esta escribiendo.
Un buen consejo al diseñar la Web es crear un directorio para las imágenes. De este modo siempre se
debe direccional al directorio de imágenes para que aparezcan las imágenes correctamente en la página
Web.
Los formatos más utilizados son del tipo:
Formato GIF
Apropiado para logotipos y además arte gráfica, para imágenes con colores sólidos y continuos
(especialmente para imágenes con bordes definidos, u texto o un dibujo). Este es el único
soportado por cualquier navegador existente.
Además comprime la información de la imagen sin pérdida de información.
Este formato soporta un máximo de 256 colores.
Un GIF puede ser transparente; la transparencia permite crear imágenes que comparten el
mismo color de fondo de la página, simulando una apariencia no rectangular.
Formato JPEG
Apropiado para imágenes complejas o para fotografías, ya que es bueno para trabajar con
imágenes con múltiples patrones y contrastes.
JPEG comprime y destruye parte de la información de la imagen.
Soporta hasta 16,6 millones de colores.
Un JPEG no puede ser transparente.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande
supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente
riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello.
Además las imágenes incrustadas en páginas Web son en partes responsables de los cuellos de botellas
existentes en la WWW.
Ejemplo:
<IMG SRC="clavijero.gif" ALT="Consorcio Clavijero" width=50 heigth=70 border=5 >
Ejemplo 5. Inserción de Imágenes.
<HTML> <HEAD> <TITLE>Ejemplo 5</TITLE> </HEAD> <BODY> <center><H1>Inserción de imágenes</H1> <br><br>Imagen con tamaño normal<br> <img src=logo.gif> <br><br>Imagen cambiando las dimensiones originales<br> <img src=logo.gif width=300 heigth=400></center> <br> </BODY> </HTML>
2.4 Links.
El link es uno de los elementos más importantes, es posible pasar de un Web a otro, alojados en
servidores remotos, separados por miles de kilómetros.
Para generar un enlace a otro documento se necesita el nombre de un archivo o su dirección URL
(Localizador Universal de Recursos, son las direcciones de las informaciones que buscamos en
Internet) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el
que se visualice en pantalla y que se servirá del primero para saltar de documento.
En general, los enlaces tienen la siguiente estructura:
<A HREF="xxx"> yyy </A>
dónde xxx es el destino del enlace e yyy es el texto indicativo del enlace (con un color especial y
generalmente subrayado).
La URL o dirección pueden ser absolutas o relativas. En el caso de direcciones absolutas se especifica
la dirección completa a la que apunta el enlace. Por ejemplo:
<A HREF= http://www.pcplus.es/pruebas/test/mi_página.html>Enlace</a>
Si el enlace apunta a una página dentro del mismo servidor, se debe utilizar direcciones relativas, es
decir sin hacer referencia a la dirección de Internet. Por ejemplo
<A HREF ="../test2/ejemplo.html">Enlace2</a>
En el ejemplo anterior, las palabras "Enlace2" son un enlace a la página ejemplo.html situada en el
directorio test2, al mismo nivel en el árbol de directorios que la página donde se encuentra el enlace. Para
ascender niveles en una estructura de árbol de directorios se utilizan los dos puntos (exactamente igual
como se hace en MS-DOS o Unix).
Tipos de enlaces
Se puede distinguir cuatro tipos de enlaces:
1. Enlaces dentro de la misma página
2. Enlaces con otra página nuestra
3. Enlaces con una página fuera de nuestro sistema
4. Enlaces con una dirección de email
1. Enlaces dentro de la misma página
En el caso de documentos (o páginas) muy extensos, puede interesar dar un salto desde una posición a
otra determinada.
En este caso, lo que es llamado XXX, es decir, el destino del enlace, es el sitio dentro de la página a
donde se quiere saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que se
desea). Lo que se ha llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en
color (en forma de hipertexto). Su estructura es, entonces:
<A HREF="#marca"> YYY </A>
Y en el sitio exacto a donde se quiere saltar, se debe poner la siguiente etiqueta:
<A NAME="marca"> </A>
2. Enlaces con otra página nuestra
Puede ser que se tenga una sola página. Pero lo más frecuente es que se tenga varias páginas, una
inicial o principal y otras conectadas a ella, e incluso entre ellas mismas.
En este caso, simplemente se sustituye lo que se ha llamado XXX (el destino del enlace) por el nombre
del archivo: <A HREF="pag2.html"> Ejemplo </A>
Si se desea que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, a
donde va por defecto, en ese sitio se tiene que colocar una marca, y completar el enlace con la referencia
a esa marca.
Una observación importante: Suponemos que la página en la que se escribe esta etiqueta y la otra página
a la que quiere saltar están en el mismo directorio. Porque puede ocurrir que se organice el sitio del Web
con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que se quiere saltar está, por
ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/pag2.html".
Y a la inversa, si se quiere saltar desde una página a otra que está en un directorio anterior, en la etiqueta
tendría que ponerse "../pag2.html". Esos dos puntos hacen que se dirija al directorio anterior. Obsérvese
que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro \, que es propio únicamente
de Windows.
Si se quiere evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero esto
tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras
modificaciones.
3. Enlaces con una página fuera del sistema
Si se quiere enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor
distinto al que soporta nuestra página), es necesario conocer su dirección completa o URL. Una vez
conocida la dirección (o URL), se coloca en lugar de lo que se ha llamado anteriormente xxx (el destino
del enlace). Si se quiere enlazar con la página de clavijero, la etiqueta sería:
<A HREF="http://www.clavijero.org/"> Página inicial de Consorcio Clavijeo </A>
Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas,
pues los servidores UNIX sí las distinguen).
4. Enlaces con una dirección de email
En este caso, se sustituye lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la
dirección de email. La estructura de la etiqueta es:
<A HREF="mailto: dirección de email"> Texto del enlace </A>
Un ejemplo
Cualquier duda, escribe a<A HREF="mailto: jmelo@clavijero.org">Profesor Titular </A>
Ejemplo No. 6. Uso de Vínculos.
<HTML> <HEAD> <TITLE>Ejemplo 6</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</H1></A> <A HREF="#abajo">Ir abajo</A><br> <A HREF="ejemplo4.html">Ir a ejemplo 4</A><br><br> <A HREF="http://www.clavijero.org/">Ir a Consorcio Clavijero</A><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> <br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <p>Cualquier duda, escribe a<A HREF="mailto: jmelo@clavijero.org">Profesor Titular </A></p> <A HREF="#arriba">Ir arriba</A> </BODY> </HTML>
2.4.1 Imágenes utilizadas como enlace
Se puede utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente
imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.
La estructura general de un enlace es:
<A HREF="xxx"> yyy </A>
donde xxx era el destino del enlace e yyy el texto del enlace . En este caso se sustituye xxx por el nombre
del archivo de la página a la que se quiere acceder. Y en lugar de yyy ponemos la etiqueta completa de la
imagen
<A HREF="pag2.html"><IMG SRC="hombre.gif"></A>
También se puede utilizar una imagen para enlazar con otra imagen. En este caso se sustituye xxx (el
destino del enlace) con el nombre del archivo de la imagen a la que se quiere acceder e yyy
<A HREF="isla.gif"><IMG SRC="casa.gif"></A>
Por último, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso se
sustituye xxx (el destino del enlace) con el nombre del archivo de la imagen a la que se quiere acceder e
yyy (lo que aparece en pantalla como el enlace) por el texto.
<A HREF="isla.gif"> un paraíso tropical </A>
Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la
página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes
como cualquier otra.
Ejemplo 7. Uso de Imágenes como vínculos.
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Imágenes de enlaces</H1>
<A HREF="Mapas_Conceptuales/modulo2.jpg">Visualizar Mapa Conceptual del Modulo 2</A><br><br>
<br>
<A HREF="http://apps.clavijero.org" ><img src=logo.gif alt=I”niciar Curso de DAW“></A><br>
</BODY>
</HTML>
2.5 Tablas
Las tablas permiten representar y ordenar cualquier elemento de una pagina en diferentes filas y
columnas de modo que se pueda resumir grandes cantidades de información que puede representarse
rápida y fácilmente.
El contenido de una tabla se encierra entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las
columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus
correspondientes tags de cierre, indican para indicar las celdas individuales dentro de cada fila. Las tags
<th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse
en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
Los atributos de las etiquetas del manejo de tablas son:
Propiedades de la etiqueta TABLE
Border Permite establecer o no el borde de toda la tabla. Los
valores pueden ser: 0 – No hay borde, 1 – Borde
simple, 2 – Borde doble.
WIDTH ancho de la tabla
CAPTION Añade un título a la tabla de acuerdo a la alineación
del mismo, indicado por la propiedad ALIGN, que
puede ser BOTTOM, TOP, LEF, RIGTH
TH Formatea las celdas de la primera fila y columna como
cabeceras que salen en negrilla y centradas.
BGCOLOR Establece el color de fondo de toda la tabla.
ALIGN Establece la alineación de la tabla con respecto a la
página (center | left | right)
BORDERCOLOR Establece el color del borde.
BACKGROUND = archivo Imagen de fondo a la tabla
CELLSPACING=numero Espacio entre celdas
CELLPADING = numero Tamaño del renglón
RULES = none | all | rows | cols Líneas que se visualizarán de la tabla.
Propiedades del renglón TR
BGCOLOR Establece el color de fondo del renglón
VALIGN Establece la alineación a lo alto del renglón (top,
bottom, center).
Propiedades de la columna TD
BGCOLOR Establece el color de fondo de la celda
ALIGN Establece la alineación a lo ancho de la columna
(left, center, right).
Ejemplo 8. Uso de Tablas
<HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> </HEAD> <BODY> <H1>Tablas básicas</H1> <TABLE BORDER="1"> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> <TH>Cabecera 3</TH> </TR> <TR> <TD>Dato 1</TD> <TD>Dato 2</TD> <TD>Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 5</TD> <TD>Dato 6</TD> </TR> </TABLE> </BODY> </HTML>
Ejemplo 9. Tablas con titulo <HTML> <HEAD><TITLE>Ejemplo 8</TITLE> </HEAD> <BODY> <TABLE BORDER=2 WIDTH=75%> <CAPTION ALIGN=bottom>Materias del Ciclo IV, V y VI</CAPTION> <TR><TH>Ciclo IV</TH> <TH>Ciclo V</TH> <TH>Ciclo VI</TH> </TR> <TR> <TD>Desarrollo de Aplicaciones en Web</TD> <TD>Redes y Telecomunicaciones I</TD> <TD>Redes y Telecomunicaciones II</TD> </TR> <TR> <TD>Fundamentos de Base de Datos</TD> <TD>Sistemas de Administración de Base de Datos</TD> <TD>Software de Aplicación Administrativa</TD> </TR> <TR> <TD>Plataformas Operativas de Tecnologías de Información</TD> <TD>Administración de Tecnologías de Información</TD> <TD>Servicio Social</TD> </TR> </TABLE> </BODY> </HTML>
2.6 Fames o marcos
Con los frames se puede dividir una página HTML en varias y navegar dentro de cada frame. Por ejemplo
es muy común utilizar un frame para situar en él un menú o iconos de navegación dentro del Web que
permanece siempre en pantalla, mientras que las páginas van apareciendo en el segundo frame.
Se puede dividir las páginas HTML con los frames horizontalote (líneas) o verticalmente (columnas).
También se admiten frames anidados.
Ejemplo de Frames Horizontales.
<HTML>
<FRAMESET COLS="30%,30%,*">
<FRAME SRC=Pagina1.html NAME=uno>
<FRAME SRC=Pagina2.html NAME=dos>
<FRAME SRC=Pagina3.html NAME=tres>
</FRAMESET>
</HTML>
Ejemplo de Fames Verticales.
<HTML>
<FRAMESET ROWS="30%,30%,*">
<FRAME SRC=Pagina1.html NAME=uno>
<FRAME SRC=Pagina2.html NAME=dos>
<FRAME SRC=Pagina3.html NAME=tres>
</FRAMESET>
</HTML>
Ejemplo de Frames Anidados
<HTML>
<FRAMESET ROWS="30%,30%,*">
<FRAME SRC=Pagina1.html NAME=uno>
<FRAMESET COLS="*,*">
<FRAME SRC=Pagina2.html NAME=dos>
<FRAME SRC=Pagina3.html NAME=tres>
==== frame3.gif ====
</FRAMESET>
<FRAME SRC=Pagina4.html NAME=cuatro>
</FRAMESET>
</HTML>
Propiedades de los frames:
ROWS Establece el total de marcos horizontales. Se
pueden definir separados por comas. Los
valores se indican con porcentajes de la
pantalla, indicando un número que representa
total de píxeles. El * en el valor representa lo
que queda de lo ancho de la pagina.
COLS Establece el total de marcos verticales. Se
pueden definir separados por comas. Los
valores se indican igual que rows.
NAME Define el nombre del marco.
SRC Establece el archivo a visualizar.
SCROLLING Indica si aparece la barra de desplazamiento.
Los valores puede ser: yes, no, auto.
NORESIZE Indica que no puede cambiar su tamaño el
frame.
FRAMEBORDER Indica si se desea o no el borde de división entre
un marco y otro. Los valores son: yes, no
BORDER Indica la anchura del borde.
MARGINWIDTH Margen izquierdo del marco.
MARGINHEIHT Margen superior del marco.
Visualización de una pagina en un frame.
Es posible que al hacer referencia de un vínculo, en una pagina que contenga Frames, se desea mostrar
la información en otro frame. Por ejemplo, supongamos las siguientes páginas:
La pagina anterior esta formada de 3 archivos: el que establece los frames (divisiones), el que contiene el
menú y la pagina del lado derecho. El código correspondiente a cada página es el siguiente:
Pagina de Frames Pagina del menú (lado izquierdo) Pagina Inicial (lado derecho)
<HTML>
<FRAMESET COLS="20%,*" frameborder=no >
<FRAME SRC=Menu.html NAME=menu NORESIZE>
<FRAME SRC=Inicial.html NAME=derecha NORESIZE>
</FRAMESET>
</HTML>
<HTML>
<BODY BGCOLOR=RED>
<H2>Opciones</H2>
<H3>
<A HREF=Leer.html TARGET=derecha>Lectura de Datos</A>
<BR><BR>
<A HREF=Fin.html TARGET="_top">Salir</A>
</H3>
</BODY>
</HTML>
<HTML>
<BODY>
<BR><BR><CENTER>
<H1>Desarrollo de Aplicaciones en Web</H1>
</BODY>
</HTML>
A cada uno de los frames, se les establece un nombre (puede ser cualquier nombre, sin espacios).
Cuando se desea que los vínculos se visualicen en otro frame, por ejemplo el frame del lado izquierdo,
llama a un archivo a que se visualice en el frame derecho. Se tiene que añadir en la etiqueta <A
HREF…>, la propiedad TARGET, indicando el nombre del frame.
Existen valores por default que se pueden asignar a la propiedad TARGET, estos hacen referencia a
ventanas independientes y no a los frames definidos. Los valores son:
“_blank” La información debe cargarse en una ventana blanca.
“_self” La información se carga en el mismo marco invocado.
“_parent” La información se visualiza en el marco padre. Se utiliza cuando la página de
marcos es otra página de marcos.
“_top” Se visualiza en ventana completa, cancelando la estructura de marcos.
En el ejemplo anterior la opción Salir se visualizara en ventana completa.
<A HREF=Fin.html TARGET="_top">Salir</A>
2.7 Formularios.
Un formulario HTML con listas de selección, menús desplegables, campos de texto, botones, etc., te
permite introducir cualquier tipo de información para que la comunicación sea bidireccional, dejando de
ser un mero espectador. La información introducida en el formulario es tratada en el servidor por un
programa (PHP por ejemplo) y puede responder con una nueva página presentada en el navegador.
Sin embargo, sin necesidad de utilizar programas PHP se puede recibir información de los visitantes de la
Web vía correo electrónico. Una de las mayores ventajas de la Web es que es interactiva. Los usuarios
de una página no tienen más que escribir al autor de la misma para comentarle cualquier cosa de la
página. Sin embargo, si se desea que solo digan sólo unas cosas concretas (responder a alguna
pregunta, seleccionar entre varias opciones, etc.) se debe utilizar formularios.
Una forma es definida con la etiqueta <FORM> y </FORM>. Ejemplo:
<form>
<input>
<input>
</form>
Como atributos de la etiqueta FORM se encuentran:
a) ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo
(precedida de mailto:, en cuyo caso se debe añadir el parámetro ENCTYPE="text/plain" para que lo que
se reciba resulte legible.
Ej: action="mailto:jmelo@clavijero.org", enviara el contenido de los campos del formulario
directamente en el buzón de correo indicado después de mailto.
También puede llamar a una pagina de un servidor Web vía HTTP, por ejemplo
action="http://panuco_online/registro.php"
b) El parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar
POST. En el caso de que se este mandando el formulario a nuestra dirección de correo electrónico es
obligado usarlo.
Elementos en un formulario.
La etiqueta Input es la más usada en un formulario. El tipo del input especifica con el atributo type.
Ejemplo:
<FORM ACTION="" METHOD=POST> Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32> <BR>¿Cuantos son dos y dos?<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR> <INPUT TYPE="Submit" VALUE="Enviar"> </FORM>
Se verá así:
Nombre:
¿Cuantos son dos y dos?
3
4
5
Enviar
El botón no hace nada porque no se ha definido qué debe hacer.
Los tipos input mas usados comúnmente son:
Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en un formulario. Las dos primeras se
obtienen por medio de la etiqueta <INPUT>:
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
El primero dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero
no se vera lo que se teclee en él. Estos son los atributos para modificarlos:
Parámetro Utilidad
SIZE Tamaño de la caja de texto.
MAXLENGTH Número máximo de caracteres que puede introducir el usuario.
VALUE Texto por defecto que contendrá la caja.
Por otro lado, puede que se necesite que el usuario pueda introducir más de una línea. En ese caso se
utilizará la siguiente etiqueta:
<TEXTAREA><br>Por defecto<br></TEXTAREA>
Lo que se incluya entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite
estos parámetros:
Parámetro Utilidad
ROWS Filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto.
Opciones
Si lo que se desea es que el usuario decida entre varias opciones se puede hacer de dos modos. El
primero es el que se mostró en el ejemplo inicial:
3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR>
5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
3
4
5
Para asociar varios botones de radio a una misma variable se les pone a todos ellos el mismo NAME.
Aparte de esto acepta los siguientes parámetros:
Parámetro Utilidad
VALUE Este es el valor que asignará a la variable.
CHECKED Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
También existen las listas desplegables. Para emplearlas se deberá utilizar dos etiquetas, SELECT y
OPTION:
<SELECT NAME="Navegador">
<OPTION>Netscape
<OPTION>Explorer
<OPTION>Opera
<OPTION>Lynx
<OPTION>Otros
</SELECT>
Los parámetros que admite SELECT son las siguientes:
Parámetro Utilidad
SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de
selección y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción.
y OPTION estos:
Parámetro Utilidad
VALUE Este es el valor que asignará a la variable.
SELECTED Si lo indicamos en una de las opciones esta será la seleccionada por defecto.
Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya
rellenado el usuario:
<INPUT TYPE=SUBMIT Value=Enviar><BR>
<INPUT TYPE=RESET Value=Restablecer>
Enviar
Restablecer
Se puede cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro
VALUE.
Otros elementos
Puede que se necesite que el usuario sencillamente se confirme o niegue algo. Esto se consigue por
medio de controles de confirmación:
<INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero guapo/a Me considero guapo/a
Si se desea que el control esté activado por defecto se le añade el parámetro CHECKED. El formulario
asignará a la variable NAME el valor on u off.
Ejemplo No. 10. Creación de un Formulario.
<HTML>
<BODY>
<font color=red><h2> Captura tus datos por favor... </H1></font>
<form action="mailto:melo_itsp@yahoo.com.mx" method=post ENCTYPE="text/plain">
<font face=Arial size=4>
Nombre: <input type=text name=nom size=40> <br><br>
Ap. Paterno: <input type=text name=ap1> <br><br>
Ap. Materno: <input type=text name=ap2> <br><br>
Sexo: <BR><INPUT NAME="sexo" TYPE=RADIO VALUE="F">Femenino
<INPUT NAME="sexo" TYPE=RADIO VALUE="M">Masculino<BR><BR>
Edad: <SELECT NAME="edad">
<OPTION>20
<OPTION>21
<OPTION>22
<OPTION>23
<OPTION>24
<OPTION>25
<OPTION>26
<OPTION>27
<OPTION>28
<OPTION>29
<OPTION>30
</SELECT>
<BR><BR>
Comentarios Generales: <br>
<TEXTAREA rows=7 cols=40>=== Escribe tus comentarios ==== </TEXTAREA><BR><BR>
<INPUT TYPE=SUBMIT Value=Enviar>
<INPUT TYPE=RESET Value=Restablecer>
</font>
</FORM>
</BODY>
</HTML>
2.8 Otras Etiquetas.
Listas
Hay varias maneras de tratar listas. Las principales son la lista numerada (OL) y de los puntos
conductores (UL) que tiene un par de variantes. También hay una lista pensada para glosarios de
términos (DL).
Una Lista Numerada (Ordered List)
<OL>
<LI>Animales
<LI>Plantas
</OL>
o Propiedades de OL (Lista Ordenada)
TYPE Define el tipo de numeración y puede ser: A | a | I
| i | 1
START Valor con el que iniciará la lista.
o Propiedades de LI
TYPE Define el tipo de numeración del elemento y
puede ser: A | a | I | i | 1
VALUE Valor que tomará el elemento.
Una lista No Numerada (Unordered List)
<UL>
<LI>Animales
<LI>Plantas
</UL>
o Propiedades de UL
TYPE Define el tipo de viñeta y puede ser: disc ● |
circle ○ | square □
Una Lista de Definiciones (Definition List)
<DL>
<DT> Animales
<DD> Son unos bichitos que algunos tienen espinazo y otros no.
<DT> Plantas
Se ve así:
. Animales
. Plantas
Se ve así:
1. Animales
2. Plantas
<DD> Están vivas pero no les puedes llamar bichos. No sería correcto.
</DL>
.
A veces resulta útil anidar las listas para representar un esquema jerárquico. Un ejemplo:
<UL>
<LI>Animales
<UL>
<LI>Vertebrados
<LI>Invertebrados
</UL>
<LI>Plantas
<UL>
<LI>Verdes
<LI>Nucleares
</UL>
</UL>
Líneas divisorias o reglas.
<hr> Crea una línea divisoria horizontal.
Propiedades:
Propiedad Definición
Color = color Color de la línea
Width = tamaño Tamaño de la línea
Align = left | right | center Alineación de la regla en la pantalla
Comentarios
Un comentario es un texto que permite aclarar un código o dar la explicación del mismo. El texto entre
comentarios no se visualiza en el navegador. Para establecer un comentario en HTML se utiliza.
Se ve así:
Animales
o Vertebrados
o Invertebrados
Plantas
o Verdes
o Nucleares
Se ve así:
Animales
Son unos bichitos que tienen espinazo y otros no.
Plantas
Están vivas pero no se les puede llamar bichos. No sería correcto
<!- - Comentario -->
Marquesinas
Una marquesina es un texto que se desplaza a través de la página. Para establecer una marquesina al
texto.
<MARQUEE> Texto </MARQUEE>
Propiedades:
Propiedad Definición
Behavior = scroll | alternate Tipo de movimiento
Direction = down | up | left | right Dirección del movimiento
Otras etiquetas
Para establecer el texto tachado.
<STRIKE> Texto </STRIKE>
Para establecer un subíndice.
<SUB> Texto </SUB>
Para establecer un superíndice.
<SUP> Texto </SUP>
Ejemplo 12. Aplicación de otras etiquetas.
<HTML> <BODY> <!-- Esto es un comentario --> <H1><MARQUEE> Bienvenidos a esta pagina </MARQUEE></H1><BR> <HR> <B> Algunas Formulas son:</B> <BR> Agua: H<SUB>2</SUB>O<BR> Binomio Cuadrado Perfecto: x<SUP>2</SUP> + 2xy + y<SUP>2</SUP> <BR><HR WIDTH=50% ALIGN=LEFT> Este texto este subrayado <STRIKE>Hola </STRIKE> <HR> <B>Ejemplo de Listas</B><BR><BR>
<B>Lista Numerada</B><BR> <OL> <LI>Animales <LI>Plantas </OL> <HR COLOR= RED> <B>Lista no Numerada </B><BR> <UL TYPE=square> <LI>Animales <LI>Plantas </UL> <BR> <HR> <B>Lista de Definiciones</B><BR> <DL> <DT> Animales <DD> Son unos bichitos que algunos tienen espinazo y otros no. <DT> Plantas <DD> Están vivas pero no les puedes llamar bichos. No sería correcto. </DL> </BODY> </HTML>
Recommended