Conectarse

Recuperar mi contraseña

Visitantes



Visitas

contador de visitas

[Tutorial]CSS y HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

[Tutorial]CSS y HTML

Mensaje por DavidIESP el Mar Feb 08 2011, 21:25

Hoy vamos a avanzar en el mundo de la creación de páginas web, vamos a crear una muy básica con CSS.

Para empezar, para éste tutorial usaré el Rapid CSS 2007.

Abriremos un documento HTML y crearemos nuestra página, en éste caso he decidido crear una web sobre futbol.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
</head>

<body>
<div id="divtitulo">LIGABBVA! Tu web sobre el mundo del futbol español!</div>
<div id="divlogo"><img SRC="imatges\logoliga.gif"></div>
<hr />
<div id="divclubbar">
<table width="600" border="4">
<tr><td>Equipo</td></tr>
</table>


<table width="600" border="4">
<tr>
<td colspan="2"><p align="center"><p align="center"><a href="Barcelona.htm">FC Barcelona</a>


______________________________</p></td>

<td rowspan="5"><img SRC="imatges\escudobarsa.jpg"></td>
</tr>
</table>

<table width="600" border="4">
<tr>
<td colspan="2"><p align="center"><a href="Madrid.htm">Real Madrid CF.</a>


______________________________</p></td>

<td rowspan="5"><img SRC="imatges\escudomadrid.jpg"></td>
</tr>
</table>

<table width="600" border="4">
<tr>
<td colspan="2">
<p align="center"><a href="Espanyol.htm">RCD Espanyol</a>


______________________________</p></td>

<td rowspan="5"><img SRC="imatges\espanyol.jpg"></td>
</tr>
</table>


</div> <!--divclubbar-->


<div id="divcierre">
<p>© LIGABBVA 27 Enero 2011 Davishh</p>
</div>


</body>

</html>

Una vez terminada, daremos vida a lo escrito dentro de cada div, dandole un estilo propio.

Sin cerrar el html, abriremos un archivo nuevo CSS, y se tienen que hacer de está manera:

*{
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}

#divlogo{
margin-top:50px;
text-align:center;
}

#divtitulo{
margin-left:0px;
margin-top:50px;
text-align:center;
font-weight:bold;
font-size:30px;
color: white;
}

#divclubbar{
margin-left:250px;
text-align:center;
font-weight:bold;
}

#divcampnou{
margin-left:250px;
text-align:center;
font-weight:bold;
}

#divcierre{
text-align:right;
font-weight:bolt;
}


Ponemos el título del div tal y como os he puesto y posteriormente ponemos las características, hay muchisimas posibles, demomento solo usaremos estás y finalmente guardamos

Una vez hecho esto vamos a la página HTML y en el Head pondremos lo siguiente:

<link rel="stylesheet" href="Estilo\ligacss.css"/>

Aquí solo deberiamos de cambiar el url del archivo CSS y ponerlo donde lo tengais guardado vosotros, yo por ejemplo lo tengo guardado en la carpeta Estilo y lo he llamado ligacss.

El head tendrá que quedar así:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
<link rel="stylesheet" href="Estilo\ligacss.css"/>
</head>

y éste es el resultado:


Un saludo.

_________________
Admin - InformáticaESP

DavidIESP
Admin
Admin

Mensajes : 106
Puntos : 2668
Reputación : 3
Fecha de inscripción : 12/11/2010
GamerTag XBOX : davishh10

Ver perfil de usuario http://informaticaesp.com

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.