Presentación CSS y HTML en Gummurcia

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>.✓ 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.

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">

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>.

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>

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 usado para definir lapresentación de un documento estructuradoescrito en HTML o XML (y por extensión enXHTML) es.wikipedia.org/wiki/Css

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 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*/}

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 suﬁciente para centrar la pagina*/ text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/}

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; /*ﬂotamos a la izquierda*/ display:inline;}

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;}

Ahora vamos a por el menú#menu { float:left; margin:10px 20px auto 0; border:1px solid #333333; width:380px; height:24px;}

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*/}

Ahora a los elementos <li> le damos lo suyoli { margin:0; /*le quito el margen al elemento de la lista*/ float:left; /*y los ﬂoto a la izquierda para eliminar el salto de linea*/ }

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; /*deﬁno 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*/}

Para hacer el menú mas bonito le hacemos estoli a:hover { background-color:#999900; /*decoración para el evento hover (mouse encima)*/}

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;}

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;}

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;}

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;}

¡Muchas Gracias a todos! @m_villagordo @Gummurcia http://www.gummurcia.org/ Encuesta a realizar

Presentación CSS y HTML en Gummurcia

by Manuel Villagordo Vera on Feb 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Presentación CSS y HTML en Gummurcia — Presentation Transcript