====== Desarrollo Web Lección 2 - Texto ====== ===== Atributos ===== ==== Objetivos ==== En este actividad, aprenderá a utilizar atributos HTML para modificar el estilo de elementos específicos. ==== Configuración ==== * Continúe usando jsfiddle con el mismo código de la pantalla anterior. Aquí está de nuevo.

Mi historia
Mi amigo Pablo tiene un perro mascota llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, le gusta perseguir una pelota. Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa.
Los domingos conducen a las ^montañas donde corretea oliendo la hierba y moviendo la cola. Se cansa tanto que duerme todo el camino a casa.

* Algunos formatos básicos se pueden hacer usando etiquetas html ; hemos visto

,, y ^{.
* 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.

==== Color ====
* Como ejemplo, hagamos que las palabras 'perro mascota' sean rojas agregando style="color:red" dentro de la etiqueta de la siguiente manera.}

Mi amigo Pablo tiene un perro mascota llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, le gusta perseguir una pelota. Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa.

* 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. ==== Span ==== * Podemos seleccionar una sección de texto para darle estilo usando . Hagamos que el texto 'moviendo la cola' sea azul. Los domingos conducen a las ^montañas donde él corretea oliendo la hierba y meneando la cola. Se cansa tanto que duerme todo el camino a casa. * Ejecute el código para ver si lo hizo correctamente. ==== Parámetros Múltiples ==== * Puede cambiar dos estilos al mismo tiempo separándolos con un ; de la siguiente manera. perro mascota * 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. ==== Sangrar ==== * Podemos sangrar la primera línea de un párrafo con text-indent. Los domingos conducen a las ^montañas donde corretea oliendo la hierba y moviendo la cola. Se cansa tanto que duerme todo el camino a casa. ==== Alineación ==== * 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. Mi amigo Pablo tiene un perro mascota llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, le gusta perseguir una pelota. Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa. * Hay muchos otros atributos de estilo, pero la mayoría se aplican más comúnmente a los encabezados. [[es:web_development:text:headings|Siguiente: Encabezados]]