Mi primera Web

• LA PANTALLA• EL NAVEGADOR• EL LENGUAJE• EL ASISTENTE• EL SERVIDOR• MÁS OPCIONES

LA RESOLUCIÓN DE PANTALLA

• La Resolución de pantalla está determinada por sus dimensiones en píxeles.

• La mayoría de sitios Web han sido concebidos para

800x600 píxeles.

La Pantalla y la Página .1La Pantalla y la Página .1

LA PANTALLA Y LA PÁGINA .1

• Para que nuestra Web sea vista correctamente en la mayoría de los ordenadores de usuarios, y al igual que hacemos en el Word en Configuración de página en cuanto a los márgenes del folio impreso y en Vista preliminar antes de imprimir:

• Optamos por incluir todo el contenido dentro de una Tabla

• Le damos un ancho de 780px y la vamos a situar en el centro de la Pantalla (La resolución media es de 800x600px)

• Al fondo de Pantalla le daremos un color característico

• Y le damos un margen superior de 5px La Pantalla y la Página .2La Pantalla y la Página .2

LA PANTALLA Y LA PÁGINA .2

• No hacer tan ancha la página que se necesite usar la barra de desplazamiento horizontal.

• Ni tampoco muy larga sin Índices o barra de navegación para ir con vínculos a los sitios o capítulos deseados y volver.

• De ser posible, si la página tiene más de tres avances de páginas, se aconseja hacer nuevas páginas Web vinculadas.

• Los Navegadores permiten ver las Páginas Web de un contenido tan extenso en ancho y largo casi infinito, lo que no seria cómodo para el usuario.

EL LENGUAJE Y EL CÓDIGO FUENTE

• El lenguaje HTML es el usado por las páginas Web y reconocido por la World Wide Web (www).

• Es un código para la descripción lógica de documentos.

• Los Navegadores interpretan este código para representar la página Web en pantalla.

• Es bueno conocer el lenguaje HTML, siempre se necesitará entrar en el Código fuente para introducir modificaciones. Aunque se recomiende usar un Asistente editor de páginas Web.

El Lenguaje y el Bloc de NotasEl Lenguaje y el Bloc de Notas

EL LENGUAJE Y EL BLOC DE NOTAS

Ejemplo de una página Web desde el Bloc de Notas y archivo a guardar con extensión htm o html, para ser abierto por el navegador.

EL ASISTENTE

• FrontPage es el asistente de microsoft.com para editar páginas Web sencillas.

• Macromedia Dreamweaver es el asistente de macromedia.com para proyectos complejos.

• Hay otros asistentes como Netscape Composer, Adove GoLive, StarOffice, Nvu, etc.

Es la herramienta que facilita la construcción de una página Web, insertando imágenes, textos y sonidos con su lenguaje HTML o Código fuente automáticamente.

EL NAVEGADOR

• El Navegador es un programa para visualizar las páginas Web.

• Internet Explorer se incluye con Windows.Google Chrome, Netscape, Mozilla, etc. Son otros navegadores.

EL SERVIDOR

• Es el que almacena las páginas Web de los clientes, a través del cual se pueden conectar con todos los usuarios del mundo que lo deseen.

Europa Asia

África América

Oceanía

Algunos Servidores oProveedores de Internet:

-Galeón

-Blogger -Jazztel

Mi primera WebOpciones Avanzadas

• Imágenes

• Sonidos

• Hipervínculos

• Estructura

• Tablas

• Textos

Para ver Comentario final: Clic en el PCPara ver Comentario final: Clic en el PC

ESTRUCTURAS MÁS COMUNES

Desarrollo de tres opciones

Logotipo y Título

Barra de Navegación

Contenidode la

Portada

Logotipo y Título

Bar

ra d

e N

aveg

ació

n

Contenidode la

Portada

Logotipo y Título

Bar

ra d

e N

aveg

ació

n Contenidode la

Portada

y de lasdemás páginasdel contenido

Marcos. Logo y Barra fijosCada página en nueva ventana

1 2 3

Cada página en nueva ventana

En una Página Web, la importancia la tiene su Contenido.Pero la Portada es el tema al que hay que dedicar más tiempo.....

En una Página Web, la importancia la tiene su Contenido.Pero la Portada es el tema al que hay que dedicar más tiempo.....

Las Portadas

La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!

La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!

Las Portadas

La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!

La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!

1.- Barra de navegación arriba

• Por ser una Web sencilla y de pocas páginas, la estructura de la Portada lleva entre el Título y el Contenido un Índice o barra de navegación con Enlaces a las demás páginas de la Web

