Capacitación de Herramientas para

el Desarrollo WEB

Modulo IV- HTML,Historia y Elementos del Lenguaje Parte II

Sesión #2

María Paz Coloma M.

mcoloma@inacap.cl
 Tablas y sus propiedades
Utilidad de las tablas en la Web
• Las tablas son utilizadas para ordenar la
información presentada en forma de estructura
de filas y columnas.
• Son estándares.
• Es conveniente que el documento tenga una
gran tabla que englobe todos los elementos
que lo conformen.
• El uso excesivo de tablas puede dificultar la
velocidad de carga de la página sobretodo en
Netscape.
 Tablas y sus Atributos

• Se utiliza el tag <table> para definir el

comienzo de una tabla y </table> para definir
el final de una tabla.
• Se utiliza el tag <tr> para definir el comienzo
de una nueva fila en la tabla y </tr> para
definir el final de una fila.
• Se utiliza el tag <td> para definir el comienzo
de una nueva columna en la tabla y </td>
para definir el final de una columna.
 Tablas y sus Atributos

• De los atributos de la tabla tenemos:

– Border: determina el tamaño de la línea del contorno de la
tabla.
– Width: puede estar expresado en pixeles o porcentaje.
– Height: puede estar expresado en pixeles o porcentaje.
– Align: determina la alineación de la tabla. Center, left, right.
– Cellspacing:determina la cantidad de espacios en blanco
localizado en cada celda subyacente.
– Cellpading: determina la cantidad de espacios en blanco
entre los contenidos de las celdas.
 Tablas y sus Atributos

• De los atributos del tag tr tenemos:

– Align: determina la alineación de una fila. Los
valores permitidos son center, right, left.
– Bgcolor: color de la fila.
– Width: puede estar expresado en pixeles o
porcentaje.
– Height: puede estar expresado en pixeles o
porcentaje.
– Valign: determina la alineación vertical de texto en
la fila.
 Tablas y sus Atributos

• De los atributos del tag td tenemos:

– Align: determina la alineación de una columna. Los
valores permitidos son center, right, left.
– Bgcolor: color de la columna.
– Width: puede estar expresado en pixeles o
porcentaje.
– Height: puede estar expresado en pixeles o
porcentaje.
– Colspan:determina el número de columnas a
combinar.
 Ejemplo de utilización de tablas

• 1. Vaya a Notepad.
• 2. Abra el archivo ejemplo.htm
• 3. Guarde el archivo como tablas.htm
• 4. Cambie el tag <title> por Uso de tablas.
• 5. Cambie el Meta Tag description por “Utilización de tablas en
un documento.
• 6. Cambie el Meta Tag Keywords por Tablas.
• 7. Guarde los cambios.
• 8. Dentro de la sección Body escriba el tag de inicio de tabla
con borde 0, height igual a 200 y width en 740.
 Ejemplo de utilización de tablas

• 9. La primera fíla contendrá el título de la tabla. En vista de que cada

fila tendrá dos columnas, la propiedad colspan de esta columna
deberá ser 2, alineación centrada, estilo itálico y formato h2. Escriba
Biografía de “Nombre”. Guarde los cambios.
• 10. Agregue una nueva fila, con dos columnas:
– La primera columa deberá tener alineación izquierda, width igual a 200 y
height igual a 25, y deberá decir Nombres:
– La segunda columna deberá tener alineación a la derecha, width igual a
540 y height igual a 25 y deberá decir sus Nombres.
• 11. Agregue una nueva fila, con dos columnas:
– La primera columa deberá tener alineación izquierda, width igual a 200 y
height igual a 25, y deberá decir Apellidos:
– La segunda columna deberá tener alineación a la derecha, width igual a
540 y height igual a 25 y deberá decir sus Apellidos.
• 12. Guarde los cambios.
 Ejemplo de utilización de tablas

• 13. Agregue una nueva fila, con dos columnas:

– La primera columa deberá tener alineación izquierda, width igual a
200 y height igual a 25, y deberá decir Fecha de Nacimiento:
– La segunda columna deberá tener alineación a la derecha, width
igual a 540 y height igual a 25 y deberá decir su Fecha de
nacimiento.
• 14. Agregue una nueva fila, con dos columnas:
– La primera columa deberá tener alineación izquierda, width igual a
200 y height igual a 25, y deberá decir Lugar:
– La segunda columna deberá tener alineación a la derecha, width
igual a 540 y height igual a 25 y deberá decir su lugar de
nacimiento.
• 12. Guarde los cambios y Visualice en el browser.
 Capas y sus atributos

• Una capa es un elemento html que se puede colocar

en cualquier parte de un documento.
• Las capas pueden contener texto, imágenes y otros
contenidos que se situan en la sección body.
• Es una agrupación de elementos.
• La diferencia de una tabla pasa por su compatibilidad
y por su libertad de ubicación.
• Tenemos en el tag <div> para definir capas o sino el
tag <layer> de Netscape.
 Capas y sus atributos

• Tag <DIV>..</DIV>
– Todo lo que vaya dentro del tag DIV corresponde
a una capa. Div es el estándar.
– Los atributos de DIV son:
• ID: identificador que permite acceder al documento a
través de Javascript.
• Class: indica el formato a aplicar si es que se cuenta con
CSS(Hojas de estilos)
• Style: personalización de formato de la capa.
 Capas y sus atributos

• Tag <Layer>..</Layer>
– Todo lo que vaya dentro del tag Layer corresponde a una
capa. Layer es propio de Netscape por lo que no es
compatible con todos los browser.
– Los atributos de Layer son:
• ID: identificador que permite acceder al documento a través de
Javascript.
• Left,top,: parámetro de posición(número entero)
• Width,Height: tamaño de la capa.
• Visibility: determina visibilidad de una capa.
• Bgcolor: color de fondo.
 Capas y sus atributos

• Tag <ILayer>..</ILayer>
– Todo lo que vaya dentro del tag ILayer corresponde a una
capa. ILayer es propio de Netscape por lo que no es
compatible con todos los browser.
– Permite realizar capas flotantes en posición absolutas.
– Los atributos de ILayer son:
• ID: identificador que permite acceder al documento a través de
Javascript.
• Left,top,: parámetro de posición(número entero)
• Width,Height: tamaño de la capa.
 Ejemplo de utlización de Capas

• 1. Vaya a Notepad.
• 2. Abra el archivo ejemplo.htm
• 3. Guarde el archivo como capas.htm
• 4. Cambie el tag <title> por Uso de Capas.
• 5. Cambie el Meta Tag description por “Uso de capas
en un documento”
• 6. Cambie el Meta Tag Keywords por Capas, Html.
• 7. Guarde los cambios.
 Ejemplo de utlización de Capas

• 8. Escriba dentro de la sección body, una capa con

div , con el atributo id=“Capa1”.
• 9. Dentro de Div, escriba en estilo h2, Uso de Capas.
• 10. Agregue el siguiente código a el tag DIV:
– onMouseover="capa1.style.color='red'“
– onMouseout="capa1.style.color='black'"
• 11. Lo anterior hace que la capa cambie de color
ante los eventos del mouse.
• 12. Guarde los cambios y visualice en el browser.
 Marcos y sus propiedades

• ¿Qué son los frames?

– Representa una página web.
– Permite presentar varios documentos en una
misma ventana.
– Cada frame es independiente uno del otro.
 Marcos y sus propiedades

• ¿Cuándo utilizar un Frame?

– Cuando necesite separar el documento por zonas

de información fija y variables.
– Cuando desee mantener la imagen de un sitio que
se visite.
– Cuando el diseño lo justifique.
 Marcos y sus propiedades

• Desventajas de los Frames

– Se pierde espacio de presentanción en la pantalla.

Cada frame tiene su dimensiones definidas, ya
sea en pixeles o porcentaje.
– La promoción de la página se pierde, ya que los
MetaTags son por página principal y no por frame.
– No es accesible desde todos los browser.
– Los bookmarks no funcionan correctamente.
 Marcos y sus propiedades

• Tag Frameset:
– Lo contiene la página principal.
– Definen la cantidad de frames dispuestos uno sobre
otro(rows)
– Definen la cantidad de frames dispuestos uno al lado del
otro(cols)
– El alto y ancho de cada Frame se definen en el FrameSet.
– Parte con el tag <frameset> y finaliza con </frameset>
Ejemplo de sitio que usa Frame
<FRAMESET cols="20%,80%">
<FRAMESET rows="30%,70%">
<FRAME src="overview-frame.html"
name="packageListFrame">
<FRAME src="allclasses-frame.html"
name="packageFrame">
</FRAMESET>
<FRAME src="overview-summary.html"
name="classFrame">
</FRAMESET>
 Marcos y sus propiedades

• Atributos Tag Frameset:

– Cols: puede ser expresado como pixeles o porcentajes.
• Ejemplo:
– <Frameset cols=“20%,80%”> porcentaje.
– <Frameset cols=“20%,*”>
– <Frameset cols=“30,*> expresado en pixeles.
– Rows: puede ser expresado como pixeles o porcentajes.
• Ejemplo:
– <Frameset rows=“20%,80%”> porcentaje.
– <Frameset rows=“20%,*”>
– <Frameset rows=“30,*> expresado en pixeles.
 Ejemplo de utilización de FrameSet

• 1. Vaya a Notepad.
• 2. Abra el archivo ejemplo.htm.
• 3. Guarde como portada.htm.
• 4. Cambie el tag <title> por “Uso de Frames”.
• 5. Cambie el Meta Tag Descripcion por “Utilización
de Frames en un documento”.
• 6. Cambie el Meta Tag Keywords por “Frameset,
Frame”.
• 7. Guarde los cambios.
 Ejemplo de utilización de FrameSet

• 8. Se aplicará el siguiente diseño:

• 9. Elimine la sección body y escriba:
– <frameset rows=“100,440”>
• Los frames estarán uno debajo de otro con 100 pixeles de ancho uno y
440 pixeles el otro. 9. Escriba en la sección Body lo siguiente:
– Dentro del tag Frameset escriba:
• <frame name=“superior” src=“barra.html”>(ruta)
• <frame name=“despliegue” src=“home.html”>(ruta)
• Este documento esta compuesto por dos HTML.
– Cierre el tag Frameset y Guarde los cambios.
– Los cambios se verán cuando realicemos los frames
constituyentes.
 Marcos y sus propiedades

• Tag Frame:
– Src: determina la ruta del archivo origen que se va a
desplegar.
– Name: Nombre con el cual se podrá hacer referencia al
Frame.
– Scrolling: determina si se presentarán barras de scroll o no.
Por usabilidad no es recomendable.
– Ejemplo:
• <frame name=“despliegue” src=“home.html”>(ruta)
 Ejemplo de Utilización de Frames

• 1. Vaya a Notepad.
• 2. Abra ejemplo.htm
• 3. Guarde el archivo como barra.htm
• 4. Elimine los Meta Tags de la sección Head.
• 5. Cambie el tag <title> por Barra de Navegación.
• 6. En la sección Body escriba una tabla con borde igual a 2,
width igual a 740 y height igual a 100. Debe tener una fila y una
columna. En esta última la alineación debe ser centrada, con
width a 740 , estilo h3 y debe mostrar “Barra de Navegación”.
• 7.Guarde los cambios y cierre el archivo. Abra el archivo
portada.htm desde el browser.
 Ejemplo de Utilización de Frames

• 8. Vaya a Notepad.
• 9. Abra barra.htm
• 10. Guarde el archivo como home.htm
• 11. Cambie el tag <title> por Página Home.
• 12. En la sección Body escriba una tabla con borde igual a 1,
width igual a 740 y height igual a 440. Debe tener una fila y una
columna. En esta última la alineación debe ser centrada, con
width a 740 , estilo h3 y debe mostrar “Pagina Home”.
• 13.Guarde los cambios y cierre el archivo. Abra el archivo
portada.htm desde el browser.
 Formularios

• ¿Qué es un Formulario?
• Sección de un documento con elementos especiales
denominados controles. Esta sección puede ser enviados a un
agente para ser procesados.
• Nace con el concepto de dar interacción al usuario con la
página. Ejemplo, formulario de contacto.
• En un formulario se pueden considerar elementos como:
• TextField
• TextArea
• Select
• Button( tipo button, submit, reset)
• Radio.(Option y Check)
– En algunos navegadores los elementos mencionados
anteriormente solo son visibles si son parte de una formulario.
 Tag Form y Atributos

• Tag Form
– El comienzo de un formulario esta dado por <form> y el fin
del formulario por </form>
• Atributos del Tag Form
– Name: nombre con el cual podrá ser accesido un formulario
a través de código dinámico y javascript.
– Action: define la URL del archivo encargado de procesar el
requerimiento de envió del formulario.
– Method: métodos de envió del formulario. Get o Post.
– Target: en caso de que se este trabajando con frame se
especifica el nombre de este.
 Métodos de envío de un Formulario

• Son dos métodos de envío soportados por HTTP.

• Método POST:
– Es el más utilizado.
– Es más seguro.
– Los datos viajan ocultos una vez que se localiza la URL del
action del formulario.
• Método GET:
– Es el más utilizado por buscadores.
– Los datos se agregan a la URL del action del formulario y
son visible.
– Esta limitado en tamaño
 Submit de un Formulario

• Para que el formulario sea enviado hacia el servidor

o bien ejecute el action, debe ser enviado.
• El formulario tiene un método de envío que se llama
submit. Este puede ser gatillado a través de un tipo
de botón submit o bien a través de Javascript.
 Elementos de un Formulario
