1er.tutorial

martes, 14 de septiembre de 2010

CREANDO UNA PAGINA HTML EN DREAMWEAVER


INDICE


1. Introducción a los sitios web

2. ¿Cómo comienzo a crear una página web?

3. ¿Qué necesito para crear una página Web?

4. ¿Qué es dreamweaver?

5. Introducción de HTML

6. ¿Qué es HTML?

7. ¿Qué es una página web?

8. ¿Tipos de página web?

a. Página web Informativa

b. Página web Multimedia

9. Creando una página web multimedia.


DESARROLLO

1. Introducción a los sitios web

Como se sabe el uso de páginas web es globalizado, ya que, todo el mundo usa, accede, compra, las páginas web. Esto porque, las páginas web son de mucha ayuda, ya sea, para la comercialización de productos, ventas, como páginas de consultas como la de SUNAT.

Existen páginas dinámicas como las de youtube en la cual podemos colgar videos hechos por uno mismo, al igual que encontramos paginas de donde podemos bajar música variada, ya sea, música actual o antiguas. También encontramos páginas web sociales como las de hi5, facebook, twiter, sónico, etc.; las que se usa para colgar fotos, para conversaciones on-line, dejar comentarios, invitaciones de amistades aunque no se los conozca. Usar las páginas web para crecer como empresa, porque, gracias a la web nuestra publicación que se haga será visto no solo en la localidad sino que también se verá en otros países, continentes, e incluso se le puede poner un traductor de idioma a nuestra web para que los usuarios de otros países que manejan otra idioma lo puedan traducir y saber de nuestra web.

En conclusión el uso de páginas web en la actualidad es global, usado por todo el mundo para distintos fines sociales, informativos como foro, blog, comerciales, dinámicos o multimedia. La web y el uso del internet son una gran ventaja para todos.

2.- ¿Cómo comienzo a crear una página web?

Para comenzar se necesitan los siguientes puntos:

· Un editor de texto o un software de programación web:

o Este editor o software es para la programación de nuestra web, es en donde vamos a codificar nuestra web.

· Un explorador o un navegador:

o El explorador es para la visualización de nuestra web, para ver paso a paso nuestro avance de la pagina, para realizar cambios, pruebas al insertar imágenes o videos.

o En el navegador se carga muy rápido y además es el programa que se abrirá por defecto desde el navegador.

3.- ¿Qué necesito para crear una página Web?

Lo primero que debes tener claro es qué contenidos va a tener tu página.

Por ejemplo, si vas a hacer una página sobre tu Centro de Estudio:

¿Qué vas a poner?

Las enseñanzas que llevas o que se dictan.

Los proyectos que estás llevando.

Un poco de historia del centro de estudio.

Las actividades que se realizan, de forma interna como su aniversario o externa como servicios a la sociedad, etc.


Una vez decidido esto…

¿Qué necesitas?

Lo primero es que se necesita es el tiempo para la instalación, codificación, visualización, pruebas para la realización de nuestra página.

Además necesitarás:

Un navegador:

Tenemos al más común al Internet Explorer, otros exploradores tenemos al Firefox Mozilla, Google Chrome que también nos sirven para la visualización; en este caso vamos a usar el Internet Explorer.

Un Software de programación web:

Tenemos el más común al programa Dreamweaver, otros software tenernos al Eclipse, Zend, Net Beans, que también sirven de programación web; en este caso vamos a elegir el programa Dreamweaver.

Un editor de HTML, incluso se puede usar al block de notas, pero con la diferencia que al momento de guardar el archivo se deberá guardar con extensión .html. Por ejemplo si nuestra página se llama “mi primera web” entonces lo guardamos de esta manera: “mi primera web.html”.

Hacer las fotos que vas a poner y escanearlas (esto suele llevar bastante tiempo si no se ha hecho antes) Puedes hacerlo en el CPR. Un programa gráfico para retocar las imágenes, mira en la página de imágenes. Espacio en un servidor que albergue la página. Si tienes cuenta en el PNTIC puedes subir unos 250 KB, que son suficientes para una página sencilla Un programa para subir la página al servidor, puede ser el WS_FTP que localizarás en http://www.ipswitch.com Dar de alta la página en algunos buscadores (Alta Vista, Olé, etc.) y también en el PNTIC si la página está relacionada con la educación. Si no haces esto, solamente podrán visitar tu página quienes conozcan la dirección exacta.

Y sobretodo bastante tiempo para el mantenimiento de la página: comprobar los enlaces, actualizar las fotos, el contenido, etc.

4.- ¿Qué es dreamweaver?

Es una aplicación en forma de estudio (basada en la forma de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basadas en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium


5.- Introducción de HTML


El HTML (HiperText Markup Language) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Además de texto normal incluye también, elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.

Otra característica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas.


En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdo en el estándar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no así Netscape, que implementa etiquetas propias, de modo que las páginas no se visualizan igual en el Navigator y en el Explorer.


Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo (negrita, cursiva, etc.), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc. Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta

El nombre de la etiqueta y sus atributos se colocan entre los símbolos <> y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.

Por ejemplo:

Si escribimos:


< color="#ff0000" size="2">> El texto se verá rojo y en tamaño un poco menor de lo normal <>/font>


Se verá de la siguiente manera:


El texto se verá rojo y en tamaño un poco menor de lo normal

6.- ¿Qué es HTML?


Siglas de HiperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.


7.- ¿Qué es una página web?


También conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio Web. Su principal característica son los hipervínculos de una página, siendo esto el fundamento de la Web.


8.- ¿Tipos de página web?


Existen 2 tipos de páginas web:


a) Informativa


b) Multimedia


a) Página web informativa


Una página Web informativa está compuesta principalmente por información, es decir, sólo texto, en la cual, no se encuentra ningún tipo de video o alguna aplicación que permita al usuario visitante el interactuar con la página.

Ejemplo de página informativa:



b) Página web multimedia


Una página Web multimedia está compuesta por material animados, así como, imágenes en movimiento, GIF, videos, hiperenlaces, juegos, además puede contener o asociar datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas para hacerla interactiva.


Las páginas Web son escritas en un lenguaje de marcado que provea la capacidad de manejar e insertar hiperenlaces, generalmente HTML.

Ejemplo de página multimedia:



9.- Creando una página web multimedia

Paso A. Primero instalamos el software de programación dreamweaver...




Luego nos encontraremos con la pantalla de bienvenida.


Paso B. Ahora estamos frente a la interfaz del programa dreamweaver.

Paso C. Ahora de las opciones que encontramos, seleccionamos la opción HTML.

Paso D. Al terminar de cargar, nos encontramos con nuestro ambiente de desarrollo.


Paso E. En una página HTML básica podemos hacer muchas cosas, como insertar imágenes, además de escribir, le podemos agregar un formato especial a eso que escribimos, color a la página, etc. Para hacer la página que queremos hacer, es algo sencillo.


Paso F. Una vez codificado nuestra web... lo guardamos... luego haremos observación en nuestro explorador ya sea mozilla o Explorer....