Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

13. El pie de página (III)

13.3 Nombre y buzón.

Copiar imagen

Para acabar nuestra web haremos una referencia al dueño o al creador de la página, e insertaremos un buzón para mandar e-mails.

Lo primero que haremos será copiar la imagen del buzon: copia la siguiente imagen:

Recuerda, para copiar una imagen debes pulsar con el botón derecho del ratón sobre ella y después pulsar en "Guardar imagen como...". En la ventana que aparece debemos buscar la carpeta en la que la queremos guardar, y pulsar luego en guardar.

Debemos guardarla en la carpeta objetos situada en la carpeta raiz de nuestra Web. Fíjate que el nombre de la imagen es buzon2.gif.

Insertar texto

Ahora que ya tenemos la imagen debemos insertar el texto con sus etiquetas en el archivo HTML. Abre por tanto el archvo plantilla.html y en el div "pie", después del div "flechas" escribe lo siguiente: (escribir texto en azul)

.......
        <a href="#"> Siguiente <img src="objetos/adelante.gif" alt="Siguiente"/></a>
      </p>
   </div>
   <h4> Página creada por FULANIT@. </h4>
      <p>Manda tus sugerencias: <a href="mailto:mi_correo@servidor.com">
         <img src="objetos/buzon2.gif" alt="manda un correo" /></a></p>
</div>
......

Al igual que en la página index.html hemos puesto un enlace a correo electrónico y hemos usado una imagen. En el enlace, donde pone ""mi_correo@servidor.com" debes sustituir el texto por la dirección completa de tu correo.

Después de escribir el texto, guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

Estilo del texto

Ahora debemos darle estilo al texto, y a la imagen, para ello abriremos el archivo general.css y después de la última línea esribiremos las siguientes:

......
#flechas a img  { width: 36px; height: 24px; border: 0;}
#pie h4  { font-size 1.2em; font-family : comic sans ms ; }
#pie > p  { font-family : courier; font-size: 1.2em; 
            padding-bottom: 0.2em; }
#pie p a img  { border: 0px; }	

El signo " > " que hemos puesto en el selector del párrafo (#pie > p) indica que las propiedades se aplicarán sólamente a los párrafos que estén en un nivel inmediatamente por debajo del div "pie". De no ponerlo afectarían también a los parrafos del div "flechas", que está incluido dentro del div "pie".

Las propiedades que hemos aplicado afectan al tamaño y al tipo de letra, también hemos puesto un pequeño margen por debajo del párrafo; y mediante la porpiedad border: 0 hemos quitado el borde de la imagen.

Después de escribir el texto anterior, guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

Como ves nuestra página ya la tenemos acabada. Esta página, tal como expica el texto de la misma, nos puede servir de plantilla para hacer otras páginas en nuestra Web, con lo cual la creación de páginas en este curso ya ha finalizado. No obstante en la lección siguiente daremos el código de las páginas, y algunos consejos para seguir creando páginas Web.

Ir al siguiente tema: Final del curso

Página creada por ANYELGUTI.

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

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

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