Diseño HTML y Css

Gustavo Vital Leccion #1 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 2010
<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.(prlogo 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 ttulo de la pgina. </TITLE> Esto es el final del ttulo de la pgina. <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 accin, o sea < ... > corresponde (muy lgicamente) una etiqueta de fin de accin </ ... >. Notar tambin que las etiquetas no son "case sensitive". Es entonces equivalente escribir
Asi se guarda con el bloc de notas
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 prrafos 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 nmero 6), siendo el nmero indicativo del tamao. El tamao mayor es el correspondiente al nmero 1. Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque s la mayora de ellos). Nos centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. Tambin 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 ms agradable con algunas etiquetas elementales. Negrilla [Bold] <B>...</B> <STRONG>...</STRONG> Principio y final de zona en grueso Itlico [Italic] <I>...</I> <EM>...</EM> Principio y final de zona en itlico (cursiva) Tamao del carcter [Font size] <FONT SIZE=?>... </FONT> Principio y final de zona con este tamao Color del carcter [Font color] <FONT COLOR="#$$$$$$"> </FONT> Principio y final de zona en color Salto de lnea [Line break] <BR> Introducir un salto de lnea Comentarios [Comments] 
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>  <p > <FONT COLOR="#f16e99">ESte color me encanta, y a ustedes que les parece? </FONT></p> <p><FONT size=14>ESta letra esta de tamao 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
Gustavo Vital
HTML 2010
Caracteres especiales Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los smbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, dara esto lugar a una ambigedad, ya que el programa navegador podra interpretarlos como el comienzo o final de una etiqueta, en vez de un carcter ms del texto
< para < (less than, menor que)
> & " á é í ó ú Á É Í Ó Ú ñ Ñ ü Ü ¿ ¡
las listas
para > (greater than, mayor que) para & (ampersand) para " (double quotation) para la para la para la para la para la para la para la para la para la para la para la para la para la para la para para
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 Prrafo [Paragraph] <P> </P> Salto de lnea, adjuntar una lnea virgen y empezar un prrafo.
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ñ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ño</LI> </OL> </BODY> </HTML> Enlaces con otras pginas La caracterstica que ms ha influido en el espectacular xito del Web (o tela de araa) ha sido, aparte la de su carcter 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 pgina 2. Enlaces con otra pgina nuestra 3. Enlaces con una pgina fuera de nuestro sistema 4. Enlaces con una direccin de email
Gustavo Vital
HTML 2010
Enlaces dentro de la misma pgina

A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin 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 pgina 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 aparecern 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 pgina nuestra

Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar con la pgina creada en el ejemplo del captulo 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"> captulo 12 </A> Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pgina, 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 pgina fuera de nuestro sistema

Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin completa, o URL (Uniform Resource Locator). El URL podra ser, adems de la direccin de una pgina del Web, una direccin de ftp, gopher, etc. Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de google (cuya URL es: http://www.google.com.co), la etiqueta sera: <A HREF="http://www.google.com.co"> google </A>
Enlaces con una direccin de email

En este caso, sustituimos el destino del enlace por mailto: seguido de la direccin de email. La estructura de la etiqueta es: <A HREF="mailto: direccin de email"> Texto del enlace </A> Un ejemplo de esto est al final de la pgina principal de este manual. Podra haber puesto:
Gustavo Vital Comentarios a <A HREF="mailto: thavo2@hotmail.com">Mi correo</A>
HTML 2010
Los separadores
Los browser integran un instrumento de puesta en forma interesante para clarificar la presentacin de su texto. Es la lnea horizontal. La sintaxis es muy simple. Lnea 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 alineacin centrada y una anchura de 100% de la ventana. Puede muy bien modificar segn su voluntad los valores de estos diferentes atributos.
<HR <HR <HR <HR <HR <HR size=?> width=?> width="%"> align=left> align=right> align=center> Espesor en pixeles Anchura en pixeles Anchura en % de la ventana Alineacin izquierda Alineacin derecha Alineacin centrada
Es entonces totalmente igual de escribir : <HR> <HR size=2 align=center width="100%"> Le propongo un pequeo 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ágina </H3> <A HREF="#marca"> Ir arriba </A> <HR align=center size=8 width="50%"> <H3> Enlaces con otra pá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 <H3> Enlaces con una pá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>
HTML 2010
Las imgenes
para insertar una imagen usamos el siguiente codigo <IMG SRC="direccin de la imagen "> Visualizar la imagen que se encuentra en la direccin... La etiqueta imagen tiene varios atributos. Alt="****" Texto alternativo para los browser que no tienen la opcin "imagen" activada width=? Height=? Altura y anchura en pixeles border=? Borde en pixeles align=top Alineacin align=middle align=botton align=left align=right Enlace sobre imagen Las etiquetas son : <A HREF="fichero.htm"><IMG SRC=" imagen .gif></A>
Gustavo Vital
HTML 2010
Observamos que las imgenes - sobre las que se puede "pulsar" estn 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>  <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>  </BODY> </HTML>
Pginas con sonido

Se utiliza el elemento <EMBED> junto a un buen nmero de tributos: SRC, AUTOSTART, LOOP, STARTTIME, ENDTIME, VOLUME, WIDTH, HEIGHT, ALIGN, CONTROLS y HIDDEN. Veamos para qu sirve cada uno: SRC Indica dnde est el fichero de sonido, pero no puede utilizarse solo, necesita la compaa de otros atributos del elemento, concretamente los que definen el tamao de la consola (que es un icono parecido al teclado que tiene un casette pequeo): <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 <EMBED SRC="multimedia/makin.MP3" WIDTH=160 HEIGHT=70> <EMBED SRC="multimedia/video.swf" WIDTH=800 HEIGHT=600> </BODY> </HTML>
HTML 2010
Las tablas
En Html las tablas sirven no slo 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 lneas y de columnas que forman las celdas de la tabla. Las etiquetas de base son : Definicin de una tabla [Table]<TABLE></TABLE> Principio y final de la tabla Definicin de una lnea [Table Row] <TR></TR> Principio y final de la lnea Definicin de una celda [Table Data] <TD></TD> Principio y final de la celda Una tabla con 2 lneas y 2 columnas, y entonces con 4 celdas se representa como sigue : <TABLE> <TR><TD>uno</TD><TD>dos</TD></TR> <TR><TD>tres</TD><TD>cuatro</TD></TR> </TABLE> Si desea aadir bordes : Borde de cuadro [Border] <TABLE border=?> </TABLE> Hay todava 3 elementos (definidos por defecto pero modificables) : El espacio entre las celdas o el espesor de las lneas del cuadriculado <TABLE cellspacing=?> 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=%> es tambin posible cambiar el color de la celda. Color de la celda <TD BGCOLOR="#$$$$$$"> Nuestro ltimo ejemplo podra 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 css(cascading style sheets) hoja de estilos en cascada css es un lenguaje de estilos que define la presentacion de los documentos HTML
HTML 2010
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 bsica de CSS si queremos un color determinado color de fondo en nuestra pagina web podemos hacerlo usando HTML o usando CSS Usando HTML para colocarle un color de fondo a nuestra pgina 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 <BODY style="background-color:#ff0055;> Pagina con color de fondo </BODY> </HTML> 2 Interno (etiqueta style) se incluye el cdigo 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)
HTML 2010
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 pgina ejemplo. html tenemos: ejemplo.html <HTML><HEAD><TITLE> Ejemplos</TITLE> <link rel="stylesheet" type="text/css" href="estilos/prueba.css"> </HEAD>
Gustavo Vital <BODY> Pagina con color de fondo </BODY> </HTML>
HTML 2010
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 quedara body {background-color:#00FFFF;} p{ color:#FEA400;} y podemos probar ejemplo.html agregandole un prrafo <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 sera Pagina con color de fondo 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 debera aplicarse a l. Tambin se puede aplicar colores de fondo a otros elementos., por ejemplo a un ttulo <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 pgina web, aplicamos la propiedead background-color al elemento </BODY> y especificamos la localizacin 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 localizacin de la imagen * url("kiki.png"); significa que la imagen est en la misma carpeta de la hoja de estilo * url("../imagenes/kiki.png");significa que la imagen est en la carpeta imagenes * 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
Gustavo Vital valor descripcin
HTML 2010
background-repeat:repeat-x la imagen se repite horizontalmente background-repeat:repeat-y la imagen se repite verticalmente background-repeat:repeat la imagen se repite en ambos ejes
background-repeat:no-repeat la imagen no se repite 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 fja 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 pgina * una imagen de texto no fija se bdesplazar con el texto de la pgina web Valor descripcin
background-attachment:scroll; la imagen se desplaza con la pgina 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 Descripcin
Gustavo Vital background-position:2cm 2cm; background-position: 50%25%; background-positionto:top right;
HTML 2010 la imagen se posiciona 2cm de margen izquierdo y dos centimetros de margen superior la imagen se posiciona en el centro de la pgina y un 25% de margen superior la imagen se posiciona en al esquina superior derecha
ejemplo. el cdigo siguiente posiciona la imagen de fondo en el centro de la pgina 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 cdigo vistas usando esta propiedad obteniendo el mismo resultado background: ##00FFFF url("../imagenes/kiki.png") no-repeat fixed 50%25%; El orden en que deben aparecer las propiedades individuales es el siguiente [background-color ] [background-image] [background-repeat] [background-attachment] [background-position]
Gustavo Vital Leccion #3
HTML 2010
Fuentes font-style font-size
font-variant font-family font-weight font
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 font-weight:normal; font-weight:boold; veamos como queda nuestro subtitulo h2{ font-style:italic; font-variant:small-caps; font-weight:normal; }
HTML 2010
La propiedad font-size nos sirve para personalizar nuestro tamao de fuente, las unidades ms comunes son px y pt establecen el tamao de la fuente en forma absoluta % y em permiten al usuario ajustar el tamao 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 text-indent text-decoration text-transforme text-align letter-spacing Sangra del texto [text-indent] permite aadir un toque de elegancia a los prrafos, se aplica a todos los prrafos de textos marcados con la etiqueta <P> p{ text-indent:30px;} Alineacin del texto [text-align] permite alinear el texto Valor descripcin
text-align:right Texto alineado a la derecha text-align:center Texto centrado text-align:left Texto alineado a la izquierda text-align:justify Texto 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 th{text-align:right;} td{text-align:center;}
HTML 2010
decoracin del texto [text-decoration] permite aadir 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;} Transformacin del texto [text-transform] controla la escritura en mayusculas de un texto. puede elegir entre los valores valor descipcin
text-transform:capitalize 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 transformacin
utilizando una lista para de nombres <LI> (list element) h1{ text-transform: uppercase;} li{text-transform:capitalize;} 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 pginas 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 pginas que el usuario ya ha visitado
Gustavo Vital 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
HTML 2010
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
Identificacin y agrupacin de elementos (class e id) Agrupacin 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. Identificacin de un elemento usando el atributo ID Adems 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 cdigo anterior podra hacer referencias a encabezados de cualquier documento dividido en cpitulos y prrafos <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 ttulo captulo 1.2 tiene que estar en rojo, usando cdigo css necesario, se podra hacer as # c1 {color:red;} Se puede definir las propiedades de un elemento especfico usando #nombredelidentificador en la hoja de estilos del documento Agrupacin de elemntos (span y div) los elementos <span> y <div> se usan para agrupar y estructurar un documento agrupacin con <span> El elemento <span> no aade nada al documento en s, pero con css <span > se puede usar para aadir caracteristicas visuales distintivas a partes especficas de textos a un documento.
Gustavo Vital
HTML 2010
ejemplo. al siguiente prrafo <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 aade un atributo class, que podemos definir as: <p>el <span class="burro">burro</span>corre por el cerro, y el <span class="burro">asno</span> se desliza velozmente por la colina</p> El cdigo css necesario para producir el efecto es: span.burro{ color:red; } Agrupacin 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 ms elementos a nivel de bloque. Ejemplo. <div id="since"> <ul><li>La esmeralda</li> <li>Guinea</li> <li>Cascajito</li> <li>La transformacin</li></ul> </div>  <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
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>
El cdigo css necesario es el siguiente. body{ margin-top:100px; margin-righ:40px; margin-botton:10px; margin-left:70px; } De forma abreviada podemos escribir el cdigo anterior body{ margin:100px 40px 10px 70px} Se puede establecer los margenes de casi todos los elemntos del mismo modo, por ejemplo a un prrafo. 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 ttulos h1{background-color:yellow;} h2{background-color:red;} Al definir padding para los ttulos, 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>  <div id="contenedor">  <div id="header"> </div>   <div id="navegacion"> </div>   <div id="izquierda"> </div>  <div id="contenido"> </div>   <div id="derecha"> </div>   <div id="footer"> </div>  </div>  </body> </html>
HTML 2010
Gustavo Vital
HTML 2010
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; } #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 #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; color: #000000; font-size: 1em; } /*-----------------color--------------- */ a{ text-decoration:none; color:#3b5ea5; } #header a{
HTML 2010
Gustavo Vital 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;
HTML 2010
Gustavo Vital 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;
HTML 2010
Gustavo Vital 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;
HTML 2010
Gustavo Vital } #azul #header a{ color:#3B6EA5; } #verde a{ color:#59AC03; } #verde #header a{ color:#59AC03; } #rojo a{ color:#FF3131; } #rojo #header a{ color:#FF3131; } MENUS
HTML 2010
Cmo hacer un men horizontal con CSS

