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

Visitas el mes pasado: 20

logo

Donativos

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




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:

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







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