Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Bienvenidos al Gummurcia
Taller Práctico Básico  de HTML y CSS
¡Instalamos Aptana 3
Creamos el ProyectoNuevo Proyecto                 Nombre del Proyecto                 Proyecto Web
Aptana nos creala estructura básica
El ejemplo que vamos a   construir explicado      paso a paso
@m_villagordo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
¿Y eso Que es?✓ La declaración de tipo de documento debe ser lo primero en un documento   HTML, antes de la etiqueta <html...
El <head><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>index</title>  <meta name="ge...
Que incluimos en el              <head>✓ Puede incluir secuencias dede estilo (CSS), instrucciones para que el navegador s...
El <Body>   <body>              <div id="contenedor">                 <div id="encabezado">                    <h1>HTML y ...
El <body>✓Todo lo que queramos que el navegador nosmuestre ira entre las etiquetas...✓   <body> </body>
Dando forma al HTML con  Hojas de estilo (CSS)
¿Que son las CSS?✓CSS son las siglas de Cascading Style Sheets, enespañol Hojas de estilo en Cascada✓CSS es un lenguaje us...
La Idea de las hojas de estilo✓   Es separar la estructura de un documento de su presentación
Podemos aplicar hojas deestilo de 4 formas diferentes
Pero yo os voy a decir la mas           usada
Hoja de estilos externa<link rel="stylesheet" type="textcss" href="style.css">
Dimensiones de las cajas
¿Comenzamos a darleestilo a nuestro HTML?
Empezamos dando estilo a             todo el <body>/*empezamos por esto, para evitar resultados extraños en distintos nave...
Le damos propiedades a             nuestro contenedor#contenedor { width:670px; /*ancho total de la pagina*/ border: 1px s...
Le damos propiedades a         nuestro encabezado#encabezado{  margin:10px; /*para que no se pegue al borde*/  padding:10p...
Le damos propiedades a         los <h1> que tengamos          dentro del encabezado#encabezado h1 {    font-size:22px;    ...
Ahora vamos a por el                  menú#menu {    float:left;    margin:10px 20px auto 0;    border:1px solid #333333; ...
Damos propiedades a las     listas desordenadas (ul)                             ul {    list-style-type:none; /*con esto ...
Ahora a los elementos           <li> le damos lo suyoli {       margin:0; /*le quito el margen al elemento de la lista*/  ...
A todos los <a> que estén             dentro de <li>li a {    display:block; /*con esto el vinculo tendrá un área rectangu...
Para hacer el menú mas     bonito le hacemos estoli a:hover {    background-color:#999900; /*decoración para el evento hov...
El siguiente paso es darle               forma al contenido#contenido {    width:580px; /*el ancho mas el padding me da 60...
todos los <h2>            que estén dentro del                 contenido#contenido h2 {    font-size:16px;    color:#CC330...
Y ahora a todos los <h3>        que estén dentro del             contenido#contenido h3 {    width:246px;    font-size:14p...
Y ahora si, para terminar         las propiedades del#footer {               <footer>    width:560px; /*menos porque debem...
¡Muchas Gracias a todos!           @m_villagordo           @Gummurcia    http://www.gummurcia.org/    Encuesta a realizar
Próxima SlideShare
Cargando en…5
×

Presentación CSS y HTML en Gummurcia

1.415 visualizaciones

Publicado el

Publicado en: Educación
  • Sé el primero en comentar

Presentación CSS y HTML en Gummurcia

  1. 1. Bienvenidos al Gummurcia
  2. 2. Taller Práctico Básico de HTML y CSS
  3. 3. ¡Instalamos Aptana 3
  4. 4. Creamos el ProyectoNuevo Proyecto Nombre del Proyecto Proyecto Web
  5. 5. Aptana nos creala estructura básica
  6. 6. El ejemplo que vamos a construir explicado paso a paso
  7. 7. @m_villagordo
  8. 8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  9. 9. ¿Y eso Que es?✓ La declaración de tipo de documento debe ser lo primero en un documento HTML, antes de la etiqueta <html>.✓ La declaración de tipo de documento no es una etiqueta HTML, es una instrucción para que el navegador web sepa qué versión del lenguaje de marcado se esta escribiendo en la página.✓ La Definición del Tipo de Documento (DTD). El DTD especifica las reglas para ese lenguaje de marcado, de modo que los navegadores representen el contenido correctamente.
  10. 10. El <head><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>index</title> <meta name="generator" content="Studio 3 http://aptana.com/"> <link rel="stylesheet" type="text/css" href="../gummurcia/css/style.css"/> <meta name="author" content="Manuel Villagordo Vera"> <!-- Date: 2011-01-23 -->
  11. 11. Que incluimos en el <head>✓ Puede incluir secuencias dede estilo (CSS), instrucciones para que el navegador sepa donde encontrar las hojas comandos, las proporcionar información del <meta name = “descripción”> (aquí es donde el SEO hace la mayor parte de su trabajo).✓ También incluyeque va aparecer en el navegador y también espongamos entre esasSEO. etiquetas es lo las etiquetas <title>mipagina</title> lo que importante para el✓ Otras etiquetas que se incluyen son: <title>, <link>, <meta>, <script>, y <style>.
  12. 12. El <Body> <body> <div id="contenedor"> <div id="encabezado"> <h1>HTML y CSS Básico</h1> </div> <div id="menu"> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Linkedin</a></li> <li><a href="#">Contacto</a></li> </ul> </div> <div id="contenido"> <h2>Subtitulo</h2> <p>tempus vitae, luctus a, enim. Mauris justo. Nulla rutrum sapien nec mi. Proin dolor neque, auctor ut, pulvinar ut, mattis eu, erat.</p> <h3>Sub-subtitulo</h3> <p> laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa.</p> <div id="footer"> <p>Copyright2005 - Derechos reservados</ p>
  13. 13. El <body>✓Todo lo que queramos que el navegador nosmuestre ira entre las etiquetas...✓ <body> </body>
  14. 14. Dando forma al HTML con Hojas de estilo (CSS)
  15. 15. ¿Que son las CSS?✓CSS son las siglas de Cascading Style Sheets, enespañol Hojas de estilo en Cascada✓CSS es un lenguaje usado para definir lapresentación de un documento estructuradoescrito en HTML o XML (y por extensión enXHTML) es.wikipedia.org/wiki/Css
  16. 16. La Idea de las hojas de estilo✓ Es separar la estructura de un documento de su presentación
  17. 17. Podemos aplicar hojas deestilo de 4 formas diferentes
  18. 18. Pero yo os voy a decir la mas usada
  19. 19. Hoja de estilos externa<link rel="stylesheet" type="textcss" href="style.css">
  20. 20. Dimensiones de las cajas
  21. 21. ¿Comenzamos a darleestilo a nuestro HTML?
  22. 22. Empezamos dando estilo a todo el <body>/*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo deestilo al texto*/body { font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#666666; text-align:center; /*aquí mandamos a centrar todo el contenido*/}
  23. 23. Le damos propiedades a nuestro contenedor#contenedor { width:670px; /*ancho total de la pagina*/ border: 1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea,ahorrando codigo*/ background-color: #FFF8F0; /*Fondo del contenedor*/ margin: 10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevoses suficiente para centrar la pagina*/ text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/}
  24. 24. Le damos propiedades a nuestro encabezado#encabezado{ margin:10px; /*para que no se pegue al borde*/ padding:10px; /*algo de relleno*/ width:224px; /*este ancho es para que cuadre con el texto*/ height:50px; /*altura del encabezado*/ border:1px solid #333333; /*decoracion*/ background-color:#CC6600; /*fondo del encabezado*/ float:left; /*flotamos a la izquierda*/ display:inline;}
  25. 25. Le damos propiedades a los <h1> que tengamos dentro del encabezado#encabezado h1 { font-size:22px; width:224px; color:#FFFFFF; margin: 0px; /*los h1 vienen con margen, con esto se lo quitamos*/ padding-top:15px;}
  26. 26. Ahora vamos a por el menú#menu { float:left; margin:10px 20px auto 0; border:1px solid #333333; width:380px; height:24px;}
  27. 27. Damos propiedades a las listas desordenadas (ul) ul { list-style-type:none; /*con esto quitamos las viñetas*/ margin:0px; /*le quitamos el margen a la lista*/ padding:0; /*y el relleno*/}
  28. 28. Ahora a los elementos <li> le damos lo suyoli { margin:0; /*le quito el margen al elemento de la lista*/ float:left; /*y los floto a la izquierda para eliminar el salto de linea*/ }
  29. 29. A todos los <a> que estén dentro de <li>li a { display:block; /*con esto el vinculo tendrá un área rectangular, así no será solo el texto*/ color:#FFFFFF; /*mas*/ width:72px; /*defino el ancho del rectángulo del vinculo*/ background-color:#CC3300; /*algo de color*/ padding:6px 9px 4px 14px; /*sumamos el relleno al ancho y alto del rectangulo paraobtener el div #menu completamente ocupado con los ítems del menú*/ text-decoration:none; /*elimino el subrayado del vínculo*/ font-weight:bold; /*decoración*/ text-transform:uppercase; /*decorare los vínculos en mayúsculas*/}
  30. 30. Para hacer el menú mas bonito le hacemos estoli a:hover { background-color:#999900; /*decoración para el evento hover (mouse encima)*/}
  31. 31. El siguiente paso es darle forma al contenido#contenido { width:580px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina */ clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ padding:10px;}
  32. 32. todos los <h2> que estén dentro del contenido#contenido h2 { font-size:16px; color:#CC3300; width:246px; text-transform:uppercase; border-bottom:1px dotted #CC3300;}
  33. 33. Y ahora a todos los <h3> que estén dentro del contenido#contenido h3 { width:246px; font-size:14px; color:#999900; border-bottom:1px dotted #999900;}
  34. 34. Y ahora si, para terminar las propiedades del#footer { <footer> width:560px; /*menos porque debemos sumar el padding del div contenido*/ text-align:right; padding:10px; font-size:80%; /*mas pequeño el texto*/ font-style:italic; color:#999999;}
  35. 35. ¡Muchas Gracias a todos! @m_villagordo @Gummurcia http://www.gummurcia.org/ Encuesta a realizar

×