1. ¿Qué es una Página Web?
Una página web es el nombre de un documento o información electrónica adaptada
para la World Wide Web y que puede ser accedida mediante un navegador para
mostrarse en un monitor de computadora o dispositivo móvil. Esta información se
encuentra generalmente en formato HTML o XHTML, y puede proporcionar
navegación a otras páginas web mediante enlaces de hipertexto. Las páginas web
frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones
(scripts) e imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o un servidor web
remoto. El servidor web puede restringir el acceso únicamente para redes privadas, p.
ej., en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El
acceso a las páginas web es realizado mediante su transferencia desde servidores
utilizando el protocolo de transferencia de hipertexto (HTTP).

3. ¿Cuáles fueron las primeras Páginas Web que existieron?
La primera página que se creó en Internet corresponde a esta dirección:
http: //info.cern.ch/hypertext/WWW/TheProject.html, perteneciendo al
dominio
http://info.cern.ch.
El 17 de mayo 1991, el Centro Europeo de Investigaciones Nucleares
(CERN) inauguraba la primera página web en http://info.cern.ch/, siendo la
primera dirección web y dominio creado. Este sitio estaba albergado en el
mismo centro, y corría bajo el primer servidor web que se desarrolló. Abajo
vemos una imagen de ese mítico ordenador que actualmente se encuentra
en la exhibición “Microcosm” del CERN (Centro Europeo de
Investigaciones Nucleares).
La primera página web según tim bemers-lee quien creo la world wide web
fue esta
http://www.w3.org/History/19921103-
hypertext/hypertext/WWW/TheProject.html
Otros historiadores afirman que la primera en publicarse fue esta
http://www.w3.org/History/19921103-
hypertext/hypertext/WWW/News/9201.html

4. Captura de http://info.cern.ch/ en 1993, donde ya se ven los grandes
avances en cuanto a exploradores, similares a los actuales.

5. ¿Cuáles son los programas más
utilizados para crear una Pagina
Web?
Generales
Son programas que su utilidad es del interés general, no exclusivos para programadores o
desarrolladores. Entre los programas más representativos se encuentran: Mozilla, Xenu
Link, Opera (Navegador), FileZilla (Cliente FTP), Open Office, Picasa2, Skype, PDFill, 7-Zip, etc.
Programas de Diseño
Programas que son útiles en el diseño de páginas Web en general. Entre esta categoría de
programas se encuentran: PhotoShop Elements 3.0, Flash, Dreamweaver, Corel Ventura
10, Adobe PhotoShop, Photo Impact, Xara X1, Deep Paint 3D, solo por mencionar algunos.
Programación
Están enfocados a desarrolladores y programadores, es una serie de programas especializados
que le ayudaran a desarrollar su página Web de forma estructurada y confiable, algunos de estos
programas son MED, Ultra Edit, HomeSite, Zend Studio, Edit2web, phpDesigner, Komodo
IDE, HTML-Kit., Visual Web Developer, Style Master Editor, XML Soy 5, y ASP.NET Web
Matrix, por solo nombrar algunos.
Editores HTML
Estos programas son para la edición de código HTML, cuentan con tutoriales específicos, como
editores WYSIWYG. (What You See Is What You Get, lo que ves es lo que obtienes. Se aplica a
los procesadores de texto y otros editores de texto con formato, como los editores de HTML que
permiten escribir un documento viendo directamente el resultado final, frecuentemente el
resultado impreso). Algunos ejemplos de estos programas son: Dreamweaver, Adobe
GoLive, HTMLKit. Komposer, TsWebEditor, Edit plus, Arachnophilia, Coffee Cup free y Front page.

6. ¿Cómo crear una Pagina Web en Front
Page?
Introducción
FrontPage es un programa desarrollado y registrado por la compañía Microsoft, el cual te permite
crear, editar, y manejar páginas para ser luego publicadas en el web.
¿Qué puedes hacer con FrontPage?
Escribir y editar texto
Añadir y editar imágenes
Crear tablas
Crear listados
Crear enlaces
Crear “Frames”
Crear Formularios
Publicar páginas en el Web
¿Cómo planificar un Website?
• Primero establece el tema y los objetivos de tu website
• Esto te permite dibujar la imagen que mejor representa las ideas que resultan del tema y los
objetivos.
• Manten un escrito que ordene y estructure tu página. Esto facilitará el trabajo.
• Recopila toda la información a utilizar
• Recuerda respetar los derechos de autor, tanto en los escritos citados, trabajo intelectual de un
compañero y en las ilustraciones presentadas. Es una buena opción.
• Divide el contenido en asuntos o secciones
• Cada uno de estos asuntos se convertirán en una página dentro de tu web.

