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.

Insertar texto (V)

2.5 Estilo de texto.

Estilo del subtítulo

Tal como hemos hecho en el paso anterior, vamos ahora a dar estilo al resto del texto de la página, empezaremos por el subtítulo. para ello usaremos las siguientes instrucciones en el archivo CSS.

• Para centrarlo: text-align : center.
• Tamaño de letra: font-size : 1.9em .
• Tipo de letra: font-family : "times new roman" .
• Color de letra: color : olive .

Abre el archivo estilo.css con el bloc de notas y a continuación de lo que ya hay escrito, y en una línea aparte escribes:

h2 { text-align: center ; font-size : 1.9em ; font-family : times new roman ; color: olive ; }

El archivo css en el bloc de notas quedará así:

h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center ; font-size : 1.9em ; font-family : "times new roman" ; color: olive ; } 

Observa que el valor "times new roman" de la propiedad font-family se escribe entre comillas, esto es así porque tiene más de una palabra. Al estar escrito entre comillas se interpreta como un solo elemento, ya que si no se corre el riesgo de que el navegador lo interprete como dos o más valores distintos.

Como vés, el texto que tienes que escribir en el archivo estilo.css es el que está escrito en verde; el texto en negro es el que ya teníamos antes. Tal como se indicó, escribiré en verde el texto nuevo que insertemos en los archivos CSS, para distinguirlo del que ya teníamos. Una vez escrito el texto guardamos y cerramos el archivo.

Y ahora vamos a abrir el archivo index.html con el navegador para ver el resultado:

tu Web debe quedar así: Ver mi Web

Como siempre, si tu web no tiene este aspecto, repasa los pasos anteriores, y busca si hay algún fallo de escritura.

Estilo de párrafos

Vamos a hacer lo mismo con los párrafos. Vamos aplicar de momento las cuatro propiedades que hemos apicado al subtítulo, pero con otros valores. Usaremos las siguientes instrucciones:

• Alineación: text-align : justify.
• Tamaño de letra: font-size : 1.1em .
• Tipo de letra: font-family : arial .
• Color de letra: color : navy .

Ahora, tal como hemos hecho antes, abre el archivo estilo.css con el bloc de notas y escribe en una línea aparte lo siguiente:

p { text-align: justify ; font-size : 1.1em ; font-family : arial ; color: navy ; }

El archivo css en el bloc de notas quedará así:

 
h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple; }
h2 { text-align: center; font-size: 1.9em; font-family: times new roman; color: olive; }
p { text-align: justify; font-size: 1.1em ; font-family: arial ; color: navy; }

Guardamos el archivo css y abrimos después el archivo index.html con el navegador para ver el resultado:

tu Web debe quedar así: Ver mi Web

Como siempre, si tu web no tiene este aspecto, repasa los pasos anteriores, y busca si hay algún fallo de escritura.

El aspecto del texto de nuestra Web va cambiando, sin embargo el aspecto de los párrafos puede mejorar. Están demasiado pegados a los bordes de la página, por lo que deberíamos separarlos. También deberíamos controlar el espacio en blanco que queda entre uno y otro. para ello utilizaremos la instrucción padding; que nos dejará un espacio en blanco alrededor del párrafo. Sus valores se escriben en medidas.

La instrucción padding puede escribirse de varias formas:

• padding-left: Define un espacio a la izquierda.
• padding-right: Define un espacio a la derecha.
• padding-top: Define un espacio por encima.
• padding-bottom: Define un espacio por debajo.

En nuestra página, para definir espacios alrededor de los párrafos emplearemos las instrucciones:

padding-left: 3em ; padding-right: 3em ; padding-top: 0.5em ; .

Abrimos el archivo estilo.css y en la línea que empieza por p, dentro de las llaves, colocamos las instrucciones anteriores. recuerda que cada instrucción va separada por el signo de punto y coma; y cada propiedad va separada de su valor por el signo de dos puntos. El archivo CSS quedará así:

h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple; }
h2 { text-align: center ; font-size: 1.9em; font-family: times new roman; color: olive; } 
p { text-align: justify; font-size: 1.1em; font-family: arial; color: navy ; 
    padding-left: 3em; padding-right: 3em; padding-top: 0.5em; }

Una vez escrito el texto en el bloc de notas, guardamos el archivo y abrimos el archivo index.html con el navegador para ver los resultados.

La página index.html quedará así: Ver mi Web

Como en pasos anteriores, si no consigues que tu Web tenga ese aspecto, repasa las instrucciones y el texto del bloc de notas. Seguro que encuentras algún fallo.

El aspecto de nuestra Web va cambiando poco a poco. Vamos a dar una última instrucción a los párrafos para sangrar el texto; es decir, que la primera línea de cada párrafo empiece un poco más a la izquierda que las demás.

La instrucción que daremos es text-indent: 2.5em

Como ves los valores de esta propiedad también son medidas. Abrimos el archivo estilo.css con el bloc de notas y escribimos en la línea que empieza por p la instrucción anterior. El archivo CSS quedará así en el bloc de notas:

 
h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: times new roman; color: olive ; } 

p { text-align: justify; font-size: 1.1em ; font-family: arial ; color: navy ; 
    padding-left: 3em ; padding-right: 3em ; padding-top: 0.5em ;
    text-indent: 2.5em }

Comprobamos una vez más el resultado.Para ello, guardamos el archivo CSS y abrimos el archivo index.html con el navegador:

La página index.html quedará así: Ver mi Web

Ahora que ya tenemos el texto de nuestra Web, vamos al siguente tema, donde aprenderemos a poner imágenes en nuestra página.

Insertar imágenes

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