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

• font-size : Define el tamaño de la letra.
• font-family : Define el tipo de letra.
• font-style : Define el estilo de letra: normal | italic | oblique (normal, cursiva, o cursiva oblicua)
• text-align : Alineación del texto: left | right | center | justify (derecha, izquierda, centrado, justificado).
• margin: Define el margen externo.
• padding : Define el margen interno.

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

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