Portafolio de programación Joe Holguin 2c2

Lenguaje de programación

Captura de la microcomputadora Commodore PET-32 mostrando un programa en el lenguaje de programación BASIC, bajo el emulador VICE en una distribución GNU/Linux.

Un ejemplo de código fuente escrito en el lenguaje de programación Java, que imprimirá el mensaje "Hello World!" a la salida estándar cuando es compilado y ejecutadoUn lenguaje de programación es un lenguaje formal diseñado para expresar procesos que pueden ser llevados a cabo por máquinas como las computadoras.

Pueden usarse para crear programas que controlen el comportamiento físico y lógico de una máquina, para expresar algoritmos con precisión, o como modo de comunicación humana.1

Está formado por un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significado de sus elementos y expresiones. Al proceso por el cual se escribe, se prueba, se depura, se compila (de ser necesario) y se mantiene el código fuente de un programa informático se le llama programación.

También la palabra programación se define como el proceso de creación de un programa de computadora, mediante la aplicación de procedimientos lógicos, a través de los siguientes pasos:

El desarrollo lógico del programa para resolver un problema en particular.Escritura de la lógica del programa empleando un lenguaje de programación específico (codificación del programa).Ensamblaje o compilación del programa hasta convertirlo en lenguaje de máquina.Prueba y depuración del programa.Desarrollo de la documentación.

¿Que es un dominio?Un Dominio es un nombre alfanumérico único que se utiliza para identificar en Internet a un sitio, un servidor web o un servidor de correo.Los dominios permiten a los usuarios de la red escribir un nombre para identificar una dirección electrónica totalmente formada por números. Mediante la utilización de los dominios, los usuarios conectados a Internet pueden encontrar sitios web y enviar e-mail sin necesidad de recordar las direcciones numéricas, que en realidad son las que localizan las computadoras o servicios en Internet.Los dominios fueron creados para evitar el que tuviéramos que recordar las direcciones numéricas de las páginas y servidores web. De forma que cuando escribimos en internet el dominio internetworks.com.mx el servidor de DNS (Servidor

de Nombres de Dominio) del proveedor de web hosting del dominio internetworks.com.mx nos proporciona la dirección IP 216.29.152.110 y nuestro navegador se va directamente a esa dirección numérica

Que es HTML

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.

El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

Estructura básica de una página web.La estructura básica de una página web es la siguiente:

<html><head></head><body></body></html>

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.

La primera <head></head> es la cabecera de la página. Aquí irán cierta información

que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código

<html><head><title>Esto es el título de la página.</title></head><body>Hola mundo!<br><b>Esto es negrita.</b><br><i>Y esto itálica.</i><br></body></html>

generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):

Ver ejemplo en una página aparte.

Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).<b></b> => Indica comienzo y fin de negrita.<i></b> => Itálica.También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.

Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr

Etiquetas

Apertura Acción Atributos Cierre

< ! Comentario. Ninguno -->

<A> Hipervínculo. HREF, NAME, REL, REV, TITLE

</A>

<ADDRESS> Formato para dirección del autor.

Ninguno </ADDRESS>

<BASE>Url del autor; contexto del documento.

HREF </BASE>

<BASEFONT SIZE>

Tamaño de la fuente base.

Ninguno NO

<BGSOUND> Sonido de fondo. SRC, LOOP. NO - Internet Explorer

<BIG> Aumenta el tamaño. Ninguno </BIG>

<BLINK> Hace parpadear el texto.

Ninguno </BLINK> - Netscape

<BLOCKQUOTE> Da formato con sangría a un párrafo

Ninguno </BLOCKQUOTE>

<BODY>Cuerpo del documento.

BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK

</BODY>

<BR> Retorno de línea.CLEAR: Se utiliza en combinación con ALIGN de IMAGE.

NO

<CAPTION>Posición de la leyenda en una tabla.

ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER

</CAPTION>

<CENTER> Centrar. Ninguno </CENTER>

<CITE> Formato para citas en itálicas.

Ninguno </CITE>

<CODE> Formato en tipo código.

Ninguno </CODE>

<DD>

Definiciones marcadas, para Lista de Definiciones <DL>.

Ninguno NO

<DFN< Formato en itálica. Internet Explorer </DFN<

<DIR>Lista de directorio, con elementos marcados con <LI>.

Ninguno </DIR>

<DL>

Lista de Definiciones, con términos marcados Ninguno </DL>

Sistema de colores rgb

RGB (sigla en inglés de red, green, blue, en español «rojo, verde y azul») es la composición del color en términos de la intensidad de los colores primarios de la luz.

Modelo de color RGBRGB es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en diferentes dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.

Percepción y sensación de colorLos ojos humanos tienen dos tipos de células sensibles a la luz o foto receptores: los bastones y los conos. Estos últimos son los encargados de aportar la información de color.

Para saber cómo es percibido un color, hay que tener en cuenta que existen tres tipos de conos con respuestas frecuenciales diferentes, y que tienen máxima sensibilidad a los colores que forman la terna RGB. Aunque los conos, que reciben información del verde y el rojo, tienen una curva de sensibilidad similar, la respuesta al color azul es una veinteava (1/20) parte de la respuesta a los otros dos colores. Este hecho lo aprovechan algunos sistemas de codificación de imagen y vídeo, como el JPEG o el MPEG, "perdiendo" de manera consciente más información de la componente azul, ya que el ser humano no percibe esta pérdida.

La sensación de color se puede definir como la respuesta de cada una de las curvas de sensibilidad al espectro radiado por el objeto observado. De esta manera, obtenemos tres respuestas diferentes, una por cada color.

El hecho de que la sensación de color se obtenga de este modo, hace que dos objetos observados, radiando un espectro diferente, puedan producir la misma sensación. Y en esta limitación de la visión humana se basa el modelo de síntesis del color, mediante el cual podemos obtener a partir de estímulos visuales estudiados y con una mezcla de los tres colores primarios, el color de un objeto con un espectro determinado.

HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.

Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones.

Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de correo electrónico o un programa.

Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a ellos.

Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.

HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.

Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.

Esta técnica hace que los usuarios accedan de una manera más rápida a la información.

Para crear este tipo de enlaces hay que hacer dos operaciones:

Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los enlaces).

Poner enlaces que salten a los marcadores.

El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):

<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las nuevas versiones de HTML, aunque se usó bastante en el pasado).

<a id="nombre_del_marcador">Texto asociado al marcador</a>

El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el mismo dentro de un documento HTML.

Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>

Por otro lado, el código de un enlace para que salte a un marcador.

Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>

Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en el siguiente código.

EJERCICIO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title> </head> <body>

<a name="arriba"></a>

En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>.

<a name="primero"><h1>Primer apartado</h1></a>

Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo.

<a name="segundo"><h1>Segundo apartado</h1></a>

Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo.

<a name="tercero"><h1>Tercer apartado</h1></a>

Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo.

Volver <a href="#arriba">arriba</a>.

</body></html>

Escribe el código anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre ejemplo.html. A continuación, haz doble clic en él y prueba a jugar con el archivo haciendo zoom en él o añadiendo más texto para comprobar cómo funcionan los marcadores. El resultado debe ser similar al que se muestra en la siguiente imagen.

Ahora crea otro archivo donde reemplaces los atributos name por id, guarda el archivo como ejemplo2.html. Visualiza los resultados en tu navegador y comprueba si el efecto es el mismo. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.

Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web aprenderaprogramar.com</a>

En el hipervínculo distinguimos las siguientes partes:

- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>

- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro de las comillas.

- Un texto que es el que ve el usuario como link.

Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos visto. El resultado debe ser algo así.

DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET

Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por ejemplo si queremos abrir una página externa a nuestro sitio pero sin que el visitante pierda la nuestra. Para ello utilizaremos el atributo target con alguna de las siguientes opciones.

