programación en html 3

8
PROGRAMACIÓN EN HTML Capítulo 3: Algo de estilo Material desarrollado por el profesor Luis Carlos Flórez Toro Imagen tomada de : www.mastermagazine.info

Upload: luchopaisa

Post on 26-Jul-2015

482 views

Category:

Education


3 download

TRANSCRIPT

Page 1: Programación en html 3

PROGRAMACIÓN EN HTML

Capítulo 3:Algo de estilo

Material desarrollado por el profesor Luis Carlos Flórez ToroImagen tomada de : www.mastermagazine.info

Page 2: Programación en html 3

Repaso

En la clase anterior vimos cómo hacer listas numeradas, ¿recuerdas las etiquetas para hacerlo? Ingresa al documento de listas y reemplaza las etiquetas <ol> por <ul> (tanto en la apertura como en el cierre de listas) y observa la diferencia. ¿Qué conclusiones sacas de este experimento?

Imagen tomada de http://formaciondevendedoresempresarios.blogspot.com

Page 3: Programación en html 3

Tamaño de fuentePodemos usar atributos para modificar algunas etiquetas. En este caso utilizaremos el atributo STYLE para modificar etiquetas de párrafo. Con él vamos a modificar el tamaño, color y tipo de letra de la fuente.

• Abre un documento html de las clases anteriores.• En la etiqueta de apertura de un párrafo, incluye el atributo

style, como se muestra en este ejemplo.• (No puedes equivocarte en ningún signo, para que te pueda

funcionar bien, si se te presenta un error debes detectarlo)• Prueba a asignar diferentes tamaños y observa el resultado

<body>

<p style=“font-size:18px”> Hijo de tigre sale pintado </p>

</body>

Page 4: Programación en html 3

Color de fuenteUsando style y el modificador color podemos incluir colores en nuestros textos.

Prueba con otros colores, nómbralos siempre en inglés ¡y observa los resultados!

<body>

<p style=“color:blue”> Hijo de tigre sale pintado </p>

</body>

Page 5: Programación en html 3

Aplicando varios estilos a la vez…Si deseas aplicar varios estilos a un mismo párrafo solo debes separarlos por punto y coma, como se muestra en el ejemplo:

Estamos aplicando simultaneamente un tipo de letra serif y un color rojo; prueba a aplicar diferentes estilos simultáneos.

<body>

<p style=“font-family:serif; color:red”> Que clase!! </p>

</body>

Page 6: Programación en html 3

ACTIVIDAD 51. Crea un nuevo documento en bloc de notas, escribiendo la estructura

básica de un html.2. Escribe en tres párrafos el nombre de tres miembros de tu familia

(inclúyete), ordenándolos del más bajo al más alto.3. Utilizando style haz que el primer nombre sea pequeño, el segundo

mediano y el tercero grande, como se observa en la siguiente figura:

Page 7: Programación en html 3

ACTIVIDAD 5 (continuación)4. Escribe en tres párrafos cosas de tres colores diferentes y asígnale a cada

párrafo el color respectivo (observa como debe ir quedando)

Page 8: Programación en html 3

ACTIVIDAD 5 (finalización)4. Aplica en forma simultánea diferentes familias de fuentes a los tres

párrafos finales. El resultado debe ser similar a este: