Creación de páginas web

21. Guia de estilo

2006-06-26T10:34:00.000+02:00

A lo largo de mi deambular por Internet, he ido desarrollando pequeñas manías y visto o creido ver defectos en las páginas web. Sin embargo, después de leer un par de cursos de HTML y alguna que otra guía de estilo, me he dado cuenta de que la mayoría de la gente parece pensar como yo.

Así pues, este capítulo consiste en una serie de consejos que te pueden servir para hacer tu página más atractiva y de mayor calidad. Es recomendable leerla aunque luego no la sigas al pie de la letra: te pueden dar una idea de lo que debe ser una web.

21.1. Contenido

Cualquier página será visitada si su contenido es interesante. Casi da lo mismo su estructura y diseño si la información es lo suficientemente interesante. Así que quizá sea conveniente detenernos un poco en qué es lo que debe tener nuestra página web.

En Internet uno visita lo que quiere, y la mayoría de las veces lo que a la gente le interesa y lo que a nosotros nos interesa que vean no es lo mismo. Así pues, el mejor modo de conseguir que vean lo que queremos es ofrecerles lo que quieren. Un ejemplo lo tienes en mi página personal. En ella pongo cosas que me interesa poner a mí pero que de por sí sé que no tendrían mucha difusión: mis relatos, mis canciones, etc... Pero también incluyo estos cursos de diseño web, que sé que le interesan a mucha gente.

De todas maneras no hay que engañarse: los contenidos que te interesa que la gente conozca y que no sean "populares" no serán visitados más que por una pequeña parte de los interesados por los contenidos "populares". Pero siempre lo serán más que si no lo hubiéramos hecho.

El averiguar qué poner es fácil. Prácticamente todo el mundo tiene algún hobby, alguna pasión, o domina algún tema bastante por encima de la media. Sobre ese tema deberá estar enfocada su página. Porque, para qué engañarnos: a nadie le interesan esas páginas personales que sólo contienen tres fotos del autor, una de su novia y otra de su perro, junto con la historia de su vida y un curriculum y una serie de enlaces a páginas de sus amigos.

Conviene también, sabiendo que el usuario ha acudido a tu página por el interés hacia un tema específico, facilitarle enlaces a páginas similares. Te lo agradecerá.

21.2. Navegación

Es muy importante que sea sencilla e intuitiva la navegación por las páginas que componen tu web. Dependiendo del tamaño de la página no se debería tardar más de tres toques de ratón en ir de una página a otra. Sin embargo, esto no se debe conseguir por medio de una saturación de enlaces porque el usuario podría perderse.

Hay muchas maneras de conseguirlo. La primera es utilizar un marco como índice, que siempre nos permitiría acudir a las seciones principales en nuestra web. También resulta útil incluir enlaces a la página principal y a la página principal de la sección que el usuario está consultando.

En definitiva, no hay receta única, pues el éxito de tu sistema de navegación depende en buena medida de los contenidos y estructura de tu web. Resulta útil ver a alguien ajeno a su desarrollo navegar por ella sin darle ninguna clase de pistas: en general se pueden ver con facilidad los mayores problemas que pueda tener.

Sin embargo, hay algo que siempre irrita al usuario: enlaces a páginas vacías o con un gráfico que señale que esa página está en construcción. Si te lleva tiempo desarrollar una sección pero quieres que los usuarios sepan que estará ahí colocala con las demás en la lista de enlaces, pero que ella no tenga. Que se vea el nombre aunque no lleve a ninguna parte.

21.3. Estructura de las páginas

Es fundamental a la hora de ponerte a crear páginas el pensar en una estructura común y consistente, porque facilita la navegación y le confiere personalidad propia. Esa estructura puede estar dada por una manera común de titular las secciones, un fondo, un logo, una manera común de colocar gráficos y texto, o una combinación de todo esto.

Hay que cuidar la longitud de las páginas: que no sean ni demasiado cortas ni demasiado largas (como esta). La página debe contener información suficiente para resultar interesante y no tanta como para desanimar al posible lector.

Recuerda que el título que le pones a tu página es por lo que se la conocerá por el mundo. Es lo que guarda el navegador en su índice de marcadores, favoritos o bookmarks. Por ello, es conveniente que sea significativo y pueda ser entendido fuera de contexto.

Conviene que el primero párrafo o las primeras frases de todas las páginas contengan un resumen o idea del contenido del resto de la misma. Eso ayuda al usuario a localizar más fácilmente la información.

A su vez, resulta bastante útil indicar la fecha de la última modificación de la página, aunque es aún mejor si esa fecha hace referencia a la última modificación del contenido, que al fin y al cabo es lo que le interesa el usuario.

Por último, uno de los aspectos más importantes de Internet como medio es la facilidad de comunicación entre creadores y usuarios: facilitala incluyendo tu dirección de correo. Si crees que puede ser interesante, ayuda y anima al usuario con formularios o libros de visita.

21.4. Accesibilidad

Hay que tener en cuenta que, en general, no sabes con qué navegador visitarán tus páginas. Ni cómo estará configurado. Ni la resolución del monitor. Ni la potencia de su CPU. Ni siquiera si el navegador es capaz de ver gráficos. Y como se supone que la red es algo de lo que debe poder disfrutar todo el mundo conviene hacerla accesible.

Para ello hay que tener en cuenta algunas cosas. Para empezar, que las páginas siempre se ven distintas dependiendo del navegador que usemos. Conviene no usar elementos que sólo funcionen con un navegador, como puede ser el texto parpadeante o las marquesinas. Y siempre será bueno probar con más de un navegador las páginas: no siempre representan igual las mismas etiquetas.

Hay gente que viaja por la red con navegadores en modo texto o que, debido a la lentitud de su conexión, configuran su navegador para que no cargue los gráficos. Por ello, conviene añadir siempre el parámetro ALT a todas nuestras imágenes. También, y por la misma causa, conviene dar una alternativa en texto de nuestros mapas.

Es aconsejable probar nuestras páginas a la resolución mínima de 640x480 y comprobar que se puede ver y navegar con relativa comodidad. Es desgraciadamente frecuente ver marcos índice diseñados para verse a 800x600 y que impiden cambiarlos de tamaño y se han eliminado las barras de desplazamiento.

Es convieniente no abusar de los applets Java ni hacer de ellos un elemento imprescindible en nuestra web. A gente con pocos recursos en potencia de CPU o usuarios de Windows 3.1 no les resulta muy agradable estas aplicaciones.

En definitiva, no hacerles la vida imposible a los minusválidos de la red. Eliminar barreras arquitectónicas.

21.5. Diseño

Una página atractiva, con gráficos bonitos y bien escogidos y colocados es algo siempre recomendable. Pero no si, debido a ello, la página tarda dos días y medio en terminar de cargarse. Hay que tener en cuenta que estamos trabajando en un medio llamado Internet que, aunque denominado autopista de la información, en realidad suele parecerse más bien a una carretera comarcal. Así pues, a la hora de diseñar nuestras páginas, deberemos cuidar el equilibrio entre belleza gráfica y tiempo de carga.

Recuerda que el gráfico de fondo no debe dificultar la lectura del texto. Si utilizamos uno oscuro que el color del texto sea claro y viceversa.

Los gráficos animados, en general, resultan muy entretenidos para el autor pero poco útiles para el usuario. No deberían usarse más que para cosas sobre las que realmente quieres llamar la atención (como el uso del texto parpadeante). Si no es así, procura que su tamaño no sea excesivo.

Mientras puedas, evita los gráficos meramente ornamentales. Que tengan algo de utilidad, sea como título o enlace o lo que sea. Luego procura que, además, sean bonitos.

Procura evitar el exceso de líneas horizontales: dan la sensación de una página inconexa y troceada.

Evita la proliferación de marcos. Si pones muchos es posible que el usuario se pierda y no sepa en cuál está cada cosa. Recuerda que sólo puede haber uno con información y todos los demás deben ser auxiliares de este. El marco principal debe destacar sobre los otros por su mayor tamaño.

21.6. Mantenimiento y pruebas

Resulta conveniente que el código sea claro y fácilmente comprensible: así evitas los problemas de no entender cómo hiciste una página en un momento dado, o de no encontrar esa parte que tienes que modificar entre tanto texto.

Resulta conveniente que otras personas prueben tus páginas. Y que cuando las prueben ya están en la red, aunque no sean accesibles más que para los probadores. Hay que cuidar que estos no conozcan previamente las páginas ni hayan tenido que ver con su desarrollo.

Y esto es todo. Que ustedes disfruten creando páginas. ¡Hasta otra!

20. Sonido

2006-06-26T10:33:00.000+02:00

Aún cuando les pueda parecer increíble a algunos hombres de poca fe, es posible escuchar sonidos (o música) desde el propio navegador. Tanto Netscape como Explorer incorporan desde hace tiempo la capacidad de reproducir sonido. El único problema es que los archivos suelen ser grandes y, siendo algo innecesario y superfluo, poca gente incluye melodías en sus páginas.

Los formatos que se puede asegurar que los navegadores reproducirán son los archivos WAV y MID. Para poder reproducir otros necesitarán el plug-in o añadido necesario, como puede ser el Real Audio para los archivos RA o el ModPlug para los MOD y derivados.

20.1. Sonido activado por el usuario

La manera más sencilla de incluir sonidos es dejando al usuario la decisión de escucharlos o no. Para hacerlo incluiremos el sonido en el parámetro HREF de un enlace, como si fuera una página HTML:

<A HREF="hola.wav">Si pulsas te saludo<A>

20.2. Sonido de fondo

Lo del sonido de fondo ya es más complicado, ya que Netscape y Explorer ofrecen soluciones propietarias, distintas e incompatibles de hacer sonar un archivo de fondo.

En Explorer, desde la versión 2.0, se pueden incluir fondos sonoros utilizando la etiqueta BGSOUND:

El parámetro SRC indicará el archivo a reproducir. Esta etiqueta admite tambiñen otro parámetro, LOOP, que indica el número de veces consecutivas que sonará el fichero. Si se indica LOOP="infinite", el archivo se reproducirá indefinidamente, mientras estemos en la página.

Netscape utiliza su etiqueta <EMBED>. Teóricamente, esta etiqueta debería servir para unir objetos de varios tipos a la página web, pero en la práctica sólo se utiliza para esto. Esta etiqueta tiene los siguiente parámetros:

Sin embargo, y debido a algunos bugs, si queremos reproducir infinitamente un archivo con el reproductor oculto, deberemos incluir todos los parámetros, incluyendo WIDTH y HEIGHT. Además, si el usuario tiene algún plug-in de sonido extraño, en lugar del que viene con Netscape, es posible que deje de funcionar correctamente.

Dado que ambas etiquetas son incompatibles entre sí, basta con incluir las dos... o, mejor dicho, bastaba. Ahora el Explorer es capaz de interpretar <EMBED>, pero no exactamente de la misma manera, lo que provoca que aparezca una ventana aparte con el reproductor. En definitiva, la mejor manera de mostrar una música de fondo es usando un pequeño script que averigue en qué navegador está instalado y discrimine.

19. Capas

2006-06-26T10:31:00.000+02:00

Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre deberá ser especificado dentro de la parte principal de la página. Como se puede ver, de nuevo estamos siguiendo la filosofía de separar el contenido y la forma de representarlo.

En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La denominación oficial podría traducirse como "contenido HTML posicionable dinámicamente". Toma ya. Tampoco se las puede considerar dentro de ningún estándar HTML sino de los estándares CSS, pero son la base de lo que se ha dado en llamar HTML dinámico.

Sin duda, lo más importante de las capas es la posibilidad que presentan de ser movidas y modificadas desde un lenguaje de script. Desgraciadamente, las implementaciones de Netscape y Explorer son incompatibles entre sí, por lo que resulta complicado escribir código que funcione en ambas plataformas. Estos temas los estudia en profundidad el curso de HTML dinámico.

19.1. Definición

La única manera común de definir capas en Explorer y Netscape (versiones 4 y superiores cuandos las haya) es mediante hojas de estilo en sintaxis CSS, por lo que será la que usemos de aquí en adelante.

La definición de una capa sigue la misma estructura que la que usabamos para decidir las características de una etiqueta con el parámetro ID:

<STYLE TYPE="text/css"> #micapa {position:absolute; top:100px; left:20px;} </STYLE>

Esto colocaría a la capa que hemos denominado micapa a 20 pixels de la izquierda de la pna y a 100 del comienzo de la misma. Muy bien, pero... ¿donde escribimos lo que queremos que contenga la capa? Utilizaremos para ello la etiqueta <SPAN>:

<DIV ID="micapa"> <H1>El título de la capa</H1> <P>Aquí es donde iría el texto. ... </DIV>

Las capas que hemos definido hasta ahora se colocan en una posición determinada de la página. Pero existe otro tipo de capas llamadas flotantes cuya colocación depende, en cambio, de la posición dentro del código fuente de la página donde las hayamos colocado. Se definen así:

<STYLE TYPE="text/css"> #flotante {position: relative; left: 20px; top: 100px;} </STYLE>

Puedes ver un ejemplo que te mostrará las diferencias entre capas absolutas y relativas.

19.2. Propiedades

Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:

Esto es todo. Si quieres saber algo sobre modificación dinámica de capas desde JavaScript, visita mi curso.

18. Lenguajes de script

2006-06-14T16:35:00.000+02:00

Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace.

Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas CGI.

El primer lenguaje de script que vió la luz fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.

El máximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0. Fue también entonces cuando introdujo el único rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script: el VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusión en Internet debido a la previa implantación del JavaScript y a que son de parecida funcionalidad, pero sí es utilizado dentro de Intranets basadas en el Explorer y dentro de otras aplicaciones de Microsoft, como IIS, Access, Word, etc..

18.1. Javascript

Como este curso está orientado a Internet, no vamos a ver nada de VBScript aquí por las razones comentadas anteriormente. Pero para ilustrar la utilidad de los lenguajes de script, vamos a realizar una pequeña introducción al Javascript. Si te sientes interesado, visita mi curso de JavaScript 1.2 para mayor información sobre el tema.

Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el famoso mensaje "hola, mundo". Así podremos ver los elementos principales del lenguaje. El siguiente código es una página Web completa con un botón que, al pulsarlo, muestra el mensaje.

Y aquí está nuestro ejemplo funcionando:

Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños que tiene la página anterior:

Dentro de estos elementos será donde se puedan poner funciones en JavaScript. Puedes poner cuantos quieras a lo largo del documento y en el lugar que más te guste. Si un navegador no entiende la etiqueta <SCRIPT> escribirá lo que hay entre medias de estos elementos, así que lo encerramos entre comentarios por si las moscas.

function HolaMundo() { alert("¡Hola, mundo!"); }

Esta es nuestra primera función en JavaScript. En el código de la misma vemos una llamada al método alert (que pertenece al objeto window) que es la que se encarga de mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las etiquetas HTML de caracteres especiales en una función: no los reconoce. Así que pondremos directamente "¡" arriesgándonos a que salga de otra manera en ordenadores con un juego de caracteres distinto al del nuestro.

Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: onClick. Es un evento. Cuando el usuario pulsa el botón, el evento onClick se dispara y ejecuta el código que tenga entre comillas, en este caso la llamada a la función HolaMundo(), que tendremos que haber definido con anterioridad.

Este ejemplo muestra una pequeña parte de las funcionalidades del JavaScript. De hecho, su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un vistazo a mi curso de JavaScript.

17. Hojas de estilo: referencia

2006-05-26T08:40:00.000+02:00

En este capítulo vamos a ver todas (o casi todas) las propiedades que se pueden alterar por medio de las hojas de estilo. Hay que indicar que algunos de ellos no los soporta el Explorer y en cambio otros no los entiende el Communicator. Así que es recomendable probarlos en ambos exploradores antes de incorporarlos a nuestras páginas.

17.1. Propiedades de bloque

Vamos a empezar con las propiedades de bloque, que definen cosas como los márgenes o la colocación de bloques de contenido HTML:

17.2. Propiedades de tipo de letra

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:

Cabe recordar que los tipos genéricos son serif, sans-serif, cursive, fantasy y monospace. Cada uno de estos tipos serán equivalentes a alguno que pueda tener instalado el ordenador del usuario. Así, por ejemplo, en un PC con Windows instalado serif puede equivaler a Times New Roman y monospace a Courier.

17.3. Propiedades de formato del texto

Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de textos nos permite cambiar.

17.4. Propiedades de color y fondo

También es posible cambiar los colores y el gráfico de fondo de un elemento.

Hay que decir que, en la sintaxis en cascada, las direcciones se expresan del siguiente modo:

background: url(fondobonito.gif);

17.5. Propiedades de clasificación

Hasta ahora habíamos distinguido a la hora de ver las propiedades de un elemento en si estos eran tratados como bloques o no. Pero el ser bloques o no... ¿no es acaso otra propiedad? Estas y otras formas de clasificar los elementos se pueden cambiar usando las siguientes propiedades:

Y ahora... ya no hay más... ¡por fín acabamos! Dejadme que respire un poco y ahora continuamos.

6. Hojas de estilo

2006-05-26T08:39:00.000+02:00

Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixels. Por ejemplo.

El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin embargo, como el estándar más comunmente aceptado de sintaxis de hojas de estilo es el de cascada, será este el único que veamos. Vamos a empezar con un ejemplo:

<STYLE TYPE="text/css"> P {color: green; margin-left: 30;} </STYLE>

Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.

Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Será <P>. Después, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.

Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre mayásculas y minúsculas. Conviene tener cuidado.

El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremos su filosofía de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:

Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior

Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30 pixels. Precioso, ¿no? embargo, estoy convencido de que los más avispados se habrán dado cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalización de una etiqueta debería ser general y en esta página sólo este párrafo está modificado. No os preocupéis demasiado, ahora os cuento como se hace.

16.1. Clases

Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto que significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:

P.verde {color: green; margin-left: 30px;}

sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <P CLASS="verde">. Así de sencillo.

Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro ID. Por ejemplo:

all.verde {color: green; margin-left: 10px;} #ej1 { color: blue;}

Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10 pixels. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será azul:

Este párrafo es muy verde.

Y anda que este...

Sin embargo, este no, fíjate que curioso.

16.2. Etiquetas <SPAN> y <DIV>

Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <SPAN> y <DIV>.

El método es simple. Definimos una clase rojo que simplemente modifique el color (que será rojo). Ahora, si queremos que una sección de texto esté en rojo lo encerraremos entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV CLASS="rojo"> y </DIV>.

La diferencia entre ambas es que, mientras SPAN realmente no hace nada por sí misma, DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final). Veremos en el siguiente capítulo que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo entero) se les pueden definir atributos propios desde las hojas de estilo. Por ejemplo, si definimos las siguientes hojas:

all.titulo { margin-top: -24px; color: blue; font-size: 20px; } all.sombra { margin-top: 2px; margin-left: 2px; color: black; font-size: 20px; }

cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el siguiente código HTML:

<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV> <DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>

obtendremos este bello efecto:

El maravilloso curso de HTML El maravilloso curso de HTML

En el siguiente capítulo tenéis una guía de referencia con todos (o casi todos) los atributos que se pueden modificar con CSS.

15. Marcos

2006-05-22T10:23:00.000+02:00

Un marco (o frame) es una ventana
independiente dentro de la ventana general del navegador. Cada
marco tendrá sus bordes y sus propias barras de desplazamiento. Así
cada página se dividirá en la práctica en varias páginas
independientes.

Para crearlos necesitaremos un documento HTML
específico, que llamaremos documento de definición de marcos. En él
especificaremos el tamaño y posición de cada marco y el documento
HTML que contendrá. Vamos a ver un ejemplo de este tipo de
documento:

<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>

</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero sólo podrás ver esta página
si tu navegador tiene la capacidad de visualizar
marcos.</P>

</NOFRAMES>
</FRAMESET>
</HTML>

Vamos a explicar detalladamente este ejemplo
antes de investigar algo más a fondo cada una de las etiquetas.
Vemos que la cabecera de la página es similar a un documento
normal, pero el habitual BODY es sustituido por un FRAMESET. En cada
FRAMESET se
divide la ventana actual (sea la general o un marco) en varias
ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se
define el número de marcos y el tamaño de cada uno.