Hacer un funcional men horizontal es ms 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 lnea. 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>Botn uno</li> <li>Botn dos</li> <li>Botn tres</li> </ul> </div> A partir de aqu podemos ir introduciendo detalles para hacer ms 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 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; }
HTML 2010
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 :
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.

Diseño HTML y Css

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Diseño HTML y Css

Caricato da

Copyright:

Formati disponibili

Gustavo Vital Leccion #1 Estructura de una pagina Html Las paginas html deben guardarse con la extencion .

html, la estructura general es 1ejemplo.html

Enlaces dentro de la misma pgina

Enlaces con otra pgina nuestra

Enlaces con una pgina fuera de nuestro sistema

Enlaces con una direccin de email

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

Pginas con sonido

Gustavo Vital <BODY> Pagina con color de fondo </BODY> </HTML>

Gustavo Vital valor descripcin

Gustavo Vital background-position:2cm 2cm; background-position: 50%25%; background-positionto:top right;

Gustavo Vital Leccion #3

Fuentes font-style font-size

font-variant font-family font-weight font

Gustavo Vital th{text-align:right;} td{text-align:center;}

Gustavo Vital Leccion #3

Archivo css maquetado

Cmo hacer un men horizontal con CSS

Como crear menu horizontal css estilo windows vista

Potrebbero piacerti anche