Valores de target más habituales:

• _blank: Abre el documento vinculado en una ventana nueva del navegador.

• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

Ejemplo:

<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una nueva ventana</a>

EL ATRIBUTO TITLE PARA HIPERVÍNCULOS

Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que hayamos puesto en el atributo ‘title’.

EJEMPLO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title> </head> <body>

<a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a aprenderaprogramar.com</a>.

</body></html>

Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y comprueba los resultados que se obtienen.

Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:

IMÁGENES COMO ENLACES

Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto, una imagen. Veamos un ejemplo:

<ahref="http://aprenderapogramar.com"><img src="http://i.imgur.com/SpZyc.png"alt="Curso de HTML desde cero"></a>

EJERCICIO

Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales de Africa” como texto a mostrar.

Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia: http://es.wikipedia.org/wiki/Panthera_leo

Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección web http://es.wikipedia.org/wiki/Panthera_tigris

En la parte inferior incluiremos tres links internos (para lo que tendremos que haber definido las anclas correspondientes) que indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

SUBDOMINIO

los subdominios también se suelen emplear para compartimentar diferentes áreas de grandes sitios Web. Otro uso muy común y que considero especialmente importante es el montar el administrador de contenidos de las Web dinámicas en un subdominio, en lugar de hacerlo sobre una carpeta del dominio principal. Si necesitas hacer pruebas y ensayos de desarrollo de nuevas aplicaciones, hazlo sobre un subdominio, de esa forma, además de mantener intacta la estructura de la Web principal, no afectaras su posicionamiento en los motores de búsqueda por tener contenido descuidado o desorganizado.

En Internet se podría decir que el subdominio se utiliza para referirse a una dirección web que trabaja como un anexo (o sitio relacionado) de un dominio principal.

¿Que es un Widget?un widget o artilugio1 es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un motor de widgets o WidgetEngine. Entre sus objetivos están dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Aunque no es condición indispensable, los widgets suelen ser utilizados para ser "empotrados" en otra página web, copiando el código que el mismo widget pone a disposición del usuario. Dado que son pequeñas aplicaciones, los widgets pueden hacer todo lo que la imaginación desee e interactuar con servicios e información distribuida en Internet; pueden ser vistosos relojes en pantalla, notas, calculadoras, calendarios,agendas, juegos, ventanas con información del tiempo en su ciudad, incluso sistemas de tiendas de comercio, etcétera.

Los widgets de escritorio también se conocen como gadgets de escritorio, y son una nueva categoría de mini aplicaciones; diseñadas para proveer de información o mejorar una aplicación o servicios de un ordenador o computadora, o bien cualquier tipo de interacción a través del World Wide Web, por ejemplo una extensión de alguna aplicación de negocios, que nos provea información en tiempo real del estatus del negocio u organización.

http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/Gadget

http://es.wikipedia.org/wiki/Ciudad

http://es.wikipedia.org/wiki/Tiempo_atmosf%C3%A9rico

http://es.wikipedia.org/wiki/Juego

http://es.wikipedia.org/wiki/Agenda_electr%C3%B3nica

http://es.wikipedia.org/wiki/Calendario

http://es.wikipedia.org/wiki/Calculadora

http://es.wikipedia.org/wiki/Pantalla_de_ordenador

http://es.wikipedia.org/wiki/Reloj

http://es.wikipedia.org/wiki/Widget#cite_note-1

Adobe Fireworks

Adobe® Fireworks® es un programa versátil para crear, editar y optimizar gráficos Web. Permite crear y editar imágenes de mapa de bits y vectoriales, diseñar efectos Web, como rollovers y menús emergentes, recortar y optimizar elementos gráficos para reducir su tamaño de archivo y automatizar tareas repetitivas para ahorrar tiempo. Es posible exportar o guardar un documento como un archivo JPEG, un archivo GIF o un archivo de otro formato. Estos archivos pueden guardarse junto con archivos HTML que contengan tablas HTML y código JavaScript para facilitar su uso en Internet.

Que es cssHoja de estilo en cascada o CSS (siglas en inglés de cascadingstylesheets) es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML 2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario onavegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo «style».

Que son manejos de capas?

CSS funciona sobre tres dimensiones: altura, anchura y profundidad. En las lecciones anteriores hemos examinado las dos primeras dimensiones. En esta lección, aprenderemos cómo hacer que diferentes elementos se conviertan en capas. En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto a otros.

Para tal propósito, se puede asignar a cada elemento un número por medio de la propiedad z-index. El sistema consiste en que el elemento con un número mayor se superpone al elemento con un número menor.

Supongamos que estamos jugando al poquer y tenemos una escalera de color. La mano se puede presentar de tal manera que cada carta tiene un número asignado por medio de z-index:

http://es.wikipedia.org/wiki/Navegador_web

http://es.wikipedia.org/wiki/Agente_de_usuario

http://es.wikipedia.org/wiki/Hoja_de_estilo

http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

http://es.wikipedia.org/wiki/XHTML

http://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada#cite_note-2

http://es.wikipedia.org/wiki/Extensible_Markup_Language

http://es.wikipedia.org/wiki/HTML

En este caso, los números son consecutivos (yendo del 1 al 5), aunque se puede lograr el mismo resultado usando cinco numeros diferentes. Lo importante es la secuencia cronológica de los números (el orden).

El código del ejemplo de las cartas quedaría así:

#diez_de_diamantes {position: absolute;left: 100px;top: 100px;z-index: 1;

}

#sota_de_diamantes {position: absolute;left: 115px;top: 115px;z-index: 2;

}

#reina_de_diamantes {position: absolute;left: 130px;top: 130px;z-index: 3;

}

#rey_de_diamantes {position: absolute;left: 145px;top: 145px;z-index: 4;

}

#as_de_diamantes {position: absolute;left: 160px;top: 160px;z-index: 5;

Crear una hoja de estilo CSS

Objetivo

Practicar las operaciones que hay que realizar para crear una hoja de estilo.

Ejercicio

A partir de ahora, en los ejercicios paso a paso iremos creando el sitio Librería. En la carpeta ejercicios del curso, encontrarás la carpeta librería con los archivos que necesitarás para crear el sitio. Cópiala a la carpeta mis_sitios en la que has ido creando los sitios de ejemplo, y define el nuevo sitio Librería en Dreamweaver.

Si necesitas ayuda con las operaciones anteriores, consulta los ejercicios propuestos o paso a paso de la unidad 3.

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Crea un nuevo archivo CSS desde Archivo → Nuevo → Página en blanco → CSS.4. Guárdalo (CTRL + S) y llámalo estilolibreria.css.

Ahora vamos a vincularla a la plantilla del sitio. 5. Abre la plantilla libreria.dwt.php que encontrarás en la carpeta Templates del

sitio.6. Ve al menú Formato → Estilos CSS → Adjuntar hoja de estilos...7. Busca el archivo estilolibreria.css que acabamos de crear y selecciona la opción

Vincular. 8. Pulsa Aceptar.

A lo largo de la unidad, iremos modificando la hoja de estilo hasta que la página se muestre así.

Este documento es la plantilla que emplearemos en las páginas del sitio Librería. Vamos a echarle un vistazo para familiarizarnos con su estructura:

Al principio tenemos un div "cabecera". En el tenemos los elementos que mostraremos en la parte superior de la página. Además, será donde incluyamos el logo.

http://www.aulaclic.es/dreamweaver-cs6/ejemplos/libreria/plantillaconestilo.htm

A continuación encontramos el div "menu". En él encontramos una lista con los elementos que formarán el menú de navegación. Además verás que hay una sublista, que convertiremos en un menú desplegable.

