Está en la página 1de 37

Gustavo Vital

Leccion #1

HTML 2010

Estructura de una pagina Html

Las paginas html deben guardarse con la extencion .html, la estructura general es

1ejemplo.html

<HTML> <HEAD> <TITLE> Pagina uno </TITLE> </HEAD> <BODY> Esta es mi primera pagina </BODY> </HTML>

explicacion

Estas son sus primeras etiquetas o tags :

<HTML> Esto es el principio de un documento de tipo Html. </HTML> Esto es el final de un documento de tipo Html. <HEAD> Esto es el principio de la zona cabecera.(prólogo al documento propiamente dicho incluyendo las informaciones destinadas al browser). </HEAD> Esto es el final de la zona cabecera. <TITLE> Esto es el principio del título de la página. </TITLE> Esto es el final del título de la página. <BODY> Esto es el principio del documento propiamente dicho. </BODY> Esto es el final del documento propiamente dicho.

• Se habrá dado cuenta que a cada etiqueta de un principio de acción, o sea <

lógicamente) una etiqueta de fin de acción </

>.

> corresponde (muy

• Notará también que las etiquetas no son "case sensitive". Es entonces equivalente escribir

Asi se guarda con el bloc de notas

equivalente escribir Asi se guarda con el bloc de notas El texto Cuando escribimos en el
El texto
El texto

Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <P>, (que notiene su correspondiente etiqueta de cierre </P>)

Gustavo Vital

HTML 2010

El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.

Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc. También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla

2ejemplo.html

<HTML> <HEAD> <TITLE> Pagina dos </TITLE> </HEAD> <BODY> <CENTER><H1> La informatica </H1></CENTER> <H2>El computador </H2> <p> El computador es una maquina que se utiliza para el manejo de la informacion</p> <H2>Los programas </H2> <p>Los programas se desarrollan con las computadoras y resuelven cualquiera actividad</p> <HR> </BODY> </HTML>

Cada documento Html contendrá principalmente texto. Veamos como hacerlo más agradable con algunas etiquetas elementales.

Negrilla

<STRONG>

[Bold]

<B>

</B>

</STRONG>

Principio y final de zona en grueso Itálico [Italic] Principio y final de zona en itálico (cursiva)

<I>

</I>

<EM>

</EM>

Tamaño del carácter [Font size]

Principio y final de zona con este tamaño Color del carácter [Font color] <FONT COLOR="#$$$$$$"> </FONT> Principio y final de zona en color Salto de línea [Line break] <BR>

Introducir un salto de línea Comentarios [Comments]

<FONT SIZE=?>

</FONT>

<!-- *** -->

Gustavo Vital

HTML 2010

3ejemplo.html

<HTML> <HEAD> <TITLE> Pagina tres </TITLE> </HEAD> <BODY> <CENTER><H1> La informatica </H1></CENTER> <H2>El computador </H2> <p> El<B> computador </B> es una maquina que se utiliza para el manejo de la informacion</p> <H2>Los programas </H2> <p>Los programas <I>se desarrollan con las computadoras</I> y resuelven<BR> cualquiera actividad</p> <HR> <!--Aqui utilizaremos un parrafo con la propiedad FONT COLOR-->

<p > <FONT COLOR="#f16e99">ESte color me encanta, y a ustedes que les parece? </FONT></p> <p><FONT size=14>ESta letra esta de tamaño 14</FONT></p> </BODY> </HTML>

Si todo va bien, al abrir la pagina en el navegador tendra algo parecido a la imagen de la figura

</HTML> Si todo va bien, al abrir la pagina en el navegador tendra algo parecido a

Gustavo Vital

Caracteres especiales

HTML 2010

Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto

&lt; para < (less than, menor que)

&gt;

para > (greater than, mayor que)

&amp;

para & (ampersand)

&quot;

para " (double quotation)

&aacute;

para la á

&eacute;

para la é

&iacute;

para la í

&oacute;

para la ó

&uacute;

para la ú

&Aacute;

para la Á

&Eacute;

para la É

&Iacute;

para la Í

&Oacute;

para la Ó

&Uacute;

para la Ú

&ntilde;

para la ñ

&Ntilde;

para la Ñ

&uuml;

para la ü

&Uuml;

para la Ü

&#191;

para ¿

&#161;

para ¡

las listas
las listas

Lista no ordenada

[Bullet list]

<UL></UL> Presentar el texto bajo la forma de una lista no ordenada

Lista ordenada [Numbered list] <OL></OL> Presentar el texto bajo la forma de una lista ordenada

Elemento de lista [List items] <LI> Esto es un elemento de la lista Párrafo

[Paragraph]

<P> </P> Salto de línea, adjuntar una línea virgen y empezar un párrafo.

Gustavo Vital

HTML 2010

4ejemplo.html

<HTML> <HEAD> <TITLE> Ejemplo listas </TITLE> </HEAD> <BODY> <CENTER><H1> Lista no ordenada </H1></CENTER> <H2> Barrios de Corozal</H2> <UL> <LI>San Juan</LI> <LI>Las Lomas</LI> <LI>Nari&ntilde;o</LI> </UL> <HR> <CENTER><H1> Lista ordenada </H1></CENTER> <H2> Barrios de Corozal</H2> <OL> <LI>San Juan</LI> <LI>Las Lomas</LI> <LI>Nari&ntilde;o</LI> </OL> </BODY> </HTML>

Enlaces con otras páginas

La característica que más ha influido en el espectacular éxito del Web (o tela de araña) ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. En general, los enlaces tienen la siguiente estructura:

<A HREF="enlace"> texto indicativo </A>

Tipos de enlaces

Vamos a distinguir cuatro tipos de enlaces:

1. Enlaces dentro de la misma página

2. Enlaces con otra página nuestra

3. Enlaces con una página fuera de nuestro sistema

4. Enlaces con una dirección de email

Gustavo Vital

Enlaces dentro de la misma página

HTML 2010

A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde

una posición a otra determinada.

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio

dentro de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:

<A HREF="#marca"> YYY </A>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

<A NAME="marca"> </A>

Enlaces con otra página nuestra

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.

Supongamos que queremos enlazar con la página creada en el ejemplo del capítulo anterior, que la hemos llamado mipag2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero:

<A HREF="pag.html"> capítulo 12 </A>

Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página,

adonde va por defecto, en ese sitio tenemos que colocar una marca y completar el enlace con la referencia a esa marca.

Enlaces con una página fuera de nuestro sistema

Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor

distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform

Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de

ftp,

gopher, etc.

Una

vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente

xxx

(el destino del enlace). Si queremos enlazar con la página de google

(cuya URL es: http://www.google.com.co), la etiqueta sería:

<A HREF="http://www.google.com.co"> google </A>

Enlaces con una dirección de email

En este caso, sustituimos el destino del enlace por mailto: seguido de la dirección de email. La estructura de la etiqueta es:

<A HREF="mailto: dirección de email"> Texto del enlace </A> Un ejemplo de esto está al final de la página principal de este manual. Podría haber puesto:

Gustavo Vital

HTML 2010

Comentarios a <A HREF="mailto: thavo2@hotmail.com">Mi correo</A>

Los separadores

Los browser integran un instrumento de puesta en forma interesante para clarificar la presentación de su texto. Es la línea horizontal. La sintaxis es muy simple. Línea horizontal [Horizontal Rule] <HR>

numero de atributos. En el caso presente, los valores por defecto de la etiqueta <HR> son un espesor de raya de dos pixeles, un alineación centrada y una anchura de 100% de la ventana. Puede muy bien modificar según su voluntad los valores de estos diferentes atributos.

<HR size=?> <HR width=?> <HR width="%"> <HR align=left> <HR align=right> <HR align=center>

Espesor en pixeles Anchura en pixeles Anchura en % de la ventana Alineación izquierda Alineación derecha Alineación centrada

Es entonces totalmente igual de escribir :

• <HR>

• <HR size=2 align=center width="100%"> Le propongo un pequeño ejercicio :

- Con el editor de texto :

<H3 align=center> Hola</H3> <HR align=center size=8 width="50%">

5ejemplo.html

<HTML> <HEAD> <TITLE>Enlaces </TITLE> </HEAD> <BODY> <HR size=6 align=center width="100%"> <H3> Enlaces dentro de la misma p&aacute;gina </H3> <A HREF="#marca"> Ir arriba </A> <HR align=center size=8 width="50%"> <H3> Enlaces con otra p&aacute;gina nuestra</H3> <UL> <LI><A HREF="1ejemplo.html">Ejemplo uno</A> <LI><A HREF="2ejemplo.html">Ejemplo dos</A> <LI><A HREF="3ejemplo.html">Ejemplo tres</A> <LI><A HREF="4ejemplo.html">Ejemplo cuatro</A> </UL> <HR>

Gustavo Vital

HTML 2010

<H3> Enlaces con una p&aacute;gina fuera del sistema </H3> <HR> <A HREF="http://www.google.com.co"> google </A> <H3>Con una direccion Email </H3> <A HREF="mailto: thavo2@hotmail.com">Mi correo</A> </BODY> </HTML>

correo</A> </BODY> </HTML> Las imágenes para insertar una imagen usamos el siguiente

Las imágenes

para insertar una imagen usamos el siguiente codigo

<IMG SRC="dirección de la imagen "> Visualizar la imagen que se encuentra en la dirección La etiqueta imagen tiene varios atributos.

Alt="****" width=? Height=? border=? align=top align=middle align=botton align=left align=right

Texto alternativo para los browser que no tienen la opción "imagen" activada

Altura y anchura en pixeles Borde en pixeles Alineación

Enlace sobre imagen Las etiquetas son :

<A HREF="fichero.htm"><IMG SRC=" imagen .gif></A>

Gustavo Vital

HTML 2010

Observamos que las imágenes - sobre las que se puede "pulsar" están rodeadas por un marco.

6ejemplo.html

<HTML> <HEAD> <TITLE>Imagenes </TITLE> </HEAD> <BODY> <HR size=6 align=center width="100%"> <H3> Imagen que se encuentra con el archivo html</H3> <IMG SRC=" imagen2.png" > <HR size=6 align=center width="100%"> <H3> Imagen que se encuentra con el archivo html con dimenciones personalizadas</H3> <IMG SRC=" imagen2.png" width=100px Height=150px > <HR size=6 align=center width="100%"> <H3> Imagen como vinculo a la pagina 5ejemplo.html</H3> <A HREF="5ejemplo.html"><IMG SRC=" imagen2.png" width=100px Height=150px></A> <!--derecha--> <HR size=6 align=center width="100%"> <H3> Imagen que se encuentra en una carpeta de nuestro sitio</H3> <IMG SRC="imagenes/cuadro.png" width=100px Height=150px align=left> <!--la imagen esta dentro de la carpeta imagenes--> </BODY> </HTML>

Páginas con sonido

Se utiliza el elemento <EMBED> junto a un buen número de tributos: SRC, AUTOSTART, LOOP, STARTTIME, ENDTIME, VOLUME, WIDTH, HEIGHT, ALIGN, CONTROLS y HIDDEN. Veamos para qué sirve cada uno:

SRC Indica dónde está el fichero de sonido, pero no puede utilizarse solo, necesita la compañía de otros atributos del elemento, concretamente los que definen el tamaño de la consola (que es un icono parecido al teclado que tiene un casette pequeño): <WIDTH> (largo) y <HEIGHT> (alto) Por ejemplo:

<EMBED SRC="mozart.mid" WIDTH=160 HEIGHT=70>

7ejemplo.html

<HTML> <HEAD> <TITLE>sonido y videos </TITLE> </HEAD> <BODY> <HR size=6 align=center width="100%">

Gustavo Vital

HTML 2010

<EMBED SRC="multimedia/makin.MP3" WIDTH=160 HEIGHT=70>

<EMBED SRC="multimedia/video.swf" WIDTH=800 HEIGHT=600>

</BODY>

</HTML>

Las tablas

En Html las tablas sirven no sólo para alinear cifras pero sobre todo para colocar elementos al emplazamiento que deseado. El uso de las tablas es muy frecuente. Una tabla se compone de líneas y de columnas que forman las celdas de la tabla. Las etiquetas de base son :

Definición de una tabla Definición de una línea

Definición de una celda [Table Data] <TD></TD> Principio y final de la celda

[Table]<TABLE></TABLE>

[Table Row]

Principio y final de la tabla

<TR></TR> Principio y final de la línea

Una tabla con 2 líneas y 2 columnas, y entonces con 4 celdas se representa como sigue :

<TABLE>

<TR> <TR>
<TR>
<TR>

<TD>uno</TD><TD>dos</TD>

<TD>tres</TD><TD>cuatro</TD>

</TR> </TR>
</TR>
</TR>

</TABLE>

Si desea añadir bordes :

Borde de cuadro [Border] <TABLE border=?> </TABLE>

Hay todavía 3 elementos (definidos por defecto pero modificables) :

El espacio entre las celdas o el espesor

La envoltura de las celdas o el espacio entre el borde y el contenido <TABLE cellpadding=?>

La anchura de la tabla <TABLE width=?> <TABLE width=%>

de las líneas del cuadriculado <TABLE cellspacing=?>

es también posible cambiar el color de la celda. Color de la celda <TD BGCOLOR="#$$$$$$"> Nuestro último ejemplo podría ser :

Gustavo Vital

8ejemplo.html

HTML 2010

<HTML> <HEAD> <TITLE>Tablas </TITLE> </HEAD> <BODY> <H3> Tablas sin bordes</H3> <TABLE> <TR><TD>uno</TD><TD>dos</TD></TR> <TR><TD>tres</TD><TD>cuatro</TD></TR> </TABLE> <H3> Tablas con bordes</H3> <TABLE BORDER=3> <TR><TD>uno</TD><TD>dos</TD></TR> <TR><TD>tres</TD><TD>cuatro</TD></TR> </TABLE> <H3> Tablas con bordes ancho porcentaje</H3> <TABLE BORDER=3 width=80% > <TR><TD>uno</TD><TD>dos</TD></TR> <TR><TD>tres</TD><TD>cuatro</TD></TR> </TABLE> <H3> Tablas con bordes ancho numerico y centrado</H3> <CENTER><TABLE BORDER=3 width=500> <TR><TD align=center>uno</TD> <TD>dos</TD></TR> <TR><TD colspan=3 align=left>tres</TD><TD colspan=3 align=center

bgcolor="#DD0088">cuatro</TD></TR>

</TABLE></CENTER>

</BODY>

</HTML>

Gustavo Vital

Leccion #2

Introduccion a css

HTML 2010

css(cascading style sheets) hoja de estilos en cascada

css es un lenguaje de estilos que define la presentacion de los documentos HTML

HTML se usa para ejecutar el contenido y CSS se usa para formatear el contenido estructurado

Los beneficios que ofrece CSS es el control de la presentacion de muchos documentos desde una unica hoja de estilos, control mas preciso de la presentacion, aplicacion de diferentes presentaciones a diferentes tipos de medio.

La sintaxis básica de CSS

si queremos un color determinado color de fondo en nuestra HTML o usando CSS

pagina web podemos hacerlo usando

Usando HTML

para colocarle un color de fondo a nuestra página web debemos colocarle el siguiente codigo bgcolor="#ff0055“ a la etiqueta <BODY>, quedando de la siguiente manera

ejemplo1.html

<HTML><HEAD><TITLE> Ejemplos</TITLE></HEAD>

<BODY bgcolor="#ff0055“>

Pagina con color de fondo

</BODY>

</HTML>

Usando CSS

body {background-color: #ff0055;}

donde el modelo es:

selector { propiedad: valor;}

selector: hay que indicarle a que etiqueta HTML se aplica la propiedad

propiedad:la propiedad a aplicar en el ejemplo color de fondo

valor: valor de dicha propiedad

Aplicando CSS a un documento HTML

Podemos aplicar CSS a un documento HTML de tres maneras diferentes.

1º En linea de atributo (el atributo style)

la aplicamos dentro de la etiqueta, ejemplo

ejemplo2.html

<HTML><HEAD><TITLE> Ejemplos</TITLE></HEAD>

Gustavo Vital

HTML 2010

<BODY style="background-color:#ff0055;“>

Pagina con color de fondo

</BODY>

</HTML>

2º Interno (etiqueta style)

se incluye el código css usando la etiqueta de html <STYLE> se escribe entre el head.

<HTML><HEAD><TITLE> Ejemplos</TITLE>

<STYLE type="text/css">

body{ background-color:#ff0055;}

</STYLE>

</HEAD>

<BODY>

Pagina con color de fondo

</BODY>

</HTML>

3º Externo (enlace a una hoja de estilo)

Este metodo consiste en enlazar a una hoja de estilos externa, las hojas de estilos son un fichero de texto con extension .css supongamos que tenemos creada una hoja de estilos llamada prueba.css que este localizada en una carpeta estilos como lo muestra el esquema

ruta del estilo (en mi caso) web/lecciosnes css/estilos/prueba.css

ruta del html /web/lecciosnes css/ejemplo.html

Debemos crear un vinculo desde el documento HTML (ejemplo.html), con la hoja de estilos (prueba.css), donde tenemos que:

prueba.css

body {background-color:#ff0055;}

el vinculo se puede crear asi :

<link rel="stylesheet" type="text/css" href="estilos/prueba.css">

este vinculo debe ser insertado dentro de la etiqueta HEAD

aplicando lo anterior a la página ejemplo. html tenemos:

ejemplo.html

<HTML><HEAD><TITLE> Ejemplos</TITLE>

<link rel="stylesheet" type="text/css" href="estilos/prueba.css">

</HEAD>

Gustavo Vital

HTML 2010

<BODY>

Pagina con color de fondo

</BODY>

</HTML>

NOTA: si la hoja de estilos esta en la misma carpeta del archivo de la pagina HTML el codigo será el

siguiente

<link rel="stylesheet" type="text/css" href="prueba.css">

Colores y Fondos

En este apartado estudiaremos las siguientes propiedades:

color

background-repeat

background

background-color background-attachment

background-image

background-position

color describe el color del primer plano de un elemento, por ejemplo si queremos que un parrafo tenga color rojo. tendriamos que formatear la etiqueta <p> en nuestro archivo prueba.css tendriamos que

agregar

p{ color:#ff0000;}

así nuestro prueba.css quedaría

body {background-color:#00FFFF;}

p{ color:#FEA400;}

y podemos probar ejemplo.html agregandole un párrafo

<HTML><HEAD><TITLE> Ejemplos</TITLE>

<link rel="stylesheet" type="text/css" href="estilos/prueba.css">

</HEAD>

<BODY>

Pagina con color de fondo

<P> Esto es un parrafo</P>

</BODY>

</HTML>

y el resultado sería

Pagina con color de fondo

Esto es un parrafo

Esto es un parrafo
Esto es un parrafo
Esto es un parrafo

La propiedad “ background-color” Describe el color de fondo de los elementos. El elemento

Gustavo Vital

HTML 2010

<BODY> contiene todo el contenido de un documento HTML. por tal motivo, la propiedad background-color debería aplicarse a él. También se puede aplicar colores de fondo a otros elementos., por ejemplo a un título <H1>

prueba.css

body {background-color:#00FFFF;}

p{ color:#FEA400;}

h1{ background-color:#FC9804;}

ejemplo.html

<HTML><HEAD><TITLE> Ejemplos</TITLE>

<link rel="stylesheet" type="text/css" href="estilos/prueba.css">

</HEAD>

<BODY>

Pagina con color de fondo

<H1>El Titulo</h1>

<P> Esto es un parrafo</P>

</BODY>

</HTML>

La propiedad “ background-image” se utiliza para insertar una imagen de fondo; Para insertar la imagen (ejemplo kiki.png) de fondo en la página web, aplicamos la propiedead background-color al elemento </BODY> y especificamos la localización de la imagen

en mi caso la localizacion de la imagen es: web/lecciosnes css/imagenes/kiki.png

background-image:url(" /imagenes/kiki.png");

quedando el archivo prueba.css así

body {background-color:#00FFFF;

background-image:url(" /imagenes/kiki.png");

}

p{ color:#FEA400;}

h1{ background-color:#FC9804;}

Nota: especificar la localización de la imagen

* url("kiki.png"); significa que la imagen está en la misma carpeta de la hoja de estilo

* url("

* url("http://www.miweb.com/kiki.png");significa que la imagen está en internet

La propiedad “ background-repeat” controla el comportamiento de repetir una imagen de fondo, podemos resumir los cuatro valores diferentes para la propiedad “ background-repeat”

/imagenes/kiki.png");significa

que la imagen está en la carpeta imagenes

Gustavo Vital

valor

background-repeat:repeat-x

background-repeat:repeat-y

background-repeat:repeat

descripción

la imagen se repite horizontalmente

la imagen se repite verticalmente

la imagen se repite en ambos ejes

background-repeat:no-repeat la imagen no se repite

HTML 2010

si queremos que la imagen dada anteriormente no se repita, editamos el archivo prueba.css

body {background-color:#00FFFF;

background-image:url(" /imagenes/kiki.png");

background-repeat:no-repeat;

}

p{ color:#FEA400;}

h1{ background-color:#FC9804;}

La propiedad “ background-attachment” esta propiedad especifica si una imagen esta fíja o se desplaza con el elemento contenedor.

* una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página

* una imagen de texto no fija se bdesplazará con el texto de la página web

Valor

descripción

background-attachment:scroll; la imagen se desplaza con la página

background-attachment:fixed; la imagen está fija

prueba.css

body { background-color:#00FFFF;

background-image:url(" /imagenes/kiki.png");

background-repeat:no-repeat;

background-attachment:fixed; }

p{ color:#FEA400;}

h1{ background-color:#FC9804;}

La propiedad “ background-position” por defecto la imagen de fondo se posiciona en la esquina superior izquierda de la pantalla, con esta propiedad podemos posicionar nuestras imagenes, la siguiente tabla nos muestra ejemplos de posicionamiento de imagenes

Valor

Descripción

Gustavo Vital

HTML 2010

background-position:2cm 2cm; la imagen se posiciona 2cm de margen izquierdo y dos centimetros de margen superior

background-position:

50%25%;

la imagen se posiciona en el centro de la página y un 25% de margen superior

background-positionto:top

right;

la imagen se posiciona en al esquina superior derecha

ejemplo. el código siguiente posiciona la imagen de fondo en el centro de la página y un 25% de margen superior prueba.css

body {background-color:#00FFFF;

background-image:url(" /imagenes/kiki.png");

background-repeat:no-repeat;

background-attachment:fixed;

background-position: 50%25%; }

p{ color:#FEA400;}

h1{ background-color:#FC9804;}

La propiedad “ background” es una forma abreviada de todas las propiedades de fondo vistas,.

podemos resumir las 5 lineas de código vistas usando esta propiedad obteniendo el mismo resultado

background: ##00FFFF url("

El orden en que deben aparecer las propiedades individuales es el siguiente

[background-color ] [background-image] [background-repeat] [background-attachment]

[background-position]

/imagenes/kiki.png")

no-repeat fixed 50%25%;

Gustavo Vital

Fuentes font-style font-size
Fuentes
font-style
font-size

font-variant font-family

font-weight

font

Leccion #3

HTML 2010

La propiedad “ font-style” define la fuente elegida bien con el valor normal, el valor italic o el valor oblique

font-style:normal;

font-style:italic;

font-style:oblique;

apliquemos estilo a los subtitulos <H2>

prueba.css

body {background-color:#00FFFF;

background-image:url(" /imagenes/kiki.png");

background-repeat:no-repeat;

background-attachment:fixed;

background-position: 50%25%;

}

p{ color:#FEA400;}

h1{ background-color:#FC9804;}

h2{ font-style:italic;}

La propiedad “ font-variant” se usa para elegir entre las variantes normal o small-caps (versalita)

font-variant:small-caps;

font-variant:normal;

continuando con la personalizacion al subtitulo de prueba.css

h2{ font-style:italic;

font-variant:small-caps;

}

La propiedad “ font-weight” Describe que intensidad o “peso” en negrita deberia tener la fuente

Gustavo Vital

HTML 2010

font-weight:normal;

font-weight:boold;

veamos como queda nuestro subtitulo

h2{ font-style:italic;

font-variant:small-caps;

font-weight:normal;

}

La propiedad “ font-size” nos sirve para personalizar nuestro tamaño de fuente, las unidades más comunes son “px” y “pt” establecen el tamaño de la fuente en forma absoluta

“%” y “em” permiten al usuario ajustar el tamaño de la misma segun considere oportuno

ejemplos:

h1{ font-size:30px;}

h2{ font-size:12pt;}

h3{ font-size:120%;}

p{ font-size:1em;}

con lo anterior nuestra hoja de estilos prueba.css lleva la siguiente estructura

body {background-color:#00FFFF;

background-image:url(" /imagenes/kiki.png");

background-repeat:no-repeat;

background-attachment:fixed;

background-position: 50%25%;

}

p{ color:#FEA400;

font-size:1em;

}

h1{ background-color:#FC9804;

font-size:30px;}

h2{ font-style:italic;

font-variant:small-caps;

font-weight:normal;

font-size:12pt

}

h3{ font-size:120%;}

Gustavo Vital

HTML 2010

La propiedad “ font-family” se usa para establecer una lista ordenada de fuentes a mostrar

ejemplo

h1{ font-family:arial,verdana,sans-serif;}

h2{ font-family:times new roman“,serif;} La propiedad “ font” si usamos la propiedad abreviada font es posible incluir las propiedades diferentes relativas a fuente en una única propiedad

en el transcurso del tema hemos venido trabajando con la etiqueta H2, en nuestra hoja de estilos. teniendo como resultado

h2{ font-style:italic;

font-variant:small-caps;

font-weight:normal;

font-size:12pt;

font-family:”times new roman“,serif;

}

usando la propiedad abreviada font podemos obtener el mism resultado así:

h2{ font italic small-caps normal 12pt ”times new roman“,serif; }

El orden de los valores para la propiedad font es:

[font-style] [font-variant] [font-weight] [font-size] [font-family]

Texto
Texto

text-indent text-decoration text-transforme

text-align

letter-spacing

Sangría del texto [text-indent] permite añadir un toque de elegancia a los párrafos, se aplica a todos los párrafos de textos marcados con la etiqueta <P>

p{ text-indent:30px;}

Alineación del texto [text-align] permite alinear el texto

Valor

descripción

text-align:right Texto alineado a la derecha

text-align:center Texto centrado

text-align:left

Texto alineado a la izquierda

text-align:justifyTexto justificado

En el ejemplo que sigue, el texto de los encabezados de la tabla <TH> se alinean a la derecha, mientras que los datos de la tabla, <TD> aparecen centrados

Gustavo Vital

HTML 2010

th{text-align:right;}

td{text-align:center;}

decoración del texto [text-decoration] permite añadir diferntes decoraciones o efectos al texto

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

Espaciado entre caracteres [letter-spacing] especifica el espaciado entre caracteres

ejemplo

h1{letter-spacing:5px;}

Transformación del texto [text-transform] controla la escritura en mayusculas de un texto. puede elegir entre los valores

valor

text-transform:capitalize

descipción

pone en mayusculas la primera letra de cada palabra

text-transform: uppercase convierte todas las letras en mayusculas

text-transform: lowercase convierte todas las letras en minusculas

text-transform: none

no realiza transformación

utilizando una lista para de nombres <LI> (list element)

h1{ text-transform: uppercase;}

li{text-transform:capitalize;}

Enlaces
Enlaces

¿ que es una pseudo-clase? una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML

a {color:blue;}

Todo enlace tiene diferentes estados : visitados o no visitados

a: link {color: blue;}

a: visited{color: red;}

Pseudo-clase a:link

la pseudo clase :link se usa para enlaces que dirigen a páginas que el usuario no ha visitado

a:link {color:#6699cc;}

Pseudo-clase a:visited

la pseudo clase :visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado

Gustavo Vital

HTML 2010

a:visited {color:660099;}

Pseudo-clase a:active

La pseudo clase :active se usa para enlaces que estan activos

a:active{ background-color:#ffff00;}

Pseudo-clase a:hover

la pseudo clase :hover se usa cuando el puntero pasa por encima de un enlace

a:hover{ color:orange;

font-style:italic;

}

Podemos crear efectos con :hover

1. Espaciado entre letras

a:hover{letter-spacing:10px;

font-weigh:bold;

color:red;

}

2.

Mayusculas y minusculas

a:hover{text-transform:uppercase;

font-weigh:bold;

color:blue;

background-color:yellow;

}

3.

Quitar el subrayado de los enlaces

a:hover{ text-decoration:none;

}

De forma alternativa, puede establecer la propiedad text-decoration junto con otras propiedades para las cuatro pseudo-clases a:link {olor:blue; text-decoration:none;

}

a:visited {color: purple; text-decoration:none;

}

a:active{background-color:yellow; text-decoration:none; } a:hover{ color:red; text-decoration:none;

}

Gustavo Vital

Leccion #3

HTML 2010

Identificación y agrupación de elementos (class e id)

Agrupación de elementos con el atributo class Digamos que tenemos dos listas de enlaces con los diferentes tipos de carros tomemos una pagina llamada carros.html <HTML><HEAD><TITLE> Ejemplos</TITLE>

<link rel="stylesheet" type="text/css" href="estilos/prueba.css">

</HEAD>

<BODY>

<P>Autos Americanos</P>

<UL>

<LI><a href="http//lanrobert.com">Lan robert</a></LI>

<LI><a href="http//www.jeep.com">Jeep</a></LI>

<LI><a href="http//www.llanero.com">llanero</a></LI>

</UL>

<P>Autos Europeos</P>

<UL>

<LI><a href="http//www.toyota.com">Lan robert</a></LI>

<LI><a href="http//www.mercedezbeanz.com">Mercedes</a></LI>

<LI><a href="http//www.zuzuki.com">zuzuki</a></LI>

</UL>

</BODY>

</HTML>

Si queremos que los enlaces relativos a los autos americanos sean rojos y los enlaces a los autos Europeos sean Rosados, lo que haremos es dividir los enlaces en dos categorias, para esto utilizaremos el atributo CLASS

<HTML><HEAD><TITLE> Ejemplos</TITLE>

<link rel="stylesheet" type="text/css" href="estilos/prueba.css"> </HEAD> <BODY> <P>Autos Americanos</P> <UL> <LI><a href="http//lanrobert.com" class="carrorojo">Lan robert</a></LI> <LI><a href="http//www.jeep.com" class="carrorojo">Jeep</a></LI> <LI><a href="http//www.llanero.com" class="carrorojo">llanero</a></LI> </UL> <P>Autos Europeos</P> <UL>

Gustavo Vital

HTML 2010

<LI><a href="http//www.toyota.com" class="carrorosado">Lan robert</a></LI> <LI><a href="http//www.mercedezbeanz.com" class="carrorosado">Mercedes</a></LI> <LI><a href="http//www.zuzuki.com" class="carrorosado">zuzuki</a></LI> </UL> </BODY> </HTML>

A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia a autos

Americanos y a Autos Europeos

a{ color:Blue;}

a.carrorojo{color:#FF0900;}

a.carrorosado{color:#FF00FF;}

Como se mostró anteriormente, se pueden definir las propiedes para los elementos que pertenecen a una clase usando .nombredelaclase en la hoja de estilos del documento.

Identificación de un elemento usando el atributo ID

Además de agrupar elementos, podriamos necesitar identificar un elemento único. esto se hace con el atributo ID; no pueden existir dos elementos dentro del mismo documento con el mismo id, cada id debe ser único

ejemplo:

<h1>Capitulo 1</h1>

<h2>Capitulo 1.2</h2>

<h3>Capitulo 1.2.1</P>

<h1>Capitulo 2</h1>

<h2>Capitulo 2.1</h2> El código anterior podría hacer referencias a encabezados de cualquier documento dividido en cápitulos y párrafos <h1 id="c1">Capitulo 1</h1> <h2 id="c1.1">Capitulo 1.2</h2> <h3 id="c1.1.1">Capitulo 1.2.1</P> <h1 id="c2">Capitulo 2</h1> <h2id="c2.1">Capitulo 2.1</h2>

digamos que el título capítulo 1.2 tiene que estar en rojo, usando código css necesario, se podría hacer así

# c1 {color:red;}

Se puede definir las propiedades de un elemento específico usando #nombredelidentificador en la hoja de estilos del documento

Agrupación de eleméntos (span y div) los elementos <span> y <div> se usan para agrupar y estructurar un documento agrupación con <span> El elemento <span> no añade nada al documento en sí, pero con css <span > se puede usar para añadir caracteristicas visuales distintivas a partes específicas de textos a un documento.

Gustavo Vital

HTML 2010

ejemplo. al siguiente párrafo <p> el burro corre por el cerro, y el asno se desliza velozmente por la colina</p> para enfatizar en rojo, podemos utilizar un elemento <span> y a cada elemento span se le añade un atributo class, que podemos definir así:

<p>el

<span class="burro">

class="burro">

asno

</span>

burro

</span>
</span>

corre por el cerro, y el

<span
<span

se desliza velozmente por la colina</p>

El código css necesario para producir el efecto es:

span.burro{ color:red; }
span.burro{
color:red;
}

Agrupación con el elemento <div> Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos, <div> se usa para agrupar uno o más elementos a nivel de bloque. Ejemplo. <div id="since">

<ul><li>

La esmeralda

</li>

<li>

Guinea

</li>

<li>

Cascajito

</li>

<li>

La transformación

</li></ul>

</div>

<!-- Ahora un div para San Marcos

<div id="sanmarcos">

-->

<ul><li>

Calle Texas

</li>

<li>

Tre Chorros

</li>

<li>

Fernand Fortich

</li>

<li>

Primero de Junio

</li></ul>

</div> En nuestra hoja de estilos debemos agregar lo siguiente:

#since{ background-color:blue;} #sanmarcos{background-color:red;}

El Modelo de caja Contiene opciones detalladas en lo referente al ajuste de margenes, bordes, relleno (padding) y contenido de cada elemento.

Gustavo Vital

HTML 2010

Gustavo Vital HTML 2010 Margen y Relleno (padding) Establecer el margen de un elemento Todo elemento

Margen y Relleno (padding)

Establecer el margen de un elemento

Todo elemento tiene 4 lados, derecho(right), izquierdo(left), Superior (top), e inferior (botton). la propiedad margin hace referencia a la distancia desde cada lado respecto a los bordes del documento. Veamos como definir los margenes del documento en sí, del elemento <body>

margenes del documento en sí, del elemento <body> El código css necesario es el siguiente. body{

El código css necesario es el siguiente. body{

margin-top:100px;

margin-righ:40px;

margin-botton:10px;

margin-left:70px;

}

De forma abreviada podemos escribir el código anterior body{ margin:100px 40px 10px 70px} Se puede establecer los margenes de casi todos los elemntos del mismo modo, por ejemplo a un párrafo. p{margin:50px 50px 5px 50px}

Establecer el relleno (padding) de un elemento

Gustavo Vital

HTML 2010

La propiedad padding se puede entenderse como relleno. Ejemplo: si tenemos los títulos

h1{background-color:yellow;}

h2{background-color:red;}

Al definir padding para los títulos, cambiamos la cantidad de relleno que abrá al rededor del texto.

h1{

background-color:yellow;

padding-left:120px;

}

h2{background-color:red;

padding:20px 20px 20px 80px;

}

Gustavo Vital

Maquetado html

<html> <head><title>maquetado</title> <link rel= "stylesheet" type= "text/css" href= "miestilo.css"/> </head> <body> <!-- contenedor <div id="contenedor"> <!-- Cmomienzo header --> <div id="header"> </div> <!-- fin header--> <!-- Cmomienzo navegacion--> <div id="navegacion"> </div> <!-- fin navegacion--> <!-- Cmomienzo columna izquierda --> <div id="izquierda"> </div> <!-- contenido--> <div id="contenido"> </div> <!-- fin izquierda--> <!-- Cmomienzo columna derecha --> <div id="derecha"> </div> <!-- fin derecha--> <!-- Comienzo footer --> <div id="footer"> </div> <!-- fin header--> </div> <!-- fin contenedor--> </body> </html>

-->

HTML 2010

Gustavo Vital

Archivo css maquetado

*{

padding:0;

margin:0;

}

body{

font-size:62.5%;

font-family:"Lucida Grande", verdana,Arial,sans-serif;

color:#333;

background-color:white;

HTML 2010

}

#contenedor{

margin:0 auto;

width:922px;}

#header {

background: url(

/imagenes/kiki.png)

no-repeat right top;

width: 900px;

float: left;

padding: 10px; margin:10px 0px 5px 0px;

height:130px;

}

#header img {

float: left;

}

#header ul { list-style: none; margin: 0px; padding: 105px 0px 0px 317px;

}

#header li { float: left; padding-right: 1em;

}

#header a:link, #header a:visited { color: #FC0; text-decoration: none; text-transform: uppercase; font: 0.90em Tahoma, Arial, geneva, sans-serif; font-weight: bold;

}

Gustavo Vital

HTML 2010

#navegacion{

float:left;

width:900px;

padding:10px;

margin:0px 0px 5px 0px;

}

#izquierda{ margin:0px 5px 5px 0px;

padding:10px;

width:195px;

float:left; border: 1px solid #D4D5AA;height:auto;

background-color:#55ff33;

}

#contenido{

float:left; margin:0px 5px 5px 0px;

padding:10px;

width:456px;

display:inline;

}

#derecha{

color:#333;

margin:0px 0px 5px 0px;

padding:10px;

width:195px;

float:right;

}

#footer{

width:900px;

clear:both; margin:0px 0px 10px 0px;

padding:10px;

background: url( /images/footer.gif); text-align: center;

font-size: 1em;

color: #000000;

}

/*-----------------color--------------- */

a{

text-decoration:none;

color:#3b5ea5;

}

#header a{

Gustavo Vital

HTML 2010

font-size:1.8em;

margin-left:230;

color:#3b5ea5;

}

/*-----------------Elementos--------------- */

a:hover{

color:#147;

text-decoration:underline;

}

a img{

border:0px;

}

h1,h2,h3{

font-family:'Trebuchet MS','Lucida Grande',Verdana,Arial,sans-serif; font-weight:bold;

}

h1{

font-size:2em;

}

h2{

font-size:1.6em;

}

h3{

font-size:1.3em;

}

h1,h1 a,h1 a:hover, h1 a:visited,.description{ text-decoration:none;

}

h2,h2 a,h2 a:hover, h3,h3 a,h3 a:visited{

color:#333;

}

h2,h2 a,h2 a:hover,h2 a:visited, h3,h3 a,h3 a:hover,h3 a:visited{

text-decoration:none;

}

/*-----------------Modulos--------------- */

#izquierda .moduletable_menu{ text-align:right;

margin-bottom:15px;

}

#derecha .moduletable_menu, #derecha .moduletable{

text-align:left;

margin-bottom:15px;

}

#izquierda .moduletable_menu li{

margin:3px 0 0;

padding:0;

Gustavo Vital

HTML 2010

list-style-type:none;

}

#izquierda .moduletable_menu li:before{ content:"\00BB \0020";

}

.moduletable_menu h3, .moduletable h3, .moduletable_text h3{ margin:5px 0 0;

padding:0;

text-transform:uppercase;

}

/*-----------------Contenido--------------- */ .contentheading{

font-size:1.4em;

margin:0;

color:#777777;

font-weight:bold;

}

.contentheading :hover{

color:#3B6EA5;

}

.componentheading{

font-size:1.4em;

margin:0;

color:#777777;

font-weight:bold;

padding-left:10px;

}

.contentpaneopen{

line-height:1.4em;

font-size:1.2em;

text-align:left;

padding:0px 10px 0px 10px;

}

.contentpaneopen img{ padding:5px 10px;

}

.reandon{

font-size:0.8em;

text-align:left;

}

.contenttoc, .pagenavcounter{

margin-bottom:10px;

}

.article separator{

display:block;

bacground:#474747;

Gustavo Vital

HTML 2010

height:1px;

margin:10px 60px 10px 10px;

}

small, createdate, .modifydate{ font-family:Arial,Helvetica,Sans-Serif;

font-size:0.9em;

line-height:1.5em;

color:#777777;

padding-bottom:10px;

}

/*-----------------Menu superior--------------- */ #navegacion #mainlevel-nav{ list-style:none; position:relative;

padding:0px;

float:left;

padding-left:100px;

}

#navegacion #mainlevel-nav li{ float:left;

height:20px;

}

#navegacion #mainlevel-nav li a{

float:left; text-decoration:none;

margin:0px;

padding-right:10px;

}

#navegacion #mainlevel-nav li a:hover{ text-decoration:underline;

}

#navegacion #mainlevel-nav li a:before{

content:"\00BB \0020";

}

/*-----------------color si utilizamos params.ini --------------- */

#header a{

font-size:1.8em;

margin-left:20px;

}

a{

text-decoration:none;

}

#azul a{

color:#3B6EA5;

Gustavo Vital

HTML 2010

}

#azul #header a{

color:#3B6EA5;

}

#verde a{

color:#59AC03;

}

#verde #header a{

color:#59AC03;

}

#rojo a{

color:#FF3131;

}

