¿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).

¿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 dominiohttp://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 estahttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlOtros historiadores afirman que la primera en publicarse fue estahttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/News/9201.html

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

¿Cuáles son los programas más utilizados para crear una

Pagina Web?GeneralesSon 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ñoProgramas 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ónEstá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 HTMLEstos 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.

¿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.

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 Se constante en términos de diseño en todas las páginas Esmérate en hacer la página principal (index). De esta depende que las personas se

queden o no leyendo el resto de tus páginas.

Inicio Accesando FrontPage

Presiona el icono que representa el programa en la pantalla de tu computadora obú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 acrear tu website. Pero antes te recomendamos lo siguiente:

Crear una carpeta para tu website

Presiona en el menú File/New. Escoge laopción Page or Web...

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

Automáticamente el programa direcciona tu web en el directorio “My Document” y le asigna un nombre “Web1”:

C:\My Document\My Web\Web1

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 Document\My Web\nombre

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.

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 yaestablecidos por Front Page. Elprograma te permite hacer cambios aestos temas y grabar los mismos deforma personalizada. Presiona enFormat/ Theme. En Theme procuraescoger la opción de All Pages paraserciorarte de que se repita en cadapá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.

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 puedastener mayor control sobre la página.

Para hacerlo, selecciona en la barra deherramientas la opción Table/Insert/Table o ve directamente al icono de tables

Puedes escoger la cantidad de líneas ycolumnas, escoger el porcentaje, elalineamiento, la definición de lostamaños de los bordes, espacios delos espacios. El Set as default for newtable te permite mantener el mismoorden 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.

¿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 Internet2. Sobre la imagen, presionas con el botón derecho del mouse3. Escoges la opción “copy” y la grabas en un disco externo o interno en tu computadora.4. Regresas a FrontPage5. Ubicas el cursor donde quieras colocar la imagen6. Presionas en Paste

¿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]

• 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

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.

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?

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.

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.

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 Tableseleccionarás las opciones que mejordibujen la tabla que necesitas. Puedeescoger la cantidad de columnas ylíneas, el ancho de los bordes, elabarque 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

Guardando la página web

Desde un inicio estás guardando tu página. Si deseas grabarla en un discotransportable, busca el archivo en la computadora y cópialo o arrástralo hacia tudisco.

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”.