UNIVERSIDAD TECNOLÓGICA

DE EL SALVADOR

TEMA: Tarea Evaluación 1

MATERIA:

Programación IV

CATEDRÁTICO: Prof. Juan Ramiro García Durán

SECCIÓN:

01

ALUMNO: CARNET: Gilberto Antonio Rodas Rivas 25-0965-2006

San Salvador, 16 de febrero de 2010

Lenguaje de programación para paginas web

HTML

1. Introducción El HTML no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. A medida que nos afianzamos en el manejo de Internet cada uno de nosotros pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas páginas, luego nos damos cuenta que existen buscadores lo cual lo hace más interesante y por último nos damos cuenta que en Internet no solamente se puede ver la información sino que también se puede publicar. ¿y qué otra manera más fácil y más sencilla? Si Internet tiene acceso a todos los rincones del mundo. Para que varias personas se comuniquen es necesarios que éstas hablen un mismo idioma. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML. A través de esta monografía explicaremos que es HTML, sus orígenes y el proceso de creación de una página web. 2. Que es el HTML El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html Estos documentos pueden ser mostrados por los visores o “browsers” de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer. También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página. A continuación vamos a hablar un poco de historia: 3. Orígenes del HTML 1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language, origen del HTML. 1989. Tim Berners-Lee, a la sazón en el Centro Europeo de Investigaciones Nucleares presenta su artículo Information Management: A Proposal dedicándose de lleno al desarrollo de un sistema que permitiera el acceso en línea de manera uniforme a la información disponible en muchos

recursos distintos, y que pudiese funcionar en máquinas que conectadas por redes basadas en TCP/IP. 1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup Language), que más tarde se llamará nivel 0; soporta encabezados, listas y anclas. Se crea el nombre World Wide Web. 1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y sólo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso público de World Wide Web el 17 de mayo (http://info.cern.ch). 1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el lenguaje, llamada HTML 1.0, agregando a la definición original atributos para modificar el estilo físico del texto. Se distribuye Viola, primer visor gráfico de Web y disponible sólo para X.11. 1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de Kansas, si bien lee sólo texto. Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno gráfico que se hace disponible para computadoras personales, lo que lo hace inmediatamente popular. A fines de año, comienzan a aparecer los primeros artículos sobre WWW en diarios y revistas de circulación masiva. Tim Berners-Lee utiliza el trabajo del año anterior de Connolly para presentar el borrador de la primera norma (RFC -Recommendation for Comments) de HTML para Internet. 1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con mayores prestaciones para HTML, Hyper-G, que no tiene gran éxito. Cello, primer visor de HTML que no requiere TCP/IP presentado por la Escuela de Leyes de la Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World Wide Web, Netscape (también conocido como Mozilla), que tiene una amplia aceptación entre los usuarios, pero que soporta elementos de programación que equivalen a una degeneración del HTML (tamaños de letra, fondos). Se define un equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que permite moverse dentro de los ambientes definidos. En este mismo año se realizan la Primera y Segunda conferencias internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization. 1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas. Microsoft produce su primer visor de Internet, el cual también utiliza elementos de HTML degenerados. Una nueva versión de Netscape, Navigator 2.0, agrega soporte de encuadres. Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de programación, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacífico en Wagga-Wagga. 1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la modelación en tres dimensiones, VRML 3.0, que permite interactuar con los objetos definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt.

1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio, aparece la versión 4.0, experimental.

1998. HTML 4.0.

4. Creación de páginas web con lenguaje HTML Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver. Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. A continuación les mostraremos las etiquetas mas comunes que deben aprenderse para hacer una pagina Web.

Estructura de los documentos de HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo. La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento <TITLE>. En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden: Ejemplo: <HTML> <HEAD> <TITLE> Título de mi página de Internet </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaremos en condiciones de hacer cosas mas interesantes. <P> Aquí va un segundo párrafo. </BODY> </HTML> Para escribir títulos se usa la etiqueta <Hx></Hx> en donde x es un número. Ejemplo: <h1>Titulo principal</h1> <h2>Titulo secundario</h2> <h3>Titulo terciario</h3> <h4>Titulo cuarto nivel</h4>

<h5>Titulo quinto</h5> <h6>Titulo sexto</h6> Quedaría mas o menos así: Titulo principal Titulo secundario Titulo terciario Titulo cuarto nivel Titulo quinto Titulo sexto 5. Etiquetas de párrafo Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea. Para alinear un párrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes: <p align="left"> Párrafo... </p> Alinea a la izquierda. <p align="center"> Párrafo... </p> Realiza un centrado. <p align="right"> Párrafo... </p> Alinea a la derecha. Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando <BR>. Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es <HR> Etiquetas para darle formato al texto: Para el tamaño y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamaño (Size), Tipo de letra o fuente (face) y color Formato: <B> y </B> Sirve para colocar un texto en Negrita. <U> y < /U> Sirve para subrayar un texto <STRIKE> y </STRIKE> Sirve para tachar un texto. <STRONG> y </STRONG> Cumple la misma función que <B> <I> y <I> Para colocar un texto en cursiva. <EM>texto con énfasis</EM> texto con énfasis <CITE>citación</CITE> citación <DFN>definición</DFN> definición <KBD>teclado</KBD> teclado <SAMP>ejemplo</SAMP> ejemplo SIZE: Regula el tamaño de los caracteres. Ejemplo:<FONT SIZE="3"> texto... </FONT>. FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc. Ejemplo: <FONT FACE=”ARIAL”> texto…</FACE>

Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML:

1. Mediante la especificación de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Mediante la especificación del nombre del color en ingles Ejemplos:

<FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF

<FONT COLOR="BLACK">Negro</FONT> Negro #000000

<FONT COLOR="RED">Rojo</FONT> Rojo #FF0000

<FONT COLOR="GREEN">Verde</FONT> Verde #00FF00

<FONT COLOR="BLUE">Azul</FONT> Azul #0000FF

<FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00

<FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF

<FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF

Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web.

Si especificamos el nombre del color, podemos evitar la definición del color en forma hexadecimal que es un poco más difícil. Actualmente están estandarizados tan sólo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web.

Primero que todo debe escribir un símbolo #. A continuación siguen las 6 cifras para la definición del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 últimas el valor azul. Las cifras hexadecimales son:

0 (corresponde al decimal 0) 1 (corresponde al decimal 1) 2 (corresponde al decimal 2) 3 (corresponde al decimal 3) 4 (corresponde al decimal 4) 5 (corresponde al decimal 5) 6 (corresponde al decimal 6) 7 (corresponde al decimal 7) 8 (corresponde al decimal 8) 9 (corresponde al decimal 9) A (corresponde al decimal 10) B (corresponde al decimal 11) C (corresponde al decimal 12)

D (corresponde al decimal 13) E (corresponde al decimal 14) F (corresponde al decimal 15)

(mirar el cuadro anterior)

Para ponerle color de fondo a la página escribir: <body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro. Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo. Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes: text="#número" Para el color del texto. link="#número" Para el color de los enlaces. vlink="#número" El color con que aparecerán los enlaces ya visitados. alink="#número" Color del enlace cuando lo pulsamos.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo: <body background="/documentos/html/gifs/dragonball.gif"> Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.

Etiquetas META Son usadas para poner meta-información del documento. Esta “directiva” indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. Ejemplo: <META NAME = "Pagina de Pablo" content = "Mi pagina personal de Sailor Moon"> Indica al visor el nombre de la página y sus contenidos principales. <META NAME="Author" content="Pablo Ravioli"> Indica el nombre de la persona que elabora la pagina WEB <META NAME = "keywords" content = "Información de Sailor Moon"> Indica al visor las palabras clave para los buscadores de Internet.

Para hacer listas: Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). Las listas pueden ser: Lista desordenada, <UL> (Unordered List). Lista ordenada, <OL> (Ordered List). Ejemplos de diferentes tipos de listas: Lista con números romanos: <ol>

<li type=I>Manzana

<li type=I>Zanahoria

<li type=I>Lechuga

<li type=I>Tomate </ol> Manzana Zanahoria Lechuga Tomate

Lista numerada:

<ol>

<li>Manzana

<li>Zanahoria

<li>Lechuga

<li>Tomate </ol> Manzana Zanahoria Lechuga Tomate

Lista con puntos: <ul> <li> Manzana <li> Zanahoria <li> Lechuga <li>Tomate

</ul> Manzana Zanahoria Lechuga Tomate

Lista con círculos: <ul> <li type=circle> Manzana <li type=circle> Zanahoria <li type=circle> Lechuga <li type=circle> Tomate </ul> Manzana Zanahoria Lechuga Tomate

Lista con cuadrados:

<ul>

<li type=square> Manzana

<li type=square> Zanahoria

<li type=square> Lechuga

<li type=square> Tomate </ul> Manzana Zanahoria Lechuga Tomate 6. Como insertar una imagen A la hora de crear una página Web podemos introducir gráficos de forma muy sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif o JPEG. La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar.

Es decir:

<IMG SRC="lugar donde guardo la imagen">

Supongamos que tenemos la imagen dragonball.gif, que está presente en el mismo directorio en donde está la página y que la queremos insertar. La etiqueta apropiada sería:

<IMG SRC="dragonball.gif">

Y el usuario verá en el browser:

Para poner la imagen en la izquierda escribir: <IMG ALIGN=LEFT SRC=" dragonball.gif "> A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif"> Y si se quiere poner la imagen en el centro: <P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>

Hiperenlaces, Hyperlinks, Anclas o Links Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto “pulse aquí para visitar la NASA” nos conduzca a la “home page” de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a> Que se vería de esta forma: Pulse aquí para visitar a la NASA Si queremos que el texto “Foto” nos lleve a una imagen tenemos que escribir: <a href=”imagen.gif”>Foto</a> entonces al hacer clic en el texto Foto nos abrirá la imagen.gif. También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una “manito”, al hacer clic nos envíe al buscador Altavista. Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli@fibertel.com.ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita. Caracteres especiales Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso &lt;. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación:

< (Menor que): &lt;

>(Mayor que): &gt;

& (símbolo de and, o ampersand): &amp;

" (comillas dobles): &quot; Es decir, que para escribir <"hola”> en nuestro texto HTML original debemos poner &lt;&quot;hola&quot;&gt;.

El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existe una forma fácil de hacerlo, que consiste en utilizar códigos como las que antes se presentaron para escribir ciertos símbolos. Los códigos comienzan siempre con el símbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del carácter que queremos que se escriba. Los códigos necesarias en nuestro idioma son:

á: &aacute; é: &eacute; í: &iacute; ó: &oacute; ú: &uacute; Á: &Aacute; É: &Eacute; Í: &Iacute; Ó: &Oacute; Ú: &Uacute; ü: &uuml; Ü: &Uuml; ñ: &ntilde; Ñ: &Ntilde; ¿: &#191; ¡: &#161; ?: &#63; !: &#33; @: &#64;

Por lo tanto la palabra página la podríamos escribir como :

página p&aacute;gina

Otro ejemplo: ¿En qué año estamos?

Sería: &#191En qu&eacute; a&ntilde;o estamos&#63;

Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes códigos para representarlas. Recuerden que las etiquetas se pueden escribir en mayúsculas o en minúsculas, es lo mismo poner <HTML>, <html> o <HtmL>. Una vez que terminamos de escribir todo nuestro documento, lo guardamos poniéndole un nombre, y necesariamente lo debemos guardar con la extensión .HTM o .HTML. Para ir visualizando lo que hemos estado haciendo tendríamos que abrir nuestro browser (Netscape o Internet Explorer), hacemos click en la opción FILE o ARCHIVO, estando allí seleccionamos OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el archivo y le damos OPEN. Luego le damos ACEPTAR, e inmediatamente se abrirá nuestra pagina. 7. Conclusión Sin HTML no existiría el Internet que hoy conocemos, si no se hubiera inventado, seguiríamos con el aburrido FTP (Protocolo de Transferencia de Ficheros) mandándonos o bajando archivos que a veces ni sabíamos lo que eran, sin tener la posibilidad de visualizarlo antes. Ahora por medio de una página llena de colores y botones por la cual se puede navegar, se puede tener acceso a bastante información y archivos. El lenguaje de HTML abrió una puerta al mundo permitiéndole a las personas expresar sus ideas por medio de páginas y mostrárselas a todas las personas de todos los países. Con el HTML se logró un gran movimiento económico ya que muchísimas empresas publican, venden, y ofrecen sus productos, sus servicios y sus ofertas atrayendo a mayor cantidad de personas. También gracias al HTML nacieron muchas empresas que ofrecen diversos servicios como Yahoo, Altavista, HotMail, Terra, Yupi, Mercadolibre, De Remate, etc. Infinitas son las posibilidades que te brindan las páginas WEB ya que no solo te dan la posibilidad de pasar el tiempo navegando, sino que también hasta se puede comprar un auto por Internet, solo basta con llenar un formulario con los datos personales y el número de tarjeta de crédito y en ocho días lo tenemos en nuestra casa. Todo el universo de Internet se lo debemos al HTML, ya que todas las páginas con las que se compone la World Wide Web están hechas con el lenguaje de programación HTML. 8. Bibliografía Clarín