#rojo #header a{

color:#FF3131;

}

MENUS
MENUS

Cómo hacer un menú horizontal con CSS

Hacer un funcional menú horizontal es más sencillo de lo que parece. Por defecto los elementos de una lista se muestran como bloques (blocks) con lo que cada item del listado ocupará una nueva línea. Simplemente cambiando el modo en que se muestran los items, tendremos una lista horizontal que podrá hacer las veces de menú. CSS:

#menuhoriz ul li {

 

display: inline;

 

}

 

html

 

<div id="menuhoriz">

<ul>

 

<li>Botón uno</li> <li>Botón dos</li> <li>Botón tres</li>

 

</ul>

 

</div>

 

A partir de aquí podemos ir introduciendo detalles para hacer más atractivo nuestro menú. Una sencilla muestra:

#menuhoriz ul li { display: inline; padding: 2px 7px; /*Separar el texto*/ margin:5px; /* Separar los botones */ background-color:#E4E4E4; /* Color de fondo */

}

#menuhoriz ul li:hover {

Gustavo Vital

HTML 2010

background-color:#CCCCCC; /* Color de fondo sobre el boton */ cursor: pointer; /* cambiar el aspecto del puntero */

}

#menuhoriz ul { /* Linea para delimitar la botonera */

border-bottom-width: 1px; border-bottom-style: solid;

border-bottom-color: #E4E4E4;

}

Como crear menu horizontal css estilo windows vista

Lo primero que hay que hacer es definir el html, en mi caso use un div para enmarcar todo el menu pero lo pueden hacer de otra forma si gustan, aunque tambien tendran que retocar un poquito el css <div id="menu"> <ul> <li><a href="#"><span>Anchor Text</span></a></li> <li><a href="#"><span>Mas Anchor Text</span></a></li> <li><a href="#"><span>Super super anchor text</span></a></li> <li><a href="#"><span>Anchor Text</span></a></li> <li><a href="#"><span>Anchor</span></a></li> </ul> </div> Ahora un poco de estilo a la estructura #menu ul { padding: 0px; margin: 0px; background: url(bgmenu.png) repeat-x; font-size: 14px; font-weight: bold; width: 100%; float: left; font-family:"Trebuchet MS", Tahoma, Verdana, Helvetica, Arial;

}

Como se puede apreciar llamo a una imagen de fondo para el menu, la clasica barrita que ocupa todo el ancho del menu. Para esto ya habia preparado las imagenes a usar en éste menu :

la clasica barrita que ocupa todo el ancho del menu. Para esto ya habia preparado las

Gustavo Vital

HTML 2010

y aqui la imagen a usar en los botones button.png (300x68)px

Descuiden que hay el tutorial de como crear botones estilo windows vista en fireworks

Bueno continuando con el menu ahora tenemos que hacer que los elementos <li> se muestren en

linea

#menu ul li {

display: inline;

}

Ahora viene la parte mas entretenida, la de animar el menu con el efecto del rollover utilizando

el pseudo-selector :hover del elemento <a>.

Primero debemos especificar las propiedades para el estado de reposo del boton #menu ul li a:link, #menu ul li a:visited { background: url(button.png) left top no-repeat; color: #6FF;

padding-left:35px;

float: left; text-decoration: none; display:block; margin:0 5px;

}

En este caso se va a usar una imagen para ambos estados (reposo y activo) y para los elementos

<a> y <span>. He visto en otros tutoriales que suelen hacer el corte de la imagen para el <span>

y

el <a> pero a mi juicio no es recomendable ya que se hace la carga de dos imagenes al server y

la

suma de los kb de las imagenes generadas por lo general es mayor a si generasemos solo una

y

la aplicanos de forma correcta con css.

Como se puede apreciar he aplicado un padding-left de 35px ya que en el background estoy especificando que cuadre la imagen de la parte superior izquierda, para que el efecto uniforme del boton se mantenga debo tener en cuenta a partir de que punto se inicia la zona de repeticion

