[ - Primeros pasos en la edición de HTML - ]

-----------------> <------------------

por Sn!per Wolf

Esta es una pequeña introducción al mundo de las páginas web. Lo primero que debes hacer es conseguir un programa para hacer tu página si aún no lo tienes. Es recomendable empezar con el Frontpage o el Netscape Composer. El primero de ellos es el que voy a describir aquí, el segundo es muy parecido y espero que no resulte difícil adaptar las explicaciones. Se pueden descargar desde www.microsoft.com o www.netscape.com

También es posible editar documentos Html con Word, pero no es apto para cardíacos: realmente desesperante y no muy buenos resultados...

Lo segundo es armarse con grandes dosis de paciencia ya que no son programas demasiado amables, cuando se domine con fluidez es recomendable pasarse al Dreamweaver ( www.micrografx.com ) que constituye una herramienta mucho más profesional y con más posibilidades además de las básicas en los otros. La paciencia también nos será útil a la hora de mantener la página, ya que una vez hecha es bastante fastidioso ocuparse cada cierto tiempo de actualizarla y revisar los vínculos, fallos, etc, etc ;-P (experiencia propia)

Lo tercero es tener muy claro el contenido de la página y el diseño y organización de la misma. Si se tiene todo en la cabeza no hay más que empezar a trabajar directamente con los programas, pero si se necesita tener algo entre manos conviene abocetar el proyecto, hacer apuntes sobre papel y trabajar sobre eso (sobre todo los desordenados).

Los menús del Frontpage son bastante simples pero no están organizados de una forma cómoda (en el Dreamweaver esta casi todo desplegable en el menu emergente).

A continuación señalo lo más importante y dónde encontrarlo:

Insertar imagen. Para poner una imagen en la web, seleccionada desde dentro de vuestro disco duro (en formato JPG o GIF preferentemente, por la compresión) o desde una determinada URL (foto colgada en una web que quereis que aparezca tambien en la vuestra, esto no es muy recomendable por si el otro w-master cambia su web o borra la imagen)
Hipervínculo. Mediante la previa selección con el cursor, de una foto o un texto; al escribir una URL en el 'bracket' conseguiremos que todo el que haga click sobre dicha foto o texto vaya al sitio web que nosotros indiquemos, es decir, otras partes de nuestra página o un link a otras webs que nosotros queramos. Ejemplos: " http://w3.to/sniper_area " o " Sniper's shooting area "
* Marcador. Es un tipo de hipervínculo que dentro de un texto hace referencia a algo dicho anterior o posteriormente. Pinchando sobre él, el documento se sitúa automáticamente en el párrafo referenciado (edición : marcador)
* El resto de botones son más o menos los que encontraréis en el resto de programas del grupo Office, tipo Word, por ejemplo: imprimir, cortar, pegar, vista previa, guardar, abrir, nuevo, negrita, cursiva, subrayado, alineado, ayuda, etc
* Otras curiosidades útiles: los menús Insertar y Tabla ofrecen opciones que conviene explorar y/o combinar

 

Menú Emergente

El menú emergente es un tipo de menú que surge cuando pinchamos con el botón derecho del mouse en el fondo del documento html que estamos editando:

El menú varía en función de las cosas que tengamos ya incluidas, el básico incluye la función cortar, pegar, propiedades de página, propiedades de párrafo y propiedades de las fuentes. Este último sirve para cambiar el tipo de letra (mejor usar los estándar que pueda visualizar todo el mundo) y los colores y tamaños del texto. Propiedades de párrafo ajudica estilos predeterminados de organización en el texto y los títulos.

El menú más importante, propiedades de la página, nos permite seleccionar el color de fondo de la página, o incluso poner una foto repetida como mosaico de fondo (la que he puesto aquí imita un carrete cinematográfico), poner un título al documento (le sirve al internauta que guarda tu página en sus favoritos para recordarla más fácilmente con el nombre que tú le has dado), resaltar los hipervínculos con colores y poner sonido de fondo (preferentemente formato midi o wav MUY comprimido y de poca duración) que puede repetirse todo el rato o un número específico de veces (bucle)

Propiedades de la página tiene varias lenguetas que no hay que olvidar:

Nota: la marca de agua es un efecto que hace que el texto deslice sobre el fondo cuando lo estamos bajando con el navegador.

Elementos útiles

Los recursos más utilizados en el html son las tablas y los marcos. Yo suelo usar el primero, que es el que voy a explicar. El segundo, ni me gusta, ni lo manejo, así que daré una breve definición para que al menos reconozcáis lo que es:

Marco: es un html que contiene a su vez, otro en su interior. Suele aparecer como una franja a la izquierda o arriba del website que visitamos y por lo general contiene un menú con opciones del contenido de dicho site. Escojamos lo que escojamos el menú siempre está presente.

> Ejemplo de marco-menú a la izquierda: www.ffkta.com (¡este queda realmente bien! para variar...)