Dentro del <FRAMESET> se hacen dos cosas. Primero,
definir cada uno de los marcos poniendoles un nombre y
especificando qué fichero HTML le corresponde mediante la etiqueta
<FRAME>. Por último, especificamos lo
que verá el usuario en el supuesto (cada vez más raro) de que su
navegador no soporte frames dentro de la etiqueta
<NOFRAMES>. Ahora veremos todos estos
elementos en mayor detalle.

15.1. Etiqueta
<FRAMESET>

Según el estándar, esta etiqueta sólo debería
contener el número y tamaño de cada marco, pero las extensiones de
Netscape y Explorer al estándar obligan a estudiar un par de
parámetros más.

En general, los navegadores dibujan un borde de
separación entre los marcos. Si deseas eliminarlo puedes hacerlo de
dos maneras: en las etiquetas <FRAME> de cada una de los marcos
contiguos al borde a eliminar o incluyendo el parámetro
FRAMEBORDER=0 en el <FRAMESET>.

Cuando eliminas ese borde, podrás ver cómo el
navegador deja aún un hueco entre marcos. Este se elimina añadiendo
los parámetros FRAMESPACING=0 BORDER=0.

Vamos a examinar por último los parámetros
COLS y
ROWS.
Deberemos asignarles una lista de tamaños separada por comas. Se
admiten los siguientes formatos de tamaño:

Con porcentajes: Al igual que con las tablas, podemos
definir el tamaño de un marco como un porcentaje del espacio total
disponible.
Absolutos: Si ponemos un número a secas, el marco
correspondiente tendrá el tamaño especificado en pixels.

Sobre el espacio sobrante: Si colocamos un asterisco (*)
estaremos indicando que queremos todo el espacio sobrante para ese
marco. Podemos poner este símbolo en varios marcos, que se
repartirán el espacio equitativamente como buenos hermanos. Si
queremos que uno tenga más deberemos ponerle al asterisco un número
delante. Así, un marco con un espacio de 3* será tres veces más
grande que su compañero, que tiene un asterisco sólo, el
pobre.

Por ejemplo, el siguiente código es una muestra
de cómo combinar los tres métodos:

Supongamos que el ancho total de la ventana son
640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El
tercero necesita 200, luego nos quedan 476 para los otros dos. Como
el cuarto debe tener el doble de espacio que el segundo, tenemos
aproximadamente 158 pixels para este último y 316 para el cuarto
marco.

Hay que tener cuidado cuando usamos valores
absolutos en la definición de marcos; debemos asegurarnos de tener
al menos un marco con un tamaño relativo si queremos estar seguros
del aspecto final de la página.

Por último, indicar que las etiquetas

<FRAMESET> se pueden anidar. Esto se
hace poniendo otro <FRAMESET> donde normalmente colocamos
las etiquetas <FRAME> tal que así:

<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">

<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET>
</FRAMESET>

15.2. Etiqueta <FRAME>

Esta etiqueta define tan sólo las
características de un marco determinado, no de un conjunto de
ellos. Estos son los parámetros que admite:

Parámetro	Utilidad
NAME	Asigna un nombre a un marco para que después podamos referirnos a él.
SRC	Indica la dirección del documento HTML que ocupará el marco.
SCROLLING	Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO.
NORESIZE	Si lo especificamos el usuario no podrá cambiar de tamaño el marco.
FRAMEBORDER	Al igual que su homónimo en la etiqueta <FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero.
MARGINWIDTH	Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT	Igual al anterior pero con márgenes verticales.

15.3. Acceso a
otros marcos

Por defecto, cuando pulsamos sobre un enlace
situado dentro de un marco, la nueva página a la que queremos
acceder la veremos encerrada en ese mismo marco. Es posible que
deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que
no sirve de índice y otro donde mostramos los contenidos sería
deseable que los enlaces del marco índice se abrieran en el otro
marco. Esto es posible hacerlo gracias al parámetro TARGET.

Este parámetro se puede colocar en tres
etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve
para indicar el marco en el que abriremos ese enlace en particular
y el último modificaremos el marco en el que por defecto se nos
muestran todos los enlaces.

Pero para que un parámetro funcione, es habitual
que le asignemos un valor, y TARGET no es una excepción. Para indicarle el
marco que deseamos le asignaremos el nombre del mismo. Así, en los
ejemplos anteriores, si en el marco llamado indice tenemos un enlace
que queremos se abra en el marco principal pondremos:

También existen cuatro nombres reservados que
podremos utilizar en el parámetro TARGET:

_top

Elimina todos los marcos existente y muestra la nueva página en
la ventana original sin marcos.

_blank

Muestra la nueva página en una ventana nueva y sin nombre del
navegador.

_self

Muestra la nueva página en el marco donde está declarado el
enlace.

_parent

Muestra la nueva página en el <FRAMESET> que contiene al marco donde
se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados,
una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a
_parent
eliminaría la separación entre los marcos ejemplo y principal y mostraría en
ese nuevo marco la nueva página.

14. Tablas

2006-05-19T13:16:00.000+02:00

Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.

Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:

Como podéis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedaría mejor con unos bordes, ¿no? Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:

Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:

14.1. Definir las filas

Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:

14.2. Definir las celdas

Por último, nos queda definir cada celda gracias a la etiquetas TD y TH. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:

Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. De hecho, aún entendiendo perfectamente su función es habitual que confundamos a uno con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:

Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creación de la tabla se nos complicará de horrible manera.

14.3. Título de la tabla

Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en la declaración de la tabla anterior:

Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el título se colocará al final de la tabla en lugar del comienzo.

13. Mapas

2006-05-19T13:14:00.000+02:00

Hemos visto que podemos hacer enlaces de texto y de gráficos. Pero también existe otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:

Mapas gestionados por el cliente (el navegador). Mapas gestionados por el servidor.

Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del estándar HTML 2.0. Sin embargo, nunca hubo una manera común de gestionar esos mapas. Debido a ello, Netscape elaboró un sistema propio que fue incluido en el estándar 3.2: los mapas gestionados por el navegador.

13.1. Mapas gestionados por el cliente

Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a declarar nuestro mapa:

Dentro de la etiqueta MAP sólo podremos definir el nombre del mapa (algo imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas más interesantes:

Parámetro	Utilidad
SHAPE	Define la forma de la zona, que podrá ser rectangular, circular o poligonal.
COORDS	Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la zona.
HREF	URL a donde irá el usuario si pulsa sobre esa zona.
NOHREF	Especifica que esa zona no tiene asignado enlace alguno.
ALT	Texto que se presentará en lugar de la imagen en navegadores no gráficos para acceder al enlace.

Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:

	SHAPE	COORDS
Rectangular	RECT	"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
Circular	CIRC	"x,y,radio" siendo (x,y) el centro del círculo y radio su... eehh.. ¿cómo lo diría yo? ¿Su radio?.
Polígono irregular	POLY	"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono.
Toda la imagen	DEFAULT	No se indican.

13.2. Cómo usar un mapa

Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace del siguiente modo:

Siempre tenemos que añadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver un ejemplo:

Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce a ningún URL por si el usuario pulsa con el ratón donde no debe.

12. Controles avanzados para formularios

2006-05-18T08:42:00.000+02:00

El estándar HTML 4.0 ha traído varias mejoras a
los formularios, que acercan los mismos a las características que
tienen en lenguajes como Java o Visual Basic. Desafortunadamente,
el Netscape 4, lanzado al mercado antes de la aprobación del HTML
4.0, no implementa ninguna de estas mejoras, por lo que los
ejemplos de este capítulo sólo serán contemplados correctamente por
los usuarios de Explorer 4 y 5 y los arriesgados usuarios de las
versiones beta del futuro Netscape 5.

12.1.
Botones

Una de las cosas que más han mejorado son los
botones. Ahora disponen de una etiqueta propia, de modo que se
pueda encerrar con ella todo tipo de elementos HTML, como gráficos
o, incluso, tablas enteras.

Como no podía ser de otra manera, la etiqueta en
cuestión se llama BUTTON:

<BUTTON TYPE="button">

  <table border="1">

  <tr>

    <th>Soy una</th>

    <th>tabla</th>

  </tr>

  <tr>

    <td>que está</td>

    <td>en un botón</td>

  </tr>

  </table>

</BUTTON>

Soy una	tabla
que está	en un botón

Los parámetros de dicha etiqueta son los
normales, TYPE, que podrá tomar los valores
SUBMIT (por
defecto), RESET y BUTTON, NAME y VALUE.

Por otro lado, ahora podemos declarar un gráfico
como un elemento más de entrada. como un nuevo tipo dentro del
elemento INPUT:

Este elemento se comportará de mismo modo que un
botón de tipo SUBMIT, pero añadirá como información en el
formulario las coordenadas x e y donde el usuario lo pulsó.

12.2.
Etiquetas

Hasta hora, el texto que acompañaba a los campos
de entrada no estaba asociado a los mismos de ninguna manera. Así,
por ejemplo, si pulsábamos en el texto que acompañaba a un control
de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos
la etiqueta LABEL, el control cambiará de estado (sólo
disponible en Netscape 5):

<LABEL>

<INPUT NAME="Belleza" TYPE=CHECKBOX>

Me considero guapo/a

</LABEL>

Me considero guapo/a

Lo bueno que tiene es que se puede usar sin
peligro, ya que no afectará a los usuarios de navegadores
antiguos.

12.3. Agrupación de
elementos

Hasta ahora, no disponíamos de ninguna manera de
agrupar visualmente varios controles, si no echábamos mano de
elementos que no son del formulario, como tablas o imágenes.

Ahora, si encerramos una parte de un formulario
dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor
de los mismos. Si además, le indicamos un título por medio de la
etiqueta LEGEND nuestros formularios quedarán hechos
un verdadero primor:

<FIELDSET>

  <LEGEND>Mi hermoso
formulario</LEGEND>

  <LABEL>

    Mi texto:

    <INPUT TYPE="text">

  </LABEL>

</FIELDSET>

Mi
hermoso formularioMi texto:

LEGEND admite como parámetro ALIGN, que indicará en qué
lugar se coloca el título. Por defecto es TOP (arriba), pudiendo
estar también abajo (BOTTOM), a la izquierda (LEFT) o a la derecha
(RIGHT).

12.4. Desactivación
de elementos

Todos los controles de un formulario se pueden
desactivar, impidiendo así al usuario que los utilice. Se seguirán
mostrando en pantalla, aunque con un aspecto distinto para indicar
su triste estado. Para ello sólo tenemos que indicarle el parámetro
DISABLED:

<LABEL DISABLED>Texto:

<INPUT TYPE=TEXT DISABLED>

</LABEL>

Texto:

Esto, en principio, no parece de demasiada
utilidad. ¿Para qué queremos tener controles desactivados? Para eso
no los ponemos, ¿no? Lo bueno que tiene es que el estado de
activación de un control es accesible desde JavaScript. Eso nos
permitirá activar o desactivar una parte de nuestro formulario
dependiendo de lo que el usuario haya introducido previamente en
otros controles del mismo.

11. Formularios

2006-05-18T08:41:00.000+02:00

Una de las mayores ventajas de la web es que resulta tremendamente interactiva. Los usuarios de una página no tienen más que escribir al autor de la misma para comentarle cualquier cosa de la misma. Sin embargo, si deseamos que nos digan sólo unas cosas concretas (responder a alguna pregunta, seleccionar entre varias opciones, etc..) deberemos utilizar formularios. Por ejemplo,

<FORM ACTION="" METHOD=POST> Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32> <BR>¿Cuantos son dos y dos?<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR> <INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR> <INPUT TYPE="Submit" VALUE="Comprobar"> </FORM>

se verá así:

El botón no hace nada porque no hemos definido qué debe hacer, así que sed buenos y no lo pulséis.

Todos los elementos de un formulario deben estar encerrados entre <FORM> y </FORM>. Como parámetros cabe destacar tres. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo (precedida del inevitable mailto:, en cuyo caso deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos resulte legible.

Por otro lado, tenemos el parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar POST. En el caso de que estemos mandando el formulario a nuestra dirección de correo electrónico es obligado usarlo.

Ahora vamos a ver uno a uno todos los elementos que podemos incluir en un formulario. Veremos que todos ellos tienen algo en común. Como el resultado de cualquier formulario es una lista de variables y valores asignados a las mismas, todos ellos tendrán un atributo en común: el nombre de su variable. El parámetro también será común a todos: NAME.

11.1. Cajas de texto

Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta <INPUT>:

<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>

El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en él. Estos son los atributos para modificarlos:

Por otro lado, puede que necesitemos que el usuario pueda introducir más de una línea. En ese caso se utilizará la siguiente etiqueta:

<TEXTAREA>
Por defecto
</TEXTAREA>

Por defecto

Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:

11.2. Opciones

Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos modos. El primero es el que vimos en el ejemplo inicial:

3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR>
5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>

3
4
5

Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:

Parámetro	Utilidad
VALUE	Este es el valor que asignará a la variable.
CHECKED	Si lo indicamos en una de las opciones esta será la que esté activada por defecto.

Pero también tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION:

<SELECT NAME="Navegador">
<OPTION>Netscape
<OPTION>Explorer
<OPTION>Opera
<OPTION>Lynx
<OPTION>Otros
</SELECT>

Netscape Explorer Opera Lynx Otros

Los parámetros que admite SELECT son las siguientes:

Parámetro	Utilidad
SIZE	El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable.
MULTIPLE	Si lo indicamos podremos elegir más de una opción.

Y OPTION estos:

Parámetro	Utilidad
VALUE	Este es el valor que asignará a la variable.
SELECTED	Si lo indicamos en una de las opciones esta será la seleccionada por defecto.

11.3. Botones del formulario

Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:

Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro VALUE.

11.4. Otros elementos

Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:

<INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero guapo/a

Me considero guapo/a

Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED. El formulario asignará a la variable NAME el valor on u off.

Por último, existe la posibilidad de que necesitemos que, en el formulario, tengamos alguna variable con un valor previamente asignado. Por ejemplo, en todos los cursos que tengo el formulario es el mismo. Y de alguna manera tendré que distinguirlos cuando me lleguen, digo yo. Así que incluyo algo como esto:

De este modo ya sé de que curso me están hablando.

10. Estructura del documento

2006-05-17T08:35:00.000+02:00

La estructura de un documento HTML se puede resumir así:

tipo de documento <HTML> <HEAD> <TITLE>titulo de la página</TITLE> cosas que afectan a la página pero no a su contenido </HEAD> <BODY parámetros> contenido de la página </BODY> </HTML>

En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estándar HTML 2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Cumple el estándar HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd">

Cumple el estándar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://w3.org/TR/REC-html40/strict.dtd">

Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://w3.org/TR/REC-html40/frameset.dtd">

Es una definición de marcos que cumple el estándar HTML 4.0

El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

10.1. La cabecera

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Estas son las propiedades más comunes:

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

Ahora todas nuestras URLs relativas se referirán al directorio /music dentro del servidor http://www.hornet.org.

10.2. El cuerpo

Obviamente no voy a explicar lo que entra dentro del cuerpo (prácticamente todos los capítulos del curso intentan hacerlo) sino los parámetros que admite la etiqueta <BODY>:

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.

9. Formateo fino

2006-05-17T08:33:00.000+02:00

Lo ideal cuando trabajas con texto sería poder cambiarlo al tamaño que te viniese bien, ponerlo de colorines y cambiar el tipo de letra. Todo esto puedes hacerlo gracias a la etiqueta <FONT>.

9.1. Cambio de color

Para hacerlo vamos a utilizar el parámetro COLOR. La manera de especificarle el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando el porcentaje de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes:

<FONT color="red">Estoy en rojo</FONT>

El modo de indicar el color RGB es el siguiente:

Lo que nos mostraría lo siguiente:

DEGRADADO

La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el azul (Red Green Blue, RGB).

9.2. Tamaños del texto

El parámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para indicar tamaños absolutos:

SIZE=1 SIZE=2 SIZE=3 SIZE=4 SIZE=5 SIZE=6 SIZE=7

El tamaño por defecto es 3. También se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así, por ejemplo, si indicamos que queremos un tamaño de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces más pequeño.

<FONT SIZE=2>Tamaño 2<FONT SIZE="+3"> Tamaño 6</FONT></FONT>

9.3. Tipo de letra

Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parámetro FACE. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que está viendo nuestras páginas, podemos indicar más de uno separado por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene por defecto:

<FONT FACE="Helvetica,Arial,Times">No sé como voy a salir exactamente</FONT>

De todos modos es recomendable no utilizar con fe ciega este atributo en Internet, ya que impide que todos puedan ver nuestras páginas como nosotros. E Internet, siempre que nos lo permitan Microsoft y Netscape, debe ser lo más estándar posible.

8. Imágenes

2006-05-16T13:26:00.000+02:00

Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <IMG> de esta manera:

El parámetro SRC especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG. La últimas versiones de Netscape y Explorer aceptan también el formato PNG.

El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0 obliga a hacerlo.

Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y la anchura del gráfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto.

Para los menos avezados en inglés, decir que WIDTH es la anchura y HEIGHT la altura.

8.1. Imágenes y enlaces

Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniendolo a cero.

Se ve así:

Sin embargo,

<A HREF="http://www.netscape.com"> <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31 BORDER=0> </A>

8.2. Alineación respecto al texto

Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:

Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j.

7. Listas

2006-05-16T13:24:00.000+02:00

7.1. Listas desordenadas

La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,

<UL> <LI>Primer elemento <LI>Segundo elemento </UL>

se verá como

Primer elemento Segundo elemento

La etiqueta <UL> admite estos parámetros:

También son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>. En principio tenían como propósito representar una lista estilo directorio (multicolumna) o tipo menú (una sola columna). En la práctica los navegadores lo han implementado como sinonimos de <UL>, por lo que no los estudiaremos aquí.

7.2. Listas ordenadas

La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo,

<OL> <LI>Primer elemento <LI>Segundo elemento </OL>

se verá como

Primer elemento Segundo elemento

La etiqueta <OL> admite estos parámetros:

7.3. Listas de definiciones

Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>:

<DL> <DT>Primer elemento<DD>Es un elemento muy bonito. <DT>Segundo elemento<DD>Este, en cambio, es peor. </DL>

se verá como

Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.

La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores.

5. Carácteres especiales

2006-05-15T13:33:00.000+02:00

Si os habeis fijado en los ejemplos habréis visto que en los textos de los mismos no hay acentos, ni eñes, ni símbolos de abrir interrogación o exclamación. Esto es debido a los distintos juegos de caracteres que manejan los ordenadores.

Las máquinas manejan la información en formato binario (es decir, en unos y ceros). Estos, a su vez, forman números, los cuales se traducen en letras. ¿Cómo? Mediante tablas. Podemos asignar el valor 64 a la letra a, el 65 a la b, etc..

El problema está en que cada ordenador es de un fabricante distinto y puede adoptar una tabla diferente al resto. Para evitarlo existen diversos estándares y el más extendido es el ASCII. De hecho, actualmente todos los ordenadores tienen la misma tabla ASCII para los primeros 127 caracteres. Pero esa tabla no contiene vocales con acento, ni eñes, ni símbolos de abrir interrogación o exclamación... Esto nos pasa por dejar que los norteamericanos sean quienes construyan las computadoras.

El HTML 2.0 eligió como tabla estándar la ISO-Latin-1, que comparte con la ASCII los 127 caracteres e incluye unos cuantos más hasta el número 255.

5.1. Caracteres extendidos en HTML

La manera de incluir los caracteres extendidos (cuyo número está más allá del 127) consiste en encerrar el código entre los caracteres &amp;# y ;. Así pues, lo siguiente:

nos debería dar un medio (½). Tambié existe una serie de sinonimos para poder recordar con más facilidad estos caracteres. Así, por ejemplo, ½ también se puede escribir como ½. Vamos a ver algunos de estos códigos, los más útiles a la hora de escribir en español:

5.2. Caracteres de control

En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente códigos:

4. Formateo básico

2006-05-15T13:26:00.000+02:00

4.1. Formato del párrafo

Estas son las etiquetas más importantes (excluyendo algunas que veremos más adelante):

4.2. Las 6 cabeceras

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:

Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he prefirido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal.

4.3. Cambiando el tipo de letra

Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo.

4.4. Formato de frase

En estos elementos indicas el tipo de información que encierran las etiquetas, pero no como se representan:

No son muy utilizados, ya que no permiten tener un control exacto de la manera en que la página se representará finalmente.

4.5. Otros elementos

Por último, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra página.

Aquí tenemos en un ejemplo casi todas las etiquetas estudiadas.

Mi segunda pagina La primera version de esta pagina

Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre aqui muchas cosas interesantes.

La primera version de esta pagina, ahora actualizada Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre; aqui muchas cosas interesantes.

Y esta es la segunda version

Ya tenemos aqui las cosas interesantes. Tenemos a mi novia Loli diciendo que

Como me pongas en tu pagina te atizo.

Tambien podemos a ver a mi querido perro fufu diciendo guau, guau y, sobre todo, el codigo fuente de este ejemplo:

<HTML> <HEAD> <TITLE>Mi segunda pagina</TITLE> </HEAD> <BODY> <DIV ALIGN=CENTER><H1>Mi segunda pagina</H1></DIV> <H2>La primera version de esta página</H2> <HR> <P>Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre aqui muchas cosas interesantes. <BR><BR><H2>La primera version de esta pagina, ahora actualizada</H2> <HR> <DIV ALIGN=CENTER>Esta es mi <STRONG>primera</STRONG> pagina (<I>chispas</I>). Por el momento no se que tendra, pero <S>dentro de poco</S> pondre <EM>aqui</EM> muchas cosas <B>interesantes</B>.</DIV> <BR><BR><H2>Y esta es la segunda versión</H2> <P>Ya tenemos aqui las cosas interesantes. Tenemos a mi novia <BIG>Loli</BIG> diciendo que <BLOCKQUOTE>Como me pongas en tu pagina te atizo.</BLOCKQUOTE> Tambien podemos a ver a mi querido perro <SMALL>fufu</SMALL> diciendo <CITE>guau, guau</CITE> y, sobre todo, el codigo fuente de este ejemplo: <PRE>  </PRE> </BODY> </HTML>

3. Mi primera página

2006-05-15T13:17:00.000+02:00

3.1. El código <HTML> <HEAD> <TITLE>Mi primera pagina</TITLE> </HEAD> <BODY> <CENTER><H1>Mi Primera pagina</H1></CENTER> <HR> <P>Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre aqui muchas cosas interesantes. </BODY> </HTML>

También puedes ver el resultado de este ejemplo.

Mi Primera página

Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre aqui muchas cosas interesantes.

3.2. La explicación

Lo primero que conviene explicar es en qué consisten todos esos símbolos de mayor y menor que están distribuidos por ahí. El lenguaje HTML se basa en la sintaxis SGML (toma siglas). Esto quiere decir que cualquier cosa que hagamos en HTML estará encerrada entre dos etiquetas de esta manera:

Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el código habréis visto un par de ejemplo que ya explicaré más adelante. Pero como lo primero que debemos indicar es que el texto que estamos componiendo es un documento HTML pues lo indicamos así:

Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y cabecera. En la primera estará la página en sí, mientras que en la segunda incluiremos algunas cosas que no se ven al principio pero que pueden llegar a ser muy importantes. Lo primero que hay que incluir en el código es la cabecera. La escribimos:

<HEAD> <TITLE>Mi primera pagina</TITLE> </HEAD>

Dentro de la cabecera sólo hay otra etiqueta. Es la única imprescindible: el título de la página. Es lo que veremos como título de la ventana en los navegadores que lo permitan. Es como se conocerá nuestra página en algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios. Por tanto, parece importante pensarnos bien como llamarla.

3.3. El cuerpo del documento

Ahora vamos a indicar el contenido. Lo primero será indicar que estamos en el cuerpo del documento:

Luego pondremos el título algo recalcado:

Con esto colocaremos el texto centrado (<CENTER>) y en formato <H1> (cabecera 1) que nos asegura que aumentará el tamaño del tipo de letra lo suficiente como para que se vea bastante resaltado. Luego separamos ese título que le hemos puesto a la página del texto por medio de una línea horizontal:

<HR>

La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varían los atributos de un texto, sino que insertan un elemento. Por ejemplo, para indicarle que queremos separar el texto de la línea horizontal con un espacio vertical correspondiente a un párrafo nuevo le decimos:

<P>Esta es mi primera pagina (chispas). Por el momento no sé que tendrá, pero dentro de poco pondré aquí muchas cosas interesantes.

En el siguiente capítulo veremos muchas etiquetas que nos permitirán cambiar el aspecto de nuestros textos.

2. Versiones del HTML

2006-05-15T13:15:00.000+02:00

2.1. HTML 2.0

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier navegador que encontremos será capaz de interpretarlo. Prácticamente todo lo que veamos en los próximos seis capítulos está contemplado por este estándar.

2.2. HTML 3.0 y 3.2

Aunque la versión 2.0 cumplía bien el objetivo para el que se creó, carecía de herramientas para tener un control mínimamente complejo de los documentos. No se consideró necesario que lo tuviera, ya que por aquel entonces Internet era un fenómeno más bien circunscrito a la actividad académica y el contenido primaba sobre el diseño. Debido a ello, Netscape (líder del mercado de navegadores por aquel entonces) empezó a incluir etiquetas nuevas no incluidas en ningún estándar.

Por estos problemas, el IETF (el comité que suele decidir todos los estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resultó ser demasiado grande para la época, lo que dificultó su aceptación en el mercado.

Esto llevó a una serie de compañias (entre ellas Netscape, Microsoft, IBM, Sun, etc...) a crear un nuevo comité llamado W3C, que es el que actualmente elabora las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador del HTML 3.2, que incluía muchas de las mejoras que los principales navegadores (Netscape y Explorer) habían introducido en Internet, como son las tablas, los applets, etc..

Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se puso a trabajar en la elaboración del siguiente estándar: el 4.0.

2.3. HTML 4.0

En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.

2.4. Estándares en este curso

En principio cualquier navegador debería ser capaz de interpretar el HTML 3.2, pero por si necesitais saber por alguna razón el estándar al que pertenece una etiqueta o parámetro en particular, se incluirá una de las siguientes indicaciones:

	Introducido con la versión 3.2 del HTML
	Introducido con la versión 4.0 del HTML
	Etiqueta o parámetro no estándar soportado sólo por el Netscape
	Etiqueta o parámetro no estándar soportado sólo por el Explorer

1. Introducción al curso

2006-05-15T13:12:00.000+02:00

Este curso ha nacido con la intención de complementar los anteriores cursos de JavaScript y HTML dinámico que tengo en estas páginas. Así podrás terminar creando una página de calidad empezando desde cero.

Lo primero que hay que decir es que este curso no explica ningún estándar específico, ni examina exaustivamente todos los parámetros de las etiquetas HTML. Intenta ser una guía práctica, de modo que incluirá todas las cosas que yo crea importantes y que me han provocado algún quebradero de cabeza mientras realizaba mis páginas.

El curso y sus ejemplos los he probado con Explorer 4 y Netscape 4, que son los navegadores que tengo instalados. Si tienes otro navegador y encuentras algún problema te ruego que me lo comuniques, ya que he renunciado a hacer un diseño más elaborado para conseguir que todos puedan leer este curso (y para terminarlo más rápido).

Si tu navegador es capaz de manejar más de una ventana a la vez, las páginas de ejemplo del curso se verán en otra ventana (sólo una). De este modo es posible observar a la vez el ejemplo y la explicación y se evita la proliferación excesiva de ventanas.

1.1. Requisitos

Si estás viendo este curso ya tienes en tus manos el requisito más difícil de cumplir: tener acceso a Internet y un navegador. El otro requisito es un editor de textos con el que hacer las páginas. Da lo mismo cual. Para hacer este curso yo utilizo el de MS-DOS, por ejemplo. Sin embargo, es posible entender el curso sin hacer una sola página, aunque siempre es recomendable practicar.

Podéis hacer páginas con algún editor específico de páginas web, pero no es necesario. Es más, algunos de esos editores esconden las etiquetas HTML al usuario, de modo que posiblemente lo que aprendas aquí te sería de poca utilidad.

1.2. Índice del curso

1. Introducción al curso
1.1. Requisitos
1.2. Índice del curso
1.3. Agradecimientos
2. Versiones del HTML
2.1. HTML 2.0
2.2. HTML 3.0 y 3.2
2.3. HTML 4.0
2.4. Estándares en este curso
3. Mi primera página
3.1. El código
3.2. La explicación
3.3. El cuerpo del documento
4. Formateo básico
4.1. Formato del párrafo
4.2. Las 6 cabeceras
4.3. Cambiando el tipo de letra
4.4. Formato de frase
4.5. Otros elementos
5. Caracteres especiales
5.1. Caracteres extendidos en HTML
5.2. Caracteres de control
6. Enlaces
6.1. La etiqueta
6.2. Las URLs
6.3. Anclas
7. Listas
7.1. Listas desordenadas
7.2. Listas ordenadas
7.3. Listas de definiciones
8. Imágenes
8.1. Imágenes y enlaces
8.2. Alineación respecto al texto
9. Formateo fino
9.1. Cambio de color
9.2. Tamaños del texto
9.3. Tipo de letra
10. Estructura del documento
10.1. La cabecera
10.2. El cuerpo
11. Formularios
11.1. Cajas de texto
11.2. Opciones
11.3. Botones del formulario
11.4. Otros elementos
12. Controles avanzados para formularios
12.1. Botones
12.2. Etiquetas
12.3. Agrupación de elementos
12.4. Desactivación de elementos
13. Mapas
13.1. Mapas gestionados por el cliente
13.2. Cómo usar un mapa
14. Tablas
14.1. Definir las filas
14.2. Definir las celdas
14.3. Título de la tabla
15. Marcos
15.1. Etiqueta
15.2. Etiqueta
15.3. Acceso a otros marcos
16. Hojas de estilo
16.1. Clases
16.2. Etiquetas y

17. Hojas de estilo: referencia
17.1. Propiedades de bloque
17.2. Propiedades de tipo de letra
17.3. Propiedades de formato del texto
17.4. Propiedades de color y fondo
17.5. Propiedades de clasificación
18. Lenguajes de script
18.1. Javascript
19. Capas
19.1. Definición
19.2. Propiedades
20. Sonido
20.1. Sonido activado por el usuario
20.2. Sonido de fondo
21. Guía de estilo
21.1. Contenido
21.2. Navegación
21.3. Estructura de las páginas
21.4. Accesibilidad
21.5. Diseño
21.6. Mantenimiento y pruebas
A. Enlaces a otras páginas
A.1. Otros manuales de HTML
A.2. Sobre JavaScript
A.3. Sobre HTML dinámico
A.4. Sobre otras tecnologías relacionadas
B. FAQ (Preguntas más frecuentes)
B.1. Para comentarme algo o preguntar otra cosa

1.3. Agradecimientos

Este es el agradecimiento del Primer autor de este Manual ya que yo solo trato de ponerlo nuevamente en linea Ya que el amigo "Daniel Rodriguez" a dado por abandonado su curso y los enlaces que permitian la comunicacion con el ya no funcionan, Bueno disfruten del Curso.

Aparte de dar las gracias a todos aquellos que visitan la web y en especial a los que se toman la molestia de rellenar el formulario de abajo, quiero agradecer especialmente desde aquí a todos aquellos que han colaborado en mejorar estas páginas. En especial a Peter Promenade, por indicarme la

por: daniel rodriguez

Creación de páginas web

2006-05-08T16:35:00.000+02:00

Para crear tu página web tienes que seguir dos pasos:

Crear la página con un programa de edición web. Ejemplo: Frontpage (Microsoft).

Subir la página a un servidor. Ejemplo: Lycos, Ono, Terra.

FRONTPAGE. Programas para crear la web.

Existen muchos programas para crear la página web, la mayoría gratuitos. Frontpage no es el mejor, pero normalmente lo tendremos, ya que viene con el resto de programas OFFICE. Hay servidores web que incluyen un programa para poder hacer la página desde internet, pero suelen ser programas que realizan páginas muy sencillas y con pocas posibilidades.

Frontpage funciona de una manera similar a programas OFFICE. Para empezar a utilizarlo tienes que abrir el programa y abrir un archivo nuevo. Verás que en ARCHIVO puedes seleccionar NUEVO y da la opción de página y web. Abres PÁGINA; puedes seleccionar varios tipos; de momento seleccionamos página normal. Verás que es muy parecido al word. Puedes escribir, insertar imágenes, etc.

Para empezar a funcionar comentar únicamente algunas cosas:

Para crear hipervínculos, selecciona lo que quieras (una frase, una palabra, una imagen...) y con el botón de INSERTAR HIPERVÍNCULO

le decimos la página (puede ser una página que hayamos creado nosotros/as), una imagen, una página web...

En FORMATO, seleccionar FONDO para cambiar de color la página o para que el fondo sea una imagen.

Cuando hayas creado la primera página de tu web, debes llamarla index.html, (te pedirá que le pongas el nombre a la página cuando la cierres). El resto de páginas puedes llamarlas como quieras. ¡No pongas nunca acentos ni caracteres raros al nombre del archivo!.

Una vez creadas dos o más páginas, hay que vincularlas, es decir, que de una se vaya a las otras. Lo haremos como hemos explicado antes, con el botón de INSERTAR HIPERVÍNCULO.

Lleva un orden. Normalmente las páginas, por defecto, se guardan en la carpeta MIS WEBS, dentro de MIS DOCUMENTOS. En esta carpeta organízate las imágenes, documentos, fotos, etc que vayas a incluir en tu web.

Para publicar la web, primero tienes que darte de alta en un servidor tipo LYCOS (esto ya lo veremos). Una vez de alta, para publicar la página debemos ir a ARCHIVO y posteriormente a PUBLICAR WEB.

SERVIDORES: LYCOS

Quizás más complicado que el hacer la página es subir los archivos al servidor. Vamos a ponerte un ejemplo con la página de LYCOS, que proporciona 50 megas para tu web. Comentar antes que hay servidores que cobran por alojar la página, pero que la mayoría son gratuitos. ¿Qué ventaja tienen los de pago?: No tienen propaganda y el nombre de tu página no empezará por usuarios.lycos.es... o similares. Si tienes ONO, te permite subir hasta 5 megas gratuitamente y no tiene publicidad. Registrarse es similar a crearte un correo electrónico; apúntate en un folio todo lo que te vaya pidiendo, contraseñas, nombre de usuario, etc

Pasos a seguir.

Ir a la página

www.tripod.lycos.es

Registrarse: Hay que poner un nombre de usuario, que, ojito, va a ser el nombre de tu página, una contraseña, datos personales y un correo electrónico (verdadero, porque nos enviarán un mensaje para activar la página).

Leer el correo. Te direcciona a una página para activar tu cuenta. Te va a pedir de nuevo una contraseña; esta contraseña servirá para el momento en que vayas a publicar la web.

En la página

www.tripod.lycos.es

poner tu nombre de usuario y contraseña (el que has puesto en el paso 1). En la parte derecha hay un apartado que pone HERRAMIENTAS ON LINE. Hay que darle a FRONTPAGE y ACTIVAR MIS EXTENSIONES FRONTPAGE AHORA.

Con estos 4 pasos ya tienes activada la cuenta. Ahora tendrías que abrir el FRONTPAGE, abrir tu página realizada, ir a ARCHIVO, PUBLICAR WEB. Te va a pedir la dirección del servidor, que será fpt://usuarios.lycos.es/nombrequehayaspuesto y la clave la que has puesto en el paso número 3.

Esta información la tienes en http://usuarios.lycos.es/webasem en la sección TÉCNICOS/AS, apartado CURSO WEB

10. Inserción de Imágenes (Netscape Composer)

2006-05-08T08:40:00.000+02:00

Cuando insertamos una imagen en un documento web, en realidad estamos haciendo un enlace a un fichero que contiene esa imagen. Debemos pulsar el botón:

Después, introduciremos el nombre del fichero con la imagen. Si queremos introducir una imagen que ya ese encuentre en algún servidor Internet, pondremos su URL y marcaremos la opción "dejar la imagen en su dirección original". La universidad proporciona todo un archivo con imágenes que podemos utilizar en nuestras páginas en:

http://www.uc3m.es/repositorio

También se puede introducir una imagen que tengamos en nuestro ordenador, pulsando "seleccionar archivo". Así, la forma de insertar una imagen es muy similar al procedimiento que hemos visto anteriormente para hacer enlaces.

Esta pantalla de "propiedades de la imagen", nos permite una serie de utilidades para situar la imagen en la página web:

1. Alineación de la imagen con respecto al texto: podemos escoger distintos tipos de alineación.
2. Espacio en blanco alrededor de la imagen para separar adecuadamente la imagen del texto
3. Borde sólido: Podemos perfilar la imagen con un borde del grosor que prefiramos. Normal-mente será de color negro, pero si la imagen tuviera además un enlace, este se mostraría de color azul o violeta dependiendo de si el enlace hubiera sido o no visitado.
4. Texto / imagen alternativa: Nos permite poner un título a la imagen que será de gran utilidad si alguno de nuestros lectores navegara teniendo activada la opción de "no visualizar las imágenes".
5. Dimensiones: Aquí podemos forzar a que una imagen tenga unas dimensiones determinadas. Sin embargo no es muy conveniente utilizar esta opción, ya que distorsiona bastante las imágenes. Siempre es preferible ajustar los tamaños en un programa de tratamiento de gráficos

De la misma manera que vimos a la hora de realizar los enlaces hipertexto, y con el fin de evitar errores al teclear las URLs, es aconsejable "visitar" la imagen y copiar su dirección. En el caso de las imágenes podemos hacerlo por el siguiente procedimiento:

1. Volver al navegador
2. Buscar en internet la imagen que deseamos poner.
3. Pulsar sobre la imagen con el botón derecho del ratón.
4. Seleccionar "copiar la dirección de la imagen".

5. Volver de nuevo al documento que estamos editando
6. Situar el cursor en la ventana donde se ha de escribir la URL y pulsar Ctrl + V.

por: UC3M

9. Los enlaces a partes de un documento (Netscape Composer)

2006-05-08T08:39:00.000+02:00

Este tipo de enlaces suelen emplearse cuando nuestro documento es muy largo y deseamos evitar a nuestros lectores un largo tiempo de espera mientras se carga nuestra página o que para visualizar la misma tenga que hacer "scroll" durante mucho tiempo.

Consiste en un índice previo y una serie de "marcas" a lo largo del texto. Cuando pulsemos los diferentes puntos del índice, se saltará a la parte del documento en que pusimos las marcas.

A) Colocar las marcas a lo largo del texto:

1. Situar el cursor en el lugar deseado

2. Pulsar la tecla "destino":

3. Dar un nombre a la "marca":

Así, tantas veces como marcas vayamos a introducir.

B) Redactar el índice al comienzo del documento. Por ejemplo:

Introducción
Capítulo I
Capítulo II

C) Hacer los enlaces en cada punto del índice: 1. Marcar el fragmento de texto deseado (en este ejemplo, la palabra "introducción").

2. Pulsar la tecla "enlace":

3. Si hemos realizado correctamente las marcas, estas deberán aparecer en el recuadro. Pulsar sobre el nombre de la marca.

4. Automáticamente se situará en la ventana superior, precedida el signo #

5. Pulsar "Aceptar".

por: UC3M

8. Los enlaces a direcciones de correo (Netscape Composer)

2006-05-08T08:38:00.001+02:00

Se trata del mismo procedimiento que hemos visto, solo que se pondrá la dirección de correo electrónico que se desea enlazar, precedida del comando "mailto:"
mailto:dircorreo@uc3m.es No deben ponerse espacios en blanco en ningún lugar del texto.

por: UC3

7. Los enlaces de hipertexto (Netscape Composer)

2006-05-08T08:38:00.000+02:00

Desde nuestra página web podemos hacer enlaces a otras páginas en Internet, tanto sobre fragmentos de texto, como en imágenes. Para ello, basta con seleccionar el fragmento de texto o pulsar sobre la imagen y pinchar en la tecla "enlace".

Se abrirá una ventana en la que podemos teclear la URL de la página a enlazar. También podemos hacer un enlace a una página que se encuentre en el disco duro de nuestro ordenador. Para ello, pulsamos en "seleccionar archivo" y se abrirá la ventana de Windows que nos permite localizar documentos en nuestro PC. Sólo tendremos que seleccionarlo y el programa lo capturará automáticamente.