– TextField
• <INPUT type=“text" name="" value="">
– TextField Oculta
• <INPUT type=“hidden" name="" value="">
– TextField Password
• <INPUT type=“password" name="" value="">
– Buttón
• <INPUT type=“button" name="" value="">
– Buttón Submit
• <INPUT type=“submit" name="" value="">
– Buttón Reset(Limpia el formulario)
• <INPUT type=“reset" name="" value="“>
 Elementos de un Formulario
– TextArea(Areas de Texto)
• <textarea name=“” cols=“” rows=“”>
</textarea>
– Select(combobox)
• <select name>
<option value=“”>....</option>
</select>
 Ejemplo de Utilización de un Formulario

• 1. Vaya Notepad.
• 2. Abra el archivo ejemplo.htm
• 3. Guarde como contactenos.htm
• 4. Cambie el tag <title> por “Formulario de Contacto”
• 5. Cambie el Meta Tag Description por “Uso de
formulario dentro de un documento”
• 6. Cambie el Meta Tag KeyWords por “Form, Get,
Post”
• 7. Guarde los cambios.
 Ejemplo de Utilización de un Formulario

• 8. Agregue un título con formato h2, centrado, y escriba

“Formulario de Contacto” y dos quiebres de línea.
• 9. Vaya a la sección body y cree una tabla con 3 filas y cada fila
con 2 columnas. La tabla debe tener borde igual a 0, height igual a
400, y width igual a 740.
• 10.La primera columna de cada fila tendrá la siguiente
configuración: Width igual a 200, alineación a la derecha, y con
formato strong.
• 11.La segunda columna de cada fila tendrá la siguiente
configuración: Width igual a 540, alineación a la izquierda.
• 12.Guarde los cambios.
• 13. La tabla debe estar dentro de un formulario, en donde su
nombre será frm_contactenos, action=http://www.aldea.cl método
de envío Post.
 Ejemplo de Utilización de un Formulario

• 14. Posiciónese en la primera columna de la primera fila y escriba

Nombre:
• 15. Posiciónese en la segunda columna de primera fila y cree un
caja de texto que se llame txt_nombre.
• 16. Posiciónese en la primera columna de la segunda fila y escriba
email:
• 17. Posiciónese en la segunda columna de segunda fila y cree un
caja de texto que se llame txt_email.
• 18. Posiciónese en la primera columna de tercera fila y cree un
botón del tipo submit que se llame “cmd_envio” y como etiqueta
“Envio”.
• 19. Posiciónese en la segunda columna de tercera fila y cree un
botón del tipo reset que se llame “cmd_limpiar” y como etiqueta
“Limpiar”.
 Ejemplo de Utilización de un Formulario

• 20.Guarde los cambios. Visualice en el browser.

 Paleta de Colores

• Recuerde que no todos los navegadores despliegan

el color de la misma forma.
• La paleta de colores seguro consta de 216
colores(Desarrollado por Netscape) ya que los 40
restantes sufren variaciones entre Mac y PC.
• Esta compuesta por combinaciones de valores de
RGB(Red, Green. Blue).
 Mapa de Imágenes

• Son creadas como imágenes del lado de cliente que

presentan una o varias regiones sensibles a la acción
del usuario.
• Un mapa depende de una imagen.
• Su uso es variado, y es muy común verlas en las
barras de navegación.
• Ejemplo: http://www.educarchile.cl
 Tag Map y Atributos

• Se usa el Tag Map para crear el mapa sobre la

imagen. Comienza con el tag <map> y finaliza con el
tag </map>
• Para que una imagen use un map se agrega el
atributo a la imagen usemap.
• Ejemplo:
– <img src="EncabezadoGif.gif" width="740" height="120"
border="0" usemap="#Map">
• Definido lo anterior, se procede a definir el tag Map.
 Tag Map y Atributos

• Atributos de Map
– Name: nombre que identifica al mapa dentro del documento.
• Tag Area
– Dentro del Tag Map aparece este tag que establece las zonas de la
imagen. Dentro de sus atributos tenemos:
• Shape: forma de la zona.
• Coords: coordendas de la zona en la imagen.
• Href: Link de la zona.
• Ejemplo:
<map name="Map">
<area shape="rect" coords="105,99,177,119" href="index.htm"
target="_parent" alt="lleva a la p&aacute;gina home">
</map>
 Links

• Tutoriales Varios
- http://www.desarrolloweb.com/articulos/936.php?manual=5

• Ejemplos:
- http://www.planetsourcecode.com