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.

12. El contenido (II)

12.2. Estilo del contenido

Títulos y subtítulos

En el paso anterior hemos insertado el texto de los contenidos. Ahora nos queda aplicar estilo a ese texto. Empezaremos por los títulos y subtítulos.

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

......
#menu a:hover { text-decoration: underline; color: #000099; background-color:#dcdcdc; }
#menu a:active { text-decoration: underline; color: #000099; background-color:#dcdcdc; }

#contenidos h1 { font-size: 1.7em; font-weight: bold; font-family: verdana; 
                font-style: normal; color: navy; padding 1em; }
#contenidos h2 { font-size : 1.4em ;font-weight: bold; font-family: verdana;
                 padding : 1em;  }
#contenidos h4 { font-size: 1.1em ; font-weight: bold; font-family: verdana;
                 text-align: left; padding: 0.5em 3em; }
								 

Las propiedades que hemos aplicado ya las hemos visto en pasos anteriores. Vamos a recordar cuales son sus efectos:

• font-size : Define el tamaño de la letra
• font-weight : pone el texto en negrita.
• font-family : define el tipo de letra
• font-style : Pone el texto en cursiva. El valor normal lo quita si lo tenía antes.
• color : Define el color del texto.
• text-align : Alineación del texto
• padding : Crea un margen alrededor del texto.

Cuando hayamos escrito las lineas anteriores, guardamos el archivo, y abrimos después el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

Estilo de párrafos

Nos falta aplicar el estilo a los párrafos del contenido. para ello abrimos el archivo general.css y después de la última línea escribiremos la siguiente: (texto en verde)

.....
#contenidos h1 { font-size: 1.7em; font-weight: bold; font-family: verdana ; 
                 font-style: normal; color: navy; padding 1em; }

#contenidos h2 { font-size : 1.4em ;font-weight: bold; font-family: verdana;
                 padding : 1em; }
#contenidos h4 { font-size: 1.1em ; font-weight: bold; font-family: verdana; 
                 text-align: left; padding: 0.5em 3em; }

#contenidos p { text-align: justify; padding: 0.5em 3em; text-indent: 3em; }

La propiedad text-indent permite crear una sangría en la primera línea, es decir que la primera línea de cada párrafo esté más metida hacia adentro.

las otras propiedades que hemos aplicado ya las conocemos: padding que crea un margen alrededor del texto, y text-align que marca la alineación del texto: (el valor "justify" -justificado- alinea el texto por ambos lados de la página).

Una vez escrita la línea anterior guardamos el archivo, y abrimos después el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

El Texto del contenido ya lo tenemos acabado. ahora nos falta separar un poco la imagen del texto por la parte de arriba y de abajo.

Separar la imagen

Ahora deberemos dar un margen a la imagen por la parte superior e inferior. Para dar margen a la imagen podríamos pensar que lo mejor sería ponerle un margen. Podemos hacerlo así, pero hemos preferido poner unas líneas de texto vacías por encima y por debajo de ella mediante la etiqueta <br/> en el código HTML.

Para ello abriremos el archivo plantilla.html con el HTML-Kit y por encima y por debajo de la etiqueta donde está la imagen escribiremos lo siguiente: (escribir texto en azul)

.....
      <p> Por último, como esta Web no la tengo todavía muy acabada, 
          le pondré un letrero que lo indique: Éste es el letrero:</p>
      <br/>
      <img src="../../objetos/enconstruccion.gif" alt="Página en Construcción"/>
      <br/><br/><br/>
</div>
......

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

La página quedará así: Ver mi página

Ahora ya tenemos acabado el contenido. Solo nos falta completar el pie de página para acabaar la página Web, pero eso será ya en la siguiente lección.

Ir a la siguiente lección: El pie de página

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