Lo siguiente que encontramos es el div "contenedor" donde agrupamos la estructura central de la página. Esta estructura se divide en otras dos divisiones: div "anuncios" donde tenemos la publicidad que mostrará nuestra web, y div "contenido", donde se mostrará el contenido de las distintas páginas. Es aquí donde encontramos la región editable de la plantilla.

Reglas de estilos de CSSVeamos qué son las reglas de estilo de usuario, configuradas opcionalmente por cada usuario en su navegador, y las reglas de estilo de autor, que define el desarrollador de cada web.

Los navegadores modernos implementan dos tipos de reglas de estilo para una página web, las de usuario y las de autor. Son conjuntos de reglas de estilo que afectan a los elementos de la página, es decir, a cualquier documento HTML que se vea en el navegador.

Las reglas de estilo de usuario (user stylesheet rules) las define cada persona en su navegador, a modo de configuración global, para todas las páginas que visita.

Las reglas de estilo de autor (author stylesheet rules) son las que definen los autores de las páginas, es decir, los diseñadores o desarrolladores de cada una de las páginas que visitamos. Por decirlo de otra forma, las hojas de estilo de autor son las CSS que conocemos y que hemos aprendido a crear en el Manual de CSS.

Las reglas de estilo de usuario son menos importantes para el navegador, de cara al orden de precedencia o prioridad. Es decir, en caso que en las reglas de estilo de usuario y de autor se defina una misma propiedad de estilos CSS, la que se tiene en cuenta es la regla de estilo de autor, osea, lo que haya configurado el diseñador de la página. Sin embargo, esto se puede cambiar puntualmente si el usuario lo desea.

Como sabemos, cualquier elemento de la página tiene unas reglas de formato predeterminadas, que definen los navegadores. La hoja de estilo de usuario nos permite cambiar esas reglas de estilo predefinidas, de modo que si una página web no declara un estilo determinado para un elemento, se tengan en cuenta las reglas de estilo definidas por el usuario. Por ejemplo, generalmente las tablas no tienen borde, o al menos es la configuración predeterminada en los navegadores que conozco. Con las reglas de estilo de usuario yo podría definir que todas las tablas en el navegador a partir de ahora tuvieran un borde de 1 píxel y de color rojo. En ese caso, si el autor no

http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html

define cómo debe ser el borde de una tabla en sus CSS, la tabla siempre tendría borde de 1 píxel y color rojo.

Las reglas de estilo de usuario son sobreescritas por las de autor, pero ello no quita importancia a las reglas de usuario, para determinado tipo de usuarios. Imaginemos que por cualquier razón deseamos que las fuentes de las páginas que visitamos sean de un tamaño mayor y de una familia tipográfica determinada, para poder leerse mejor. Entonces podríamos escribir unas reglas de estilo de usuario como estas:

body{ font-size: 16pt; font-family: verdana, arial;}

A partir de ahora, el cuerpo de la página de cualquier web, a no ser que el desarrollador haya definido otra cosa en su elemento body o en cualquiera de los otros elementos de la página, tendrá esas características.

Como se puede apreciar, las reglas de estilo de usuario tienen la misma sintaxis, atributos y valores que utilizamos también en las hojas de estilo normales.

Dónde se colocan las reglas de estilo de usuario

Cada navegador se configura de una manera distinta, luego las reglas de usuario, que aplicamos a cada cliente web que las soporte, se tienen que indicar de manera distinta dependiendo de los navegadores que estemos utilizando.

En principio, se trata de un archivo de texto que debe contener el código CSS que queremos que se utilice de manera predeterminada al ver una página web. Podremos alterar el estilo de cualquier elemento, igual que lo hacemos con las hojas de estilo de autor, con la diferencia que esos estilos se aplicarán a todas las páginas que visitemos.

En el navegador Firefox se pueden definir las reglas de estilo de usuario en un archivo llamado "userContent.css" que se encuentra en la carpeta "chrome", del perfil de usuario que estemos utilizando. El directorio donde están los perfiles de Firefox depende del sistema operativo que estemos trabajando, en el caso de Windows Vista, y para mi usuario en particular, está en:

C:\Users\Miguel\AppData\Roaming\Mozilla\Firefox\Profiles\j6bik046.default\

Así que simplemente podrás crear el archivo con los estilos que quieras, que deberías colocarlo en una ruta como esta.

C:\Users\Miguel\AppData\Roaming\Mozilla\Firefox\Profiles\j6bik046.default\chrome\userContent.css

El directorio "j6bik046.default" es el perfil de mi usuario concreto, que tendrá un nombre seguramente diferente en el tuyo, así como "Miguel", en el principio de la ruta (C:\Users\Miguel\...), que es mi nombre de usuario en el Windows.

En el directorio "chrome" verás probablemente unos archivos llamados "userContent-example.css", que pueden servirte de guía para crear tus propias reglas de estilo de usuario.

Alterar la precedencia para que las reglas de usuario dominen sobre las de autor

Como hemos dicho, en caso que una regla de estilo de usuario se defina también como regla de estilo de autor, se tiene en cuenta lo que se haya definido por el autor o diseñador de la web. Pero esto podemos cambiarlo en las reglas de estilo que queramos.

Imaginemos el caso del usuario que decidió que quería ver siempre las fuentes con un tamaño mayor, para leer mejor el contenido de las webs en su ordenador. Esta persona definió en su archivo de reglas de estilo de usuario un tamaño de letra mayor para determinados elementos de la página. Pero si un desarrollador luego ha definido un tamaño de letra distinto, el tamaño definido por el usuario se pierde y con ello quizás ahora no pueda leer la web tan cómodamente.

Podemos utilizar entonces la directriz de CSS !important, que cuando se coloca en las reglas de estilo de usuario, hace que siempre se tenga en cuenta lo que se haya definido allí.

Así pues, esta persona puede obligar a que en el cuerpo de la página siempre se utilice el tamaño de fuente que había determinado, de la siguiente manera.

body{ font-size: 16pt !important; font-family: verdana, arial;}

Si vemos el anterior código de ejemplo, al atributo font-size le hemos aplicado la declaración !important, luego siempre se tendrá en cuenta antes que los estilos declarados en las reglas de estilo de autor y por tanto, aparecerán todos los textos del cuerpo de la página con tamaño de 16pt. Ahora bien, se había definido una tipografía como Verdana, Arial, pero no era !important, luego sólo se utilizará esta regla si el diseñador no llegó a especificar la familia tipográfica con sus CSS para el cuerpo de la página

Estructura y reglas de CSS

Sintaxis básica

Reglas

Selectores

Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:

P { text-indent: 3em }

es P.

Selectores de clase

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el código en un color diferente dependiendo del idioma:

code.html { color: #191970 }code.css { color: #4b0082 }

El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,

<P CLASS=advertencia>Solo se permite una clase por selector.Por ejemplo, code.html.proprietario no es válida.</p>

Las clases también pueden ser declaradas sin elementos asociados:

.nota { font-size: small }

En este caso, la clase nota puede usarse con cualquier elemento.

Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.

http://www.htmlhelp.com/es/reference/css/style-html.html#class

Selectores ID

Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:

#svp94O { text-indent: 3em }

Esto sería referenciado en HTML por el atributo ID:

<P ID=svp94O>Texto con sangría 3em</P>

Selectores de contexto

Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:

P EM { background: yellow }

es P EM. Esta regla dice que el texto con énfasis dentro del párrafo debería tener un fondo amarillo; el texto con énfasis en un encabezado no sería afectado.

Declaraciones

Propiedades

Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.

Valores

El valor de declaración es la asignación que recibe la propiedad. Por ejemplo, la propiedad color podría recibir el valor red (rojo).

Agrupamiento

A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones. Por ejemplo, todos los encabezados en un documento podrían tener idénticas declaraciones mediante un agrupamiento:

H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }

http://www.htmlhelp.com/es/reference/css/font/font.html

http://www.htmlhelp.com/es/reference/css/box/margin.html

http://www.htmlhelp.com/es/reference/css/color-background/color.html

http://www.htmlhelp.com/es/reference/css/properties.html

http://www.htmlhelp.com/es/reference/css/style-html.html#id

Herencia

Prácticamente todos los selectores que estén anidados dentro de selectores, heredarán los valores de propiedades asignados al selector exterior, salvo que se modifiquen de otra manera. Por ejemplo, un color definido por BODY también será aplicado al texto en un párrafo.

Hay algunos casos donde el selector interior no hereda los valores del selector exterior, pero éstos deberían ser evidentes. Por ejemplo, la propiedad margin-top no es heredada; intuitivamente, un párrafo no tendría que tener el mismo margen superior del cuerpo del documento.

Comentarios

Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programación C. Una muestra de comentario CSS1 tendría el siguiente formato:

/* LOS COMENTARIOS NO PUEDEN ANIDARSE */

Seudo-clases y seudo-elementos

Las seudo-clases y los seudo-elementos son "clases" y "elementos" especiales reconocidos automáticamente por los navegadores que soportan CSS. Las seudo-clases distinguen entre los diferentes tipos de elementos (por ej., los enlaces visitados y los enlaces activos representan dos tipos de anclas). Los seudo-elementos se refieren a sub partes de elementos, como la primera letra de un párrafo.

Las reglas con seudo-clases o seudo-elementos toman la forma

selector:seudo-clase { propiedad: valor }

o

selector:seudo-elemento { propiedad: valor }

Las seudo-clases y seudo-elementos no deberían especificarse con el atributo CLASS de HTML. Las clases normales pueden usarse con seudo-clases y seudo-elementos de la siguiente manera:

selector.clase:seudo-clase { propiedad: valor }selector.clase:seudo-elemento { propiedad: valor }

Seudo-clases Ancla (Anchor)

Las seudo-clases puede asignarse al elemento A para mostrar enlaces, enlaces visitados y enlaces activos en forma diferente. El elemento ancla puede asignar a la seudo-clase link (enlace), el estado de visitada, o activa. Un enlace visitado puede

http://www.htmlhelp.com/es/reference/css/style-html.html#class

http://www.htmlhelp.com/es/reference/css/box/margin-top.html

http://www.htmlhelp.com/es/reference/css/color-background/color.html

definirse para representar un color diferente e inclusive un diferente tamaño y estilo de fuente.

Un efecto interesante podría ser tener un enlace actualmente seleccionado (o "activo") mostrado en un tamaño de fuente ligeramente más grande y de un color diferente. Entonces, cuando la página se vuelva a seleccionar, el enlace visitado podría mostrarse en un tamaño de fuente más pequeño y con un color diferente. La hoja de estilo de muestra podría lucir así:

A:link { color: red }A:active { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }

Seudo-elemento Primera línea

Con frecuencia, en artículos de periódicos, como los del Wall Street Journal, la primera línea de texto de un artículo se muestra en negrita y con todas las letras en mayúsculas. CSS1 ha incluido esta capacidad como un seudo-elemento. Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-line sería:

P:first-line { font-variant: small-caps; font-weight: bold }

Seudo-elemento First letter

El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos. La primera letra de texto dentro de un selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:

P:first-letter { font-size: 300%; float: left }

crearía una letra capital tres veces mayor que el tamaño normal de fuente.

Orden de Cascada

Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalecerá. Las siguientes características determinarán el resultado de hojas de estilo que se contraponen.

1. ! important

Puede establecerse una regla como importante al especificar ! important. Un estilo designado como importante prevalecerá sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden especificar

http://www.htmlhelp.com/reference/html40/block.html



reglas importantes, la regla del autor primará sobre la regla del lector en casos de importancia. Una muestra del uso de la sentencia ! important:

BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important}

2. Origen de las reglas (del autor frente a las del lector)

Como ya se mencionó, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecerán sobre las reglas del lector de similar peso. Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo incorporadas del navegador.

Los autores deberían ser cautelosos con el empleo de reglas ! important ya que primarán sobre las reglas ! important del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaños de fuentes o colores especiales debido a problemas de visión, y tal usuario querrá declarar que ciertas reglas de estilo sean ! important, ya que algunos estilos son vitales para que pueda leer una página. Cualquier regla ! important prevalecerá sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente para asegurar que los usuarios con necesidades especiales de estilos puedan leer la página.

3. Reglas de selector: Calculando especificidad

Las hojas de estilo también pueden primar sobre hojas de estilo en conflicto basándose en su nivel de especificidad, donde un estilo más específico siempre prevalecerá sobre uno menos específico. Simplemente es cuestión de contar para calcular la especificidad de un selector.

a. Cuente el número de atributos ID en el selector.b. Cuente el número de atributos CLASS en el selector.c. Cuente el número nombres de etiquetas HTML en el selector.

Finalmente, escriba los tres números en orden exacto sin espacios ni comas para obtener un número de tres dígitos. (Nota: puede necesitar convertir los números a una base mayor para terminar con tres dígitos.) La lista final de números que corresponden a selectores determinará fácilmente la especificidad, donde los números más altos priman sobre los más bajos. La siguiente es una lista de selectores ordenados por especificidad:

#id1 {xxx} /* a=1 b=0 c=0 --> especificidad = 100 */UL UL LI.red {xxx} /* a=0 b=1 c=3 --> especificidad = 013 */LI.red {xxx} /* a=0 b=1 c=1 --> especificidad = 011 */LI {xxx} /* a=0 b=0 c=1 --> especificidad = 001 */

Clases e identificadores en css

Pensemos ahora en una página en la que queremos cambiar la apariencia de algunos <h1>, pero no de todos. ¿Cómo lo conseguiríamos? Para ello tenemos un parámetro general de HTML denominado class ("clase" en español, en el sentido de "tipo"). Este parámetro nos sirve para crear un conjunto de etiquetas que forman parte del mismo grupo. El objetivo es que luego podremos referirnos a esa clase de forma conjunta.

En este ejemplo tenemos tres títulos diferentes:

<h1>Bienvenidos</h1><h1 class="capitulos">Capítulo 1</h1><h1 class="capitulos">Capítulo 2</h2>

Dos de ellos los hemos agrupado dentro de una clase llamada "capítulos". Gracias a ello podemos modificar sólo su apariencia, diferenciándolos del resto de los títulos del documento. Para referirnos a la clase, emplearíamos el signo de punto (.).

.capitulos { font-family: sans-serif; text-decoration: underline;}

Al probarlo en un navegador, obtendríamos el resultado de la figura.

Es decir, ahora tenemos dos tipos de títulos: mientras que todos ellos serán de color azul, sólo los que forman parte de la selecta clase "capítulos" tendrán un tipo de letra concreto y estarán subrayados. Por tanto, podemos aplicar normas para todos los títulos o sólo para los de los grupos que generemos.

Clases dependientes

Las reglas que definimos para una clase pueden ser aplicadas exclusivamente a una etiqueta. Así podríamos tener un par de reglas como éstas:

h1.capitulos { font-family: sans-serif; text-decoration: underline; font-size:14px}p.capitulos { font-family: sans-serif; text-decoration: underline;}

De este modo podemos reutilizar el nombre de la clase y definir distintos valores, dependiendo de si se aplica a una cabecera o a un párrafo, en nuestro ejemplo.

Identificadores

Además de las clases, podemos diferenciar un único elemento entre todos los demás de una página mediante el parámetro id (abreviatura de "identificador"). Con id asignaremos un nombre único que luego podemos emplear en nuestra sección de estilos, precediéndolo en este caso del signo #.

