Embed Size (px)
Citation preview
1
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.
Centro de Apoyo Vida Abundante
P.O. Box 8852 Ponce, PR, 00732
Teléfono: 787218-5406
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.
2
1. Recomendaciones importantes
a. Hacer cuenta en Youtube
b. Hacer por lo menos dos cuentas de correos electrónicos
c. 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.
d. Trate de no dedicarle más de 30 minutos a este Módulo ya que en el Módulo 2 tendrá la
oportunidad de de hacer la aplicación práctica.
2. En su Página Web usted puede escribir de manera normar 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
3
b. Combinando estos dos códigos
<span style="font-size:40px"><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 (40) 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.
____________________________________________________________________
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.
La tabla de colores está en la
página 6
4
c. Utilice:
<h2>Dios Es Amor</h2>
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.
Solo sustituya la información sombreada en Amarillo por la que
usted desea.
5
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="font-
size:40px"><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 (40) al que usted desee.
Así se verá en su Página Web con las letras en movimiento de derecha a izquierda.
6
Tabla de Colores
7
3. 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
7
8
4. 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
5. 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)
<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 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>
Quedará así: <a hrefblank"><img src="http://i50.tinypic.com/2ms3g40.jpg" border="0"></a>
12
Ejemplo 2 de tinypic: Así se verá en su Página de Internet
13
6. Banner especial o marco para resaltar información
Utilizando este código la información quedará dentro de un marco. Para promocionar actividad o
días de actividades con horario o para enfatizar una reflexión o mensaje. Solo cambie la
información sombreada en amarillo por la que usted desea. Puede cambiar el tamaño de la letra y
del marco solo cambie los números sombreados de color verde. Para cambiar los colores del
marco solo cambie los códigos sombreados en gris, utilice la tabla de colores y escoja el que usted
desee.
Ejemplo 1
<br>
<br>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;">
<table border="5" bordercolor="2C4491" style="background-color:#FFFFFF" width="35%"
cellpadding="9" cellspacing="3"><tr>
<td><font size="5"><center>Horario de servicio</font>
</center></tr>
<tr>
<td><center><font size="3">Lunes 6:30pm-7:30pm <br>
“?????Viernes 7:30pm-10:00pm <br>Culto de adoración<br>
Domingo 9:00am-10:45am <br>Escuela dominical,
11:00am-12:30pm<br>Culto de adoración</font></td>
</p>
</table>
<br>
<br
14
Así se verá el ejemplo 1 en su Página Web
15
Pase al Módulo 2
Es el momento de practicar
Felicidades pronto podrá manejar
Páginas Web
