Desarrollo Web Lección 2 - Texto

En este ejercicio, aprenderá cómo crear un encabezado y algunos estilos de formato más que hacen que un encabezado destaque.

• Continuaremos usando el código en el que ha estado trabajando en jsfiddle.

Mi historia
<p style="text-align:right">
Mi amigo Pablo tiene un <em style="color:red; font-weight:700">perro mascota</em> llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, <strong>le gusta perseguir una <em>pelota</em>.</strong> Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa.
</p>
<p style="text-indent:50px">
Los domingos conducen a las <sup>montañas</sup> donde corretea oliendo la hierba y <span style="color:blue;">meneando la cola</span>. Se cansa tanto que duerme todo el camino a casa.
</p>

• Los encabezados también se pueden definir usando etiquetas html. Agreguemos un encabezado arriba de la primera línea.

<h1>Mi historia</h1>

• Observe que el texto es mucho más grande y pesado, como normalmente son los encabezados.
• Hay 6 niveles de encabezado desde <h1> hasta <h6>. Se hacen más pequeños (menos importantes) a medida que el número aumenta.

• Hagamos algunos cambios en el estilo del encabezado.
• Cambie la fuente agregando un atributo de estilo de familia de fuentes.

<h1 style="font-family:Arial,sans-serif;">Mi historia</h1>

• Ahora hazlo verde.

<h1 style="font-family:Arial,sans-serif; color:green;">Mi historia</h1>

• A continuación, hagámoslo más pequeño.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em;">Mi historia</h1>

• El <em> es el tamaño estándar para la fuente normal, por lo que es 1,7 veces más grande que el texto de la letra (pero aún más pequeño de lo que suele ser <h1>).

• Subrayemos el título.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline;">Mi historia</h1>

• Vamos a hacerlo todo en mayúsculas.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; text-transform:uppercase;">Mi historia</h1>

• Aquí hay un estilo diferente que se ve muy bien en los encabezados. Tenga en cuenta que debe eliminar text-transform:uppercase; para que funcionen las versalitas. No puedes tener ambos.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps;">Mi historia</h1>

• También podemos cambiar la altura de la línea.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 3em;">Mi historia </h1>

• ¿Notaste el espacio adicional sobre el encabezado ahora? Eso es porque la altura de la línea es más grande que antes.

• Finalmente, agreguemos algo de sombra al encabezado.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 2em; text-shadow: 2px 2px red;">Mi historia</h1>

• Aquí estamos agregando una sombra roja de 2 píxeles abajo y 2 píxeles a la derecha del encabezado original.
• ¿Ves cómo puedes encadenar muchos atributos de estilo juntos?
• Esto es útil si desea cambiar el estilo de un elemento, pero se vuelve engorroso si, por ejemplo, desea cambiar el estilo de todos los párrafos de su carta. Para eso, usaremos CSS , que veremos en la Lección 3.
• Todos los atributos de estilo que hemos usado en esta lección se pueden usar en CSS .

Siguiente: JavaScript