Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 33

Visitas el mes pasado: 42

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




6. Pie de página (I)

6.1. Contenido

Paso 16

logo miweb

Nueva sección

Para completar la página de inicio pondremos una nueva sección al final: el pie de página.

Como su nombre indica, el pie de página es una sección que se pone al final de la página, y que normalmente suele tener información sobre el propio sitio web. Pondremos aquí lo que queremos que se sepa sobre nosotros: quienes somos, quien ha construido la página, los contactos, las redes sociales que tenemos, etc.

Tal como hemos dicho anteriormente esta nueva sección irá al final de la página, por lo que pondremos un nuevo "div" de sección al final del archivo html de la página.

Abrimos para ello el archivo index.htm con el editor de texto y le añadimos un nuevo div de sección, al final de la etiqueta "body":

<body>
  <div id="cabecera">
  ...
  </div>
  <div id="navegacion">
  ...
  </div>
  <div id="texto"> 
  ...
  </div>	 
  <div id="enlaces">
  ...
  </div>
  <div id="pie">
  
  </div>
</body>

Dentro de la etiqueta body tenemos hasta ahora cuatro secciones marcadas por sus correspondientes etiquetas div. Añadimos una nueva sección (div id="pie") después de las que ya tenemos (marcado aquí en azul).


Contenido de la sección

Trabajaremos ahora dentro de la sección id="pie", que de momento está vacía. Pondremos el contenido en tres columnas, por lo que crearemos tres etiquetas div de clase dentro de esta sección.

Para ello en el archivo index.html rellenamos la sección id="pie" que hemos creado de manera que quede como mostramos aquí:

  <div id="pie">
    <div class="col_pie">
      <h4>Sobre este sitio</h4>
      <p>Propiedad de : Nombre Apellido</p>
      <p>Webmaster: Nombre Apellido</p>
    </div>
    <div class="col_pie">
      <h4>Contactos</h4>
      <p>Email : miemail@servidor.com</p>
      <p>Teléfono: 900-00-00-00</p>
    </div>
    <div class="col_pie">
      <h4>En las redes</h4>
      <p>Facebook : (dirección de Facebook)</p>
      <p>Twitter: (dirección de Twitter)</p>
    </div>
    <div class="vacio"></div>
  </div>

Hemos puesto tres div=class="col_pie" que son los que delimitarán las columnas de la sección. Dentro de cada uno de ellos hemos puesto los datos que queremos mostrar.

Hemos añadido también un div class="vacio" al final del la sección, que , al igual que en las secciones anteriores, nos sirve para incluir los elementos flotantes en la sección.

Después de escribirt el código anterior en el archivo index.html cerramos y guardamos el archivo y comprobamos los resultados. Para ello abrimos la página con el navegador, la cual debe quedar como la siguiente:


Nos falta todavía maquetar y dar estilo al contenido del pie de página, pero eso lo haremos en el siguiente paso.


Código de la página de inicio.

Vemos aquí el código completo de la página de inicio que hemos hecho hasta ahora:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="paso17.css" />
    <title>Mi Propia Web</title>
  </head>
  <body>
  <div id="cabecera">
    <img src="../objetos/logo.gif" alt="Logo de la página" width="15%" />
    <h1>Mi Propia Web</h1>	
    <h2>Aprendiendo a construir un sitio Web</h2>
  </div>
  <div id="navegacion">
    <div class="menu"><a href="index.html">Inicio</a></div>
    <div class="menu"><a href="listas.html">Listas</a></div>
    <div class="menu"><a href="tablas.html">Tablas</a></div>
    <div class="menu"><a href="formulario.html">Formulario</a></div> 
		<div class="vacio"></div>
 </div>
  <div id="texto">
    <p>Hola, estoy aprendiendo a hacer Webs y este es mi primer párrafo, 
       no es muy largo, pero es un párrafo.</p>
    <p>Este ya es mi segundo párrafo. Para construir un sitio web como éste, 
       hay que usar el lenguaje HTML. El HTML es un lenguaje de etiquetas.
       Con las etiquetas indicamos qué tipo de contenido insertamos en la página.</p>
  </div>
  <div id="enlaces">
    <h3>Los enlaces</h3>
    <p>Estoy aprendiendo a poner enlaces en mi página. Aquí he puesto unos enlaces 
       a unos sitios muy populares.</p>
    <p>Pulsa en los siguientes enlaces para ir a las siguientes páginas.</p>
    <div class="mienlace">
    <p><a href="http://es.wikipedia.org" target="_blank">
       <img src="../objetos/wikipedia.jpg" alt="Logo Wikipedia" border="0" height="200" />
    </a></p>
    <p><a href="http://es.wikipedia.org" target="_blank">Consultar Wikipedia</a></p>
    </div>
    <div class="mienlace">
    <p><a href="http://www.youtube.com"  target="_blank">
       <img src="../objetos/youtube.jpg" alt="Logo YouTube" border="0" height="200" />
    </a></p>
    <p><a href="https://www.youtube.com" target="_blank">Videos en You Tube</a></p>
    </div>
    <div class="mienlace">
    <p><a href="http://elpais.com" target="_blank">
       <img src="../objetos/elpais.jpg" alt="Logo El_Pais" border="0" height="200" />
    </a></p>
    <p><a href="http://elpais.com" target="_blank">Noticias con el País</a></p>
    </div>
    <div class="vacio"></div>
  </div>
  <div id="pie">
    <div class="col_pie">
      <h4>Sobre este sitio</h4>
      <p>Propiedad de : Nombre Apellido</p>
      <p>Webmaster: Nombre Apellido</p>
    </div>
    <div class="col_pie">
      <h4>Contactos</h4>
      <p>Email : miemail@servidor.com</p>
      <p>Teléfono: 900-00-00-00</p>
    </div>
    <div class="col_pie">
      <h4>En las redes</h4>
      <p>Facebook : (dirección de Facebook)</p>
      <p>Twitter: (dirección de Twitter)</p>
    </div>
    <div class="vacio"></div>
  </div>
  </body>
</html>

En color azul hemos destacado el código que hemos puesto en esta página. El resto de código ya lo teníamos anteriormente.

El código del archivo index.html o página de inicio ya está completo. Ahora nos falta completar el código del archivo CSS asociado para completar esta primera página.




En el siguiente paso completamos la primera página de nuestra web con el estilo para el pie de página.

Pie de página: estilo




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com