Guía práctica de Internet Buenos Aires Editorial Sol 90 Barcelona 1999 Volumen 14 Páginas 316 a 323 Masanti Luis Alejandro Diseño WEB Ciudad de Buenos Aires Ñ Ediciones

Abril de 2000 Fascículo 01 Páginas 1 a 9 Sergio Talens Oliag - José Hernández Orallo

HTML. Manual de Referencia Editorial Paraninfo 1996 Thomas A. Powell – Mc Craw Hill

Manual de Referencia HTML Buenos Aires Osborne 1999 Capitulo 2

CSS 1.- INTRODUCCION 1.1.- Definición CSS son las siglas de Cascading Style Sheets. Estas Hojas de Estilo en Cascada son un lenguaje formal usado para definir el aspecto de un documento estructurado escrito en HTML y XHTML. Sirve tanto para presentarlo en la pantalla como para imprimirlo. El desarrollo de las CSS tiene como objetivo separar los contenidos de la página web de su presentación. Esta característica permite a los desarrolladores web controlar el estilo y el formato de múltiples páginas web al mismo tiempo. Este lenguaje da como resultado una mejor organización del código HTML, menos peso en las páginas y más flexibilidad en los cambios. Uno de los aspectos más importantes a la hora de crear una página web es la accesibilidad. Aproximadamente entre un diez y un veinte por ciento de la población padece algún tipo de discapacidad. Aplicar el principio básico de separar estructura de apariencia y aplicar ciertas reglas sencillas para hacer tus páginas perfectamente accesibles, producirá efectos secundarios positivos. Entre estos efectos podemos dar la posibilidad a un ciego, por ejemplo, de escuchar nuestros contenidos. La facilidad de mantenimiento del sitio web provoca más rápidez de carga y mayor accesibilidad para las diferentes tecnologías de navegación por la Web, como por ejemplo los robots indexadores de los motores de búsqueda. 1.2.- Versiones El W3C (World Wide Web Consortium) es el encargado, desde 1995, de formular la especificación de las hojas de estilo que servirán de estándar para los navegadores. En el año 1996 se publica la primera recomendación oficial conocida como CSS 1, que es soportada por todos los navegadores. Más tarde en 1998 se publica la recomendación CSS 2, que se revisó en 2007 y corresponde a la versión CSS 2.1. La cual es actualmente utilizada por los principales navegadores. Hasta llegar al 2009 con las nuevas especificaciones de CSS 3 que están todavía por terminar. Y que ya son muchos navegadores que se han dado prisa por integrarlas. Nota A lo largo del manual se han establecido diferentes notaciones de código para que se pueda apreciar cómo se distribuye tanto el HTML junto al CSS como separado. En algunos casos el código está completo para que pueda ser utilizado como referencia para futuros ejercicios. 2.- SINTAXIS CSS 2.1.- Reglas y su jerarquía CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XHTML.

Veamos los componentes sobre los que se basan las reglas CSS. La regla tiene dos partes: selector y declaración. § Un selector indica al navegador que elemento del documento se verá afectado por la regla. § Una declaración establece cuál será el efecto sobre ese elemento. Van entre llaves ( {} ). Y cada declaración está compuesta por: - Propiedad: especifica qué aspecto del diseño va a cambiarse. - Valor: da valor para la propiedad. Ejemplos: Partiendo de la sintaxis general: selector { propiedad: valor; propiedad: valor; ... } - el elemento p (párrafo) tiene el color (propiedad) azul (valor) p { color: blue} - en caso de que el valor contenga varias palabras irá entrecomillado p { font-family:”Times New Roman”} H1 { color: orange } Propiedad Valor Selector Declaración Regla - si lo que se desea es especificar más de una propiedad, entonces se separan por punto y coma (;) h1 { color:red; text-align:center; } - en caso de definir una misma propiedad para varios selectores se separan por una coma (,) p, h1, h2 { color: green; text-align:left; font-family: Arial; } El aspecto de un elemento depende del contenedor donde se encuentre, que a su vez es otro elemento. De esta forma podemos asignar un estilo específico dentro de ese elemento. Ejemplo: ol p {font-size: small} Se asigna un tamaño de fuente pequeña a todo el texto situado dentro de un párrafo <p>, que sólo contenga una lista desordenada <ol>. Es importante tener en cuenta que en la definición del estilo dejamos un espacio en blanco entre las etiquetas, esta sintaxis indica la jerarquía.

2.2.- Comentarios Son muy útiles los comentarios dentro del código HTML para breves aclaraciones que facilitan el entendimiento del mismo. La sintaxis es la siguiente: /* comentario */ 2.3.- Uso CSS Estas reglas pueden ser embebidas dentro del documento HTML o separadas en un archivo css. La ventaja de esta última opción, que ya hemos comentado, es que con una sola hoja de estilo cualquier cambio en un elemento afectará a todas las páginas HTML vinculadas a esa CSS. Esta flexibilidad de cambio supone un gran ahorro en tiempo y en espacio. Ejemplos: a/ Utilizar CSS dentro del documento HTML. Se especifica con el elemento <style>, y se sitúa en la cabecera del documento o <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo. <html> <head> <title>Hoja de Estilo Interna</title> <style type="text/css"> body { font-family: Arial, Georgia; color: blue; } </style> </head> <body> <h1>Aquí se aplica el estilo de letra para el Título</h1> <p>Aquí va el contenido principal de la web</p> </body> </html> b/ Utilizando una hoja de estilo externa que estará vinculada a un documento HTML a través del elemento <link>, también situado en la cabecera. Aunque se pueden crear enlaces a varios archivos css siempre prevalece el último en caso de que se definan más de un estilo para el mismo elemento. <html> <head> <title>Título del sitio web</title> <link rel="stylesheet" type="text/css href="styles.css" /> </head> <body> … </body>

</html> Donde, rel="stylesheet" indica que la relación es con una hoja de estilo. type="text/css" viene a decir que el tipo es texto y css. href="styles.css" es el nombre del documento que contiene el código css. 3.- CASCADA Y HERENCIA 3.1.- Cascada Resulta muy útil tener una hoja de estilo asociada a una o más páginas web. Ya que en algunos casos como sitios web grandes en las que el mantenimiento se realiza por varias personas, tener una sola CSS no cubre la totalidad de las necesidades del diseño. Por eso es preciso crear una jerarquía de hojas de estilo relacionadas. El estilo final es el resultado de la suma de todos los estilos definidos. A este proceso es a lo que se le llama Cascada. Tendremos una CSS con los aspectos básicos y generales del diseño y luego otra serie de CSS más particulares que serán modificadas por otras personas y haciendo que las reglas de todas las CSS actúen conjuntamente. Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro. El que actúa de contenedor es el elemento raíz donde están incluidos el resto de elementos, suele corresponder a <body> o a <html> o a una capa contenedora o <div>. 3.2.- Herencia En el conjunto de todas las etiquetas HTML podemos establecer una jerarquía en las que unas contienen a otras, para darnos una relación de Herencia. En primer lugar, tendríamos la etiqueta <BODY> ... </BODY>, que hace referencia a todo el documento, y podemos considerarla como la etiqueta "padre" de todas las demás etiquetas de formato, puesto que todas ellas se encuentran contenidas en él. Después, tenemos las etiquetas de párrafo (<P>...</P>, <DIV>...</DIV>, cabeceras, ...) y en tercer lugar tenemos las etiquetas de elementos insertados en línea (<B>...</B>, <I>...</I>, <SPAN>...</SPAN>, ...). Las etiquetas de párrafo serán contenedoras de las etiquetas de elementos insertados en línea, estableciéndose así una nueva relación "padre-hijo". La importancia radica en aplicar un estilo al elemento padre, de forma que todos los elementos que contiene hereden esta propiedad, sin necesidad de aplicarlo a cada elemento por separado. Hay algunas salvedades que hay que hacer: - No todas las propiedades se pueden heredar, ejemplo: bordes. - Al asignar una propiedad a un elemento, el valor reemplaza al heredado. - Se heredan los valores computados, por ejemplo, no se aplica 125% sino el resultado del cáculo. - El valor inherit puede aplicarse a cualquier propiedad de los elementos.

4.- EJEMPLO PRÁCTICO Vamos a crear una página html con dos estilos diferentes, que recogen algunas cosas que hemos visto y por supuesto algunas más para ver un ejemplo real. En un editor copiar y pegar el contenido de ejemplo1.html y guardarlo. Aquí las reglas CSS van incluidas en el código HTML. ejemplo1.html <html> <head> <title>Ejemplo de hojas de estilo</title> <style type="text/css"> body { background: orange; } H1 { color: green; font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: “Century Gothic”, Helvetica, sans-serif; text-align: center; } P { color: black; font-size: 10pt; line-height: 12pt; text-indent: 0.6in; font-family: "Century Gothic", serif;} </style> </head> <body> <H1>Ejemplo de hojas de estilo</H1> <P>CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos. </P> <P>El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:</P> <P><center>/* Este es un comentario en CSS */</center></P> </body> </html>

El resultado es el siguiente: Abrir otro nuevo y copiar y pegar el contenido de ejemplo2.html, guardar. Abrir otro documento y copiar y pegar el contenido de azul.css. En este caso las reglas CSS se encuentran en un archivo externo. ejemplo2.html <html> <head> <title>Estilo de página web</title> <link rel="stylesheet" type="text/css href="azul.css" /> </head> <body> <H1>Ejemplo de hojas de estilo</H1> <P>CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos. </P> <P>El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:</P> <P><center>/* Este es un comentario en CSS */</center></P> </body> </html> azul.css body { background: blue; } h1 { color: yellow; font-weight: bold; font-size: 12pt; line-height: 16pt; font-family: "Helvetica", "Arial", sans-serif; text-align: center; } p { color: white; font-size: 10pt; line-height: 12pt; text-indent: 0.5in; font-family: "Times", serif; }

5.- SELECTORES Los selectores hacen referencia a las etiquetas de nuestro documento HTML. Básicamente el selector va a indicar a qué parte de todo el código se le va a aplicar el estilo. A continuación veremos los tipos de selectores: 5.1.- Selectores de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Es decir, cualquier etiqueta HTML funciona como un selector. Solamente se indica con el nombre sin ningún tipo de carácter. Ejemplos: CSS h1 { color: blue; } HTML <h1>Este encabezado va en azul</h1> Resultado: Este encabezado va en azul CSS p { font-size: 12px; font-family: arial, helvetica; } HTML <p>Este párrafo tiene una fuente arial y un tamaño de 12 píxeles</p> Resultado: Este párrafo tiene una fuente arial y un tamaño de 12 píxeles En caso de que el navegador del usuario no tuviera cargada la fuente de letra arial, cargaría la helvética. 5.2.- Selectores de clase Se pueden definir diferentes estilos para un mismo elemento. Para ello recurrimos a class. Estos selectores utilizan nombres genéricos que no están relacionadas con las etiquetas HTML. Se antepone un . al nombre que demos a la clase. Ejemplo: CSS H1.rojo { color:red} p.verde { color:green} HTML <p class=”rojo”>El encabezado h1 es de color rojo</p> <p class="verde">Este párrafo es de color verde</p> Resultado: El encabezado h1 es de color rojo Este párrafo es de color verde El navegador se salta el formato de las etiquetas por defecto, si las tuviera, y aplica esta clase personalizada. Aunque se puede ir más allá y no tener que declararlo

en cada etiqueta. Esto se hace con la etiqueta <span> y </span>. Todo lo que haya entre ambas tendrá ese estilo. Ejemplo: CSS <style> .textorojo {font-size:12px; color:red;} </style> HTML <span class=”textorojo”> <h1>Este texto es de color rojo y tiene un tamaño de 12 px</h1> <p> y lo que escribo en este párrafo también</p> </span> Resultado: Este texto es de color rojo y tiene un tamaño de 12 px y lo que escribo en este párrafo también 5.3.- Selectores de id El selector de ID también recibe un nombre genérico y se aplica a los elementos HTML. Pero a diferencia del selector de clase es único en todo el documento. Podemos tener dos elementos con dos selectores class pero sólo uno con id. Es útil usarlo en la cabecera, el fondo, el copyright... etc. Se antepone una # al nombre de la clase. Ejemplo: CSS p#fondo_azul{font-style: italic; color: blue; } HTML <p id=”fondo_azul”>Este texto tiene color azul</p> <p>Este texto no tiene color azul</p> Resultado: Este texto tiene color azul Este texto no tiene color azul En este ejemplo vemos que en el primer caso el texto se presenta en color azul y en el segundo caso al no llevar clase el texto aparece sobre fondo blanco. 5.4.- Selectores contextuales La herencia de propiedades en CSS permite lograr una notación más compacta para las hojas de estilo. Desde este punto de vista se permite crear primero los valores por defecto y después enumerar las excepciones. Los selectores contextuales consisten en varios selectores simples separados por espacios (todos los selectores descritos hasta ahora eran selectores simples). Los selectores contextuales especifican una jerarquía de contenedores con que asociar un estilo. Ejemplo: CSS

