Está en la página 1de 98

HERRAMIENTAS BSICAS PARA PROGRAMAR EN LA WEB

PROYECTO PACENI - COMPONENTE B


Actualizacin y perfeccionamiento de la planta docente Actividad B.1 Docente Responsable: Ing. Ana Nieves Rodrguez

Ing. Ana Nieves Rodrguez Ing. Juan Manuel Conti PU. Pablo Rodrguez Rey PU. Jess Monteros PU. Sergio Guardia

HERRAMIENTAS BASICAS PARA PROGRAMAR EN LA WEB by PACENI - UNT is licensed under a Creative Commons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 Argentina License. Based on a work at unt-argentina.academia.edu

Proyecto PACENI
El Ministerio de Educacin, a travs de la Secretara de Polticas Universitarias, en convenio con la Federacin de Docentes de las Universidades (FEDUM) lanz el Proyecto de Apoyo para el Mejoramiento de la Enseanza en Primer Ao de Carreras de Grado de Ciencias Exactas y Naturales, Ciencias Econmicas e Informtica" (PACENI). El proyecto se dirige a fortalecer las condiciones institucionales, curriculares y pedaggicas para el mejoramiento de la insercin y la promocin de los estudiantes ingresantes. Los Objetivos de este emprendimiento son: Fomentar la puesta en marcha o consolidacin de Sistemas de Tutoras que per-mitan ayudar al ingresante a incorporarse plenamente a la vida acadmica univer-sitaria. Disminuir los ndices de abandono de los estudios universitarios en el primer ao de la carrera. Mejorar las condiciones de enseanza y de aprendizaje en el primer ao de forma-cin universitaria.

COMPONENTE B Actualizacin y perfeccionamiento de la planta docente


Actividad B.1: Taller Herramientas bsicas para programar en la Web. Responsable: Ing. Ana Rodrguez Dictado a travs del: DEPARTAMENTO DE CIENCIAS DE LA COMPUTACION FACULTAD DE CENCIAS EXACTAS Y TECNOLOGA UNIVERSIDAD NACIONAL DE TUCUMN Docentes a cargo: Ing. Ana Nieves Rodrguez Ing. Juan Manuel Conti PU. Jess Monteros PU. Pablo Rodrguez Rey PU. Sergio Guardia Contenidos: MODULO I : LENGUAJE HTML MODULO II : TABLAS Y FRAMES MODULO III : CSS MODULO IV : JAVASCRIPT

Introduccin
El uso de Internet como fuente de informacin pas a ser un complemento indispensable en el proceso de Enseanza Aprendizaje. En carreras con base en las nuevas tecnologas, los cambios suceden en forma vertiginosa y el docente debe estar preparado. En esta nueva era a la que se le dio el nombre de era del conocimiento, el sector ms afectado es el educativo porque influye en la formacin del capital intelectual. El modelo educativo debe reunir a la comunidad acadmica, en espacios fsicos o virtuales usando las TICs como un complemento socializador, en este escenario, Internet, pasa a ser una herramienta que se amolda a este nuevo modelo educativo.

similar a la de un procesador de textos, en este caso es el programa el encargado de generar el cdigo de marcas HTML. La Ilustracin 1 muestra un mapa conceptual de lo que sera la idea fundamental de este documento.

MODULO I LENGUAJE HTML


HTML es un lenguaje de marcas, descriptivo, que sirve para crear pginas web. Una pgina Web se puede programar ya sea con un editor de textos comn como el bloc de notas o con editores del tipo WYSIWYG (What You See Is What You Get que traducido significa: lo que ves es lo que obtienes). Estos editores, permiten escribir un documento viendo directamente el resultado final, en otros procesadores tales como el bloc de notas, se escribe sobre una vista que no muestra el formato del texto, hasta que se ejecuta con el browser. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la pgina sobre una vista preliminar
Ilustracin 1: lenguaje HTML

Una pgina Web puede contener textos simples, textos con formato, grficos, enlaces a otras pginas, enlaces a correo electrnico, lo que se muestra en el siguiente mapa conceptual.

Taller de Herramientas bsicas para programar en la Web

Pgina 3

Ilustracin 3: cmo se genera el cdigo HTML

Ilustracin 2: contenido de una pgina web

Como se dijo anteriormente, el cdigo HTML se puede generar haciendo uso de un editor de textos comn tal como bloc de notas o con un editor WYSIWYG, como Dreamweaver, Frontpage, FCKeditor, entre otros.

Primer paso en la generacin de cdigos HTML Como se mencion anteriormente el HTML es un lenguaje de marcas, que para ser detectadas por el navegador son encerradas entre los signos: <.>, estos signos se usan tanto para abrir un bloque de un determinado tag, como para cerrarlo, con la nica diferencia que el cierre lleva una barra invertida: </.>, todo tag que se inicia se debe cerrar para mantener un orden en la codificacin y sobre todo prolijidad.

Taller de Herramientas bsicas para programar en la Web

Pgina 4

Si se desea crear una lnea de separacin se usa el tag <hr>, cuyos parmetros son width=ancho de lnea, align=alineacin (left, center, right), color= color de lnea. Ejemplo: <hr width=800 align=left color=black> Para guarder una pgina web de manera que el navegador la reconozca, debe darle como extensin: html, en el bloc de notas Guardar como nombre.html.

Ilustracin 4: mecnica

Estructura de una pgina Web Toda pgina web comienza con el tag <html>, se puede ingresar en mayscula o minscula, el cierre de la pgina se establece mediante el tag: </html>. Luego se establece el encabezado con el tag <head>, dentro del cual se incorpora el tag <title>Titulo de la pgina</title>, se pueden incorporar Metatags que son meramente informativos, una vez realizada esta tarea, se cierra el tag head: </head>. Ahora es el momento de trabajar con el cuerpo de la pgina mediante el tag <body>que contiene la informacin que se mostrar, y se cierra con </body>. Los comentarios se utilizan como ayuda al programador y se encierran de la siguiente manera: <!--Comentario-->. Taller de Herramientas bsicas para programar en la Web

Ilustracin 5: Estructura de una pgina web

Pgina 5

Comenzando con los tags bsicos.

NOTA2: Los espacios en blanco, con que se inicia cada lnea del recuadro anterior, no son tenidos en cuenta por el Navegador y en cambio confiere claridad a la codificacin. Vista en el navegador

Se colocan al final de cada lnea de texto, donde deseemos incluir un line feed + carriadge return (o sea: una alimentacin de lnea + un retorno de carro).

Introduce 2 saltos de lnea. Ejemplo:


<html> <head> <title> MI PRIMERA PAGINA </title> <body> <!-- creamos dos lineas en blanco --> <br><br> ESTA ES MI PRIMERA PAGINA QUE SOLO CONSTA <br> DE UN TITULO Y UNA POCAS LINEAS DE TEXTO<br> PARA MOSTRAR COMO CONTENIDO. <br> </body> </html>

Ilustracin 6 MI PRIMERA PAGINA, vista en el navegador

Definicin de colores
Los colores se obtienen como una combinacin de los colores primarios Red / Green / Blue en distintas proporciones. Cada uno de estos canales vara normalmente entre 0 y 255, pero expresados en hexadecimal. As por ejemplo el rojo puro sera #FF0000, el verde puro #00FF00 y el azul #0000FF. El negro estara dado por #000000 y el blanco por #ffffff. Cualquier otra combinacin obtiene los colores intermedios.

NOTA1: Si no colocsemos el tag <br>, el texto se ubicara en una sola lnea hasta llegar al lmite de la ventana y recin pasara al prximo rengln. El tag <br> no requiere finalizadores con la barra inclinada.

Taller de Herramientas bsicas para programar en la Web

Pgina 6

Tags en el cuerpo del documento


Se pueden establecer el color de fondo y de texto de la pgina, directamente en el tag <body>. <body bgcolor = #RRGGBB text=#RRGGBB> El color de fondo se establece con BGCOLOR y el color de texto con TEXT, en el caso de TEXT se cumple mientras no se diga lo contrario, o sea si dentro de la pagina se usa el tag <Font color=>, el texto tomar la ltima declaracin.

Agrandar texto Achicar texto


Tabla 1: formato bsico

<big>..</big> <small>..</small>

<big>agrandar este texto</big> <small>texto a achicar</small>

Modificando el texto del documento


Primeros cambios en el texto Siempre se necesita enfatizar un texto, subrayar o resaltar de algn modo, para ello se usan los siguientes tags bsicos: Texto subrayado: Negrita enfatizado Itlica Texto preformateado Tag <u></u> (de underline) <b></b> Ejemplo <u> texto que aparecer subrayado </u> <b>Texto que aparece en el documento en negrita</b> <em></em> <em>Texto <strong></strong> enfatizado</em> <i></i> <i>Texto que aparecer en itlica</i> <pre></pre> Se usa cuando se tiene un texto con formato. Dentro de un texto preformateado se pueden usar los tags anteriores.

Tag div Por ahora usaremos el tag <div> solo para alinear el texto. Este tag, que ser usado con mayor frecuencia en el captulo en donde se trata Hojas de estilo en cascada (CSS), determina un bloque de texto que comienza con <div> y termina con </div>, para alinear un texto usando este tag, incorporamos el parmetro align, cuyos valores pueden ser: center, right, left. Ejemplo: <div align=center>texto.</div> <body bgcolor="#8E9AC9"> <font color=BLACK face="verdana"> <font size=5> <b> CHIQUILIN DE BACHIN </b> <font size=3> (HORACIO FERRER) </font> <div align=left> Por las noches, cara sucia <br> de angelito con bluyn, <br> vende rosas por las mesas <br> del boliche de Bachn. <br><br> <div align=center> Si la Luna brilla <br> sobre la parilla, <br> come luna y pan de holln. <br><br>

Taller de Herramientas bsicas para programar en la Web

Pgina 7

<div align=right> Chiquiln, <br> dame un ramo de voz, <br> as salgo a vender <br> mis vergenzas en flor. <br> Baleme con tres rosas <br> que duelan a cuenta <br> del hambre que no entend. <br> Chiquiln. <br> </body>

Heading Las cabeceras generalmente se usan para dar niveles a los ttulos y se expresan como <hn> donde n es un nmero que denota el tamao del texto. El navegador establece cada ttulo en lnea separada. <h1>Ttulo 1</h1> <h2>Ttulo 2</h2> Es lo mismo que: <h1>Ttulo 1</h1><h2>Ttulo 2</h2>

Ilustracin 8: heading

Tag <Font>
Ilustracin 7: Ejemplo con <div align=>

Tipo de fuente El tipo de fuente se establece mediante el tag:<font face=tipo de fuente> Donde el tipo de fuente puede ser: Times New Roman, Courier New, Verdana, Arial, etc.

Taller de Herramientas bsicas para programar en la Web

Pgina 8

Ejemplo: <font face=arial> Color de fuente Se establece mediante el tag: <font color= color de la fuente> que se establece mediante el nombre del color en ingles o con la combinacin cdigos hexadecimales. Ejemplo: <font color = #RRGGBB > Tamao de fuente Se establece mediante el tag: <font size= tamao de fuente>, el tamao de fuente es un nmero, siendo 1 el ms pequeo (ac se nota la diferencia con los header. Ejemplo: <font size=4>. Combinacin de tags en texto Los tags de texto se pueden combinar, o sea en un mismo tag <font> se puede establecer color, tamao y tipo.

Ejemplo simple: <html> <body bgcolor=#956939 text=WHITE> <br><br> <h1><u> COLOR DE FONDO </u></h1> <font color=BLACK size=4 face=ARIAL> <b> Hemos dado color de Fondo marrn (#956939)<br> y color de Texto Blanco (#FFFFFF o bien WHITE) <br> </b> <br><br> <font color= YELLOW size=2> Agregamos una lnea adicional al final de color YELLOW. </font> </body> </html>

Ilustracin 9: Combinacin de tags en texto

Taller de Herramientas bsicas para programar en la Web

Pgina 9

Ilustracin 10: uso de header, color de fondo y de fuente con text y con Font color.

</b> <font color=GREEN> <hr align=left width=75%> El que suscribe, Ing. Juan Manuel Conti, tiene el agrado de dirigirse a Ud. y por su digno intermedio ante quin corresponda, a fin de solicitar un charter Boeing 747 para que el personal del LDC pueda salir dignamente de vacaciones a las Playas de Bahli. Tambin solicito la retribucin de los gastos de hotelera y alimentacin como as tambin el alquiler de vehculos adecuados para visitar distintas zonas tursticas. Sin otro particular, hago propicia la ocasin para saludar a Ud. con distinguida consideracin. Ing. Juan Manuel Conti </font> </pre> </body></html>

Ejemplo combinado: <html> <head> <title> INSERCION DE TEXTO preformateado</title> </head> <body fontcolor=blue face=arial> <pre> San Miguel de Tucumn, Agosto 14 de 2009. <b><font color=BLACK face=arial> Sr. Decano de la FACET. Ing. Mario Arnaldo Donzelli Presente:

Taller de Herramientas bsicas para programar en la Web

Pgina 10

hspace=n Especifica mnima distancia entre la imagen y los elementos laterales:

Ilustracin 12: parmetro hspace

Ilustracin 11: Vista en el browser del ejemplo combinado

Insercin de Imgenes
El tag usado para la insercin de imgenes es: <img src=imagen> imagen engloba la unidad, el path y el nombre del archivo grfico. Puede insertar una imagen con extensin .gif o bien .jpg (aunque hay que tener cuidado con los tamaos excesivos de las imgenes, pues producen demoras para bajarlas, en estos casos es aconsejable modificar el tamao de la imagen con algn editor de grficos simple (IrfanView por ejemplo). SRC: viene de Source, lugar donde se encuentra el grfico. Este tag puede incluir un conjunto de parmetros importantes como:

ALIGN=top: alinea la primera lnea de texto con la parte superior de la imagen. ALIGN=middle: alinea la primera lnea del texto con el centro de la imagen. ALIGN=bottom: alinea la primera lnea de texto con la parte inferior de la imagen. ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma. ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma. Ejemplos: <img src="../Imgenes/Friso 02.jpg" align=left hspace=10> La cultura es la forma de ser y de pensar de un pueblo. <br> Sin duda va evolucionando con los descubrimientos y con <br> la tecnologa que modifica la conducta de la gente. <br>

Taller de Herramientas bsicas para programar en la Web

Pgina 11

lucionando con los descubrimientos y con la tecnologa que modifica la <br> conducta de la gente. .

Ilustracin 14: Insercin de imagen a la derecha Ilustracin 13: Insercin de imgenes alineado a izquierda

Ejemplo de insercin de imagen a la derecha . <img src="../Imgenes/Diseo Web 04.bmp" align=right hspace=10> La cultura es la forma de ser y de pensar de un pueblo. Sin duda va evo<br>

Imagen como fondo de pgina


Se usa el parmetro background en el tag body: <body background=imagen> imagen, como en el caso anterior, especifica todo el camino hasta llegar al archivo .gif o .jpg

Taller de Herramientas bsicas para programar en la Web

Pgina 12

NOTA: Es muy importante saber manejar un poco algn procesador grfico como Photoshop, Corel, etc, a fin de darle caractersticas especiales a la imagen, como un tamao y resolucin adecuados para Internet, o difuminados fuertes si la imagen ir como fondo de pgina. En el ejemplo a visualizar, la imagen se trata de una bandada de aves levantando vuelo, y no debe interferir con el texto u otras imgenes de frente. Por lo tanto ha sido modificada para que sea apenas visible y no moleste. Mantener fijas las imgenes de fondo <body background = imagen texto = #color bgproperties=fixed > Esto es til cuando se hace scroll y se desea que la imagen de fondo permanezca en el mismo lugar. Ejemplo: <body background="../Imgenes/Foto 007.jpg" bgproperties=FIXED> .

Ilustracin 15: Imagen de fondo

Listas:
Listas desordenadas Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). Suponga el siguiente texto: Temas de la materia: *Windows

Taller de Herramientas bsicas para programar en la Web

Pgina 13

*Word *HTML *DOS

Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta <li> si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo: <ul type="tipo de vieta"> donde tipo de vieta puede ser uno de los siguientes: circle disc square .. <H1>Temas de la Materia</H1> <ul type="circle"> <LI>Windows <LI>Word <LI>HTML <LI>DOS </ul> ..
Tabla 2: Cdigo para listas con vietas tipo circle

Listas ordenadas En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento sera igualmente precedido de su etiqueta <li>.

Ilustracin 16: Cdigo y vista en el navegador de listas desordenadas UL

Taller de Herramientas bsicas para programar en la Web

Pgina 14

Cdigo: <ol> <LI>Windows <LI>Word <LI>HTML <LI>DOS </ol>

Vista en el Browser: Cdigo: <ol type="I"> <LI>Windows <LI>Word <LI>HTML <LI>DOS </ol> Vista en el Browser:

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto es posible especificar el tipo de numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...). Para realizar dicha seleccin se utiliza el atributo type, el cual ser situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son: 1: Para ordenar por nmeros a: Por letras minsculas del alfabeto A: Por letras maysculas del alfabeto i: Ordenacin por nmeros romanos en minsculas I: Ordenacin por nmeros romanos en maysculas

Taller de Herramientas bsicas para programar en la Web

Pgina 15

Enlaces Hipertextuales
Es lo que hace posible la navegacin y le da interactividad con el usuario. El hipervnculo puede ser: - Un texto. - Una imagen. - Un dibujo. - Un cono. Al posicionar el mouse sobre uno de ellos el puntero se convertir en una manito y al hacer clic se establecer el enlace cargndose lo que haya all.

<a href=HTTP://WWW.LAGACETA.COM.AR> <font color=GREEN><I> LaGaceta.com.ar </I></font> </a> <br> <font color=BLUE> Abrir : <a href=HTTP://WWW.LANACION.COM.AR> <font color=GREEN><I> LaNacion.com.ar </I> </a> </font>

Ilustracin 17: enlaces hipertextuales

Ejemplo: <font color=BLUE size=3 face=ARIAL> <br><br> En esta pgina invocaremos a LA GACETA mediante un enlace textual. <br><br> Abrir:

Ilustracin 18: Ejemplo de hipertexto

Taller de Herramientas bsicas para programar en la Web

Pgina 16

Hipervnculos locales, marcadores o anclas


Permite desplazarse dentro de la misma pgina web. Para ello se recurre a los denominados marcadores (similares a los labels en C cuando se utiliza la instruccin goto). El marcador se denota con el tag <a name=#nombre> Ejemplo: <html> <head><title>Pgina Web con marcadores</title></head> <body Text="blue"> <a name="#Inicio"><h1>Pgina principal</h1></a> <! aqu coloca uno de los marcadores: Inicio > <hr> <p align="justify" Style="text-indent:50"> Esta pgina contiene marcadores o hipervnculos locales que permiten al usuario desplazarse a travs del documento mediante estos hipervnculos. El uso de marcadores proporciona una manera prctica y sencilla de seccionar el documento y encontrar informacin rpidamente.No podan faltar en un curso de pginas Web los enlaces o hipervnculos, que son la esencia misma de la Red. Los tambin llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otro archivo del mismo sitio de Internet o a otra pgina de Internet, entre otras funciones. Habamos dejado nuestra pgina en la leccin anterior diseada en una tabla que ocupaba todo

do el documento. En esta leccin vamos a insertar todos los hipervnculos que tiene que haber en nuestra pgina. <br><br> </p> <a href="#Marcadores"> <! . de aqu produce el salto al marcador Marcadores .> Haga clic para obtener ms informacin sobre marcadores </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> <A name="#Marcadores"> <h1> Qu son los marcadores </h1> </A> Los marcadores son hipervnculos o enlaces internos que permiten desplazarse a travs del mismo documento. Cuando el usuario hace clic sobre un enlace, la pgina se desplaza hasta la seccin donde se haya definido un marcador. <br> Para definir un marcador, debe empezar con la expresin <b><i>A Name="#Marcador"</i></b> en el sitio donde desee definir un marcador. Para hacer referencia al marcador definido, use la expresin <b><i>A Href="#Marcador"</i></b>, para acceder a dicho marcador. <br> Un hipervnculo con marcador es un enlace entre un hipertexto y una seccin de un documento.

Taller de Herramientas bsicas para programar en la Web

Pgina 17

A Inicio <A href="#Inicio"> Volver arriba </A> </body> </html> <! . de aqu produce el salto al marcador Inicio .>

MDULO II: TABLAS


ESTRUCTURA DE UNA TABLA
Las tablas estn formadas por filas y columnas. Definindose una celda como el espacio formado por la interseccin de una fila y una columna. Columna 1 Columna 2 Columna 3

Fila 1

Celda (1,1)

Celda (1,2)

Celda (1,3)

Fila 2

Celda (2,1)

Celda (2,2)

Celda (2,3)

Fila 3

Celda (3,1)

Celda (3,2)

Celda (3,3)

COMO SE CREA UNA TABLA


La etiqueta <TABLE> </TABLE> indica al navegador donde comienza y donde termina la tabla. La etiqueta <TR></TR> indica al navegador donde comienza y donde termina una filas, por lo que deberemos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla. Por ltimo, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el nmero de columnas

Taller de Herramientas bsicas para programar en la Web

Pgina 18

que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>. De esta forma, y siguiendo con nuestra tabla inicial de ejemplo, el esquema de etiquetas sera el siguiente: <TABLE>

<TR>

<TD>...</TD>

<TD>...</TD>

<TD>...</TD>

<TR>

<TD>...</TD>

<TD>...</TD>

<TD>...</TD>

<TD> celda(2,1) </TD> <TD> celda(2,2) </TD> <TD> celda(2,3) </TD> </TR> <TR> <TD> celda(3,1) </TD> <TD> celda(3,2) </TD> <TD> celda(3,3) </TD> </TR> </TR> </TABLE> </TR>

<TR>

<TD>...</TD>

<TD>...</TD>

<TD>...</TD> </TR>

</TABLE>

CODIGO PARA GENERAR LA TABLA <TABLE BORDER=1> <TR> <TD> celda(1,1) </TD> <TD> celda(1,2) </TD> <TD> celda(1,3) </TD> </TR> <TR> Taller de Herramientas bsicas para programar en la Web

Ilustracin 19: Tabla bsica, disposicin de celdas

Ejemplo: CODIGO <html > <head> <title>Ejemplo CodigodeMaquina</title> Pgina 19

</head> <body> <table> <tr> <td>Productos vendidos</td> <td>Cantidad</td> <td>Precio unitario</td> </tr> <tr> <td>Nescaf</td> <td>26 tarros</td> <td>$1790</td> </tr> <tr> <td>Azucar Lider</td> <td>10 kilos</td> <td>$590</td> </tr> <tr> <td>T Orjas</td> <td>15 cajas</td> <td>$290</td> </tr> <tr> <td>Sacarina Lquida</td> <td>5 mini botellas</td> <td>$390</td> </tr> </table> </body> </html>

ETIQUETA <TABLE>
<TABLE> y </TABLE> son las etiquetas principales de definicin de una tabla, que acotan el espacio en el que podemos definir filas y celdas. Sus principales atributos son: 1. WIDTH=n , donde n puede venir expresado como un entero (pxeles) como tanto por ciento (%). Determina el ancho de la tabla. Si le damos un valor en pxeles, el ancho ser absoluto, independientemente del tamao de la pantalla, mientras que si le asignamos un valor en % el ancho ser relativo al tamao de pantalla. As, si queremos que la tabla ocupe toda la ventana del navegador, bastara con especificar WIDTH="100%. Ejemplo: <TABLE WIDTH="50%" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE WIDTH="100%" BORDER=4"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE WIDTH=400" BORDER=8"> <TR>

Ilustracin 20: Ejemplo de tabla

Taller de Herramientas bsicas para programar en la Web

Pgina 20

<TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

Ejemplo : <TABLE WIDTH="100" HEIGHT="100" BORDER="1"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> 3. BORDER= "n" , donde n es un nmero entero. Este atributo permite que se muestren los bordes de la tabla, si no se usa este atributo no veremos los bordes, ya que su valor por defecto es BORDER=0. Las celdas sin contenido no aparecern con bordes. Ejemplo : <TABLE WIDTH="100" BORDER="0"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE WIDTH="100" BORDER="5"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

Ilustracin 21: Ejemplo table width

2. HEIGHT= n, donde p puede venir expresado como un entero (pxeles) como tanto por ciento (%). Este atributo nos permite determinar lo alta que va a ser la tabla, normalmente el alto de la tabla no se especifica, ya que su valor lo va a determinar el texto y/o las imgenes que vamos a introducir en las celdas de la misma.

Taller de Herramientas bsicas para programar en la Web

Pgina 21

Ilustracin 23: Ejemplo tabla con bordes

Ilustracin 22: Ejemplo de border en tabla

Ejemplo completo de tabla con bordes <html > <head> <title>Ejemplo CodigodeMaquina</title> </head> <body> <table border="1" width="100%" heigth="200"> <tr> <td>Productos vendidos</td> <td>Cantidad</td> <td>Precio unitario</td> </tr> <tr> <td>Nescaf</td> <td>26 tarros</td> <td>$1790</td> </tr> <tr> <td>Azucar Lider</td> <td>10 kilos</td> <td>$590</td> </tr> <tr> <td>T Orjas</td> <td>15 cajas</td> <td>$290</td> </tr> <tr> <td>Sacarina Lquida</td> <td>5 mini botellas</td> <td>$390</td> </tr> </table> </body> </html>

4. BORDERCOLOR= "color", donde color puede venir expresado mediante su nombre web en ingls mediante su cdigo hexadecimal. Este atributo nos permite definir el color en que se ver el borde <TABLE BORDER="1" BORDERCOLOR="red > <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE BORDER="5" BORDERCOLOR="#FFFF00> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

Taller de Herramientas bsicas para programar en la Web

Pgina 22

</TR> </TABLE>

Ilustracin 24: Color de bordes

5. BGCOLOR= "color", donde color va a venir expresado mediante su nombre en ingls su cdigo hexadecimal. Con este atributo podemos definir el color de fondo que tendr la tabla. Ejemplo: <TABLE BORDER=4 BORDERCOLOR=YELLOW BGCOLOR="red"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE BGCOLOR="#66FFFF"> <TR> <TD>UNO</TD> <TD>DOS</TD>

Ilustracin 25: Ejemplo BGCOLOR

6. BACKGROUND= "ruta imagen: permite establecer una imagen de fondo para toda la tabla, y en donde "ruta imagen ser la ruta de directorios o una URL de Internet en la que se encuentra la imagen . Ejemplo: <table width="400" height="400" border="4" bordercolor="#0000ff" background="fachada2.gif"> <tr> <td>Productos vendidos</td> <td>Cantidad</td> <td>Precio unitario</td> </tr> <tr> <td>Nescaf</td> <td>26 tarros</td> <td>$1790</td> </tr> <tr> <td>Azucar Lider</td> <td>10 kilos</td> <td>$590</td> </tr> <tr> <td>T Orjas</td> <td>15 cajas</td> <td>$290</td> </tr>

Taller de Herramientas bsicas para programar en la Web

Pgina 23

<tr> <td>Sacarina Lquida</td> <td>5 mini botellas</td> <td>$390</td> </tr> </table>

<TABLE BORDER="1" CELLSPACING="0"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE BORDER="1" CELLSPACING=20"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

Ilustracin 26: Ejemplo de background Imagen

7. CELLSPACING= "n", donde n es un nmero entero. Nos permite establecer el espacio que va a haber entre las celdas, con lo que podemos dar una mayor o menor separacin a las mismas, determinado por n=n de pxeles entre ellas. Si la tabla est definida con bordes, este atributo modificara en ancho del borde interior de la misma. Ejemplo:

Ilustracin 27: Ejemplo CellSpacing

8. CELLPADDING= "n", con n=n entero=n de pxeles. Determina el espacio interior en las celdas, es decir, el espacio que habr entre los bordes de la celda y el texto, imagen o componente que hay dentro de esta. Ejemplos.-

Taller de Herramientas bsicas para programar en la Web

Pgina 24

<TABLE BORDER="1" CELLPADDING="0"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE BORDER="1" CELLPADDING=20"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

<TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE BORDER="1" ALIGN="center"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE BORDER="1" ALIGN="right"> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE>

Ilustracin 28: Ejemplo Cellpadding

9. ALIGN= left, center, right Ejemplos.<TABLE BORDER="1" ALIGN="LEFT"> <TR> Taller de Herramientas bsicas para programar en la Web Pgina 25

Ilustracin 29: Ejemplo de Align