7. Elaboración: Algunos trucos:
 Elabora un diagrama de tu website en papel para que te sirva de guía (Site Map).
 Manten en papel detalles de tu website como las cantidades de las páginas, su contenido, tipo de letra
utilizada, colores, etc.
 Coloca una breve descripción de tu website.
 Destaca la información más relevante.
 No olvides desarrollar una barra de navegación. Esta debe ser manejable para toda persona que
visite tu
website.
¿Qué debes considerar en el momento de diseñar tu Website?
• Proveer información relevante
• Crear una Barra de Navegación en todas las páginas
• Respetar y especificar las disposiciones de derecho de autor (copyright) tanto en el contenido escrito como en
la
utilización de láminas. Para las láminas, unas veces es necesario pedir permiso al autor sobre su uso y seguir
las
instrucciones del mismo para permitir la publicación.
• Incluir información de contacto
• Facilitar la transferencia de la información: mantener el tamaño (file size) de las imágenes y las páginas lo más
bajo
posible (<30kb)
• Actualizar la información constantemente
• Proveer un listado de “FAQ” (Frequently Asked Questions) [Según el objetivo de tu página]
• Ten en cuenta cuál será el objetivo para crear la página y trabaja hacia ellos
• Sobre Diseño:
 Utiliza estilos de letra claros y sencillos (Arial, Courier, NewTimes Roman)
 Si vas a utilizar una imagen de fondo (background) ésta no debe intervenir con el texto
 Cuida los colores de tu página, si usas colores claros para el fondo usa colores oscuros para las letras
 No debes hacer páginas demasiado largas, organiza la información distribuyéndola en varias páginas
enlazadas
 No uses imágenes demasiado grandes que ocupen todo el espacio del monitor y/o que opaquen de
alguna
forma la información

8. Inicio
Accesando FrontPage
Presiona el icono que representa el programa en la pantalla de tu computadora o
búscalo en la opción de Start/Programs/Microsorft Front Page
Una vez entras al programa aparece una página vacía donde puedes comenzar a
crear tu website. Pero antes te recomendamos lo siguiente:
Crear una carpeta para tu website
Presiona en el menú File/New. Escoge la
opción Page or Web...

9. En esta versión del programa, la mayoría de los casos le
aparecerá una pantalla a la extrema derecha de la pantalla
que se titula New Page or Web. En esta seleccionarás la
opción Empty Web.
TIP: En algunas versiones aparece una
opción de One PageWeb Site.
Cuando le des clic a la opción podrás
escoger Empty Web. En esa misma
sección seleccionarás la localidad
donde grabarás el mismo.
Empty Web

10. Automáticamente el programa direcciona tu web en el directorio “My Document” y le asigna un
nombre “Web1”:
C:My DocumentMy WebWeb1
Si quieres cambiar de directorio y asignarle otro nombre a tu “Website” puedes hacerlo bajo la
opción “Specify the location of the new web”:
Ejemplo, A:nombre
o C:My DocumentMy Webnombre
TIP: No uses acentos, letras mayúsculas, ni espacios entre palabras o letras para ponerle nombre
a tus archivos pues algunos sistemas de computadora tienen dificultades para leer este tipos de
nombres. [Evita también la letra ñ]
Ahora, presiona en el menú
“View” y escoge la opción
“Views Bar”, aparecerá la barra
de “View” al extremo izquierdo
de la ventana del programa. [En
la mayoría de los casos esta
opción está dada] Presiona en
la opción “Folders” y verás a la
derecha el listado de “folders”
(carpetas) que te creó
FrontPage: _private, images.
En la carpeta llamada _private tendrás las extensiones necesarios para que funcione el programa
(no puedes editarlas) y en la carpeta llamada Image podrás guardar imágenes.

11. Escoger un Tema
Este manual en particular le facilitará el trabajo llevándole a través de las utilidades más prácticas del
programa. Esto no significa que no existan diversas maneras de empezar.
El tema o Theme se refiere a motivos
ya
establecidos por Front Page. El
programa te permite hacer cambios a
estos temas y grabar los mismos de
forma personalizada. Presiona en
Format/ Theme. En Theme procura
escoger la opción de All Pages para
serciorarte de que se repita en cada
página.
Para hacer cambios en el tema escogido da un click en la opción Modify y tu escoges qué cambiar: el
color, las gráficas o el texto. Si haces algún cambio procura presionar en Save as y así personalizarás
los cambios.

