Tareas Rapidas!
Páginas: 6 (1414 palabras)
Publicado: 24 de octubre de 2012
TERCER BIMESTRE
Practica didáctica y repaso
Crear página de FaceBoook
1ª PARTE: DETERMINANDO LAS ÁREAS DE LA PÁGINA
caja: 800 px X 600 px
head: 800 px X 100 px
left:
500 px X 300 px
content:
300 px X 300 px
footer: 800 px X 200 px
a) Crea un archivo HTML con el nombre: Principal.htm
b) Crea un archivo CSScon el nombre: Modulo1.css
c) Enlaza el archivo Modulo1.css al archivo Principal.html
2ª PARTE: IMPLEMENTANDO LOS ARCHIVOS MODULO.CSS Y PRINCIPAL.HTM
Modulo1.css
| | |
01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546 | @charset "utf-8";/* CSS Document */#caja{ width:800px; height:600px; background-color:#FFF; border:none;}#head{width:800px; height:100px; background-image:url(01.jpg); border:none; float:left;}#left{ width:500px; height:300px; background-image:url(02.jpg); border:none; float:left;}#content{ width:300px; height:300px; background-image:url(03.jpg); border:none; float:right;}#footer{ width:800px; height:200px; background-color:#FFF; border:none; float:left;} | |
| | |
Principal.htm
| | |0102030405060708091011121314151617181920 | <link href="Modulo1.css" rel="stylesheet" type="text/css" /></head><body><div id="caja"> <div id="head"> </div> <div id="left"> </div> <div id="content"> </div> <div id="footer"> </div></div></body></html> | |
| | |
Ya debería verse así…3ª PARTE: IMPLEMENTANDO LOS <DIV>: HEAD
a) En el área de diseño, inserta una tabla de 7columnas x 3 filas, asegurándote que el puntero este parpadeando dentro del <div id=”head”> en el área de codificación.
b) Luego cambia los anchos de columna como se ve en la muestra
c) La tabla debe presentar una apariencia fiferente, en el sentido del texto ycolor del mismo, para ello crearemos la siguiente alteración en el archivo Modulo1.css
Modulo1.css
| | |
41424344454647484950 | #footer{ width:800px; height:200px; background-color:#FFF; border:none; float:left;}table{ font-size:3px; font-family: MS Serif, New York, serif; color:#FFF;} | |
| | |
a) Antes de colocar los formularios, debemos insertar en la codificación un<form> y </form> en la siguiente ubicación
Principal.htm
| | |
091011126162636465 | <body><form id="form1" name="form1" method="post" action=""><div id="caja"> <div id=… </div></div></form></body> | |
| | |
b) Implementa texto y objetos para que esta área se presente como se ve a continuación…
c)Para que el botón se muestre como la pagina original de faceBook, crearemos el siguiente estilo en Modulo1.css
Modulo1.css
| | |
474849505152535455 | table{ font-size:3px; font-family: MS Serif, New York, serif; color:#FFF;} .boton{ background-color:#637BAD; color:#FFF; font-style:inherit;} | |
| | |
d) A continuación nos ubicamos en la directiva de inicio de tabla, ycolocamos en border=”0”, para que las líneas no se noten.
4ª PARTE: IMPLEMENTANDO LOS <DIV>: LEFT
Principal.htm
| | |
55565758596061626364656667 | <div id="left"> <br><br> <center> <font face="Arial, Geneva, sans-serif"> <font size="6"> <b>Tu biografía de Facebook</b> </font><p>Cuenta la historia de tu vida con un nuevo tipo de perfil. <font color="#637BAD"> <b>Más información.</b></font> </font> <p> <img src="04.jpg"> </center> </div> | |
| | |
5ª PARTE: IMPLEMENTANDO LOS <DIV>: FOOTER
Principal.htm
| | |
727374 | <div id="footer"> <center><img...
Practica didáctica y repaso
Crear página de FaceBoook
1ª PARTE: DETERMINANDO LAS ÁREAS DE LA PÁGINA
caja: 800 px X 600 px
head: 800 px X 100 px
left:
500 px X 300 px
content:
300 px X 300 px
footer: 800 px X 200 px
a) Crea un archivo HTML con el nombre: Principal.htm
b) Crea un archivo CSScon el nombre: Modulo1.css
c) Enlaza el archivo Modulo1.css al archivo Principal.html
2ª PARTE: IMPLEMENTANDO LOS ARCHIVOS MODULO.CSS Y PRINCIPAL.HTM
Modulo1.css
| | |
01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546 | @charset "utf-8";/* CSS Document */#caja{ width:800px; height:600px; background-color:#FFF; border:none;}#head{width:800px; height:100px; background-image:url(01.jpg); border:none; float:left;}#left{ width:500px; height:300px; background-image:url(02.jpg); border:none; float:left;}#content{ width:300px; height:300px; background-image:url(03.jpg); border:none; float:right;}#footer{ width:800px; height:200px; background-color:#FFF; border:none; float:left;} | |
| | |
Principal.htm
| | |0102030405060708091011121314151617181920 | <link href="Modulo1.css" rel="stylesheet" type="text/css" /></head><body><div id="caja"> <div id="head"> </div> <div id="left"> </div> <div id="content"> </div> <div id="footer"> </div></div></body></html> | |
| | |
Ya debería verse así…3ª PARTE: IMPLEMENTANDO LOS <DIV>: HEAD
a) En el área de diseño, inserta una tabla de 7columnas x 3 filas, asegurándote que el puntero este parpadeando dentro del <div id=”head”> en el área de codificación.
b) Luego cambia los anchos de columna como se ve en la muestra
c) La tabla debe presentar una apariencia fiferente, en el sentido del texto ycolor del mismo, para ello crearemos la siguiente alteración en el archivo Modulo1.css
Modulo1.css
| | |
41424344454647484950 | #footer{ width:800px; height:200px; background-color:#FFF; border:none; float:left;}table{ font-size:3px; font-family: MS Serif, New York, serif; color:#FFF;} | |
| | |
a) Antes de colocar los formularios, debemos insertar en la codificación un<form> y </form> en la siguiente ubicación
Principal.htm
| | |
091011126162636465 | <body><form id="form1" name="form1" method="post" action=""><div id="caja"> <div id=… </div></div></form></body> | |
| | |
b) Implementa texto y objetos para que esta área se presente como se ve a continuación…
c)Para que el botón se muestre como la pagina original de faceBook, crearemos el siguiente estilo en Modulo1.css
Modulo1.css
| | |
474849505152535455 | table{ font-size:3px; font-family: MS Serif, New York, serif; color:#FFF;} .boton{ background-color:#637BAD; color:#FFF; font-style:inherit;} | |
| | |
d) A continuación nos ubicamos en la directiva de inicio de tabla, ycolocamos en border=”0”, para que las líneas no se noten.
4ª PARTE: IMPLEMENTANDO LOS <DIV>: LEFT
Principal.htm
| | |
55565758596061626364656667 | <div id="left"> <br><br> <center> <font face="Arial, Geneva, sans-serif"> <font size="6"> <b>Tu biografía de Facebook</b> </font><p>Cuenta la historia de tu vida con un nuevo tipo de perfil. <font color="#637BAD"> <b>Más información.</b></font> </font> <p> <img src="04.jpg"> </center> </div> | |
| | |
5ª PARTE: IMPLEMENTANDO LOS <DIV>: FOOTER
Principal.htm
| | |
727374 | <div id="footer"> <center><img...
Leer documento completo
Regístrate para leer el documento completo.