10. HSPACE= "p ", donde p es o n entero o n pxeles. Permite especificar el espacio horizontal que habr entre la tabla y el texto circundante. 11. VSPACE= "p ", donde p es n entero o n pxeles. Permite especificar el espacio vertical que habr entre la tabla y el texto circundante. 12. TITLE="titulo", para titular un documento o una seccin del mismo. Algunos programas visores pueden colocar el valor de este atributo como texto insertado o audio. 13. DIR="direccin". Se usa para indicar la direccin del texto y de las columnas. Asume los valores: ltr (de izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara por el tope arriba a la derecha.

14. <CAPTION></CAPTION>. Slo admite el atributo ALIGN, que puede tomar los valores TOP, LEFT, RIGTH y BOTTOM. Ejemplos.. <html > <head> <title>Ejemplo </title> </head> <body> <p>atributos de las tablas</p> <TABLE align="center" width="224" height="33" BORDER="1" CELLSPACING="1" dir="ltr" > <caption align="bottom"> Tabla 1</caption> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE align="center" width="224" height="33" BORDER="1" dir="rtl" hspace="1" vspace="50" > <caption align="right"> Tabla 2</caption> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> <TABLE align="center" width="224" height="33" BORDER="1" CELLSPACING="1" dir="ltr" > <caption align="top"> Tabla 3</caption> <TR> <TD>UNO</TD> <TD>DOS</TD> </TR> </TABLE> </body> </html>

Taller de Herramientas bsicas para programar en la Web

Pgina 26

Ilustracin 30: Ejemplo de atributos de tabla

ATRIBUTOS DE LA ETIQUERA <TR>


1. BGCOLOR= " color ". 2. ALIGN = " left /center /right / justify ". 3. VALIGN = " top / middle / baseline / bottom " .

ATRIBUTOS DE LA ETIQUERA <TD>


1. 2. 3. 4. 5. 6. BGCOLOR= " color " ALIGN = " left /center /right / justify / char " VALIGN = " top / middle / baseline / bottom " BACKGROUND= " ruta de imagen " WIDTH= " n " HEIGHT= "n "

2. COLSPAN= "n". donde n es un n entero. Este atributo permite combinar varias columnas en una sola. EJEMPLO.<TABLE WIDTH="50%" CELLPADDING="5" CELLSPACING="0" BORDER="1"> <TR> <TD COLSPAN="3" ALIGN="center">CELDA EXPANDIDA</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> <TD WIDTH="33%">TRES</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> <TD WIDTH="33%">TRES</TD> </TR> </TABLE>

Otros Atributos importantes


1. ROWSPAN= "n". donde n en un n entero. Este atributo permite combinar varias celdas en una sola.

Ilustracin 31: Ejemplo de Colspam

<TABLE WIDTH="75%" CELLPADDING="2" CELLSPACING="0" BORDER="1"> <TR>

Taller de Herramientas bsicas para programar en la Web

Pgina 27

<TD ROWSPAN="3">CELDA EXPANDIDA</TD> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">UNO</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> </TR> <TR> <TD WIDTH="33%">UNO</TD> <TD WIDTH="33%">DOS</TD> </TR> </TABLE>

Ilustracin 32: Ejemplo de RowSpan

TABLAS ANIDADAS
Las tablas se pueden anidar unas con otras, es decir, podemos situar una tabla o tablas dentro de otra, para conseguir un efecto complejo de maquetacin. La forma de operar es tericamente sencilla: basta con introducir una tabla con toda su estructura dentro de una celda de la tabla madre. Ejemplo

<TABLE WIDTH="200" BORDER="1"> <TR ALIGN="center"> <TD>UNO</TD> <TD>DOS</TD> </TR> <TR> <TD>TRES</TD> <TD> <TABLE WIDTH=100%> <TR> <TD>HIJO 1</TD> <TD>HIJO 2</TD> </TR> <TR> <TD>HIJO 3</TD> <TD>HIJO 4</TD> </TR> </TABLE> </TD> </TR> </TABLE>

Taller de Herramientas bsicas para programar en la Web

Pgina 28

<!--Tercera celda=Tercera columna--> <TD WIDTH="33%">Y acabamos con todo lo que queramos poner en la ltima columna. A que ha quedado todo muy bonito.</TD> </TR> </TABLE>

Ilustracin 33: Ejemplo de tablas anidadas

Maquetacin Antes de hablar de maquetacin haciendo uso de tablas, identificaremos las fases del proceso que forman el ciclo de vida de un desarrollo web. Diseo: que consiste en crear esbozos de la web final mediante herramientas grficas, tales como Photoshop. Maquetacin HTML: consiste en convertir los esbozos creados en la etapa de diseo en una plantilla HTML, establecer las imgenes que se usarn y, como se ver ms adelante, la realizacin de una hoja de estilos (CSS). En el ejemplo se muestra que la pgina consiste en una tabla con tres celdas grandes (unidas 8 filas con cellpadding) Ejemplo: <TABLE WIDTH="100%" BORDER="0" CELLPADDING="8"> <TR VALIGN="top"> <!--Primera celda=primera columna--> <TD WIDTH="33%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...</TD> <!--Segunda celda=Segunda columna--> <TD WIDTH="33%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado profesional....</TD>

Ilustracin 34: maquetacin con tablas

Taller de Herramientas bsicas para programar en la Web

Pgina 29

<body>. Tiene los atributos rows or cols, en el cual se define una lista de tamaos separados por comas, ya sea en pixeles o en porcentajes del ancho

Marcos Frames
Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se cargue una pgina html distinta.

total de la ventana. Por ejemplo, <frameset cols="10%,80%,10%"> divide la ventana en tres columnas: mrgenes angostos a izquierda y derecha y una pgina central ancha. Por lo tanto, una pgina de marcos se define mediante los siguientes tags: <FRAMESET...> <FRAME SRC="archivo.htm"> <FRAME SRC="archivo2.htm"> </FRAMESET> Se puede definir marcos de tipo fila o columna: <FRAMESET cols/rows=tamao,tamao> Una vez declarado el tipo de marcos si es por fila o columna, se declaran las pginas contenidas en dichos marcos de la siguiente manera: <FRAME SRC=pgina.htm NAME=nombre con que se convocar al marco> Entre <frameset> y </frameset> puede haber:

ATRIBUTOS
ROWS (filas) es el que define el nmero y el tamao de los frames horizontales COLS (columnas) es el que define el nmero y el tamao de los frames verticales Las etiquetas FRAME SRC="frames.htm" cargan las pgina indicadas en el frame correspondiente. El tamao de los frames se puede especificar de varias formas: COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera COLS=150,*,150 tres columnas, la primera y tercera de 150 pxels, la segunda ocupa el resto. ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

etiquetas <frame>, cuyos atributos src contienen los URL que deben mostrarse en esas columnas o filas; otras etiquetas <frameset> para dividir despus las columnas o filas en ms filas o columnas. etiquetas <noframes> y </noframes> para definir una pgina para navegadores que no soportan marcos.

Pgina de Marcos
Tambin llamada FRAMESET o conjunto de marcos. Este documento de marcos tiene la etiqueta contenedora <frameset> en lugar de la etiqueta Taller de Herramientas bsicas para programar en la Web Pgina 30

Propiedades: Frame Source SCR= Nombre del Frame Name Nombre de la pgina con su correspondiente path Es necesario darle un nombre al frame, este atributo es usado cuando se utiliza el atributo target en un link hipertextual. En este caso, si desea que una pgina que haya sido referenciada en un vnculo hipertextual aparezca en un marco determinado, se utiliza el atributo target=Nombre del frame. Tambin se usa este atributo cuando se trabaja con Java Scripts.

Ilustracin 35: Ejemplo de pgina de marcos en filas

Ejemplo de una pgina de marcos en dos filas: <HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> </HTML>

Ejemplo de una pgina de marcos en tres columnas: <HTML> <HEAD><TITLE> Ttulo de la pgina </TITLE></HEAD> <FRAMESET COl=25%,*,30%> <FRAME SRC="frame1.html" > <FRAME SRC="frame2.html" > <FRAME SRC="frame3.html" > </FRAMESET> </HTML>

Taller de Herramientas bsicas para programar en la Web

Pgina 31

Ilustracin 36: Ejemplo de pgina de marcos en 3 columnas

Frames anidados
Es posible anidar frames, llamando a una pgina que tenga de nuevo frames o bien declarndolo explcitamente. <FRAMESET COLS=20%,*> <!--define dos columnas--> <FRAME SRC="frames1.htm"> <!--pagina incorporada en la primera columna--> <FRAMESET ROWS=20%,*> 2 columna: <FRAME SRC="frames2.htm"> integrada por dos <FRAME SRC="frames3.htm"> filas </FRAMESET> </FRAMESET> Este cdigo divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total

Ilustracin 37: frames anidados

ARIBUTOS DE FRAMESET FRAMEBORDER=yes, no. Indica si los frames tendrn bordes o no. BORDERCOLOR= color. Indica el color del borde BORDER= 10. Indica el grosor del borde ATRIBUTOS DE FRAME SCROLLING= yes, no , auto. Indica si el frame llevar siempre, nunca o cuando lo necesite, barra de deslizamiento vertical BORDERCOLOR=color. Indica el color del borde MARGINWIDTH=n. Indica el margen horizontal, tanto derecho como izquierdo, en pxels MARGINHEIGHT=n. Indica el margen vertical, tanto superior como inferior, en pxels

Taller de Herramientas bsicas para programar en la Web

Pgina 32

NORESIZE=noresize. Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitira su deslizamiento.

EL ATRIBUTO TARGET TARGET=_top, hace que la pgina se cargue en la ventana completa del navegador. TARGET=_self, hace que la pgina se cargue en la misma ventana del frame actual. TARGET=_parent, hace que la pgina se cargue en el frame "padre", del que desciende el actual TARGET=_blank, hace que la pgina se cargue en una nueva ventana. TARGET=nombre, hace que la pgina se cargue en el frame llamado nombre, si no existe, se carga en una ventana nueva. EJEMPLOS DE USO DE FRAMES 1.- Cuerpo izquierdo, cuerpo derecho, cuerpo central con cabecera, pie y contenido. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET COLS=20%,*,20%> <FRAME SRC="CUERPOIZ.html"> <FRAMESET ROWS=20%,*,20%> <FRAME SRC="CABECERA.html"> <FRAME SRC="CUERPOCENTRO.html">

<FRAME SRC="PIE.html"> </FRAMESET> <FRAME SRC="CUERPODER.html"> </FRAMESET> <BODY> <!--mensaje cuando el navegador no resiste frames--> Su navegador no admite la declaracin de Frames </BODY> </HTML>

Ilustracin 38: Ejemplo 1 de uso de frames

2.<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET ROWS=20%,*,20%> <FRAME SRC="CABECERA.html"> <FRAMESET COLS=20%,*,20%> Pgina 33

Taller de Herramientas bsicas para programar en la Web

<FRAME SRC="CUERPOIZ.html"> <FRAME SRC="CUERPOCENTRO.html"> <FRAME SRC="CUERPODER.html"> </FRAMESET> <FRAME SRC="PIE.html"> </FRAMESET> <FRAME SRC="frame1.html"> </FRAMESET> <BODY> <!--mensaje cuando el navegador no resiste frames--> Su navegador no admite la declaracin de Frames </BODY> <HTML>

Ilustracin 39: Ejemplo 2 de uso de frames

MODULO III: CSS Hojas de Estilo en Cascada


Significado
CSS significa Cascading Style Sheet, Hojas de Estilo en Cascada, es un estndar definido en la especificacin CSS1 y CSS2 del World Wide Web Consortium (W3C).

Uso
Se usa para separar el contenido de una pgina web de su diseo, esto significa que puede haber un equipo de profesionales trabajando en forma coordinada, en donde un grupo se ocupa del contenidos de la pgina y otro grupo del diseo. El grupo encargado del diseo, puede realizar una plantilla CSS que ser utilizada por varias pginas html.

Ilustracin 40: para qu se usa CSS?

Taller de Herramientas bsicas para programar en la Web

Pgina 34

Ilustracin 41: Una hoja de estilos definida para ms de una pgina HTML

Los estilos se asocian a los tags HTML de diferentes formas: En el tag especfico: el estilo influye slo en el tag declarado En el head: los estilos declarados en el head, influyen en toda la pgina (en donde estn los estilos). Cuando se trabaja con algunos procesadores WYSIWYG, como el Dreamweaver, ste va declarando los estilos en el head a medida que se va trabajando en modo diseo, esto no es aconsejable porque el cdigo de la pgina se vuelve incomprensible y muchas veces se presentan mismos estilos con diferentes nombres. Agrupacin de estilos en hoja separada, esta es una forma ms completa y se puede compartir para diferentes pginas web, lo que dara uniformidad al sitio facilitando la navegabilidad.

<h2 style="color:#00ff00; background-color:#cc0000"> TAMAO h2 DE FUENTE </h2> <h3 style="color:#0000ff; background-color:#00cc00"> TAMAO h3 DE FUENTE </h3> <h4 style="color:#ffff00; background-color:#cccc00"> TAMAO h4 DE FUENTE </h4> <h5 style="color:#ff0000;background-color:#00cccc"> TAMAO h5 DE FUENTE </h5> <h6 style="color:#ffffff; background-color:#0000cc"> TAMAO h6 DE FUENTE </h6> </body></html>

Estilos en Tags HTML


<html><head><title> TAMAO DE FUENTE </title></head><body> <h1 style="color:#ff0000; background-color:#0000cc"> TAMAO h1 DE FUENTE </h1>
Ilustracin 42: ejemplo de estilos en tag

Taller de Herramientas bsicas para programar en la Web

Pgina 35

Estilos en head
Recuerde que los estilos declarados en el head, son vlidos para toda la pgina en la que se encuentran. Forma de establecerlos: 1. En el <head> se abre el bloque de estilos con el siguiente tag <style type="text/css"> 2. Se establece el tag HTML que se quiere modificar por ejemplo h1 3. Se establece el par {atributo: valor; atributo:valor} separados por punto y coma Atributos modificables: 1. Color de fuente 2. Tamao de fuente 3. Decoracin de texto 4. Fondos 5. Prrafos 6. etc Valores posibles: Unidades de medida CSS 1. Unidades de longitud Un valor de longitud est formado por un signo "+" o "-" opcional, y a continuacin un nmero seguido por dos letras que conforman la abreviatura que hace referencia a una unidad. El valor "0" no necesita identificador de unidad. 2. Relativas: em (ems, altura de la fuente actual) ex (x-height, altura de la letra "x" de la fuente actual)

px (pixels, relativo a la resolucin de pantalla) 3. Absolutas: in (pulgadas; 1in=2.54cm) cm (centmetros; 1cm=10mm) mm (milmetros) pt (puntos; 1pt=1/72in) pc (picas; 1pc=12pt) 4. Unidades de porcentaje Un valor de porcentaje est formado por un signo "+" o "-" opcional, y a continuacin un nmero seguido por el signo "%". 5. Unidades de porcentaje Un valor de color est formado por un color (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow) o la especificacin numrica RGB del color. Estas son 4 maneras vlidas de indicar el color: #rrggbb (ej, #00cc00) #rgb (ej., #0c0) rgb(x,x,x) dnde x es un entero entre 0 y 255 (ej, rgb(0,204,0)) rgb(y%,y%,y%) dnde y es un nmero entre 0.0 y 100.0 (ej, rgb(0%,80%,0%)) Todos los ejemplos expresan el mismo color. 6. URLs La URL se usa cuando el valor que se quiere referenciar es un archivo. La URL puede ir opcionalmente entre comillas simples (') o dobles ("). Parntesis, comas, espacios, comillas simples y

Taller de Herramientas bsicas para programar en la Web

Pgina 36

dobles, deben ir precedidas de la barra "\" (backslash). La URL siempre ser interpretada de forma relativa al directorio en el que se encuentre la hoja de estilo, y no al archivo HTML que la referencia
Tabla 3: Atributo y valores CSS

</head> <body> <h1>Primer ttulo</h1> <h2>Segundo ttulo</h2> </body> </html>

En el siguiente ejemplo se establece que todos los ttulos (heading) de nivel 1, sern de color rojo, sobre fondo amarillo:

Ilustracin 43: Ejemplo de estilo en head

Ejemplo: <html> <head><title>Estilo en pagina</title> <style type="text/css"> h1 {color:#ff0000; background-color:#ffff00 } h2 {color:#00ff00; background-color:#cc0000 } </style>

Ilustracin 44: Ejemplo de estilo en pgina

Propiedades relacionadas a las fuentes


Siempre comienzan con la marca font acompaada de un guin, con excepcin de color que no necesita establecer la marca font: 1. font-family: Arial Arial Black Arial Narrow Courier New

Taller de Herramientas bsicas para programar en la Web

Pgina 37

2. 3.

4.

5.

Georgia Impact Tahoma Times New Roman Verdana font-size: es una unidad de medida CSS, explicadas en la tabla 2 font-style: normal italic oblique font-weight , muestra cun destacado es el texto, puede ser: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 font-variant : define si la fuente se muestra en mayscula ya sea normal o pequea. small-caps

normal Ejemplo: h1 { color:#000000; background-color:#4080ff; font-family: courier new; font-style: italic; font-weight: lighter; font-variant: small-caps; }

Taller de Herramientas bsicas para programar en la Web

Pgina 38

Agrupacin de marcas CSS


Se pueden agrupar varias marcas HTML y definir los estilos, por ejemplo: h1,h2,h3 { font-family: verdana; color:#0000ff; background-color:#4080ff; } En donde h1,h2 y h3 tendrn el mismo tipo de letras, el mismo color e igual fondo.

Varias reglas en una misma marca HTML


En el siguiente ejemplo, se aplican varias reglas a una misma marca, en primer lugar, se aplica a todos los ttulos el mismo fondo y tipo de letras, luego se declara cada una con diferentes atributos. h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h1 { font-size:40px; } h2 { font-size:30px; } h3 { font-size:25px; }

Ilustracin 45: agrupacin de marcas CSS

Taller de Herramientas bsicas para programar en la Web

Pgina 39

Propiedades relacionadas con el texto


Siempre comienzan con text seguido de un guin: 1. Text-align: alineacin del texto a. left b. right c. center d. justify 2. text-decoration: a. none: ninguno b. underline: subrayado c. overline: con lnea arriba d. line-through: tachado 3. Word-spacing: espaciado entre palabras, se mide en pixeles 4. Letter-spacing: espaciado entre letras, se mide en pixeles 5. Text-indent: indenta la primera lnea de un prrafo. Un prrafo es un bloque entre los tags<p>..y..</p>. 6. Text-transform: a. capitalize: Dispone en maysculas el primer carcter de cada palabra. b. lowercase: Convierte a minsculas todas las letras del texto. c. uppercase: Convierte a maysculas todas las letras del texto. d. none: No provoca cambios en el texto. Ejemplo 1:

<style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } </style>

Taller de Herramientas bsicas para programar en la Web

Pgina 40

Ilustracin 46: Estilos en texto

Ejemplo 2: <html> <head> <style type="text/css"> h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h2 { color: #00ff00; word-spacing: 30px; text-transform: uppercase; } h3 { color: #aa0000; letter-spacing: 10px; text-transform:capitalize; } </style> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2: con word-spacing</h2> <h3>Encabezado 3: con letter-spacing</h3> </body></html>

Ilustracin 47: Ejemplo 2 de estilos en texto

Herencia de propiedades de estilo


El conjunto de marcas HTML forman en s un rbol en cuya raiz se encuentra la marca body del cual se desprenden otras marcas contenidas como h1,h2,h3,h4,h5,h6,p,div, luego en el interior de ellas se encuentran otras marcas HTML como em,b,i,pre etc.

Ilustracin 48: herencia de estilos

Taller de Herramientas bsicas para programar en la Web

Pgina 41

Ahora se ver que todos los estilos vistos hasta el momento se heredan, por ejemplo si se define el color de fuente en el body, mientras en otro tag no se diga lo contrario, el color seguir siendo el definido en body. Ejemplo: <html><head><title>CSS6</title> <style type="text/css"> body { color:#ff0000; font-family:verdana; #background-color:#c0c0c0 } b{ color:#008800; } p{ color:#999999; } </style> </head> <body> <h1>En este caso el color de letras ser roja</h1> <h2>Mientras no le diga lo contrario</h2> <b>Letras en negrita</b> contina el texto heredando el color del body.<br> <h3>Heading 3- usamos como titulo a nivel 3</h3> Sigue la herencia hasta que no le diga lo contrario... <p> El prrafo debera cambiar el color de fuente.<br> <b>Incorporamos negrita</b>, incorporamos <i>itlica</i>

<u>subrayado</u> y <s>tachado</s>. </p> </body> </html>

Ilustracin 49: Ejemplo de herencia de estilos

Definicin de Estilos en funcin del contexto


En CSS se puede definir una marca dentro de otra y establecer sus caractersticas. Por ejemplo se puede establecer cmo ser el texto en negrita si es que el mismo se encuentra dentro de un prrafo, slo en este caso el estilo para dicha marca se activar. En este caso se dice que el estilo depende del contexto. En el ejemplo siguiente, la negrita de un prrafo ser diferente de la negrita de un ttulo 1:

Taller de Herramientas bsicas para programar en la Web

Pgina 42

<html> <head> <title>CSS8</title> <style type="text/css"> p b{ color:#0000ff; } h1 b{ color:#ff0000; } </style> </head> <body> <h1>Que son las <b>(CSS)?(Esto es h1 con b)</b></h1> <b>CSS (esto es b solo)</b> <p> Esto es un prrafo: Las hojas de estilo es <b>una tecnologa (esto es p con b)</b> </p> </body> </html>

Ilustracin 50: Estilos en funcin de contexto

Hojas de Estilo en Archivo Externo


La definicin de estilos en archivo externo tiene la gran ventaja que el programador plantear una hoja de estilos general como una plantilla y a partir de ella se la puede convocar desde diferentes pginas web, esto da una gran ventaja: la uniformidad del sitio. Hasta ahora se han definido estilos (1)a nivel de marca HTML y (2) definicin de estilos a nivel de pgina. Los estilos a nivel de marcas no es seguro adems de laborioso, la segunda no es recomendable cuando se desea usar una plantilla uniforme para todo el sitio. La metodologa ms empleada es la definicin de una hoja de estilo en un archivo separado que deber tener la extensin css. Este archivo contendr las reglas de estilo que se vieron hasta ahora, pero estarn separadas del archivo HTML.

Taller de Herramientas bsicas para programar en la Web

Pgina 43

La ventaja fundamental, como se dijo anteriormente, es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las pginas del sitio web, por otro lado es muy fcil modificar, agregar o quitar estilos y se trabajar con slo un archivo. Tambin tiene como ventaja que al programador le resulta ms ordenado tener lo referente a HTML en un archivo y las reglas de estilo en un archivo aparte. Otra ventaja es que cuando un navegador solicita una pgina, se le enva el archivo HTML y el archivo CSS, quedando guardado este ltimo archivo en la cach de la computadora, con lo cual, en las sucesivas pginas que requieran el mismo archivo de estilos, ese mismo archivo se rescata de la cach y no requiere que el servidor web se lo reenve (ahorrando tiempo de transferencia).

Definicin del archivo externo


Es un archivo de texto que se puede realizar con cualquier editor de textos pero con la extensin css, en el caso de la ilustracin 50, la hoja de estilos se guarda en un archivo llamado estilo.css. Cmo se convoca el archivo de estilo? En el head de la pgina HTML se escribe la siguiente lnea: <link rel="StyleSheet" href="nombre del archive de estilos.css" type="text/css"> Ejemplo: Pgina HTML <html> <head> <title>CSS9</title> <link rel="StyleSheet" href="css/estilos.css" type="text/css"> </head> <body> <h1>hoja de estilo en archivo externo</h1> <b>Esta es una prueba de bold</b> <h2>Titulo a nivel 2</h2> <p> Esta es una <b>prueba de parrafo (con bold)</b> </p> <h3>titulo a nivel 3</h3> </body> </html> Hoja de estilos.css

Ilustracin 51: Hoja de estilo en archivo externo

Taller de Herramientas bsicas para programar en la Web

Pgina 44

body { color:#ff0000; font-family:verdana; } p b{ color:#0000ff; } h1 b{ color:#ff0000; } h1{ color:#00ff00; } h2{ color:#0000ff; }

Grfico como fondo Para establecer un grfico como fondo en una hoja de estilos se una el tag: background-image: url(foto.gif); es necesario establecer el atributo url antes de la direccin en donde se encuentra la imagen. Ejemplo: HTML <html> <head> <link rel="stylesheet" href="css/ej7.css" type="text/css"> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ej7.css body { color:#0000ff; font-family:verdana; background-image: url(../img/fondo.gif); } h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h2 i{

Taller de Herramientas bsicas para programar en la Web

Pgina 45

color: #00ff00; word-spacing: 30px; text-transform: uppercase; }

background-repeat:repeat-x; }

Ilustracin 52: Ejemplo con imagen de fondo

Repetir o no la imagen Fondo.html <html> <head> <title>fondo</title> <link rel= "StyleSheet" href= fondo.css" type= "text/css"> </head> <body> </body> </html> Fondo.css body { background-image:url(../img/bullet.jpg);
Ilustracin 53: background-image repeat

Estilos mediante una clase


Se usa cuando se necesita definir un conjunto de reglas de estilo para un conjunto de marcas HTML, es conveniente plantear una regla con un nombre genrico que posteriormente se puede aplicar a varias marcas de HTML, a este nombre genrico se le llama clase. Lo que se podra graficar de la siguiente manera:

Taller de Herramientas bsicas para programar en la Web

Pgina 46

Ilustracin 54: uso de clases

Las clases siempre comienzan con un punto y se declaran en la hoja de estilos, por ejemplo: .visible{ color:#000000; background-color:#ffff00; font-style:italic; } Cmo se las convoca desde una pgina HTML? Desde cada tag HTML, se las convoca como class acompaadas del nombre, por ejemplo: <h1 class="visible">1 - Que son las hojas de estilo (CSS)?</h1> <b class="visible">CSS son las siglas de Cascade Style Sheet</b> En este caso se llama a la clase visible desde un tag h1 y desde un tag b. Ejemplo: HTML <html> Taller de Herramientas bsicas para programar en la Web

<head> <link rel="stylesheet" href="css/ej8.css" type="text/css"> </head> <body> <h1 class="visible">Encabezado 1</h1> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p class="visible">USADO CON OTRO TAG</p> <b class="visible">uso en una negrita</b><br> Ahora usaremos en una ittica<br> <i class="visible">uso en una itlica</i> </body> </html> CSS h2 i{ color: #00ff00; word-spacing: 30px; text-transform: uppercase; } pb{ color: #ff0000; letter-spacing: 10px; text-transform:capitalize; } .visible{ color:#000000; background-color:#CC6600; font-style:italic;

Pgina 47

Ilustracin 55: uso de clases

Estilo mediante id
Como se muestra en la siguiente ilustracin, el id se declara mediante el signo numeral (#), y se lo convoca mediante el tag <div id=nombre>. En las primeras pginas de este apunte se mencion el tag div para establecer la alineacin de un bloque de texto, pues bien ahora se lo usa para establecer el estilo de un bloque.

Ilustracin 56: estilos mediante el uso de id

Bordes
Cada vez que se establece un estilo, como se puede apreciar en los casos en que el fondo es de color, se genera un rectngulo, por tanto se pueden establecer bordes de diferentes maneras, como se apreciar en la siguiente ilustracin:

Taller de Herramientas bsicas para programar en la Web

Pgina 48

BORDE.CSS
.titulopagina { background-color:#ffffcc; text-align:center; font-family:verdana; font-size:40px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:2px; border-top-style:dotted; border-right-style:solid; border-bottom-style:double; border-left-style:dashed; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; }

Ilustracin 57: diferentes tipos de bordes

Padding
En este caso todos los bordes son diferentes HTML
<html><head> <title>borde</title> <link rel="StyleSheet" href="css/borde.css" type="text/css"> </head> <body> <h1 class="titulopagina">Federico Garcia Lorca</h1>

Padding significa almohadilla, y es el espacio entre el contenido del tag y el borde, se puede configurar los espacios en general usando simplemente padding, o en cada borde:
padding-top padding-right padding-bottom padding-left

Taller de Herramientas bsicas para programar en la Web

Pgina 49

background-color: #000000; } .biografia { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:40px; }

Propiedades de lista
Como se dijo en el captulo 1, las listas son muy usadas para enumerar elementos, CSS ayuda a manejar los formatos estndares HTML. La siguiente ilustracin muestra las distintas propiedades que se manejan en CSS.

Ilustracin 58: Padding

HTML
<html><head> <title>padding</title> <link rel="StyleSheet" href="css/epadding.css" type="text/css"> </head> <body> <h1>class biografia usando padding</h1> <p class="biografia"> Naci en el municipio de Fuente Vaqueros,.</p> Epadding.css body { color:#0000ff; font-family:verdana;

Taller de Herramientas bsicas para programar en la Web

Pgina 50

Ilustracin 59: Lstas en CSS

En la siguiente figura, se muestra un ejemplo:


Ilustracin 60: uso de listas

Ilustracin 61: vista en el browser

Taller de Herramientas bsicas para programar en la Web

Pgina 51

Fondo de pantalla
Se puede establecer un color, o una imagen a repetir o establecer en una determinada posicin, fjarla o dejar que se mueva al bajar el cursor, se explica en la siguiente ilustracin:

Ilustracin 63: declaracin y uso del selector universal

Ilustracin 62: formateo de Background

Uso del selector universal


Se usa como un comodn y abarca todos los tags, mientras no se diga lo contrario, se inicia con el signo asterisco *. La siguiente figura muestra el uso del selector universal:

Taller de Herramientas bsicas para programar en la Web

Pgina 52

Selector universal como contexto:

Pseudoclases
Son las que se aplican generalmente a las anclas o hipervnculos a, con ellas se puede crear un men sencillo:

Ilustracin 64: Resultado en el browser del uso del selector universal como contexto

Taller de Herramientas bsicas para programar en la Web

Pgina 53

CSS a:link{ background-color:#00ff00; color:#ff0000; text-decoration:none; } a:visited{ background-color:#000000; color:#ffffff; text-decoration:none; } a:hover{ background-color:#ff00ff; color:#fffff; } a:active{ background-color:#ff0000; color:#ffff00; } Men Vertical ESTILOS.CSS #menu { font-family: Arial; } #menu p { margin:0px;

Men sencillo HTML <html> <head> <title>Pseudo</title> <link rel="StyleSheet" href="css/pseudo.css type="text/css"> </head> <body> <a href="http://www.google.com">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">Msn</a> </body> </html>

Taller de Herramientas bsicas para programar en la Web

Pgina 54

padding:0px; } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eeeeee; text-align:center; } #menu a:link, #menu a:visited { color: #ff0000; text-decoration: none; } #menu a:hover { background-color: #336699; color: #ffffff; } MENUV.HTML Cada opcin del men se encuentra en un prrafo. <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body>

<div id="menu"> <p><a href="http://www.google.com">Google</a></p> <p><a href="http://www.yahoo.com">Yahoo</a></p> <p><a href="http://www.msn.com">Msn</a></p> <p><a href="http://www.altavista.com">Altavista</a></p> </div> </body> </html>

Ilustracin 65: Muestra Men Vertical

Men horizontal Menuh.css


#menuh {

Taller de Herramientas bsicas para programar en la Web

Pgina 55

float:right; width:100%; padding:0px; margin:0px; list-style-type:none; } #menuh a { float:left; width:100px; text-decoration:none; text-align:center; color:#ff0000; background-color:#f7f8e8; padding:3px 5px; border-right:1px solid white; } #menuh a:hover { background-color:#336699; } #menuh li { display:inline; }

<a href="http://www.yahoo.com">Yahoo</a> </li> <li> <a href="http://www.msn.com">Msn</a> </li> <li> <a href="http://www.altavista.com">Altavista</a> </li> </ul> </body> </html>

Menuh.html
En este caso el men est en una lista desordenada. <html> <head> <title>menuh</title> <link rel="StyleSheet" href="css/menuh.css" type="text/css"> </head> <body> <ul id="menuh"> <li> <a href="http://www.google.com">Google</a> </li> <li>
Ilustracin 66: Muestra de Men Vertical

Posicionamiento
Position es la propiedad que establece el punto de referencia donde se debe localizar cada elemento HTML. Puede tomar los valores Static y relative. Se inicializa con el valor static en donde cada elemento se localiza de izquierda a derecha y de arriba hacia abajo.

Taller de Herramientas bsicas para programar en la Web

Pgina 56

Relative: En este caso se puede modificar la posicin por defecto del elemento HTML estableciendo los valores left y top. Ejemplo de Posicin Relativa: Relativa.css

#caja1,#caja3 { background-color:#c99; font-family:verdana; font-size:1.3em; } #caja2 { background-color:#cc9; border-style:dotted; font-weight:bolder; position:relative; left:25px; top:30px; }

<p>Se desplaza 25 pxeles a la derecha y 30 hacia abajo de su posicin por defecto.</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza.</p> </div> </body> </html>

Left: desplaza a la derecha Right: desplaza a la izquierda Top: a partir del elemento anterior

Relativa.html <html> <head> <title>ej13</title> <link rel="StyleSheet" href="css/relativa.css" type="text/css"> </head> <body>
Ilustracin 67: ejemplo de posicionamiento

<div id="caja1"> <p>Esta es la primer caja.</p> <p>No se desplaza.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.</p>

Posicionamiento absoluto Position: absolute Establece un elemento HTML fuera del flujo de la pgina, no se reserva espacio en el flujo del documento como es el caso del posicionamiento relativo (recordemos que con este posicionamiento

Taller de Herramientas bsicas para programar en la Web

Pgina 57

podemos desplazar el elemento a cualquier parte de la pgina, pero el espacio por defecto para dicho elemento queda vaco). El posicionamiento absoluto es siempre con respecto a la pgina y no al elemento anterior, como en el relativo. Ejemplo de posicionamiento absoluto: #caja1,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; } #caja2 { background-color:#ff0; font-size:1.3em; position:absolute; left:40px; top:30px; }

Disposicin en dos columnas


Actualmente el uso de frames ha pasado a un segundo plano, aunque en conexiones lentas es conveniente trabajar con ellos, de manera que solo se modifique la pgina de contenido y no aparece una pantalla blanca cuando carga el contenido. En este momento es muy frecuente trabajar con hojas de estilo combinadas con tablas. Ejemplo simple: *{ margin:0px; Limpia margen y padding padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; }

Ilustracin 68: Ejemplo de posicionamiento absoluto

Taller de Herramientas bsicas para programar en la Web

Pgina 58

float:right; } En la pgina HTML se tendr: <body> <img src="../img/fondo08_chico.jpg"> <p>Texto ten largo como se desee </p> </body>

Ilustracin 69: Ejemplo de pgina en dos columnas

Propiedad Float
La propiedad float saca del flujo un elemento HTML. Esta propiedad admite tres valores: Left, right, None Cuando aplicamos esta propiedad a la marca img, se puede hacer que el texto envuelva a la imagen. Float con imagen En el ejemplo siguiente, se muestra la imagen hacia la derecha: Float.css img {
Ilustracin 70: Ejemplo de propiedad float

Disposicin en dos columnas con float

Taller de Herramientas bsicas para programar en la Web

Pgina 59

*{ margin:0; padding:0; } #columna1 { float:left; width:200px; background-color:#ff5; border:1px solid #555; } #columna2 { margin-left:210px; background-color:#ffb; border:1px solid #555; } La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos envuelva a la columna uno en caso de ser ms larga inicializamos margin-left con 210 pixeles. Pgna HTML .. <div id="contenedor"> <div id="cabecera"> <h1>Aca el ttulo de la pgina</h1> </div> <div id="columna1"> <p>Aqu el contenido de la columna 1.</p>

</div> <div id="columna2"> <p>Aqu el contenido de la columna2. </p> </div> <div id="pie"> Pi de pgina. </div> </div> .

Ilustracin 71: propiedad float para dos columnas

La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos envuelva a la columna uno en caso de ser ms larga inicializamos margin-left con 210 pixeles. Dos Columnas, Cabecera y Pie Una estructura comn en la web es la disposicin de una cabecera de pgina, seguida de dos columnas y un pie de pgina. Ejemplos: Completo.html

Taller de Herramientas bsicas para programar en la Web

Pgina 60

<html><head> <title>ej18</title> <link rel="StyleSheet" href=css/complete.css" type="text/css"> </head><body> <div id="cabecera"> <h1>Aca el ttulo de la pgina</h1> </div> <div id="columna1"> <p>columna1. columna1. columna1.</p> </div> <div id="columna2"> <h2>Ttulo de la columna</h2> <p>Contenido de la columna2. </p> </div> <div id="pie"> Pi de pgina. </div> </body> </html> completo.css *{ margin:0px; padding:0px; } #cabecera { padding:10px;

color:#fff; background-color:#bcbcbc; clear:left; } #columna1 { float:left; width:200px; margin:0; padding:1em; } #columna2 { margin-left:210px; border-left:1px solid #aaa; padding:1em; } #pie { padding:10px; color:#fff; background-color:#bcbcbc; clear:left; }

Taller de Herramientas bsicas para programar en la Web

Pgina 61

<div id="cabecera"> <h1>Cancionero</h1> </div> <div id="columna1"> <div id="menu"> <p><a href="ej19_sabina.html">19 das</a></p> <p><a href="ej19_serrat.html">Elega</a></p> <p><a href="ej19_cerati.html">Zona de Promesas</a></p> <p><a href="ej19_gieco.html">Cinco siglos igual</a></p> </div> </div> <img src="img/serrat.jpg"> <div id="columna2"> <pre> <h2>Elega</h2> (Miguel Hernndez - Joan Manuel Serrat)
Ilustracin 72: Esquema completo 2 Columnas, cabecera y pie de pgina

Ejemplo con imagen y men: 1. Disear la pgina, respondiendo a dos preguntas bsicas: a. Qu queremos mostrar?, Cmo deseamos que navegue el visitante? 2. Crear una plantilla CSS 3. Crear las pginas que se vinculen a esa plantilla. En el siguiente ejemplo, cuatro pginas convocan a una misma hoja de estilos y son las que se linkean en el men. Cancionero.html
<html> <head> <title>Serrat</title> <link rel="StyleSheet" href= "css/cancionero.css" type="text/css"> </head> <body>

(En Orihuela, su pueblo y el mo, se nos ha muerto como del rayo Ramn Sij, con quien tanto quera...)

. Cancionero.css *{ margin:0px; padding:0px; } #cabecera { padding:10px; color:#fff; background-color:#becdfe; clear:left;

Taller de Herramientas bsicas para programar en la Web

Pgina 62

text-align:center; } #columna1 { float:left; width:200px; margin:0; padding:1em; } #columna2 { margin-left:210px; width:200px; border-left:1px solid #aaa; padding:1em; } img { float:right; } #pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; } #menu { }

font-family: Arial;

#menu p { margin:0px; padding:0px; } #menu a { display: block; padding: 3px; width: 160px; background-color:#f7f8e8; border-bottom: 1px solid #eeeeee; text-align:center; } #menu a:link, #menu a:visited { color: #ff0000; text-decoration: none; } #menu a:hover { background-color: #336699; color: #ffffff; }

Taller de Herramientas bsicas para programar en la Web

Pgina 63

font-style font-variant font-weight font-size

letter-spacing . Texto <Text> Atributo word-spacing letter-spacing text-decoration vertical-align


Ilustracin 73: Ejemplo con dos columnas, pie, cabecera, imagen y men

normal ; italic ; oblique ; normal ; small-caps ; normal ; bold ; bolder ; lighter ; 100..500..900 ; xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large ; 10px (unidad de medida en px)

text-transform text-align line-height word-spacing . Fondo <Background> Atributo color background-color

TABLA DE PROPIEDADES CSS


Todo lo que se vio en este captulo se puede resumir en las siguientes tablas de propiedades. Fuente <Font> Atributo font-family Valores arial ; sans-serif ; helvetica ; verdana... ;

Valores normal y unidades de medida CSS ; normal y unidades de medida CSS ; none ; [ underline ; overline ;; line -through ] ; baseline ; sub ; super ; top ; texttop ; middle ; capitalize ; uppercase ; lowercase ; none; left ; right ; center ; justify ; normal y unidades de medida CSS ; 10px (unidad de medida en px)

Valores color, nombre o valor RGB ; color, nombre o valor RGB ;

Taller de Herramientas bsicas para programar en la Web

Pgina 64

background-image background-repeat background-attachment background-position . Clasificacin Atributo display white-space list-style-type

URL - nombre de la imagen con path relativo o absoluto ; repeat-x ; repeat-y ; no-repeat ; repeat ; scroll ; fixed ; top ; center ; bottom ; left ; right ; unidades de medida CSS ;

padding border-top-width border-right-width border-bottom-width border-left-width border-width

list-style-image list-style-position Marco <Box> Atributo margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left

Valores block ; inline ; list-item ; none ; normal ; pre ; nowrap ; disc ; circle ; square ; decimal ; lower-roman ; upper-roman ; lower-alpha ; URL - nombre de la imagen con path relativo o absoluto ; inside ; outside ;

border-color border-style border-top border-right border-bottom border-left

Valores unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ; unidades de medida CSS ;

border width height float clear

unidades de medida CSS ; thin ; medium ; thick ; unidades de medida CSS ; thin ; medium ; thick ; unidades de medida CSS ; thin ; medium ; thick ; unidades de medida CSS ; thin ; medium ; thick ; unidades de medida CSS ; thin ; medium ; thick ; unidades de medida CSS ; color, nombre o valor RGB ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; auto ; unidades de medida CSS ; auto ; unidades de medida CSS ; left ; right ; none ; left ; right ; none ; both ;

Taller de Herramientas bsicas para programar en la Web

Pgina 65

MODULO IV: JavaScript


JavaScript es un lenguaje de scripting orientado a objetos, utilizado para acceder a objetos en aplicaciones. Es utilizado, integrado en un navegador web permitiendo el desarrollo de interfaces de usuario mejoradas y pginas web dinmicas.

Etc. Lo importante es que, sin necesidad de realizar ninguna transmisin de datos por la red, se puede realizar una accin sobre la pgina.

Javascript En Documentos Html


El cdigo JavaScript se puede ubicar en en <body>, en el <head> o en pgina separada. JavaScript en el body <HTML> <HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> </HEAD> <BODY> <b>Esto es texto norrnal de un documento HTML</b> <SCRIPT LANGUAGE="JavaScript"> alert("Esto es cdigo JavaScript en el body"); </SCRIPT> <b>Esto es, de nuevo, HTML</b> </ BODY> </HTML> JavaScript en el head <HTML>

Contexto Cientes-Servidor
Cuando el cliente Web solicita una pgina, el servidor enva por la red, al cliente, el contenido completo del documento, incluyendo todos los cdigos HTML y las sentencias JavaScript que pudieran existir en ste.

Aplicaciones frecuentes
Modificacin de los contenidos y apariencia de la pagina web. Validacin de informacin introducida por el usuario. respuesta a eventos de usuario.

Taller de Herramientas bsicas para programar en la Web

Pgina 66

<HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"> alert("Esto es cdigo JavaScript en el body"); </SCRIPT> </HEAD> <BODY> <b>Esto es texto norrnal de un documento HTML</b> <b>Esto es, de nuevo, HTML</b> </ BODY> </HTML> JavaScript en pgina separada

Taller de Herramientas bsicas para programar en la Web

Pgina 67

Ilustracin 74: Todos los casos presentados, entregan la misma respuesta

Variables en JS
Una variable es un smbolo que representa un elemento no especificado de un conjunto dado o El valor que guarda esa variable es un elemento de ese conjunto dado

Operadores
De asignacion: = Valor=4 Valor=esto es una variable x+=y x=x+y x-=y x=xy x*=y x=x*y x%=y x=x%y x/=y x=x/y De comparacin

No tipadas JavaScript dispone de tipos de datos pero por su naturaleza, las variables pueden pasar de contener un tipo de dato a otro tipo (por tanto, no es necesario especificar el tipo de dato)

Taller de Herramientas bsicas para programar en la Web

Pgina 68

== != >=

Devuelve true si son iguales } Devuelve true si son distintos Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha Devuelve true si la variable de la derecha es mayor o igual que la variable de la izquierda

acciones2

acciones2; break; ......... case valorN: accionesN; break; default acciones; }

<=

Tabla 4: Operador de comparacin

Tabla 6: Estructura de Control

Seleccin

Lgicos && || ! AND OR NOT

Tabla 5: Operadores lgicos

Estructuras de Control
De seleccin if(condicin) { acciones1 } else { switch(variable) { case valor1: acciones1; break; case valor2:

Estructura if: Si se cumple condicin entonces realice acciones1 de lo contrario(else) realice acciones2 Estructura switch(variable): Este es el caso en que la variable puede tomar un abanico de valores, en caso que tome un determinado valorN realizar las accionesN. Si la variable no toma ningn valor declarado, realiza las acciones establecidas por el valor default. En cada case se le debe decir al switch que realice un salto (break), de modo que no siga realizando las acciones dadas por los siguientes valores de case. Bucles (iteraciones) for(inicio;final;incremento) { acciones }
Tabla 7: Estructura de Control Bucle for

Este bucle establece una o varias acciones que se repiten un nmero determinado de veces.

Taller de Herramientas bsicas para programar en la Web

Pgina 69

while(condicin) { acciones } Mientras verdadera acciones. la condicin debe realizar

Do { acciones } while(condicin) sea Realice acciones mientras las condicin sea verdadera.

Document.write document.write: Escribe texto en el documento document.write(texto) isNaN isNaN: evala un argumento para determinar si ste no es un nmero isNaN(Valor_a_probar) confirm Confirm: Muestra un mensaje y dos botones: aceptar y cancelar. Al pulsar aceptar devuelve true y con cancelar, false Confirm(mensaje para el usuario)

la

Tabla 8: Bucle While

La diferencia entre el bucle while y el do..while es que en el segundo realiza las acciones al menos una vez.

Funciones Predefinidas
Slo algunas Alert Muestra el contenido de lo que le pasamos en una ventana con un botn de aceptar. Alert(cadena de texto);

Ilustracin 76: Funcin Confirm

<HTML> <HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> </HEAD> <BODY> <br><br><br><br><br><br><br><br> <center> <script languaje="javascript"> respuesta=confirm("pulse um boton por favor"); if (respuesta)

Ilustracin 75: Funcin Alert

Taller de Herramientas bsicas para programar en la Web

Pgina 70

document.write("Ud. pulso el boton aceptar"); else document.write("Ud. pulso el boton cancelar"); </script> </center> </BODY> </HTML>
Tabla 9: cdigo haciendo uso de la estructura if y de la funcin confirm

document.write("el valor ingresado es: "+valor); </script> </center> </BODY> </HTML>


Tabla 10: Cdigo de uso de Promt e if

Prompt prompt: muestra una ventana donde podemos escribir un valor, de modo que despus pueda ser asignado a una variable variable=prompt(mensaje);

Funciones en JavaScript
Qu es una funcin?
Es una serie de instrucciones que realizan una tarea especfica, de manera independiente. function nombreFuncin([parmetros]) { acciones [return resultado] }
Tabla 11: Declaracin de funciones

Ilustracin 77: Funcin prompt

<HTML> <HEAD> <TITLE>Primer ejemplo de JavaScript</TITLE> </HEAD> <BODY> <br><br><br><br><br><br><br><br> <center> <script languaje="javascript"> valor=prompt("ingrese un valor");

En el siguiente ejemplo se hace uso de la funcin predefinida: document.write y de una funcin declarada en la pagina HTML que muestra la tabla de la figura:

Taller de Herramientas bsicas para programar en la Web

Pgina 71

<html> <head>

<title></title> <SCRIPT LANGUAJE="JavaScript"> //function tabla function tabla() { document.write("<center><H1>Tabla de Promedios</H1></center>"); document.write("<table whidth=50% align='center' border=1 bgcolor='#CCCCCC'>"); document.write("<tr align='center'><td></td><td width=250><strong>Equipo</strong></td><td width=20><strong>Promedio</strong></td></tr>") for(i=1;i<=20;i++) { document.write("<tr><td>"+i+"</td><td>&nbsp;</td> <td>&nbsp;</td></tr>"); } document.write("</table>"); } </SCRIPT> </head> <body> <SCRIPT LANGUAJE="JavaScript"> tabla(); </SCRIPT> </body> </html>
Tabla 12: Declaracin y llamado a funcin

Declara funcin

<title></title> <SCRIPT LANGUAJE="JavaScript"> function potencia(base,exp) { var result result=1; for(i=1;i<=exp;i++) { result=result*base; } return result } </SCRIPT> </head> <body>

Funcin con 2 parmetros

Valor de retorno

Llamado a la funcin

<SCRIPT LANGUAJE="JavaScript"> var base=eval(prompt("ingrese la base",1)); var exponente=eval(prompt("ingrese el exponente",1)); var resultado= potencia(base,exponente);

Llamado a la funcin

document.write("<br><br><br><br><br><br><br><br><br><br> <br><br><br><center>"); document.write("resultado: "+resultado+"</center>"); </SCRIPT>

</body> </html>

El valor de retorno se guarda en la variable resultado

Tabla 13: Declaracin y llamado a funcin que calcula la potencia de un nmero

<html><head>

Taller de Herramientas bsicas para programar en la Web

Pgina 72

Funciones con mltiples retornos


En una misma funcin podemos colocar ms de un return. Lgicamente slo vamos a poder retornar una cosa.

Ambito de las variables


Dentro de las funciones podemos declarar variables, incluso los parmetros son variables, que se inicializan al llamar a la funcin. Todas las variables declaradas en una funcin son locales a esa funcin El siguiente ejemplo muestra cmo el valor de la variable adopta un valor dentro de la funcin, que cambia fuera de ella.

<html> <head> <title></title> <SCRIPT LANGUAJE="JavaScript"> function multipleReturn(numero){ var resto = numero % 2 if (resto == 0) return 0 else return numero } </SCRIPT> </head> <body> <SCRIPT LANGUAJE="JavaScript"> num=eval(prompt("ingrese un numero",0)); /*Llama a la funcin ingresando como parmetro el nmero num ingresado*/ devuelto=multipleReturn(num); document.write("<br><br><br><br><br><br><br><br><br><br> <br><br><br><center>"); document.write("el valor devuelto es "+devuelto+"</center>"); </SCRIPT>

Retorna un valor u otro dependiendo del resto del cociente

<html> <head> <title></title> <SCRIPT LANGUAJE="JavaScript"> function prueba(variable) { variable="pepe"; document.write("dentro de la funcion, variable= "+variable+"<br>"); } </SCRIPT> </head> <body> <SCRIPT LANGUAJE="JavaScript"> variable="hola" document.write("antes, variable = "+variable+"<br>"); prueba(variable); document.write("despues, variable = "+variable+"<br>"); </SCRIPT>

</body> </html>
Tabla 14: Funcin con mltiples retornos

</body> </html>
Tabla 15: Ambito de las variables

Taller de Herramientas bsicas para programar en la Web

Pgina 73

Ilustracin 78: Vista del ejemplo en el browser Ilustracin 79: Jerarqua de objetos

Objetos del Navegador


Jerarqua de Objetos
Cuando se carga una pgina, el navegador crea una jerarqua de objetos en memoria Con JavaScript podemos trabajar con esa jerarqua de objetos, acceder a sus propiedades e invocar sus mtodos.

Relacin objetos tags HTML


1. + document <BODY> ... </BODY> 1.1. anchor <A NAME="..."> ... </A> 1.2. - form <FORM> ... </FORM> 1.2.1.+ button <INPUT TYPE="button"> 1.2.2.+ checkbox <INPUT TYPE="checkbox"> 1.2.3.+ fileUpload <INPUT TYPE="file"> 1.2.4.+ hidden <INPUT TYPE="hidden"> 1.2.5.+ password <INPUT TYPE="password"> 1.2.6.+ radio <INPUT TYPE="radio">

Taller de Herramientas bsicas para programar en la Web

Pgina 74

1.2.7.+ reset <INPUT TYPE="reset"> 1.2.8.+ select <SELECT> ... </SELECT> 1.2.8.1. options <INPUT TYPE="option"> 1.2.9.+ submit <INPUT TYPE="submit"> 1.2.10. + text <INPUT TYPE="text"> 1.2.11. + textarea <TEXTAREA> ... </TEXTAREA> 1.3. - image <IMG SRC="..."> 1.4. - link <A HREF="..."> ... </A>

<head> <title>Taller de Herramientas...</title> </head> <body> <SCRIPT LANGUAJE="JavaScript"> document.write("<P>"+window.location); window.print(); texto = "Utilizas el navegador " + window.navigator.appName + " versin " + navigator.appVersion + " bajo el sistema operativo " + navigator.oscpu;

Cmo usar un objeto?


La forma de acceder a una propiedad de un objeto es la siguiente:

nombreobjeto.propiedad
Ejemplos: <HTML> <HEAD> <TITLE>Prueba bgColor</TITLE> </HEAD> <BODY bgcolor=white> <script> document.bgColor = "red" </script> </BODY> </HTML>
Tabla 16: Ejemplo de color de fondo de un documento

alert(texto);
</SCRIPT>

</body> </html>
Tabla 17: uso de propiedades en diferentes objetos

<html> <head> <title></title> </head> <body> <br><br><br><br><br><br><br><br> <center> <img src='' name='foto1' border=4> <img src='' name='foto2' border=4> Pgina 75

<html>

Taller de Herramientas bsicas para programar en la Web

</center> <SCRIPT LANGUAJE="JavaScript">

Objeto history 1. Este objeto se encarga de almacenar una lista con los sitios por los que se ha estado navegando. 2. El mtodo go(n) se usa para navegar el historial. a. n es 1 o -1 dependiendo de la direccin en la que se desea recorrer o un entero que representa la posicin dentro del historial history.go(-1) b. back(), forward() Objeto document El objeto document es el que tiene el contenido de toda la pgina que se est visualizando. Esto incluye el texto, imgenes, enlaces, formularios,etc bgColor. Propiedad que almacena el color de fondo del documento fgColor. En esta propiedad tenemos el color del primer plano images. Array con todas las imgenes del documento linkColor. Propiedad que almacena el color de los enlaces vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados write() Escribe texto en el documento open(). Abre la escritura sobre un documento getElementById() referencia un objeto por su id

document.images.foto1.src='sabato.jpg' document.images.foto2.src='benedetti.jpg'
</SCRIPT>

</body> </html>
Tabla 18: uso de la propiedad images

Window (objeto default)


Algunas propiedades o history. Se trata de un array que representa las URLS visitadas por la ventana (estn almacenadas en su historial). o location. Cadena con la URL de la barra de direccin. Algunos metodos o alert(),prompt(),confirm() o open(url, nombre, caractersticas). abre la url que le pasemos como primer parmetro en una ventana de nombre 'nombre'
Tabla 19: Propiedades y mtodos del objeto window

El objeto por default es Window, por lo tanto da lo mismo escribir window.alert() o solo alert(). Taller de Herramientas bsicas para programar en la Web Pgina 76

Formularios
Qu es un formulario en HTML?
Es un objeto que contiene controles destinados principalmente a recopilar informacin del usuario. Se usan las etiquetas <FORM></FORM>

b)

Atributos
<form action = "ruta_programa": Indica el URL al que se enviaran los datos. method = " POST / GET " : Indica el mtodo segn el que se van a transferir las variables del formulario: POST enva los datos, directamente al programa. Con GET los datos son encadenados al URL especificado en action

c)

Elementos de un formulario
Etiqueta <INPUT> Define gran cantidad de los elementos de un formulario 1) El atributo type= define qu elemento es el que estamos introduciendo y que otros atributos son vlidos a) text: sirve para introducir una caja de texto simple i) Atributos: (1) maxlenght=" n ", que fija el nmero mximo de caracteres que se pueden itroducir (2) size=" n ", que establece el tamao (3) value=" texto ", que establece el valor por defecto

d)

e)

(4) disabled, que desactiva la caja de texto radio: define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por uno solo de ellos i) Atributos: (1) value =" valor ", define un valor posible de la variable para cada una de las opciones (2) checked, marca por defecto (3) disabled, desactiva la opcin checkbox: define una o ms casillas de verificacin, pudiendo marcar el usuario las que desee del conjunto total i) Atributos: (1) value =" valor ", define un valor posible de la variable para cada uno de casillas de verificacin (2) checked, marca por defecto (3) disabled, que desactiva la casilla de verificacin button: define un botn estandar. i) Atributos: (1) value=" valor ", que define el texto que va a figurar en el botn image: introduce un botn definido por una imagen i) Atributos: (1) src= " ruta imagen ", que establece la ruta dnde localizar el fichero de imagen. (2) width= " w ", fija la anchura del botn de imagen. (3) height= " h ", fija la altura del botn de imagen

Taller de Herramientas bsicas para programar en la Web

Pgina 77

f) password: define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecer como asteriscos i) Atributos: (1) Igual a los de text g) hidden: define un campo no visible en pantalla i) Atributos: (1) name=" nombre", asigna un nombre identificador nico al campo oculto. (2) value=" valor ", va a ser un valor fijo que se le va a pasar al programa del servidor, ya que el usuario no puede modificarlo h) file: define un archivo que puede ser enviado junto con los datos del formulario i) submit: Incorpora al formulario un botn de envo de datos i) Atributos: (1) value=" valor ", que define el texto que va a aparecer en el botn de envo (2) disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa j) reset: define un botn que al ser pulsado por el usuario borra todos los datos que hubiera introducido en cualquiera de los campos del formulario Etiqueta <SELECT>..</SELECT> Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable 1) Atributos: Taller de Herramientas bsicas para programar en la Web

a) name=" nombre", que asigna un nombre identificador al campo b) size= " n ", con n entero, que define el nmero de opciones visibles c) multiple, que permite elegir varias de las opciones a la vez d) disabled, que desactiva la lista 2) Para cada una de las opciones se usa la etiqueta <OPTION> a) Atributos: i) value, que fija el valor que ser asociado al parmetro name de <SELECT> ii) selected, que establece la opcin por defecto Etiqueta <TEXTAREA></TEXTAREA> Inserta una caja de texto de mltiples lneas 1) Atributos: a) cols=" x ", define el nmero de columnas visibles de la caja de texto b) rows= " y ", define el nmero de filas visibles de la caja de texto Ejemplo de Formulario
<html> <head> <title></title> </head> <body bgcolor="#DDBBDD"> <form action="mailto:direccion@correo.com" method="post" enctype="text/plain"> <table border="1" align="center"> <tr height="50"> <td>Nombre</td> <td> <input name="nombre" type="Text" size="50" maxlength="20">

