HTML Css Fácil y Sencillo

HTML & CSS Fcil y sencillo
INDICE
___________________________________________________ 1.-INTRODUCCIN..........................................................4 2.-HTML-Estructura de un documento HTML.................5 3.-HTML-Caracteres especiales..........................................6 4.-HTML-Colores en hexadecimal......................................8 5.-HTML-El texto y sus parmetros....................................9 6.-HTML-Imgenes............................................................16 7.-HTML-Hipervnculos.....................................................17 8.-HTML-Tablas.................................................................18 9.-HTML-Marcos................................................................24 10.-HTML-Formularios.......................................................27 11.-HTML-Capas.................................................................37 12.-CSS-Estructura de un documento CSS..........................38 13.-CSS-Reglas especiales....................................................40 14.-CSS-Selectores................................................................41 15.-CSS-Pseudo-clases.........................................................44 16.-CSS-Propiedades de las cajas........................................46 17.-CSS-Fondos, colores y sus atributos..............................50 18.-CSS-Apariencia visual....................................................55 19.-CSS-Efectos visuales......................................................62 20.-CSS-Medidas..................................................................65 21.-CSS-Interfaz de usuario..................................................70 22.-CSS-Estilo en listas........................................................75 23.-Ejemplos finales............................................................77
1.-INTRODUCCIN Con la lectura de ste libro se pretende que el lector adquiera los conocimientos necesarios para el desarrollo y diseo de una pgina web partiendo desde cero, utilizando para ello HTML y CSS. El libro est enfocado ms como un manual de consulta, que como un libro de lectura. Los contenidos han sido estructurados de una forma clara y vistosa para ser fcilmente consultados. HTML son las siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto). Es el lenguaje utilizado para definir la estructura de una pgina web y el contenido en forma de texto, as como implementar objetos como pueden ser imgenes. Su utilizacin es muy sencilla, mediante el uso de etiquetas delimitadas por los smbolos < y >. Ejemplo: <div class=principal>contenido</div> CSS es un lenguaje utilizado para definir la presentacin de un documento escrito en HTML. Surge de la idea de separar la estructura del aspecto. As, por un lado tendremos nuestra web escrita en HTML, y por otra parte la hoja de estilos que definir el diseo de nuestra pgina web. Ejemplo: .principal { background-color: #000000; color: #FFFFFF; width: 50% }
2.-HTML-Estructura de un documento HTML Para comenzar a escribir cdigo HTML, podemos utilizar editores especializados como Dreamweaver, aunque tambin nos sirve cualquier editor de texto como el Bloc de notas. Una vez hayamos terminado debemos guardar el fichero con extensin .html o .htm. Para visualizarlo debemos abrirlo con nuestro navegador web. <html> <head> <title>Mi primera web</title> </head> <body> sta es mi primera pgina web! </body> </html> Pasemos a ver que significa cada cosa: <html></html> .- Define el documento HTML. Todo lo que est dentro de estas dos etiquetas ser interpretado por el navegador web como cdigo HTML. <head></head> .- Define la cabecera del documento. sta parte no se puede visualizar en el navegador, pero es de gran importancia, ya que define opciones como el ttulo de la pgina, palabras clave, etctera. <title></title> .- Define el ttulo de la pgina. Se puede observar en la barra de ttulo del navegador. sta etiqueta va siempre dentro de las etiquetas <head> y </head>. <body></body>.- Es el cuerpo del documento, lo que se ver en el navegador.
3.-HTML-Caracteres especiales En HTML hay determinados caracteres como por ejemplo la que debido a los distintos tipos de codificacin existentes pueden no verse igual siempre en todos los navegadores. Por ello es aconsejable usar su equivalente en cdigo ASCII: Carcter Representacin
&
6
á é í ó ú Á É Í Ó Ú ñ Ñ € ç Ç & ¡ ¿
Espacio en blanco
Ejemplo: El nio se encontr 1.
º ª © ®
El niño se encontró 1€.
4.-HTML-Colores en hexadecimal Los colores en HTML se representan mediante un nmero en hexadecimal. A diferencia de un nmero decimal, que va del 0 al 9, en el hexadecimal puede tomar valores que van del 0 al 9 y de la A a la F. Un nmero en hexadecimal se representa de la siguiente forma: #CC6600 En la siguiente tabla se muestran algunos ejemplos de colores en HTML: Color Negro Blanco Rojo Azul Amarillo Gris Verde Hexadecimal #000000 #FFFFFF #FF0000 #0000FF #FFFF00 #808080 #008000
Una buena forma de saber el cdigo exacto de un color es buscando tablas de cdigos de colores como stas: http://html-color-codes.info/codigos-de-colores-hexadecimales http://www.webtaller.com/utilidades/csscoder/colores.php http://www.2createawebsite.com/build/hex-colors.html Tambin existe la posibilidad de escribir el color directamente en ingls como: white, black, yellow, green.., en vez de en cdigo hexadecimal.
5.-HTML-El texto y sus parmetros A la hora de escribir en HTML, debemos tener en cuenta que hay que formatear correctamente el texto, sino nos aparecer todo el texto seguido. Podemos utilizar las siguientes etiquetas: <br> .- Salto de lnea. Ejemplo: El nio jugaba<br>a la pelota en el parque. El nio jugaba a la pelota en el parque. <pre> .- Muestra el texto tal cual se escribe en el editor. No se pueden utilizar dentro de sta etiqueta : <img>,<object>,<small>,<big>,<sub>,<sup>. Ejemplo: <pre>El en el El en el nio jugaba parque.</pre> nio jugaba parque. a la pelota a la pelota
<blockquote> .- Se utiliza para sangrar texto. El texto introducido en sta etiqueta tendr un margen mayor, y obliga a que est en una nueva lnea. Ejemplo:
El nio <blockquote> <blockquote> jugaba a la pelota en el parque. </blockquote> </blockquote> El nio jugaba a la pelota en el parque. <hr> .- Introduce una lnea horizontal. sta etiqueta no es necesario cerrarla. Se le pueden aadir los siguientes atributos: align .- fija la alineacin de la lnea. Valores: left , right , center . noshade .- elimina el sombreado de la lnea. width .- define el ancho, ya sea en pxeles como en tanto por ciento. size .- define el alto de la lnea. Se expresa con un nmero. Ejemplo: <hr align=center width=100% size=10 noshade> <p> .- Define un prrafo. Cada prrafo se considera una lnea, por lo que no hace falta aadir un salto de lnea. Se le puede aadir el atributo align que admite los valores left, right, center y justify. Ejemplo: <p align=center>El nio jugaba</p>a la pelota en el parque.
10
El nio jugaba a la pelota en el parque. <center> .- Se utiliza para centrar el texto. Ejemplo: <center>El nio jugaba a la pelota en el parque.</center> El nio jugaba a la pelota en el parque. Encabezados (h1,h2,h3,h4,h5,h6).- Para la utilizacin de encabezados se utilizan stas etiquetas, que van de mayor a menor tamao, siendo h1 el de mayor tamao, y h6 el de menor. Admite el atributo align. Ejemplo: <h1 align=center>Encabezado</h1>
Encabezado
<marquee> .- Se utiliza para insertar una marquesina. Admite los siguientes atributos: behavior .- indica el tipo de movimiento, puede ser alternate, scroll, o slide. direction .- puede modificarse la direccin a la que se mover el texto, que puede ser up, down, left o right. bgcolor .- se utiliza para cambiar el fondo de la marquesina. Ejemplo:
11
<marquee bgcolor=#9966CC behavior=scroll direction=left> <font> .- Las propiedades del texto pueden modificarse con sta etiqueta, la cual admite stos atributos: face .- nombre de la fuente a utilizar. Ejemplo: Verdana. color .- color del texto. size .- tamao del texto. Ejemplo: <font color=#000000 size=6 face=Arial>El nio jugaba a la pelota en el parque.</font> <basefont> .- Con sta etiqueta definimos un tipo de fuente para todo el documento. En caso de haber algun <font>, tomar las propiedades de ste ltimo. No necesita cierre. Ejemplo: <basefont color=#000000 size=6 face=Arial> El nio jugaba a la pelota en el parque. <b> .- Convierte el texto a negrita. Ejemplo: <b>El nio jugaba a la pelota en el parque.</b> El nio jugaba a la pelota en el parque.
12
<i> .- Convierte el texto a cursiva. Ejemplo: <i>El nio jugaba a la pelota en el parque.</i> El nio jugaba a la pelota en el parque.. <u> .- Subraya el texto. Ejemplo: <u> El nio jugaba a la pelota en el parque.</u> El nio jugaba a la pelota en el parque. <s> .- Tacha el texto. Ejemplo: <s>El nio jugaba a la pelota en el parque.</s> El nio jugaba a la pelota en el parque. <sub> .- Posiciona el texto como subndice. Ejemplo: El nio jugaba <sub>a la pelota</sub> en el parque. El nio jugaba a la pelota en el parque.
13
<sup> .- Posiciona el texto como superndice. Ejemplo: El nio jugaba <sup>a la pelota</sup> en el parque. El nio jugaba
a la pelota
en el parque.
<li> .- Se utiliza para crear listas. Va incluido dentro de las etiquetas <ul></ul> en el caso de ser una lista desordenada, o <ol></ol> en caso de tratarse una ordenada. Ejemplo: (Lista desordenada, a travs del atributo type de ul puede elegirse entre circle (crculo), disk (disco) o square (cuadrado) ) <ul type=circle> <li>Casa</li> <li>Apartamento</li> <li>Bungalow</li> </ul> Casa Apartamento Bungalow (Lista ordenada, a travs del atributo type de ol puede elegirse entre 1 (nmeros), a (letras minsculas), A (letras maysculas), i (nmeros romanos en minscula) o I (nmeros romanos en mayscula))
14
<ol type=1> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ol> 1. Uno 2. Dos 3. Tres
15
6.-HTML-Imgenes El dicho dice que una imagen vale ms que mil palabras. Y esto es perfectamente trasladable a las pginas web. No slo basta con tener texto, sino tambin imgenes que complementen esa informacin y aporten una mayor informacin visual. Para introducir una imagen se utiliza la etiqueta <img>, no se necesita cerrarla. Se le pueden aadir los siguientes atributos: src .- ste es obligatorio, indica la ruta donde est la imagen. alt .- Muestra un texto en caso de que la imagen no se pueda cargar. title .- Muestra un cuadro de texto con informacin al pasar el cursor por encima de la imagen. border .- Para indicar el borde de una imagen. width .- Indica el ancho de una imagen, puede ser un numero solamente o un numero seguido del smbolo % para indicarlo en porcentaje. height .- Indica la altura de una imagen, ya sea en numero o tanto por ciento. align .- Para establecer la alineacin de la imagen. Puede tomar los valores absbottom (inferior absoluta), absmiddle (medio absoluta), baseline (lnea de base), bottom (inferior), left (izquierda), middle (medio), right (derecha), texttop (texto superior), o top (superior). Ejemplo: <img src=imagenes/coche.jpg alt=No se ve el coche title=Esto es un coche border=0 width=25% height=100 align=middle>
16
7.-HTML-Hipervnculos Un hipervnculo o hiperenlace es un enlace que al pulsarlo nos lleva de una pgina o archivo a otra/o. Para crearlo debemos usar las etiquetas <a> y </a>, y el enlace podr llevar texto o una imagen. La etiqueta <a> tiene los siguientes atributos: href .- Es obligatorio utilizarlo, ya que indica la ruta a la que se accede. target .- Determina en qu ventana se abrir el enlace. Hay varias opciones, _blank (abre el vnculo en una ventana nueva), _parent (abre el vnculo en otra pestaa), _self (opcin predeterminada, en la misma ventana), _top (lo abre en la ventana completa). title .- Muestra un cuadro de texto al pasar el cursor por encima del enlace. Ejemplo: <a href=http://www.google.es target=_blank title=Google>
17
8.-HTML-Tablas Las tablas en HTML son muy tiles para organizar la informacin. Se dividen en filas y columnas, y estn formadas por celdas. Se utilizaban mucho a la hora de definir el diseo de una web, si bien ltimamente esa funcin la estn cubriendo las capas. Para definir una tabla se utilizan las etiquetas <table></table>, dentro de stas utilizaremos <tr></tr> para crear las filas y <th></th> y <td></td> para crear los encabezados y celdas, respectivamente. Ejemplos: <html> <head> <title>Mi primera tabla</title> </head> <body> <p>Marcas de coches</p> <table border="1"> <tr> <td>Peugeot</td> <td>Mercedes</td> <td>BMW</td>
</tr> <tr> <td>Citren</td> <td>Renault</td> <td>Subaru</td>
</tr>
</table> </body> </html>
18
<html> <head> <title>Mi segunda tabla</title> </head> <body> <p>Notas del examen</p> <table border="1"> <tr> </tr> <tr> </tr> <tr> </tr> <tr>
19
<th>Nombre</th> <th>Nota</th>
<td>Paco</td> <td>7</td>
<td>Mara</td> <td>10</td>
</tr>
<td>Jess</td> <td>6</td>
A <table></table> se le pueden aadir los siguientes atributos: width .- Define el ancho de la tabla, ya sea slo nmero, o seguido de porcentaje. Ejemplo: width=15, width=50%. height .- Define la altura de la tabla, en numero o seguido de porcentaje. Ejemplo: height=20, height=100%. cellspacing .- Sirve para establecer el espacio entre celdas. Ejemplo: cellspacing=5. cellpadding .- Indica el espacio entre el contenido de las celdas y el borde. Ejemplo: cellpadding=3. border .- Establece el grosor del borde. Ejemplo: border=1.
20
align .- Alineacin de la tabla en la pgina. Admite los valores left (izquierda), right (derecha) y center (centro). bgcolor .- Color del bgcolor=#F0F0F0. fondo de la tabla. Ejemplo:
background .-Se utiliza para poner una imagen como fondo de la tabla. Ejemplo: background=imagenes/imagen.jpg. bordercolor .- Cambia bordercolor=#000000. el color del borde. Ejemplo:
En cuanto a <th></th> y <td></td> admiten los siguientes atributos: width .- Define el ancho de la celda. Se indica con nmero, o seguido de porcentaje. Ejemplo: width=15, width=25%. height .- Define la altura de la celda. Se indica con nmero, o seguido de porcentaje. Ejemplo: height=69, height=45%. align .- Sita el contenido de la celda en la posicin deseada. Admite los valores left (izquierda), right (derecha), o center (centro). Ejemplo: align=left. valign .- Define la alineacin vertical del contenido de la celda. Admite los valores baseline (linea de base), bottom (inferior), middle (medio), top (superior). Ejemplo: valign=top. bgcolor .- Color del bgcolor=#E14400. fondo de la celda. Ejemplo:
background .- Para poner una imagen de fondo en la celda. Ejemplo: background=imagenes/fondocelda.gif. bordercolor .- Cambia el color del borde de la celda. Ejemplo: bordercolor=#404040. colspan .- Especifica el nmero de columnas que ocupar la celda. Como valor se le pone siempre un nmero. Ejemplo: colspan=2. rowspan .- Especifica el nmero de filas que ocupar la celda. Su valor es siempre un nmero. Ejemplo: rowspan=3.
21
Ejemplo: <html> <head> <title></title> </head> <body> <table border="1" width="50%" height="50%" cellspacing="0" cellpadding="5" align="center" bgcolor="F0F0F0" bordercolor="#555555"> <tr> <th colspan="3" bgcolor="#123456"><font color="#FFFFFF">PIB per cpita</font></th> </tr> <tr> <td width="10">1</td> <td align="center">Luxemburgo</td> <td>78559</td>
</tr> <tr>
<td width="10">2</td> <td align="center">Noruega</td> <td>58141</td>
</tr> <tr> <td width="10">3</td> <td align="center">Emiratos rabes Unidos</td> <td>50417</td> </tr> <tr> <td width="10">4</td> <td align="center">Singapur</td>
22
</tr> <tr>
<td>49287</td>
<td colspan="2" rowspan="2" align="center"><b>Total de pases mostrados/Ao</b></td> <td>4</td> </tr> <tr> </tr> <td>2008</td>
23
9.-HTML-Marcos Los marcos, tambin denominados frames, se utilizan para distribuir el contenido de forma que ciertas partes queden estticas. Por ejemplo, si tenemos una web con una cabecera, un men lateral y el contenido, podremos dejar los dos primeros fijos en la pantalla, y que el contenido tenga scroll. Hoy en da sin embargo, su uso no est recomendado, ya que existen otras alternativas ms cmodas y eficientes. En el caso de querer o tener que usar un frame, es recomendable utilizar iframe, pero siempre para cosas puntuales. Para utilizar iframes <iframe></iframe>. debemos utilizar las etiquetas
Iframe tiene los siguientes atributos: Atributo scrolling frameborder width height Valor auto,YES o NO nmero nmero nmero Descripcin Define el tipo de scroll Ancho del borde del iframe Define la anchura del iframe Define la altura del iframe
Ejemplo: Tenemos dos ficheros html, uno con nuestra pgina, y otro con el contenido del iframe. Fichero 1, pagina.html: <html> <head> <title>Pgina con iframe</title> </head>
24
<body> <b>sta pgina tiene un iframe:</b><br> <iframe scrolling="auto" src="iframe.html" frameborder="0" height="300" width="300"></iframe> </body> </html> Fichero 2, iframe.html: <html> <body bgcolor="#000000"> <font color="#FFFFFF"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum hendrerit metus a porttitor. Aenean congue semper tellus vitae vehicula. Integer arcu massa, lacinia quis interdum in, rhoncus eu nibh. Vestibulum elementum lorem vel dui ullamcorper nec malesuada metus interdum. Sed metus tortor, congue elementum hendrerit id, ullamcorper quis elit. Nullam orci urna, posuere sagittis lacinia sit amet, vestibulum ac eros. Proin ac metus id est lacinia convallis ac ut turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum, metus vel volutpat lobortis, tellus libero mattis lectus, nec faucibus nisi purus ultricies est. Vivamus at lorem ante. Fusce eget laoreet mi. Integer rhoncus ante at lorem placerat lobortis. Morbi sollicitudin tellus et leo rutrum ut porta erat mattis </font> </body> </html>
25
26
10.-HTML-Formularios Los formularios son muy utilizados en Internet, ya que nos permiten recopilar informacin sobre nuestros visitantes y posteriormente realizar una accin con ella. Son muy comunes los formularios de contacto que resultan muy eficaces para la comunicacin entre el propietario de la web y el usuario, o los formularios de registro, que permiten al visitante crearse una cuenta en la web y almacenar su datos en la base de datos. Cabe decir que un formulario es mucho ms que HTML, que es lo que veremos en sta parte. Para el envo de la informacin hay mltiples alternativas como PHP o Perl. Para crear un formulario debemos emplear las etiquetas <form> y </form>. stas admiten los siguientes atributos: action .- Indica a qu pgina o direccin de e-mail se va a mandar el formulario. method .- Indica el mtodo por el que se enviar la informacin, su valor puede ser get o post. Es recomendable utilizar post. enctype .- Sirve para indicar el modo en que ser cifrada la informacin. Dentro de las etiquetas <form> y </form> podemos utilizar las siguientes: <input></input>.- Muestra controles que permiten a los usuarios ingresar datos en un formulario. Permite los siguientes atributos: Atributo accept Valor MIME_type Descripcin Especifica el tipo de ficheros que pueden ser subidos, solo para el tipo file. Especifica la alineacin de una imagen, slo para el
27
align
left right
top middle bottom alt texto
tipo image.
Especifica un texto alternativo en caso de no poder mostrar la imagen, solo para el tipo image. Especifica que un determinado elemento debe estar activo al cargar la pgina. Slo para los tipos checkbox o radio. Deshabilita un elemento al cargar la pgina. Limita el nmero de caracteres de un input tipo text o password. Especifica el nombre para un elemento input. Establece un elemento input como de slo lectura, slo para los tipos text y password. Establece el ancho de un elemento input.
checked
checked
disabled
disabled
maxlength
nmero
name
texto
readonly
readonly
size
nmero
28
src
URL
Especifica la URL de la imagen a mostrar en el botn. Especifica el tipo de un elemento input.
type
button checkbox file hidden image password radio reset submit text
value
valor
Indica el valor de un elemento input.
<select></select>.- Muestra una lista desplegable con varios valores posibles que podemos elegir. Admite los siguientes atributos: Atributo disabled multiple name Valor disabled multiple texto Descripcin Deshabilita la lista desplegable. Permite seleccionar mltiples valores. Especifica el nombre de la lista desplegable. Especifica el nmero de valores visibles.
29
size
nmero
Dentro de stas etiquetas, y para cada valor posible se debe incluir <option> y </option>. Tiene los siguientes atributos: Atributo disabled Valor disabled Descripcin Con ste atributo, la opcin permanecer deshabilitada. Especifica una versin ms corta de una opcin. Indica que ese valor estar activo por defecto al cargar la pgina. Asigna un valor a la opcin.
label
texto
selected
selected
value
texto
<textarea></textarea>.- Define un cuadro de texto de varias lneas, donde el usuario podr escribir ms de lo que le permite un input de tipo text. Admite los siguientes atributos: Atributo cols rows disabled name readonly Valor nmero nmero disabled texto readonly Descripcin Indica el ancho del textarea Indica el nmero de filas del textarea Deshabilita el textarea Asigna un nombre al textarea Establece que el textarea sea slo de lectura
30
Ejemplos: <html> <head> <title>Acceder como usuario</title> </head> <body> <form action="pagina2.php" method="post"> <table border="1"> <tr> <th colspan="5">Acceder como usuario</th> </tr> <tr> <th>Nombre de usuario:</th> <td><input type="text" maxlength="10" size="15"></td> <th>Contraseña:</th> <td><input type="password" size="10"></td> <td><input type="submit" value="Entrar"></td> </tr> </table> </form> </body> </html>
31
<html> <head> <title>Registro de usuario</title> </head> <body> <form action="pagina2.php" method="post"> <table border="0" width="30%"> <tr> <th colspan="2" bgcolor="#808080"><font color="#FFFFFF">Formulario de registro de usuario</font></th> </tr> <tr> <th>Nombre:</th> <td><input type="text" size="15" name="nombre"></td> </tr> <tr> <th>Apellidos:</th> <td><input type="text" size="30" name="apellidos"></td> </tr> <tr> <th>Nombre de usuario:</th> <td><input type="text" size="15" name="nombreusuario"></td> </tr> <tr> <th>Contraseña:</th> <td><input type="password" size="15" maxlength="12" name="contrasena"></td> </tr> <tr> <th>Confirme contraseña:</th> <td><input type="password" size="15" maxlength="12" name="confirmecontrasena"></td> </tr> <tr> <td colspan="2" align="right">Estoy de
32
acuerdo con la clusula de privacidad <input type="checkbox" name="privacidad"></td> </tr> <tr> <td colspan="2" align="right">Deseo recibir los boletines de noticias <input type="checkbox" name="boletines"></td> </tr> <tr> <td colspan="2" align="right"><br><input type="submit" value="Enviar" name="enviar"><input type="reset" value="Borrar" name="borrar"></td> </tr> </table> </form> </body> </html>
<html>
33
<head> <title>Formulario de contacto</title> </head> <body> <form action="mailto:admin@prueba.com" method="post" enctype="text/plain"> <table border="4" width="30%" cellpadding="5" bordercolor="#0174DF"> <tr> <th colspan="2" bgcolor="#808080"><font color="#FFFFFF">Formulario de contacto</font></th> </tr> <tr> <th>Nombre:</th> <td><input type="text" size="15" name="nombre"></td> </tr> <tr> <th>Asunto:</th> <td> <select name="asunto"> <option value="sugerencias">Sugerencias</option> <option value="quejas">Quejas</option> <option value="otrasconsultas" selected>Otras consultas</option> </select> </td> </tr> <tr> <th>Tu edad:</th> <td> <input type="radio" value="16-24" name="edad">16-24 <input type="radio" value="2550" name="edad">25-50 <input type="radio" value="5034
65" name="edad">50-65 <input type="radio" value="+65" name="edad">+65 </td> </tr> <tr> <th colspan="2" align="left">Comentario:</th> </tr> <tr> <td colspan="2" align="right"> <textarea cols="35" rows="4" name="comentarios"></textarea> </td> </tr> <tr> <th colspan="2" align="left">Tus aficiones:</th> </tr> <tr> <td colspan="2"> <input type="checkbox" name="deportes">Deportes <input type="checkbox" name="informatica">Informtica <input type="checkbox" name="viajar">Viajar <input type="checkbox" name="leer">Leer <input type="checkbox" name="cine">Cine <input type="checkbox" name="teatro">Teatro </td> </tr> <tr> <td colspan="2" align="right"> <br> <input type="submit" value="Enviar">
35
value="Borrar"> </td> </tr> </table> </form> </body> </html>
<input type="reset"
36
11.-HTML-Capas Las capas son unos recuadros en los que podemos insertar contenido y a las que podemos aplicar estilos de forma independiente y posicionar como deseemos en la pgina. Existen dos tipos de capas, div y span: <span></span> .- Permite agrupar varios elementos en lnea dentro de un mismo bloque, para posteriormente aplicarle estilos. <div></div> .- El elemento div es un elemento contenedor, abarca ms contenido del que puede contener span. Es muy utilizado tambin para maquetar webs, sustituyendo en sta funcin a las tablas. Para sacarle todo el potencial a las capas se utiliza CSS, por lo que ms adelante se ver en profundidad. Ejemplos: <div>Div de prueba</div> <span>Span de prueba</span>
37
12.-CSS-Estructura de un documento CSS Las hojas de estilos definen la composicin visual de un fichero HTML, separando el contenido de la apariencia. Tienen extensin .css, y para trabajar con ellas podemos utilizar cualquier editor de texto, si bien el trabajar con editores como Dreamweaver o TopStyle nos facilitar bastante las cosas. La principal ventaja del CSS es que nos permite ahorrar gran cantidad de cdigo en los ficheros HTML, pudiendo aplicar una regla para varias etiquetas. Por ejemplo, si en un prrafo queramos aplicar un estilo al texto, tenamos que hacerlo as: <p align=center> <font face=Arial color=#808080 Esto es una prueba </font> </p> Ahora lo podremos simplificar de sta forma. Por un lado tenemos el fichero HTML: <p>Esto es una prueba</p> Y por otro, tenemos el fichero CSS: p { font-family: Arial; color: #808080; text-align: center; }
38
Podemos trabajar con hojas de estilo de tres formas: -Con un fichero .css externo, como en el ejemplo anterior. Para ello, en el documento HTML debemos incluir entre las etiquetas <head> y </head> el siguiente cdigo: <link rel=stylesheet href=hojadeestilo.css type=text/css> -De forma incrustada en el fichero HTML: <html> <head> <title>CSS Incrustado</title> <style type=text/css> p { color: #F1C200; } </style> </head> <body> <p>Esto es una prueba</p> </body> </html> -Hoja de estilo en lnea: <p style=color: #F1C200;>Esto es una prueba</p>
39
13.-CSS-Reglas especiales -Comentarios: En cualquier lugar del fichero CSS se pueden incluir comentarios, para ello se utiliza la siguiente sintaxis: /* Esto es un comentario */ -La regla @import: Permite importar hojas de estilo desde otras. Se puede usar de dos formas: @import url (fichero.css); @import fichero.css;
-La regla !important: Se utiliza para dar mayor prioridad a determinados parmetros. En ste ejemplo se da prioridad al primer valor de width. En caso de no utilizar la regla !important el valor que tendra width sera el segundo: .principal { width: 1024px !important; width: 800px; }
40
14.-CSS-Selectores Un selector identifica a un elemento dentro de una pgina web, pudiendo as aplicarle un determinado formato. Hay diversos tipos: -Selectores de tipos .- Son los que identifican a un tipo de elemento propio de HTML. Ejemplo: p { text-align: center; } -Selectores de ID .- Se aplican a un nico elemento de la pgina. Ejemplo: p#parrafo1 { text-align: center; } En el cdigo HTML debe aparecer as: <p id=parrafo1>Prrafo de prueba</p> -Selectores de clases .- Se utilizan para identificar a varios elementos de una misma clase. Se diferencian de los selectores de ID en que pueden repetirse tantas veces como se desee. Ejemplo:
41
p.azul { background-color: blue; } En el cdigo HTML debe aparecer as: <p class=azul>Prrafo de prueba</p> -Selectores universales .- Representan a cualquier elemento de la pgina. Se escriben con un *. Ejemplos: * { color: black; } *#principal { background-color: #E2F100; color: black; } -Agrupamiento .- Cuando varios selectores comparten los mismos estilos podemos agruparlos para aplicarles a todos el mismo estilo, separndolos por comas. Ejemplo:
42
table, p, h3 { font-family: Verdana; color: black; } -Selectores de descendientes .- Permiten especificar elementos que se encuentran dentro de otros. Ejemplo: p h1 { color: white; }
43
15.-CSS-Pseudo-clases -:link .- Hace referencia a los enlaces que an no han sido visitados. Ejemplo: a:link { color: blue; } -:visited .- Hace referencia a los enlaces ya visitados. Ejemplo: a:visited { color: gray; } - :hover .- Se aplica al pasar el cursor por encima del enlace. Ejemplo: a:hover { color: yellow; } -:active .- Se aplica cuando un elemento es activado. Ejemplo:
44
a:active { color: #422200; } -:focus .- Aade el estilo al elemento que tiene el foco. Ejemplo: input:focus { color: yellow; }
45
16.-CSS-Propiedades de las cajas Una caja es un elemento de una pgina HTML donde se almacena contenido y que tiene un padding (relleno), border (borde) y un margin (margen).
-Propiedades del margen margin-left , margin -top, margin -right y margin -bottom. Admite un tamao de ancho fijo o porcentaje. -Propiedades del relleno padding-left , padding-top, padding-right y padding-bottom. Admite un tamao fijo o porcentaje. -Propiedades del borde border-left , border-top, border-right y border-bottom.
46
border-width .- Se utiliza para definir el tamao de los 4 bordes que componen la caja. Si queremos definir el tamao de un borde en concreto debemos utilizar: border-top-width .-Borde superior. border-right-width .- Borde derecho. border-left-width .-Borde izquierdo. border-bottom-width .- Borde inferior. Admite uno de los siguientes valores: Valor thin medium thick medida -Color del borde border-top-color, border-left-color, border-bottom-color Admite los siguientes valores: Valor color transparent Descripcin Borde de un color en hexadecimal o ingls. Borde transparente. border-right-color, Descripcin Borde fino. Borde medio. Borde grueso. Un tamao concreto.
47
-Estilo del borde border-top-style, border-left-style, border-bottom-style Puede tomar uno de stos valores: Valor none hidden dotted dashed solid double groove ridge inset outset Descripcin Ningn borde. Borde oculto. Borde a base de puntos. Borde compuesto por pequeos segmentos de lnea. El borde es un nico segmento de lnea. Borde de doble segmento de lnea. Borde con tallado. apariencia de border-right-style,
Borde sobresaliendo. Borde con relieve adentro de la pgina. Borde con sobresale. relieve hacia que
48
49
17.-CSS-Fondos, colores y sus atributos Las propiedades de CSS permiten personalizar por completo cualquier elemento, pudiendo elegir su color frontal y de fondo. En el caso del fondo, se puede elegir entre seleccionar un color, o una imagen, el modo en que se repite, si permanece fija con respecto a la pantalla y su posicin. -Color del primer plano Describe el color del primer plano de un elemento. Ejemplo: div { color: #000000; } div { color: black; } -Color de fondo Determina el color de fondo de un elemento. Ejemplo:
50
div { background-color: #F0F0F0; } div { background-color: gray; } -Imagen de fondo Permite utilizar una imagen como fondo de un elemento. Ejemplo: body { background-image: url (imagenes/imagen.jpg); } Pueden utilizarse las siguientes propiedades para definir las propiedades de la imagen de fondo: background-repeat .- Especifica si la imagen se repite o no. Admite los siguientes valores: Valor repeat repeat-x Descripcin Repite la imagen tanto vertical como horizontalmente. Repite la imagen horizontalmente. slo
51
repeat-y no-repeat
Repite la imagen verticalmente.
slo
Muestra la imagen, pero no la repite ni horizontal, ni verticalmente.
Ejemplo: body { background-image: url(imagenes/imagen.jpg); background-repeat: repeat-y; } background-attachment .- Se utiliza para indicar si la imagen permanecer fija o se desplazar junto con la pgina. Admite los valores: Valor fixed scroll Descripcin La imagen permanece fija. La imagen se mueve junto con el documento.
Ejemplo:
52
body { background-image: url(imagenes/imagen.jpg); background-attachment: fixed; } background-position .- Define la posicin inicial de una imagen de fondo. Admite como valores: Valor palabras clave porcentajes longitudes Descripcin left, center, right, top, bottom. Un nmero smbolo %. seguido del
Una medida concreta, la medida ms utilizada es en px.
Al utilizar background-position, la posicin horizontal se especifica primero, seguida por la vertical. Ejemplo: body { background-position: center top; } background .- Se utiliza para fijar todas las propiedades del fondo sin tener que escribir varias lneas.
53
Ejemplo: body { background: fixed; } url(imagenes/imagen.jpg) #000000
54
18.-CSS-Apariencia visual -display La propiedad display define de qu forma se mostrar un elemento. Admite los siguientes valores: Valor none Descripcin No genera ningn elemento por pantalla, pero el navegador s lo carga. Crea un elemento de bloque, con saltos de lnea antes y despus Genera un elemento en lnea sin saltos de lnea antes o despus. Es la opcin por defecto. Genera un elemento de bloque, pero dispuesto como un elemento en lnea. Crea un elemento en lnea, como una tabla, pero sin saltos de lnea antes o despus del elemento. Genera un elemento de bloque y un elemento en lnea para la lista de marcadores. Crea un elemento de bloque o en lnea segn el contexto. El elemento creado tendr un comportamiento parecido al de una tabla. Tendr un salto de lnea antes y despus del elemento. El elemento se comportar
55
block
inline
inline-block
inline-table
list-item
run-in table
table-caption
como el caption de una tabla. table-cell El elemento tendr un comportamiento parecido a la celda de una tabla. El elemento se comportar como la columna de una tabla. El elemento se comportar como un grupo de columnas de una tabla. El elemento se mostrar como un grupo de pies de tabla. El elemento sera mostrado como un grupo de una o ms filas. El elemento se comportar como la fila de una tabla. El elemento se comportar como un grupo de filas de una tabla. El elemento hereda el formato del elemento padre.
table-column table-column-group
table-footer-group table-header-group
table-row table-row-group
inherit
Ejemplo: div.prueba { display: inline; } -Position sta propiedad permite ubicar los elemento donde se prefiera. Puede tener los siguientes valores:
56
Valor absolute
Descripcin Genera un elemento posicionado de forma absoluta. Genera un elemento posicionado de forma absoluta, cuya posicin final ser fija. Genera un elemento posicionado de forma relativa. Posicin por defecto. El elemento se posicionar de la forma que establezca el cdigo HTML. Especifica que el valor de la posicin del elemento ser heredado del elemento padre.
fixed
relative static
inherit
-left sta propiedad especifica la distancia a la que se desplazar el elemento hacia la derecha del borde izquierdo. Ejemplo: div#main { left: 15px; }
57
-right sta propiedad especifica la distancia a la que se desplazar el elemento hacia la izquierda del borde derecho. Ejemplo: div#main { right: 15px; } -top sta propiedad especifica la distancia a la que se desplazar el elemento por debajo del borde superior. Ejemplo: div#main { top: 15px; } -bottom sta propiedad especifica la distancia a la que se desplazar el elemento por encima del borde inferior. Ejemplo:
58
div#main { bottom: 15px; } -z-index Un elemento con un nmero mayor de orden estar delante siempre de uno que tenga uno menor. z-index admite los siguientes valores: Valor auto Descripcin Valor por defecto. El nmero de orden es igual al del elemento padre. Selecciona un nmero de orden. Admite valores negativos. Especifica que el z-index debe ser heredado del elemento padre.
nmero
inherit
Ejemplo: img { z-index: -1; }
-float La propiedad float especifica si un elemento debe flotar. Admite los siguientes valores:
59
Valor left right none inherit
Descripcin El elemento flota en la parte izquierda. El elemento flota en la parte derecha. El elemento no flota. Es el valor por defecto. El valor de la propiedad float se hereda del elemento padre.
Ejemplo: div#menu { float: left; } -clear La propiedad clear especifica qu lados de un elemento no pueden alinearse con elementos flotantes. Admite los siguientes valores: Valor left right both none
60
Descripcin No permite elementos flotantes a su izquierda. No permite elementos flotantes a su derecha. No permite elementos flotantes a ambos lados. Opcin por defecto. Permite
elementos flotantes a ambos lados. inherit Especifica que el valor de clear se heredar del elemento padre.
Ejemplo: img { float: right; clear: both; }
61
19.-CSS-Efectos visuales Hay propiedades que permiten establecer el comportamiento visual de algunos elementos, como por ejemplo especificar que ocurre si sobrepasa el tamao o su grado de visibilidad. -overflow Por lo general, el contenido de una caja permanece delimitada por el tamao de sta, pero en ocasiones puede desbordar dicho tamao. La propiedad overflow especifica el comportamiento de la caja en dicha situacin. Admite los siguientes valores: Valor visible Descripcin Opcin por defecto. El desbordamiento no se recorta, se hace fuera de la caja. El desbordamiento es recortado y el resto de contenido ser invisible. El desbordamiento es recortado, pero se aade una barra de scroll para poder ver el resto de contenido. Si se produce desbordamiento, se aade una barra de scroll. Se especifica que el valor de overflow se heredar del elemento padre.
hidden
scroll
auto inherit
Ejemplo: div { width: 200px;
62
height: 50px; overflow: auto; } -clip sta propiedad permite recortar el tamao de un elemento posicionado de forma absoluta. Admite los siguientes valores: Valor shape Descripcin Recorta un elemento. El nico valor posible es rect (top, right, bottom, left). No se aplica ningn recorte. Es la opcin por defecto. Especifica que el valor del recorte ser heredado del elemento padre.
auto inherit
Ejemplo: img { position:absolute; clip:rect(10px,30px,25px,13px); } -visibility La propiedad visibility especifica si un elemento es o no visible. Admite los siguientes valores: Valor Descripcin
63
visible hidden
El elemento es visible. Es la opcin por defecto. El elemento es invisible, si bien es cargado por el navegador. Si se usa en elementos que no sean tablas toma el mismo valor que hidden. Cuando se utiliza en tablas elimina una fila o columna. Especifica que el valor de visibility ser hereado de un elemento padre.
collapse
inherit
Ejemplo:
div { visibility: hidden; }
64
20.-CSS-Medidas En CSS tenemos varias propiedades que nos permiten no slo especificar un ancho y alto fijos, sino tambin unas medidas mnimas o mximas. -width La propiedad width define el ancho de un elemento. Admite los siguientes valores: Valor auto medida % inherit Descripcin Es la opcin por defecto. El navegador calcula el ancho. Define el ancho en px,em,cm... Define el ancho en tanto por ciento. Especifica que el valor del ancho es heredado del elemento padre.
Ejemplo: p.parrafo1 { width: 120px; } -height La propiedad height define la altura de un elemento. Admite los siguientes valores:
65
Valor auto medida % inherit
Descripcin Es la opcin por defecto. El navegador calcula la altura. Define la altura en px,em,cm... Define la altura en tanto por ciento. Especifica que el valor de la altura es heredada del elemento padre.
Ejemplo: p.parrafo1 { height: 100%; } -min-width Especifica el ancho mnimo que debe tener un elemento. Puede tener los siguientes valores: Valor length % inherit Descripcin Define el ancho mnimo en px,em,cm... Define el ancho mnimo en tanto por ciento. Especifica que el valor del ancho mnimo ser heredado del elemento padre.
Ejemplo:
66
p.parrafo1 { min-width: 50%; } -max-width Especifica el ancho mximo de un elemento Admite los siguientes valores: Valor none medida % inherit Descripcin Opcin por defecto. No hay mximo de ancho. Define el ancho mximo en px, cm , em.... Define el ancho mximo en tanto por ciento. Especifica que el valor de anchura mxima ser heredado del elemento padre.
Ejemplo: p.parrafo1 { max-width: 800px; } -min-height Establece la altura mnima que debe tener el elemento. Puede tener los siguientes valores:
67
Valor medida % inherit
Descripcin Define la altura mnima en px, cm, em.... Define la altura mnima en tanto por ciento. Especifica que el valor de la altura mnima ser heredado del elemento padre.
Ejemplo: p.parrafo1 { min-height: 50px; } -max-height Especifica la altura mxima que puede tener el elemento. Admite los siguientes valores: Valor none medida % inherit Descripcin Valor por defecto. No hay altura mxima. Define la altura mxima en px, cm, em.... Define la altura mxima en tanto por ciento. Especifica que el valor de la altura mxima ser heredado del elemento padre.
68
Ejemplo: p.parrafo1 { max-height: 75%; }
69
21.-CSS-Interfaz de usuario -cursor sta propiedad especifica el tipo de cursor a utilizar en un elemento. Puede tener los siguientes valores: Valor auto crosshair default pointer move help text wait inherit Descripcin Opcin por defecto. El navegador establece un cursor. Cursor con forma de cruz simple. Cursor por defecto. El cursor es un puntero que indica enlace. El cursor indica que se puede mover. El cursor indica que hay ayuda disponible. El cursor indica texto. El cursor indica que est ocupado. Especifica que el valor del cursor ser heredado del elemento padre.
Ejemplo: div.cuadrodeespera { cursor: wait; }
70
-outline Outline es una propiedad que permite dibujar lneas alrededor de los elementos, fuera de los bordes. Las propiedades que pueden ser definidias son: outline-color, outline-style y outline-width. Tambin se puede utilizar nicamente outline y aadir todos los valores en la misma lnea. Valor outline-color outline-style outline-width inherit Descripcin Permite especificar el color de la lnea exterior. Define el estilo de la lnea exterior. Especifica el ancho de la lnea exterior. Especifica que el valor de la propiedad outline ser heredado del elemento padre.
Ejemplo: p { border: 1px solid black; outline: #808080 dotted; } outline-color admite los siguientes valores: Valor Nombre del color Descripcin Especifica el color de la lnea exterior con el nombre de un
71
color, por ejemplo black. Nmero en hexadecimal Especifica el color de la lnea exterior con un color en hexadecimal, como por ejemplo #808080. Especifica el color de la lnea exterior con un color RGB, como por ejemplo rgb(255,0,0) Es la opcin por defecto. Realiza una inversin del color. sta opcin permite que la lnea exterior sea visible, independientemente del color de fondo. Especifica que las propiedades de la lnea exterior sean heredadas del elemento padre.
Nmero RGB
invert
inherit
Ejemplo: p { outline-style: dotted; outline-color: #808080; } outline-style admite los siguientes valores: Valor none dotted
72
Descripcin Sin lnea exterior. Especifica una lnea exterior a
base de puntos. dashed solid double groove ridge Especifica una lnea exterior a base de guiones. Especifica una lnea exterior slida. Especifica una lnea exterior doble. Especifica una lnea exterior con apariencia de tallado. Especifica una lnea exterior con apariencia de estar sobresaliendo. Especifica una lnea exterior con relieve hacia adentro. Especifica una lnea exterior con relieve hacia afuera. Especifica que el valor de outline-style sea heredado del elemento padre.
inset outset inherit
Ejemplo: p { outline-style: outset; }
73
outline-width admite los siguientes valores: Valor thin medium Descripcin Especifica un borde exterior delgado. Es la opcin por defecto. Establece un borde exterior de tamao medio. Especifica un borde exterior grueso. Permite definir el grueso del borde exterior. Especifica que el grueso del borde exterior vendr determinado por el elemento padre.
thick length inherit
Ejemplo: p { outline-style: solid; outline-width: 3px; }
74
22.-CSS-Estilo en listas La propiedad list-style-type define la apariencia del marcador utilizado en una lista. Admite los siguientes valores: Valor none circle disc square armenian decimal decimal-leading-zero georgian lower-alpha lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman inherit Descripcin Sin marcador. Marcador en forma de crculo. Opcin por defecto. Marcador en forma de cculo relleno. Marcador cuadrado. en forma de
Marcador en numeracin tradicional Armenia. El marcador es un nmero. El marcador es un nmero precedido por un 0. 01,02,03... Marcador en numeracin tradicional georgiana. El marcador es una letra en minscula. El marcador es una letra griega minscula. Similar a lower-alpha. El marcador es un nmero romano en minscula. El marcador es una letra en mayscula. Similar a upper-alpha. El marcador es un nmero romano en mayscula. Especifica que el valor de liststyle-type ser heredado del elemento padre.
75
Ejemplo: ul.primeralista { list-style-type: square; } ol { list-style-type: upper-roman; }
76
23.-Ejemplos finales Superposicin de dos DIV con los bordes redondeados: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Superposición de Divs</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div id="superior"></div> <div id="inferior"></div> </body> </html> estilo.css #superior { width: 400px; height: 400px; background-color:#FF0000; position:absolute; z-index:1; margin: 20px 20px 200px; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
77
#inferior { width: 400px; height: 400px; background-color:#0033CC; position:absolute; z-index:0; margin: 60px 60px 200px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } Resultado:
78
Maquetacin de una web utilizando DIVs: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Maquetación de una web utilizando divs</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div id="contenedor"> <div id="cabecera">Ésta es la cabecera</div> <div id="barraizquierda">Ésta es la barra lateral izquierda</div> <div id="contenido"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget lacus mi, sit amet bibendum mi. Suspendisse potenti. Sed ac sem cursus turpis sodales condimentum in ac purus. Vivamus eget leo turpis. Pellentesque vehicula diam id velit scelerisque facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nisi turpis, vestibulum sed volutpat et, sagittis ac turpis. Etiam viverra sollicitudin magna nec semper. Proin quam turpis, lobortis ut
79
vulputate vitae, blandit at urna. Aliquam enim est, dignissim sed fermentum a, pharetra nec est. Integer massa lacus, euismod sed imperdiet quis, ornare at arcu. Etiam sit amet lorem a felis pellentesque iaculis id quis est. Ut mattis, nisi sed commodo consequat, neque felis placerat augue, a luctus lacus nisl nec lectus. Vestibulum diam ligula, vestibulum a tincidunt quis, sollicitudin sit amet justo. Mauris vestibulum lacus in sem posuere et accumsan leo iaculis. Donec eleifend commodo odio non viverra. Proin ac tortor nec nibh hendrerit lacinia ac vel quam. Nam tincidunt vestibulum nisi, eu laoreet felis viverra et. Sed et arcu ut massa venenatis tempus sed at neque. Integer non mauris nisl, quis commodo turpis. Nulla rhoncus bibendum aliquam. Morbi vitae felis nulla, nec congue elit. Sed eget quam nunc, et pellentesque enim. Praesent ac metus nisl, id porta magna. Pellentesque vel nibh enim. Donec at justo sapien, a condimentum tellus. Donec nec malesuada eros. Maecenas in enim neque, sed pulvinar risus. Sed porttitor laoreet enim ac hendrerit. Cras tempor scelerisque odio pulvinar lacinia. Ut ornare ante a turpis facilisis commodo. Sed elit justo, dapibus eu accumsan eu, convallis sit amet justo. Cras molestie consequat turpis sit amet commodo. Nulla lacus sapien, malesuada eu viverra ut, pulvinar quis turpis. Quisque sit amet suscipit nisl. Proin at rutrum metus. Donec laoreet blandit elit at congue. Mauris sed vehicula nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ornare lacus a lectus porttitor quis ornare purus elementum. Pellentesque imperdiet faucibus auctor. Morbi sit amet nisi urna, sed scelerisque turpis. Nulla facilisi. Morbi pulvinar purus sit amet lacus placerat tristique. Aenean libero neque, vehicula in venenatis vitae, malesuada sit amet augue. Ut mattis lacinia purus in porttitor. </div>
80
<div id="barraderecha"> Ésta es la barra lateral derecha. </div> <div id="piedepagina"> Pie de página ©2010 </div> </div> </body> </html> estilo.css #contenedor { border: 1px solid black; width: 800px; margin: 0 auto; } #cabecera { width: 800px; height: 50px; background-color: #FF9900; } #barraizquierda { width: 100px;
81
height: 500px; background-color:#FFCC00; position: absolute; } #contenido { width: 600px; height: 500px; background-color:#0099CC; margin-left: 100px; position: absolute; } #barraderecha { width: 100px; height: 500px; background-color:#FFCC00; margin-left: 700px; } #piedepagina { width: 800px; height: 25px; background-color: #FF9900; text-align:center; }
82
Resultado:
83
Galera de imgenes en CSS index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Galería de imágenes</title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div class="contenedor"> <a class="miniatura" href="#miniatura"> <img src="1.jpg" width="75" height="75" alt="1" /> <span> <img src="1.jpg" width="480" height="480" alt="1" /><br /> Gato 1 </span> </a> <a class="miniatura" href="2.jpg"> <img src="2.jpg" width="75" height="75" alt="2" /> <span> <img src="2.jpg" width="480" height="480" alt="2"
84
/><br /> Gato 2 </span> </a> <a class="miniatura" href="3.jpg"> <img src="3.jpg" width="75" height="75" alt="3" /> <span> <img src="3.jpg" width="480" height="480" alt="3" /><br /> Gato 3 </span> </a> <a class="miniatura" href="4.jpg"> <img src="4.jpg" width="75" height="75" alt="4" /> <span> <img src="4.jpg" width="480" height="480" alt="4" /><br /> Gato 4 </span> </a> </div> </body> </html> estilo.css body { background-color: #333;
85
} a { text-decoration: none; } .contenedor { margin:0 auto; width: auto; padding: 1em 1em 1em 1em; text-align: center; background-color: #000; height: auto; } .contenedor p { color: #fc7; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } .miniatura img { border: 2px solid #000000; margin: 0 3px 5px 3px; } .miniatura:hover img { border: 2px solid #000000;
86
} .miniatura span { position: absolute; top: 150px; left: -1000px; visibility: hidden; color: #fc7; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } .miniatura:hover span { background-color: #333; visibility: visible; right: 0; top: 150px; left: 0px; z-index: 50; margin: 0 auto; width: auto; } .miniatura span img { border: 1px solid #000; padding: 5px 5px 40px 5px; background-color: #FFFFFF; }
87
#footer { width: 20%; position: absolute; bottom: 10px; right: 10px; clear: both; padding-top: 8px; text-align: center; border-top: 1px solid #C6D4E6; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 20px; } #footer a { color: #fc0; text-decoration:none; font-weight: bold; }
88
Resultado:
89
Tabla con formato en CSS: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Cuota de uso de navegadores</title> <style type="text/css"> table { border: 1px solid green; margin: 0 auto; width: 40%; } th#nombretabla { background-color: #336633; color:#FFFFFF; } th.seccion { background-color: #339933; color:#FFFFFF; }
90
td { text-align:center; background-color:#33FF66; } </style> </head> <body> <table> <tr> <th colspan="2" id="nombretabla">Cuota de uso de navegadores</th> </tr> <tr> <th class="seccion">Nombre del navegador</th> <th class="seccion">Cuota(%)</th> </tr> <tr> <td>Internet Explorer</td> <td>66,77</td> </tr> <tr> <td>Firefox</td> <td>20,78</td> </tr> <tr> <td>Safari</td> <td>7,13</td> </tr>
91
<tr> <td>Google Chrome</td> <td>0,83</td> </tr> <tr> <td>Opera</td> <td>0,71</td> </tr> <tr> <td>Netscape</td> <td>0,53</td> </tr> <tr> <td>Mozilla</td> <td>0,08</td> </tr> <tr> <td>Opera Mini</td> <td>0,06</td> </tr> </table> </body> </html>
92
Resultado:
93

HTML Css Fácil y Sencillo

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css Fácil y Sencillo

Uploaded by

Copyright:

Available Formats

HTML & CSS Fcil y sencillo

&ordm; &ordf; &copy; &reg; &nbsp;

El ni&ntilde;o se encontr&oacute; 1&euro;.

<ol type=1> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ol> 1. Uno 2. Dos 3. Tres

</tr> <tr> <td>Citren</td> <td>Renault</td> <td>Subaru</td>

</table> </body> </html>

</table> </body> </html>

<td width="10">2</td> <td align="center">Noruega</td> <td>58141</td>

</table> </body> </html>

top middle bottom alt texto

Especifica la URL de la imagen a mostrar en el botn. Especifica el tipo de un elemento input.

Indica el valor de un elemento input.

value="Borrar"> </td> </tr> </table> </form> </body> </html>

Repite la imagen verticalmente.

Muestra la imagen, pero no la repite ni horizontal, ni verticalmente.

Una medida concreta, la medida ms utilizada es en px.

Ejemplo: body { background: fixed; } url(imagenes/imagen.jpg) #000000

Ejemplo: img { z-index: -1; }

Valor left right none inherit

Ejemplo: img { float: right; clear: both; }

Ejemplo: div { width: 200px;

div { visibility: hidden; }

Valor auto medida % inherit

Valor medida % inherit

Ejemplo: p.parrafo1 { max-height: 75%; }

Ejemplo: div.cuadrodeespera { cursor: wait; }

Descripcin Sin lnea exterior. Especifica una lnea exterior a

inset outset inherit

Ejemplo: p { outline-style: outset; }

thick length inherit

Ejemplo: p { outline-style: solid; outline-width: 3px; }

Ejemplo: ul.primeralista { list-style-type: square; } ol { list-style-type: upper-roman; }

You might also like

º ª © ®

El niño se encontró 1€.