HTML y CSS

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
Descripcin de la imagen Nombre de la imagen
El contenido
Ubicacin o ruta de la imagen
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; }
<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
<divid=contenedor></div> #contenedor{ margin:0auto; width:600px; p ; height:auto; border:1pxsolid #CCCCCC; border 1px solid #CCCCCC }
<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/

HTML y CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML y CSS

Cargado por

Copyright:

Formatos disponibles

HTML y CSS

Otras fuentes disponibles

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

Estructura Bsica HTML

Contenidoocuerpo delapgina de la pgina

Estructura Bsica HTML

Generadores de texto de prueba b

Generadores de texto de prueba b

Creando una estructura

Liga o referencia de pgina a la que se redireccionar

Ubicacin o ruta de la imagen

Ubicacin o ruta de la imagen

Consideraciones de C id i d accesibilidad y SEO

Creando objetos de estilo

Por nombre del elemento

Colores seguros para web

Por nombre del elemento

También podría gustarte