Pgina 78

</td> </tr> <tr height="50"> <td>apellidos</td> <td> <input type="text" name="apellidos" size="50"> </td> </tr> <tr height="50"> <td>f. nacimiento </td> <td> <input name="f_n" type="text" size="18" maxlength="18"> </td> </tr> <tr height="50"> <td>calle y nmero</td> <td> <input type="text" name="domicilio" size="48" maxlength="48"> </td> </tr> <tr height="50"> <td>cdigo postal</td> <td> <input type="text" name="cp" size="5" maxlength="5"> </td> </tr> <tr height="50"> <td>provincia</td> <td> <select name='provincia' size=3> <option value="Salta">Salta <option value="Santiago del estero">Santiago del Estero <option value="Catamarca">Catamarca

<option value="Jujuy">Jujuy <option value="Tucuman">Tucuman <option value="Bs As">Buenos Aires <option value="Chaco">Chaco <option value="Sta Fe">Santa Fe <option value="Mza">Mendoza </select> &nbsp; &nbsp; Telfono <input type="text" name="telefono" size="9" maxlength="9"> </td> </tr> <tr height="50"> <td>Sexo</td> <td>Hombre <input type="radio" name="sexo" value="H"> Mujer <input type="radio" name="sexo" value="M"> Estado Civil <select name="estado_civil"> <option>Soltero <option>Casado <option>Divorciado <option>Otro </select> <td> </tr> <tr height="50"> <td>Idiomas</td> <td> <input type="checkbox" mane="idiomas" value="E"> Espaol <input type="checkbox" mane="idiomas" value="F"> Francs <input type="checkbox" mane="idiomas" value="I"> Ingls <input type="checkbox" mane="idiomas" value="A">

Taller de Herramientas bsicas para programar en la Web

Pgina 79

Alemn </td> </tr> <tr height="50"> <td>Comentarios <br> Personales</td> <td> <textarea name="coment" rows="2" cols="44"> </textarea> </td> </tr> <tr height="50"> <td>Pulse aqui</td> <td align="center"> <input type="submit" value="enviar los datos"> <input type="reset" value="borrar los datos"> </td> </tr> </table> </form>

</body> </html>
Tabla 20: formulario.html Ilustracin 80: vista del formulario en el navegador

Taller de Herramientas bsicas para programar en la Web

Pgina 80

Eventos
Qu es un evento?
Es un procedimiento que se ejecuta cuando el usuario realiza una accin determinada. (Por ejemplo: hacer click con el mouse, pasar el puntero del mouse sobre un objeto de la pgina)

onSelect

Seleccionar texto

<input type="text"> <textarea>

Tabla 21: tabla de eventos

Cmo usar los eventos?


<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mensaje() { alert("Se ha ejecutado el evento onMouseOver"); } </SCRIPT> </HEAD> <BODY> <A HREF="eventos.html" onMouseOver="mensaje()"> Pasa por aqu encima </A> </BODY> </HTML
Tabla 22: HTML con ejemplo de eventos

Eventos
Nombre onLoad onUnLoad onMouseOver onMouseOut Descripcin Terminar de cargarse una pgina Salir de una pgina Pasar el mouse por encima Que el mouse deje de estar encima Pulsar un elemento Objetos <body><frameset> <body><frameset> <a href> <a href>