H1 { color: red} H1 EM {color: blue} HTML <h1>Un título con una <em>palabra</em> enfatizada</h1> Resultado: Un título con una palabra enfatizada. Donde se aprecia un estilo para el título en color rojo y dentro otro estilo para el elemento 'EM' que a su vez tiene color azul. 5.5.- Pseudo-clases Las pseudo-clases se usan junto con el selector para agregarle a este algún efecto especial. El concepto de seudoclase tiene que ver con permitir que haya más información a disposición del diseñador en el momento de escribir la hoja de estilo. Las seudoclases son agregadas por el navegador, y referidas como "clases" por las reglas de estilo; y permiten diferenciar diferentes usos para un mismo elemento. El ejemplo típico son los hiperlinks; uno desearía que los enlaces visitados fueran diferentes de los que no han sido visitados; esto se logra mediante una construcción como: selector: pseudo-clase { propiedad:valor } Las diferentes posibilidades de las pseudoclases son las siguientes: • a:link Es el estilo de un enlace que no ha sido explorado por el usuario. • a:visited Es el estilo de un enlace que ha sido visitado. • a:active Estilo de un enlace seleccionado, mientras está siendo seleccionado. • a:hover Es el estilo de un enlace que tiene el ratón encima, pero sin estar seleccionado. Ejemplo: CSS A:link {font-family: sans-serif; color: #551177; text-decoration: none;} A:visited {background-color: orange; color: #000;} HTML <h1 class="normal">:link y :visited</h1> <p>Se aplican a los links que existen en esta página. Utilicen uno de ellos y cuando regresen, el que haya sido visitado habrá cambiado su aspecto.</p> <p><a href=" http://www.customerca.com/Style/CSS/ ">W3C: CSS</a></p> <p><a href=" http://jigsaw.w3.org/css-validator/ ">Validador CSS</a></p> Resultado: Al descargar la página, simplemente se visualiza el enlace según indique el estilo para A:link, sin decoración y color de letra morado. Una vez que se pincha sobre el enlace se visualiza el estilo que hayamos indicado en A:visited, para este caso un color de fondo naranja y un color de letra negro. Veamos a continuación como se presenta en el navegador:

6.- ESTILOS DE FONDO Y COLOR Existen propiedades de fondo que nos permiten modificar el color de fondo, insertar una imagen de fondo, su posición, si se repite, cuánto mide, etc. Para ello se debe establecer las características que queramos darle al elemento <body>. 6.1.- Estilos de Fondo ● Background-color Determina el color de fondo para un determinado elemento. Puede ser el body, un párrafo, etc. Ejemplo: <div style=”background-color:#ff0000;”> Este texto se muestra sobre un fondo rojo. </div> Resultado: Este texto se muestra sobre un fondo rojo. ● Background-image Inserta una imagen de fondo. Para usar esta propiedad es preciso indicar la dirección donde se encuentra la imagen. Ejemplo: <div style="background-image:url ('http://fondospantalla.org/imagen/1024/construcciones/urbanismo/urbanismo- 29.jpg'))"> ESTE TEXTO IRÁ SOBRE UNA IMAGEN DE FONDO </div> La ruta de las imágenes de fondo se indican a través de su URL, que puede ser absoluta o relativa. Una URL absoluta es aquella en la que indicamos al navegador la ruta completa para encontrar la página. En este ejemplo se ha utilizado una URL absoluta para poder visualizarla desde la red. Pero lo más recomendable es crear una carpeta que se encuentre en el mismo directorio que los archivos CSS y que almacene todas las imágenes utilizadas en el diseño de las páginas web. Por tanto una URL relativa es aquella que solo indica parte de la dirección de la página de destino y sólo se usan cuando se trata de páginas albergadas en el mismo servidor. Este ejemplo mostraría el mismo resultado que el caso anterior, la diferencia es la ruta de donde se obtiene la imagen: <div style="background-image:url(body{backgroundimage: images/urbanismo-29.jpg'))"> ESTE TEXTO IRÁ SOBRE UNA IMAGEN DE FONDO </div> Resultado: ● Background-repeat Si la imagen es más pequeña que el tamaño del fondo, con esta propiedad

podemos hacer que se repita tanto vertical (repeat-x) como horizontalmente (repeaty). Este comportamiento es útil para establecer un fondo complejo a una página web entera. De forma que descargándose en muy poco tiempo, se consigue cubrir completamente el fondo de la página. Ejemplo: <div style="background-image: url('images/test3.jpg');background-repeat: repeat-x;"> repetición de imagen de fondo en horizontal </div> Resultado: Una aplicación bastante habitual en las páginas web es la funcionalidad de la cabecera, es decir, la imagen o logotipo va a funcionar como enlace hacia la página inicial, cuando se pinche sobre él. Su sintaxis sería algo así: HTML <div> <a id="backpag" href="../html/index.html"></a> </div> CSS #backpag { background-image: url(../images/logo.jpg); width: 200px; height: 100px; display: block; } ● Background-position Con esta propiedad se fija el punto de inicio para la imagen de fondo tanto vertical como horizontalmente. Ejemplo: <div style="background-image:url(imagen/paleta.gif); background-repeat: norepeat; background-position:left top;"> INSERCIÓN DE UNA IMAGEN DE FONDO, QUE NO SE REPITE Y ESTÁ FIJADO. </div> La imagen paleta.gif aparece una sola vez, y está posicionada arriba a la izquierda. Resultado: 6.2.- Color Aunque existen varias maneras de definir el color en el estándar CSS, aquí veremos sólo la más utilizada: La notación hexadecimal se especifica con los valores RGB dentro de la notación #RRGGBB, donde RR es rojo, GG es verde y BB azul. Los valores van desde el 00 y el FF. Es decir indicaremos el color como #5500FF o en su forma abreviada color: #50F Ejemplo:

<div style=“color:#ff0000;”>Este texto lo veremos en color rojo.</div> Resultado: Este texto lo veremos en color rojo. 7.- ESTILOS PARA TEXTO CSS define numerosas propiedades para modificar la apariencia del texto. Podemos cambiar el tamaño del texto, el color del mismo, su anchura, su estilo e incluso su tipo de letra. Antes de ver los estilos, es preciso conocer las unidades de medida en que podemos expresar los valores. 7.1.- Unidades de Medida Hay que tener en cuenta que los valores se pueden expresar por distintas unidades de medida. Se pueden agrupar en los siguientes términos: ● Unidades absolutas-> in: pulgadas (1 pulgada son 2.54 cm), cm: centímetros, mm: milímetros, pt: punto (1 pt 1/72 pulgadas) y pc: picas. ● Unidades relativas-> em: 1em es igual a 1 vez el ancho de un letra “M”, ex: es el alto de la letra “x” y px: píxeles. ● Unidades porcentuales-> %: porcentaje. Ejemplos: span { font-size: 1pc } div.principal { width: 80% } border: {1px solid black } body { font-size: 1em } 7.2.- Tipos de fuente Font-family nos sirve para definir el tipo de fuente que queramos que tenga el texto. Si no le indicamos nada, el texto estará escrito en la tipografía que el usuario tenga en su sistema por defecto. Normalmente se especifica más de una familia de fuentes de letra debido a que sus nombres varían de una plataforma a otra. De forma que si en el ordenador del usuario que está leyendo la página no existe el primer tipo, se prueba con el siguiente, y así sucesivamente hasta llegar al último. Ejemplo: <div style=”font-family:Verdana, Georgia, Arial”> Este texto tiene una familia de fuente, que se verá según el navegador del usuario.</div> Resultado: Este texto tiene una fa milia de fuente, que se verá según el navegador del usuario. 7.3.- Tamaño de fuente Font-size es la etiqueta que nos sirve para indicar el tamaño a la letra. Se lo podemos indicar utilizando las unidades de medida de CSS o mediante los siguientes valores: xx-large, x-large, large, medium, small, x-small, xx-small; siendo “xx-small” el más pequeño y “xx-large” el más grande. Ejemplo:

<div style=”font-size:20px;”>Este texto tiene un tamaño de 20 px.</div> Resultado: Este texto tiene un tamaño de 20 px. 7.4.- Estilo de fuente Font-style nos indica un cambio en las características de la letra. Un estilo normal, itálica o cursiva. Ejemplo: <div style=”font-style:italic”> Este texto tiene un estilo itálica.</div> Resultado: Este texto tiene un estilo itálica. 7.5- Grosor de fuente Font-weight se refiere a la intensidad de la fuente. Se pueden ver estilos normal, bold (negrita), bolder (más negrita), lighter (más suave), etc. Como en esta muestra: 7.6.- Formatos de Párrafo A continuación vamos a ver cómo dar estilo a los párrafos. Se puede cambiar el alto de la línea, decorar el párrafo, alinearlo, sangrar la primera línea del párrafo, etc. ● Estilo text-decoration Para dar un estilo diferente al párrafo, podemos usar underline (subrayado), overline (línea superior), line-through (tachado), blink (parpadeo), o por defecto none (ninguna). Ejemplo: <span style=”text-decoration:underline;”>Este es el resultado de usar un subrayado al texto.</span> Resultado: Este es el resultado de usar un subrayado al texto. ● Estilo text-align Con este estilo podemos alinear el texto a la izquierda, derecha, centro o justificado. Sólo es aplicable a elementos de bloque. Ejemplo: <div style=”text-align:left;”>Este texto se ve alineado a la izquierda</div> <div style=”text-align:center;”>Este texto se ve alineado al centro</div> <div style=”text-align:right;”>Este texto se ve alineado a la derecha</div> Resultado: Este texto se ve alineado a la izquierda Este texto se ve alineado al centro Este texto se ve alineado a la derecha ● Estilo text-indent Con este estilo podemos realizar sangrados o margenes en la primera línea de un elemento de bloque, como un párrafo, simplemente indicándolo con un valor

numérico. Ejemplo: <div style="text-indent:15px;">Este texto tiene un sangrado de 15 píxeles.</div> <div style="text-indent:60px;">Este texto tiene un sangrado de 60 píxeles.</div> Resultado: Este texto tiene un sangrado de 15 píxeles. Este texto tiene un sangrado de 60 píxeles. ● Estilo text-transform Este estilo nos permite cambiar la apariencia del párrafo. Gracias a él podemos cambiar todo el texto a mayúsculas (uppercase), todo el texto a minúsculas (lowercase) o hacer que todas las primeras letras del párrafo se conviertan en mayúsculas (capitalize). Ejemplo: <span style="text-transform:uppercase;">Este texto se ve en mayúsculas. </span> <span style="text-transform:lowercase;">ESTE TEXTO SE VE EN MINUSCULAS.</span> <span style="text-transform:capitalize;">Y este texto convierte las primeras letras automáticamente a mayúsculas.</span> Resultado: ESTE TEXTO SE VE EN MAYÚSCULAS. este texto se ve en minúsculas. Y Este Texto Convierte Las Primeras Letras Automáticamente A Mayúsculas. ● Estilo vertical-align Especifica la posición relativa de un elemento respecto a la línea de escritura. Los valores que puede presentar son: baseline, sub, super, top, text-top, middle, bottom y text-bottom. Ejemplo: IMG { vertical-align: bottom } Resultado: Ejemplo de alineación de la imagen con respecto al texto ● Estilo line-height Indica la distancia entre una línea de escritura y la siguiente. Puede tomar cualquier valor absoluto de longitud o un porcentaje que indica la altura con respecto al alto de la letra. Ejemplo: <p style="line-height: 25px;"> En este párrafo cada una de las líneas está separada de la siguiente por 25 píxeles. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas. </p> Resultado:

En este párrafo cada una de las líneas está separada de la siguiente por 25 píxeles. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas. ● Estilo word-spacing Permite expandir o contraer el espacio entre palabras. Puede tomar cualquier valor de longitud y el valor normal es 1em. vertical-align: bottom Ejemplo: <p style="word-spacing: 3px;">En este párrafo cada palabra está separada de la siguiente por 3 píxeles</p> Resultado: En este párrafo cada palabra está separada de la siguiente por 3 píxeles. ● Estilo letter-spacing Permite expandir o contraer el espacio entre letras. Puede tomar cualquier valor de longitud y el valor normal es 0.3em. Ejemplo: <p style="letter-spacing:2cm">Este párrafo tiene las letras espaciadas por 2 centímetros. </p> Resultado: E s t e p á r r a f o t i e n e l a s l e t r a s e s p a c i a d a s p o r 2 c e n t í m e t r o s. 7.7.- Encabezados y títulos Los encabezados o headings sirven para denotar una importancia jerárquica dentro de la página o documento. Cuando hablamos de título podemos estar refiriéndonos al texto colocado entre las etiquetas <title> y </title> en el head, y que se refiere al título que aparece en la barra del navegador. O también al título que aparece en la página web dentro de la cabecera. Existen 6 niveles, siendo el número 1 de mayor importancia y el 6 de menor importancia: Corresponden a: H1: Título de un capítulo o nombre del sitio web H2: Título principal H3: Título de secciones en la página H4: Título de una subsección H5: Subtítulo de una subsección H6: Segundo subtítulo Resultado: Por supuesto que estos encabezados pueden ser modificados para adaptarlos a nuestras necesidades, de la siguiente forma: HTML <h2>Texto con formato H2: MUNDO VEGETAL</h2>

<h4>Texto con formato H4: Su Estructura</h4> CSS h2 { color: #557700; padding-left: 20px; } h4 { color: #00FF00; padding-left: 40px; } </style> </html> Resultado: Texto con formato H2: MUNDO VEGETAL Texto con formato H4: Su Estructura Se ha dado un color al encabezado h2 con un margen a la izquierda de 20 píxeles y otro color al encabezado h4 con un margen a la izquierda de 40 píxeles. Ahora surge la siguiente pregunta ¿Qué diferencia hay entre un <h1> y un <font size="6px">? Pues mucha. Desde el punto de vista de la accesibilidad web e independientemente de que se vea desde una PDA, o un móvil, o por Braille; éstos dispositivos reconocerán que ése texto es un título H1, por el contrario si solo es un texto con tamaño grande, estos dispositivos no lo reconocerán, y creerán que es un simple texto más, por lo tanto se crea una mala accesibilidad. 8.- MODELO DE CAJA 8.1.- Definición El modelo de caja es la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. Este modelo hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares y con CSS se controla su aspecto. CSS permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja. Además, controla la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento. Fundamentalmente el modelo de cajas es muy útil para tener el control de las propiedades del elemento en sí (su color, la fuente usada para el texto, etc.), y también de las propiedades de esa caja generada por el elemento (sus margenes, sus bordes, la posición dentro del documento). Esto nos permite componer de forma visual la página de una forma más rica y flexible que con HTML. Cada vez que se inserta una etiqueta o elemento en la página, se crea automáticamente una nueva caja rectangular que encierra los contenidos del

elemento. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

párrafo, una imagen, el texto de una lista de elementos, etc.)

encierra.

El siguiente esquema muestra la creación de cajas por parte de HTML para cada elemento definido en el código HTML de la página: margin (margen exterior) border (borde) padding (margen interior) contenido (elemento) Los elementos dentro del modelo de caja tiene un márgen interior (padding) y un márgen exterior (margin) El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos). Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. 8.2.- Tipos de Elemento El modelo de formato visual de CSS que siguen los navegadores para procesar el contenido de un documento para su visualización, se rige por el comportamiento de las cajas generadas por los elementos de la página. Como más adelante veremos, existen propiedades (bordes, margenes, rellenos) que pueden aplicarse al modelo de cajas y también hay propiedades que definen su color o imagen de fondo. Ahora vamos a ver los tipos de elementos que contendrán esas cajas, cómo se puede definir el tipo y dimensiones de esas cajas, su comportamiento y relación con las otras cajas en la estructura del documento. Para comenzar debemos saber que en HTML existen tres tipos de elementos: Elementos de bloque Son aquellos tratados visualmente como bloques separados de los elementos que lo rodean (por ejemplo: <P> o <DIV>). Es decir, son aquellos que comienzan una nueva línea dentro del documento. Los elementos a nivel de bloque generan una caja de bloque principal que sólo contiene otras cajas de bloque. Elementos de línea