Para evitar cometer errores al teclear las direcciones de Internet, es aconsejable "visitar" la URL y "copiar" la dirección:

A) Volver al navegador.
B) Buscar en Internet la página que se desea enlazar.

C) Seleccionar con el ratón el texto de la URL:

D) Pulsar Edición + Copiar:

E) Volver de nuevo al documento que estamos editando.

F) Seleccionar el texto o la imagen en la que queremos poner el enlace y pulsar el botón "enlace" tal y como hemos explicado anteriormente. Situar el cursor en la ventana "enlazar con" y pulsar Control + V para "pegar" el texto que habíamos copiado en el navegador.

por: UC3

5. Visualización de los documentos (Netscape Composer)

2006-05-08T08:37:00.000+02:00

Aunque este editor nos muestra un documento bastante similar a cómo va a ser una vez que lo veamos en el navegador, hay algunos casos, como son los listados numerados, las tablas, etc., cuya apariencia puede diferir bastante. Por lo tanto, es conveniente de vez en cuando ir comprobando el aspecto que va tomando nuestra página en el navegador. Para ello, basta con pulsar la tecla "preliminar":

Si deseamos volver a trabajar en el documento, deberemos pulsar "archivo" + "modificar página" (véase página 1 de este manual).
por: UC3

5. Tablas (Netscape Composer)

2006-05-08T08:36:00.000+02:00

En el caso de las páginas web, las tablas no sirven únicamente para organizar la información en una cuadrícula. Se utilizan también para suplir algunas carencias del lenguaje html. Por ejemplo, html no nos permite escribir en columnas, pero podemos usar una tabla y eliminar sus bordes, de forma que el aspecto de la página sea similar. Tampoco se puede definir la anchura de los márgenes de una página, pero podemos insertar una tabla con borde "cero" y definir que solo ocupe el 80 % de la página, de forma que nuestro texto no apure los bordes de la pantalla.

Para insertar la tabla, pulsar:

A) Ahora debemos definir las propiedades generales que deseamos tenga nuestra tabla:

1 - Definir el número de filas y columnas deseados.
2 - Escoger la alineación requerida: izquierda, derecha o centro.
3 - Incluir o no una leyenda: un título o pié explicativo
4 - Grosor de los bordes de la tabla. Si ponemos aquí un cero, nuestra tabla no tendrá bordes y podremos simular diversos efectos, como la doble columna.
5 - Espaciado de las celdas: es el espacio que se dejará en blanco entre una celda y otra. Esta opción será muy útil si vamos a utilizar la tabla para simular una doble columna; así podremos separar apropiadamente las columnas.
6 - Relleno de las celdas: el espacio que quedará entre el borde de la celda y el comienzo del texto.
7 - Anchura y altura de la tabla. Se puede expresar tanto en pixeles como en porcentajes del total de la anchura de la ventana.
8 – Color del fondo para toda la tabla. Obtendremos un menú de colores idéntico al que describimos en la página 4 de este manual.
9 – Utilizar una imagen como fondo. En lugar de un color plano podemos optar por emplear una imagen. Sobre cómo introducir la imagen, consultar el capítulo 10 de este manual.

B) Una vez insertada la tabla, si queremos volver a ver sus propiedades con el fin de realizar alguna modificación, deberemos pulsar sobre la tabla con el botón derecho del ratón. Este es también el procedimiento para poder insertar o eliminar filas, columnas, celdas o la tabla completa:

C) Propiedades de la tabla: las celdas:

1 – Opciones de alineación del texto o imagen que vayamos a insertar en la celda.
2 – Con la opción "la celda abarca" podemos definir tablas no regulares, indicando el número de celdas que ocupa cada fila o columna. Por ejemplo, si definimos que la celda seleccionada debe abarcar 1 fila y 2 columnas, quedará una tabla con este aspecto:

En cambio, si definimos 2 filas y 1 columna:

3 – Estilo de texto. Si seleccionamos "estilo de encabezado" el texto se mostrará centrado y en negrita. Además, en el caso de marcar la opción "inseparable", impediremos que se produzcan cambios de línea en el texto de la celda, de forma que hay que utilizar esta opción con cuidado ya que la tabla puede salirse del tamaño standard de la ventana y obligar al lector a hacer scroll hacia la derecha.
4 – Anchura y altura de la celda, expresados o bien en pixeles o bien en porcentaje de esa celda con respecto a las demás celdas de la tabla.
5 – Fondo de las celdas. Las opciones de colores e imágenes de fondo son idénticas a las que ya hemos explicado al hablar de las propiedades generales de la tabla, solo que aquí se referirán solo a la celda que hayamos seleccionado.

D) Propiedades de la tabla: las filas:

Las opciones que se nos ofrecen se refieren a la alineación del texto y utilización de colores o imágenes de fondo. Ya hemos explicado estas utilidades con anterioridad.

por: UC3

4. Acciones sobre el texto (Netscape Composer)

2006-05-08T08:35:00.000+02:00

A) ENCABEZADOS:

Son los auténticos tipos de letra "standard" de html, pero solo se pueden utilizar en párrafos completos;no permite, por ejemplo, cambiar el tamaño de una sola palabra.Existen 6 tamaños, siendo el nº 1 elencabezado más grande.

B) TIPOS DE LETRA

En esta ventana se nos permite seleccionar el tipo de letra que deseamos para el texto. Intenta escoger los tipos de letra más corrientes, ya que si el ordenador desde el cual se consulta nuestra página, no posee el tipo que has elegido, su navegador le mostrara la letra que él tenga por defecto.

C) TAMAÑO DE LA LETRA

En esta ventana podemos escoger el tamaño de letra que deseamos.
El numero más pequeño equivale también a una letra más pequeña.

D) COLOR DE LA LETRA

Podemos resaltar títulos u apartados de nuestro texto eligiendo un color distinto de letra. Podemos escoger cualquiera de los colores que se nos ofrecen en este menú.
Si no encontramos el color deseado en el menú, podemos pulsar "otros…" y obtendremos una completa paleta en la que seleccionar cualquier tono o matiz que necesitemos.

E) TIPOGRAFÍA

F) LISTADOS, SANGRÍAS Y ALINEADOS

G) LÍNEAS HORIZONTALES

Con objeto de separar contenidos dentro de un documento, existe la posibilidad de incluir una línea horizontal con aspecto tridimensional. Para introducirla, basta con pulsar la tecla:

Una vez realizada la raya, si pinchamos sobre ella, con el botón derecho del ratón, podremos definir las "propiedades de la línea horizontal", es decir, sus dimensiones (anchura y altura), su alineación a izquierda, derecha o centro y si deseamos que tenga o no el sombreado tridimensional.

por: UC3

3. Cómo importar Texto (Netscape Composer)

2006-05-08T08:34:00.000+02:00

Si ya disponemos del texto deseado en un procesador de textos, no es necesario volver a teclearlo en el editor de Netscape. Podemos "traérnoslo" de la siguiente manera:

A) Entrar en Netscape y situarnos en el documento en el que se desea introducir el texto. Colocar el cursor en el lugar deseado.
B) Entrar en el procesador de texto (Word) y abrir el documento con el texto a exportar.
.

C) Marcar el texto:

D) Pulsar:
1. Edición
2. Copiar
.

E) Volver de nuevo la ventana del Editor de Netscape

F) Pulsar:

1. Edición
2. Pegar

El programa tan solo introduce el texto. No respetará los tipos de letra, negritas, cursivas, etc. de nuestro procesador de texto, por lo que todo esto deberemos ponerlo nuevamente ya en el Editor.

por: UC3

2. Propiedades del documento (Netscape Composer)

2006-05-08T08:32:00.000+02:00

A) TÍTULO DEL DOCUMENTO:
.
Ponga a su documento un título significativo:
.

Pulsar:

Formato
Colores y propiedades de la página

Una vez en este apartado:

Pulsar:

Solapa: "General"
Asignar un nombre a la página, en el espacio en blanco que se encuentra tras la palabra "título".

.
B) APARIENCIA GENERAL:

Deberemos estar, al igual que en el caso anterior, en el apartado de "formato" – "colores y propiedades de la página". Hay que pulsar la solapa "Colores y fondo".

Por defecto, aparecerá marcada la opción "usar los colores del navegador donde se visualice", es decir, que en la mayoría de los casos, los colores de su página serán: fondo blanco, los enlaces azules y los enlaces visitados violetas. Se pueden cambiar estos colores, para ello, existen varias opciones:
.

Usar los colores personalizados, es decir, escoger nosotros mismos los colores para texto normal, enlazado, etc.
Usar los "esquemas de color", que son una serie de combinaciones de colores que ofrece el propio programa.
Usar una imagen como fondo. Para ello, deberemos teclear en este apartado la URL de la imagen (Ver Capítulo 10: inserción de imágenes)
por: UC3

1. Trabajar con Netscape Composer

2006-05-08T08:29:00.000+02:00

Para realizar nuestro documento html podemos optar por:

A) REALIZAR un documento nuevo (pantalla en blanco):
.

Pulsar:

1. Archivo
2. Nuevo
3. Página en blanco

.
B) MODIFICAR un documento existente en nuestro servidor:
.

1. Entrar en el navegador Netscape Communicator
2. Buscar la página deseada

3. Pulsar:

- Archivo
- Modificar página

4. Ya podemos operar sobre el documento
5. Si lo deseamos, podemos guardar la página en nuestro disco duro.
6. Para enviar nuevamente el fichero al servidor web, consulte el "Manual de actualizaciones del servidor Web".

C) UTILIZAR una "plantilla" elaborada con un documento ya existente en el servidor

Ejemplo: Necesitamos hacer varios documentos para el departamento de Física:

Elaborar la plantilla:

1. Buscar cualquier página ya existente del Departamento
2. Archivo – Modificar página (ver apartado anterior).
3. Borrar el título y el texto
4. Guardarla en nuestro ordenador como C:\tmp\planti.htm

.
. Para utilizar la plantilla: 1. Abrir C:\tmp\planti.htm
2. Escribir nuevo título
3. Añadir nuevo texto
4. Guardar con un nuevo nombre

por: UC3

Alojamiento de páginas

2006-05-05T08:37:00.000+02:00

Tenemos una primera opción que hemos comentado anteriormente y es el alojamiento gratuito. Numerosas páginas personales se alojan en Portales que ofrecen espacio gratuito. Este sistema suele tener muchas limitaciones y restricciones. Podemos alojar nuestra página gratis en GratisWeb por ejemplo o en Iespana

Para las Webs de empresas o profesionales lo normal es un alojamiento de pago con una dirección propia. Existen numerosas empresas que proporcionan alojamiento. Por ejemplo, en castellano son importantes Arsys.es y Acens.

Para buscar y comparar alojamiento podemos ir a la página BuscaHost

Existen proveedores de los Estados Unidos que proporcionan alojamientos a bajo coste de gran capacidad. Aunque las instrucciones suelen estar en idioma inglés. Por ejemplo Yahoo y Linuxwebhost.

Para buscar y comparar alojamientos en empresas Norteamericanas podemos hacerlo en Hostindex

Podemos tener distintos tipos de alojamientos, dependiendo del sistema operativo o si compartimos el ordenador con otros clientes.

Dependiendo del sistema operativo que utilizan podemos distinguir servidores:

Los servidores Windows que suelen ser más caros.
Y los servidores que emplean el sistema operativo Unix o Linux y que evitan a Bill Puertas.

Ciertas bases de datos o programas funcionarán en unos servidores pero no en otros. Las empresas de alojamiento suelen especificar en las características técnicas de sus servidores que programas y bases de datos soportan.

El tipo de alojamiento puede ser:

Alojamiento compartido. Es el más frecuente. A menos que se trate de una página con muchas, muchas, visitas esta es la opción típica. En este tipo de alojamiento varias páginas comparten un servidor. Cada cliente tiene asignada una parte del disco duro que gestiona con independencia. Un alojamiento compartido es como un apartamento en un edificio.
Servidor dedicado. Todo el ordenador es para una página o empresa. Es un sistema más costoso. Apropiado para empresas con páginas que reciben muchas miles de visitas cada día. Es como tener una vivienda independiente.

Si tiene dudas contrate un alojamiento de bajo coste. En caso de necesitar más recursos, normalmente puede aumentarlos rápidamente comunicándoselo a la empresa de alojamiento. Algunas empresas incluso disponen de sistemas automatizados para solicitar el incremento de los recursos.

por: aulafacil

Gestionar el servidor de Internet

2006-05-05T08:36:00.000+02:00

CREAR UN DIRECTORIO EN EL SERVIDOR

Pulsamos sobre MkDir

Le ponemos un nombre a la nueva carpeta es decir al directorio que deseamos crear. En nuestro ejemplo escribimos en el recuadro CursoFrontPage. Para evitar problemas de compatibilidad con diferentes navegadores es aconsejable poner un nombre sin dejar huecos. Y tampoco utilizar acentos, "ñ" o símbolos diferentes al alfabeto estándar NorteAmericano.

En la ventana del programa se mostraran las diversas carpetas que hemos creado. En este caso se muestran como carpetas amarillas que hemos creado para ordenar los ficheros del servidor.

ELIMINAR

Marcamos el fichero o el directorio que deseamos borrar. Antes de borrar un directorio debemos asegurarnos que este no contiene ficheros que deseamos mantener. Es preciso tener cuidado con lo que se elimina para no perder información o ficheros valiosos.
Pulsamos sobre Delete

SALIR

Pulsamos Close
Y pulsamos Exit

por: aulafacil

Enviar ficheros al servidor de Internet

2006-05-05T08:35:00.000+02:00

ENVIAR PAGINAS DEL DISCO DURO DE NUESTRO ORDENADOR AL SERVIDOR DE INTERNET

Nos movemos por nuestro disco duro para encontrar el subdirectorio donde tenemos colocados los archivos que deseamos enviar.
1. Tenemos un botón en la parte superior en el que si pulsamos aparecen las diferentes carpetas o directorios de nuestro disco duro.

.

Podemos movernos hacia arriba haciendo clic en la flecha superior

El sistema para movernos por las diferentes carpetas del servidor es el mismo sistema.

Si deseamos colocar los archivos en una carpeta que ya esta creada en el servidor simplemente hacemos doble clic sobre la carpeta correspondiente. En el siguiente ejemplo ya tenemos creada la carpeta para el curso denominada "CrearInternet" y hacemos clic dos veces para entra en este apartado y poder colocar los ficheros.

Marcamos los que deseamos enviar. Si queremos enviar varios ficheros a la vez , podemos marcarlos manteniendo pulsada la Tecla Ctrl que se suele encontrar en el extremo Inferior izquierdo del teclado. Otra forma de seleccionar varios ficheros que se encuentran uno a continuación de otro es manteniendo pulsada la flecha de Mayúsculas y pulsando la flecha Arriba o Abajo..
Y pulsamos la flecha que apunta a la derecha tal como se muestra en la siguiente imagen. Es preciso tener cuidado pues si enviamos un fichero con el mismo nombre que otro ya existente en el servidor, eliminaremos, borraremos el anterior.

Cuando tenemos muchos ficheros en los que estamos trabajando y subimos ficheros de manera frecuente puede ser complicado saber que ficheros he actualizado desde última sesión. Para subir únicamente los ficheros que hemos actualizado un truco útil es utilizar Date.

Pulsamos sobre Date. Nos ordena por fechas de actualización. Normalmente los ficheros que hemos actualizado desde el último envío son los que aparece antes de WS_FTP.LOG. En nuestro ejemplo son los cuatro primeros archivos, tal como se muestra en la siguiente imagen.
Marcamos los primeros ficheros que se muestran.

BAJAR FICHEROS DEL SERVIDOR AL DISCO DURO DE NUESTRO ORDENADOR

Nos movemos por los directorios del servidor.
Marcamos los ficheros que deseamos bajarnos.
Pulsamos la Flecha que apunta hacia la Derecha

por: aulafacil

COMO ENVIAR LAS PAGINAS WEB A LOS SERVIDORES CON FTP

2006-05-05T08:34:00.000+02:00

OBTENER EL PROGRAMA PARA REALIZAR EL ENVIO

Las páginas las creamos y las guardamos en el disco duro de nuestro ordenador. Para que puedan ser vistas en Internet tenemos que enviarlas desde nuestro ordenador al ordenador conectado a Internet. Es lo que se denomina hospedar una página en un servidor de Internet.

Existen diferentes procedimientos para enviar las páginas que hemos creado. El procedimiento que preferimos en utilizar un programa especializado en la transferencia de ficheros. Uno especialmente bueno es el WS_FTP95 y las versiones posteriores.

El programa WS_FTP es gratuito para estudiantes y páginas no comerciales y barato para propósitos comerciales.

Podemos bajarnos directamente el programa de la dirección.

ftp://ftp1.ipswitch.com/ipswitch/product_downloads/ws_ftple.exe

Si quiere saber Cómo bajar el programa

Existen varios buenos programas para transferir ficheros que podemos utilizar. Y varias páginas de Internet en las que podemos obtenerlos. Por ejemplo en softonic.htm

Una vez en localizado el programa que deseamos, lo bajamos al disco duro de nuestro ordenador. Cómo bajar el programa

Una vez que hemos descargado el programa desde Internet al disco duro de nuestro ordenador debemos instalarlo

COMO ENVIAR LOS FICHEROS

Una vez que tenemos instalado el programa pulsamos sobre el programa ejecutable para ponerlo en marcha. En nuestro caso pulsamos sobre la imagen FTP

Nos aparece el Cuadro Propiedades de Sessión. Esta es la parte que puede dar algún problema. Los datos para rellenar este cuadro los facilita la empresa o web donde hemos decidido alojar nuestra Web. Suelen enviar la información en un E-mail cuando se contrata el servicio hospedaje con las instrucciones para rellenar este cuadro. El ejemplo que mostramos a continuación corresponde al alojamiento de aulafacil.org. Si no conocemos el Host Type, es decir el tipo de servidor ponemos Automatic detect para que el mismo programa se ocupe de investigarlo.

Y pulsando Aceptar

Si todo va bien aparece un cuadro parecido al siguiente.

por: aulafacil

Creación de una Página Personal gratuita

2006-05-05T08:33:00.000+02:00

En numerosos Portales podemos crear una página personal.

Por ejemplo en Iespana,

Desde la portada. Pulsamos sobre Mi sitio

Pulsamos sobre Crear

Aparecen las condiciones del contrato. Pulsamos al final de la página Si acepto las condiciones.
En la página siguiente ponemos el nombre y los datos del sitio. Por ejemplo aaprender y un título por ejemplo "los mejores cursos".
Nos hacemos miembros de I-club dando nuestros datos personales y una dirección de E-mail auténtica.
Ahora tenemos que activar nuestro sitio utilizando la clave de activación que recibimos en la dirección de E-mail que hemos dado.
Entrando de nuevo a Mi sitio. En la parte superior izquierda de la página se encuentran las herramientas de diseño, Diseña tu sitio .Una forma sencilla de realizar una página es utilizar el Editor HTML.

Otros sitios que ofrecen espacio gratuito para páginas personales.

Demasiado

Pobladores

por: aulafacil

La Dirección de la página. Los Dominios en Internet

2006-05-05T08:32:00.000+02:00

Con relación a la dirección de la página tenemos dos primeras opciones:

Si queremos tener nuestra propia dirección. Como por ejemplo Aulafacil.com. Tenemos que pagar el registro.
Otra opción es utilizar un alojamiento gratuito. El alojamiento gratuito tiene ciertas limitaciones por lo que se suele utilizar para páginas personales. Una dirección del tipo http://geocities.com/Paris/2226/principal.htm

Diferentes Portales proporcionan alojamiento gratuito y una dirección a las páginas personales. Por ejemplo, el Portal Iespana y una posible dirección seria http://www.iespana.es/aaprender/

REGISTRO DE UN DOMINIO PROPIO

Si queremos tener nuestra propia dirección tenemos que buscar un nombre que no este registrado y pagar el registro.

Podemos registrar diferentes terminaciones:

La terminación .com es para las empresas y procede de company
La terminación .net estaba pensada para las redes.
La terminación .org se refiere a organization. Organizaciones no lucrativas.

Las marcas de empresas reconocidas, se encuentran protegidas por la legislación. Las empresas que ya tienen direcciones funcionando en Internet se encuentran protegidas por las legislaciones.

Supongamos que deseamos que nuestra página se denomine PedazodePagina.com

Nos vamos por ejemplo a Arsys

Tecleamos el nombre que deseamos registrar. Por ejemplo PedazodePagina
Y pulsamos Enviar

Una vez que conseguimos localizar un dominio que este libre y por tanto no registrado, pulsamos Registrar. A continuación, seguimos las distintas páginas para dar la conformidad al contrato y dar los datos necesarios.
Completamos el formulario de Pago.

Otras empresas donde podemos realizar el registro con las instrucciones en castellano son Acens

Nominalia

El registro de dominios con terminación .es podemos realizarlo directamente en Nic

Podemos realizar el registro en numerosas páginas. Todas tienen la misma validez y son parecidas. Un registro muy barato y sencillo pero con las instrucciones en ingles Dotster. Otro registro es el de Netsol

Podemos igualmente realizar el registro con las terminaciones para los diferentes países. Por ejemplo en la página de VeriSing

Los aspectos legales relacionados con los dominios podemos consultarlos en Dominiuris

PAGINAS GRATUITAS

Si deseamos tener una página gratuita no necesitamos realizar el registro del dominio. El Portal donde alojemos de forma gratuita la página será la que nos proporcione la dirección. Por ejemplo si utilizamos Iespana la dirección puede ser http://www.iespana.es/cursocrear/

En cualquier caso si tenemos una empresa es interesante registrar el dominio con la terminación .com y tenerla reservada.

por: aulafacil

Creación y alojamiento de páginas Web

2006-05-05T08:31:00.000+02:00

Para crear páginas Web como AulaFacil.com podemos emplear muy diferentes métodos y programas.

En cualquier caso para tener una página en Internet necesitará:

Crear los ficheros o archivos que componen la Web. Una Web normalmente se compone de un cierto número de páginas. Por ejemplo, esta página del curso, que es un fichero con terminación htm.
Una dirección de Internet. Por ejemplo la dirección www. aulafacil.com. Por ejemplo www.elpais.es
Tener un alojamiento o servidor en Internet donde colocar la Web. Lo normal es construir la web y tenerla en el disco duro de nuestro ordenador y luego enviarla a un servidor de Internet. Un servidor de Internet en realidad es otro ordenador que está permanentemente encendido y conectado a la Red.
Y enviar los ficheros normalmente desde el disco duro de su ordenador al sitio donde se alojará la página. Algunos Portales permiten la creación y alojamiento de páginas personales directamente en Internet de forma sencilla.

A) LA CREACION DE LOS FICHEROS.

La construcción de las páginas de una Web se suele realizar utilizando diferentes programas editores. Los programas editores permiten la creación de páginas de una forma sencilla sin tener que programar cada instrucción del lenguaje Html.

Si dispone de Microsoft Office seguramente tiene instalado en su ordenador el programa Front Page. Este programa le permite crear de una forma sencilla los ficheros que componen las páginas Web. En AulaFacil dispone de un buen curso sobre creación de páginas Web utilizando Front Page.

Los programadores avanzados suelen emplear varios programas para la creación de las páginas. Uno de los favoritos es el Dreamweaver

Si dispone del navegador Netscape una opción sencilla para crear rápidamente páginas Web es emplear el programa Netscape Composer. Puede realizar nuestro curso de Netcape Composer entrando en el siguiente enlace Composer.

Otra opción es programar directamente en HTML. . Esta es una opción para los que desean profundizar y comprender el lenguaje que se encuentra detrás de las páginas de Internet. Puede acceder al curso sobre HTML en el siguiente enlace HTML. Este curso facilita comprender el código que se emplea en las páginas

B) LA DIRECCION DE INTERNET

Existen dos opciones:

Tener una dirección propia del tipo www.aulafacil.com. Esto es lo que se denomina una dirección de primer nivel.
Utilizar una dirección gratuita que nos proporciona algún Portal de Internet del tipo www.geocities/yosemite/Aqui/lapaginadenacho

Puede ver el tema de los Dominios en la siguiente página Dominios

Si desea crear una página personal y no necesita que la Web disponga de una dirección de primer nivel puede crear y alojar su página en alguno de los Portales que ofrecen esta posibilidad.

Algunos Portales que proporcionan alojamiento y facilidades para crear páginas personales son Iespana y Pobladores. Puede ver la explicación en Páginas gratuitas

Para realizar las páginas necesitará seguramente imágenes o Gif y diferentes complementos para darle vistosidad a las páginas. Le recomendamos realizar el curso sobre Buscadores especialmente la parte referida a la búsqueda de programas informáticos.

C) EL ALOJAMIENTO

El alojamiento puede ser gratuito. Normalmente es una opción para páginas personales. Varios Portales en Internet proporcionan alojamiento gratuito con ciertas restricciones. Páginas gratuitas
Para las empresas lo normal es pagar un alojamiento para sus páginas. Una explicación más detallada la puede encontrar en Alojamiento

D) ENVIO DE LAS PAGINAS A INTERNET

Para subir los ficheros que ha creado desde el disco duro de su ordenador al servidor de Internet disponemos de varias opciones. Nuestra opción favorita es utilizar un programa especializado FTP. Puede ver como utilizarlo pulsado sobre el enlace siguiente FTP.

por: aulafacil

Algunos comentarios (FrontPage 2000)

2006-05-05T08:29:00.000+02:00

A la izquierda del Front Page tenemos las distintas opciones de Vistas (Informes, Exploración, etc.). En nuestra opinión se trata de una superestructura demasiado pesada para una Web sencilla como las nuestras. Una Web compleja, por ejemplo de comercio electrónico, con catálogos, etc.; una Web que sea desarrollada por un equipo de diseñadores, sí merece cuidar el orden y pulcritud en el trabajo, pero para nosotros es una carga más que una ayuda.

Queremos que distingas la Vista Carpetas de la Lista de Carpetas. La primera es un ítem más de los señalados en el párrafo anterior. La Lista de carpetas en cambio sí nos parece muy útil. Ya dijimos que es aquí, y no en el Explorador del Windows, donde deben realizarse los cambios de nombres, movimiento de ficheros, etc.

Pero también podemos hacer que desaparezca esta franja de vistas, y poner y quitar la lista de carpetas. A veces, el deseo de disponer de mayor espacio en pantalla puede llevar a quitar de la misma los elementos citados. Ambas opciones se encuentran en el menú Ver.

Hablamos en su momento de los Informes de vínculos rotos. Otro informe interesante es el de páginas lentas. Se encuentra en Ver – Informes. Como orientación, una página no puede tardar en cargarse con un MODEM de 56.000 bps más de 20 – 25 seg. Cuando tienes una página cualquiera en pantalla, a la derecha de la línea de estado (abajo) da esta información referida a la pantalla actual.

En el mercado existen unos cuantos programas para hacer más vistosas las páginas Web. Son programas para realizar efectos, transiciones, marquesinas, etc. Un ejemplo es el Anfy.

También existen páginas Web que proporcionan recursos. Hemos seleccionado algunas:

Para hacer marquesinas (banner):
- www.quickbanner.com
- www.spanishbanner.com
Gráficos en formato Gif, animados o no:
Recursos en general (incluyendo con frecuencia marquesinas y gifs):
por: javier zabala

Publicación en la web en el proveedor de Internet con FrontPage 2000

2006-05-05T08:28:00.000+02:00

Teniendo la Web en el Front Page, solicita Archivo – Publicar Web. En nuestro caso la dirección es: http://centros5.pntic.mec.es/~majadaho/public. Es normal que tarde unos minutos en ser enviada por completo.

Otra solución es hacer FTP con un programa del estilo del CUTE. Conectas con el ordenador del PNTIC (centros5.pntic.mec.es) pones en la ventana de la izquierda la carpeta en la que está tu Web, y en la derecha ~majadaho/public, y mueves los ficheros como si estuvieras en el explorador del Windows.

En ambos casos pide contraseña.

A veces el proveedor de Internet que aloja nuestra página trabaja con sistemas operativos que distinguen las mayúsculas de las minúsculas, y que no admiten más de ocho caracteres en la denominación de los ficheros. Esto puede suponer que vínculos o imágenes que no daban problemas en tu ordenador, no funcionen o no se vean al remitirlos al proveedor. Así: puedes tener un fichero llamado Fichero.htm y un vínculo a él que diga fichero.htm. Cuando lo envíes al proveedor, no funcionará.

por: javier zabala

Marcos con FrontPage 2000

2006-05-05T08:27:00.000+02:00

Son unos elementos que facilitan la navegación. En la página Web del CPR puedes ver un marco. Te ofrece vínculos a las distintas páginas. Lo característico es que en cualquier página en que estés, tienes el marco a la vista, por lo que navegas con rapidez a donde quieres. Sólo los usaremos en este sentido, aunque también se emplean para mejorar la estética, de forma semejante a las tablas pero con más potencia.

Para crear un marco es necesario hacerlo con una plantilla. Archivo – Nuevo –Página – Páginas de marcos. Eliges uno cualquiera viendo en Vista previa su resultado.

Al abrir la plantilla aparecen dos botones:

Establecer página inicial consiste en señalar qué página Web irá en ese marco cuando arranque, poniendo su dirección URL.
Nueva página significa que abres una página en blanco para diseñarla ahora, y será la que luego aparecerá en el marco.

El reborde azul corresponde al área activa del marco. En el menú de marco puedes eliminar esa área, o dividirla en dos (filas o columnas).

Es elemental modificar las dimensiones de cualquiera de las áreas con el ratón.

Para un caso como el del sitio Web del CPR, la página del marco debe ser la inicial, o sea, index. Luego vinculas a las distintas partes del marco las páginas iniciales correspondientes, como hemos dicho. Les podrías llamar índice1, índice2, etc.

Hay que guardar la página de marcos en Archivo – Guardar como. Ya hemos dicho que le llames index.

También hay que guardar las páginas que hayas ubicado en cada área, porque han sufrido una modificación. Para ello, las activas y pides Marcos – Guardar página como. Si no lo haces, al cerrar la página completa del marco te pregunta si deseas guardar las páginas de cada área, y contestas que sí.

El último paso es cómo crear hipervínculos a marcos de destino. En la página Web del CPR, cuando pides Actividades, o Centros, queremos que esos contenidos no salgan a pantalla completa, sino en uno de los marcos (el área más grande) permaneciendo visible la relación de vínculos en otro marco.

Abre el cuadro de diálogo Marco de Destino y puedes elegir el marco que desees. El significado de El mismo es el mismo marco en que estaba el vínculo. Toda la página se explica por sí mismo. Página nueva es abrir una página nueva, de manera que tendrías dos Internet Explorer abiertos con dos páginas: la del marco y la nueva con el destino del vínculo.

Haciendo clic con el botón derecho en un marco y pidiendo propiedades de marco, puedes poner un título al marco, que es el que luego debes poner en el cuadro de texto Destino, en caso de que el marco de destino no sea ninguno de los tres del párrafo anterior.

Muchas veces todos los vínculos de un marco tienen como destino otro marco fijo. En este caso se puede predeterminar. Haciendo clic con el botón derecho en el marco donde están los vínculos, pide Propiedades de página. En la pestaña General, cuadro de texto: Marco de destino predeterminado, señalas adonde irán los vínculos.

Los marcos se eliminan en Marco – Eliminar marco.

por: javier zabala

Formularios con FrontPage 2000

2006-05-05T08:26:00.001+02:00

Un sitio Web puede generar correspondencia hacia su propia entidad. En el sitio Web del CPR hay un formulario de Solicitudes para inscribirse a cursos por vía telemática. Es frecuente en la red. Por ejemplo si deseas un proveedor de Internet gratuito, tendrás que darte de alta, y solicitará tus datos mediante un formulario.

En Archivo – Nuevo – Página puedes cargar plantillas de formularios. Por ejemplo el llamado Comentarios. En Vista Previa puedes observar sus posibilidades.

El formulario es algo típico de Access, aunque también se puede crear en Word. De todas maneras vamos a tratarlo aquí, ya que nos parece un capítulo menos conocido que el de las tablas.

Antes de ponerte a insertar campos de formulario, son precisas unas ideas generales:

Cuando insertas el primer campo de tu formulario, Front Page añade los botones Enviar y Restablecer. En los sucesivos campos no. La idea es que todo formulario debe tener un botón Enviar, y así lo prevé ya desde el principio. Estudiaremos más abajo este tipo de botones.
En cuanto al botón Restablecer, su acción es borrar todos los campos del formulario, para el caso de que hayas introducido errores y quieras volver a empezar.
Formulario es, propiamente, lo que aparece cerrado entre un marco de línea discontinua. Por eso podríamos tener en la misma página varios formularios. Observa el formulario siguiente, en el que se han descrito los principales tipos de campos:
La mayoría de los campos se modifican de tamaño como cualquier imagen

Cuadro de texto
Rectángulo vacío. El visitante de la Web puede rellenar el él campos de escritura libre, como sus apellidos.
Cuadro de texto con desplazamiento
Cuando la respuesta es más larga se pueden usar estos campos que llevan barras de desplazamiento.
Casilla de verificación
El visitante de la Web la activará o no. Cuando hay varias, cosa frecuente, puede activarse una, o varias o ninguna. Por ejemplo: un texto puede estar subrayado, en negrita y/o en cursiva. Puede tener todas estas propiedades, o una o ninguna.
Botón de opción
Parecido, pero aquí ha de elegirse uno y sólo uno. Por ejemplo, sexo: hombre o mujer.
Menú desplegable
En el formulario de solicitud de inscripción en curso, de la página Web del CPR hay varios campos de menú desplegable. Así, en el tipo de Centro del profesor, las respuestas son: Público, Privado y Concertado. También son cerradas las respuestas sobre si el profesor es de Primaria o de Secundaria. En ejemplos de este tipo es preferible introducir previamente todo el elenco de respuestas, y que el visitante sólo tenga que elegir una, sin darle opción a escribir. De otra forma se recibirán respuestas variadas: profesor de ESO, profesor de Secundaria, Secundaria, etc.
Los valores se introducen de la siguiente manera: se hace clic con el botón derecho en el campo, y se elige Propiedades de Campo de Formulario. Ahí vas dando a Agregar introduciendo todas las posibles opciones.
Botón de comando
Después de crearlo, haces clic con el botón derecho y eliges: Propiedades de Campo de Formulario.
En Valor/Etiqueta pondrás el texto que quieras. Por ejemplo, para un botón de tipo Restablecer puedes preferir el texto Borrar.

En Tipo de botón, ya te hemos hablado de los tipos Enviar y Restablecer. En el caso del botón Enviar, habrá que señalar nuestra dirección de correo electrónico. Esto se hace en Propiedades de Formulario y lo explicamos al terminar los campos de formulario.+
Imagen
Sirve para que un botón lleve una imagen en lugar de un texto.

Falta decir que los campos suelen llevar antes o después etiquetas, que señalan lo que esperamos que el usuario teclee en ellos. Estas etiquetas se teclean directamente en el formulario, delante o detrás de los campos.

Propiedades del formulario

Haciendo clic con el botón derecho en cualquier parte del formulario, puedes elegir la opción Propiedades del Formulario.

La principal es borrar donde dice Nombre de Archivo y rellenar, en su lugar, la Dirección de correo electrónico.

Haz clic en el botón Opciones, y en la pestaña Resultados por Correo electrónico.

Puede ser interesante que con el formulario te remitan los nombres de los campos, y que vaya rellena por ti, por el creador de la página Web, el asunto. De esta manera, cuando recibas los correos, enseguida sabrás a qué se refieren.

Cuando un usuario te envía un formulario relleno, si todo ha ido bien, recibirá al instante un acuse de recibo educado. Pero puede suceder que tú quieras diseñar esa contestación. Puedes hacer una página Web para ello y poner en Página de Confirmación su dirección URL.

Una cuestión estética es alinear esos letreros y campos. La manera seria, aunque algo pesada, de hacerlo es mediante una tabla. Se crea dentro del formulario una tabla, por ejemplo de dos columnas. Así, en la columna de la izquierda, por ejemplo, pones los letreros y etiquetas, y en la de la derecha los campos. Otra forma más primitiva consiste en elegir el estilo Con formato, que lleva consigo un tipo de letra feo, pero que facilita los ajustes, ya que todas las letras, espacios y signos de puntuación tienen la misma anchura.

Las páginas Web profesionales no manipulan a mano los formularios recibidos, sino que los insertan directamente en ficheros, bases de datos, etc. Nosotros nos conformaremos con imprimirlos.

por: javier zabala

Inserción de componentes con FrontPage 2000

2006-05-05T08:26:00.000+02:00

Comentarios

Se trata de incluir en la página Web comentarios que no salgan, no estén accesibles, al visitante. Se consiguen en Insertar – Comentarios. Sólo se ven en Vista Normal, no así en Vista Página. El objetivo es hacerte anotaciones que te recuerden asuntos pendientes. Por ejemplo, en una Web más importante, creada por un equipo de personas, las anotaciones para que los demás estén al tanto de los detalles a tener en cuenta, suelen ser interesantes.

Contadores de visitas

Son para contar el número de visitantes. Los podemos poner en la página principal (index), que es por donde los visitantes suelen acceder a nuestro sitio Web. También se pueden poner en otras páginas, y así sabremos cuáles son los asuntos que más interesan a nuestros visitantes.

Se crean en Insertar – Componente –Contador de visitas a la página.

Restablecer pone el contador en el número que le digamos, por ejemplo a 1 de enero lo podemos poner a cero.

Número fijo de dígitos quiere decir que saldrán los ceros a la izquierda de las cifras significativas.

Administrador de titulares

El nombre no indica bien de qué se trata. Consiste en crear una sucesión de imágenes. Cada ciertos segundos se van sustituyendo. Se puede asignar un vínculo a ese espacio de la pantalla.

Fecha y hora

Los internautas agradecen saber si nuestras páginas están actualizadas, o, por el contrario, su información lleva ya mucho tiempo y, presumiblemente, se ha descuidado el mantenimiento del sitio Web. Al Insertar - Fecha y Hora aparece la fecha de la última modificación. Automáticamente, cuando actualicemos la página, se cambiará la fecha por la de este día.

Marquesina

Ofrece marquesinas de posibilidades muy limitadas.

Puede ser útil mirar Estilo – Formato – Fuente , Borde, etc. Prueba con las diversas opciones, por ejemplo con Comportamiento – Alternar.

Botones activables

El objetivo es crear vínculos más estéticos que los que meramente contienen texto. Puedes crear algún efecto, cuando el puntero del ratón pasa por encima. En Personalizado se puede añadir sonido o alguna imagen. Naturalmente se puede indicar un vínculo.

Otros componentes

Se dispone de más componentes que vemos menos aplicables:

Se puede insertar una hoja de cálculo Excel en la página Web. Así por ejemplo, un banco puede ofrecer el cálculo de una hipoteca. Podríamos decir que es una hoja mixta, en la que el banco puede crear la hoja con su formato, sus titulares, sus fórmulas, y después el visitante, partiendo de esos datos, completa su caso personal y obtiene los resultados que necesita.

Imagen programada o Inclusión programada de página. Deseo que una determinada imagen, o una página entera, entre en vigor a las cero horas del 1 de enero. La creo ahora y la envío a mi proveedor de Internet como imagen programada, indicando en qué momento debe hacerse pública.

Existen otros componentes, pero el lector apreciará que corresponden a un curso de otro nivel.

por: javier zabala

Tablas con FrontPage 2000

2006-05-05T08:25:00.000+02:00

Las tablas permiten bastante juego a la hora de situar textos por la pantalla, son la manera de saltarse las limitaciones que el lenguaje HTML tiene con la ubicación de los textos.

El 90 % de las posibilidades y manejo de las tablas en Front Page coincide con el modo de usar tablas en Word, y no lo vamos a reiterar.

Una diferencia pequeña pero importante es que una celda se selecciona presionando la tecla Alt mientras se hace clic con el ratón. (O en Tabla – Seleccionar – Celda).

Observa las Propiedades de tabla que se obtienen en el menú contextual (clic con el botón derecho), o en Tabla – Propiedades – Tabla.

