NOMBRE DEL PROFESOR: JOEL C.

FLORES ESCALANTE
NOMBRE DE LA PRCTICA: PAW02-CSS
PRCTICA NM. [ 01 ]

LABORATORIO: Desarrollo de Aplicaciones

MATERIA: Programacin de aplicaciones WEB
UNIDAD: 1
TIEMPO: 2 hrs

OBJETIVO:
Practicar y reafirmar conocimientos sobre CSS, su estructura bsica y componentes comunes.

MARCO TERICO:
CSS es parte de las tecnologas bsicas para la programacin del lado del cliente. Por lo cual es
necesario repasar el lenguaje y componentes ms comunes.

LISTA DE MATERIALES:
Editor de texto (sublime, notepad++, gedit, etc)
Navegador de internet (Chrome, Mozilla, Safari, etc)

EQUIPO DE LABORATORIO:
Computadora con acceso a internet.

DESARROLLO DE LA PRCTICA:
1. En la carpeta principal de las prcticas PracticasPAW crea una subcarpeta de nombre
PAW02-CSS. Dentro de esa carpeta copia los archivos que utilizaste en la prcticas
PAW01-HTML.
2. Abre el archivo index.html. Dentro de la seccin head abre y cierra un espacio para
escribir cdigo CSS. Ver: 4 methods of adding CSS to HTML: link, embed, inline and
import
http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import
3. Cmo se llama este mtodo de incluir cdigo CSS?
4. Dentro de la seccin de cdigo CSS escribe las instrucciones para cambiar la familia de la
letra (Helvetica, Geneva, Arial, sans-serif), el color de letra (rojo) y el color de fondo
(amarillo) de la etiqueta h1. Ver:
 5. Gua Breve de CSS http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo
6. Porqu las dems etiquetas no se ven afectadas? Por ejemplo h1, body.
7. Descarga el archivo ui-bg_diagonals-thick_18_b81900_40x40.png y ponlo en la carpeta
de la prctica.
8. Escribe un cdigo CSS que afecte el body del documento de tal manera que el fondo
sea la imagen descargada repetida para cubrir toda el rea del cuerpo.
9. En la carpeta de la prctica crea un archivo que se llame estilo.css. Abre el archivo con
el editor de texto. Ingresa el cdigo para crear una clase de nombre impar que lleve la
instruccin para cambiar el color de fondo a amarillo:
.impar{ background-color:#ffc; }
Ver la referencia CSS para colores e instrucciones:
Referencia CSS - CSS | MDN
https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS
10. Crea una segunda clase que se llame par y que lleve por instruccin modificar el color
de fondo a azul. Guarda el archivo estilo.css
11. Dentro del archivo altaPersonas.html en la seccin head escribe la instruccin para
jalar el cdigo del archivo estilo.css. Ver 4 methods of adding CSS to HTML
12. Cmo se llama este mtodo de incluir cdigo CSS?
13. Visualiza el archivo altasPersona.html en el navegador. Cul es el resultado?
14. Por cada uno de los renglones de la tabla donde se encuentran los componentes del
formulario:
Para las filas impares agrega la clase impar.
Para las filas pares agrega la clase par.
Ver: The class selector en https://www.w3schools.com/css/css_syntax.asp
15. Visualiza el archivo altasPersona.html en el navegador. Cul es el resultado?
16. Utilizando CSS en lnea 4 methods of adding CSS to HTML cambia el color de letra de
la etiqueta h1 a verde y el fondo a magenta.
17. Visualiza el resultado.

RETROALIMENTACIN:
Tutorial de HTML:
http://www.w3schools.com/html/DEFAULT.asp

4 methods of adding CSS to HTML: link, embed, inline and import

http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import

Gua Breve de CSS

http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo
CSS Tutorial
http://www.w3schools.com/css/

Referencia CSS - CSS | MDN

https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS

RECOMENDACIONES ADICIONALES:
Curso de HMTL & CSS:
https://www.udacity.com/course/intro-to-html-and-css--ud304

BIBLIOGRAFA:
1. HTML, XHTML Y CSS.