12. Crear un borde
La opción de Shared Borders te facilita el trabajo en grandes cantidades. Al escoger un borde evitas
tener que repetir el mismo patrón por cada página de tu website. Dentro de estos bordes trabajarás
con tablas que te permitan manejar mejor el espacio.
Da click en Format/ Shared Borders.
En Shared Borders escogerás las opciones que mejor
representen la organización que deseas para tu
website. Una sugerencia sería seleccionar: All
Pages/Top/Left; Include navigation buttons/Botton
TIP: Si no aparece activa la opción, dirígete a Tools/
Page Options/ Authoring y procura que la opción de
Share Borders esté seleccionada.
Seleccionado tu borde ya tienes una idea de la imagen que empieza a organizar tu website.
Hacer tablas
Lo primero que se te recomienda es trabajar sobre una estructura para que puedas
tener mayor control sobre la página.
Para hacerlo, selecciona en la barra de
herramientas la opción Table/Insert/Table
o
ve directamente al icono de tables

13. Puedes escoger la cantidad de líneas y
columnas, escoger el porcentaje, el
alineamiento, la definición de los
tamaños de los bordes, espacios de
los espacios. El Set as default for new
table te permite mantener el mismo
orden para las demás tablas.
Nota: Ve a la sección “Editar Tablas” más adelante, para detalles sobre como cambiar los colores de
las celdas y la tabla si así lo prefieres.
Con estas instrucciones ya has creado tu plantilla [template] para tu website. El grabar esta página
como tu index sería tu próximo paso.
Crear la página inicial (Home Page)
A ésta primera página le llamarás index.html . El archivo llamado index.html será siempre la página
principal que se despliega cuando las personas accesen a tu website. También se le conoce como
“home page”.
Ve a File/ Save as. En el área de file name escribe index.html. El
HTML sólo lo utilizarás con el index y automáticamente el programa
grabará las demás páginas como htm. En la opción Change se te
ofrece el poder cambiar el nombre de la página. Si seleccionaras un
Banner para tu página, será este nombre el que se reflejará. En esta
opción puedes escribir con todo tipo de regla gramatical. Para crear
la siguiente página repite los pasos uno y dos de ésta sección.

14. ¿Cómo editar texto?
Procurando iniciar un texto dentro de los márgenes de una tabla, escribirás como lo haces
normalmente en un programa de edición de texto. Puedes usar la barra de herramientas para
diseñar el formato del texto: estilo, tamaño, color, ennegrecer, itálicas, subrayado y demás.
¿Cómo añadir imágenes?
• ClipArt - Insert/Picture/ClipArt o puedes localizar el icono en tu barra de herramientas.
• Importar imágenes ya creadas - Insert/Picture/From File
Añadir imágenes de Internet que tengan permiso de "copyright".
1. Buscas la imagen en Internet
2. Sobre la imagen, presionas con el botón derecho del mouse
3. Escoges la opción “copy” y la grabas en un disco externo o interno en tu computadora.
4. Regresas a FrontPage
5. Ubicas el cursor donde quieras colocar la imagen
6. Presionas en Paste

15. ¿Cómo editar Imágenes?
Presiona sobre la imagen y aparecerá una barra de herramientas como la siguiente:
• Añadir texto dentro de la imagen
• Herramienta Thumbnail: minimiza la imagen pero la misma puede luego
ser
vista en su tamaño original en la Internet con sólo presionar sobre ella
• Posición absoluta: te permite mover la imagen a donde la quieras mover
• Rotación de la imagen
• Brillantes y contraste
• Cortar (crop)
• Eliminar un color (transparencia)
• Blanco y negro
• Efecto de Bevel
• Hostpot (añadir enlaces dentro de imágenes)
Nota: Recuerda salvar lo editado dando un clic en el ícono correspondiente.
Creando la Barra de Navegación
La barra de navegación establece una estructura para navegar por todas las páginas que
componen tu "website" . El programa ofrece varias formas para diseñar esta estructura. Entre
éstas se encuentran la opción Navigation Bar
Paso #1
• Asigna orden presionando sobre la opción View y seleccionando Navigation.
• Cuando estés en esta vista, arrastrarás las página deseada desde el Folder list y suéltala
hasta el área de trabajo para enlazarla con la página principal (index) [index se identifica
con el dibujo de una casa en la parte inferior izquierda, así que no debes arrastrarla]

