Curso de Páginas Web www.cursodepaginasdeinternet.com paginasdeinternet@yahoo.com P.O. Box 8852 Ponce, PR, 00732 Teléfono: 787218-5406 Módulo 1 Preparado por: Dr. Gerardo Cartagena Instrucciones Generales Antes de empezar a trabajar con su Página Web es importante conocer los siguientes datos y practicarlos. Notas: 1. Se prohíbe la reproducción total o parcial de este documento el cual tiene Derechos Reservados. 2. Los estudiantes tienen permiso para copiar los códigos que necesite y editarlos con la información que desee. 1
1. Recomendaciones importantes a. No se preocupe si de momento la información que sigue le parece muy técnica, tan solo siga las instrucciones y practique. De esta manera entenderá que es fácil. b. Vea el video correspondiente al Módulo (Es recomendable imprimir el Módulo para poder seguir al Profesor), practique según las Instrucciones del Profesor. c. Tenga a la mano su Username y Password que le darán acceso a su Panel de Trabajo. 2. En su Página Web usted puede escribir de manera normal la información, anuncio o mensaje que usted quiera llevar, además en cada página puede añadir videos, banners, fotos e información utilizando los siguientes códigos, luego que edite la información como usted lo desea o haya codificado sus banners, fotos, etc., los copiará (Copy) los pegará (Paste) en su Página de Internet según aprenderá en el Módulo 2. a. Si desea resaltar alguna información puede utilizar los siguientes códigos: El color varía dependiendo el código que utilice, también puede combinar códigos Solo sustituya la información sombreada en Amarillo por la que usted desea. <b>dios es Amor</b> Así se verá en su Página Web Dios es Amor <u>dios es Amor</u> Así se verá en su Página Web Dios es Amor La tabla de colores está en la página 6 2
b. Puede combinando estos dos códigos <span style="font-size:30px"><span style=></span > <span style="color:#ff0099">dios es Amor </span > Así de vera en su Pág. Web Dios es Amor Lo que tiene que cambiar es el tamaño de la letra (30) al tamaño que usted desee y el color que usted prefiera (ff0099) según la tabla de colores que está en la pagina 6. Puede sustituir el mensaje (Dios es Amor) al que usted desee. Todo lo demás debe quedarse igual. Solo sustituya la información sombreada en Amarillo por la que usted desea. La tabla de colores está en la página 6 Nota Importante Le recomendamos tener un File donde usted pueda guardar todo lo relacionado a su página; fotos, información, documentos y que siempre que codifique un banner, información etc., también lo guarde debidamente identificado en este archivo. 3
c. Utilice: <h2>dios Es Amor</h2> <div align="center"> Solo sustituya la información sombreada en Amarillo por la que usted desea. Para que Dios Es Amor quede dentro de una línea como título o haciendo separación de tema. La línea saldrá del color principal de la página y Dios es Amor del color de los números del calendario. Así se verá en su Página Web <h1>dios Es Amor</h1> Dios Es Amor Saldrá en tamaño más grande y del color del título principal de la página Solo sustituya la información sombreada en Amarillo por la que usted desea. 4
d. Utilice el siguiente código donde saldrán las palabras moviéndose de derecha a izquierda continuamente. <MARQUEE bgcolor="white" WIDTH="500" HEIGHT="80" LOOP="infinite"> <FONT Size="2" Face="arial " COLOR="black"> <span style="color:#ff0000"> <span style="fontsize:30px"><span style=></span > <span style="color:#009999"> Página de Internet Personalizada </span > </span > </FONT> </MARQUEE></B> Puede cambiar el texto (Página de Internet Personalizada), el color de la letra (009999) y el tamaño de la letra (30) al que usted desee. Así se verá en su Página Web con las letras en movimiento de derecha a izquierda. 5
Tabla de Colores 6
Letras (Font) Heading 193251 Heading 2 a5c640 Fondo Heading 2 193251 Heading 3 a5c640 Fondo Heading 3 193251 Combinaciones de Colores Recomendadas para tu Página Web Color Fondo Contenido Editar Letras (Font) Heading ffffff ffffff Heading 2 000000 Fondo Heading 2 Heading 3 ffffff Fondo Heading 3 333333 Color Fondo Contenido 333333 Editar ) 003399 Heading 003399 Heading 2 003399 Fondo Heading 2 Heading 3 99ffff 99ffff Fondo Heading 3 003399 Color Fondo Contenido ffffcc Editar 7
e. Utilizando www.flashvortex.com En flashvortex.com usted puede hacer banners con movimiento 1. Valla a www.flashvortex.com 2. Escoja el estilo y el tamaño del banner que desee 3. Siga las instrucciones 4. Cuando genere el banner copie el código y péguelo en la página que desee(easy Copy / paste this code into your site) Ejemplo: <script src="http://h1.flashvortex.com/display.php?id=2_1340187644_27293_442_0_728_90_9_1_49" type="text/javascript"></script> Así se verá en su Página Web 8
f. Utilizando : http://www.animationonline.com Es un sistema sencillo pero útil para hacer banner. Aunque tiene pocas opciones, pueden ser de gran utilidad si se manejan adecuadamente. Prácticamente lo que se necesita es seguir las instrucciones del mismo sistema para hacer un banner. Ejemplo Así se verá en su Página Web 9
g. Utilizando www.tinypic.com Con tinypic usted puede codificar un banner, una foto, arte hecho en Publisher, etc. a. Prepare su banner en cualquier programa que tenga disponible. Es fácil hacer banners en Publisher. Las fotos las puede editar en Publisher o en el programa picasa el cual puede bajar en http://picasa.google.com. Luego que prepare su banner, guárdelo en el archivo que usted desee en su computadora. b. Valla a la página www.tinypic.com c. Suba ( Browse) el banner, una foto, arte hecho en Publisher (nota: el arte hecho en Publisher debe haberlo guardado en JPEG File Interchange Format ). Para hacerlo tiene que abrir el arte hecho en Publisher, valla a file luego a save as donde dice save as a type escoja JPEG File Interchange Format. d. Tinypic le dará unos códigos, copie el primero (HTML for Websites) Nota Para que sea más fácil editar, copie el código y péguelo en Microsoft Word, luego que lo edite, cópielo y péguelo en el lugar que desee de su Página Web. 10
Ejemplos de tinypic: Ejemplo 1 de tinypic: Así sale de tinypic: <a href="http://tinypic.com?ref=2gy0jgz" target="_blank"><img src="http://i45.tinypic.com/2gy0jgz.jpg" border="0" alt="image and video hosting by TinyPic"></a> a. Si quieres utilizarlo para que te lleve a otra página (link) debes copiar la dirección de la otra página, a donde quieres que te lleve. (Ejemplo http://www.clasificadosvidaabundante.com) y ubicar esta dirección de la siguiente manera en el código anterior (sustituyendo lo sombreado) Quedará así <a href="http://tinypic.com?ref=2gy0jgz" target="_blank"><img src="http://i45.tinypic.com/2gy0jgz.jpg" border="0" alt="image and video hosting by TinyPic"></a> <a href="http://www.clasificadosvidaabundante.com"_blank"><img src="http://i45.tinypic.com/2gy0jgz.jpg" border="0" alt="image and video hosting by TinyPic"></a> Como notas se sustituyó http://tinypic.com?ref=2gy0jgz" target= por http://www.clasificadosvidaabundante.com 11
b. Si lo que desea es que se vea el mensaje que tiene el banner solamente debes eliminar lo que está sombreado en amarillo. <a href="http://tinypic.com?ref=2gy0jgz" target="_blank"><img src="http://i45.tinypic.com/2gy0jgz.jpg" border="0" alt="image and video hosting by TinyPic"></a> Quedará así <a hrefblank"><img src="http://i45.tinypic.com/2gy0jgz.jpg" border="0"></a> Ejemplo 2 de tinypic: Si quiere que un documento completo se vea en una página siga las siguientes instrucciones. 1. Prepare el documento en Publisher (nota: el arte hecho en Publisher debe haberlo guardado en JPEG File Interchange Format ). Para hacerlo tiene que abrir el arte hecho en Publisher, valla a file luego a save as donde dice save as a type escoja JPEG File Interchange Format y guárdelo. 2. Valla a la página www.tinypic.com 3. Suba el documento (Browse) 4. Escoja el tamaño 5. Tinypic le dará unos códigos, copie el primero (HTML for Websites) 6. Así sale de tinypic: <a href="http://tinypic.com?ref=2ms3g40" target="_blank"><img src="http://i50.tinypic.com/2ms3g40.jpg" border="0" alt="image and video hosting by TinyPic"></a> Elimine lo que está sombreado, cópielo y péguelo en cualquier página. <a href="http://tinypic.com?ref=2gso6q8" target="_blank"><img src="http://i50.tinypic.com/2gso6q8.jpg" border="0" alt="image and video hosting by TinyPic"></a> <a hrefblank"><img src="http://i44.tinypic.com/2s9ya1h.jpg" border="0"></a> Quedará así: <a hrefblank"><img src="http://i44.tinypic.com/2s9ya1h.jpg" border="0"></a> 12
Ejemplo 2 de tinypic: Así se verá en su Página de Internet 13
Pase al Módulo 2 14