de la imagen de fondo, en este caso este se da a los 30px de modo que el padding-left y paddingright no deben ser inferiores a estos valores porque de lo contrario se distinguiria el punto de corte por la falta de uniformidad de la imagen. Ahora hacemos lo mismo por derecha con el <span>. #menu ul li a span{ padding:5px 35px 5px 0;

line-height:24px;

display:block; background: url(button.png) right top no-repeat;

}

Aplicamos un padding arriba y abajo de 5px, a la derecha 35px y a la izquierda cero, para que el padding top y bottom funcionen correctamente debemos definir el elemento como bloque y ya que el alto de la imagen es de 34px, aplicamos esos 24px faltantes al line-height y porsupuesto

definimos el background a que se alinie desde arriba y por derecha evitando que se repita con un no-repeat.

Y ahora viene la decoracion del a:hover

#menu ul li a:hover, #menu ul li a:active{ color: #FFF; background: url(button.png) left bottom no-repeat;

}

Gustavo Vital

HTML 2010

Aplicamos un color mas resaltante definimos el mismo fondo pero esta vez lo tomamos de la

base, para este caso en particular debido a que hay solo dos estados basta con top y bottom, pero si se desea trabajar con mas estados siempre se puede definir el punto desde donde empezar a graficar el fondo. Ahora hacemos lo respectivo con el <span> #menu ul li a:hover span, #menu ul li a:active span{ background: url(button.png) right bottom no-repeat;

}

Aplicamos el mismo fondo pero lo tomamos de la base.