La tabla es un instrumento que también contiene el Word. Se puede hacer invisible (borde a tamaño cero: se ven sus efectos de alineación, pero no las 'cajas') o visible, con bordes de colores, borde doble, tabla dentro de tabla, etc. Permite organizar el texto y las fotos en filas y columnas, con tantas celdas como se desee. Ejemplo:

TEXTO FOTO
FOTO TEXTO
TEXTO FOTO TEXTO
FOTO TEXTO FOTO
LO QUE QUIERAS ídem ídem ídem ídem ídem ídem

Cuando incluimos una tabla en un documento html, y pinchamos con el botón derecho dentro de ella, se añaden funciones al menú emergente:

Propiedades de la tabla consiste en configurar el tamaño del borde, el color del borde, el color o imagen de fondo de las celdas, la alineación, etc la función propiedades de la celda aparece al seleccionar la celda sobre la que deseamos operar y las opciones de trabajo son mas o menos iguales que las de tabla, pero solo aplicadas a esa celda.

Según combinemos de acuerdo con nuestros gustos o/y necesidades, tendremos resultados, por ejemplo, de un texto organizado en columnas tipo periódico, o un texto rodeado de fotos que amenizan la vista.

> Ejemplo de marco a la izquierda y tablas con fondo de color para galerías de thumbnails: http://puppy.syste.ms

> Ejemplo de tabla con borde coloreado: http://www.oocities.org/sniper_area/ff8.html

Otra herramienta posible es la capa, propia del Dreamweaver y que permite un dominio absoluto del espacio de la página. Se pueden superponer capas en un documento html, llenándolas de texto o fotos y manipular su situación de forma parecida al uso de las fotos en los documentos de Word, aunque es precisamente esta libertad la dificultad que se presenta al visualizar las capas con el explorer, pues aparecen situadas de diferente forma que en el editor Dream. Para remediar esto deberemos aplicar un sistema de medida; o tener mucha suerte y que el caos haga bonito =P

> Ejemplo de capas superpuestas http://megaiss.com

Imágenes

Necesitas un logo... o bien pides a alguien que lo haga, o lo haces tu mismo... ¿después de todo lo que has trabajado necesitas que te lo hagan? ¡claro que no! hacer un logo es algo sencillo, pero requiere un mínimo de imaginación, lo mismo que al hacer una página web.

Para ello no te vale el editor Html, pues las fotos solo las puedes insertar, no dibujar. Necesitas un programa de diseño. Los 3 mejores que existen son el Picture Publisher, Photoshop y Paint Shop Pro. Siempre te queda la opción de hacerlo con el Paint pero no garantizo resultados... XD

Pic Publisher es de Micrografx; y Photoshop de www.adobe.com

Son bastante parecidos, pero quizá el más completo es el Pic. Sobre todo destaca por su factor de compresion (cuanto menos espacio en Kb ocupen tus fotos, más rápido les aparecerán en la pantalla a los internautas)

No puedo decir más pues el diseño es cuestión de gustos personales. Simplemente se selecciona un tipo de letra con el botón que tiene una 'A' y el color en la paleta. Después de aplican filtros y a ver como queda. En el caso de mi web, es un logo de tipo Impact con ajuste de color, filtro de luz de neón verde, plastificado y vírgulas.

El FTP

¿Qué es Ftp? Es un sistema de transmisión de datos. Una vez 'terminada' vuestra web, debéis buscar un servidor de host u hospedaje de páginas web, que os permita incluir vuestro site en el sistema www, parece complicado pero es sólo al principio. Expliquémoslo con un ejemplo, www.oocities.org allí podéis solicitar un espacio de unos 15 Mb para exponer vuestro trabajo al público. En la sección 'Upload y FTP' tenéis que rellenar los brackets con las localizaciones de los archivos en vuestro disco duro. No sólo tenéis que subir los documentos html, sino sus añadidos, es decir, las imágenes utilizadas dentro del mismo, sonidos, etc. La razón es muy sencilla, vosotros podéis ver la página perfectamente desde vuestro disco duro, pero un internauta vería el html sin las fotos, ya que evidentemente no tiene ningún acceso a vuestro disco duro.

A partir de aquí es todo lo mismo... ¡¡adelante!!

Sugerencias

También podéis poner un contador y/o un libro de visitas. Suelen tener estos servicios los mismos que proveen el de hospedaje. Tb hay contadores en www.beseen.com o www.counterbloke.com libros en www.theguestbook.com y podeis poner un foro abierto desde www.melodysoft.com o un canal de chat desde www.irc-hispano.org

Es un poquillo más complicado, pero siempre se pueden poner animaciones flash o shockwave en la web. El software necesario está en www.macromedia.com

Despedida

Esto es todo, ¿se hizo cortito, eh? ¡sólo han sido unas cuatro hojitas impresas! ;P

Espero haber sido de gran ayuda, aunque aquí no hay nada que no puedas aprender por ti mismo. Lo mejor es paciencia, concretación y curiosidad. El resto sale solo... ¡vivan los autodidactas! Ojalá subáis pronto vuestros proyectos a la Red. Suerte y ánimo.

Comentarios, dudas y sugerencias a:

sunaipa@hotmail.com

=)