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

Visitas el mes pasado: 16

logo

Donativos

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




9. La cabecera (II)

9.2. Imagen del logo

Copìar la imagen

Vamos a insertar una imagen a la izquierda de la cabecera, que aunque no sea un logo nos servirá como tal. La imagen que vamos a insertar es la siguiente:

Imagen de logo

Recuerda que para copiarla debes pulsar sobre la imagen con el botón derecho del ratón, y elegir "guardar imagen como". Se te abrirá una ventana en la que debes buscar la carpeta objetos dentro de la carpeta raíz de nuestra web para guardarla ahi. le pondremos el nombre de "logo". (la ruta para guardarla será: Mis documentos / mi_web / objetos).

Explicaré brevemente cómo hay que escribir las rutas para referirse a otro archivo, tanto en las etiquetas de imágenes, como en las de enlaces:

Ahora abre el archivo plantilla.html y dentro del "div" cabecera, escribiremos la etiqueta de la imagen, justo antes de la etiqueta del título, de la siguiente manera: (escribir texto en azul)


.....
<div id="cabecera">
   <img src="objetos/logo.gif" alt="Imagen logo"/>
   <h1>Mi Primera Web</h1>
   <h3>SECCIÓN ACTUAL</h3>
</div>
.....

Una vez copiada la línea, guardamos el archivo y abrimos el archivo plantilla.html con el navegador para ver los cambios:

Tu página Web quedará así: Ver mi Web.


La imagen no aparece donde queremos y además es demasiado grande. Debemos aplicar en el archivo CSS las propiedades necesarias para desplazarla y darle el tamaño adecuado.

Mediante la propiedad float: left desplazaremos la imagen hacia la izquierda, quedando en la misma línea que el título; y mediante las propiedades width: (ancho) y height: (alto) daremos a la imagen el tamaño adecuado.

Abre el archivo general.css con el HTML-Kit y después de la última línea escribiremos lo siguiente (texto en verde):


....
h3 { font-size : 1.2em ; font-family : Bookman old style ; font-style : italic ; 
	   text-align: center ; margin: 0px; padding :15px 0px 10px 0px ; }
		 
#cabecera img { float: left; width: 100px; height: 100px; }


Una vez escrito lo anterior, guardamos el archivo y abrimos después el archivo plantilla.html con el navegador para ver los cambios:

Tu página Web quedará así: Ver mi Web.


Ahora la imagen queda mejor, aunque sólo nos falta un pequeño detalle: ponerle un margen a la derecha para que no esté tan pegada al borde. Para ello abrimos otra vez el archivo general.css con el HTML-Kit y en la última línea escribiremos la siguiente propiedad (texto en verde):


....
h3 { font-size : 1.2em ; font-family : Bookman old style ; font-style : italic ; 
	   text-align: center ; margin: 0px; padding :15px 0px 10px 0px ; }
		 
#cabecera img { float: left; width: 100px; height: 100px; margin-left: 30px; }


Guarda el archivo y después abre el archivo plantilla.html con el navegador.

Éste debe quedar así: Ver mi Web.


Ahora ya tenemos la imagen en el lugar y tamaño correctos. En el próximo paso introduciremos un cuadrado a la izquierda con un mensaje de bienvenida y nuestro nombre.


Ir al siguiente paso: recuadro de bienvenida







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