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 (III)

9.3. Recuadro de bienvenida

Insertar un div

Insertaremos un recuadro a la derecha con un mensaje de bienvenida. Para ello lo primero que haremos será crear una caja o div dentro de la cabecera, pero como deberá ir a la derecha, lo pondremos después de la imagen, para darle luego la posición a la derecha, sin que nos quede debajo del título.

Abrimos el archivo plantilla.html con el HTML-Kit y en el div de la cabecera, justo después de la etiqueta de la imagen escribimos lo siguiente:(texto en azul):

.....
<div id="cabecera">
   <img src="objetos/logo.gif" alt="Imagen logo"/>
   <div id="recuadro">
      <h6> ¡HOLA! </h6>
      <h6>Bienvenido a la Primera Web de Fulanit@ de Tal</h6>
   </div>
   <h1>Mi Primera Web</h1>
   <h3>SECCIÓN ACTUAL</h3>
</div>
.....

Guardamos el archivo y abrimos luego el archivo plantilla.html con el navegador para ver los resultados.

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

Como vemos, el texto sale centrado encima del Título. Esto está así hasta que apliquemos el estilo CSS para cambiar la posición, el estilo de letra, y el fondo.

Posición y colores.

Vamos a cambiar la posición mediante la propiedad float: right. También le daremos una anchura determinada, mediante la propiedad width: . Cambiaremos también los colores del fondo con la propiedad background-color: y del texto con la propìedad color: .

Para ello abrimos el archivo general.css con el HTML-Kit y escribimos lo siguiente: (texto en verde)

......
#cabecera img { float: left; width:100px; height: 100px; margin-left: 30px}
		 
#recuadro { float: right ; width: 200px; background-color: #993399; color: #99ff00; }

Como siempre, guardamos el archivo y abrimos luego el archivo plantilla.html para ver los cambios.

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

Ahora ya tenemos el recuadro, pero habrá que darle algunos retoques de estilo para centrarlo y hacerlo mas vistoso.

Retoques de estilo

En primer lugar vamos a definir el tamaño de letra y un margen interno, y una vez que veamos lo que ocupa, podremos darle márgenes externos para centrarlo.

Abre el archivo general.csscon el HTML-Kit y modificamos la ultima línea para dar margen, y escribimos una nueva linea para dar tamaño de letra: escribiremos lo siguiente: (texto en verde)

......
#cabecera img { float: left; width:100px; height: 100px; margin-left: 30px; }
		 
#recuadro { float: right ; width: 200px; background-color: #993399; color: #99ff00;
            padding: 10px; }

h6 { font-size: 0.9em; }

Guardamos el archivo, y abrimos después el archivo plantilla.html para ver el cambio

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

Ya sólo nos queda centrar el recuadro. Para ello le daremos unos márgenes externos por la derecha y por arriba, mediante la propiedad margin.

Abre el archivo general.css y en la línea que define el recuadro, añadimos las siguientes propiedades (escribe el texto en verde):

......
#cabecera img { float: left; width:100px; height: 100px; margin-left: 30px}
		 
#recuadro { float: right ; width: 200px; background-color: #993399; color: #99ff00;
            padding: 10px; margin-right: 75px; margin-top: 15px; }
h6  { font-size: 0.9em; }

Una vez escrito el texto anterior, 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.

Ya tenemos la cabecera completa, pero antes de seguir con la barra de navegación, vamos a explicar cómo enlazar el archivo index.html con el archivo plantilla.html y llevar los cambios a la carpeta de Internet. Pero esto será ya en el siguiente paso.

Ir al siguiente paso: Subir archivos nuevos.

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