Vamos a iniciarnos en el mundo de la creación de páginas web, vamos a crear una muy básica con HTML y CSS.
Para empezar, para éste tutorial usaré el Rapid CSS 2007, también podéis hacerlo con un simple bloc de notas o notepad.
Abriremos un documento HTML y crearemos nuestra página, en éste caso he decidido crear una web sobre fútbol.
<!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">
<!-- Esto es la cabecera del documento HTML, la podéis usar para crear otras webs-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
</head>
<!-- Aquí tenemos la cabecera de la página web, donde se declara el título, contenido, fondo de la web etc. -->
<!-- A partir de aquí empieza el cuerpo de la página, señalizado con la etiqueta body -->
<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>
<!-- Los div sirven para crear bloques, cuando creas un div y dentro pones elementos, estos quedan dentro de ese bloque para que posteriormente les puedas dar estilos con la hoja de estilos CSS-->
<!--Para esta web hemos creado tablas, de ésta manera podemos situar de una forma sencilla cada elemento -->
</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 haremos lo siguiente:
*{
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;
}
<!--Escribimos almohadilla y el nombre del div que hemos puesto en el HTML para dar estilo a cada bloque -->
Existen muchas posibles propiedades para añadir pero nosotros demomento solo usaremos estas, finalmente guardamos.
Una vez hecho esto vamos a la página HTML y en el Head pondremos lo siguiente:
<link rel="stylesheet" href="Ruta del archivo 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. ( \Estilo\Ligacss.css)
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 este es el resultado:
Espero que os sea útil.
0 comentarios:
Publicar un comentario