Ejemplo de una pagina web con estilos básicos:
<html>
<head>
<title>Herramientas Web</title>
<style type="text/css">....................................................Con esta sentencia iniciamos el estilo.
body { font-family: Verdana,Arial,sans-serif;............Colocamos los tipos de letras que ocuparemos.
font-size: 15px;......................................................Colocamos el tamaño de letra.
color: #735846;.....................................................Colocamos el color de la letra.
text-align: justify;.....................................................Es la alineación del texto.
background-color: #663330; }...............................Este es el color del fondo.
h1 { margin-left: 80px;.............................................h1 son las características del texto "Estilos basicos"
margin-top: 20px;
font-size: 180%;
color: #CC3300; }
h2, h3 { font-family: Georgia, Times, serif;...............h2 son las características del texto "Equipo"
font-size: 150%;
color: #33FF00;
margin-top: 0;
margin-left: 30px;}
h3 { color: #33FF00; }.........................................h3 son las características del texto "Contacto"
p {line-height: 1.5em;
text-indent: 15px;
margin: 35px;}
img { border: 2px solid #d38451;.........................Son las características de la imagen.
margin: 10px;........................................................................margen
float: right; }..........................................................................alineación a la derecha
div.cuerpo { margin: 0 20px 20px;
background-color: #FF6650; }
.azul { font-weight: bold;
color: #6C6CCA; }
</style>...................................................................... Cerramos el estilo.
</head>.....................................................................Cerramos el head.
<body>.....................................................................Comienza el cuerpo.
<div class="cuerpo">
<h1>Estilos basicos</h1>..........................................Aquí solo colocamos el texto que deseamos y el formato con el que queremos que se muestre.
<h2>Equipo</h2>
<div class="img">
<img src="imagenes/esta.jpg" width="350" height="300" alt="No se encuentra esta imagen" />.....Aquí colocamos la imagen, y el ancho y alto de esta.
</div>
<p> Arroyo Toledo Mariela.</p>
<p>Blancas Velasco Erick Francisco.</p>
<h3>Contacto</h3>
<P ALIGN=center>
<a href="http://hweym.blogspot.mx">Haz clic para ir al blog</a>
<br>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario