Guia4l 09

1
0 UNIVERSIDAD DE EL SALVADOR CICLO II-09

FACULTAD DE INGENIERIA Y ARQUITECTURA TPI-115
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS GUIA L-04
TECNICAS DE PROGRAMACION PARA INTERNET T.E.
ELABORADO POR: ING. BALMORE ORTIZ
UNIDAD IV. DISEO DE SITIOS WEB DINMICOS
GUIA DE LABORATORIO No. 4
"Diseo de Pginas Web Usando CSS"
Objetivo General
Adquirir conocimientos, habilidades y destrezas en la estilizacin de sitios web
empleando las propiedades de formato y posicionamiento de las hojas de estilo para
controlar la presentacin y visualizacin de las pginas web.
Objetivos Especficos
Conocer la sintaxis bsica de las hojas de estilo tanto para formato como para
posicionamiento (estndares CSS1 y CSS2).
Aprender y aplicar las tres tcnicas bsicas para la aplicacin de estilos en pginas
y sitios web.
Aplicar los conocimientos de formato y posicionamiento para organizar el contenido
de una pgina web.
Adquirir conocimientos y habilidades en la construccin pginas web profesionales
independientes el contenido del formato.
Descripcin
El Laboratorio est dividido en tres partes. La primera parte consistir en estudiar la
sintaxis y conceptos bsicos de Hojas de Estilo empleando las distintas tcnicas para
definirlos y se aplicarn las diferentes tcnicas para definicin de estilos y en la segunda
parte se estudiar las tcnicas de agrupacin en bloque y lnea y la forma de aplicar
estilos mediante estas. En la tercera parte del laboratorio se harn una serie de ejercicios
para desarrollar las habilidades y destrezas del alumno en la construccin de pginas
web dinmicas usando el componente hojas de estilo del DHTML. La prctica se
desarrollar sobre un sitio web previamente construido
usando HTML puro. El trabajo del alumno consiste en dar
formato y posicin a los elementos que se le indique en la gua
de ejercicios. Para el desarrollo de la prctica har uso del
material de apoyo anexo.
Equipo, Materiales y Recursos Didcticos

Gua de Laboratorio.
Materiales del Curso sobre Hojas de Estilo CSS1 y CSS2
Guas de Referencia Rpida para CSS (anexas)
Guas de Referencia Rpida para JavaScript
Materiales del Curso y Apuntes de Clase.
1
2
I. Tcnicas de Insercin de Estilos

Descripcin: Existen tres tcnicas para la definicin de estilos en pginas web:
1. En la etiqueta HTML
2. EN el encabezado de la pagina Web
3. En un Archivo externo (archivo de texto plano con
extensin .css pero usando sintaxis css)
1. En la etiqueta HTML
EL ESTILO SE APLICA COMO UN ATRIBUTO MAS DE LA ETIQUETA
HTML BAJO EL NOMBRE DE STYLE.
Nota: es importante tener en cuenta que por ejemplo si hay
varios prrafos (etiqueta p) el estilo se aplica solo a la
etiqueta que se le coloc el atributo style, si se quiere el
mismo estilo para todos los prrafos, se debe usar la tcnica
2.
<ETIQUETA STYLE=propiedad1:valor1; propiedad2:valor2;
propiedadN:valorN;>
</ETIQUETA>
Aplicacin: En la etiqueta que desee aplicar estilo coloque el atributo STYLE seguido por
el signo = y entre comillas coloque los pares de propiedad:valor separados por ;
Ejemplo:
<p style=color:blue; font-size:1cm;>
Este párrafo es color azul y la letra mide 1 cm.
</p>
2. En el encabezado de la pagina Web: se incluye dentro del

