Desarrollo Web Lección 2 - Texto

En este actividad, aprenderá a utilizar atributos HTML para modificar el estilo de elementos específicos.

• Continúe usando jsfiddle con el mismo código de la pantalla anterior. Aquí está de nuevo.

Mi historia
<p>Mi amigo Pablo tiene un <em>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>Los domingos conducen a las <sup>montañas</sup> donde corretea oliendo la hierba y moviendo la cola. Se cansa tanto que duerme todo el camino a casa.</p>

• Algunos formatos básicos se pueden hacer usando etiquetas html ; hemos visto <p>,<em>, <strong> y <sup>.
• El formato más complejo está disponible usando atributos. Los atributos son pares de parámetro:valor dentro de las etiquetas, y se aplican a todo lo que se encuentra entre las etiquetas.

• Como ejemplo, hagamos que las palabras 'perro mascota' sean rojas agregando style="color:red" dentro de la etiqueta <em> de la siguiente manera.

<p>Mi amigo Pablo tiene un <em style="color:red">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>

• Ejecute el código para comprobar el resultado.
• Estamos aplicando un estilo, por lo tanto style="".
• Dentro de las comillas está el estilo específico, designado por el par parámetro:valor, donde color es el parámetro (el color del texto) y red es el valor que deseamos usar.
• Observe el : usado para separar el parámetro y el valor.

• Podemos seleccionar una sección de texto para darle estilo usando <span>. Hagamos que el texto 'moviendo la cola' sea azul.

<p>Los domingos conducen a las <sup>montañas</sup> donde él corretea oliendo la hierba y <span style="color:blue">meneando la cola</span>. Se cansa tanto que duerme todo el camino a casa.</p>

• Ejecute el código para ver si lo hizo correctamente.

• Puede cambiar dos estilos al mismo tiempo separándolos con un ; de la siguiente manera.

<em style="color:red; font-weight:700;">perro mascota</em>

• Ahora el texto rojo también debe estar en negrita porque tiene un font-weight. 300 es muy tenue y 900 es muy pesado.
• ; marca el final de un solo par parameter:value, por lo que cuando el navegador encuentra más texto dentro de las comillas, sabe que debe esperar un nuevo par.

• Podemos sangrar la primera línea de un párrafo con text-indent.

<p style="text-indent:30px;">Los domingos conducen a las <sup>montañas</sup> donde corretea oliendo la hierba y moviendo la cola. Se cansa tanto que duerme todo el camino a casa.</p>

• Probemos algo diferente. A veces querrás texto a la derecha de la pantalla en lugar de a la izquierda. Desplacemos el primer párrafo a la derecha.

<p style="text-align:right;">Mi amigo Pablo tiene un <em style="color:red">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>

• Hay muchos otros atributos de estilo, pero la mayoría se aplican más comúnmente a los encabezados.

Siguiente: Encabezados