Continuando con el ejemplo anterior, supongamos que tenemos un identificador como éste:

<h1 id="anexos">Anexos especiales</h1>

Podríamos modificar exclusivamente ese anexo mediante la siguiente regla:

#anexos { font-size: 18px; text-align: center; }

El resultado se muestra en la figura.

La clave del id es que estamos creando un grupo específico sólo con un elemento. Este modificador tiene otras muchas utilidades, ya que al designar un elemento de forma única dentro de la página web, podremos operar con él mediante JavaScript, aunque eso es otra cuestión.

El sentido de utilizar identificadores, al trabajar con estilos, es mayor cuando pensamos en las hojas externas. Podemos tener un elemento con un identificador que se repite a lo largo de varias páginas. Si nuestros estilos están guardados en un archivo externo, podremos modificar todos esos identificadores con facilidad.

Pregunta Verdadero-Falso

Las siguientes afirmaciones, ¿son verdaderas o falsas?

Mediante los identificadores podemos diferenciar un único elemento entre todos los demás de una página utilizando el parámetro id.

Verdadero Falso

Las reglas que definimos para una clase pueden ser aplicadas exclusivamente a una etiqueta, por ello no se puede reutilizar el nombre de la clase y definir distintos valores para una cabecera o a un párrafo.

Verdadero Falso

Actividad 2

Utilizando un editor de páginas web y el documento base anterior, definiremos un par de clases diferentes para distinguir los títulos de capítulos de los títulos generales o distintos tipos de párrafos, lo que mejor se ajuste a nuestro texto. Para ello estableceremos el nombre de cada clase en el cuadro Clase de la barra del editor y en el panel Propiedades de estilo seleccionaremos la opción todos los elementos de la clase en el cuadro Aplicar estilos a:

Crearemos también un identificador en algún elemento. En este caso, indicaremos un nombre en el cuadro Identificador de la barra del editor, situado justo antes del cuadro Clase. Para aplicar estilos a un identificador, seleccionaremos la opción este elemento mediante su ID en el cuadro Aplicar estilos a: del panel Propiedades de estilo.

Aplicaremos estilos distintos a las clases y el identificador, modificando algunos aspectos generales del texto, como su tamaño, color o alineación.

Identificadores dependientes

Como sucede con las clases, un identificador puede estar definido de forma general o específicamente para una etiqueta concreta. Es distinto esto:

#anexos { font-size: 18px; text-align: center; }

que esto:

div#anexos { font-size: 18px; text-align: center; }

El segundo sólo se aplicaría a un elemento que se llamase así:

<div id="anexos">

pero no a uno denominado

<h1 id="anexos">

Combinación de class e id

Se pueden combinar los parámetros class e id en un mismo elemento, con lo que conseguiremos que se le apliquen tanto las reglas definidas para la clase como para el identificador.

Este ejemplo:

<h1 class="capitulos" id="anexos">Bienvenidos</h1>

da como resultado una mezcla de todas las reglas que hemos aplicado hasta ahora, tanto las del elemento <h1>, como las de la clase y las del identificador. Observa la figura:

Más selectores

Hay otros métodos para definir reglas que se aplicarán a diferentes grupos de etiquetas.

Selector universal

El signo * se emplea para definir a todo el conjunto de etiquetas de una página web. Nos sirve para indicar "esto se aplica a cualquier etiqueta". Por ejemplo:

* {font-family:san-serif; }

Hace que cualquier etiqueta de la página tome ese tipo de letra.

Agrupación de selectores

También podemos emplear la coma para agrupar varias etiquetas, clases e identificadores. Un par de ejemplos:

p, h1, h2 {font-family: times, word-spacing: 2px;}img, #portada, hr, .fotografia {margin: 6px;}

Sucesores y antecesores

Todavía obtenemos mayor control, gracias a las opciones que nos ofrece CSS para aplicar estilos, si un elemento desciende de otro o es el padre de uno. No entraremos en demasiados detalles, pero observemos la siguiente regla:

h2 strong {font-style: italic; }

Esa línea haría que se mostrase en cursiva el contenido etiquetado dentro de <strong>, pero si y sólo si esta etiqueta se encuentra dentro de una cabecera <h2>. No es necesario que lo sea directamente; puede haber otras etiquetas conteniendo la de <strong>.

Por ejemplo:

<h1>Esta línea no se vería <strong>afectada</strong></h1><h2>Esta línea <strong>sí</strong> se vería <strong>afectada</strong></h2>

El ejemplo anterior se mostraría como en la figura:

El espacio, por tanto, indica que la aplicación se hará dependiendo de si un elemento está dentro de otro.

Además hay otros operadores que definen el tipo de relación, como el *, el signo de > (que indica que un elemento desciende directamente de otro), el de + o el signo ~.

Pregunta Verdadero-Falso

Las siguientes afirmaciones, ¿son verdaderas o falsas?

El signo * se emplea para definir a todo el conjunto de etiquetas de una página web.

Verdadero Falso

Se puede emplear la coma para desagrupar varias etiquetas, clases e identificadores.

Verdadero Falso

Nota

El uso de estas opciones en estos primeros compases será muy limitado, por lo que no profundizaremos más en ello, por ahora.

Actividad 3

En el documento anterior tomaremos una etiqueta que tenga nombre de clase y en su interior definiremos una parte como <strong>. Haremos lo mismo con otra etiqueta que no tenga nombre de clase. Por último, definiremos un selector para que se aplique formato sólo a la etiqueta que tiene nombre de clase y no a todos los <strong> del documento. Es decir, recurriremos al selector de sucesores para conseguir el efecto.

Estos cambios no los realizaremos con BlueGriffon, sino que definiremos los selectores directamente en el código fuente de la página, en la cabecera del documento.

Pseudoclases

Contamos con un último tipo de selectores denominado pseudoclases que permiten definir propiedades para algunos elementos html que cuentan con diferentes estados. El más conocido es el caso de la etiqueta <a>, empleada para definir enlaces. Esta etiqueta puede tener varios estados. Estos son los principales:

a:link: el estado normal de un enlace no visitado. a:visited: el estado de un enlace, una vez que ha sido visitado. a:active: cuando se está pulsando sobre el elemento. a:hover: cuando el ratón está sobre el elemento. a:focus: cuando el elemento tiene el foco del navegador. Es el que está

preseleccionado.

Pues bien, si definimos algunos de esos estados, conseguiremos, por ejemplo, que un enlace cambie su apariencia al pasar el ratón sobre él (a:hover) o que cambie de color cuando ha sido visitado (a:visited). Podríamos hacerlo así:

a:link {font-family: sans-serif; }a:hover {color:red; }a:visited {color:gray; }

La figura muestra el enlace tras ser visitado:

Aún hay muchas más pseudoclases, centradas en aspectos posicionales, dependientes de si un elemento es el primero de su tipo (:first-of-type, :last-of-type), si es el único descendiente (:only-child), si está vacío (:empty), etc. Incluso tenemos una pseudoclase para no aplicar estilo a un elemento concreto (:not), pero de nuevo su uso es poco frecuente en esta etapa de aprendizaje de CSS.

Veamos un ejemplo de uso con la lista siguiente:

<ul>

<li>Nombre y cantidad</li><li>Pepe. 5 </li><li>María. 8 </li><li>Manuel. 3</li><li>Total. 16</li>

</ul>

Le aplicaremos los estilos siguientes:

li:first-child {font-size:22px; color:#333399; list-style-type: none }li:last-of-type {font-size:16px; color:#333399 ; font-weight:bolder; }

En este caso no había diferencia entre emplear child o of-type. El resultado que obtenemos es el de la figura:

Actividad 4

Siguiendo con nuestro ejemplo, crearemos un enlace a la página desde la que tomamos el texto original y definiremos estilos para los diferentes estados posibles del enlace, mediante los pseudoselectores.

Definiremos en la cabecera de la página al menos los estilos para a:link, a:hover y a:visited.

Deberes

<html>

<head>

<title> Baños </title>

</head>

<body>

<body topmargin=“0" leftmargin="0" bgcolor="yellow"></body>

<h1><h1 align=center>

<font face="Cooper Blank" color="Green">

<n>Baños (Ecuador)</n>

</font>

</h1>

<center>

<table bgcolor="200808">

<tr>

<td>

<img src="bandera.png" width="340" height="240">

</td>

<td>

<img src="escudo.png" width="340" height="240">

</td>

</tr>

</table>

<p align=justify><font face="Times New Roman" size="5" color="blue">

Baños de Agua Santa se encuentra en la provincia de Tungurahua solamente a 180 Km de Quito y 35 Km de Ambato.

Baños, está ubicada en las faldas del volcán Tungurahua una altura de 1820 metros (msnm), muy próximo al centro geométrico del territorio ecuatoriano. Goza de un clima muy agradable, casi durante todo el año; a pesar de una alta humedad. Los parques nacionales Sangay y Llanganates. están ubicados en los flancos del cantón.

Baños es también un centro de peregrinación religiosa ya que los manantiales de aguas termales son popularmente asociados con curas "milagrosas" por la influencia de la comunidad dominica que está asentada en esta zona desde hace mucho tiempo.

La ciudad turística de está ubicado en un valle con cascadas y aguas termales a lado del volcán Tungurahua con una altura de 5.016 metros.

Baños tiene una población con 20.000 habitantes, esta a una altura de 1.826 metros y posee temperaturas promedios de 20°C.

</p>

</font>

<img src= "baños1.jpg" align=center>

<hr>

<br>

<h1 align=center>

<font face="Cooper Blank" color="red">

<i> Turismo </i>

</font>

</h1>

<p align=justify><font face="Times New Roman" size="5" color="blue">

El turismo del pueblo se relaciona íntimamente con el resto del cantón; el principal atractivo del cantón es la naturaleza, dotada de una alta biodiversidad. Es una de las poblaciones más turísticas del Ecuador; es también conocida como "La Puerta del Dorado" y también conocida como: "El Pedacito de Cielo" debido a la tranquilidad que brindan su entorno. Además ofrece muchas atracciones: se puede visitar la Basílica de la Virgen del Rosario de Agua Santa, se puede visitar las diferentes cascadas, ascender al Tungurahua (volcán), probar las melcochas (dulces hechos a base de caña de azúcar), hay variedades de artesanías hechas en balsa y de tagua hechas en otros lugares y revendidas en esta localidad.

Baños de Agua Santa es una ciudad apta para practicar varios deportes de aventura tales como: rafting, kayaking, canyoning, escalada en roca, salto de puentes, paseos a caballo, caminatas ecológicas, canopy, ciclismo de montaña, etc. Posee 5 balnearios municipales con aguas minerales y sulfurosas que van desde las frías de 18 °C, hasta las termales de 55 °C; emergen de las entrañas del volcán Tungurahua. Cuenta con una zona rosa en donde más de 30 peñas, bares y discotecas.2 En esta ciudad se pueden acceder a más de 80 restaurantes con variada gastronomía nacional e internacional.

</p>

<br>

<p align=center><font face="Verdana" size="3" color= #2E6FFC> Datos de interés </font></p>

<p align= center><table border="3" cellpadding="10" cellspacing="5" bordercolor=green>

<tr>

<td width="200"><font face=Comic Sans color="orange" size=4> Región: </td>

<td width="200"><font face=Comic Sans color="green" size=4> Sierra </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Provincia: </td>

<td><font face=Comic Sans color="green" size=4> Tungurahua </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Latitud: </td>

<td><font face=Comic Sans color="green" size=4> 01º 24' S </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Longitud: </td>

<td><font face=Comic Sans color="green" size=4> 078º 25' O </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Clima: </td>

<td><font face=Comic Sans color="green" size=4> 18º C a 20º C </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Fundación: </td>

<td><font face=Comic Sans color="green" size=4> Diciembre de 1570 </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Alcalde: </td>

<td><font face=Comic Sans color="green" size=4> Dr. Carlos Ortega </td>

</tr>

<tr>

<td><font face=Comic Sans color="orange" size=4> Prefijo telefónico: </td>

<td><font face=Comic Sans color="green" size=4> 593 3 </td>

</tr>

</font>

</table>

</body>

</html>

<br>

<font face="Cooper Blank" size=6 color="purple">

<b> Deportes de Aventura </b>

</font>

</h1>

<UL type = square >

<p align=left><font face="Times New Roman" size="4" color="blue">

<LI><b>Rafting:</b> Es una actividad deportiva y recreativa que consiste en recorrer el cauce de ríos en la dirección de la corriente (río abajo), por lo general sobre algún tipo de embarcación o balsa. Se lo realiza en el río Pastaza en el sector oriental de la ciudad, partiendo desde San Francisco, o desde el sector de La Penal (Río Negro); se lo realiza en 2 tramos del río con distinto nivel de dificultad que va entre III a V. Se requiere saber nadar, no se requiere experiencia para el nivel III, pero sí para los niveles IV y V.

<LI><b>Canopy:</b> Baños cuenta con una variedad de lugares donde se puede realizar en esta ciudad desde 250 metros, hasta 1000 metros otro de los lugares donde podemos realizar canopy se puede encontrar este servicios con varias líneas entre bosques nublados, ríos y barrancos esta actividad se lo puede realizar tanto niños como adultos.

<LI><b>Kayak:</b> Es un deporte que puede ser practicado únicamente por expertos. En la parte oriental de Baños en la Parroquia Río Negro se encuentra el río Topo, según algunos expertos es uno de los ríos más técnicos y de los mejores para realizar este deporte, además de la belleza del entorno y la biodiversidad del sector.

<LI><b>Canyoning:</b> Se practica en los cañones o barrancos de los ríos, que permite descender por cascadas atados a una cuerda. Y con el equipo de seguridad, que es provisto en su totalidad por la agencia operadora contratada, y supervisado por guías con experiencia. En los alrededores hay varios lugares con paisajes naturales únicos en donde se realiza esta actividad, entre ellos: Chamana, Río Blanco y Cashaurco.

<LI><b>Puenting:</b> Es un deporte extremo, concretamente, una modalidad de salto encordado que se realiza desde puente con cuerda(s) dinámica(s) (de escalada) en forma de péndulo; es una experiencia muy emocionante. En Baños se lo realiza en el puente de San Francisco (sector del Terminal Terrestre) y en el puente de Río Blanco (a 4 km. al este de la ciudad).

<LI><b>Escalada:</b> Requiere de mucha fuerza y adrenalina, que incluye alturas de peligro considerable. En Baños hay paredes muy particulares como la de San Martín, la ruta ubicada atrás del Terminal Terrestre (Puente San Francisco) compuestas de roca volcánica, en algunas se han implementado anclajes fijos y rutas determinadas. Hay un muro artificial en el Barrio El Recreo en el Parque Aventura.

<LI><b>Down hill:</b> Se lo puede realizar en varias rutas, como la ruta de Ventanas (Runtún) - Baños, hay otras más accesibles como Las Antenas- Chontilla- Lligua; Osohuaico- Lligua, Pondoa-Baños, o la ruta El Tablón –Baños, Antenas-Baños, Vizcaya-Baños.

</UL>

</p>

</font>

<img src=bañosanimads.gif align=center>

<br>

<hr><p align=center><font face="Verdana" size="5" color="#0AA075">"Es propiamente Los Baños, un lugar de aguas a las que acuden gente de toda la provincia , peregrinos y personajes importantes"</i></font >

<p align=center><font color=#1AFCF6 size=-1>Opinión.<br>

<p align=right>

<font face= "Elephant" color=blue size=5>

Joe Holguin<br>

2-A-2

</font>

</body>

</html>

<html>

<head>

</head>

<title>Galápagos </title>

<body>

<body topmargin=“0" leftmargin="0" bgcolor="#32CD32"></body>

<h1><h1 align=center>

<font face="Elephant" color="red">

<n>Provincia de Galápagos</n>

</font>

</h1>

<center>

<table bgcolor="200808">

<tr>

<td>

<img src="bandera.png" width="340" height="240">

</td>

<td>

<img src="escudo.png" width="340" height="240">

</td>

</tr>

</table>

<p align=justify><font face="Times New Roman" size="5" color="#090970">

Galápagos, oficialmente Provincia de Galápagos, es una de las 24 provincias de la República del Ecuador, localizada en la región insular del país. Su capital es la ciudad de Puerto Baquerizo Moreno y su localidad más poblada es la ciudad de Puerto Ayora. Es el mayor centro turístico del Ecuador, así como también una de las reservas ecológicas más grandes e importantes del planeta. Con sus 26.640 habitantes, Galápagos es la provincia menos poblada del país, debido principalmente al afán de conservar al máximo la flora y fauna de la región.

Su territorio está formado por el Archipiélago de Colón, también conocido como "Islas Galápagos", de la cual adopta su nombre. En total son 22 islas y 107 islotes y rocas las que conforman el archipiélago.

Los territorios de la provincia de Galápagos fueron descubiertos durante la colonización española en 1535 por el Fray Tomás de Berlanga, aunque no se estableció una localidad en el archipiélago. Durante gran parte de la colonia, las islas sirvieron como escondites de piratas que saqueaban varias ciudades de América del Sur. Ecuador anexó las islas Galápagos el 12 de febrero de 1832, y la actual provincia fue creada el 18 de febrero de 1973.

Galápagos se encuentra dividida políticamente en 3 cantones. Las actividades principales de la provincia son el turismo debido a su calidad de reserva natural, y la pesca.

</p>

</font>

<img src= "galapagos.jpg" align=center>

<hr>

<br>

<h1 align=center>

<font face="Elephant" color="#6504A1">

<i> Turismo </i>

</font>

</h1>

<p align=justify><font face="Times New Roman" size="5" color="#090970">

Existen tres categorías de Guías Naturalistas, estas categorías se definen por su educación, preparación, experiencia y el tipo de entrenamiento y cursos que han realizado.

Quienes visitan las Islas Galapagos siempre se asombran de la paz que se respira en su medio ambiente y sobre todo de lo amigables que son todas las especies animales que habitan en Galapagos.

Usted puede admirar las aves en Galapagos a cortas distancias, nadar entre lobos marinos y delfines o tomarse fotos al lado de las famosas Tortugas Gigantes de Galapagos con toda tranquilidad.

Sin embargo está prohibido de que usted ofrezca alimentos a cualquier animal en las Islas Galapagos. Esto es con la finalidad de proteger el medio ambiente.

El gobierno Ecuatoriano ha creado leyes a favor del turismo a las Islas Galapagos para proteger sus recursos naturales.

Estas leyes están orientadas a proteger tanto al ecosistema marino como terrestre, para reservar los procesos ecológicos y de evolución y también para asegurar un experiencia altamente educacional a todos quienes visitan Galapagos.

La Estación Charles Darwin es uno de los lugares más importantes en Galapagos. Es un lugar donde usted puede observar a las tortugas gigantes y aprender como todas las especies en Galapagos son cuidadas.

El objetivo de esta estación científica es el de hacer que las Islas Galapagos sean un verdadero Laboratorio viviente de evolución.

Galapagos es realmente un paraíso natural en la tierra y es uno de los parques nacionales más visitados en el mundo.

Las islas han asumido una condición mitológica y su relación con Charles Darwin, el visitante más famoso, que sin duda violó varias normas en el parque al andar a caballo y comer las tortugas de Galápagos, se ha distorsionado y tornado romántica. Sin embargo, no tiene que ser un biólogo evolutivo o un ornitólogo para apreciar uno de los pocos lugares del planeta donde la huella de la presencia humana se mantiene a un mínimo.

</p>

<img src=galapag.gif align=center>

<br>

<hr>

<p align=center><font face="Cooper Blank" size="6" color= "yellow"> Datos de interés </font></p>

<p align= center><table border="3" cellpadding="10" cellspacing="5" bordercolor=orange>

<tr>

<td><font face=Comic Sans color="red" size=4> Capital: </td>

<td><font face=Comic Sans color="blue" size=4> P. Baquerizo Moreno </td>

</tr>

<tr>

<td><font face=Comic Sans color="red" size=4> Subdivisiones: </td>

<td><font face=Comic Sans color="blue" size=4> 3 cantones </td>

</tr>

<tr>

<td><font face=Comic Sans color="red" size=4> Fundación: </td>

<td><font face=Comic Sans color="blue" size=4> 18 de febrero de 1973 </td>

</tr>

<tr>

<td><font face=Comic Sans color="red" size=4> Superficie: </td>

<td><font face=Comic Sans color="blue" size=4> 8,010 km² </td>

</tr>

<tr>

<td><font face=Comic Sans color="red" size=4> Altitud: </td>

<td><font face=Comic Sans color="blue" size=4> 3 - 6 msnm msnm </td>

</tr>

<tr>

<td><font face=Comic Sans color="red" size=4> Gentilicio: </td>

<td><font face=Comic Sans color="blue" size=4> Galapagueño-ña </td>

</tr>

</font>

</table>

</body>

</html>

<hr>

<br>

<center><font face="Cooper Blank" size=6 color="purple">

<b> Islas </b>

</font>

</h1>

<UL type = circle >

<left><p align=left><font face="Times New Roman" size="4" color="blue">

<LI>Isla Isabela 4588 km²

<LI>Isla Santa Cruz 986 km²

<LI>Isla Fernandina 642 km²

<LI>Isla Santiago 585 km²

<LI>isla San Cristóbal 558 km²

<LI>Isla Floreana 172 km²

<LI>Isla Marchena 130 km²

<LI>Isla Española 60 km²

<LI>Isla Pinta 59 km²

</UL>

</p>

</font>

<br>

<hr><p align=center><font face="Times New Roman" size="5" color="#DEF205">"Las islas Galápagos son únicas en el mundo, son las islas encantadas y si alguien viene al Ecuador no puede dejar de conocer las islas Galápagos que son únicas en el mundo,

aquí se encuentra una gran bio -diversidad de especies, en especial de aves. "</i></font >

<p align=center><font color=#1AFCF6 size=-1>Opinión.<br>

<p align=right>

<font face= "Elephant" color=blue size=5>

Joe Holguin<br>

2-A-2

</font>

</body>

</html>

Codificación

<HTML>

<HEAD>

<TITLE>PAGIAN DE NAVIDAD CSS</TITLE>

<STYLE TYPE="TEXT/CSS">

body{

margin-left: 3cm;

margin-top:200px;

margin-right: 2.5cm;

background-color:#11B7D5;

color: #2E072D;

border-color: #ffffff;

font-family:Monotype Corsiva;

font-size: 12px;

line-height: 0.75cm;

}

marquee{

background-color:#A88A31;

color:#ff0000;

font-size: 18px;

text-align: center;

}

p{

text-align: justify;

}

div{

background-color: #34CCF2;

}

h6{

font-family: Californian FB;

color: F11C1C;

}

</style>

</head>

<body>

<div id="cabecera" style="left:270px;top:20px;width:765px;height:140px;position:absolute;">

<table border="0">

<tr>

<td width="830px" align="center">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="250">

<param name="movie" value="flashvortex.swf" />

<param name="quality" value="best" />

<param name="menu" value="true" />

<param name="allowScriptAccess" value="sameDomain" />

<embed src="flashvortex.swf" quality="best" menu="true" width="300" height="250" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="sameDomain" />

</object>

</td>

<td align="center">

<imgsrc="IMAGENES/gif2.gif" width="100px">

</td>

</tr>

</table>

</div>

<br>

<marquee>

Feliz Navidad y un prospero año nuevo </marquee>

<BR>

<P STYLE="text-indent:2cm;font-style:italic;font-weight:bold">La Navidad es la celebración del Nacimiento de Cristo; que tuvo lugar en Belén, un pueblo de Palestina, hace aproximadamente dos mil años. Se celebra el 25 de diciembre y cuatro semanas antes tiene lugar el Adviento, es decir, un tiempo de espera y preparación interior.</P>

<BR>

<P>

El mensaje de la Navidad va dirigido a todos los hombres que pueblan el planeta Tierra, pues ya dijo el Ángel que anunció a los pastores el nacimiento del niño Jesús: "Paz a todos los hombres de buena voluntad". Pero realmente tiene un significado mayor para los cristianos, ya sean católicos, protestantes u ortodoxos; ya que son los que creen que el Niño que nace en Belén, es el Hijo de Dios.

Para los cristianos, este tiempo litúrgico supone volver a encontrarnos con el Señor en la humildad de una cuna, en adorar al Rey del Universo en un pobre pesebre, y en pensar en las enseñanzas que se nos transmiten en ese Belén: ahí nadie se reserva nada, todo es sencillez y alegría.

Durante estos días, estamos llamados a una unión fraternal entre nosotros, especialmente en las familias, y a vivir actos de caridad con los más desfavorecidos. Esto no tiene nada que ver con el bombardeo consumista al que nos someten los medios de comunicación.

<DIV>

<TABLE>

<TR>

<TD>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="250">

<param name="movie" value="flashvortex.swf" />

<param name="quality" value="best" />

<param name="menu" value="true" />

<param name="allowScriptAccess" value="sameDomain" />

<embed src="flashvortex.swf" quality="best" menu="true" width="300" height="250" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="sameDomain" />

</object>

</TD>

<td>

<imgsrc="feliz-navidad-gif-02.png" width="250px">

</td>

<td>

</TR>

</TABLE>

<td>

<td><script type="text/javascript">

varbannersnack_embed = {"hash":"bxu8ym8pg","width":728,"height":90,"t":1418776913,"userId":15945096,"wmode":"transparent"};

</script>

<script type="text/javascript" src="http://files.bannersnack.com/iframe/embed.js"></script>

</td>

</DIV>

<center>

<h6>

Joe Javier Holguin Baque derechos reservados

</h6>

</BODY>

</HTML>

Codificación <html lang="en">

<head>

<meta charset="utf-8">

<tiltle>Navidad</tiltle>

<DIV>

<TABLE>

<TR>

<TD>

</TD>

<td>

<imgsrc="banner.png" width="720px">

</td>

<td>

</TR>

</TABLE>

<tr>

<td>

<head>

<title>barra.gif</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">td img {display: block;}</style>



<script language="JavaScript1.2" type="text/javascript">



</script>

</head>

<body bgcolor="#000000" onload="MM_preloadImages('barra_r1_c1_f2.gif','barra_r1_c3_f2.gif','barra_r1_c5_f2.gif','barra_r1_c7_f2.gif','barra_r1_c9_f2.gif');">

<table border="0" cellpadding="0" cellspacing="0" width="720">



<tr>

<td><imgsrc="spacer.gif" width="136" height="1" border="0" alt="" /></td>










</tr>

<tr>

<td><a href="file:///G:/Nueva%20carpeta%20(2)/proyecto%20web/index.html""javascript:;"

onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('barra_r1_c1','','barra_r1_c1_f2.gif',1);"><img name="barra_r1_c1" src="barra_r1_c1.gif" width="136" height="35" border="0" id="barra_r1_c1" alt="" /></a></td>

<td><img name="barra_r1_c2" src="barra_r1_c2.gif" width="8" height="35" border="0" id="barra_r1_c2" alt="" /></td>

<td><a href="file:///E:/Nueva%20carpeta%20(2)/proyecto%20web/receta/receta.html" "javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('barra_r1_c3','','barra_r1_c3_f2.gif',1);"><img name="barra_r1_c3" src="barra_r1_c3.gif" width="135" height="35" border="0" id="barra_r1_c3" alt="" /></a></td>


<td><a href="file:///G:/Nueva%20carpeta%20(2)/proyecto%20web/tradiciones/tradiciones.html""javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('barra_r1_c5','','barra_r1_c5_f2.gif',1);"><img name="barra_r1_c5" src="barra_r1_c5.gif" width="136" height="35" border="0" id="barra_r1_c5" alt="" /></a></td>


<td><a href="file:///G:/Nueva%20carpeta%20(2)/proyecto%20web/albun%20fiestas/albunfiestas.html""javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('barra_r1_c7','','barra_r1_c7_f2.gif',1);"><img name="barra_r1_c7" src="barra_r1_c7.gif" width="132" height="35" border="0" id="barra_r1_c7" alt="" /></a></td>


<td><a href="file:///G:/Nueva%20carpeta%20(2)/proyecto%20web/albun%20fiestas/albunfiestas.html""javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('barra_r1_c9','','barra_r1_c9_f2.gif',1);"><img name="barra_r1_c9" src="barra_r1_c9.gif" width="133" height="35" border="0" id="barra_r1_c9" alt="" /></a></td>


</tr>

</table>

</body>

</td>

</tr>

<TABLE width="50" height="500" >

<TR>

<TD align="center">

<script src="http://h2.flashvortex.com/display.php?id=2_1420725429_4528_507_0_294_113_9_2_104" type="text/javascript"></script>

<br>

<script type="text/javascript" src="http://counter1.allfreecounter.com/private/countertab.js?c=53d609f0e89c24d55785657278c8d02b" align"center"></script>

<a id="onlineRadioLink" href="http://radiotuna.com/techno-radio">techno radio</a><script type="text/javascript" src="http://radiotuna.com/OnlineRadioPlayer/EmbedRadio?playerParams=%7B%22styleSelection0%22%3A3%2C%22styleSelection1%22%3A58%2C%22styleSelection2%22%3A36%2C%22textColor%22%3A0%2C%22backgroundColor%22%3A15651795%2C%22buttonColor%22%3A9699386%2C%22glowColor%22%3A9699386%2C%22playerSize%22%3A240%2C%22playerType%22%3A%22style%22%7D&width=240&height=292"></script>

<a class="twitter-timeline" href="https://twitter.com/JoeHolguin" data-widget-id="539980867230498816">Tweets por el @JoeHolguin.</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

</br>

</TD>

<td align="center">

<imgsrc="facebookchristmas cover 8 (Small) (1).png" width="450px" height="150">

<imgsrc="mensaje navidad 2.jpg" width="450px" height="250">

<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width="450" height="250" name="chat" FlashVars="id=208446527&gn=RADIO_CRISTO_EN_TU_CIUDAD" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/chat/embed.php?id=208446527&GroupName=RADIO_CRISTO_EN_TU_CIUDAD">Get RADIO_CRISTO_EN_TU_CIUDAD chat group</a> | <a target="_BLANK" href="http://xat.com/RADIO_CRISTO_EN_TU_CIUDAD">Goto RADIO_CRISTO_EN_TU_CIUDAD website</a></small><br>

chat

</td>

<td>

</TR>

</TABLE>

Devices & Hardware

Portafolio de programación Joe Holguin 2c2