Site hosted by Angelfire.com: Build your free website today!
Página Nueva

Cambiar
    propiedades
    del Texto


Poner una
imágen de fondo
 
                              
Poner un
sonido
de fondo       

                     
Insertar
    imágenes


Crear links



Volver a
   herramientas

                      

tutorialN.jpg (12863 bytes)

El Composer es un editor de html que viene con el Netscape Communicator. Este tutorial te ayudará a crear páginas sencillas, sin tener conocimientos previos.

  1. El primer paso es crear un directorio (carpeta) nuevo en tu disco duro donde guardarás la página. De ahora en adelante, vamos a suponer que todos los archivos necesarios para la página estan en el mismo directorio, ya que es la manera mas sencilla de hacerlo. A ese directorio debes copiar todas las imágenes que usarás en la página.
  2. Abre el Composer (desde el menu de inicio, o desde el Navegador en la barra de herramientas donde dice Communicator--> Composer). 
  3. Pulsa sobre new para crear una página en blanco nueva. Escoge blank page.
  4. En la barra de tareas, ve a Format -> Page Colors and Properties y en Títle escribe el titulo que hayas escogido para tu página web. (Este título no se ver en pantalla, pero debe ser breve y descriptivo, ya que es el que aparecerá en la barra de títulos del explorador y cuando alguien agregue tu página a sus favoritos). En esta pantalla tambien debes ingresar una descripción de tu web y las keywords que son las palabras claves con las cuales quieres que la gente encuentre tu web en los buscadores. Composer se encargará con estos datos, de crear las meta tags que serán muy utiles cuando te des de alta en los buscadores.
  5. Pulsa sobre save   y la guardas como index.html en el directorio que has creado antes.
  6. Vuelve a la barra de tareas y ve a Format -> Page Colors and Properties--> Colors and Background. Si vas a utlizar una imagen de fondo, escribe el nombre de la imagen donde dice: Background image, y le das a Aceptar. En esta misma pantalla si lo deseas puedes cambiar el color del fondo (en caso de que no utilices ninguna imágen) el color del texto y de los links.
  7. Ahora el cursor estara situado sobre la pagina en si. Escribe el nombre de la pagina. Si quieres centrar el texto dale a centrar y escoge la segunda casilla.
    EncabezadoSelecciona todo el texto y ve al primer menu despegable de la barra de tareas. Pulsa sobre la flecha y escoge uno de los encabezados "Heading" de las opciones que aparecen. Si quieres cambiar el color del texto, le das a n12.jpg (1247 bytes) (manteniendo el texto seleccionado) y escoges el color que quieras del menu desplegable, teniendo en cuenta que combine con el fondo.



  8. Si quieres insertar un sonido de fondo (previamente habrás copiado el midi o wav en la carpeta que estamos utilizando) tendrás que hacerlo "a mano". Para ello ve a Insert --> Html tag y escribe: 

    <embed src="nombredeltema.mid" weight="200" height="55" loop="true"
    autostart="true"  hidden="true">
    <bg sound="nombredeltema.mid" loop="-1">

    Lógicamente, lo que está en rojo lo cambias por el nombre de tu archivo mid. ¿Por qué dos etiquetas o tags? Una para que lo puedan escuchar los que usan Netscape navigator y la segunda para los que usan el Microsoft Explorer.

  9. Ahora puedes escribir lo que quieras en el cuerpo de la página. Esto ya depende del tipo de página que quieras crear. Para separar parrafos, usa la tecla "intro". Para crear solo "puntos y aparte" usa "mayusculas + intro".
  10. Para insertar una imagen, le das a image. En image location escribe el nombre de la imágen que quieras insertar o buscala en la carpeta con el boton chooser file.


    Image PropertiesText alignmen
    t te permite escoger si quieres que el texto rodee la imagen, se ubique en la parte superior  media o inferior de la imagen.
    Las dimensiones  conviene no tocarlas a menos que sea muy necesario.
    Space around the image: asegurate que Solid border esté en 0 si vas a usar la imagen como link, a menos que quieras que aparezca el borde de color que indica que esa imagen es un link.
    Alt text: Es el texto que aparece mientras se carga la imagen y al pasar el cursor del mouse sobre ella. Es conveniente ponerlo siempre.
    Para centrarla, clickea sobre ella  y le das al mismo menu desplegable que usaste para centrar el texto  de nuevo.

  11. Para crear un link o enlace, selecciona el texto que deseas y le das a Link.
    En el cuadro de dialogo que aparece, donde dice link to a page location or local file escribes:
    a) Si es un link a una pagina externa a tu web, escribes la direccion completa, por ejemplo: http://www.yahoo.com
    b) Si es a otra pagina de tu propia web, escribes solo el nombre, por ejemplo: links.htm
    c) Si es una direccion de email escribes:  mailto: y luego el email, por ejemplo,   mailto:pepe@yahoo.com
    d) Si es un enlace dentro de la misma página, antes debes seleccionar el texto de destino (un titulo por ejemplo) y presionar target, le dejas el nombre que aparece, o le das uno a tu eleccion (si vas a hacer varios de estos enlaces que sean nombres que no te confundan) y presionas OK.
    Ahora si, cuando vas a crear el link, vas a ver en la casilla donde dice target, el punto de destino que creaste antes, lo seleccionas, le das aceptar y listo.
    Similares procedimientos se siguen para crear links desde imágenes en vez de desde un texto.
     
  12. Para cambiar el formato de texto, selecciona primero el texto que quieras. Una vez hecho esto puedes pulsar sobre estos botones: n13.jpg (1813 bytes) el primero pone el texto en negrita, el segundo pone el texto en cursiva y el tercero lo Subraya . Puedes combinar mas de uno, o los tres. Con los tres obtendras por ejemplo el texto en cursiva, negrita y subrayado.
  13.  Otros formatos de texto los encuentras en el menu desplegable superior que ya hemos visto anteriormente. Hay que tener en cuenta que estos estilos se aplican a todo el parrafo y no solo a un trozo.
    n9.jpg (10350 bytes)
    Ejemplos:

    Heading1

    Heading 2

    Headging 3

    Heading 4

    Heading 5
    Heading 6

    Nota: No utilices nunca un encabezado para obtener un tamaño de texto o letra negrita, utiliza los botones determinados para eso. Los encabezados son para los títulos. De lo contrario se puede ver muy bien en tu navegador pero en tamaños grotescos en otros navegadores.

    Termino definido
                Definicion

    • Lista con viñetas
    • lista con viñetas
    1. lista con numerada
    2. lista numerada
  14. Para aumentar o disminuir el tamaño del texto, solo selecciona el texto en cuestión y le vas a la barra de herramientas: Format--> Size y escoges el tamaño deseado.
  15.  Para cambiar la fuente del texto, selecciona el texto que quieras y le das al segundo menu desplegabla de la barra de tareas y alli escoge la fuente que desees. 
    Fuentes
    Pero hay que tener en cuenta que no todo el mundo tiene las mismas instaladas en su equipo. Por ejemplo, puede que con la fuente "Baltazhar" el texto que quieres quede fabuloso para ti, pero si quien esté viendo la página no la tiene instalada, su navegador la visualizará con la fuente por defecto (que suele ser Times New Roman en equipos windows) obteniendo un resultado no deseado y generalmente poco agraciado. Para evitarlo usa fuentes comunes o ampliamente extendidas como por ejemplo Arial, Times new roman, Comic Sans Serif, Courier, Tahoma o Verdana.
  16. Guarda la pagina save. Ahora solo queda visualizarla en el navegador.  Para ello pulsa Preview.
  17. Como introducir un código html puro.(que viene a ser lo mismo que hiciste si insertaste un sonido de fondo).  Si quieres añadir un contador, un libro de visitas, o cualquier otro recurso de cgi externo, el código que te darán es html puro por lo cual si lo pegas normalmente en la página no serviría de nada porque el navegador lo vería como texto. Para introducir algo en código html, tienes que ir a Insert --> Htm tags. Ahora copia (Control + C) el código del contador, del libro de visitas o de lo que sea, (que te habrán facilitado en una pagina web o por email)  y lo pegas (Control + V) en la pantalla que se abre y le das a Aceptar.