onClick

<input type="button, checkbox, link, radio"> <input type="text"> <textarea>

onChange

Cambiar el contenido o perder el cursor

Taller de Herramientas bsicas para programar en la Web

Pgina 81

Anexo 1
<html> <head>

Ejemplo 2: En el head (influye en toda la pgina)

Trabajos prcticos
Hojas de Estilo en Cascada CSS Prcticos resueltos Ejemplo 1: En el Tag html <html> <head> <title> TAMAO DE FUENTE </title> </head> <body> <h1 style="color:#ff0000; background-color:#0000cc"> TAMAO h1 DE FUENTE </h1> <h2 style="color:#00ff00; background-color:#cc0000"> TAMAO h2 DE FUENTE </h2> <h3 style="color:#0000ff; background-color:#00cc00"> TAMAO h3 DE FUENTE </h3> <h4 style="color:#ffff00; background-color:#cccc00"> TAMAO h4 DE FUENTE </h4> <h5 style="color:#ff0000;background-color:#00cccc"> TAMAO h5 DE FUENTE </h5> <h6 style="color:#ffffff; background-color:#0000cc"> TAMAO h6 DE FUENTE </h6> </body> </html>

<title>Estilo en pagina</title> <!Declaracin de estilo--> <style type="text/css"> h1 {color:#ff0000; background-color:#ffff00 } h2 {color:#00ff00; background-color:#cc0000 } </style> <!Termina declaracin de estilos--> </head> <body> <h1>Primer ttulo</h1> <h2>Segundo ttulo</h2> </body> </html>

Taller de Herramientas bsicas para programar en la Web

Pgina 82

Ejemplo 3: Uso de estilos en Texto <html> <head> <title>Estilo en texto</title> <!Declaracin de estilo--> <style type="text/css"> h1 { color:#000000; background-color:#4080ff; font-family: courier new; font-style: italic; font-weight: lighter; font-variant: small-caps; } h2 {color:#00ff00; background-color:#cc0000 } </style> <!Termina declaracin de estilos--> </head> <body> <h1>Primer ttulo</h1> <h2>Segundo ttulo</h2> </body> </html> Ejemplo 3: Agrupacin de marcas

<html> <head> <title>Agrupacion de marcas</title> <style type=text/css> h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h1 { font-size:40px; } h2 { font-size:30px; } h3 { font-size:25px; } h4 { font-size:20px; } h5 { font-size:15px; } h6 { font-size:10px; } </style>

Taller de Herramientas bsicas para programar en la Web

Pgina 83

</head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado6</h6> </body> </html> Ejemplo 4: Propiedades relacionadas con el texto <html> <head> <style type="text/css"> h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h2 { color: #00ff00; word-spacing: 30px; text-transform: uppercase; } h3 { color: #aa0000; letter-spacing: 10px; text-transform:capitalize;

} </style> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2: con word-spacing</h2> <h3>Encabezado 3: con letter-spacing</h3> </body> </html> Ejemplo 5: Estilo en funcin del contexto <html> <head> <style type="text/css"> h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h2 i{ color: #00ff00; word-spacing: 30px; text-transform: uppercase; } pb{ color: #ff0000; letter-spacing: 10px; text-transform:capitalize; }

Taller de Herramientas bsicas para programar en la Web

Pgina 84

</style> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ejemplo 6: Hojas de Estilo en pgina separada Ej6.html <html> <head> <link rel="stylesheet" href="ej6.css" type="text/css"> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ej6.css h1,h2,h3,h4,h5,h6 { font-family: Verdana; background-color: #4080ff; } h2 i{ color: #00ff00; Taller de Herramientas bsicas para programar en la Web

word-spacing: 30px; text-transform: uppercase; } pb{ color: #ff0000; letter-spacing: 10px; text-transform:capitalize; } Ejemplo 7: Imgenes de fondo Ej7.html <html> <head> <link rel="stylesheet" href="ej7.css" type="text/css"> </head> <body> <h1>Encabezado 1</h1> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ej7.css body { color:#0000ff; font-family:verdana; background-image: url(img/fondo08.jpg); } h1,h2,h3,h4,h5,h6 {

Pgina 85

font-family: Verdana; background-color: #4080ff; } h2 i{ color: #00ff00; word-spacing: 30px; text-transform: uppercase; } Ejemplo 8: Clases ej8.html <html> <head><title>con clases</title> <link rel="stylesheet" href="css/ej8.css" type="text/css"> </head> <body> <h1 class="resaltado">Encabezado 1</h1> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ejemplo 8: ej8.css h2 i{ color: #00ff00; word-spacing: 30px; text-transform: uppercase; } pb{ color: #ff0000; Taller de Herramientas bsicas para programar en la Web

letter-spacing: 10px; text-transform:capitalize; } .resaltado{ color:#000000; background-color:#ff0000; font-style:italic; } Ejemplo 9: uso de id ej9.html <html> <head> <link rel="stylesheet" href="css/ej9.css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Encabezado 1</h1> </div> <p class="resaltado">parrafo con la clase declarada como resaltado</p> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ejemplo 9: ej9.css h2 i{ color: #00ff00; word-spacing: 30px;

Pgina 86

text-transform: uppercase; } pb{ color: #ff0000; letter-spacing: 10px; text-transform:capitalize; } .resaltado{ color:#000000; background-color:#ff0000; font-style:italic; } #cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; } Ejemplo 10: bordes ej10.html <html> <head> <link rel="stylesheet" href="css/ej10.css" type="text/css"> </head> <body> <h1 class="titulopagina">Encabezado con bordes</h1> <div id="cabecera">

<h1>Con id cabecera</h1> </div> <p class="resaltado">parrafo con la clase declarada como resaltado</p> <h2>Encabezado 2: <i>itlica diferente</i></h2> <p>En el prrafo <b>una negrita diferente</b></p> </body> </html> Ej10.css h2 i{ color: #00ff00; word-spacing: 30px; text-transform: uppercase; } pb{ color: #ff0000; letter-spacing: 10px; text-transform:capitalize; } .resaltado{ color:#000000; background-color:#ff0000; font-style:italic; } #cabecera { font-family:Times New Roman; font-size:30px; text-align:center;

Taller de Herramientas bsicas para programar en la Web

Pgina 87

color:#0000ff; background-color:#bbbbbb; } .titulopagina { background-color:#ffffcc; text-align:center; font-family:verdana; font-size:40px; border:groove; Ejemplo 12: estilo en tablas <html> <head> <title>ej12</title> <link rel="StyleSheet" href="css/ej12.css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. </caption> <thead> <tr> <th>Provincia</th><th>Enero</th><th>Febrero</th><th>M arzo</th> </tr> </thead> <tbody>

<tr> <th>Crdoba</th> <td>210</td><td>170</td><td>120</td> </tr> <tr> <th>Buenos Aires</th> <td>250</td><td>190</td><td>140</td> </tr> <tr> <th>Santa Fe</th> <td>175</td><td>140</td><td>120</td> </tr> </tbody> </table> <!cierra table--> </body> </html> Ejemplo 12 ej12.css caption { font-family:arial; font-size:15px; text-align: center; margin: 0px; font-weight: bold; padding:10px; }

Taller de Herramientas bsicas para programar en la Web

Pgina 88

table { border-collapse: collapse; } td { border: 1px solid #000; padding: .5em; background-color:#ed8f63; width:100px; text-align:center; } th { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 0.5em; background-color:#6495ed;; } thead th { background-color:#FF0000; color: #fff; } tbody th { font-family:arial; font-weight: normal;

background-color: #6495ed; color:#ff0; } Ejemplo 14: posicin ej14.html <html> <head> <title>Ej14</title> <link rel="StyleSheet" href="css/ej14.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> <p>No se desplaza.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.</p> <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en pxeles).</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza.</p> </div> </body> </html> Ej14.css

Taller de Herramientas bsicas para programar en la Web

Pgina 89

#caja1,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; } #caja2 { background-color:#ff0; font-size:1.3em; position:absolute; left:40px; top:30px; } Ejemplo 15: 2 columnas ej15.html <html> <head> <title>Ej15</title> <link rel="StyleSheet" href="css/ej15.css" type="text/css"> </head> <body> <div id="columna1"> Chiquiln de Bachn. </div> <div id="columna2"> Por las noches, cara sucia <br> de angelito con bluyn, <br>

vende rosas por las mesas <br> del boliche de Bachn. <br><br> Si la Luna brilla <br> sobre la parilla, <br> come luna y pan de holln.<br><br> Chiquiln, <br> dame un ramo de voz, <br> as salgo a vender <br> mis vergenzas en flor. <br> Baleme con tres rosas <br> que duelan a cuenta <br> del hambre que no entend.<br> Chiquiln. <br> </div> </body> </html> Ej15.css *{ margin:0px; padding:0px; } #columna1 { position:absolute; top:0px;

Taller de Herramientas bsicas para programar en la Web

Pgina 90

left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; } Mdulo JavaScript Trabajo Prctico N 1 1. realice una pagina web que contenga un Javascript que realice las siguientes tareas: a. asignar a 2 variables valores numricos y mostrar el resultado de la suma de las mismas en el cuerpo del documento . b. asignar a las mismas variables valores de cadena de texto y mostrar el resultado de la suma de las mismas. c. Pruebe con las otras operaciones aritmticas d. Asigne a una variable un numero y a la otra un texto. Que resultado obtiene? Explique. 2. realice un script, en una nueva pagina web, que pregunte el nombre y apellido al usuario y su edad, si la edad es menor a 18 debe mostrar una advertencia y solicitar mediante una

confirmacin la autorizacin para entrar a la pagina. En caso de autorizar la entrada deber mostrar un menaje de alerta advirtiendo que lo hace bajo su responsabilidad. Si no es menor a 18, debe mostrar un mensaje de bienvenida en el cuerpo de la pagina. 3. en una pagina web, realizar script que realicen la siguiente tarea a. Mediante el uso de las funciones predefinidas, solicitar al usuario su nombre y asignarlo a una variable, luego el apellido y guardarlo en otra para despus mostrar un mensaje de bienvenida de la manera bienvenido/a <nombre>, <apellido> b. Solicitar al usuario un valor y seguir hacindolo hasta que ste sea numrico, avisando con un mensaje de alerta en el caso que no lo fuera. Una vez ingresado el valor numrico realizar una tabla que contenga los operando y los resultados de la tabla de multiplicar para ese numero. Debera resultar algo as.

Taller de Herramientas bsicas para programar en la Web

Pgina 91

getHours() - Hora entre 0 y 23 getMinutes() - Minutos entre 0 y 59 getSeconds() - Segundos entre 0 y 59


Mdulo JavaScript - Trabajo Prctico N 2 1. Realice en JavaScript una funcin que solicite tres nmeros y calcule el promedio de los mismos. Muestre todo en el cuerpo del documento. 2. Implemente una funcin para generar la tabla de multiplicar del ejercicio 3 b de practica de la clase 1, la misma recibir como parmetro el numero para el cual se desea la tabla modifique la funcin anterior para que reciba como parmetros el numero para el cual se desea la tabla y cuantas filas tendr la misma. 3. Realice una funcin que reciba como parmetro una cadena de texto y la muestre en el cuerpo del documento en color rojo. 4. En un archivo .js defina 3 funciones que reciban como parmetro un numero num (o el nombre de variable que Ud considere adecuado), la primera deber calcular el rea del circulo cuyo dimetro sea num, la segunda deber calcular el permetro de la circunferencia cuyo radio sea num y la tercera que retorne el rea del cuadrado cuyo lado esta dado por num. Invoque las funciones desde otro script en la pagina web. 5. Realice un script que solicite al usuario un color y luego cambie el color de fondo de la pagina web 6. Genere una tabla de 1 fila y 5 columnas poniendo en cada celda una la imagen correspondiente, siguiendo el orden de izquierda a Pgina 92

4. En una nueva pagina web realice un script que solicite al usuario un numero, verifique que el valor introducido es un numero y escriba en el cuerpo del documento si el mismo es par o impar, luego mediante el uso de la funcin confirm preguntar si desea evaluar otro nmero y continuar hasta que el usuario conteste de manera negativa. 5. Usando las funciones predefinidas, muestre en el cuerpo del documento web la fecha actual con formato de 24 hs. para ello deber crear una variable y asignarle la fecha actual y luego usar las funciones sugeridas

ahora= new Date();


Taller de Herramientas bsicas para programar en la Web

derecha (solicite las imgenes al instructor). Luego mediante un ascript, invierta el orden de las imgenes. Sugerencia: repita la tabla para preciar la diferencia 7. En una pagina web defina una tabla con una imagen dentro que ocupe el 90% de la altura del navegador, luego: Escriba una funcin que solicite al usuario el nombre de una imagen y la muestre en la pagina dentro del objeto img. Acceda al objeto imagen de dos maneras distintas. Mdulo Formularios - Trabajo Prctico N 1 1. Realice un formulario de inscripcin con los elementos que se muestran en la figura. Realice las mejoras estticas que crea conveniente aplicando todo lo aprendido hasta el momento. Agregue casillas de verificacin para que el usuario seleccione si desea recibir informacin adicional en su cuenta de mail y una casilla de texto para ingresar la edad.

2. Modifique el formulario del punto anterior para que se realicen las siguientes verificaciones a. Si selecciona el rea Informtica informar mediante un mensaje de alerta que tiene un descuento de 10% en la inscripcin. b. Cundo ingrese la edad, controlar con una funcin que sea un nmero. (sugerencia: use this)

Taller de Herramientas bsicas para programar en la Web

Pgina 93

Tabla de Contenidos
PROYECTO PACENI 2
COMPONENTE B Actualizacin y perfeccionamiento de la planta docente 2 Actividad B.1: Taller Herramientas bsicas para programar en la Web. 2

ENLACES HIPERTEXTUALES
Hipervnculos locales, marcadores o anclas

16
17

MDULO II: TABLAS


ESTRUCTURA DE UNA TABLA COMO SE CREA UNA TABLA CODIGO PARA GENERAR LA TABLA ETIQUETA <TABLE> ATRIBUTOS DE LA ETIQUERA <TR> ATRIBUTOS DE LA ETIQUERA <TD> Otros Atributos importantes TABLAS ANIDADAS Maquetacin

18
18 18 19 20 27 27 27 28 29

INTRODUCCIN
MODULO I LENGUAJE HTML Primer paso en la generacin de cdigos HTML Estructura de una pgina Web Comenzando con los tags bsicos. Definicin de colores Tags en el cuerpo del documento Modificando el texto del documento Primeros cambios en el texto Tag div Heading Tag <Font> Tipo de fuente Color de fuente Tamao de fuente Combinacin de tags en texto Insercin de Imgenes Imagen como fondo de pgina Listas: Listas desordenadas Listas ordenadas

3
3 4 5 6 6 7 7 7 7 8 8 8 9 9 9 11 12 13 13 14

MARCOS FRAMES
ATRIBUTOS Pgina de Marcos Frames anidados ARIBUTOS DE FRAMESET ATRIBUTOS DE FRAME EL ATRIBUTO TARGET EJEMPLOS DE USO DE FRAMES

30
30 30 32 32 32 33 33

MODULO III: CSS HOJAS DE ESTILO EN CASCADA


Significado

34
34

Taller de Herramientas bsicas para programar en la Web

Pgina 94

Uso Estilos en Tags HTML Estilos en head Forma de establecerlos: Propiedades relacionadas a las fuentes Agrupacin de marcas CSS Varias reglas en una misma marca HTML Propiedades relacionadas con el texto Herencia de propiedades de estilo Definicin de Estilos en funcin del contexto Hojas de Estilo en Archivo Externo Definicin del archivo externo Cmo se convoca el archivo de estilo? Grfico como fondo Repetir o no la imagen Estilos mediante una clase Cmo se las convoca desde una pgina HTML? Estilo mediante id Bordes Padding Propiedades de lista Fondo de pantalla Uso del selector universal Selector universal como contexto: Pseudoclases Men Vertical Men horizontal

34 35 36 36 37 39 39 40 41 42 43 44 44 45 46 46 47 48 48 49 50 52 52 53 53 54 55

Posicionamiento Posicionamiento absoluto Disposicin en dos columnas Propiedad Float Float con imagen Disposicin en dos columnas con float Dos Columnas, Cabecera y Pie TABLA DE PROPIEDADES CSS

56 57 58 59 59 59 60 64

MODULO IV: JAVASCRIPT


Contexto Cientes-Servidor Aplicaciones frecuentes Javascript En Documentos Html Variables en JS No tipadas Operadores De asignacion: De comparacin Lgicos Estructuras de Control De seleccin Bucles (iteraciones) Funciones Predefinidas Alert

66
66 66 66 68 68 68 68 68 69 69 69 69 70 70

Taller de Herramientas bsicas para programar en la Web

Pgina 95

Document.write isNaN confirm Prompt Funciones en JavaScript Qu es una funcin? Funciones con mltiples retornos Ambito de las variables Objetos del Navegador Jerarqua de Objetos Relacin objetos tags HTML Cmo usar un objeto? Ejemplos: Window (objeto default) Objeto history Objeto document

70 70 70 71 71 71 73 73 74 74 74 75 75 76 76 76

Qu es un evento? Eventos Cmo usar los eventos?

81 81 81

ANEXO 1
Trabajos prcticos Hojas de Estilo en Cascada CSS Prcticos resueltos Mdulo JavaScript

82
82 82 91

TABLA DE CONTENIDOS ILUSTRACIONES TABLAS

94 97 98

FORMULARIOS
Qu es un formulario en HTML? Atributos Elementos de un formulario Etiqueta <INPUT> Etiqueta <SELECT>..</SELECT> Etiqueta <TEXTAREA></TEXTAREA> Ejemplo de Formulario

77
77 77 77 77 78 78 78

EVENTOS
Taller de Herramientas bsicas para programar en la Web

81
Pgina 96

Ilustraciones
Ilustracin 1: lenguaje HTML ................................................................................. 3 Ilustracin 2: contenido de una pgina web .......................................................... 4 Ilustracin 3: cmo se genera el cdigo HTML ....................................................... 4 Ilustracin 4: mecnica.......................................................................................... 5 Ilustracin 5: Estructura de una pgina web .......................................................... 5 Ilustracin 6 MI PRIMERA PAGINA, vista en el navegador .................................... 6 Ilustracin 7: Ejemplo con <div align=> ............................................................... 8 Ilustracin 8: heading ............................................................................................ 8 Ilustracin 9: Combinacin de tags en texto .......................................................... 9 Ilustracin 10: uso de header, color de fondo y de fuente con text y con Font color. .......................................................................................................... 10 Ilustracin 11: Vista en el browser del ejemplo combinado ................................ 11 Ilustracin 12: parmetro hspace ........................................................................ 11 Ilustracin 13: Insercin de imgenes alineado a izquierda ................................. 12 Ilustracin 14: Insercin de imagen a la derecha ................................................. 12 Ilustracin 15: Imagen de fondo .......................................................................... 13 Ilustracin 16: Cdigo y vista en el navegador de listas desordenadas UL ........... 14 Ilustracin 17: enlaces hipertextuales ................................................................. 16 Ilustracin 18: Ejemplo de hipertexto.................................................................. 16 Ilustracin 19: Tabla bsica, disposicin de celdas .............................................. 19 Ilustracin 20: Ejemplo de tabla .......................................................................... 20 Ilustracin 21: Ejemplo table width ..................................................................... 21 Ilustracin 22: Ejemplo de border en tabla .......................................................... 22 Ilustracin 23: Ejemplo tabla con bordes............................................................. 22 Ilustracin 24: Color de bordes ............................................................................ 23 Ilustracin 25: Ejemplo BGCOLOR ....................................................................... 23

Ilustracin 26: Ejemplo de background Imagen................................................... 24 Ilustracin 27: Ejemplo CellSpacing ..................................................................... 24 Ilustracin 28: Ejemplo Cellpadding .................................................................... 25 Ilustracin 29: Ejemplo de Align .......................................................................... 26 Ilustracin 30: Ejemplo de atributos de tabla ...................................................... 27 Ilustracin 31: Ejemplo de Colspam .................................................................... 27 Ilustracin 32: Ejemplo de RowSpan ................................................................... 28 Ilustracin 33: Ejemplo de tablas anidadas ......................................................... 29 Ilustracin 34: maquetacin con tablas ............................................................... 29 Ilustracin 35: Ejemplo de pgina de marcos en filas .......................................... 31 Ilustracin 36: Ejemplo de pgina de marcos en 3 columnas ............................... 32 Ilustracin 37: frames anidados .......................................................................... 32 Ilustracin 38: Ejemplo 1 de uso de frames ......................................................... 33 Ilustracin 39: Ejemplo 2 de uso de frames ......................................................... 34 Ilustracin 40: para qu se usa CSS?.................................................................... 34 Ilustracin 41: Una hoja de estilos definida para ms de una pgina HTML ........ 35 Ilustracin 42: ejemplo de estilos en tag ............................................................. 35 Ilustracin 43: Ejemplo de estilo en head ............................................................ 37 Ilustracin 44: Ejemplo de estilo en pgina ......................................................... 37 Ilustracin 45: agrupacin de marcas CSS ........................................................... 39 Ilustracin 46: Estilos en texto ............................................................................ 41 Ilustracin 47: Ejemplo 2 de estilos en texto ....................................................... 41 Ilustracin 48: herencia de estilos ....................................................................... 41 Ilustracin 49: Ejemplo de herencia de estilos .................................................... 42 Ilustracin 50: Estilos en funcin de contexto ..................................................... 43 Ilustracin 51: Hoja de estilo en archivo externo ................................................ 44 Ilustracin 52: Ejemplo con imagen de fondo ..................................................... 46 Ilustracin 53: background-image repeat ....................................................... 46 Ilustracin 54: uso de clases ................................................................................ 47 Ilustracin 55: uso de clases ................................................................................ 48

Taller de Herramientas bsicas para programar en la Web

Pgina 97

Ilustracin 56: estilos mediante el uso de id ........................................................ 48 Ilustracin 57: diferentes tipos de bordes ........................................................... 49 Ilustracin 58: Padding ........................................................................................ 50 Ilustracin 59: Lstas en CSS.................................................................................. 51 Ilustracin 60: uso de listas ................................................................................. 51 Ilustracin 61: vista en el browser ....................................................................... 51 Ilustracin 62: formateo de Background ............................................................. 52 Ilustracin 63: declaracin y uso del selector universal ....................................... 52 Ilustracin 64: Resultado en el browser del uso del selector universal como contexto ..................................................................................................... 53 Ilustracin 65: Muestra Men Vertical ................................................................ 55 Ilustracin 66: Muestra de Men Vertical ........................................................... 56 Ilustracin 67: ejemplo de posicionamiento ........................................................ 57 Ilustracin 68: Ejemplo de posicionamiento absoluto ......................................... 58 Ilustracin 69: Ejemplo de pgina en dos columnas ............................................ 59 Ilustracin 70: Ejemplo de propiedad float .......................................................... 59 Ilustracin 71: propiedad float para dos columnas .............................................. 60 Ilustracin 72: Esquema completo 2 Columnas, cabecera y pie de pgina ........... 62 Ilustracin 73: Ejemplo con dos columnas, pie, cabecera, imagen y men .......... 64 Ilustracin 74: Todos los casos presentados, entregan la misma respuesta ......... 68 Ilustracin 75: Funcin Alert................................................................................ 70 Ilustracin 76: Funcin Confirm ........................................................................... 70 Ilustracin 77: Funcin prompt ........................................................................... 71 Ilustracin 78: Vista del ejemplo en el browser ................................................... 74 Ilustracin 79: Jerarqua de objetos..................................................................... 74 Ilustracin 80: vista del formulario en el navegador ............................................ 80

Tablas
Tabla 1: formato bsico ........................................................................................ 7 Tabla 2: Cdigo para listas con vietas tipo circle ............................................... 14 Tabla 3: Atributo y valores CSS............................................................................ 37 Tabla 4: Operador de comparacin ..................................................................... 69 Tabla 5: Operadores lgicos ................................................................................ 69 Tabla 6: Estructura de Control Seleccin ......................................................... 69 Tabla 7: Estructura de Control Bucle for .......................................................... 69 Tabla 8: Bucle While ........................................................................................... 70 Tabla 9: cdigo haciendo uso de la estructura if y de la funcin confirm............. 71 Tabla 10: Cdigo de uso de Promt e if ................................................................. 71 Tabla 11: Declaracin de funciones ..................................................................... 71 Tabla 12: Declaracin y llamado a funcin .......................................................... 72 Tabla 13: Declaracin y llamado a funcin que calcula la potencia de un nmero ................................................................................................................... 72 Tabla 14: Funcin con mltiples retornos ........................................................... 73 Tabla 15: Ambito de las variables........................................................................ 73 Tabla 16: Ejemplo de color de fondo de un documento ...................................... 75 Tabla 17: uso de propiedades en diferentes objetos ........................................... 75 Tabla 18: uso de la propiedad images ................................................................. 76 Tabla 19: Propiedades y mtodos del objeto window ......................................... 76 Tabla 20: formulario.html ................................................................................... 80 Tabla 21: tabla de eventos .................................................................................. 81 Tabla 22: HTML con ejemplo de eventos ............................................................. 81

Taller de Herramientas bsicas para programar en la Web

Pgina 98