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: 9

logo

Donativos

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




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:


Buzón de sugerencias.

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







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