Son aquellos que forman un contenido distribuido a nivel de las líneas (por ejemplo: <B> o <EM> o <SPAN>). Elementos de lista Son elementos de bloque que generan una caja principal y otras cajas adicionales (contienen una viñeta o caracteres alfanuméricos) que se agregan al costado del elemento. Ejemplo: CSS #cuadro {border: 1px dotted blue;} #texto {color: red;} HTML <div id="cuadro"> <h4>EJEMPLO DE DIV Y SPAN</h4> <p>Esto es un párrafo dentro de un div, <span id="texto"> y esto un span dentro de un párrafo. </span> </p> </div> Resultado: EJEMPLO DE DIV Y SPAN Esto es un párrafo dentro de un div, y esto un span dentro de un párrafo. 8.3.- Propiedades 8.3.1.- Anchura y Altura La propiedad CSS que controla la anchura de los elementos se denomina width. Normalmente se expresa en píxeles o porcentaje, éste último se calcula a partir de la anchura de su elemento padre. Esta propiedad puede aplicarse a elementos que contienen texto, pero es más útil para elementos reemplazados tales como imágenes. Ejemplo: <html> <head> <style type="text/css"> .ancho { width: 340px; border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="ancho">PARRAFO CON UN ANCHO DE 340 PIXELES</p> </body> </html> Resultado: La propiedad height define la altura del elemento. Se expresa también como width, aunque ninguno de los dos en términos negativos. Ejemplo:

<html> <head> <style type="text/css"> .altura{ height: 100px; border: 1px solid #00FFFF; padding: 5px} </style> </head> <body> <p class="altura">PARRAFO DEFINIDO CON UNA ALTURA DE 100 PIXELES</p> </body> </html> Resultado: 8.3.2.- Margen y relleno Margen o Margin determina la anchura del margen de la caja. Entendemos como margen al espacio que hay entre el borde de la caja y los elementos que la rodean o respecto a los bordes del documento. Se puede expresar en píxeles o porcentaje y también con valores negativos. La anchura de los margenes se puede establecer por separado permitiendo dar a la caja diferente margen por cada lado, utilizando para ello sus derivaciones para cada orientación: § MARGIN-TOP (superior) § MARGIN-BOTTOM (inferior) § MARGIN-LEFT (izquierdo) § MARGIN-RIGHT derecho) Si solo se indica un valor, todos los margenes tienen ese valor. Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los margenes izquierdo y derecho. Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los margenes izquierdo y derecho. Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo. Los margenes verticales (margin-top y margin-bottom) sólo tienen efecto en los elementos de bloque y las imágenes, mientras que los margenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento. Relleno o padding define la distancia interior entre el borde y el contenido de la caja. Los valores se expresan en píxeles o porcentaje y no admite valore negativos. La anchura del relleno se puede establecer por separado permitiendo dar a la caja diferente relleno por cada lado, utilizando para ello: § PADDING-TOP (superior) § PADDING-BOTTOM (inferior) § PADDING-LEFT (izquierdo)

§ PADDING-RIGHT (derecho) También ocurre como en el margen que según se indique de uno a cuatro valores anteriores se definirán el relleno superior, inferior, izquierdo y derecho. Ejemplo de margin y padding: <html> <head> <style type="text/css"> h4{margin:10px; padding:20px; border:thin solid green} p{padding:10px;} </style> <title>Ejemplo de padding y margin</title> </head> <body> <h4>Fragmento del libro más famoso de Don Miguel de Cervantes: El Quijote.</h4> <p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. <p>Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.</p> <p> El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino.</p> </body> </html> Resultado: Como se aprecia en la imagen el título presenta un borde, por lo que se entiende fácilmente sus margenes, al contrario que el margen interno que presenta el texto, que los 10px imprimen una mayor distancia entre los párrafos. En muchos casos es recomendable resetear a cero padding y margin para toda la página web: * { margin: 0; padding: 0; } 8.3.3.- Bordes CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo. ● border-width Esta propiedad determina, la anchura del borde de la caja. El borde se sitúa entre el fin del área de relleno y el comienzo del área de margen. Como en los casos

anteriores, la anchura del borde se puede establecer por separado para cada uno de sus lados. Los valores que puede tomar son: thin (borde fino), médium (borde mediano), thick (borde grueso) o un valor exacto. ● border-color Esta propiedad determina el color del borde de la caja. Los valores que puede tomar son los siguientes: valor (la palabra clave que define al color o un código hexadecimal de 6 caracteres como red #ff0000, yellow #ffff00, white #ffffff, green #008000, blue #0000ff, black #000000, silver #c0c0c0, gray #808080) o bien transparent. ● border-style Esta propiedad determina el estilo de la línea del borde de la caja. Los valores que puede tomar son los siguientes: none (ningún borde, el ancho es cero), hidden ( Igual que 'none', excepto en términos de resolución de conflictos de bordes para los elementos de tablas), dotted (una serie de puntos), dashed (una serie de pequeños segmentos de líneas), solid (línea contínua), double (dos líneas sólidas, y la suma de las dos líneas y el espacio entre ellas es igual al valor de 'border-width'), groove ( como si estuviera tallado en el lienzo), etc. ● Border Esta propiedad determina todas las propiedades de los bordes resumidas, es decir, la anchura, el color y el estilo del borde de la caja. El orden de los valores es el siguiente: border-width, border-style, border-color. ● Border-radius: CSS 3 ha incorporado esta nueva propiedad para el control de los bordes con las esquinas redondeadas y también bordes con imágenes (incluso varias imágenes se pueden utilizar para definir el aspecto del borde, sombras, etc.) La propiedad border-radius, que permite definir bordes redondeados en las esquinas, se establece especificando las medidas del radio que deben darse a la curva de las esquinas. Ejemplo: border-radius:5px; Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que las especificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es: -moz-border-radius Y por lo que respecta a Internet Explorer hay que decir que todavía no soporta este atributo de CSS 3. Ejemplos de border: <style type="text/css"> div{ padding: 5px; }

div.bordesolido{ border-color: #df01d7; border-width: 2px; border-style: solid; } .bordeporlados{ border-top: 8px double #44889f; border-right: 2px dotted #ff8833; border-bottom: 2px solid #990033; border-left: 3px dashed #9097ff; } div.bordegroove{ border: 5px groove #66cc66; } div.borderidge{ border: 10px ridge #6666cc; } div.bordeinset{ border: 10px inset #3333ff; background-color: #2E9AFE; } div.bordeoutset{ border: 10px outset #cccccc; background-color: #cccccc; } </style> 9.- LISTAS Y TABLAS 9.1.- Listas Las listas sirven para citar, numerar y definir elementos. También son utilizadas para desplazar el comienzo de línea hacia la derecha. Veamos sus tipo: ● Listas desordenadas Una lista desordenada viene definido por la etiqueta <ul> y </ul> y cada elemento viene definido por <li> la cual no hace falta cerrar. La viñeta que se antepone al elemento puede ser un circulo, cuadrado, etc. Ejemplo: <p>Colores</p> <ul> <li>Azul <li>Verde <li>Morado </ul> Resultado:

Colores • Azul • Verde • Morado ● Listas ordenadas Una lista ordenada viene definido por la etiqueta <ol> y </ol> y cada elemento viene definido por <li> la cual no hace falta cerrar. La viñeta de las listas ordenadas se sustituye por ordenaciones (alfabéticas o numéricas). Ejemplo: <p>Los Top Cinco de la ATP</p> <ol type="1"> <li>Rafael Nadal <li>Roger Federer <li>Andy Murray <li>Novak Djokovic <li>Juan Martin del Potro </ol> Resultado: Los Top Cinco de la ATP 1. Rafael Nadal 2. Roger Federer 3. Andy Murray 4. Novak Djokovic 5. Juan Martin del Potroero ● Listas de definición Las listas de definición se diferencian de las anteriores en que cada ítem está compuesto por un par de elementos: un término y su definición. Se usan estas etiquetas: <dl> para crear la lista, <dt> para cada término y <dd> para las definiciones. Ejemplo: <p>Diccionario de la Real Academia</p> <dl> <dt>Numerar <dd>Contar por el orden de los números. Expresar numéricamente la cantidad. Marcar con números. <dt>Enumerar <dd>Enunciar sucesiva y ordenadamente las partes de un conjunto. </dl> Resultado: Diccionario de la Real Academia Numerar Contar por el orden de los números. Expresar numéricamente la

cantidad. Marcar con números. Enumerar Enunciar sucesiva y ordenadamente las partes de un conjunto. A partir de estos tipos se pueden crear listas anidadas que resultan de una mezcla de las anteriores. Su uso está ampliamente extendido para realizar menús horizontales o verticales. Veamos como esta técnica permite construir menús de listas horizontal: HTML <div id="menu"> <ul> <li><a href="#">Botón Izquierdo</a></li> <li><a href="#">Botón Centro</a></li> <li><a href="#">Botón Derecho</a></li> </ul> </div> #-> nombre del archivo html entrecomillado que actúa como enlace. Esto se visualiza de la siguiente manera: CSS #menu ul { padding: 0px; margin: 0px; background-color: #333; list-style: none; font-size: 14px; font-weight: bold; width: 100%; height: 30px; float: left; } #menu ul li { display: inline; (esta propiedad dispone la lista en horizontal) } #menu ul li a:link, #menu ul li a:visited { background-color: #333; color: #FFF; padding: 5px 15px; float: left; text-decoration: none; } #menu ul li a:hover, #menu ul li a:active{ color: #0080FF; background-color: #F5F6CE;

height: 20px } Y al añadir estilo obtenemos en lugar de una enumeración un menú que nos posibilita acceder a través de enlaces a otras partes de la página web. Resultado: 9.2.- Tablas Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos tipos de contenidos, como textos, texto preformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc. Se crea con la etiqueta principal <table> y </table>. Dentro de esta etiqueta vamos creando las distintas filas con la etiqueta <tr> y </tr>, y en cada fila las celdas a través de la etiqueta <td> y </td>. Las celdas de cada fila se ordenan automáticamente de izquierda a derecha. Dentro de estas etiquetas de celda es donde colocaremos nuestro contenido. Además cada tabla puede tener un título que asignaremos con el elemento <caption>. Y el elemento <th> define una celda que contiene información de encabezado. No deberían usarse tablas con la única finalidad de organizar la presentación de los contenidos de un documento , ya que esto puede ocasionar problemas cuando se represente en un medio no visual. Además, al incluir gráficos, estas tablas pueden forzar a los usuarios a hacer desplazar horizontalmente la pantalla para ver una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos problemas, los autores deberían usar hojas de estilo CSS en lugar de tablas para organizar la presentación. Ejemplo: <html> <head> <title>Ejemplo de tablas</title> </head> <body> <h1>tablas básicas</h1> <table border="1"> <tr> <th>cabecera 1</th> <th>cabecera 2</th> <th>cabecera 3</th> </tr> <tr> <td>primer dato</td> <td>segundo dato</td> <td>tercer dato</td> </tr> <tr> <td>cuarto dato</td> <td>quinto dato</td>

<td>sexto 6</td> </tr> </table> </body> </html> Resultado: No se entra en más detalle ya que últimamente se utiliza mucho más el modelo de caja (div) que las tablas. Esto es debido a las siguientes razones: 1.- Editando un solo archivo CSS se pueden hacer importantes cambios como cambiar un diseño completo en apenas tiempo. 2.- Los CSS externos se quedan almacenados en la caché de los navegadores por lo que se reduce el tiempo de descarga de un sitio web. 3.- CSS elimina código innecesario, mejorando el tiempo de carga. 4.- CSS permite hacer cosas más interesantes que el HTML por sí sólo. 5.- Un buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web. 6.- El uso de :hover en CSS elimina el uso de Javascript para crear efectos de onmouseover. 7.- Si quiere validación XHTML strict no le queda otro camino que usar este método. 8.- Además, en navegadores no visuales (de texto, para ciegos, o cualquier dispositivo que no sea un monitor) el resultado es totalmente imprevisible. 10.- POSICIONAMIENTO 10.1.- Definición de Posicionamiento El posicionamiento en CSS consiste en ubicar los elementos HTML en la pagina. Básicamente esto se logra ordenándole desde CSS a los elementos que tengan cierto tamaño y posición dentro de la web, obteniendo además una buena organización del código HTML o XHTML. El posicionamiento con CSS nos permite un control total sobre los elementos de la pagina, además con documentos muy livianos y completamente válidos ante el validador W3C. Cuando se solicita una página web, el navegador descarga el contenido HTML y CSS aplicando un procesamiento muy complejo antes de mostrar la página en la pantalla del usuario. Para cumplir con el modelo de cajas, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son: ▪ Las propiedades width y height de la caja (si están establecidas). ▪ El tipo de cada elemento HTML (elemento de bloque o elemento en línea). ▪ Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante). ▪ Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.)

