Modulo 2. Creación de paginas Web con HTML. · 2019-01-21 · Modulo 2. Creación de paginas Web...

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: [email protected]">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: [email protected]">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%,*">




</FRAMESET>

</HTML>

Ejemplo de Frames Anidados

<HTML>

<FRAMESET ROWS="30%,30%,*">


<FRAMESET COLS="*,*">



==== 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:[email protected]", 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:[email protected]" 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:


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:


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>  <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>

Modulo 2. Creación de paginas Web con HTML. · 2019-01-21 · Modulo 2. Creación de paginas Web...

Documents

Transcript of Modulo 2. Creación de paginas Web con HTML. · 2019-01-21 · Modulo 2. Creación de paginas Web...