- Antes de Todo
- Lección 1
- Lección 2
- Lección 3
- Lección 4
Como vamos
Bien se acabo la segunda lección, me tarde un poquito en hacerla eso si je, ya saben y creo que ya les aburrí con esto pero me agradaría mucho si visitaran nuestro FORO y me digan sus inquietudes o comentarios acerca de las lecciones para así irlas mejorando poco a poco, es lo único que les pido por este trabajo.
Bien vamos a nivelarnos un poco, hasta ahora los códigos de nuestro index son estos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<!-- Comienzo class banner -->
<div class="banner">Banner</div>
<!-- Fin class banner -->
<!-- Comienzo contenedor -->
<div class="contenedor">
<div class="menuIzq">Menu Izquierda</div>
<!-- Comienzo class cuerpo -->
<div class="cuerpo">
<p>“Este es el primer texto de nuestra página!!” </p>
<p>Segundo parrafo, pueden poner lo que ustedes quieran </p>
<p>Wow tanto codigo, aprendiendo ahora a cambiar de linea.. <br />
Y wualaaa ya esta! </p>
<br />
<a href="http://www.axside.com" ><img src="imagenes/objeto1.jpg" alt="texto alternativo" width="127" height="95" border="0" longdesc="Descripcion larga"></a><br />
página creada con ayuda de <a href="www.axside.com">Axside</a><br /><br />
<div><a href="mailto:axside@axside.com"><img src="imagenes/corro2b.gif" border="0"></a></div><br />
Buzon de correo
</div>
<!-- Fin cuerpo -->
<div class="menuDer">Menu Derecha</div>
</div>
<!-- Fin Contenedor -->
<!-- Comienzo class piepágina -->
<div class="piepágina">
<div class="base1">Base 1</div>
<div class="base2">Base 2</div>
</div>
<!-- Fin piepágina -->
</body>
</html>
Los de nuestra hoja de estilos son estos:
* {margin:0px ; padding:0px ; border: 0px}
.cuerpo {
text-align:center;
font-family:Tahoma, Verdana, "Trebuchet MS";
font-size:14px;
color:#003399;
}
.banner {
width: 770px;
height: 130;
margin:auto;
}
.menuIzq {
width: 170px;
float: left;
}
.cuerpo {
width: 430;
float:left;
}
.menuDer {
width: 170;
float: right;
}
.piepágina{
width: 100%;
float: left;
font-family:Tahoma, Verdana, "Trebuchet MS";
font-size:13px;
}
.contenedor {
width: 770px;
margin: auto;
font-family:Tahoma, Verdana, "Trebuchet MS";
font-size:13px;
color: #000000;
}
Y la página les debe estar quedando ASI.
Bien acabamos la segunda lección, prepárense y vamos para la tercera…
<<<<< Anterior