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

Visitas el mes pasado: 32

logo

Donativos

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




9 La Cabecera (I)

9.1 Título y subtítulo

El título

En la cabecera pondremos el título de la Web, y un subtítulo con la sección en la que estamos. A la derecha pondremos un recuadro con un mensaje de bienvenida, y a la izquierda un dibujo o logo que nos identifique.

Empezaremos por el título y el subtítulo. Para ello abrimos el archivo plantilla.html con el HTML-Kit, y dentro del "div" cabecera, borramos en primer lugar el texto que habíamos puesto provisionalmente, y que lo tienes marcado en rojo


.....
<div id="cabecera">
   Esta es la cabecera
</div>
.....

escribimos en su lugar las siguientes líneas: (texto en azul)


.....
<div id="cabecera">
   <h1>Mi Primera Web</h1>
   <h3>SECCIÓN ACTUAL</h3>
</div>
.....

Una vez escrito el texto anterior, guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver el resultado.

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

Estilo del título

Falta aplicar el estilo al texto que hemos puesto, para ello abre el archivo general.css con el HTML-Kit y vamos a escribir lo siguiente: (texto en verde)


.....
#pie { background-color: #ffd08f ; clear: both; min-height: 60px; }
h1 { font-size: 2em ; font-family: "Bookman old style"; font-style: italic;
     text-align: center; padding :10px 0px 0px 0px; margin: 0px; }
h3 { font-size: 1.2em; font-family: "Bookman old style"; font-style: italic;
     text-align: center; margin: 0px; padding :15px 0px 10px 0px; }
			

Como puedes ver hemos definido el estilo del texto, y hemos puesto unos márgenes a su alrededor. Recordamos el efecto de las propiedades aplicadas:

Las propiedades "margin " , "padding" y "border" pueden escribirse con un solo valor numérico, con dos o con cuatro. Con uno, afecta a los cuatro lados; con dos afecta, el primer número a los lados superior e inferior, y el segundo a los lados izquierdo y derecho; y con cuatro valores el orden es : superior, derecho, inferior, izquierdo.

Una vez escritas las líneas anteriores, guardamos el archivo y abrimos el archivo plantilla.html con el navegador para ver el resultado.

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


Ya tenemos el título centrado y con estilo, lo siguiente será colocar una imagen que nos sirva de logo, pero eso lo haremos en el siguiente paso:


Ir al siguiente paso: imagen de logo







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