20 noviembre 2010

HTML & CSS

Para esta entrada cree una página web sencilla. Esta creada en HTML y he agregado una CSS para darle una mejor presentación.

La siguiente imagen nos muestra como se ve la página sin el archivo CSS:

Ahora como se ve cuando incrustamos el CSS:

Archivo HTML

<html>
<head>
  <title>Ejemplo de p&aacute;gina web</title>
  <link rel="stylesheet" href="estilo.css" type="text/css">
</head>
<body>
  <h1>Monterrey</h1>
  <ul class="menu">
    <li><a href="index.html">Inicio</a>
    <li><a href="mapa.html">Mapa</a>
    <li><a href="enlaces.html">Enlaces</a>
  </ul>
  <p>Tambi&eacute;n conocida como La Ciudad de las Monta&ntilde;as,
   Monterrey es una fortaleza que est&aacute; enmarcada por el
   Cerro de la Silla, la Loma Larga, el Topo Chico, el
   Cerro de las Mitras y la Sierra Madre Oriental.</p>
  <center>
  <img src="../Blogger/monterrey-de-noche.jpg" width="300" height="220"/>
  </center>
  <p>Considerada como una importante generadora de recursos
   por su variedad de industrias y comercios, la ciudad
   tambi&eacute;n cuenta con diversos museos y galer&iacute;as de arte,
   parques de diversiones y es el hogar de miles de estudiantes
   locales y for&aacute;neos.</p>
  <p>Monterrey tiene un gran pasado hist&oacute;rico pues sus
   habitantes pelearon en las guerras de intervenci&oacute;n americana
   y francesa. Adem&aacute;s por su gran n&uacute;mero de universidades
   est&aacute;n por llamarla la Ciudad del Conocimiento.</p>
  <a href="http://www.nl.gob.mx/">M&aacute;s informaci&oacute;n</a>
</body>
</html>

Archivo CSS

body {
  width: 600px;
  margin: 0 auto;
  padding: 0;
  background: #FFFFFF;
  font-family: Georgia, "Times New Roman", serif;
}
h1 {
  color: #38610B;
  text-align: center;
}
a:link {
  color: blue;
}
a:visited {
  color: purple;
}
.menu {
  height: 30px;
  background: #610B0B;
}
.menu li {
  float: left;
  list-style: none;
  margin: 6px 10px 0px 0px;
}
.menu a {
  text-decoration: none;
  padding: 2px 12px 2px 12px;
  font-weight: bold;
  color: #FFFFFF;
}
.menu a:hover {
  text-decoration: none;
  background: #B45F04;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  text-align: justify;
}

Descargar: estilo.css | html-ejemplo.html

Enlaces: 20 tips para trabajar con css

1 comentario:

Elisa21 de noviembre de 2010, 7:40
Finalmente te pusiste a jalar :) Nueve puntos para el lab por esta entrada.
ResponderEliminar
Respuestas

Añadir comentario