▪ Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador. Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja en cualquier lugar del sistema de coordenadas. El origen de este sistema es la esquina superior izquierda. 10.2.- Tipos de elementos El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque. ● Los elementos de línea no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. Ejemplos: enlaces, basefont, br, font, img, label, select, span, strong, sup, textarea, etc. ● Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Ejemplo: address, blockquote, center, dir, div, dl, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, ol, p, table, ul. Existen otros elementos que pueden ser de línea y de bloque según las circunstancias: button, del, iframe, map, object, etc. Es por esto que según el tipo de elemento va a influir de forma diferente en el tipo de caja que el navegador crea que debe mostrar. 10.3.- Tipos de posicionamiento A continuación vamos a ver los tipos de posicionamientos definidos para las cajas y otras propiedades que afectan a la forma en la que se visualizan las cajas. Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja. Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles. El estándar de CSS define cinco modelos diferentes para posicionar una caja: 10.3.1.- Posicionamiento normal ó estatico Se trata del posicionamiento que utilizan los navegadores por defecto si no se indica lo contrario. La propiedad Position nos permite posicionar un elemento dentro de la página. Valores que presenta: top, right, bottom y left. Por lo que ninguna caja se desplaza respecto de su posición original, sólo se tiene en cuenta si el elemento es de bloque o en línea. 10.3.2.- Posicionamiento relativo Variante del posicionamiento normal que consiste en posicionar una caja respecto de su posición original. El desplazamiento de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left. Ejemplo: <span style="position:relative; background-color:#90EE90"> Posicion relativa verde</span>

<span style="position:relative; background-color:#ADD8E6"> Posicion relativa azul</span> <span style="position:relative; background-color:#FFB6C1"> Posicion relativo rojo</span> Resultado: Posicion relativa verde Posicion relativa azul Posicion relativa rojo 10.3.3.- Posicionamiento absoluto La posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento. El posicionamiento absoluto se emplea para establecer de forma precisa la posición en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante coordenadas, que vienen dadas por los atributos top, right, bottom y left. La interpretación de los valores es más compleja que en el posicionamiento relativo, ya que en este caso dependen del posicionamiento del elemento contenedor. Cuando se posiciona una caja se asigna independientemente de la posición de los otros elementos, entonces el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada. Esto hace probable que se produzcan solapamientos con otras cajas. Ejemplo: <span style="position:absolute; background-color:#90EE90"> posicionamiento absoluto del elemento padre en verde <span style="position:absolute; top:60px; left:60px; backgroundcolor:# ADD8E6">posicionamiento absoluto del elemento hijo en azul </span> </span> Resultado: posicionamiento absoluto del elemento padre en verde posicionamiento absoluto del elemento hijo en azul 10.3.4.- Posicionamiento fijo Variante del posicionamiento absoluto que convierte una caja en un elemento inamovible. El posicionamiento fijo se establece de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos y de si el usuario sube o baja la página en la ventana del navegador. La posición de la caja se calcula con respecto al posicionamiento absoluto, fijando la caja con respecto a alguna referencia. Por lo que hay casos en donde la caja se fija y no se mueve al realizar un desplazamiento, y otros casos donde la caja se fija con respecto a la página, como en el caso de la previsualización de un impreso. 10.3.5.- Posicionamiento flotante Se trata del modelo más especial de posicionamiento. Se usa la propiedad Float para definir cómo se disponen los elementos que se encuentran alrededor de una caja flotante, de forma que sus contenidos fluyen alrededor del elemento posicionado, es decir se alinean unos respecto a otros. Al posicionar una caja con float, automáticamente se convierte en una caja flotante, lo que significa que sólo se desplaza hasta la zona más a la izquierda (left) o

más a la derecha (right) de la posición en la que originalmente se encontraba, además es preciso definir su anchura, porque sino el estilo no se aplica. Destacar que este tipo de posicionamiento transforma cualquier elemento en un elemento de tipo bloque. Ejemplo: CSS <style type="text/css"> #floatdcha{ float: right; background: #3cf; width: 220px; padding: 10px; } </style> HTML <div id="floatdcha"> Aquí tenemos la propiedad float, para alinearse a la derecha. </div> Resultado: 10.3.6- Otras Propiedades ● Clear Esta propiedad indica cuál de los lados de la(s) caja(s) de un elemento no puede quedar adyacente a una caja flotante anterior. Es decir, no permite ubicar a los lados de una foto o texto ningún otro elemento flotante. Esta propiedad sólo puede especificarse para elementos a nivel de bloque (incluyendo también a los elementos flotantes). Los valores tienen significados como both, left o right. La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. Si se indica el valor left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo. ● Display La propiedad display permite ocultar un elemento haciendo que desaparezca de la página. Si el elemento oculto no existe, el resto de elementos se muestran como si no existiera y ocupan el hueco dejado por la caja oculta. Los valores que pueden mostrar pueden ser entre otros inline, block, none, inherit, etc. Ejemplo: 11.- EJERCICIO PRÁCTICO FINAL En este ejercicio final vamos a realizar el diseño y la maquetación de una página web con varias elementos y sus estilos. Para el desarrollo vamos a ir paso a

paso viendo como es la estructura básica de una web: • Contenedor principal: engloba al resto de elementos • Cabecera: acá puede ir un logo, el nombre de tu pagina web, un buscador... • Menú: podemos poner un menú vertical u horizontal con listas HTML • Contenido: donde irá el contenido de la web • Pie de pagina: podemos poner lo que necesitemos, desde el copyright hasta los enlaces recomendados La estructura visual puede quedar de la siguiente manera: Lógicamente este es un ejemplo tipo y que según las necesidades variará el número de elementos y su posición. Pero básicamente con esta estructura ya podemos realizar una página web básica. A partir del siguiente contenido, que copiaremos en un archivo llamado ejercicio_final.html, le añadiremos en un archivo externo su estilo, que se llamará estilo_final.css. CABECERA MENU CONTENIDOS PIE <html> <head> <title>Diseño básico para la creación de una página web con estilos CSS</title> <link href="estilo_final.css" rel="stylesheet" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <div id="imagen"></div> <div><h2>Arquitectura románica: Un blanco manto de iglesias</h2></div> </div> <div id="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Galeria</a></li> <li><a href="#">Listado</a></li> <li><a href="#">Contacto</a></li> </ul></div> <div id="central"> <p>Los siglos XI y XII atestiguaron una explosión en la actividad constructora, tanto pública como privada. La edificación de castillos y de iglesias absorbió la mayor parte del excedente de los recursos de la sociedad medieval y, al mismo tiempo, reflejó sus preocupaciones básicas: Dios y la guerra. Las iglesias fueron, por mucho, los más conspicuos de los edificios públicos. Como un cronista del siglo XI comentó:Al acercarse el 1000, la gente de todo el mundo, pero sobre todo de Italia y Francia,

comenzó a reconstruir sus iglesias. Aunque la mayor parte de ellas ya estaban construidas y no necesitaban grandes cambios. Las naciones cristianas rivalizaban entre sí por tener los edificios más bellos. Uno podría decir que el mundo estaba sacudiéndose, deshaciéndose de sus viejas vestiduras y ataviándose con un blanco manto de iglesia. Así, casi todas las catedrales y monasterios consagrados a diversos santos —e, incluso, las pequeñas capillas de las villas— eran reconstruidas por los fieles más hermosamente.</p> <p>Bóveda cilíndrica. Los siglos XI y XIII fueron testigos de una intensa actividad en la construcción de iglesias. Al utilizar la forma de la basílica los maestros constructores remplazaron los techos planos de madera por grandes cúpulas de piedra conocidas como bóvedas de cañón o bóvedas cilíndricas. Corno esta fotografía de una iglesia románica de Viena lo evidencia, la bóveda de cañón limitaba el tamaño de una iglesia y dejaba poco espacio para las ventanas.</p> <p>Cientos de nuevas catedrales, abadías e iglesias de peregrinación —así como miles de iglesias parroquiales de las villas rurales— se construyeron en los siglos XI y XII. La extraordinaria actividad constructiva reflejó tanto la cultura religiosa revivida como la riqueza incrementada de la época, gracias a la agricultura, el comercio y el crecimiento de las ciudades.</p> <p>Las catedrales del siglo XI y XII se construyeron con un estilo verdaderamente internacional: el estilo románico. La construcción de las iglesias exigió los servicios de maestros constructores profesionales, cuya contratación a lo largo de toda Europa garantizó una homogeneidad internacional de las características básicas. Ejemplos sobresalientes de las iglesias románicas pueden encontrarse en Alemania, Francia y España.</p> </div> <div id="pie">Realizado por nombre_apellido, copyright 2009. Todos los derechos reservados.</div> </div> </body> A continuación podemos ver cómo es este texto sin estilo: Veamos como darle un estilo a este contenido en Estilo_final.css: 1º Body Vamos a indicar en el body un color de fondo con la siguiente notación hexadecimal de #F5F6CE. 2º Contenedor Esta primera capa contendrá al resto de elementos. Es muy importante darle unas medidas de alto y ancho para toda nuestra página web. Por elle incluiremos un selector #contenedor que tiene un ancho de 1000 píxeles y un alto de 600 píxeles. 3º Cabecera El selector #cabecera tiene como color de fondo#81BEF7, y una altura de 120px. En la cabecera se insertarán dos cajas: 3.1 En la primera caja se insertará una imagen como fondo con las