Especificar ancho en porcentaje facilita que la tabla se ajuste a la ventana en caso, por ejemplo, de utilizar marcos.

Para eliminar los bordes, pon en Tamaño un 0.

Distinguir un borde claro y otro oscuro proporciona un interesante efecto 3D.

Se puede poner una imagen de fondo a la tabla.

Observa Tabla – Insertar – Título y en su menú contextual las Propiedades de título, que permiten situarlo también debajo de la tabla.

Reproducimos ahora el cuadro de diálogo de Propiedades de celda que se obtiene en su menú contextual.

Por defecto, una celda ocupa una fila y una columna, pero se puede determinar otra cosa, lo cual desplazará la columna o fila correspondiente, y quedará una tabla no rectangular.

Algunas opciones son idénticas a las de Propiedades de Tabla, sólo que aplicadas a la celda seleccionada.

No ajustar afecta al ancho de la celda cuando se rellene. En efecto, lo habitual es que, si el texto de la celda excede de su ancho, entonces este texto crea una nueva línea dentro de la misma celda, que ve incrementada su altura. Pues bien, la opción No ajustar va aumentando el ancho de celda a medida que se teclea, sin pasar a otra línea.

También existe Tabla – Autoajustar que ajusta el ancho de una columna al de la celda que tiene el texto más extenso.

La barra de herramientas de Tablas es parecida a la del Word.

por: javier zabala

Imágenes con FrontPage 2000

2006-05-05T08:22:00.000+02:00

Al trabajar con imágenes en un sitio web es importante saber que los archivos que se manejan en Internet son de dos clases: los .jpeg y los .gif.

Los primeros se utilizan para fotografías, las cuales al utilizar este formato comprimido, ocupan menos al costo de bajar un poco la calidad.

El formato .gif, se utiliza para títulos, logotipos, y gráficos con menos de 256 colores. También se pueden usar para fotos pero la calidad será peor.

Si el fichero no es de fotografía, sino que utiliza colores planos, entonces suele manejar pocos colores. Si no llega a 256 colores, Front Page guardará la imagen en formato GIF. En cambio los ficheros de fotos los guarda en formato JPEG, que realiza cierta compresión de la imagen. La cuestión es que un fichero de fotografía ocupa muchísimo espacio (una pantalla viene a ser 1’5 Mb) y es necesario reducirlo, aunque sea a costa de un poco de calidad. El ordenador pregunta la razón de compresión que, por defecto, es de un 75 %.

La forma de insertar imágenes está en el menú Insertar – Imágenes, que tiene dos opciones: en Imágenes ofrece los clip art instalados con el Office 2000. En Desde Archivo, podemos buscar cualquier fichero de imágenes, por ejemplo en los CD comerciales con miles de imágenes, o también los que aporta el disco 2 del Office 2000, que no se instalan en el disco duro del ordenador.

Cuando se insertan imágenes de un CD ROM, o de un programa como el Office, el Front Page únicamente crea el vínculo correspondiente a esa imagen en su ubicación actual. Al enviar la página al proveedor que nos la aloja, no tendrá ese CD ROM, y no aparecerá la imagen. La solución es empezar por copiar la imagen a la carpeta en la que estamos trabajando la página web e insertarla desde ahí.

Otra forma de insertar una imagen es crearla y organizarla en otro programa y después cortar y pegarla en el Front Page. Y es que Front Page dispone de escasas posibilidades para tratamiento de imágenes individuales. El propio Word dispone de los letreros tipo Word Art, las autoformas, los gráficos; todos estos elementos se pueden cortar y pegar después en Front Page. No digamos si utilizas un programa de diseño.

Si se trabaja con un escáner, se puede cargar la imagen directamente desde el Front Page (también podrías hacerlo pasando previamente por otro programa). Se trabaja desde Insertar – Imagen – Escáner – Origen. En este punto seleccionas cuál es tu dispositivo y das a Adquirir.

Acerca del Tamaño de las imágenes

Como ya dijimos antes, el tamaño de los archivos gráficos en una página Web debe ser pequeño para optimizar el tiempo de descarga de la página. Si abrimos la imagen en algún editor como PhotoShop o el Microsoft PhotoEditor, se debe elegir ver la imagen al 100% para saber cuál es el tamaño real de la imagen que se verá en la página. Con esto se logrará un mayor control de la misma.

Otro punto importante es que nunca es conveniente insertar una imagen grande y luego achicarla mediante los manejadores de la misma (los pequeños cuadraditos que aparecen en los bordes para cambiar el tamaño) del Front Page, ya que si hacemos esto, se achica la imagen que se ve en pantalla pero no el tamaño del archivo.

Para cambiar el tamaño abrimos la imagen en el editor y modificamos el zoom hasta el tamaño deseado.

En PhotoShop se debe ir a Image/Image size, en los cuadros de la unidad, seleccionamos Percent y teniendo marcada la casilla Constrain Proportions. A continuación se indica en cualquiera de los cuadros de Height o Width (pero solo en uno) el valor del zoom, con lo cual la imagen se reducirá al tamaño deseado. Después se guarda la imagen, con el mismo nombre o con otro para saber que es un archivo distinto.

Si usamos el Microsoft PhotoEditor el proceso es similar. Debemos ir a Imagen/Cambiar tamaño y fijarse que NO esté tildada la casilla Permitir distorsión una vez hecho esto, se varía el porcentaje de Alto o Ancho.

Propiedades de imagen

Accedes a ellas desde Formato – Propiedades, o haciendo clic con el botón derecho en la imagen.

En la pestaña General, Origen de la imagen es de dónde la has tomado, el nombre y ubicación del fichero de origen. Este campo lo rellena Front Page él sólo cuando insertas la imagen, y no debes tocarlo.

Te ofrece guardarla como GIF o JPEG, de lo que hablamos más arriba.

Las Representaciones alternativas consisten en que si la imagen es grande y va a tardar en cargarse, se puede ofrecer un bosquejo suyo en baja resolución o un breve texto, en el mismo lugar que la posterior imagen.

En Apariencia puedes determinar la alineación y tamaño exacto de la imagen, en caso de que no te baste modificarla con el ratón.

Debajo de la referencia a los formatos GIF y JPEG se encuentran las casillas Entrelazado y Barridos progresivos. Se refieren también a que a la hora de cargar la imagen puede hacerse mediante un efecto, por el que la imagen va apareciendo como borrosa, por líneas, hasta su carga completa. Puede ser más útil en imágenes de cierto volumen, que tarden en cargarse.

No confundas estas propiedades con las de página, que se encuentran en Archivo – Propiedades.

Te mostramos a continuación la barra de herramientas de imágenes:

La posibilidad de añadir texto a una imagen sólo existe en el formato GIF, igual que la de establecer un color como transparente. Pasar a miniatura consiste en que se carga una miniatura de la imagen, considerando que la carga completa va a ser lenta y puede no ser indispensable para el visitante. Si éste desea la imagen completa, simplemente hace clic en la miniatura. Ver el plano de acceso al CPR en su página Web.

Ubicación

Ningún estilo de Ajuste: la imagen se ajustará como un carácter más.
Izquierda: La imagen se alineará a la izquierda y se rodeará con texto.
Derecha: Similar al anterior.
Ningún estilo de ubicación: en este caso, no se podrá mover la imagen de la ubicación que tiene, para hacerlo, se selecciona:
Relativo: en este caso se pueden especificar los valores de ubicación y tamaño en los cuadros de diálogo, así como el orden Z, es decir, la profundidad de la imagen con respecto a los demás objetos de la página, es decir, atrás o adelante del texto, o de otras imágenes.
Absoluto: este método se utilice para ubicar una imagen con total libertad, pero en este caso, el texto no se ajustará a ella.
Recortar: con esta herramienta podemos eliminar parte de una imagen que no precisemos, con lo cual también reduciremos su tamaño. Hacemos clic en la esquina de la porción de imagen que deseamos conservar y desplazamos el ratón hasta lograr un cuadrado. Para recortarla, se vuelve a hacer clic en el botón recortar en la barra de herramientas.
Establecer color transparente: haciendo clic en un color de la imagen, este se volverá transparente. Sólo se puede elegir un color.
Descolorar: es útil cuando se desea utilizar la imagen en el fondo y que no interfiera con el texto.
Nuevo muestreo: cuando modificamos el tamaño de la imagen con los manejadores, dijimos que no se modificaba el tamaño del archivo, pero si luego de achicarla, apretamos este botón, se hará un nuevo muestreo y se reducirá el archivo de modo que el tamaño normal sea el que hemos modificado nosotros con los manejadores.
Restaurar: restaura a la imagen a su estado original, si es que hicimos algún cambio en ella.

Mapas de imágenes

Es algo que rebasa el propósito de este curso y que nos limitamos a describir. Imagina que tienes en una pantalla el mapa de España, con las autonomías dibujadas. Quieres unos vínculos de forma que si haces clic en la autonomía de Madrid, te lleva a una página sobre ella, si das en la de Galicia o Andalucía, o en cualquier otra, te llevarán a su página respectiva. Es decir, se trata de, a partir de una imagen, crear en ella unas zonas activas, cada una con un vínculo. Estas zonas pueden ser rectangulares, o también poligonales.

por: javier zabala

Hipervínculos con FrontPage 2000

2006-05-05T08:20:00.000+02:00

Así como los libros son secuenciales: una letra y otra y una página y así hasta el final; los documentos multimedia no: son hipertextos. El visitante va a navegar por los apartados que más interés le ofrecen, se detiene en un punto, vuelve atrás: navega.

Como consecuencia, documentos como páginas Web no constan de un único fichero secuencial, sino que están ramificados. La página Web del CPR ofrece en una pantalla los datos básicos del mismo, en otra las actividades previstas para el curso, hemos incluido el fichero de biblioteca, para que se pueda consultar sin necesidad de ir hasta el CPR, los datos de los asesores, los Centros de la zona y otras informaciones relevantes. Hay que organizar las posibilidades de navegación de una pantalla a otra. Ha de plantearse una navegación clara, sin confusiones, sabiendo en todo momento dónde estamos. Hay referencias cruzadas. Así, desde las actividades hay que facilitar el acceso al formulario que permite inscribirse por Internet; o al relacionar a los asesores, viene bien dejar una llamada a las actividades que cada uno lleva.

Cuando se va a crear una página Web es importante pensar los contenidos y su estructura, dedicando una página a cada tema que tenga cierta entidad o cierta unidad, y estableciendo los vínculos correspondientes entre páginas. Hablando con más propiedad, nos estamos refiriendo a un sitio Web, que estará compuesto de varias páginas Web.

Suponiendo que ya sabes crear las páginas aisladas, se trata ahora de estudiar cómo se crean los vínculos, los botones, que llevan de una a otra.

Verás que es muy fácil. Seleccionas las palabras de texto o la imagen a las que vas a asociar el hipervínculo y solicitas Insertar – Hipervínculo o más sencillamente su icono . Obtienes la siguiente pantalla:

