Presentación CSS y HTML en Gummurcia

Taller Práctico Básico
de HTML y CSS

Creamos el Proyecto
Nuevo Proyecto

Nombre del Proyecto

Proyecto Web

Aptana nos crea
la estructura básica

El ejemplo que vamos a
construir explicado
paso a paso

<!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 nos
muestre 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, en
español Hojas de estilo en Cascada
✓
CSS es un lenguaje usado para definir la
presentación de un documento estructurado
escrito en HTML o XML (y por extensión en
XHTML) 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 de
estilo 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">

¿Comenzamos a darle
estilo a nuestro HTML?

Empezamos dando estilo a
todo el <body>
/*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo de
estilo 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 nuevos
es suﬁciente para centrar la pagina*/
text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/

}

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

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 suyo

li {
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 para
obtener 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 esto

li 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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Presentación CSS y HTML en Gummurcia

Similar a Presentación CSS y HTML en Gummurcia (20)

Último

Último (20)

Presentación CSS y HTML en Gummurcia

Notas del editor