Você está na página 1de 61

HTML y CSS

PamelaRodrguez Domnguez

@thepam @h

Libros disponibles
HTMLfor the World Wide Web with XHTML and CSS XHTMLandCSS Elizabeth Castro Peachpit Press,2003 P h it P 2003 HTMLyXHTMLLaGuaDefinitiva Chuck Musciano y Bill Kennedy yBillKennedy OReilly,2000

Libros recomendados
CSS,DHTML&AJAX Jason Cranford Peachpit Press,2007 CSS Pocket Reference CSSPocketReference EricA.Meyer O Reilly,2007 OReilly 2007

Otras fuentes disponibles


http://www.w3schools.com http://jquery.com/ htt //j / http://www.csszengarden.com/ p g http://www.smashingmagazine.co m/ http://sixrevisions.com/ http://www.hotscripts.com/

Qu es HTML?
HyperText Markup yp p Language (Lenguaje deMarcadode Hipertexto)

Qu es HTML?
Conjuntodeetiquetas C j t d ti t q quesirvenparadefinir p f laformaenlaque presentareltextoy l otroselementosdela otros elementos de la pgina

Qu es CSS?

Cascading Style Style Sheets (Hojas de (Hojasde estiloencascada) estilo en cascada)

Qu es CSS?
Lenguajeusadopara definirlapresentacin definir la presentacin deundocumento estructuradoescritoen HTML

Estructura Bsica HTML


<html> <head> </head> <body>
Iniciodepgina Informacinde encabezado

Contenidoocuerpo delapgina de la pgina

</body> </html>

Cierredepgina Ci d i

Estructura Bsica HTML


<html> <head> </head> <body>
Iniciodepgina Ttulodelapgina,etiquetas Tt l d l i ti t META,enlacesahojasdeestilo (CSS)yenlacesacdigo (CSS) y enlaces a cdigo Javascript Todosloselementosdela pgina(imgenes,campos, texto,etc.)

</body> </html>

Cierredepgina Ci d i

Estndares web
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "htt // 3 /TR/ ht l1/DTD/ ht l1 transitional.dtd"> <htmlxmlns http://www.w3.org/1999/xhtml > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <metahttpequiv="ContentType" p q yp content="text/html;charset=utf8"/> <title>Ttulo delapgina</title> </head> / <body> </body> </b d > </html>

Elementos de <head>
<head> <title>Ttulo de la pgina</title> delapgina</title> <linktype="text/css"rel="stylesheet href="style.css"/> <script type="text/javascript" scripttype text/javascript src="script.js"></script> </head>

Elementos de <head>Atributos
<head> predefinidos <title>Ttulo de la pgina</title> delapgina</title> <linktype="text/css"rel="stylesheet href="style.css"/> <script type="text/javascript" scripttype text/javascript src="script.js"></script> Ubicacin de la </head>
hoja de estilos

Elementos de <head>
<head> <title>Ttulo de la pgina</title> delapgina</title>

Atributo predefinido

<linktype="text/css"rel="stylesheet href="style.css"/> <script type="text/javascript" scripttype text/javascript src="script.js"></script> </head> Ubicacin d l Ub del
script

Jerarqua de etiquetas
Pgina

<!DOCTYPE> !DOCTYPE

<HTML> HTML

<HEAD>

<BODY>

<FORM>

<DIV>

<INPUT>

<IMG>

<P>

Elementos de <body>
<div> <p>Prrafos</p> <h1>Ttulo 1</h1> / <h2>Ttulo 2</h2> <h3>Ttulo 3 /h3 h3 Tt l 3</h3> <img /> Imagen g/ g <br /> Saltodelnea </div> /

Elementos de <body>
<div> <em>Itlicas</em> / <strong>Negritas</strong> <blockquote>Bloque de cita</blockquote> <hr/> <hr /> Lnea horizontal </div> /

Elementos de <body>
<div> <a>Ligas</a> <ul>Lista nonumerada</ul> <ol>Lista numerada</ol> <li>Elemento delalista</li> / <table>Tabla</table> <tr>Rengln</tr> <td>Celda</td> </div>

Generadores de texto de prueba b

http://www.lipsum.com/

Generadores de texto de prueba b

Ejercicio

Empezando por
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 "htt // 3 /TR/ ht l1/DTD/ ht l1 transitional.dtd"> <htmlxmlns http://www.w3.org/1999/xhtml > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <metahttpequiv="ContentType" p q yp content="text/html;charset=utf8"/> <title>Ttulo delapgina</title> </head> / <body> </body> </b d > </html>

Creando una estructura


<divid=contenedor> <divid=encabezado> <di id encabe ado> </div> / <divid=contenido> </div> /di <divid=pie> p </div> </div> /

El encabezado
<divid=encabezado> <h1>Ejercicio</h1> / <h3>Primera prueba de HTML deHTML enclase</h3> </div>

El contenido
<divid=contenido> <h2>Texto</h2> <p>Texto</p> <blockquote>Texto</blockquote> <blockquote> Texto </blockquote> <p>Texto</p> <ol> l <li>Elemento 1</li> <li>Elemento 2</li> </ol> </div>

El contenido
<p>Lorem ipsum dolorsitamet, consectetur consectet r adipiscing elit elit. Curabitur justo lorem,commodo atullamcorper quis,eleifend quis nulla Nam elementum nulla.Namelementum dictumnibh eget egestas.Nunc nonaugue inerat ultrices p /p tempus.</p>

El contenido
<p><strong>Lorem ipsum dolor</strong>sitamet, dolor</strong> sit amet consectetur adipiscing elit. Curabitur justo lorem,commodo atullamcorper quis,eleifend at ullamcorper quis eleifend quis nulla.<em>Nam elementum</em>dictumnibh / g g g eget egestas.Nunc nonaugue in erat ultrices tempus.</p>

El contenido
<p>Lorem ipsum dolorsitamet, consectetur consectet r adipiscing elit <a elit.<a href=http://www.google.com> Curabitur justo</a>lorem, commodo at ullamcorper quis atullamcorper quis, eleifend quis nulla.Nam elementum dictumnibh eget g g egestas.Nunc nonaugue inerat ultrices tempus.</p>

El contenido
<ahref=http://www.google.com target=_blank>Curabitur target blank>C rabit r justo</a>

El contenido
<ahref=http://www.google.com target=_blank>Curabitur target blank>C rabit r justo</a>
Ubicacin de la pgina que se vincular

Liga o referencia de pgina a la que se redireccionar

El contenido
<img src=imagen.jpg/> Guardar imagen en la misma enlamisma carpeta que su HTML. Crear carpeta deimgenes y referenciarlaruta. referenciar la ruta
src=imagenes/imagen.jpg

El contenido
<img src=imagen.jpg alt=Imagen descriptiva del alt Imagen descripti a del texto anteriortitle=Nombre delaimagen/>

El contenido

Ubicacin o ruta de la imagen

<img src=imagen.jpg alt=Imagen descriptiva del alt Imagen descripti a del texto anteriortitle=Nombre delaimagen/>
Descripcin de la imagen Nombre de la imagen

El contenido

Ubicacin o ruta de la imagen

<img src=imagen.jpg alt=Imagen descriptiva del alt Imagen descripti a del texto anteriortitle=Nombre delaimagen/>
Descripcin de la imagen Nombre de la imagen

Consideraciones de C id i d accesibilidad y SEO

Qu es Accesibilidad?
Capacidaddeaccesoa Capacidad de acceso a uncontenido independientemente deladiscapacidad d l di id d delusuarioodela del usuario o de la tecnologaqueutilice

Qu es SEO?
Search Engine Optimization (Optimizacinde motoresde t d bsqueda)

Qu es SEO?
Procesode Proceso de modificaciny optimizacindeun website paramejorar b it j lasposicionesenlos las posiciones en los buscadores.

El pie de pgina
<divid=pie> Ejercicio realizado por <a href=mailto:pamela.rdom@gm p @g ail.com>Pamela</a> </div> /

Continuando el ejercicio
Crear unarchivo enlamisma carpeta conelnombre style css style.css Agregar lasiguiente lnea al g g g archivoHTMLen<head>:
<linktype="text/css"rel="stylesheet li k " / " l " l h href="style.css"/>

Creando objetos de estilo


Por nombre delelemento Por identificador Por clase Por jerarqua

Por nombre del elemento


body{ backgroundcolor:#EEEEEE; color:#333333; color: #333333; ccccff fontfamily:Verdana; y ; fontsize:12px; }

Introduciendo estilos
body{ backgroundcolor:#EEEEEE; color:#333333; color: #333333; Color de C l r d la letra fontfamily:Verdana; y ; Tipo de letra fontsize:12px; }
Tamao de la letra en pixeles l l Color de fondo

Claves hexadecimales

Cdigo g hexadecimal

Claves hexadecimales

Colores seguros para web

Por nombre del elemento


h1{ color:#003366; l #003366 } h3,h2{ color:#006699; ; } h3{ fontstyle:italic; }

Por identificador
<divid=contenedor></div> #contenedor{ co e edo { margin:0auto; width:600px; height:auto; height: auto; }

Introduciendo estilos
<divid=contenedor></div> #contenedor{ co e edo { margin:auto; width:600px; height:auto; height: auto; }
Mrgenes externos

Tamao de ancho

Tamao de alto

Margin
margin:10px;
T, TB T

margin:10px10px; margin:10px10px 10 10 i 10 10 10px 10px; margintop: 10px; margin top:10px; marginbottom:10px; marginleft:10px; marginright:10px;
R B L

L, R L

Introduciendo estilos
<divid=contenedor></div> #contenedor{ margin:0auto; width:600px; p ; height:auto; border:1pxsolid #CCCCCC; border 1px solid #CCCCCC }

Introduciendo estilos
<divid=contenedor></div> #contenedor{ margin:0auto; Color del borde width:600px; p ; height:auto; border:1pxsolid #CCCCCC; border 1px solid #CCCCCC Estilo del }
Grosor del borde borde

Border
border:1pxsolid#CCCCCC; bordertop:1pxsolid#CCCCCC; borderbottom:1pxsolid#CCCCCC; borderleft:1pxsolid#CCCCCC; p ; borderright:1pxsolid#CCCCCC;

Por identificador
<divid=contenedor></div> #contenedor{ margin:0auto; width:600px; p ; height:auto; border:1pxsolid #CCCCCC; border 1px solid #CCCCCC padding:10px; }

Padding
padding:10px;
T, TB T

padding :10px10px; padding :10px10px 10 10 ddi 10 10 10px 10px; padding top: 10px; top:10px; padding bottom:10px; padding left:10px; padding right:10px;
R B L

L, R L

Margin o Padding?
Pgina web Contenedor DIV
Lorem ipsum dolor sitamet, consectetur adipiscing elit. Aliquam gravida iaculis ligula intincidunt. Vivamus condimentum est non lectus semper tempor.Fusce nibh lectus,aliquet quis malesuada non, placerat eu odio. Phasellus velit odio.Phasellus neque,lacinia condimentum viverra a,vehicula vel odio.Namaliquam porta risus,vitaevestibulum diam ultricies nec.Nullam nisivelit, suscipit vitaecondimentu i it it di t

Margin

Padding

Por clase
.fondotenue{ { backgroundcolor:#ccccff; padding:10px; }

Por clase
<div id=encabezado class=fondotenue> class fondoten e> </div> <div id pie class fondotenue> id=pieclass=fondotenue> </div>

Identificador VS Clase
Identificador Esnico(uno por pgina) Se aadeconel at buto d atributoid Sereferencia con(#) Puedeaplicar Puede aplicar cualquierestilo Clase Puedeutilizarseen Puede utilizarse en dosomselementos encadapgina en cada pgina Se aadeconel at buto c ass atributoclass Sereferencia con(.) Puedeaplicar Puede aplicar cualquierestilo

Por jerarqua
#contenidoa,#contenidoa:visited{ color:#cc9900; color: #cc9900; textdecoration:none; } #contenidoa:hover{ color:#996600; textdecoration:underline; textdecoration: underline; }

Dudas? D d ?
Pamela Rodrguez Domnguez
pamela.rdom@gmail.com @thepam http://thepam.blogspot.com/