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.

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:

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:

• Si el archivo está en la misma carpeta: Escribimos el nombre del archivo.
• Si el archivo está en una carpeta de nivel inferior: se escribe el nombre de la carpeta seguido de barra oblicua ( / ) y el nombre del archivo.
• Si el archivo está dos o más carpetas por debajo, escribiremos el nombre de cada carpeta seguido de la barra oblicua, y despúes el nombre del archivo.
• Si el archivo está en una carpeta de nivel superior: Se escribe el texto ../ (punto, punto, barra oblicua) para subir un nivel, si hay que subir dos niveles, se escribirá dos veces. Una vez hayamos subido el nivel, se procede como en los casos anteriores.
• Recuerda que en todos los casos el nombre del archivo debe escribirse con su extensión. (gif, jpg, html, etc.)

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

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