16. • Cuando usamos el Navigation Bar, FrontPage usa la etiqueta (label) que aparece en la vista de
navegación
(Navigation View) como texto para los enlaces. Para cambiarlo presiona con el botón derecho del
mouse
sobre la página que deseas cambiar y escoges la opción Rename.
Paso #2
Asignar posición a la Barra de Navegación en la página dentro de las celdas de los bordes [Share
Borders] para que la misma se repita automáticamente en cada página creada. Aparecerá una pantalla
como la que sigue:
En esta pantalla verificarás si la opción Link Bars está seleccionada en la extrema

17. izquierda del recuadro. En la extrema derecha debe estar seleccionada la opción Bar based on
navigation estructure. Al finalizar presiona sobre el botón de Next.
En esta pantalla seleccionarás la opción de Use Page's Theme. Esto significa que permanecerás con
las imágenes ofrecidas por el tema de tu página. Al finalizar presiona en Next.
En esta pantalla seleccionarás la posición de la barra de navegación. Escoge la que mejor
corresponda a tus necesidades. Al terminar seleccionarás la opción Finish.

18. Para las propiedades de la Barra de navegación sería pertinente escoger las opciones de Child
pages under home, Home page y Parent page. Estas opciones amplían los enlaces de tu navegador.
¿Cómo crear enlaces?

19. Enlaces Internos: Enlaces hacia páginas que perteneces a tu “website”
1. Selecciona la palabra o imagen que quieras utilizar de entrada al enlace
2. Presiona con el botón derecho del mouse
3. Escoges la opción“Hyperlink”
4. Luego presionas sobre el archivo hacia donde se dirigirás el enlace
Enlaces Externos: Enlaces hacia otras páginas web fuera de tu “website”.
1. Sigues los primeros tres pasos
2. Escribes la dirección de la página que quieres enlazar en la sección URL
Enlaces hacia un email: escribes la dirección de email, una vez presionas enter automáticamente se
creará el vínculo hacia el email.
Enlaces hacia un email desde una imagen:
• Seleccionas la imagen que deseas enlazar
• Presionas sobre el botón hyperlink
• Presionas sobre el icono “mail to”
• Escribes el email y presionas en ok.

20. Enlaces dentro de una misma página:
1. Primero tienes que insertar un bookmark donde deseas enlazar
• Colocas el cursor donde deseas que
llegue
el vínculo
• Escoges en el menú Insert la opción
bookmark
• Asigna un nombre al bookmark en el
espacio
provisto
• Presionas en ok y listo
• Aparecerá una banderita indicando que allí
colocaste un bookmark.
2. Ahora crea el vínculo siguiendo los primeros tres pasos de los enlaces internos
• Utilizarás la sección Optional/Bookmark seleccionas el nombre que le pusiste al
bookmark y
listo.

21. Crear una tabla
Para insertar una tabla, busca la opción de Table en la barra
de navegación, Table/Insert/Table
En la pantalla de Insert Table
seleccionarás las opciones que
mejor
dibujen la tabla que necesitas.
Puede
escoger la cantidad de columnas y
líneas, el ancho de los bordes, el
abarque de la tabla (Specify width).
Editar la tabla
• Añadir filas o columnas
1. Presiona con el botón derecho del mouse
2. Escoges la opción de Split Cell
3. Defines en la misma la cantidad de celdas que deseas organizar
Nota: Si quieres controlar donde exactamente se colocará la fila o columna activa
la
función por medio del menú de tablas: Table/Insert/Row or Columns

22. Guardando la página web
Desde un inicio estás guardando tu página. Si deseas grabarla en un disco
transportable, busca el archivo en la computadora y cópialo o arrástralo hacia tu
disco.
Nota: si deseas cambiar el título a la página: das clic en “Change” te aparecerá una
ventana como la que sigue donde colocarás el título deseado, luego das clic en OK.
El título de la página es importante porque entre otras cosas, es lo que aparecerá en
tu barra de navegación y banner, si es que colocas alguno.
Nota: Es importante que te asegures que guardas las imágenes en la misma carpeta
donde esta tu “Website”, preferiblemente en la carpeta “image”.