Nombre de la materia

Desarrollo de páginas web

Nombre de la Licenciatura
Ingeniería en Sistemas Computacionales

Nombre del alumno

Luis Manuel Mora López

Matrícula
000577912

Nombre de la Tarea

Unidad #
Unidad 5. Manejo de estilos en el diseño de
páginas web

Nombre del Profesor

Prof. Heriberto Hernández González

Fecha
04/02/2019
 Unidad 5: Manejo de estilos en el diseño de páginas web
Desarrollo de páginas web

ACTIVIDAD 5

“¿Sabías que…

Las Hojas de estilo dan un rango de posibilidades para mejorar la apariencia de las páginas
web, brindando un mayor control sobre el esquema y diseño del acabado de una página Web
lo cual contribuye a que el usuario se sienta más comodo al visualizarla“

Objetivos:

 Definir hojas de estilos para modificar el aspecto de textos, párrafos, espaciado,

columnas, sangrías, títulos y tipografía
 Conocer las ventajas del uso de hojas de estilos

Instrucciones:

Revisa los siguientes materiales pertenecientes a los recursos de la semana 5:

Lectura

 CSS, hojas de estilo (Beltrán, B., s.f.). Describe el concepto y función de las hojas
de estilos, así como la compatibilidad que tienen estos elementos con los
navegadores web.

Video

 Tutorial CSS y HTML - Poner estilo CSS al código HTML (zadyOne, 2012).
Ejemplifica los métodos para utilizar hojas de estilos a un documento HTML.

Deberás descargar la actividad en Word y responder directamente en el documento.

 Unidad 5: Manejo de estilos en el diseño de páginas web
Desarrollo de páginas web

Forma de evaluación:

Criterio Ponderación Calificación obtenida

Presentación 10%

Desarrollo de ejercicios 90%

Ejercicio I 15%
Ejercicio II 25%
Ejercicio III 25%
Ejercicio IV 25%

Desarrollo de la actividad:

I. Las hojas de estilo tienen como objetivo facilitar el trabajo de los diseñadores de
páginas web, por lo que el siguiente ejercicio tiene como objetivo mostrar la
importancia de su uso.

Responde si es Falso o Verdadero considerando las características de las hojas

de estilo de la lectura indicada. (Valor 15%)

Afirmaciones Falso o verdadero

Las hojas de estilo permiten definir la forma de todo el web de una Verdadero
sola vez

No podemos definir varios estilos diferentes a una sola etiqueta. Falso

Para definir la forma de un documento HTML puede ser en un Verdadero

pequeño trozo de código en la cabecera

Las hojas de estilos permiten la definición de atributos en más Verdadero

unidades que lenguaje HTML
 Unidad 5: Manejo de estilos en el diseño de páginas web
Desarrollo de páginas web

II. Ahora es tiempo de revisar las distintas formas en que podemos definir los estilos
a las páginas web; lo cual nos permitirá tomar la decisión que opción utilizar en
los casos que se nos plantee.

Completa el siguiente cuadro indicando el ejemplo siguiendo las instrucciones

indicadas (Valor 25%).

Descripción Instrucción Ejemplo

Definir un estilo se utilizan atributos Color: Sirve para indicar el color del
Indica la definición
seguidos de dos puntos y el valor texto. Lo admiten casi todas las
de 3 atributos
que le deseemos asignar. Podemos etiquetas de HTML.
definir un estilo con base en definir
Font-size: Sirve para indicar el
muchos atributos separados por
tamaño de las fuentes de manera
punto y coma. más rígida y con mayor exactitud.

Font-family: Con este atributo se

indica la familia de tipografía del
texto. Los primeros valores son
genéricos, es decir, los exploradores
las comprenden y utilizan las
fuentes que el usuario tenga en su
sistema.

La definición de un estilo de una

Indica la definición
etiqueta se escribe la etiqueta
del estilo P con el P{color:red; fon-size:10pt}
seguida de la lista de atributos
texto de color rojo
encerrados entre llaves.
y tamaño 10pt

Definir un atributo
Los valores que se pueden asignar a
utilizando la P{ margin-right: 5%;
los atributos son unidades de margin-top: 10px}
medida de
medida
porcentaje y pixel

Definir el estilo de
Atributo que permite indicar el color
P donde hagas uso <p style=”color:#990000”>
de texto
del atributo
descrito
 Unidad 5: Manejo de estilos en el diseño de páginas web
Desarrollo de páginas web

Definir el estilo de
Atributo que permite indicar el
donde hagas uso font-size:12pt;
tamaño de la fuente font-size: x-large;
del atributo
descrito

Definir el estilo
Las sintaxis de estilos definidos a
usando una clase
través de clases son por un punto
donde indiques .nombredelaclase {atributo:
seguido del nombre de la clase y valor;atributo2:valor2; ...}
dos atributos
entre llaves los atributos de estilos
deseados

Define estilo a la
Para utilizar el estilo de clase
etiqueta definido <ETIQUETA
definido se utiliza el atributo class class="nombredelaclase">
en el punto
poniendo como valor el nombre de
anterior
la clase

III. La utilización de las hojas de estilo permite concebir estilos múltiples, para lo cual
se debe tener en cuenta las prioridades inherentes a estos, utilizando
puntualmente las definiciones que necesite.

Relaciona las siguientes columnas colocando en el paréntesis el número

correspondiente (Valor 25%).

USO DE ESTILO DESCRIPCIÓN

1.- Definición para todo un sitio (2) Se utiliza la etiqueta <SPAN>, con
web su atributo style se indica en la
sintaxis CSS las características de
estilos.

2.- Definición para pequeñas (3) Se puede definir en la cabecera del

partes de la página documento, estilos para que sean
aplicados a toda la página. Se utiliza
la etiqueta <STYLE> colocada en la
 Unidad 5: Manejo de estilos en el diseño de páginas web
Desarrollo de páginas web

cabecera de la página para definir los

distintos estilos del documento.

3.- Definición para toda una (4) Se utiliza el atributo style que es
página admitido por todas las etiquetas del
HTML

4.- Definición para una etiqueta (1) Se crea un archivo donde se colocan
las declaraciones de estilos de la
página y enlazando todas las páginas
del sitio con ese archivo.

IV. Han identificado el uso de los estilos a una página web concreta así como para
todo un sitio web. Por lo que ahora toda el tiempo de revisar como se lleva acabo
la aplicación de la declaración de estilos .

Relaciona las siguientes columnas colocando en el paréntesis el número

correspondiente (Valor 25%).

ESTILO APLICACIÓN

1. Su definición es realizada para (5)

todo un sitio web a través de un
archivo externo

2. Permite la definición de estilos (4)

para un sitio web a través de un
archivo externo, pero si se
redefine dentro del código HTML
se aplicarán serán los que
hayamos redefinido.
 Unidad 5: Manejo de estilos en el diseño de páginas web
Desarrollo de páginas web

3. Estilo aplicado en secciones (1)

reducidas de una página

4. La definición es realizada en la (2)

cabecera del documento, los
estilos podrán ser aplicados a
toda la página

5. Aplica un estilo determinado a (3)

una etiqueta

Escriba las referencias bibliográficas (formato APA).

Fuentes de Información:
-zadyOne (19 feb 2012) Tutorial CSS y HTML- Poner estilo CSS al codigo HTML [HD].
Obtenido de Youtube:
https://www.youtube.com/watch?time_continue=457&v=ZR-2SyiO0I0