dimensiones de 170 píxeles de ancho y 120 píxeles de alto y con un float a la izquierda, en un selector llamado #imagen. 3.2 En la segunda caja el título con un estilo h2, tendrá además que estar alineado en el centro y al que se le dará un margen tanto superior como a la izquierda de 50 píxeles y también con un float a la izquierda. 4º Menú Utilizando las listas vamos a disponer cuatro botones que se llaman Inicio, Galeria, Listado y Contacto. Las características que de los selectores son: 4.1 Al listado se le asigna un color de fondo #333, un ancho de caja del 100% con una altura de 30 píxeles y que la caja flote a la izquierda. Además aplicar estilo none a cada elemento de la lista, con un tamaño de letra de 14 píxeles y en negrita. 4.2 El listado disponerlo en horizontal. 4.3 Para el enlace link y visited, mostrar color de fondo de #333, sin ningún tipo de decoración, asignar un relleno superior e inferior de 7px y de 25px a derecha e izquierda, que la caja flote a la izquierda. Y para finalizar un color para el texto de #FFF. 4.4 Para el enlace hover y active, marcar una altura de 20 píxeles, color de fondo de #F5F6CE y color de texto #0080FF. 5º Contenido Al selector #central donde va a ir el contenido principal, asignar una altura de 410 píxeles y un relleno de 15 píxeles. Asignar un selector de clase llamado texto que tendrá una fuente de Arial, Helvetica, sans-serif con un tamaño de 12px. La primera linea de cada párrafo estará sangrada 25 píxeles y todos los párrafos han de estar justificados. Y por último otro selector de clase llamado resalte para asignar a los extractos del texto: “blanco manto de iglesia” y “el estilo románico”. Estará fuertemente resaltado en color #00F. 6º Pie Al selector #pie colorear el fondo con #81BEF7 y darle un borde de 2 píxeles, en color gris y textura sólida. A la caja asignar una altura de 25 píxeles. El texto que se encuentre alineado en el centro, con un tamaño de 11 píxeles. Tomará como fuente la que tenga por defecto el usuario.

Javascript

Conceptos básicos

JavaScript es un lenguaje interpretado en el cliente por el navegador al momento de cargarse la pagina, es multiplataforma, orientado a eventos con manejo de objetos, cuyo codigo se incluye directamente en el mismo documento HTML.

Hasta entonces ya se usaba HTML y JAVA, pero la aparición del JavaScript produjo una importante revolución, ya que dio al usuario la posibilidad de crear aplicaciones "on-line" osea modificar páginas web en tiempo real, sin usar CGI´s.

Caracteristicas

Es simple, no hace falta tener conocimientos de programación para poder hacer un programa en JavaScript.

Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos definir diferentes eventos. Dichos objetos facilitan la programacion de paginas interactivas, a la vez que se evita la posibilidad de ejecutar comandos que puedan ser peligrosos para la maquina del usuario, tales como formateo de unidades, modificar archivos etc.

Es dinámico, responde a eventos en tiempo real. Eventos como presionar un botón, pasar el puntero del mouse sobre un determinado texto o el simple hecho de cargar la página o caducar un tiempo. Con esto podemos cambiar totalmente el aspecto de nuestra página al gusto del usuario, evitándonos tener en el servidor un página para cada gusto, hacer calculos en base a variables cuyo valor es determinado por el usuario, etc.

Diferencia con JAVA

La principal diferencia es que JAVA es un lenguaje compilado, mientras que JavaScript es interpretado.

JAVA al compilar crea programas independientes, llamados APPLETS que se invocan desde una pagina Web, mientras que el codigo de JavaScript va incluido en la pagina.

Esta orientado a objetos de forma limitada ya que no maneja los conceptos de clase ni herencia.

En JavaScript no es necesario declarar el tipo de variable, ni debe existir las referencias al objetos antes de ejecutarlo, por lo que se habla de una ligazon dinamica a diferencia de la ligazon estatica del JAVA.

Principales aplicaciones

Si bien hoy en día, JavaScript, es un lenguaje muy usado, sus principales aplicaciones son:

Responder a eventos locales dentro de la página, como apretar un botón, La realización de cálculos en tiempo real. La validación de formularios dentro de una página. La personalización de la página por el usuario, que le permitirá tener una

página web a su medida. La inclusión de datos del propio sistema, como son la hora y la fecha.

Aunque según pasa el tiempo sus aplicaciones se van incrementando.

Donde incluirlo

Antes siquiera de que conozcamos la sintaxis o una primera orden de JavaScript, debemos saber primero cómo se incluye un script dentro de un documento HTML. El codigo JavaScript se inserta directamente en nuestra pagina HTML. Hay cuatro (4) maneras de hacerlo:

1. En el cuerpo del documento

Es decir entre los comandos <BODY> y </BODY> usando el comando <SCRIPT>

<HTML> <HEAD><TITLE>Titulo</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE=JavaScript> <!-- escondemos el codigo> document.write("Hola que tal"); // fin de esconder --> </SCRIPT> </BODY> </HTML>

Este codigo se ejecuta inmediatamente al cargar la pagina y lo que produce es un texto sobre la pagina, para ello use el metodo write del objeto document, que representa al documento actual. Nota que use un comentario <!-- --> para ocultar el codigo a los navegadores que no soportan JavaScript.

2. En archivo aparte

En este caso todo el codigo del script esta situado en otro archivo y se hace una llamada.

<HTML> <HEAD><TITLE>Titulo</TITLE></HEAD> <BODY> <SCRIPT SRC=codigo.js> </SCRIPT>

</BODY> </HTML>

Nota que aqui no fue neceario esconder ningun codigo y que los navegadores que no soporte el comando SCRIPT simplemente lo ignoraran.

3. Usando manejadores de evento

Los comandos de JavaScript son evaluados inmediatamente al cargarse la pagina. Las funciones son almacenadas, pero no ejecutadas, hasta cierto evento.

<HTML> <HEAD><TITLE>Titulo</TITLE></HEAD> <BODY> <A HREF="" evento=metodo o llamada a funcion interna>algo</A> </BODY> </HTML>

Nota que aqui es un evento el que dispara.

4. Haciendo una llamada a función

Dentro de la cabecera, despues del titulo. Es decir, entre los comandos </TITLE> y </HEAD> y luego la llamada a la funcion en el cuerpo.

<HTML> <HEAD> <TITLE>Titulo</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-- escondemos el codigo> function Ver() { alert("Le dije que NO !"); } // fin de esconder --> </SCRIPT> </HEAD> <BODY> No haga Clic <A HREF="Ver()">AQUI</A> </BODY> </HTML>

Observa que aqui se definio la funcion en la cabecera, pero recien se ejecuta al hacer clic en el enlace, que es el evento que llama a la funcion a la cual se le para un

parametro

Tipos de datos

JavaScript acepta diferentes tipos de datos:

Tipo Descripción Ejemplo

Números

Enteros Decimales (base 10)

Es una secuencia de digitos (0-9) que no comiencen con 0

1999

Enteros Hexadecimales (base 16)

Una secuencia de digitos (0-9) y letras (A-F) que comienza con 0x

0xE477

Enteros Octales (base 8)

Secuencia de digitos (0-7) que comiencen con 0 0777

Punto flotante

Puede tener un entero decimal, un punto, una fraccion (otro numero decimal), un exponente que consiste en la letra e seguida de un entero, el cual puede llevar un signo (+ o -).

3.14159, -2e4, 5e-12

Cadenas

Cadenas de caracteres

Consta de uno o mas caracteres encerrados entre comillas simples o dobles

"Hola", '1999'

Tambien pueden usar los siguientes caracteres

\f indica un avance de pagina (Form feed)

\n Indica nuva linea (New Line)

\r Indica un retorno de carro (Carruage return)

\t Indica un tabulador (Tab)

\" se puede incluir comillas. Ej: "José \"Chemo\" del Solar"

Logicas

Logicas Verdadero o falso true o false

Nulas

Nulas Es cuando la variable no toma ningún valor null

Expresiones

Es cualquier conjunto valido de constantes, variables y operadores que al evaluarse dan un unico valor del tipo numerico, cadena o logico.

Variables

Las variables son usadas para almacenar valores a ser evaluados. En JavaScript no es necesario declarar las variables ya que automaticamente se convierten al tipo necesario mientras se ejecutan los comandos. Por ejemplo podemos definir indica=true y luego asignarle un valor de otro tipo indica="prendido"

El nombre de una variable debe empezar por una letra o por el símbolo de subrayado ( _ ). Lo que siga a esto es indiferente. Pero diferencia mayusculas de minisculas. Por ejemplo podríamos definir como variables:

Nombre _Opción15 mes3

Estarían mal definidas las siguientes variables:

7opcion &inicio ¿nombre

Además también estaría mal si usaramos como variable:

goto new null

Debido a que son palabras reservadas del lenguaje. Una variable puede tener alcance local o global. Cuando es global se puede emplear en cualquier parte del programa. Las locales solo se pueden usar en la

funcion donde fueron definidas. Para crear una variable local le antepondremos la palabra var.

Variables tipo matriz

La sintaxis para crear la matriz es la siguiente: nombre=new Array(elementos), posteriormente para usarla se usa nombre[# de elemento].

Una forma de crear las matrices de forma automatica es con el siguiente codigo:

<SCRIPT LENGUAGE=JavaScript> function HacerMatriz(n) { this.length=0; for (var i = 1; i < n ; i++) { this[i]=0; return this; } } </SCRIPT>

Operadores y Estructuras

Operadores

Aritmeticos

+ Adicion

- Sustraccion

* Multiplicacion

/ Division

% Modulo

++ Incremento

-- Decremento

- Negacion

Cadena

+ Concatenacion.

Nota: Cuando se opera un valor de cadena con un numerico, el resultado es una cadena.

Sobre BITs

AND o & Devuelve un 1 en cada bit para el cual ambos operandos sean 1 y 0 en el resto.

OR o | Devuelve un 0 en cada bit para el cual ambos operandos sean 0 y 1 en el resto.

O-EX o ^ Devuelve un 1 en cada bit para el cual uno de los operandos sea 1 y el otro 0 y 0 en el resto.

NOT o ~ Devuelve un 1 en cada bit para el cual el operandos sean 0 y viceversa.

Logicos

&& Devuelve verdadero si ambos operandos son verdaderos y falso en el resto.

|| Devuelve falso si ambos operandos son falsos y verdero en el resto.

! Devuelve falso si operando es verdadero y viceversa.

Comparacion

== Devuelve verdadero si ambos operador son iguales.

!= Devuelve verdadero si ambos operador son difrenetes.

> Devuelve verdadero si operador izquierdo es mayor al derecho.

>= Devuelve verdadero si operador izquierdo es mayor o igual al derecho.

<: Devuelve verdadero si operador izquierdo es menor al derecho.

<= Devuelve verdadero si operador izquierdo es menor o igual al derecho.

Asignacion:

x=y Asigna a x el valor de y

x+=y Asigna a x el valor de x+y

x-=y Asigna a x el valor de x-y

x*=y Asigna a x el valor de x*y

x/=y Asigna a x el valor de x/y

x%=y Asigna a x el valor de x%y

x<<=y Asigna a x el valor de x=x<x<y

x>>y Asigna a x el valor de x=x>x>y

x>>>=y Asigna a x el valor de x=x>x>x>y

x&=y Asigna a x el valor de x=x&y

x^=y Asigna a x el valor de x=x^y

x|=y Asigna a x el valor de x=x|y

Prioridades de operación

1 [] O () Agrupar

2 !, ~, ++, -- Negacion, incemento y decremento.

3 *, / y % Multiplicacion, divicion y modulo.

4 + y - Adicion y sustracción.

5 >> y << Desplazamiento

6 >, >=, <, <= Relaciones

7 = y != Igualdad y desigualdad

8 & Y sobre bits

9 ^ O-EX sobre bits

10 | O sobre bits

12 && AND

13 || OR

14 ?: Condicional

15 =, +=, -= Asignacion

Estructuras

El JavaScript posee un juego de instrucciones compacto que permite añadir muchisima interactividad a las paginas Web.

Condicional

Permiten efectuar determinadas acciones en base a una condicion logica.

if

Es un condicional simple Sintaxis:

if (condicion) { instrucciones } [else { instrucciones }]

Nota: Tambien es posible usar la expresion condicional que es mas simples asi: condicion ? valor1 : valor 2. Si la condicion toma el valor de verdadero, la expresion toma el valor1 de lo contrario toma el valor2.

Bucles

Un bucle es un conjunto de comandos que se ejecutan repetitivamente un cierto numero de veces.

for

Permite un bucle repetitivo sabiendo de antemano el numero de ejecuciones que sera necesario.

Sintaxis:

for ([inicial;][final;][incremento]) {instrucciones }

Ejemplo: for (i=0; i<4; i++){alert("Ahora van "+i)}

while

Permite un bucle repetitivo cuyo numero de repeticiones dependera de una condicion. Aqui normalmente no sabemos de antemano el numero de repeticiones.

Sintaxis:

while (condicion) { instrucciones }

Control de bucle

Tenemos dos comando para el control de bucles: break que termina el bucle y transfiere el control del programa a la siguiente instruccion a continuacion del bucle. continue interrumpe la ejecucion de comandos y regresa el control al inicio del bucle.

Estructura Switch:

También existen ocasiones o programas donde se exige evaluar muchas condiciones a la vez en estos casos o se usan una condición compuesta muy grande o se debe intentar convertir el problema a uno que se pueda resolver usando la instrucción SWITCH.

Esta instrucción es una instrucción de decisión múltiple donde el compilador prueba o busca el valor contenido en una variable contra una lista de constantes, cuando el computador encuentra el valor de igualdad entre variale y constante entonces ejecuta el grupo de instrucciones asociados

a dicha constante si no encuentra el valor de igualdad entre variable y constante, entonces ejecuta un grupo de instrucciones asociados a un default, aunque este ultimo es opcional.

Sintaxis:

switch(var OPCION)

{

case const1: instrucción(es);

break;

case const2: instrucción(es);

break;

case const3: instrucción(es);

break; ..................

default: instrucción(es);

};

Objetos

Existen objetos predefinidos, cada uno con distintas propiedades, metodos y manejadores de eventos. A diferencia de JAVA aqui no se puede derivar clases, por los que se habla de unajerarquia de instancia.

Jerarquía de Objetos

Objeto

Windo

w:

window Es el objeto de nivel superior para cada grupo de objetos document, location e history.

Propiedades

DefaultStatus Mensaje por omision en la barra de estado de la ventana

document como document

Frame como Frame

frames Es un arreglo que contiene todos los recuadros de la ventana

length Indica el numero de recuadros de la ventana madre

location como location

name refleja el argumento nombre con que se creo la ventana

parent Es un sinonimo del argunmento nombre y se refiere a una ventana con recuadros

self Es un sinonimo del argumento nombre y se refiere a la ventana en uso

status

Especifica un mensaje a presentar en la barra de estado de la ventana. Principio del formulario

<>

Final del formulario

top Es un sinonimo del argumento nombre y se refiere a una ventana de nivel superior del navegador.

window Es un sinonimo del argumento nombre y se refiere a la ventana en uso

Metodos

open

Abre una nueva ventana en tu navegador, con una pagina en blanco o la URL que tu indiques. Principio del formulario

<>

Final del formulario

close

Cierra la ventana activa o indicada. Principio del formulario

<>

Final del formulario

alert

Muestra una caja de alerta con un mensaje y el boton de aceptar. Principio del formulario

<>

Final del formulario

confirm

Muestra una caja de informacion con un mensaje y los botones aceptar y cancelar. Principio del formulario

<>

Final del formulario

prompt

Muestra una caja de dialogo con un mensaje y un campo para entrada de datos y los botones aceptar y cancelar. Principio del formulario

<>

Final del formulario

setTimeout Evalua una expresion despues de transcurrido un tiempo en milisegundos

clearTimeout

Eventos

onLoad Se ejecuta cuando el navegador termina de cargar una ventana o todos los recuadros indicador en <FRAMESET>

onUnload Se ejecuta cuando el navegador descarga la pagina.

Objeto Document

METODOS

W R I T E

Escribe una o mas expresiones de HTML en el documento contenido en la ventana indicada.

Document.write(exp1[,exp2]...[,expN])

W R I T E L N

Escribe una o mas expresiones de HTML en el documento contenido en la ventana indicada, seguidas de un caracter de nueva linea.

Document.writeln(exp1[,exp2]...[,expN])

PROPIEDADES

B G C O L O R

Corresponde al parametro BGCOLOR del comando "BODY".

F G C O L O R

Corresponde al parametro TEXT del comando "BODY"

L I N K C O L O R

Corresponde al parametro LINK del comando "BODY"

V L I N K C O L O R

Corresponde al parametro VLINK del comando "BODY"

L O C A T I O N

URL completo del documento

Objeto String

string Es una cadena de caracteres encerrados entre comillas simples o dobles. Es un objeto basico en javascript.

Propiedades length Indica la longitud de la cadena. Sintaxis: string.lenght(nombre)

Metodos

anchor Crea un marcador HTML

big Hace que una cadena se muestre con tipos grandes, como si estuviera entre comandos <BIT>

blink Hace que una cadena parpadee, como si estuviese entre comandos <BLINK>

bold Hace que una cadena este en negritas, como si estuviese entre comandos <B>

charAt Devuelve el caractere en la posicion indicada (0 a length-1) de la cadena

fixed Hace que la cadena se muestre como si estuviese entre comandos <TT>

fontcolor Hace que la cadena se muestre en el color indicado, como si estuviese entre comandos <FONT COLOR=>

fontsize Hace que la cadena se muestre del tamaño indicado, como si estuviese entre comandos <FONT SIZE=>

indexOf Devuleve la posicion dentro de la cadena donde se encuentra el texto de busqueda. De iquierda a derecha.

italics Hace que la cadena se muestre en cursiva, como si estuviese entre comandos <I>

lastIndexOf Devuelve la ultima posicion dentro de la cadena en que se encuentra el texto de busqueda. De derecha a izquierda.

link Crea un enlace de hipertexto que apunta a otro URL

small Hace que un cadena se muestre con tipos pequeños, como si estuviera entre etiquetas <SMALL>

strike Hace que una cadena se muestre atravesada, como si estuviese entre etiquetas <STRIKE>

sub Hace que una cadena se muestre en subindice, como si estuviese entre etiquetas <SUB>

substring devuelve una subcadena de la cadena indicada, entre las posiciones indicadas.

toLowerCase Devuelve la cadena convertida en minusculas

toUpperCase Devuelve la cadena convertida en mayusculas

Eventos ninguno

Objeto Math

math Es un objeto predefinido que contiene propiedades y metodos para constantes y funciones matematicas.

Propiedades

E La constante de EULER. Aproximadamente 2.7818

LN2 El logaritmo natural de 2. Aproximadamente 0.693

LN10 El logaritmo natural de 10. Aproximadamente 2.302

LOG2E El logaritmo en base 2 de e. Aproximadamente 1.442

LOG10E El logaritmo vulgar de e. Aproximadamente 0.434

PI La constante PI. Aproximadamente 3.14159

SQRT1_2 La raiz cuadrada de 1/2. Aproximadamente 0.707

SQRT2 La raiz cuadrada de 2. Aproximadamente 1.414

Metodos ninguno

Eventos ninguno

Objeto Date

Date

Permite trabajar con fechas y horas. Para crear nuevos objetos se puede usar:

variable=new Date() variable=new Date("mes dia año horas:minutos:segundos") variable=new Date(año,mes,dia) variable=new Date(año,mes,dia,horas,minutos,segundos)

Propiedades ninguna

Metodos getDate el dia del mes (1 a 31)

getDay el dia de la semana (0=dom, 1=lun...6=sabado)

getMonth el mes en numeros (0=ene, 1=feb...11=dic)

getYear el año con dos digitos

getHours la hora (0 a 24)

getMinutes los minutos (0 a 59)

getSeconds los segundos (o a 59)

getTime los milisegundos trascurridos desde el 01-01-1970

getTimezoneoffset diferencia horaria con GMT en minutos

Sintaxis: variable.metodo()

setDate Establece el dia del mes (1 a 31)

setMonth Establece el mes del año (1 a 11)

setYear Establece el año a partir de 1900

setHours Establece la hora del dia (0 a 23)

setMinutes Establece los minutos (0 a 59)

setSeconds Establece los segundos (0 a 59)

setTime Establece el valor del objeto Date, en milisegundos a partir de las 0:00:00 del 1º de enero de 1970

Sintaxis: variable.metodo(valor)

toGMTString Convierte un objeto Date a una cadena usando un formato GMT para Internet

toLocaleString Convierte un objeto Date a una cadena usando el formato local

parse Convierte una cadena representando una fecha al tiempo en milisegundos a partir de 0:00:00 del 1º de enero de 1970

UTC Convierte una fecha al tiempo en milisegundos a partir de las 0:00:00 del 1º de enero de 1970

Eventos ninguno

Objeto Array

Array

Permite trabajar con arreglos.

Ejemplo:

Vector=new array().

Vector =["rojo", "verde","azul"]

array.length Nos da el número de elementos que tiene el arreglo.

arrray.push("ultimo") Es como una pila, pone el elementeto al final del arreglo.

arrray.pop() Quita un elemento del arreglo.

arrray.shift() Quita el primer elemento del arreglo.

arrray.unshift() Quita un elemento en la primera posición del arreglo.

arrray.join(":") Separador de Campo.

arrray.sort() Ordena ascendentemente los elementos.

arrray.reverse() Invierte las posiciones que tenemos.

Objeto Form

Este objeto permite manipular todos los formularios y sus elementos.

window.document.forms[]

window.document.forms[0].elements[0]

Principio del formulario

Final del formulario

Propiedades

elements[]

Esta propiedes tiene todos los elementos

de un formulario

window.document.forms[0].elements[0].value

action

especifico en el programa que quiero que se

ejecute

<form action:'ingreso.php' method="post" name:"formula1">

length

nos da el numero de elementos del formulario.

window.document.forms[0].elements[0].length

name

nos da el el nombre del elemneto deseado

window.document.forms[0].elements[0].name

Métodos

reset()

submit()

Objeto History

history Contiene la informacion de los URLs que el cliente ha visitado desde una ventana.

Propiedades Indica la cantidad de entradas en el objeto history. sintaxis: history.length

Metodos

back

retrocede al URL anterior. Principio del formulario

<>

Final del formulario

forward avanza al URL siguiente (despues de haber retrocedido).

go desplaza al URL indicado en relacion a la actual posicion, hacia adelante (+) o hacia aras (-). Sintaxis: history.go(desplazamiento)

Eventos ninguno

Objeto Number

Number

Este objeto representa el tipo de dato número con el que JavaScript trabaja. Podemos asignar a una variable un número, o podemos darle valor, mediante el constructor Number, de esta forma:

a = new Number(valor);,

por ejemplo,

a = new Number(3.2); da a a el valor 3.2.

Si no pasamos algún valor al constructor, la variable se inicializará con el valor 0.

Propiedades

MAX_VALUE. Valor máximo que se puede manejar con un tipo numérico

MIN_VALUE. Valor mínimo que se puede manejar con un tipo numérico

NaN. Representación de un dato que no es un número NEGATIVE_INFINITY. Representación del valor a partir del cual

hay desbordamiento negativo (underflow) POSITIVE_INFINITY. Representación del valor a partir del cual

hay desbordamiento positivo (overflow)

Para consultar estos valores, no podemos hacer: a = new Number(); alert(a.MAX_VALUE); porque JavaScript nos dirá undefined, tenemos que hacerlo directamente sobre Number, es decir, tendremos que consultar los valores que hay en Number.MAX_VALUE, Number.MIN_VALUE, etc.

Objeto Boolean

Boolean

Este objeto nos permite crear booleanos, esto es, un tipo de dato que es cierto o falso, tomando los valores true o false. Podemos crear objetos de este tipo mediante su constructor. Veamos varios ejemplos:

a = new Boolean(); asigna a 'a' el valor 'false' a = new Boolean(0); asigna a 'a' el valor 'false' a = new Boolean(""); asigna a 'a' el valor'false' a = new Boolean(false); asigna a 'a' el valor 'false' a = new Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true' a = new Boolean(true); asigna a 'a' el valor 'true'

Último nivel de Objetos

Text-Password

Propiedades

Disable

Maxlength

Name

Readonly

Size

Type

Value

Métodos

Focus()

Blur()

Text Area

Propiedades

Cols

Disbled

Name

Readonly

Rows

Type

Value

Métodos

Focus()

Blur()

Button

Propiedades

Disbled

Name

Type

Value

Métodos

Focus()

Blur()

Click()

Check

Propiedades

Disbled

Name

Checked

Type

Value

Métodos

Focus()

Blur()

Click()

Principio del formulario

Final del formulario

Radio

Propiedades

Disbled

Name

Checked

Type

Value

Métodos

Focus()

Blur()

Click()

Principio del formulario

Final del formulario

Select

Propiedades

Disbled

Length

Size

Name

Type

Value

Métodos

Focus()

Blur()

Principio del formulario

Final del formulario

Reset

Propiedades

Disbled

Name

Type

Value

Métodos

Focus()

Blur()

Focus()

Principio del formulario

Final del formulario

Submit

Propiedades

Disbled

Name

Type

Value

Métodos

Focus()

Blur()

Focus()

Principio del formulario

Final del formulario

Algo más en JAVASCRIPT...

Eventos En JavaScript

Principio del formulario

OnBlur: Acción al abandonar el Foco

OnClick: Acción al hacer un click sobre el botón.

OnChange: Accion al cambiar Texto.

OnFocus: Acción al llegal a la casilla.

OnReset: Realiza la Acción de resetear lo que se ha hecho.

Submit: Se acciona con un botón submit.

Unload: Acción al abandonar el documento.

OnDblClick: Acción al hacer dos click sobre el botón

OnMouseOver: Acción al pasar el ratón por encima de algo.

OnLoad: Acción al cargar el documento.

Final del formulario

Métodos Globales.

JavaScript incluye las siguientes funciones, que no son metodos de ningun objeto sino propias del lenguaje:

eval

Trata de evaluar una cadena y devolver un valor numerico, si el argumento es una expresion, la expresion se evalua, si el argumento consiste en uno o mas comandos, se ejecutan. Sintaxis: eval(cadena)

parseFloat

Convierte una cadena a un numero en punto flotante. Si se encuentra un caracter que no es numero, signo (+ o -), punto decimal o exponente, la funcion ignora la cadena a partir de esa posicion y la evalua hasta el caracter anterior. Si el primer caracter no se puede convertir, la funcion devuelve uno de estos valores: o en las plataformas Windows y "NaN" (Not a Number) para otras plataformas. Sintaxis: parseFloat(cadena)

parseInt

Convierte una cadena a un entero en la base especificada. Si no se especifica la base o se especifica cmo 0, se opta por lo siguiente: Si la cadena comienza con "0x", la base es 16 (hexadecimal), si la cadena empieza con 0, la base es 8 (octal), si la cadena comienza con otro valor, la base es 10 (decimal). Si se encuentra un caracter que no es numerico, la funcion ignora la cadena a partir de esa posicion y la evalua hasta la anterior. Si el primer caracter no se puede convertir, la funcion devuelve uno de estos valores: 0 para plataformas Windows y "NaN" (Not a Number) para otras plataformas. Sintaxis: parseInt(cadena [,base])

isNaN

Evalua un argumento para determinar si es "NaN", en plataformas UNIX, devolviendo un valor Booleano true o false. Sintaxis: isNaN(valor prueba). GetElementById y SetTimeOut

GetElementById()

GetElementById Permite referirnos a los elemento por su identificador ID y nodificarlos.

Estructura:

document.getElementById(id).style.propiedad

Ejemplo de Sintaxis:

document.getElementById('imagen').style.backgroundColor

(SetTimeOut)

setTimeOut

Evalua una expresión despúes de transcurrido un tiempo en milisegundos.

Este es un método del Objeto Window

Correspondencia entre propiedades CSS y propiedades DOM

Propiedad CSS Propiedad DOM en Javascript background background background-attachment backgroundAttachment background-color backgroundColor background-image backgroundImage background-position backgroundPosition background-repeat backgroundRepeat border border border-color borderColor border-style borderStyle border-top borderTop border-right borderRight border-left borderLeft border-bottom borderBottom border-top-color borderTopColor border-right-color borderRightColor border-bottom-color borderBottomColor border-left-color borderLeftColor border-top-style borderTopStyle border-right-style borderRightStyle border-bottom-style borderBottomStyle border-left-style borderLeftStyle border-top-width borderTopWidth border-right-width borderRightWidth border-bottom-width borderBottomWidth border-left-width borderLeftWidth border-width borderWidth

clear clear clip clip color color display display float cssFloat font font font-family fontFamily font-size fontSize font-style fontStyle font-variant fontVariant font-wight fontWight height height left left letter-spacing letterSpacing line-height lineHeight list-style listStyle list-style-image listStyleImage list-style-position listStylePosition list-style-type listStyleType margin margin margin-top marginTop margin-right marginRight margin-bottom marginBottom margin-left marginLeft overflow overflow padding padding padding-top paddingTop padding-right paddingRight padding-bottom paddingBottom padding-left paddingLeft position position text-aling textAling text-decoration textDecoration text-indent textIndent text-transform textTransform top top vertical-align verticalAlign visibility visibility white-space whiteSpace width width word-spacing wordSpacing z-index zIndex

Palabras reservadas

Dentro de JavaScript nos encontramos con las siguientes palabras reservadas (las cuales no podremos usar como nombre de variables):

abstract boolean break byte

case catch char class

const continue deault do

double else extends false

final finally float for

function goto int implements

input in instanceof interface

long native new null

package private protected public

return short static super

switch synchronized this throw

throws transient true try

var val while with

Manipulacion de objetos

Hay varias intrucciones para manejar objetos

new

Permite crear un nuevo objeto de un tipo definido por el usuario. Sintaxis:

variable=new tipo (parametri1 [,parametro2]...[,parametro n])

this

Se usa para definir al objeto en uso, por lo general el que efectua una llamada, al definir un método.

Sintaxis:

this[.propiedad]

for..in

Itera una variable a lo largo de todas las propiedaes de un objeto, para cada propiedad. JavaScript ejecuta las instrucines especificadas.

Sintaxis:

for (variable in objeto) { instrucciones }

with

Establece el objto por omisión de una serie de instrucciones; si no especifica en las propiedades el abjeto, se asume el indicado con with.

Sintaxis:

with (objeto) { instrucciones }

Comentarios

Los comentarios son lineas que coloca el autor para propósitos explicativos dentro de un programa. El interprete ignora los comentarios.

Comentarios de una linea

Sintaxis:

// comantario

Comentarios de varias lineas

Sintaxis:

/* comantario */

XHTML

XHTML, acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. En su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas. La versión 1.1 es similar, pero parte a la especificación en módulos. En sucesivas versiones la W3C planea romper con los tags clásicos traídos de HTML.

Vista general

XHTML es una "reformulación de los tres tipos de documento definidos por HTML 4, pero como aplicaciones de XML". Al mismo tiempo el W3C continúa recomendando el uso de HTML 4 y al mismo tiempo avanza en la especificación de HTML 5 (y XHTML5).

Se sintió que era necesaria una versión más estricta de HTML principalmente porque el contenido de la World Wide Web ahora puede visualizarse desde numerosos dispositivos (como teléfonos

móviles) aparte de las computadoras de escritorio tradicionales, donde no se contaría con los recursos necesarios para afrontar la complejidad de la sintaxis del HTML. Sin embargo, en la práctica, fueron apareciendo navegadores para dispositivos móviles que pueden manejar documentos HTML comunes, antes que XHTML sea adoptado por los navegadores principales.

En octubre de 2005 aproximadamente el 10% de los internautas utilizaban un navegador compatible con el estándar XHTML. El Internet Explorer de Microsoft es incompatible con XHTML, a pesar de que esta empresa sea miembro de la W3C. Por tanto, gran parte de los autores de sitios web se ven forzados a elegir entre la escritura de documentos válidos, respetuosos con los estándares u ofrecer contenido que se visualice correctamente en la mayor parte de los

navegadores, del mismo modo, la corroboración de los específicos es vital para las fluctuaciones pertinentes.

Las diferencias entre HTML y la primera generación de XHTML (es decir, XHTML 1.x) son menores ya que, principalmente, están destinados a conseguir la conformidad con XML. El cambio más importante es el requisito de que el documento esté bien formado y que todas las etiquetas estén explícitamente cerradas, como se requiere en XML. Como las etiquetas en XML distinguen entre mayúsculas y minúsculas (case-sensitive), la recomendación XHTML ha definido todos los nombres de etiqueta en minúsculas. Lo cual está en contraste directo con las tradiciones extendidas en el tiempo de HTML 2.0, cuando mucha gente prefería las mayúsculas para estos casos, normalmente

para mostrar más fácilmente el contraste de éstas con el contenido. En XHTML, los valores de los atributos deben encerrarse entre comillas (siempre comillas "dobles"). Al contrario ocurría en SGML y por consecuencia en HTML, donde las comillas podían omitirse en algunos casos. Todos los elementos han de ser explícitamente cerrados, incluyendo elementos vacíos como pueden ser img o br. Esto puede hacerse añadiendo una barra a la etiqueta: <img … /> y <br />. La minimización de

atributos (como <option selected>) está también prohibida; en lugar de eso, se usa <option selected="selected">. Hay más diferencias detalladas en la recomendación XHTML 1.0 de la W3C.

Ventajas respecto del HTML

Las principales ventajas del XHTML sobre el HTML son:

Se pueden incorporar elementos de distintos espacios de nombres XML (como MathML y Scalable Vector Graphics).

Un navegador no necesita implementar heurísticas para detectar qué quiso poner el autor, por lo que el parser puede ser mucho más sencillo.

Como es XML se pueden utilizar fácilmente herramientas creadas para procesamiento de documentos XML genéricos (editores, XSLT, etc.).

Apéndice

El estándar XHTML indica en un apéndice informativo una manera de escribir XHTML de modo tal que los navegadores actuales que sólo entienden HTML, lo procesen como si fuera éste. Para esto se deberá crear un documento con algunas restricciones y consideraciones, y servirlo con el "content-type" text/html, en vez del correcto para XHTML.

Algunas de las reglas propuestas para que XHTML "parezca" HTML son:

No usar instrucciones de proceso. Los elementos vacíos (como <br>) deberán escribirse <br />, es decir en forma abreviada y

con un espacio antes de "/". No se debe utilizar la forma abreviada para elementos no vacíos que no tengan contenido,

es decir: no se debe escribir <p/>.

Para algunos autores, la inclusión de este apéndice en el estándar fue un error y consideran que es un error usar XHTML de esta manera.

Diferencias entre HTML y XHTML

La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una aplicación del más estricto XML:

Los elementos vacíos deben cerrarse siempre: o Incorrecto: <br> o Correcto: <br></br> o <br/> o <br />

Nota: Cualquiera de las tres formas es válida en XHTML. Para compatibilidad según el "Apéndice C" debe usarse <br />.

Los elementos no vacíos también deben cerrarse siempre: o Incorrecto: <p>Primer párrafo<p>Segundo párrafo

o Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p> Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre

último, debe cerrarse primero). o Incorrecto: <em><strong>Texto</em></strong> o Correcto: <em><strong>Texto</strong></em>

Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). o Incorrecto: <td rowspan=3> o Correcto: <td rowspan="3"> o Correcto: <td rowspan='3'>

