PRESENTADO POR:

PÁGINA WEB

LIDIA PAUCAR

INSTITUTO DE EDUCACION SUPERIOR TECNOLOGICO PUBLICO “MANUEL

SCORZA TORRE”

PRINCIPIOS

Una página web, página electrónica o ciberpágina

, es un documento o información electrónica capaz de contener texto, sonido, vídeo,

Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la Word Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).

CARACTERÍSTIC

AS Y TIPOS

DE PÁGINA

WEB

Una página web está compuesta principalmente por información (sólo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o

asociar hoja de estilo, datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas para así permitir interactividad.

INFORMACIONHIPERENLACE

PÁGINAS ESTATICAS VERSUS PAGINAS DINÁMICAS

En el caso de las páginas estáticas, al acceder el usuario, el servidor descarga simplemente un simple fichero con un contenido codificado en HTML que se visualiza a continuación en su navegador. Un proceso muy similar a la descarga de cualquier fichero, por ejemplo un documento PDF.

El principal problema de estas páginas es que no permiten la interacción con el usuario, equivalente a una colección de documentos invariables, como un libro, en la web.

Las páginas dinámicas que se generan al momento de la visualización. No son un simple documento HTML, sino que se están creadas en algún lenguaje interpretado. El ejemplo más popular es PHP, el lenguaje en el que están programadas aplicaciones muy populares como WordPress o Media Wiki, el software en el que está implementado la propia Wikipedia. Aquí la web interactúa con el usuario y es necesario que componga las páginas de manera dinámica.

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

Lenguajes de Programación

WEB

El lenguaje HTML consta de una serie de comandos u órdenes que los navegadores pueden interpretar, por lo que puede decirse que una página web es un documento donde se escriben contenidos y una serie de instrucciones para indicarle al navegador como debe mostrarlos.

A través del lenguaje HTML podemos comenzar los primeros pasos en el diseño web. Tal como se describe en conceptos básicos sobre HTML, para comenzar a realizar nuestras primeras prácticas solo es necesario emplear un editor de texto y un navegador.

Espacio para el texto El Lenguaje HTML

El lenguaje HTML está compuesto por etiquetas que no son más que instrucciones que le indican al navegador qué hacer

A la mayoría de las etiquetas HTML se le puede agregar atributos y un valor para éste. Para poder comprender mejor estos conceptos, daremos un ejemplo sencillo. La etiqueta produce una línea horizontal que se extiendo por todo el ancho del documento y que tendrá un grosor de 1 píxel. Sin embargo, es posible crear líneas de distintos grosores empleando esta etiqueta, para lo que deberemos agregar el atributo SIZE, al que le podremos dar el valor que deseemos

Al igual que el lenguaje HTML, el lenguaje CSS solo requiere el empleo de un editor de texto simple y un navegador, si bien es cierto que resultan de mucha utilidad algunos programas que están creados exclusivamente para crear hojas de estilo. HTML y CSS son lenguajes complementarios, ya que, a pesar de que pueden realizarse páginas web sólo con HTML, esto no es lo más conveniente ni lo más aconsejable, la presentación visual del sitio dejará mucho que desear.

Espacio para el texto El Lenguaje CSS

El lenguaje CSS se emplea exclusivamente para definir cómo se va a presentar el contenido de la página. Esto puede llevarse a cabo dentro del documento HTML, dentro de cada etiqueta de ese documento o bien como parte de un documento anexo a la página web.

Espacio para el texto El

Lenguaje JavaScript

Al igual que HTML, JavaScript es un lenguaje de programación que se puede utilizar para construir sitios Web y para hacerlos más interactivos.

Aunque comparte muchas de las características y de las estructuras del lenguaje Java, fue desarrollado independientemente. El lenguaje JavaScript puede interactuar con el código HTML, permitiendo a los programadores web utilizar contenido dinámico. Por ejemplo, hace fácil responder a los acontecimientos iniciados por usuarios (como introducción de datos en formularios) sin tener que utilizar CGI.

Espacio para el

textoPrincipios para Diseñar

una

Los principios que rigen el diseño web son:

Balance – Es el equilibrio que debe existir entre los diferentes elementos que componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras y claras, etc., deben estar balanceadas de forma tal que la página no solo resulte atractiva, sino que además logre enfocar la atención del usuario

Espacio para el

textoPrincipios para Diseñar

una

Los principios que rigen el diseño web son:

Balance – Es el equilibrio que debe existir entre los diferentes elementos que componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras y claras, etc., deben estar balanceadas de forma tal que la página no solo resulte atractiva, sino que además logre enfocar la atención del usuario

Contraste – El contraste es una forma de distinguir los elementos que deseamos resaltar. Diferencias en la tipografía, diferencias en las formas (círculos, cuadrados, rectángulos, etc.), diferencias de tamaño (una imagen más grande con otras más pequeñas, por ejemplo), texturas y fondos diferentes, etc., son algunos de los contrastes que pueden emplearse para enfocar la atención del usuario sobre los elementos más importantes de la página

Énfasis – Es una forma de distinguir algo dentro de un elemento. Un ejemplo de esto es lo que sucede con este texto, donde los títulos se encuentran resaltados así como algunas palabras o frases, de forma que facilita la comprensión de lo que se quiere transmitir.

Repetición o ritmo – El ritmo o repetición es una forma de establecer patrones con los que se ordenan los elementos de la página. Si los elementos de una página web siguen un patrón determinado, es mucho más sencillo para las personas comprender el contenido y acceder a la mayor parte del mismo en poco tiempo. Este punto es clave para mantener la usabilidad del sitio.

Proximidad o unidad – Este concepto se refiere a colocar juntos o próximos los elementos que estén relación

Espacio para

el text

oPÁGI

Si bien podrías hacer una página web sin aprender HTML, inevitablemente tendrás problemas en algún punto, sea cual sea el tipo de editor de páginas web que uses, y tendrás que saber HTML para arreglarlos. Hay muchos sitios web en los que podrás aprender HTML, pero el

Espacio para

el text

oPÁGI

Espacio para el textoProcedimientos Fundamentales a seguir:

Si bien podrías hacer una página web sin aprender HTML, inevitablemente tendrás problemas en algún punto, sea cual sea el tipo de editor de páginas web que uses, y tendrás que saber HTML para arreglarlos. Hay muchos sitios web en los que podrás aprender HTML, pero el

1Comprende lo que es el HTML. Este es el lenguaje de codificación con el cual se hacen las páginas web. Para ver cómo luce, ve a Internet Explorer y haz clic derecho para seleccionar "Ver código fuente de la página". Verás una página con códigos: eso es el HTML. El código es lo que ve el navegador para interpretarlo y armar una página web.

En Google Chrome, presiona "F12". En Mozilla Firefox, presiona "Ctrl+U" para ver el

código fuente de la página. En Safari, selecciona Ver > Ver fuente (u

"Opción+Comando+U"). En Internet Explorer, la opción del menú "Ver" que

deberás elegir es "Origen".

2Comienza con una página lo más sencilla posible, sino te verás abrumado por la sintaxis y los lenguajes de script.

Es importante recordar que estarás escribiendo la información entre una etiqueta de apertura y una de clausura, ambas de HTML. Una etiqueta de apertura se verá así: <____>. Una etiqueta de clausura se verá así: </____>. Al final, reemplazarás el "____" por un código.

2Comienza con una página lo más sencilla posible, sino te verás abrumado por la sintaxis y los lenguajes de script.

Es importante recordar que estarás escribiendo la información entre una etiqueta de apertura y una de clausura, ambas de HTML. Una etiqueta de apertura se verá así: <____>. Una etiqueta de clausura se verá así: </____>. Al final, reemplazarás el "____" por un código.

3Ve a Inicio > Programas > Accesorios > Bloc de Notas. Será mucho más fácil si usas el Bloc de Notas++ (lo puedes descargar gratis por Internet). Cuando hayas elegido el lenguaje HTML, todo lo que escribas estará automáticamente conectado con diversos colores, de esta manera será muchísimo más fácil corregir posibles errores.

4 Dile al navegador qué lenguaje vas a usar. Escribe <html>. Esta es la primera etiqueta que deberás escribir, la cual le indicará a la computadora que empezarás a hacer una página web. También se cerrará al final, así que al final del documento, ciérralo con <>. Esto finalizará la página web.

5Añade el encabezado (head) de la página como se muestra en el gráfico.

6 Ponle un título a la página. El título es importante, porque les dará a los usuarios una idea del tema de la página. Además, cuando los usuarios le pongan un marcador al sitio, el título es lo que único que verán en su lista de marcadores. El código HTML para el título es: <title>. Ciérralo al final del título escribiendo </title>. El título solo se mostrará en la pestaña, no será el título de la página en sí.

la etiqueta </body>. La información para la página web irá entre <body> y </body7 Haz el cuerpo de la página. Escribe <body> para abrir la etiqueta del cuerpo. Luego ciérrala con >.

Para darle un color de fondo a la página, podrás añadirle un estilo al cuerpo. En vez de solamente escribir, escribe <body style="background-color: silver">. Podrás probar con un color distinto o incluso con un código hexadecimal. Las palabras entre comillas se conocen como "atributos". ¡Deberán estar rodeados por comillas!

8 Escribe unas cuantas

líneas de texto entre las etiquetas de cuerpo.

Para que el texto siga en la línea siguiente (como si presionaras "Enter" en el teclado), escribe: <br>.

¿Quieres añadir alguna

8 Escribe unas cuantas

líneas de texto entre las etiquetas de cuerpo.

Para que el texto siga en la línea siguiente (como si presionaras "Enter" en el teclado), escribe: <br>.

¿Quieres añadir alguna

9 Añade algunas imágenes. Si quieres colocar alguna imagen de Internet a tu página web, el código HTML para las imágenes será: <img src="URL">. La etiqueta de clausura es: </img>, pero es opcional.

Revisa todo para asegurarte de que todas tus etiquetas estén cerradas. Tu página web deberá verse algo así:

<title>Mi página web</title><body bgcolor="yellow">Me encanta wikiHow porque<marquee>¡es la mejor página del mundo!</marquee><img

http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif

PAGINA WEB Con

Dreamweav

er Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo

EL ENTORNO DE TRABAJO

Las barras

La barra de título contiene el nombre

del programa (Macromedia Dreamweaver 8) y

seguidamente el nombre del documento que

aparecerá en el explorador y entre paréntesis, su

ubicación y el nombre del archivo en formato html.

En el extremo de la derecha están los botones

para minimizar,

La barra de menús contiene las

operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por

ejemplo, veremos las operaciones relacionadas

La barra de título contiene el nombre

del programa (Macromedia Dreamweaver 8) y

seguidamente el nombre del documento que

aparecerá en el explorador y entre paréntesis, su

ubicación y el nombre del archivo en formato html.

En el extremo de la derecha están los botones

para minimizar,

La barra de menús contiene las

operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por

ejemplo, veremos las operaciones relacionadas

La barra de herramientas de documento contiene iconos para ejecutar de

forma inmediata algunas otras operaciones

habituales que no incluye la barra de herramientas

estándar. Estas operaciones son las de

cambio de vista del documento, vista previa,

de las operaciones más

habituales, como Abrir   , Guardar La barra de

herramientas estándar contiene iconos

para ejecutar de forma

inmediata algunas , etc.

La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta<body>).

También nos es posible alternar entre los modos

de selección, mano (para arrastrar la página), o zoom. En

cualquier momento puedes seleccionar el zoom preferido desde el desplegablezoom y ajustar la vista al porcentaje

preferido (por defecto siempre

Los Paneles E

Inspectores

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.

Así mismo se tiene que trabajar….

Imágenes, Tablas, Marcos, Formularios, Multimedia, Las Plantillas, HTML desde Dreamweaver, Capas, Comportamientos, Estilos CSS, Sitios Remotos, Servidor de Pruebas, Páginas Dinámicas, Crear un Blog, XML y RSS, AJAX y Spry Framework