encabezado <head> </head> la etiqueta STYLE y dentro de
ella se define el estilo para las etiquetas, ids,
clases, pseudoclases y pseudoelementos.
<STYLE TYPE=text/css>
//DECLARACION DE ESTILOS
NOMBRE_ETIQUETA {propiedad:valor;}
.NOMBRE_CLASE {propiedad:valor;}
#NOMBRE_ID {propiedad:valor;}
ETIQUETA:pseudoclase {propiedad:valor;}
ETIQUETA:pseudoelemento{propiedad:valor;}
</STYLE>
Aplicacin:
* Recuerde que cuando el estilo se define en el encabezado para una etiqueta no se debe
hacer nada adicional, ya que el estilo se aplicar automticamente a todas las etiquetas que
lleven ese nombre.
** Recuerde que cuando se usa clases o ids para definir estilos para que estos sean
aplicados se debe usar (segn corresponda) el atributo class o el atributo id en la(s)
etiqueta(s) que tendrn ese estilo en vez de usar el atributo style en dicha etiqueta.
*** Una pseudoclase es un estilo para un estado de una etiqueta (actualmente solo para la
etiqueta A), y no debe confundirse con las clases. Para que una pseudoclase se aplique no se
debe hacer nada, se aplica automticamente. Vase referencia rpida CSS.
2
3
**** Un pseudoelemento sirve para dar estilo a una porcin del contenido de una etiqueta
(por eso se llaman pseudoelementos). Vase referencia rpida CSS.
Ejemplo:
//DECLARACION DE ESTILOS
body {font-size:0.5cm;background-color:silver;}
.azul {color:white;background-color:blue;}
#rojo {color:yellow;backgroun-color:red;}
a:link {color: black;background-color:silver;}
a:visited {color:green;}
a:active {color:blue;}
p:firsletter {font-size:1.5cm;}
</STYLE>
3. En un Archivo externo .css

Para esta tcnica es necesario un archivo de estilos (es un archivo de texto con extensin css) que
contenga las definiciones literal a) y por otro lado enlazar cada pagina del sitio con dicho archivo
literal b).
a) El archivo: url_estilo.css tendr la sintaxis:
body {font-size:0.5cm;background-color:silver;}
.azul {color:white;background-color:blue;}
#rojo {color:yellow;backgroun-color:red;}
a:link {color: black;background-color:silver;}
a:visited {color:green;}
a:active {color:blue;}
p:firsletter {font-size:1.5cm;}
b) En cada una de las pginas del sitio se colocar el

siguiente cdigo dentro del encabezado del documento.
@import url(url_estilo.css)
</STYLE>
II. Agrupacin en bloque y en lnea.

II.1 Descripcin
En HTML disponemos de dos etiquetas que nos permiten agrupar y aplicar estilos a
varias etiquetas (agrupacin en bloque) o partes dentro de una etiqueta como palabras
o frases (agrupacin en lnea).
II.2 Agrupacin en bloque

Uso de la etiqueta DIV, para cambiar la apariencia de una seccin entera (que
agrupe un conjunto de etiquetas) y con la que definimos el estilo globalmente
para esa seccin; pero debe tenerse presente que el estilo dentro de una
etiqueta concreta (contenida en el bloque) tiene precedencia sobre el estilo del
bloque, impuesto por DIV, es decir, cada etiqueta puede redefinir su formato.
3
4
Sintaxis
<DIV STYLE=propiedad:valor;>
<!- - CONJUNTO DE ETIQUETAS HTML DE BLOQUE - ->
</DIV>
Ejemplo:
<DIV STYLE="background-color:black;color:orange;width:400px;
border-style:solid;border-color:red;padding:10px;">
<P>PRIMER PARRAFO</P>
<P>SEGUNDO PARRAFO</P>
<P>TERCER PARRAFO</P>
<P>CUARTO PARRAFO</P>
<P STYLE="color:yellow;font-size:20px;">OBSERVA QUE TODOS LOS PARRAFOS
TIENEN LAS MISMAS CARACTERISTICAS PERO YO SOY DIFERENTE
</P>
</DIV>
II.3 Agrupacin en lnea.

Uso de la etiqueta <SPAN>, que tiene una misin parecida a <DIV>, pero que se usa
para cambiar elementos ms pequeos (por ejemplo, palabras o incluso letras), en
lugar de bloques enteros; span se usa dentro de etiquetas de bloque como parrafo P.
SPAN puede contener adems de texto simple etiquetas html en lnea que son las que
no generan un bloque, como por ejemplo i, b, sub y sup.
Sintaxis
<SPAN STYLE=propiedad:valor;>
<!- - CONJUNTO DE TEXTO SIMPLE Y/O ETIQUETAS HTML EN LNEA - ->
</SPAN>
Ejemplo:
<p style=color:blue;>
Observe que
<span style=color:red;>Todo este texto esta en rojo </span>
mientras que el resto del parrafo es azul
</p>
4
5
III. Ejercicios
1. Descomprima la carpeta wwwroot_mate_SUCARNET y renmbrela colocando su nmero de
carnet al final del nombre de la carpeta.
2. Abra el archivo index.html
3. Usando la tcnica 1 aplique el siguiente formato al primer prrafo de la pgina index.html
color de fuente verde, tamao de fuente 50mm
4. Usando la tcnica 1 aplique el siguiente formato al ltimo prrafo de la pgina index.html
color de fuente blanco, color de fondo verde, tamao de fuente 0.5in
5. Aplicando la tcnica 2 defina el siguiente formato para todos los prrafos: debe tener borde,
el ancho de borde debe ser de 5mm
6. Aplicando la tcnica 1 cambie el color de borde del ltimo prrafo
7. Aplicando la tcnica 1 cambie la posicin de los prrafos en la pgina. Para esto
use el atributo style as: style=position:absolute; top:xx; left:xx; donde xx es la
distancia en unidades absolutas o relativas a partir de la esquina superior izquierda
de la pagina.
8. Usando la tcnica 2 (los ids y las clases se definen en el encabezado) cree un id y nmbrelo
menu (debe iniciar con #), aplique propiedades de estilo para obtener los siguientes efectos:
estilo de borde, color de borde y ancho de borde (segn su gusto) luego aplique el id a la
etiqueta h1 que contiene el men de navegacin.(un id es un estilo que no est asociado a
ninguna etiqueta, es decir, mediante el atributo id se puede asociar a una etiqueta)
9. Usando la tcnica 2 Defina estilo para las pseudoclases y pseudo elementos a:link, a:vlink,
a:visited,a:active, p:first-letter
Ejemplo:
p:first-letter { font-size:1cm; }
10. Abra el archivo de estilos ubicado en carpetaraz/estilo/estilo.css

11. Enlace la pgina index.html con el archivo de estilos que se encuentra en
carpetaraz/estilo/estilo.css y luego enlace dicho archivo de estilos con el resto de pginas
del sitio web: aritmtica.html, algebra.html, etc; !cuidado con la url!! (vase material anexo)
12. En el archivo de estilo.css defina un color de fondo para body, guarde el archivo. Navegue el
sitio web y verifique que todas las pginas muestran el mismo color de fondo.
13. Baje de internet una imagen jpg de su preferencia o una que tenga en su disco duro, cpiela
a la carpeta imgenes y haga que sea el fondo del sitio web, haga las modificaciones que
sean necesarias. Todas las pginas deben presentar dicha imagen como fondo. Verifquelo.
*importante: las url relativas en el archivo de estilos tomaran como base la ubicacin del archivo
css y no la ubicacin de la pgina web.
14. Cambie la imagen en el archivo de estilo por otra y luego verifique que todas las pginas
tengan el mismo fondo.
15. Agregue al archivo estilo.css una clase con el nombre titulo (debe iniciar con punto) defina
estilo para borde, color de fondo, color, ancho de borde y color de borde. Luego aplique esta
clase a los ttulos <h1> de las pginas aritmetica.html, algebra.html, aritmetica.html, etc.
16. Realice los cambios adicionales que estime convenientes a su sitio web, explore el resto de
propiedades de estilo y su funcionamiento.
17. Use el servidor web QuickWeb Server y verifique que el sitio funcione correctamente.
.
IMPORTANTE. PARA LA PROXIMA PRCTICA DEBE LLEVAR ESTE SITIO
WEB EL DIA DEL LABORATORIO.

Guia4l 09

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Guia4l 09

Încărcat de

Drepturi de autor:

Formate disponibile

1

0 UNIVERSIDAD DE EL SALVADOR CICLO II-09

UNIDAD IV. DISEO DE SITIOS WEB DINMICOS

GUIA DE LABORATORIO No. 4

"Diseo de Pginas Web Usando CSS"

Equipo, Materiales y Recursos Didcticos

I. Tcnicas de Insercin de Estilos

2. En el encabezado de la pagina Web: se incluye dentro del

3. En un Archivo externo .css

a) El archivo: url_estilo.css tendr la sintaxis:

b) En cada una de las pginas del sitio se colocar el

II. Agrupacin en bloque y en lnea.

II.2 Agrupacin en bloque

II.3 Agrupacin en lnea.

10. Abra el archivo de estilos ubicado en carpetaraz/estilo/estilo.css

S-ar putea să vă placă și