Los nombres de elementos y atributos deben ir en minúsculas. o Incorrecto: <A HREF="http://www.domname.com">Domname</A> o Correcto: <a href="http://www.domname.com">Domname</a>

No está permitida la minimización de atributos (se usa el nombre del atributo como valor). o Incorrecto: <textarea readonly>Solo-lectura</textarea> o Correcto: <textarea readonly="readonly">Solo-lectura</textarea>

Los atributos desaprobados en HTML 4.01 no forman parte de XHTML. o Incorrecto: <font color="#0000FF">Blue text</font> o Correcto: <span style="color: #0000FF;">Blue text</span>

Reglas para DTDs estrictos

El texto no debe ser insertado directamente en el cuerpo (dentro de la etiqueta "body"). o Incorrecto: <body>Texto plano</body> o Correcto: <body><span>Texto plano</span></body>

No se deben insertar elementos de bloque dentro de elementos de línea. o Incorrecto: <em><h2>Título</h2></em> o Correcto: <h2><em>Título</em></h2>

¿Cómo funciona?

XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos básicos a cumplir en lo que a código se refiere. Entre estos requisitos básicos se puede mencionar una

estructuración coherente dentro del documento donde se incluirían elementos correctamente anidados, etiquetas en minúsculas, elementos cerrados correctamente, atributos de valores entrecomillados, etc.

Ejemplos

A continuación se pueden ver algunos ejemplos de los aspectos más importantes a tener en cuenta a la hora de utilizar XHTML.

Los documentos deben estar bien formados:

Un formato correcto en un documento XHTML es muy importante. Esto quiere decir que todos los elementos deben tener etiquetas de cierre, deben estar escritos de una forma determinada y además todos los elementos deben estar anidados correctamente.

Código de elementos anidados:

<p>Ejemplo de elementos bien <em>anidados</em>.</p> <p>Ejemplo de elementos mal <em>anidados</p>.</em>

Los nombres de atributos y elementos deben ir en minúsculas:

Tanto los elementos como los atributos deben ir en minúsculas para todos los elementos HTML y los nombres de atributos. Esto es importante ya que XML interpreta las mayúsculas y las minúsculas de forma diferente.

<body>Ejemplo correcto</body> <BODY>Ejemplo incorrecto</BODY>

Los elementos que no estén vacios necesitan etiquetas de cierre:

<p>Ejemplo correcto.</p> <p>Ejemplo correcto.</p> <p>Ejemplo incorrecto.<p>Ejemplo incorrecto.</p>

Los valores de las etiquetas deben ir siempre entre comillas:

Todos los valores de los atributos deben ir entre comillas, incluso aquellos que sean numéricos.

<table rows="3"> <table rows=3> ejemplo incorrecto

Existen varias versiones de XHTML (1.0, 1.1, Básico, etc.). Para utilizar una versión concreta, se debe incluir antes del elemento html del código de la página Web, la Definición del Tipo de Documento (DTD) que se pretende utilizar. Por ejemplo, un documento en XHTML 1.1 podría especificarse de la siguiente forma:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Título</title> </head>

<body> . . . </body> </html>