Logotipo y Título

Fotos - Enlaces

Contenidode la

Portada

Página decontenido

Mis Enlacespreferidos

Página decontenidoMis Fotos

Todas las Páginasse abren en una nueva Ventana

Página 4

Página 3Página

2

2.- Barra de navegación a la izquierda

Logotipo y Título

Pág.1Pág.2Pág.3Pág.4Pág.5......

Contenidode la

Portada

• Por ser un sitio Web con más páginas, la estructura de la Portada lleva a la izquierda la barra de navegación con Hipervínculos o Enlaces a las demás páginas de la Web

Página 1 Todas las Páginas, incluido la

Portada, se abren en una nueva Ventana

Todas las Páginas, incluido la Portada, se abren en una

nueva Ventana

3.- Marcos. Título y Barra fijos

• La Portada consta de tres marcos, dos son fijos y uno que es el principal es donde aparecerán las páginas de la Web

Logotipo y Título

Pág.1Pág.2Pág.3Pág.4Pág.5......

Contenidode la

Portada y detodas las páginas

de la WebTodas las Páginasse abren dentro del marco principal

Puede constar también de dos marcos dentro de la misma ventana

HIPERVÍNCULOS

1.- INTERNOS: Dentro de un sitio Web desde la Portada a las distintas páginas y viceversa:

<a href=“poesias.htm”>Mis Poesías</a>

2.- EXTERNOS: Desde un sitio Web y para facilitar con un solo clic el acceso a sitios preferidos: <a href=“http://www.rae.es”>Real Academia Española</a>

3.- ANCLAJES: Dentro de una página, si ésta es algo larga, se ponen desde un Índice con los temas o capítulos a donde queremos ir:

<a href=“#capitulo_1”>Capítulo 1- Historia</a>Y en el capítulo: <a name=“capitulo_1”></a>

TABLAS

• Todos los contenidos de una página Web se encuentran mejor organizados y en posiciones exactas si usamos para ellos las Tablas ocultas de HTML.

• El código fuente de una tabla sencilla es así:

<table><tr><td>Contenido</td></tr></table>

Estas etiquetas son del lenguaje HTML. En las Propiedades de la Tabla tenemos todas las opciones de tamaño, situación, color, borde, etc.

TEXTOS

Todos los textos que se incluyen en la página Web están configurados a través de las Fuentes disponibles en el lenguaje HTML del Asistente del constructor de la página.

Las fuentes del proyecto Web son interpretadas por los Navegadores instalados en los PC de los usuarios y de no disponer de las mismas, emplean fuentes predeterminadas.

<font face=“Arial”>Tipo Arial</font><font color=“blue”>Color azul</font><font size=“2”>Tamaño 2</font>

Lenguaje HTMLpara las fuentes

de los Textos

Lenguaje HTMLpara las fuentes

de los Textos

IMÁGENESLas imágenes a instalar en la página Web deben ser:

• De pequeño tamaño en KB para que la descarga sea rápida.

• De dimensiones adecuadas para ser vistas en pantalla sin usar barras de desplazamiento.

Lenguaje HTMLde Imágenes

Lenguaje HTMLde Imágenes

<img src=“domino.gif” width=“135” height=“121” alt=“Seis doble” />

SONIDOS

Código fuente de una página Web con sonido en

el Asistente FrontPage

Código fuente de una página Web con sonido en

el Asistente FrontPage

Se pueden insertar sonidos de fondo de una página Web. En el ejemplo y desde FrontPage, se ha puesto un corto sonido para oírse una sola vez al abrir la página. El mismo que hemos incrustado aquí.

El navegador solo podrá reproducir los formatos que reconozca.

El navegador solo podrá reproducir los formatos que reconozca.

CONCLUSIONES

Algunos trabajos del Autor:

www.centrodiamayorejido.blogspot.comwww.centrodiamayorejido.galeon.com

www.centroadultos.galeon.com www.mayoresvelez.galeon.com

www.mayoresejido024.blogspot.com

Algunos trabajos del Autor:

www.centrodiamayorejido.blogspot.comwww.centrodiamayorejido.galeon.com

www.centroadultos.galeon.com www.mayoresvelez.galeon.com

www.mayoresejido024.blogspot.com

Esta Presentación tiene como objetivoorientar a los iniciados e interesadosen el tema, de forma clara y breve.

Sin olvidar el apoyo necesario de la Biblioteca especializada, los cursos gratis on-line

y el tiempo de prácticas.

jesus1056@yahoo.esjesus1056@yahoo.es