Como estarás en la carpeta adecuada, en pantalla salen las páginas de tu sitio Web, y con hacer doble clic en la que te interese has creado el vínculo. Ya está. Lo que has hecho con el doble clic es poner en la casilla Dirección URL el nombre del fichero de la página de destino. (sin http://).

Si quieres, puedes grabar ya la página. Al abrirla desde un navegador (Internet Explorer) los vínculos salen subrayados y en color distinto (si eran vínculos asociados a unas palabras). En cualquier caso, el puntero del ratón toma forma de mano al pasar por encima. Además, si detienes el ratón, puedes ver la dirección de destino a la que remite.

La página con la que se abre tu sitio Web ha de llamarse index.

Los vínculos pueden probarse en Vista previa. También en Vista normal apretando la tecla Ctrl a la vez que se hace clic con el ratón.

Los vínculos tienen cierta variedad, cierta riqueza que pasamos a comentar.

Puedes crear un vínculo a un sitio Web externo al tuyo, es decir, crear en tu página un enlace, por ejemplo al PNTIC. Eso es crear un hipervínculo externo. Para eso, en la casilla Dirección URL has de poner su dirección completa (comenzando por http://). En la pantalla mostrada inmediatamente arriba hemos resaltado unos iconos. El primero de ellos permite navegar por la red, de forma que cuando visites la página que deseas, su dirección pasa a la casilla Dirección URL del cuadro de diálogo de creación de hipervínculos. No tienes que teclearla y además has comprobado que es correcta.

Puedes crear vínculos a páginas Web que estén grabadas en tu ordenador, pero que no pertenezcan al sitio Web que estás creando. Puedes buscarlas con el siguiente icono, que es una especie de Explorador del Windows para este caso.

Direcciones absolutas y relativas

Una dirección absoluta de un fichero o una página es del estilo: c:\Mis Documentos\Mis Web\index.htm (para un vínculo que desde otra página nos lleve a la inicial).

Si pones esto en la casilla de Dirección URL, el vínculo funciona trabajando en tu ordenador. Pero ¿qué sucede cuando envías tu sitio Web a tu proveedor de Internet? Probablemente lo has alojado en una carpeta del estilo ~majadaho dentro del ordenador del PNTIC. Tu página index no está en la misma ruta que como estaba en tu ordenador. No está en c:\Mis Documentos\Mis Web del ordenador del PNTIC. El ordenador del PNTIC tiene su propia estructura y organiza sus propias ubicaciones. La dirección absoluta que era válida en tu ordenador, no lo es en el del PNTIC. La conclusión es que las direcciones absolutas no deben utilizarse, salvo excepciones, más que para vínculos externos: http:// ...

Ubicación relativa se refiere respecto de la página principal (index). Si tienes todas las páginas de tu sitio Web en la misma carpeta, la dirección relativa es simplemente el nombre del fichero, sin nada por delante. Si tu sitio Web no es excesivamente complejo, ésta puede ser la solución más aconsejable. Al remitirlo a tu proveedor de Internet, las direcciones relativas funcionan exactamente igual que en tu ordenador. Si alojas tus distintas páginas Web en carpetas que cuelgan de la principal, la dirección relativa es la ruta desde la página principal hasta la carpeta y fichero en cuestión. Se supone que remitirás a tu proveedor de Internet toda tu estructura de subcarpetas a partir de la principal. Entonces, volvemos a insistir, las direcciones relativas funcionarán en el proveedor perfectamente.

Cuando se maneja el cuadro de diálogo Crear Hipervínculo, y la forma de crearlo es el doble clic en el fichero de la página correspondiente, se están utilizando siempre direcciones relativas.

Si alguna vez pusieras las Direcciones URL a mano, te recordamos que has de poner el nombre del fichero de destino, y no el título de la página (que se crea en Archivo – Propiedades).

Marcadores

Ya se han explicado desde el Word, y funcionan en Front Page exactamente igual. Por ejemplo, veamos el marcador del próximo epígrafe. Hemos ido al título del epígrafe posicionando el cursor delante de la I de Imágenes. Luego se solicita Insertar – marcador, y le hemos puesto el nombre Imágenes. Así se crea el destino del marcador, con ese nombre. A continuación vas al quinto ítem del principio, a la quinta viñeta, seleccionas todo el texto IMÁGENES y das a Insertar – Hipervínculo. Eliges marcador y, de entre los que ofrece, Imágenes. Ya está creado. Cada vez que arriba hagas clic en IMÁGENES, el cursor se desplaza al epígrafe Imágenes del cuerpo del documento.

En el cuadro de diálogo Crear Hipervínculo (arriba expuesto) se ve la casilla MARCADOR debajo de Dirección URL. Esto quiere decir que cuando creo un vínculo, a una determinada página, puedo añadir un marcador, de forma que el salto sea a determinado punto de esa página de destino.

En resumen, un marcador puede crearse para moverse dentro de la propia página. En este caso, en Dirección URL sale como dirección: #Imágenes por ejemplo. Y también puede crearse para, al ejecutarse un vínculo a otra página, ir concretamente a un punto de la misma.

Hay vínculos de correo electrónico. Se crean con el icono . Es necesario introducir una dirección de correo electrónico, de ordinario aquélla en la que quiero recibir los mensajes de quienes visiten la página y quieran comunicarse conmigo. Una vez creados estos vínculos, haciendo clic en ellos se abrirá el Outook Express con la dirección prefijada puesta en el campo Para. Todo listo para enviar un e-mail.

Terminamos los tipos de vínculos con el vínculo a página nueva . Deseamos crear ahora el vínculo, pero la página de destino aún no ha sido creada. Entonces creo un vínculo a página nueva, poniendo el nombre que deseo a la página. Luego la confeccionaré.

Supongamos que, teniendo el sitio Web en avanzado estado de elaboración, deseo cambiar de nombre a alguna página, o moverla a otra ubicación. Nos preguntamos qué sucederá con los vínculos dirigidos al nombre antiguo y a la ubicación antigua. La respuesta es que, si el cambio se hace desde el Front Page, desde la Lista de carpetas, él mismo se encarga de actualizar los vínculos. Sin embargo, si los cambios se realizan por ejemplo desde el Explorador del Windows, entonces los vínculos se quedan sin destino. Se llaman vínculos rotos. Son vínculos que no funcionarán.

En Ver –Informes – Vínculos rotos puedes chequear si has tenido algún descuido en la confección de tu sitio Web que haya producido vínculos rotos.

Terminemos este epígrafe sobre hipervínculos viendo cómo se editan.

Estamos en Vista Página. Para borrar un hipervínculo, seleccionar su texto o imagen y cortar, o tecla Supr. Para cambiar ese texto, poner el punto de inserción en su interior y efectuar las modificaciones necesarias. Si el nuevo texto queda subrayado, significa que el vínculo ha sido correctamente modificado. Si lo que se desea es modificar su destino, hacer clic con el botón derecho y solicitar Propiedades, modificando los datos oportunos en el cuadro de diálogo de Modificar Hipervínculo. Dada la facilidad con la que se crean los vínculos, si tuvieras algún problema para modificar alguno casi vale la pena borrarlo y crear correctamente el nuevo.

Se puede presentar el caso de desear copiar vínculos externos desde una Web que estás visitando a tu sitio Web. Haz clic en ese vínculo con el botón derecho y pide Copiar Acceso Directo. A continuación lo pegas donde quieras. También es posible copiarlo simplemente arrastrándolo desde el Internet Explorer hasta tu página en el Front Page.

Habilitar los efectos de conversión de hipervínculos

Se encuentra en Archivo – Propiedades (Propiedades de página) –Fondo. Se solicita Habilitar ... y Efectos de conversión. Puedes determinar que cuando el visitante pase el ratón el texto se ponga intermitente, o en el color y tamaño que quieras, etc.

por: javier zabala

Posibilidades de formato. Sonido y algunos efectos con FrontPage 2000

2006-05-04T16:42:00.001+02:00

Tenemos un sitio Web compuesto de una única página y estudiaremos los procedimientos más usuales para hacerla un poco más vistosa, variada, con más recursos, todavía sin extendernos en el tratamiento de imágenes.

Otro pequeño detalle novedoso del Front Page respecto al Word es que dispone en Formato - Bordes de varios Estilos de borde.

Vamos a comentar Archivo - Propiedades ... (de página). La pestaña Márgenes se refiere a los de pantalla, si en algún caso se quieren utilizar. Si no hemos utilizado Temas, aparece también la pestaña Fondo. Puedes elegir una imagen como fondo y Front Page la dispondrá como mosaico. En un lugar de la pestaña General pone Sonido de Fondo. Has de poner el nombre del fichero y si deseas que se oiga siempre (como un bucle continuo) o que se repita sólo n veces. Los formatos de sonido más frecuentes son wav, que tiene bastante calidad y midi, que con una calidad ligeramente inferior ocupa menor espacio. En cualquier caso, el sonido supone bastantes KB, y en una página Web no es recomendable utilizar más que pequeños efectos para el clic del ratón y cosas así.

Por último, vamos a ver dos efectos vistosos. En Formato - Transición de página puedes crear fundidos y efectos de ese estilo. Has de señalar el evento (por ejemplo al abrir la página), el efecto (como mezclar o revelar) y la duración, que se recomienda sea de 2 a 5 seg.

Otro efecto se encuentra en Formato - Efectos de HTML dinámico. Empieza por seleccionar el texto que quieras destacar. Pide a continuación Formato - Efectos de HTML dinámico y rellena las tres celdas desplegables. Prueba con clic - Volar hacia fuera - A la izquierda.

por: javier zabala

FrontPage 2000: Vista página. Crear una web de una página

2006-05-04T16:42:00.000+02:00

Si arrancas el Front Page 2000 y abres una página como ésta, obtienes:

Observa que estamos en Vista – Página, y que debajo hay 3 pestañas: Normal, HTML y Vista previa. Vista Página - pestaña Normal es el lugar donde se trabaja una página Web. La pestaña HTML es para usuarios muy avanzados. Vista previa pretende mostrar la página tal como se visualizará desde el navegador (Internet Explorer o similar). El motivo es que en Normal aparecen símbolos (en la imagen puedes apreciar bastantes) que son códigos que luego no se verán desde el Internet Explorer. De todos modos la visualización desde la pestaña Vista previa no es exacta. Es posible que alguno de los tipos de letra programados desde el Front Page, no tengan correspondencia al ser leídos desde el Internet Explorer, puede suceder lo mismo con colores especiales.. Para ver exactamente el resultado, es necesario utilizar el icono de Vista Previa que pregunta cuál es tu navegador y exige haber grabado la página que deseas ver. La pestaña Vista previa es una buena orientación, nada más. Es conveniente dar a Ver – Barra de Vistas, para eliminar el marco de la izquierda y disponer de la pantalla completa.

Sigamos con la pestaña Normal. Mira a continuación la barra de herramientas ampliada para apreciar mejor los iconos que más nos interesan.

Lista de carpetas. Dedica una parte de la ventana de la vista a la estructura de carpetas. Es más interesante a medida que el sitio Web se complica. Funciona de manera semejante al Explorador del Windows: puedes abrir una página haciendo doble clic, desplegar y replegar carpetas, haciendo clic en los símbolos ? y ?, hacer clic con el botón derecho para obtener un menú contextual, mover y renombrar ficheros, etc. (Es distinto de la Vista – Carpetas que luego comentaremos).
Vista previa (icono ya mencionado). Muestra la página Web tal como se verá desde el navegador. Al utilizar por primera vez este icono, preguntará cuál es nuestro navegador. Para ver la página es preciso grabarla previamente.
Dejamos para más adelante los demás iconos.

En Herramientas – Personalizar – Comandos puedes añadir a las barras (de herramientas, de formato, etc.) los iconos que desees: los de mayor uso, para una utilización más rápida del programa.

Para crear una página Web puedes hacer clic en el icono izquierdo de la barra de herramientas: Nueva página. Es más correcto hacer clic en Archivo – Nuevo – Web, o bien en la flecha a la derecha de Nueva página y solicitar Web. Ahí señalas el tipo de Web (lo que puede habilitar el asistente correspondiente) y su ubicación. Si pides acto seguido la Lista de Carpetas, observarás que se ha creado la página index y las carpetas images y _private. Si lo deseas, cambia el nombre de la Web. El nombre de la página index no lo cambies. Cuando construyamos sitios Web compuestos de varias páginas, te recordaremos que es necesario que la página inicial se titule index. Se recomienda poner los nombres en minúsculas y no se permiten caracteres que no sean lícitos para nombre de ficheros.

Te recomendamos que comiences por elegir un Tema de Formato. Son parecidos a los señalados en el Word, pero más completos: varios niveles de viñetas, la línea horizontal sale mejor y tiene propuestas para los botones.

Cuando escribas, observarás que la tecla Intro cambia de párrafo dando un salto de dos líneas, mientras que Shift + Intro sólo salta una línea.

Front page es más limitado que Word a la hora de tratar el texto: tiene bastantes menos posibilidades. Así, no admite la justificación a ambos lados, derecha e izquierda, a la vez, no funciona el tabulador, etc.

Dispones de Insertar – Línea horizontal para facilitar la claridad de tu Web.

En Estilo se llama Encabezado a 6 niveles de títulos, desde el mayor al más pequeño. No lo confundas con cabeceras y pies.

Cuando necesitas viñetas anidadas (o en más de un nivel) la solución ofrecida por Temas es interesante. Una vez que has escrito líneas en el primer nivel de viñetas, un doble clic en el icono de aumentar la sangría pasa al nivel siguiente de viñetas. Vuelves a la situación anterior con un doble clic en disminuir sangría. Con listas numeradas existe la misma opción.

Nivel 1
Nivel 1

Nivel 2
Nivel 2

Nivel 3
Nivel 3

Nivel 2

Nivel 1

En el apartado Viñetas y numeración del menú de Formato existe otra opción interesante que es: Habilitar esquemas contraíbles. Consiste en que las viñetas de segundo nivel, pueden ser desplegadas o replegadas por el usuario con un doble clic.

Ten cuidado con los subrayados, pues la cultura de Internet lleva a esperar de ellos un vínculo. Sé restrictivo.

Hemos comentado unos cuantos detalles de Formato para que contaras con algunos elementos al crear tu primera Web. Han sido, sobretodo, aspectos relacionados con Formato - Temas. Damos como sabidas las posibilidades de formato del Word, que en buena parte se reiteran en el Front Page. En el próximo epígrafe ampliaremos posibilidades de Formato específicas de este programa.

Guardar un documento es elemental, como en cualquier programa Windows. El propio Front Page ha ido guardando las modificaciones más importantes que has creado, para remediar un posible olvido, fallo eléctrico, etc. Te recuerdo que las imágenes se guardan aparte. No es como en el Word. Aquí el fichero de la página Web sólo guarda, además del texto, el nombre de las imágenes y su ubicación, para luego cargarlas. Por eso al Guardar, sale un cuadro de diálogo que pregunta dónde se guarda cada imagen. Te recomendamos que las guardes en la carpeta images de esta página Web. (Atención: una vez guardadas, no las cambies de ubicación).

Posteriormente es elemental abrir páginas Web existentes (para continuar su elaboración por ejemplo). Puede interesarte la opción Herramientas – Opciones – Abrir automáticamente el Web más reciente al iniciar Front Page.

Páginas web con Word o con Power Point

2006-05-04T16:41:00.000+02:00

Una página Web tiene una componente importante de estética: fondos, tipos de letra, inserción de imágenes, etc. Si bien el programa FrontPage incluye muchas posibilidades, podemos empezar por la utilización del Word o del Power Point.

Probablemente quien lee estas líneas tiene cierta familiaridad con Word, desde luego mucha más que con el FrontPage. Pues bien, puede crear la página Web en Word y, al terminar, ordenar Archivo – Guardar como página Web, con lo que crea un archivo html, que estará disponible para leerse desde el Internet Explorer. Así de fácil.

Concretamente el Word tiene una opción muy apropiada para este caso que se encuentra en Formato – Temas. Esta opción ofrece conjuntos de fondos, tipos de letra, estilos, líneas horizontales, viñetas, etc., armonizados con gusto. El usuario dispone de 68 temas para elegir.

Pero los temas añaden otra característica: rompen con la paginación. Ordinariamente Word tiene en cuenta la paginación. Así por ejemplo, una imagen sale en una página o en la siguiente, pero no a caballo. De la misma manera, resulta poco estético poner como última línea de una página un titular, que se desarrolle en la página siguiente (líneas viudas y huérfanas). Al dar formato a un documento teniendo en cuenta la paginación, el hecho de añadir o suprimir después párrafos o imágenes puede descabalar el documento y es necesario revisar su presentación final. Pues bien, los temas eliminan estos problemas. Van orientados a documentos que se van a consultar preferentemente en pantalla, como las páginas Web. Puesto que se está creando un documento que se va a leer en pantalla, no tiene sentido la división en páginas. Se crea un documento continuo. Puedes poner las imágenes donde quieras, despreocuparte de la posición de los titulares respecto del principio o fin de página. Se trabaja como en un papel continuo de verdad, insertas y borras sin que nada se desajuste.

No vamos a explicar aquí cómo crear con Word un documento gráficamente atractivo: Word Art, autoformas, gráficos (de barras, circulares, etc.) cuadros de texto, inserción de imágenes, etc.

Una observación. Al guardar un documento como página Web se pierden algunas características menores. Así por ejemplo, si tienes palabras con doble subrayado, o con sombras, cuando guardes el documento recibirás el aviso de que se pierden esos detalles. Cuando guardas como página Web, comprueba que en guardar como tipo, figura Página Web.

Cuando guardas un documento de Word, obtienes un único fichero. En cambio, al guardar como página Web, obtienes un fichero principal pero también otros adicionales de forma automática, sin que tengas que hacer nada. Por ejemplo, las imágenes se graban aparte, de ordinario en formato gif. Así el documento principal no incluye las imágenes, sino sólo la llamada a esos ficheros. Son imágenes incrustadas en tu página. Naturalmente al enviar la página Web a tu proveedor de Internet debes remitir tanto el fichero principal como los demás que se han creado (en el ejemplo expuesto, ficheros de imágenes).

Marcadores

Cuando el documento no es breve, sino que ocupa unas cuantas pantallas, se necesita moverse con agilidad de una parte a otra del mismo. Esto se hace mediante los marcadores. Así, en este documento, debajo del titular, aparece un a modo de índice, con viñetas, señalando los distintos apartados del documento. Haciendo clic en cualquiera de los ítems de esos menús, sale en pantalla la parte del documento solicitada. De la misma manera, el botón ARRIBA es un marcador que lleva a principio del documento. Un marcador es un botón, una llamada que lleva a otra parte del documento.

Entendido lo que es un marcador y cómo se utiliza, veamos la forma de crearlo. Un marcador se crea en dos fases. Describiremos la creación del marcador de este epígrafe. Primero crearemos la señal o banderola en el punto de destino.

Se lleva el cursor a donde dice “PÁGINAS WEB CON WORD O POWER POINT” en el texto, como título de este epígrafe (la parte que está sin subrayar y sin viñetas, debajo del botón ARRIBA). Concretamente delante de la P. Solicitas Insertar – marcador, le pones como nombre Word y das a Aceptar.

Pero ¿desde dónde quiero que me envíen a ese punto? Desde arriba, desde el índice, donde dice lo mismo (PÁGINAS WEB CON WORD O POWER POINT) pero con viñetas y subrayado, debajo del título del documento. Pues bien: selecciono con el ratón todo este texto y pido Insertar - hipervínculo. Ahí solicitas marcador y, de los que te ofrece la pantalla, eliges Word. Has asociado a toda esa línea de texto del índice, en cualquier punto en el que se haga clic, un marcador que remite al punto deseado: el titulo del epígrafe en el cuerpo del documento.

Nos hemos extendido en cómo crear una página Web con Word. Si el lector maneja mejor el Power Point, puede crearla con él. Power Point tiene más facilidad de manejar algunos tipos de gráficos. En cambio no dispone de los temas. El Power Point por su naturaleza se presta a emplearse cuando el documento ocupa una pantalla y no más. Una vez creado el documento se graba en Archivo –Guardar como página Web. Son válidos los mismos comentarios que se han realizado respecto al Word, en particular los referentes a que las imágenes se graban en fichero aparte.

NOTA: Mientras no mejore la velocidad de Internet una página Web no debe ocupar más de 150 Kb incluidas las imágenes. De lo contrario, la mayoría de los visitantes se cansarán de la espera y detendrán la carga de la página, para ir a visitar otra.

LECCION 12: ¿Qué es un Nombre de Dominio (DNS)?

2006-05-04T16:03:00.001+02:00

Se le llama Nombre de Dominio (DNS) al nombre con que indentificamos a nuestro servidor en el Internet. Por ejemplo, un nombre de dominio puede ser GOOGLE.COM, SECMAS.GUA.NET o bien LECCIONWEB.ORG, etc. etc.

Pero para tener un Nombre de Dominio no es indispensable tener un servidor propio o una dirección IP, basta con tener una página puesta en cualquier servidor (gratuito o pagado) para poder comprar nuestro Nombre de Dominio (DNS). Y esto se debe a que en la actualidad las compañías que venden nombres de dominio tienen un servicio gratuito que se denomina REDIRECCIONAMIENTO lo cual significa que si tenemos nuestra página en GEOCITIES, en una dirección bastante larga como http://www.geocities.com/Area51/cavern/1706 podemos hacer que nuestro Nombre de Dominio apunte hacia esa dirección por medio del redireccionamiento y podría llamarse por ejemplo: PRUEBA.BIZ.

Lo ideal de los Nombres de Dominio es que sean nombres pequeños ya que ellos se graban mas fácil en la mente de los usuarios de Internet, por ejemplo un nombre corto como GOOGLE.COM a todo mundo se le queda grabado pero un nombre como BUSCADORDEPAGINASWEBGOOGLE.COM sería muy difícil de recordar siempre.

Para poder tener nuestro propio Nombre de Dominio es necesario comprarlo, aunque en la actualidad hay bastantes lugares que ofrecen Nombres de Dominio gratuitos, pero esto en realidad no es un Nombre de Dominio sino que es un Sub Dominio; la forma como esto funciona es que uno aplica para tener un nombre como por ejemplo PRUEBA.COM.TK entonces el dueño de ese Dominio .TK lo que hace es crear un redireccionamiento dentro de su servidor para que apunte hacia nuestra dirección URL; ahora bien, todo tiene un costo y es que siempre que uno entre a esos lugares de redireccionamiento gratuito, se desplegará un anuncio y muchas veces es un poco molesto. Los Nombres de Dominio en la actualidad no son muy caros de comprar en HOSTNDOMAINS.COM por ejemplo, un nombre de dominio puede costar al rededor de US$9.90 por año.

Para verificar si el Nombre de Dominio que queremos para nuestra página no lo tenga otra persona se hace necesario de ciertos utilitarios que nos ayudan a verificar si el Nombre que queremos comprar está disponible, para hacer una prueba, puede utilizar el siguiente enlace:

Ingrese el nombre que desea buscar:
www.

por: sergio cabrera

LECCION 11: ¿Cómo subir mi página al servidor de SecmasNET?

2006-05-04T16:03:00.000+02:00

Para subir la página que acabamos de hacer al servidor de SecmasNET o a cualquier otro servidor, se puede hacer de dos maneras utilizando un programa FTP o bien utilizando nuestro Panel de Control en la función "FILE MANAGER".

El programa FTP puede ser cualquier programa que nos permita hacer transferencia de archivos de nuestra máquina hacia un servidor. El que normalmente se usa es uno que se llama WS_FTP LE el cual se puede conseguir gratuitamente desde:

http://www.download.com

La forma de utilizar el FTP es muy sencilla, luego de haber pagado tu espacio en SecmasNET (para una oferta especial en los precios de alojamiento de SecmasNET visita ProyectoWEB) deberás recibir un correo electrónico en donde se te dan los datos como: NOMBRE DE USUARIO, CONTRASEÑA y la dirección hacia donde debe de apuntar el FTP para subir tus archivos. Lo bueno de los programas FTP es que te permiten de un modo muy simple y seguro crear directorios en el servidor, subir archivos hacia diferentes lugares, eliminar archivos o directorios, poner las propiedades de los archivos (CHMOD), etc. etc. Esta es una imagen del programa WS_FTP LE:

Ahora bien si ya tenemos nuestra cuenta con SecmasNET también podemos utilizar el programa de "MANEJO DE ARCHIVOS (file manager)" que se encuentra en el Panel de Control. Esta es una vista del Panel de Control y del lugar donde se encuentra el "FILE MANAGER":

Una vez colocada nuestra página dentro de nuestro servidor, todo mundo podrá entrar a verla. Lo bueno de tener uno su propio servidor es que desde allí podemos crear cuentas de correo, hacer backups de nuestros datos y páginas, podemos manejar nuestras bases de datos, etc. etc. cosas que no son posibles con un servicio gratuito de alojamiento.

Además, contamos con la oferta de SecmasNET de que todos los usuarios de mis páginas pueden tener su propio servidor, su propio nombre de dominio y a un excelente precio. Para mas información por favor vaya a:

PROYECTO WEB por Sergio Cabrera
por: sergio cabrera

LECCION 10: ¿Cómo poner mi página en un buscador?

2006-05-04T16:02:00.000+02:00

Luego de pasarnos horas haciendo nuestra página, deseamos que todo mundo pueda acceder a ella, entonces se hace necesario poder ponerla en un buscador como GOOGLE, ALTAVISTA, etc. Esto se hace para que toda la gente que busca información relacionada con nuestra página pueda encontrarla y ver lo que tanto nos ha costado hacer..

Pues bien, contrario a lo que mucha gente cree, el incluir una página en un buscador es una tarea muy sencilla, lo único que hay que hacer es saber hacerlo. He aquí, una forma de hacerlo para lo que es el buscador llamado ALTAVISTA. El ingresar una página aquí es muy similar a ingresarla en cualquier otro buscador. Es por ello que este ejemplo nos dará una idea de como hacerlo en cualquier otro:

1. Deberemos ingresar al buscador en donde queremos poner nuestra página, para este ejemplo, entremos a:

http://www.altavista.com

2. Estando allí busquemos lo siguiente:

3. Entremos a ese LINK y nos aparecerá una página donde deberemos seleccionar "ENVIO BASICO" que es la forma gratuita de poner nuestra página:

4. Listo, ahora solamente siga los pasos que allí se detallan para que el servidor de ALTAVISTA verifique si la página cumple son sus requisitos y, si los cumple, deberemos esperar de 2 a 4 semanas para ver que aparezca en los resultados de sus búsquedas.

Si desea ver otro ejemplo de como ingresar datos a un buscador, vaya a la siguiente direccion:

DIRECTORIO DE PAGINAS WEB

por: sergio cabrera

LECCION 9: ¿Cómo poner un libro de visitas en mi página?

2006-05-04T16:01:00.000+02:00

¡¡¡ NECESARIO SABER HTML !!!

A veces deseamos tener una página en donde nuestros visitantes puedan poner sus impresiones, a esto es lo que llamamos "Libro de Visitas".

Para instalar el "Libro de Visitas" podemos hacerlo de varias formas, si nuestro servidor soporta CGI, o PHP (muchos servidores gratuitos no ofrecen estas opciones), podemos utilizar un SCRIPT ya desarrollado por otra persona y que sea de forma gratuita, y lo único que deberíamos hacer es montarlo en nuestro servidor, hacer algunas modificacicones y crear un LINK hacia esta nueva página.

Hay varios SCRIPTS de este tipo y el que yo he utilizado en algunas páginas requiere de PHP y MySQL para que funcione. Este se puede bajar de:

http://www.smartisoft.com/products.php?product=phpBook

Otro forma de incluir un libro de visitas en nuestra página, si no se cuenta con CGI o PHP, es utilizar un libro que esté alojado en otro lugar y desde nuestra página únicamente crear un LINK hacia ese sitio. En nuestra sección de recursos http://recursos.secmas.net hay direcciones de donde se puede conseguir este tipo de "Libros de Visitas"

Si desea ver un ejemplo de un Libro de Visitas vaya a la siguiente direccione:

LIBRO DE VISITAS DE "COMO HACER PÁGINAS WEB"

LECCION 8: ¿Cómo puedo poner un formulatio en mi página?

2006-05-04T16:00:00.001+02:00

¡¡¡ NECESARIO SABER HTML !!!

Muchas páginas necesitan tener una relación mas directa con las personas que las visitan y para ello se hace necesario el uso de formularios o 'FORMAS'.

Las FORMAS no son mas que campos en donde pedimos que el visitante ponga los datos que nos interesan, por ejemplo: el nombre, correo electrónico, dirección postal, fecha de nacimiento, etc. etc. Pero debido a que en una página WEB no queda grabada la información que los usuarios escriben, debemos recurrir a nuestro correo electrónico para recibir la información que los usuarios nos llenan en las FORMAS.

Ahora bien, para que esto funcione necesitamos tener un programa que se llama "FORM MAIL" el cual está hecho en lenguaje CGI (no todos los servidores dan acceso a programas CGI, pregunte con el administrador del servidor en donde usted tiene puesta su página si ellos tienen este programa disponible). Además, deberemos aprender algunos comandos de HTML.

Un ejemplo de una forma en donde pidamos el nombre y el correo electrónico sería:

< type="hidden" name="recipient" value="">su dirección email va aquí!">
< type="hidden" name="subject" value="">ASUNTO que ud. recibirá">
< type="hidden" name="redirect" value=""> URL a donde va a regresar">
Ingrese su Nombre:
< type="text" name="nombre" size="30" maxlength="40">
Ingrese su E-mail:
< type="text" name="email" size="30" maxlength="40">
< type="submit" value="ENVIAR">
< type="reset" value="BORRAR">

Lo anterior se vería de esta forma (no oprima enviar ya que esta forma no está funcionando):

Cada una de las líneas HTML anteriores se debe de entender de la siguiente manera:

Aquí estamos definiendo que vamos a utilizar una FORMA, el METODO a utlizar es POST, y la ACCION que vamos a ejecutar es un programa FormMail que se encuentra en la dirección: http://www.ejemplo.com/cgi-bin/formmail (este es un programa verdadero de FormMail, si su proveedor de espacio no le da el programa CGI para FORMAS, puede utilizar este).

su dirección email va aquí!">
En esta línea le estamos indicando al programa CGI anterior cual es la dirección de correo en donde deseamos recibir la información que el usuario está llenando. Cuando se declara HIDDEN la información quiere decir que el usuario no va a ver esta línea en nuestra página WEB.

subject que ud. recibirá">
Como es un correo el que vamos a recibir desde nuestra página, deberemos indicarle al programa CGI que nos envie el ASUNTO o SUBJECT del correo. Aquí usted puede escribir cualquier cosa, por ejemplo "Datos enviados desde mi página..." y el nombre de la página. Esto se hace por aquello de que tengamos varias páginas desde donde vamos a recibir información, sepamos de cual de ellas vienen los datos.

URL a donde va a regresar">
Aquí le estamos indicando al programa CGI que al terminar de recibir la información, lleve al usuario a una página WEB. Por lo general se envia al usuario a una página de agradecimiento por haber llenado la FORMA.

En esta instrucción estamos diciendo al programa CGI que tenemos una variable que se llama NOMBRE, la cual tiene un largo de 30 caracteres visibles y un máximo de 40. Si nos fijamos la siguiente línea HTML lo único que cambia es el nombre de la variable que se llama "email". Esto nos indica que podemos poner tantas variables como querramos, los largos visibles y máximos pueden ser cualquier tamaño. Al declarar a estas variables como tipo "TEXT" lo estamos dejando abierto para que el usuario pueda escribir cualquier cosa.

Este comando sirve para enviar toda la información que se acaba de llenar al programa CGI y este a su vez nos lo enviará a la dirección de correo que se definió anteriormente.

Este comando nos permite borrar toda la FORMA y poder volver a meter la información nuevamente.

Esto le indicará al código HTML que nuestra definición de la FORMA ya terminó. Este comando es muy importante ya que si no lo agregamos nuestra página contendrá errores.

Como ve, el crear FORMAS no es tan difícil. Lo único es tener un poco de experiencia con código HTML para saber donde poner esta información.

Si desea ver ejemplos de una FORMA vaya a las siguientes direcciones:

EJEMPLO DE FORMAS #1
EJEMPLO DE FORMAS #2

por: sergio cabrera

LECCION 7: ¿Cómo puedo agregar imágenes de fondo a mi página?

2006-05-04T16:00:00.000+02:00

Poner una imágen de fondo a una página WEB es muy sencillo. Unicamente seleccione un dibujo GIF o JPG y defínalo en el NETSCAPE COMPOSER de la siguiente manera:

1. Ingrese a FORMATO.
2. Luego vaya a PROPIEDADES Y COLORES DE PAGINA.
3. Escoja la pestaña COLORES Y FONDO.

4. Escriba en donde dice: UTILIZAR IMAGEN el nombre del archivo que desea utilizar de fondo de su página.
5. Presione aceptar y listo.

Tenga presente que el dibujo que seleccione como fondo deberá ser de entre 1kb y 5kb para que cuando su página se esté abriendo en el navegador no tome demasiado tiempo en hacerlo.

Además, recuerde que cuando uno escoje una imágen de fondo o BACKGROUND, se debe de tener en cuenta que este dibujo se va a repetir automáticamente en toda la página, por ejemplo, si tenemos el siguiente dibujo:
La imagen se va a repetir a lo largo de su página y aparecerá algo similar al siguiente ejemplo:

EL FONDO APARECERA COMO
EN ESTE EJEMPLO.

Otro ejemplo sería el de esta imágen:

CON LA IMAGEN ANTERIOR, NUESTRA PAGINA TENDRA UN BORDE IGUAL A ESTE.

Para obtener imágenes de fondo puede ir a la siguiente dirección:

ALBUM DE IMAGENES

Allí encontrará variedad de imágenes que estoy seguro le van a ayudar en el diseño de su página WEB. A este álbum se irán agregando poco a poco imágenes de todo tipo para que usted pueda utilizarlas libremente. Si usted tiene imágenes que deseé compartir con la comunidad internauta no dude en enviármelas para poder ir agregándolas a este nuevo servicio.

por: sergio cabrera

LECCION 6a: ¿Cómo puedo agregar un contador a mi página?

2006-05-04T15:59:00.000+02:00

Muchas personas, incluyéndome entre ellas, nos gusta saber que cantidad de gente visita nuestras páginas. Para ello existen los CONTADORES, éstos son programas especiales que nos llevan un registro de las veces que han visitado o revisitado nuestras páginas.

Otros contadores también nos dan la oportunidad de saber información sobre la persona que visitó nuestra página, esta información es de gran ayuda para los diseñadores de páginas ya que nos permite saber por ejemplo, que tipo de navegador es el mas usado, que cantidad de colores se usan mas, que sistema DOS es el mas usado, etc. Todo esto sirve para que podamos hacer una página WEB de acuerdo a nuestros visitantes.

Los contadores pueden ser de dos tipos PAGADOS y GRATIS, yo prefiero los segundos. Y entre los que yo recomiendo están:

WebTracker, ExTreme

Para instalar el CONTADOR en su página, lo primero que tiene que hacer es ir a alguno de estos sitios y obtener una cuenta, para ello siga las indicaciones que allí aparezcan. Luego de haber creado su cuenta, ellos le darán algunos comandos que usted tiene que agregar a su página. Para agregar estos comandos, usted puede utilizar la opción, Etiqueta HTML que se encuentra en Insertar:

al entrar allí aparecerá la siguiente ventana, en donde se deberán ingresar los nuevos comandos. Si sale un error al ingresar estos comandos en este cuadro, entonces deberá utilizar un programa como WORDPAD de Windows en donde podrá modificar su código HTML directamente.

LECCION 6b: ¿Cómo puedo ponerle música a mi página?

Ponerle música a una página es de lo más sencillo, solamente haga lo siguiente:

Abra INSERTAR y luego ETIQUETA HTML.
Luego escriba los siguientes comandos dentro de esa ventana:

En donde dice su_archivo.mid ponga el nombre de su archivo de música.

La ventana de NETSCAPE COMPOSER debería haber quedado así:

Si todavía no tiene archivos de música busque en el internet, allí encontrará miles de archivos. Lo único es que debe de estar seguro que son con extensión MID, sino no funcionará el comando anterior.

Listo, ahora su página ya tendrá música.

LECCION 6c: ¿Cómo puedo ganar dinero con mi página?

Dentro del internet hay empresas que ofrecen dinero a todas aquellas personas que tengan páginas WEB y que estén dispuestas a colocar un BANNER (rótulo) dentro de ésta. La forma en que estas empresas trabajan es que por cada persona que visite el anuncio que allí está puesto, el dueño del sitio recibe un pago el cual puede variar entre us$0.01 hasta us$0.25 dependiendo del anunciante, y al llegar una cierta cantidad (usualmente us$100) la compañía envía un cheque al dueño del sitio.

Una de estas empresas es GOOGLE con su programa AdSense el cual pone un BANNER igual a los que aparecen en la parte de arriba de mis páginas. Para ingresar a este programa, haga CLICK aquí:

Espero que estos pequeños trucos les sean de gran utilidad. Suerte.

por: sergio cabrera

LECCION 5: ¿Qué hago para publicar la página que acabo de hacer?

2006-05-04T15:58:00.001+02:00

Al terminar de hacer todas las LECCIONES anteriores, usted ya estará listo para poder publicar su página en el INTERNET. Publicar una página se entiende por subir o montar su página a un servidor; y, para ello debe estar seguro que usted ya tiene un espacio disponible. Si todavía no lo tiene diríjase a su proveedor de servicio de Internet y pida el espacio que necesita. Si su proveedor no le dá este espacio GRATUITAMENTE entonces busque dentro del INTERNET lugares en donde se otorga gratuitamente este espacio. Algunos de los lugares mas comunes son:

EN ESPAÑOL: GEOCIETIES, TRIPOD, ESPACIO.YA, MIARROBA

EN INGLES: GEOCITIES, ANGEL FIRE, XOOM, FORTUNE CITY

Al obtener su espacio, su proveedor le dará un NOMBRE DE USUARIO (LOGIN) y una CONTRASEÑA (PASSWORD) necesarios para ingresar esta información dentro del servidor de páginas WEB. Según el lugar en donde usted guarde su página WEB, deberá seguir algunas reglas generales ya que algunos ISP tienen otras disposiciones.

Si usted ya tiene definido un NOMBRE DE USUARIO y una CONTRASEÑA entonces ya puede publicar su página en ese servidor; pero, independientemente de ello, como primera opción deberá guardar la página en la que ha estado trabajando a su disco duro, así que presione ARCHIVO (FILE) y GUARDAR COMO (SAVE AS) y póngale el siguiente nombre (todo en minúsculas): index.html. El nombre index.html es como se define en todos los servidores a la página principal de un sitio, si no le ponemos este nombre a la hora de entrar a ver nuestra página, ésta no se mostrará.

Luego le preguntará que nombre desea ponerle a esta página, esta información servirá para que cuando alguien haga un AGREGAR A FAVORITOS (ADD TO BOOKMARK) en el navegador, este nombre aparezca allí.

Ahora, conéctese al INTERNET y después presione el ícono PUBLICAR (PUBLISH), aquí aparecerá la siguiente ventana:

y deberá llenar todos los campos que se necesitan de la siguiente manera:

TITULO DE LA PAGINA: Nombre con el que se conocerá a este sitio, puede ser cualquier cosa, como por ejemplo: DESEOS DE UN HOTDOG.

NOMBRE DEL ARCHIVO HTML: Aquí pondremos el nombre del archivo que recién acabamos de guardar: index.html. Tengamos en cuenta que todos los nombres de las páginas deben estar en minúsculas.

DIRECCION HTML O FTP EN LA QUE PUBLICAR: Aquí deberemos escribir la dirección que nos dió nuestro proveedor del espacio, como por ejemplo: ftp://www.geocities.com/Area51/Cavern1706.

NOMBRE DEL USUARIO: Aquí deberemos poner el nombre que nos asignó nuestro proveedor del espacio.

CONTRASEÑA: Escribamos aquí la contraseña que nos asignó nuestro proveedor.

OTROS ARCHIVOS A INCLUIR: Para nuestro ejemplo seleccionemos la opción que dice "Archivos asociados a esta página" ya que de esta manera el programa automáticamente subirá las imágenes utilizadas en la elaboración de nuestra página.

¡¡¡ LISTO !!!

Ahora presione ACEPTAR y todo lo que usted ha hecho, inmediatamente será enviado al servidor para que cualquier otra persona pueda ver lo que usted ha creado.

Feliz creación de páginas...

NOTA: Si la forma de publicar anteriormente descrita NO funciona con el servicio donde está guardando su página, por favor vaya a la siguiente dirección de mi FORO:

http://www.leccionweb.org/foro/viewtopic.php?t=1147 en donde está explicado paso a paso como hacerlo por medio de FTP.

AUTOR: Sergio Cabrera

LECCION 4: ¿Cómo hago un ENLACE (link) de mi texto o gráfico?

2006-05-04T15:58:00.000+02:00

EJEMPLO DE UN ENLACE HACIA UNA DIRECCIÓN DE E-MAIL:

El ENLACE es la función que nos sirve para que cuando un usuario hace 'click' sobre un texto o gráfico, este texto o gráfico, lo lleve hacia otro lugar o hacia otra página WEB; entre los ENLACES más utilizados están los que nos hacen regresar hacia la página anterior o bien para que nos puedan enviar un email.

Para nuestro ejemplo vamos a preparar un ENLACE que haga que cuando alguien lo presione nos pueda enviar un correo, para ello, presionemos el ícono que se llama ENLACE. Ahora escriba en la casilla que dice ORIGEN DEL ENLACE su dirección de correo electrónico (en este caso vamos a escribir ejemplo@ejemplo.net). Y en la casilla que dice ENLAZAR CON escriba lo siguiente: mailto: ejemplo@ejemplo.net (Esté seguro que usted escribió bien la línea anterior en ese lugar de lo contrario no funcionará. Además, usted DEBE cambiar la dirección de correo por la suya). Esto debió haber quedado así:

Listo, de ahora en adelante su página ya tendrá un ENLACE para que le puedan escribir a usted con sólo presionar en donde diga su dirección de correo electrónico.

EJEMPLO DE UN ENLACE HACIA OTRA PAGINA EN EL INTERNET:

Al igual que los ejemplos anteriores, para hacer referencia hacia otra página WEB que esté en el Internet, usted deberá escribir en ORIGEN DEL ENLACE algo como por ejemplo lo siguiente:

LECCIONES GRATIS!!!

Y en ENLAZAR CON escriba lo siguiente:

http://www.leccionweb.org/index.html (siempre asegurese que la dirección que usted escribe, exista.)

Esto debería haber quedado así:

EJEMPLO DE UN LINK HACIA UNA DIRECCIÓN ANTERIOR:

Esto mismo es lo que se haría para hacer un ENLACE que lo regrese hacia un punto o página anterior a la que está diseñando ahora. Para ello, escriba en ORIGEN DEL ENLACE lo siguiente: PRESIONE AQUI PARA REGRESAR POR DONDE VINO. Y en ENLAZAR CON escriba lo siguiente:

javascript:history.go(-1)
(Esté seguro que usted escribió bien la línea anterior en ese lugar.)

Esto debería haber quedado así:

Si todo salió bien, su hoja deberá quedar igual a la que sigue cuando usted haga PRELIMINAR:

por: sergio cabrera

LECCION 3: ¿Cómo se inserta un gráfico?

2006-05-04T15:57:00.000+02:00

El insertar gráficos en este editor es la tarea mas emocionante, ya que debemos tener una foto o un dibujo arreglado para nuestros fines. Para efectos de nuestra lección copie los siguientes archivos a su computadora:

FOTO DE HOT DOG:

hotdog.gif

DIBUJO DE HOT DOG:

hotdogd.gif

Después de copiar estos archivos a su computadora, presione el ícono que dice IMAGEN, como usted verá aparecerá una ventana en la cuál se le pide que ingrese el nombre del archivo que quiere poner, presione en donde dice SELECCIONAR ARCHIVO... y busque la foto del HOT DOG que acabamos de copiar a su computador. Luego de seleccionarla, presione ACEPTAR y luego verá algo así

La posición de la foto va a depender de donde usted la quiera, para nuestro ejercicio la vamos a justificar hacia la izquierda y vamos a poner un texto al lado derecho de la foto. Tiene que quedar así:

Las imágenes o gráficos también se pueden hacer mas grandes o pequeños, para ello se necesita únicamente dar 2 clicks sobre la imagen y aparecerá una ventana en donde podemos decirle cuanto queremos hacer grande o pequeña la imagen. Pruébelo... En esta ventana también puede ver como es que el texto se va a escribir a la par de la imagen.

Si usted utiliza alguna de estas opciones no olvide que en la hoja que está trabajando probablemente usted no va a ver como está quedando; pero para ver como va la hoja que usted está haciendo presione el ícono que dice PRELIMINAR .

Ahora, le toca su turno y al finalizar debe quedar una página igual a la que sigue al hacer PRELIMINAR:

por: sergio cabrera

LECCION 2: ¿Cómo se crea el TEXTO?

2006-05-04T15:56:00.000+02:00

Una vez usted ya tenga instalado el NETSCAPE COMMUNICATOR en su computadora, ejecútelo y entré al NETSCAPE COMPOSER (este es el programa que sirve para la creación de páginas web) y elijamos la opción del menú: NUEVA. Esto hará que nos aparezca una página en blanco que es donde comenzaremos a trabajar.

Como usted ya se habrá dado cuenta NETSCAPE COMPOSER tiene un panel de control igual o similar a este:

Pues bien, estos íconos son los que nos van a ayudar a ir poniendo el TEXTO o IMAGENES en los lugares que lo deseemos.

Como primer punto escribamos el TITULO de la hoja que vamos a crear.

Ahora, justifiquémosla al centro de la página:

Ahora, hagámosla NEGRITA y con un valor de 18 puntos, tiene que quedar así:

Ahora, vamos a crear el cuerpo de la página WEB, para ello escriba el siguiente párrafo por abajo del título que acaba de crear. Tiene que quedar así:

Como puede ver, es muy parecido a trabajar con un procesador de palabras común y corriente. Ahora le toca a usted escribir cualquier párrafo, trate de usar las NEGRILLAS, las ITALICAS y el SUBRAYADO.

por: sergio cabrera

LECCIÓN 1: ¿cómo empezamos?

2006-05-04T15:52:00.000+02:00

Bienvenido a lecciones web, si usted llegó a este sitio es por que está tratando de crear una página web desde el principio, y que mejor manera que hacer una página web sencilla para darse una idea.

Me gustaría contarle que gracias a estas lecciones, miles de personas han tenido la oportunidad de empezar y llegar a convertirse en verdaderos Web Masters, por supuesto, debido a la gran dedicación que le han puesto para seguir adelante. He aquí unos ejemplos de lo que algunos de nuestros usuarios han podido llegar a realizar:

¿Qué se necesita para hacer una página WEB?

Como primera cosa, se necesita que el usuario tenga un conocimieto avanzado en el uso de computadoras; además, el material que se necesita para la creación de las páginas es el siguiente:

Computadora PC o Macintosh.

Todas nuestras lecciones están basadas en una computadora PC con sistema operativo WINDOWS.

Cualquier programa editor de páginas WEB.

Aunque se puede utilizar cualquier editor de páginas, aquí en nuestras lecciones, nos basaremos en el programa NETSCAPE COMMUNICATOR versión 4.X ó mejor. Esto no quiere decir que otros programas como Front Page o Dreamweaver no sean buenos, sino que utilizaremos el COMMUNICATOR simplemente por que es gratuito, es muy fácil de utilizar y por que de esa manera podemos estar sicronizados en los comandos para ir haciendo nuestra primera página web.

Si usted no tiene este programa, puede bajarlo GRATIS del siguiente lugar:

NETSCAPE COMMUNICATOR 4.78
(ver. Español)

Ha salido una versión mejorada del NETSCAPE COMPOSER, éste ha sido hecho por la empresa NVU y el cual se mira muy bueno, yo estoy comenzando a utilizarlo, es posible que en un futuro muy cercano esté modificando mis lecciones hacia este nuevo editor. Si usted quiere tener una copia puede bajarla directamente de este enlace:

EDITOR NVU (ver 0.90)
(ver. Inglés)

Espacio en un servidor en donde se guardará la página creada.

Usted necesita de un espacio en un servidor para poder subir sus páginas WEB; hay de muchos tipos y de todos los precios desde gratuitos hasta pagados.

MEJOR VALOR: Entre los pagados y como una contribución a fortalecer a todos los principiantes de "Cómo hacer páginas WEB", SecmasNET nos ha dado una oferta que no se puede conseguir en ningún otro lado, para mayor información visite:

PROYECTO WEB

Si usted busca espacio gratuito, asegúrese primero que su proveedor de servicio de Internet pueda asignarle ese espacio. Si su proveedor no le facilita este espacio entonces usted puede encontrar en el Internet muchos sitios donde otorgan espacio gratuito para poner páginas WEB. Lea la LECCION 5 donde damos direcciones de espacios gratuitos.

Cualquier programa editor de archivos gráficos.

Entre ellos pueden estar COREL DRAW, FREE HAND, PAGE MAKER. En mis lecciones todo ha sido creado utilizando el COREL DRAW 7.0.

Cualquier programa editor de TEXTOS en formato ASCII.

En la PC con el programa WORDPAD es más que suficiente.

por: Sergio Cabrera